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

…unchout type context information Co-authored-by: Susanne Schneider <[email protected]>
intershop · Aug 20, 2024 · abba089 · abba089
1 parent 28d9846
commit abba089
Show file tree

Hide file tree

Showing 9 changed files with 23 additions and 15 deletions.
diff --git a/docs/guides/migrations.md b/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.

diff --git a/src/app/extensions/punchout/facades/punchout.facade.ts b/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),

diff --git a/...count-punchout-configuration/oci-configuration-form/oci-configuration-form.component.html b/...count-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>

diff --git a/...out/pages/account-punchout/account-punchout-header/account-punchout-header.component.html b/...out/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>

diff --git a/src/app/extensions/punchout/pages/account-punchout/account-punchout-page.component.html b/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"

diff --git a/src/app/extensions/punchout/shared/punchout-user-form/punchout-user-form.component.html b/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>
diff --git a/src/app/extensions/punchout/shared/punchout-user-form/punchout-user-form.component.spec.ts b/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();
   });

diff --git a/src/app/extensions/punchout/store/punchout-users/punchout-users.effects.spec.ts b/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/[email protected]', { format: 'oci' }]);
+      router.navigate(['/account/punchout/[email protected]'], { 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":"[email protected]"}
           `);
-          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":"[email protected]"}
           `);
-          expect(location.path()).toMatchInlineSnapshot(`"/account/punchout;format=oci"`);
+          expect(location.path()).toMatchInlineSnapshot(`"/account/punchout?format=oci"`);
         },
         error: fail,
         complete: done,

diff --git a/src/app/extensions/punchout/store/punchout-users/punchout-users.effects.ts b/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({