refactor: routing & breadcrumb of account orders (history/detail)

src/app/core/store/orders/orders.effects.spec.ts

@@ -4,6 +4,7 @@ import { TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { provideMockActions } from '@ngrx/effects/testing';
 import { Action, Store, combineReducers } from '@ngrx/store';
+import { TranslateModule } from '@ngx-translate/core';
 import { cold, hot } from 'jest-marbles';
 import { RouteNavigation } from 'ngrx-router';
 import { Observable, noop, of, throwError } from 'rxjs';
@@ -53,6 +54,7 @@ describe('Orders Effects', () => {
             children: [{ path: 'receipt', component: DummyComponent }, { path: 'payment', component: DummyComponent }],
           },
         ]),
+        TranslateModule.forRoot(),
         ngrxTesting({
           reducers: {
             ...coreReducers,
@@ -411,4 +413,31 @@ describe('Orders Effects', () => {
       expect(effects.resetOrdersAfterLogout$).toBeObservable(expected$);
     });
   });
+
+  describe('setOrderBreadcrumb$', () => {
+    beforeEach(() => {
+      store$.dispatch(new orderActions.LoadOrdersSuccess({ orders }));
+      store$.dispatch(new orderActions.SelectOrder({ orderId: orders[0].id }));
+    });
+
+    it('should set the breadcrumb of the selected order', done => {
+      actions$ = of(new RouteNavigation({ path: 'any', params: { orderId: orders[0].id } }));
+      effects.setOrderBreadcrumb$.subscribe(action => {
+        expect(action.payload).toMatchInlineSnapshot(`
+          Object {
+            "breadcrumbData": Array [
+              Object {
+                "key": "account.order_history.link",
+                "link": "/account/orders",
+              },
+              Object {
+                "text": "account.orderdetails.breadcrumb - 00000001",
+              },
+            ],
+          }
+        `);
+        done();
+      });
+    });
+  });
 });

src/app/core/store/orders/orders.effects.ts

@@ -2,27 +2,42 @@ import { Injectable } from '@angular/core';
 import { Router } from '@angular/router';
 import { Actions, Effect, ofType } from '@ngrx/effects';
 import { Store, select } from '@ngrx/store';
+import { TranslateService } from '@ngx-translate/core';
 import { mapToParam, ofRoute } from 'ngrx-router';
 import { race } from 'rxjs';
-import { concatMap, filter, map, mapTo, mergeMap, switchMap, take, tap, withLatestFrom } from 'rxjs/operators';
+import {
+  concatMap,
+  debounceTime,
+  filter,
+  map,
+  mapTo,
+  mergeMap,
+  switchMap,
+  switchMapTo,
+  take,
+  tap,
+  withLatestFrom,
+} from 'rxjs/operators';
 
 import { ProductCompletenessLevel } from 'ish-core/models/product/product.model';
 import { OrderService } from 'ish-core/services/order/order.service';
 import { ContinueCheckoutWithIssues, LoadBasket } from 'ish-core/store/checkout/basket';
 import { LoadProductIfNotLoaded } from 'ish-core/store/shopping/products';
 import { UserActionTypes, getLoggedInUser } from 'ish-core/store/user';
+import { SetBreadcrumbData } from 'ish-core/store/viewconf';
 import { mapErrorToAction, mapToPayload, mapToPayloadProperty, whenTruthy } from 'ish-core/utils/operators';
 
 import * as ordersActions from './orders.actions';
-import { getOrder, getSelectedOrderId } from './orders.selectors';
+import { getOrder, getSelectedOrder, getSelectedOrderId } from './orders.selectors';
 
 @Injectable()
 export class OrdersEffects {
   constructor(
     private actions$: Actions,
     private orderService: OrderService,
     private router: Router,
-    private store: Store<{}>
+    private store: Store<{}>,
+    private translateService: TranslateService
   ) {}
 
   /**
@@ -216,4 +231,24 @@ export class OrdersEffects {
     ofType(UserActionTypes.LogoutUser),
     mapTo(new ordersActions.ResetOrders())
   );
+
+  @Effect()
+  setOrderBreadcrumb$ = this.actions$.pipe(
+    ofRoute(),
+    mapToParam('orderId'),
+    whenTruthy(),
+    switchMapTo(this.store.pipe(select(getSelectedOrder))),
+    whenTruthy(),
+    debounceTime(0),
+    withLatestFrom(this.translateService.get('account.orderdetails.breadcrumb')),
+    map(
+      ([order, x]) =>
+        new SetBreadcrumbData({
+          breadcrumbData: [
+            { key: 'account.order_history.link', link: '/account/orders' },
+            { text: `${x} - ${order.documentNo}` },
+          ],
+        })
+    )
+  );
 }

src/app/pages/account-order-history/account-order-history-page.module.ts

@@ -5,9 +5,19 @@ import { SharedModule } from 'ish-shared/shared.module';
 
 import { AccountOrderHistoryPageComponent } from './account-order-history-page.component';
 
-const routes: Routes = [{ path: '', component: AccountOrderHistoryPageComponent }];
+const routes: Routes = [
+  { path: '', component: AccountOrderHistoryPageComponent },
+  {
+    path: ':orderId',
+    data: {
+      breadcrumbData: [{ key: 'account.order_history.link', link: '/account/orders' }],
+    },
+    loadChildren: () => import('../account-order/account-order-page.module').then(m => m.AccountOrderPageModule),
+  },
+];
 @NgModule({
   imports: [RouterModule.forChild(routes), SharedModule],
+  exports: [RouterModule],
   declarations: [AccountOrderHistoryPageComponent],
 })
 export class AccountOrderHistoryPageModule {}

src/app/pages/account/account-page.module.ts

@@ -27,16 +27,6 @@ const accountPageRoutes: Routes = [
             m => m.AccountOrderHistoryPageModule
           ),
       },
-      {
-        path: 'orders/:orderId',
-        data: {
-          breadcrumbData: [
-            { key: 'account.order_history.link', link: '/account/orders' },
-            { key: 'account.orderdetails.breadcrumb' },
-          ],
-        },
-        loadChildren: () => import('../account-order/account-order-page.module').then(m => m.AccountOrderPageModule),
-      },
       {
         path: 'payment',
         data: { breadcrumbData: [{ key: 'account.payment.link' }] },