refactor: use query parameter instead of hidden route parameter for p…

…unchout type context information

Co-authored-by: Susanne Schneider <s.schneider@intershop.de>

docs/guides/migrations.md

@@ -66,6 +66,9 @@ If so these wrapper configurations need to be replaced with `maxlength-descripti
 B2B users with the permission `APP_B2B_MANAGE_ORDERS` (only available for admin users in ICM 12.1.0 and higher) see now the orders of all users of the company on the My Account order history page.
 They can filter the orders by buyer in order to see only e.g. the own orders again.
 
+In preparation of the cXML punchout self service configuration we switched from a hidden route parameter that conveys the punchout type context information to an URL query parameter (e.g. `?format=cxml`).
+So customized routing within the punchout area needs to be adapted accordingly.
+
 ## From 5.0 to 5.1
 
 The OrderListComponent is strictly presentational, components using it have to supply the data.

src/app/extensions/punchout/facades/punchout.facade.ts

@@ -4,7 +4,7 @@ import { Observable, combineLatest } from 'rxjs';
 import { distinctUntilChanged, filter, map, switchMap } from 'rxjs/operators';
 
 import { HttpError } from 'ish-core/models/http-error/http-error.model';
-import { selectRouteParam } from 'ish-core/store/core/router';
+import { selectQueryParam } from 'ish-core/store/core/router';
 import { decamelizeString } from 'ish-core/utils/functions';
 import { whenTruthy } from 'ish-core/utils/operators';
 
@@ -45,7 +45,7 @@ export class PunchoutFacade {
   supportedPunchoutTypes$: Observable<PunchoutType[]> = this.store.pipe(select(getPunchoutTypes));
 
   selectedPunchoutType$ = combineLatest([
-    this.store.pipe(select(selectRouteParam('format'))),
+    this.store.pipe(select(selectQueryParam('format'))),
     this.store.pipe(select(getPunchoutTypes)),
   ]).pipe(
     filter(([format, types]) => !!format || types?.length > 0),

src/app/extensions/punchout/pages/account-punchout-configuration/oci-configuration-form/oci-configuration-form.component.html

@@ -60,7 +60,7 @@
         >
           {{ 'account.update.button.label' | translate }}
         </button>
-        <a [routerLink]="['/account/punchout', { format: 'oci' }]" class="btn btn-secondary">{{
+        <a [routerLink]="['/account/punchout']" [queryParams]="{ format: 'oci' }" class="btn btn-secondary">{{
           'account.cancel.link' | translate
         }}</a>
       </div>

src/app/extensions/punchout/pages/account-punchout/account-punchout-header/account-punchout-header.component.html

@@ -16,7 +16,7 @@ <h1>
 <div *ngIf="punchoutTypes?.length > 1">
   <ul ngbNav class="nav-tabs section" [(activeId)]="selectedType">
     <li *ngFor="let type of punchoutTypes" [ngbNavItem]="type" role="presentation">
-      <a ngbNavLink [routerLink]="['../punchout', { format: type }]">{{
+      <a ngbNavLink [routerLink]="['../punchout']" [queryParams]="{ format: type }" class="mb-0">{{
         'account.punchout.type.text' | translate : { '0': type }
       }}</a>
     </li>

src/app/extensions/punchout/pages/account-punchout/account-punchout-page.component.html

@@ -8,7 +8,8 @@
   <h2 class="mt-1">
     {{ 'account.punchout.user.list.heading' | translate : { '0': selectedType } }}
     <a
-      [routerLink]="['/account/punchout/create', { format: selectedType }]"
+      [routerLink]="['/account/punchout/create']"
+      [queryParams]="{ format: selectedType }"
       class="btn btn-secondary"
       data-testing-id="add-user-button"
     >
@@ -32,6 +33,7 @@ <h2 class="mt-1">
             <div class="float-right">
               <a
                 [routerLink]="[user.login]"
+                [queryParams]="{ format: selectedType }"
                 class="btn-tool"
                 title="{{ 'account.profile.update.link' | translate }}"
                 data-testing-id="edit-user"

src/app/extensions/punchout/shared/punchout-user-form/punchout-user-form.component.html

@@ -5,7 +5,9 @@
       <button type="submit" class="btn btn-primary" [disabled]="formDisabled" data-testing-id="punchout-user-submit">
         {{ (punchoutUser ? 'account.update.button.label' : 'account.user.new.button.create.label') | translate }}
       </button>
-      <a routerLink="../" class="btn btn-secondary">{{ 'account.cancel.link' | translate }}</a>
+      <a [routerLink]="['../']" [queryParams]="{ format: punchoutType }" class="btn btn-secondary">{{
+        'account.cancel.link' | translate
+      }}</a>
     </div>
   </div>
 </form>

src/app/extensions/punchout/shared/punchout-user-form/punchout-user-form.component.spec.ts

@@ -1,5 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
 import { FormlyForm } from '@ngx-formly/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { MockComponent } from 'ng-mocks';
@@ -13,7 +14,7 @@ describe('Punchout User Form Component', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ReactiveFormsModule, TranslateModule.forRoot()],
+      imports: [ReactiveFormsModule, RouterTestingModule, TranslateModule.forRoot()],
       declarations: [MockComponent(FormlyForm), PunchoutUserFormComponent],
     }).compileComponents();
   });

src/app/extensions/punchout/store/punchout-users/punchout-users.effects.spec.ts

@@ -103,7 +103,7 @@ describe('Punchout Users Effects', () => {
 
   describe('loadDetailedUser$', () => {
     it('should call the service for retrieving user', done => {
-      router.navigate(['/account/punchout/ociuser@test.intershop.de', { format: 'oci' }]);
+      router.navigate(['/account/punchout/ociuser@test.intershop.de'], { queryParams: { format: 'oci' } });
 
       effects.loadDetailedUser$.subscribe(() => {
         verify(punchoutService.getUsers('oci')).once();
@@ -147,7 +147,7 @@ describe('Punchout Users Effects', () => {
               message: "account.punchout.user.created.message"
               messageParams: {"0":"ociuser@test.intershop.de"}
           `);
