PWA URL Rewriting

e2e/cypress/integration/pages/shopping/family.page.ts

@@ -10,6 +10,6 @@ export class FamilyPage {
   readonly productList = new ProductListModule('ish-product-listing');
 
   static navigateTo(categoryUniqueId: string, page?: number) {
-    cy.visit(`/category/${categoryUniqueId}${page ? `?page=${page}` : ''}`);
+    cy.visit(`/cat${categoryUniqueId}${page ? `?page=${page}` : ''}`);
   }
 }

e2e/cypress/integration/pages/shopping/product-detail.page.ts

@@ -15,9 +15,9 @@ export class ProductDetailPage {
 
   static navigateTo(sku: string, categoryUniqueId?: string) {
     if (categoryUniqueId) {
-      cy.visit(`/category/${categoryUniqueId}/product/${sku}`);
+      cy.visit(`/sku${sku}-cat${categoryUniqueId}`);
     } else {
-      cy.visit(`/product/${sku}`);
+      cy.visit(`/sku${sku}`);
     }
   }
 

e2e/test-universal.sh

@@ -15,12 +15,12 @@ universalTest() {
 }
 
 universalTest 1 "${PWA_BASE_URL}/" "router-outlet><ish-home-page"
-universalTest 2 "${PWA_BASE_URL}/category/Computers.1835.151" "router-outlet><ish-category-page"
+universalTest 2 "${PWA_BASE_URL}/catComputers.1835.151" "router-outlet><ish-category-page"
 universalTest 3 "${PWA_BASE_URL}/login" "Forgot your password?"
 universalTest 4 "${PWA_BASE_URL}/register" "Create Account"
-universalTest 5 "${PWA_BASE_URL}/category/Computers.1835" "<h1>Notebooks and PCs</h1>"
-universalTest 6 "${PWA_BASE_URL}/category/Computers.1835" "<h3>PCs</h3>"
-universalTest 7 "${PWA_BASE_URL}/category/Computers.1835.151" "add-to-compare"
+universalTest 5 "${PWA_BASE_URL}/catComputers.1835" "<h1>Notebooks and PCs</h1>"
+universalTest 6 "${PWA_BASE_URL}/catComputers.1835" "<h3>PCs</h3>"
+universalTest 7 "${PWA_BASE_URL}/catComputers.1835.151" "add-to-compare"
 universalTest 8 "${PWA_BASE_URL}/home" "intershop-pwa-state"
 universalTest 9 "${PWA_BASE_URL}/home" "&q;baseURL&q;:"
 universalTest 10 "${PWA_BASE_URL}/home" "<ish-content-include includeid=.pwa.include.homepage.pagelet2-Include"

schematics/src/extension/factory.js

@@ -34,7 +34,7 @@ function createExtension(options) {
             artifactName: core_1.strings.classify(options.name) + 'RoutingModule',
             moduleImportPath: `${projectRoot}/extensions/${core_1.strings.dasherize(options.name)}/pages/${core_1.strings.dasherize(options.name)}-routing.module`,
         };
-        operations.push(registration_1.addImportToNgModuleBefore(appModuleOptions, 'AppNotFoundRoutingModule'));
+        operations.push(registration_1.addImportToNgModuleBefore(appModuleOptions, 'AppLastRoutingModule'));
         return schematics_1.chain(operations);
     };
 }

schematics/src/extension/factory.ts

@@ -58,7 +58,7 @@ export function createExtension(options: Options): Rule {
         options.name
       )}-routing.module`,
     };
-    operations.push(addImportToNgModuleBefore(appModuleOptions, 'AppNotFoundRoutingModule'));
+    operations.push(addImportToNgModuleBefore(appModuleOptions, 'AppLastRoutingModule'));
 
     return chain(operations);
   };

schematics/src/extension/factory_spec.ts

@@ -2,7 +2,7 @@ import { UnitTestTree } from '@angular-devkit/schematics/testing';
 import { noop } from 'rxjs';
 
 import {
-  createAppNotFoundRoutingModule,
+  createAppLastRoutingModule,
   createApplication,
   createModule,
   createSchematicRunner,
@@ -23,7 +23,7 @@ describe('Extension Schematic', () => {
       .pipe(
         createModule(schematicRunner, { name: 'shared' }),
         createModule(schematicRunner, { name: 'shell' }),
-        createAppNotFoundRoutingModule(schematicRunner)
+        createAppLastRoutingModule(schematicRunner)
       )
       .toPromise();
   });
@@ -55,7 +55,7 @@ describe('Extension Schematic', () => {
 
       import { AppRoutingModule } from './app-routing.module';
       import { AppComponent } from './app.component';
-      import { AppNotFoundRoutingModule } from './pages/app-not-found-routing.module';
+      import { AppLastRoutingModule } from './pages/app-last-routing.module';
       import { FooRoutingModule } from './extensions/foo/pages/foo-routing.module';
 
       @NgModule({
@@ -65,7 +65,7 @@ describe('Extension Schematic', () => {
         imports: [
           BrowserModule,
           AppRoutingModule,
-          FooRoutingModule, AppNotFoundRoutingModule
+          FooRoutingModule, AppLastRoutingModule
         ],
         providers: [],
         bootstrap: [AppComponent]
@@ -115,7 +115,7 @@ describe('Extension Schematic', () => {
     `);
   });
 