-          expect(location.path()).toMatchInlineSnapshot(`"/account/punchout;format=oci"`);
+          expect(location.path()).toMatchInlineSnapshot(`"/account/punchout?format=oci"`);
         },
         error: fail,
         complete: done,
@@ -191,7 +191,7 @@ describe('Punchout Users Effects', () => {
               message: "account.punchout.user.updated.message"
               messageParams: {"0":"ociuser@test.intershop.de"}
           `);
-          expect(location.path()).toMatchInlineSnapshot(`"/account/punchout;format=oci"`);
+          expect(location.path()).toMatchInlineSnapshot(`"/account/punchout?format=oci"`);
         },
         error: fail,
         complete: done,

src/app/extensions/punchout/store/punchout-users/punchout-users.effects.ts

@@ -6,7 +6,7 @@ import { from } from 'rxjs';
 import { concatMap, exhaustMap, map, mergeMap, withLatestFrom } from 'rxjs/operators';
 
 import { displaySuccessMessage } from 'ish-core/store/core/messages';
-import { selectRouteParam } from 'ish-core/store/core/router';
+import { selectQueryParam, selectRouteParam } from 'ish-core/store/core/router';
 import { mapErrorToAction, mapToPayloadProperty, whenTruthy } from 'ish-core/utils/operators';
 
 import { PunchoutType } from '../../models/punchout-user/punchout-user.model';
@@ -41,7 +41,7 @@ export class PunchoutUsersEffects {
     this.actions$.pipe(
       ofType(loadPunchoutTypesSuccess),
       mapToPayloadProperty('types'),
-      concatLatestFrom(() => this.store.pipe(select(selectRouteParam('format')))),
+      concatLatestFrom(() => this.store.pipe(select(selectQueryParam('format')))),
       map(([types, selectedType]) => loadPunchoutUsers({ type: (selectedType as PunchoutType) || types[0] }))
     )
   );
@@ -63,7 +63,7 @@ export class PunchoutUsersEffects {
     this.store.pipe(
       select(selectRouteParam('PunchoutLogin')),
       whenTruthy(),
-      withLatestFrom(this.store.pipe(select(selectRouteParam('format')))),
+      withLatestFrom(this.store.pipe(select(selectQueryParam('format')))),
       concatMap(([, format]) =>
         this.punchoutService.getUsers(format as PunchoutType).pipe(
           map(users => loadPunchoutUsersSuccess({ users })),
@@ -80,7 +80,7 @@ export class PunchoutUsersEffects {
       concatMap(newUser =>
         this.punchoutService.createUser(newUser).pipe(
           concatMap(user =>
-            from(this.router.navigate([`/account/punchout`, { format: user.punchoutType }])).pipe(
+            from(this.router.navigate([`/account/punchout`], { queryParams: { format: user.punchoutType } })).pipe(
               mergeMap(() => [
                 addPunchoutUserSuccess({ user }),
                 displaySuccessMessage({
@@ -103,7 +103,7 @@ export class PunchoutUsersEffects {
       concatMap(changedUser =>
         this.punchoutService.updateUser(changedUser).pipe(
           concatMap(user =>
-            from(this.router.navigate([`/account/punchout`, { format: user.punchoutType }])).pipe(
+            from(this.router.navigate([`/account/punchout`], { queryParams: { format: user.punchoutType } })).pipe(
               mergeMap(() => [
                 updatePunchoutUserSuccess({ user }),
                 displaySuccessMessage({