-  it('should throw if app module does not contain AppNotFoundRoutingModule', done => {
+  it('should throw if app module does not contain AppLastRoutingModule', done => {
     appTree.overwrite(
       '/projects/bar/src/app/app.module.ts',
       `import { BrowserModule } from '@angular/platform-browser';
@@ -143,7 +143,7 @@ export class AppModule { }
 
     schematicRunner.runSchematicAsync('extension', options, appTree).subscribe(noop, err => {
       expect(err).toMatchInlineSnapshot(
-        `[Error: did not find 'AppNotFoundRoutingModule' in /projects/bar/src/app/app.module.ts]`
+        `[Error: did not find 'AppLastRoutingModule' in /projects/bar/src/app/app.module.ts]`
       );
       done();
     });

schematics/src/store/factory_spec.ts

@@ -2,7 +2,7 @@ import { UnitTestTree } from '@angular-devkit/schematics/testing';
 import { mergeMap } from 'rxjs/operators';
 
 import {
-  createAppNotFoundRoutingModule,
+  createAppLastRoutingModule,
   createApplication,
   createModule,
   createSchematicRunner,
@@ -23,7 +23,7 @@ describe('Store Schematic', () => {
       .pipe(
         createModule(schematicRunner, { name: 'shared' }),
         createModule(schematicRunner, { name: 'shell' }),
-        createAppNotFoundRoutingModule(schematicRunner),
+        createAppLastRoutingModule(schematicRunner),
         mergeMap(tree => schematicRunner.runSchematicAsync('extension', { name: 'feature', project: 'bar' }, tree))
       )
       .toPromise();

schematics/src/utils/testHelper.js

@@ -29,12 +29,12 @@ function createModule(schematicRunner, options) {
     return (source$) => source$.pipe(operators_1.switchMap(tree => schematicRunner.runSchematicAsync('module', Object.assign({}, options, { project: 'bar' }), tree)));
 }
 exports.createModule = createModule;
-function createAppNotFoundRoutingModule(schematicRunner) {
+function createAppLastRoutingModule(schematicRunner) {
     return (source$) => source$.pipe(operators_1.switchMap(tree => schematicRunner.runExternalSchematicAsync('@schematics/angular', 'module', {
-        name: 'pages/app-not-found-routing',
+        name: 'pages/app-last-routing',
         flat: true,
         module: 'app.module',
         project: 'bar',
     }, tree)));
 }
-exports.createAppNotFoundRoutingModule = createAppNotFoundRoutingModule;
+exports.createAppLastRoutingModule = createAppLastRoutingModule;

schematics/src/utils/testHelper.ts

@@ -43,15 +43,15 @@ export function createModule(
     source$.pipe(switchMap(tree => schematicRunner.runSchematicAsync('module', { ...options, project: 'bar' }, tree)));
 }
 
-export function createAppNotFoundRoutingModule(schematicRunner: SchematicTestRunner) {
+export function createAppLastRoutingModule(schematicRunner: SchematicTestRunner) {
   return (source$: Observable<UnitTestTree>) =>
     source$.pipe(
       switchMap(tree =>
         schematicRunner.runExternalSchematicAsync(
           '@schematics/angular',
           'module',
           {
-            name: 'pages/app-not-found-routing',
+            name: 'pages/app-last-routing',
             flat: true,
             module: 'app.module',
             project: 'bar',

src/app/app.module.ts

@@ -6,7 +6,7 @@ import { CoreModule } from 'ish-core/core.module';
 
 import { AppComponent } from './app.component';
 import { QuotingRoutingModule } from './extensions/quoting/pages/quoting-routing.module';
-import { AppNotFoundRoutingModule } from './pages/app-not-found-routing.module';
+import { AppLastRoutingModule } from './pages/app-last-routing.module';
 import { AppRoutingModule } from './pages/app-routing.module';
 import { ShellModule } from './shell/shell.module';
 
@@ -19,7 +19,7 @@ import { ShellModule } from './shell/shell.module';
     ShellModule,
     AppRoutingModule,
     QuotingRoutingModule,
-    AppNotFoundRoutingModule,
+    AppLastRoutingModule,
   ],
   bootstrap: [AppComponent],
 })

src/app/core/directives/server-html.directive.spec.ts

@@ -38,7 +38,7 @@ describe('Server Html Directive', () => {
     it('should transform the given links to routing links', () => {
       expect(element).toMatchInlineSnapshot(`
         <div>
-          <div><a href="/product/8182790134362">Produkt</a></div>
+          <div><a href="/sku8182790134362">Produkt</a></div>
           <div><a href="http://google.de">Google</a></div>
           <div><a href="/basket">Basket</a></div>
         </div>
@@ -80,16 +80,16 @@ describe('Server Html Directive', () => {
 
     it('should transform the given media object source to the correct source', () => {
       expect(element).toMatchInlineSnapshot(`
-                <div>
-                  <img
-                    src="http://example.org/INTERSHOP/static/WFS/inSPIRED-Site/inTRONICS-b2c-responsive/inSPIRED-inTRONICS-b2c-responsive/en_US/logo%402x.png"
-                    alt=""
-                    width="92"
-                    height="92"
-                    style="width: unset;"
-                  />
-                </div>
-            `);
+        <div>
+          <img
+            src="http://example.org/INTERSHOP/static/WFS/inSPIRED-Site/inTRONICS-b2c-responsive/inSPIRED-inTRONICS-b2c-responsive/en_US/logo%402x.png"
+            alt=""
+            width="92"
+            height="92"
+            style="width: unset;"
+          />
+        </div>
+      `);
     });
   });
 

src/app/core/models/basket-feedback/basket-feedback.model.ts

@@ -1,5 +1,5 @@
 import { LineItem } from 'ish-core/models/line-item/line-item.model';
-import { Product } from 'ish-core/models/product/product.model';
+import { ProductView } from 'ish-core/models/product-view/product-view.model';
 
 export interface BasketFeedback {
   code: string;
@@ -13,6 +13,6 @@ export interface BasketFeedback {
 }
 
 export interface BasketFeedbackView extends BasketFeedback {
-  product?: Product;
+  product?: ProductView;
   lineItem?: LineItem;
 }

src/app/core/models/basket/basket.model.ts

@@ -7,6 +7,7 @@ import { BasketTotal } from 'ish-core/models/basket-total/basket-total.model';
 import { BasketValidationResultType } from 'ish-core/models/basket-validation/basket-validation.model';
 import { LineItem, LineItemView } from 'ish-core/models/line-item/line-item.model';
 import { Payment } from 'ish-core/models/payment/payment.model';
+import { createProductView } from 'ish-core/models/product-view/product-view.model';
 import { VariationProductMaster } from 'ish-core/models/product/product-variation-master.model';
 import { VariationProduct } from 'ish-core/models/product/product-variation.model';
 import { Product } from 'ish-core/models/product/product.model';
@@ -33,7 +34,7 @@ export interface Basket extends AbstractBasket<LineItem> {}
 export interface BasketView extends AbstractBasket<LineItemView> {}
 
 export const createBasketView = memoize(
-  (basket, products, validationResults, basketInfo): BasketView => {
+  (basket, products, validationResults, basketInfo, categoryTree): BasketView => {
     if (!basket) {
       return;
     }
@@ -43,7 +44,7 @@ export const createBasketView = memoize(
       lineItems: basket.lineItems
         ? basket.lineItems.map(li => ({
             ...li,
-            product: products[li.productSKU],
+            product: createProductView(products[li.productSKU], categoryTree),
             name: products && products[li.productSKU] ? products[li.productSKU].name : undefined,
             inStock: products && products[li.productSKU] ? products[li.productSKU].inStock : undefined,
             availability: products && products[li.productSKU] ? products[li.productSKU].availability : undefined,

src/app/core/models/content-view/content-view.helper.spec.ts

@@ -9,7 +9,7 @@ describe('Content View Helper', () => {
       [
         { input: 'route://category/Computers', expected: '/category/Computers' },
         { input: 'route://category/Home-Entertainment.SmartHome', expected: '/category/Home-Entertainment.SmartHome' },
-        { input: 'product://201807195@inSPIRED-inTRONICS', expected: '/product/201807195' },
+        { input: 'product://201807195@inSPIRED-inTRONICS', expected: '/sku201807195' },
       ],
       ({ input, expected }) => {
         it(`should transform ${input} to ${expected}`, () => {

src/app/core/models/line-item/line-item.model.ts

@@ -1,7 +1,7 @@
 import { BasketFeedback } from 'ish-core/models/basket-feedback/basket-feedback.model';
 import { BasketRebate } from 'ish-core/models/basket-rebate/basket-rebate.model';
 import { Price } from 'ish-core/models/price/price.model';
-import { Product } from 'ish-core/models/product/product.model';
+import { ProductView } from 'ish-core/models/product-view/product-view.model';
 
 export interface LineItem {
   id: string;
@@ -45,7 +45,7 @@ export interface LineItem {
 }
 
 export interface LineItemView extends LineItem {
-  product: Product;
+  product: ProductView;
   validationError?: BasketFeedback;
   info?: BasketFeedback;
 }

src/app/core/models/order/order.model.ts

@@ -2,6 +2,7 @@ import { Dictionary } from '@ngrx/entity';
 import { memoize } from 'lodash-es';
 
 import { Basket, BasketView } from 'ish-core/models/basket/basket.model';
+import { createProductView } from 'ish-core/models/product-view/product-view.model';
 import { VariationProductMaster } from 'ish-core/models/product/product-variation-master.model';
 import { VariationProduct } from 'ish-core/models/product/product-variation.model';
 import { Product } from 'ish-core/models/product/product.model';
@@ -26,7 +27,7 @@ export interface Order extends Basket, AbstractOrder {}
 export interface OrderView extends BasketView, AbstractOrder {}
 
 export const createOrderView = memoize(
-  (order, products): OrderView => {
+  (order, products, categoryTree): OrderView => {
     if (!order) {
       return;
     }
@@ -36,7 +37,7 @@ export const createOrderView = memoize(
       lineItems: order.lineItems
         ? order.lineItems.map(li => ({
             ...li,
-            product: products ? products[li.productSKU] : undefined,
+            product: products ? createProductView(products[li.productSKU], categoryTree) : undefined,
           }))
         : [],
     };

src/app/core/models/product-view/product-view.model.ts

@@ -58,7 +58,7 @@ export function createVariationProductMasterView(
       : () => [],
     defaultVariation: product.defaultVariationSKU
       ? once(() => createVariationProductView(entities[product.defaultVariationSKU], entities, tree))
-      : undefined,
+      : () => undefined,
   };
 }
 

src/app/core/pipes.module.ts

@@ -2,13 +2,13 @@ import { ModuleWithProviders, NgModule } from '@angular/core';
 
 import { AttributeToStringPipe } from './models/attribute/attribute.pipe';
 import { PricePipe } from './models/price/price.pipe';
-import { CategoryRoutePipe } from './pipes/category-route.pipe';
 import { DatePipe } from './pipes/date.pipe';
 import { HighlightPipe } from './pipes/highlight.pipe';
 import { MakeHrefPipe } from './pipes/make-href.pipe';
-import { ProductRoutePipe } from './pipes/product-route.pipe';
 import { SafeHtmlPipe } from './pipes/safe-html.pipe';
 import { SanitizePipe } from './pipes/sanitize.pipe';
+import { CategoryRoutePipe } from './routing/category/category-route.pipe';
+import { ProductRoutePipe } from './routing/product/product-route.pipe';
 
 const pipes = [
   AttributeToStringPipe,