refactor: use server setting for message-to-merchant checkout field

docs/concepts/configuration.md

@@ -165,7 +165,6 @@ Of course, the ICM server must supply appropriate REST resources to leverage fun
 | **B2B Features**             |                                                                                                                                                 |
 | businessCustomerRegistration | Create business customers on registration                                                                                                       |
 | costCenters                  | Cost center feature                                                                                                                             |
-| messageToMerchant            | Write a message to the merchant at checkout                                                                                                     |
 | orderTemplates               | Order template feature                                                                                                                          |
 | punchout                     | Punchout feature                                                                                                                                |
 | quickorder                   | Quick order page and direct add to cart input                                                                                                   |

docs/guides/migrations.md

@@ -12,6 +12,10 @@ kb_sync_latest_only
 The OrderListComponent is strictly presentational, components using it have to supply the data.
 The getOrders method of the OrderService doesn't fetch all related order data by default, you can provide an additional parameter to include the data you need.
 
+In ICM 11 the `messageToMerchant` flag can be configured in the back office and its setting is supplied by the `/configurations` REST call.
+For this reason the `messageToMerchant` feature toggle is removed as a configurable feature toggle.
+To still be able to configure the message to merchant feature via feature toggle in ICM 7.10 environments an [`ICMCompatibilityInterceptor`](../../src/app/core/interceptors/icm-compatibility.interceptor.ts) was introduced that can be enabled in ICM 7.10 based projects in the [`core.module.ts`](../../src/app/core/core.module.ts).
+
 ## From 4.2 to 5.0
 
 Starting with the Intershop PWA 5.0 we develop and test against an Intershop Commerce Management 11 server.

projects/requisition-management/src/app/pages/requisition-detail/requisition-detail-page.component.html

@@ -37,7 +37,7 @@ <h1>
 
     <h2>{{ 'approval.detailspage.order_details.heading' | translate }}</h2>
 
-    <div *ishFeature="'messageToMerchant'">
+    <div *ngIf="'shipping.messageToMerchant' | ishServerSetting">
       <!-- MessageToMerchant-->
       <ish-basket-merchant-message-view [data]="requisition" />
     </div>

projects/requisition-management/src/app/pages/requisition-detail/requisition-detail-page.component.spec.ts

@@ -2,12 +2,12 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { TranslateModule } from '@ngx-translate/core';
-import { MockComponent, MockDirective } from 'ng-mocks';
+import { MockComponent, MockDirective, MockPipe } from 'ng-mocks';
 import { of } from 'rxjs';
 import { instance, mock, when } from 'ts-mockito';
 
 import { AuthorizationToggleDirective } from 'ish-core/directives/authorization-toggle.directive';
-import { FeatureToggleModule } from 'ish-core/feature-toggle.module';
+import { ServerSettingPipe } from 'ish-core/pipes/server-setting.pipe';
 import { findAllCustomElements } from 'ish-core/utils/dev/html-query-utils';
 import { AddressComponent } from 'ish-shared/components/address/address/address.component';
 import { BasketCostSummaryComponent } from 'ish-shared/components/basket/basket-cost-summary/basket-cost-summary.component';
@@ -34,7 +34,7 @@ describe('Requisition Detail Page Component', () => {
     context = mock(RequisitionContextFacade);
 
     await TestBed.configureTestingModule({
-      imports: [FeatureToggleModule.forTesting('messageToMerchant'), RouterTestingModule, TranslateModule.forRoot()],
+      imports: [RouterTestingModule, TranslateModule.forRoot()],
       declarations: [
         MockComponent(AddressComponent),
         MockComponent(BasketCostSummaryComponent),
@@ -47,6 +47,7 @@ describe('Requisition Detail Page Component', () => {
         MockComponent(RequisitionRejectDialogComponent),
         MockComponent(RequisitionSummaryComponent),
         MockDirective(AuthorizationToggleDirective),
+        MockPipe(ServerSettingPipe, path => path === 'shipping.messageToMerchant'),
         RequisitionDetailPageComponent,
       ],
     })

src/app/core/core.module.ts

@@ -30,6 +30,8 @@ import { DefaultErrorHandler } from './utils/default-error-handler';
     StateManagementModule,
   ],
   providers: [
+    // include the ICMCompatibilityInterceptor to add support for REST API changes (e.g. messageToMerchant)
+    // { provide: HTTP_INTERCEPTORS, useClass: ICMCompatibilityInterceptor, multi: true },
     { provide: HTTP_INTERCEPTORS, useClass: PGIDChangeInterceptor, multi: true },
     { provide: HTTP_INTERCEPTORS, useClass: ICMErrorMapperInterceptor, multi: true },
     {

src/app/core/interceptors/icm-compatibility.interceptor.ts

@@ -0,0 +1,31 @@
+import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable, map, withLatestFrom } from 'rxjs';
+
+import { FeatureToggleService } from 'ish-core/feature-toggle.module';
+
+// not-dead-code
+/**
+ * provides a compatibility layer for REST API changes in newer ICM versions
+ * please enable the interceptor in the `core.module.ts` if needed
+ * e.g. `messageToMerchant` is no longer an environment feature toggle in ICM 11 but controlled by the configurations call
+ */
+@Injectable()
+export class ICMCompatibilityInterceptor implements HttpInterceptor {
+  constructor(private featureToggleService: FeatureToggleService) {}
+
+  intercept(req: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
+    if (req.url.endsWith('/configurations') && req instanceof HttpRequest) {
+      return next.handle(req).pipe(
+        withLatestFrom(this.featureToggleService.enabled$('messageToMerchant')),
+        map(([event, messageToMerchant]) => {
+          if (event instanceof HttpResponse && messageToMerchant && event.body?.data?.shipping) {
+            event.body.data.shipping.messageToMerchant = true;
+          }
+          return event;
+        })
+      );
+    }
+    return next.handle(req);
+  }
+}

src/app/pages/account-order/account-order/account-order.component.html

@@ -48,7 +48,7 @@ <h1>{{ 'account.orderdetails.heading.default' | translate }}</h1>
     </ish-info-box>
   </div>
 
-  <ng-container *ishFeature="'messageToMerchant'">
+  <ng-container *ngIf="'shipping.messageToMerchant' | ishServerSetting">
     <!-- MessageToMerchant-->
     <ish-basket-merchant-message-view [data]="order" />
   </ng-container>

src/app/pages/account-order/account-order/account-order.component.spec.ts

@@ -5,6 +5,7 @@ import { MockComponent, MockPipe } from 'ng-mocks';
 
 import { FeatureToggleModule } from 'ish-core/feature-toggle.module';
 import { DatePipe } from 'ish-core/pipes/date.pipe';
+import { ServerSettingPipe } from 'ish-core/pipes/server-setting.pipe';
 import { BasketMockData } from 'ish-core/utils/dev/basket-mock-data';
 import { AddressComponent } from 'ish-shared/components/address/address/address.component';
 import { BasketCostSummaryComponent } from 'ish-shared/components/basket/basket-cost-summary/basket-cost-summary.component';
@@ -32,8 +33,9 @@ describe('Account Order Component', () => {
         MockComponent(InfoBoxComponent),
         MockComponent(LineItemListComponent),
         MockPipe(DatePipe),
+        MockPipe(ServerSettingPipe, path => path === 'shipping.messageToMerchant'),
       ],
-      imports: [FeatureToggleModule.forTesting('messageToMerchant'), TranslateModule.forRoot()],
+      imports: [FeatureToggleModule.forTesting(), TranslateModule.forRoot()],
     }).compileComponents();
   });
 

src/app/pages/checkout-receipt/checkout-receipt/checkout-receipt.component.html

@@ -3,7 +3,7 @@
     <!-- header as content -->
     <ng-content></ng-content>
 
-    <ng-container *ishFeature="'messageToMerchant'">
+    <ng-container *ngIf="'shipping.messageToMerchant' | ishServerSetting">
       <!-- MessageToMerchant-->
       <ish-basket-merchant-message-view [data]="order" />
     </ng-container>

src/app/pages/checkout-receipt/checkout-receipt/checkout-receipt.component.spec.ts

@@ -1,9 +1,10 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { TranslateModule } from '@ngx-translate/core';
-import { MockComponent } from 'ng-mocks';
+import { MockComponent, MockPipe } from 'ng-mocks';
 
 import { FeatureToggleModule } from 'ish-core/feature-toggle.module';
+import { ServerSettingPipe } from 'ish-core/pipes/server-setting.pipe';
 import { BasketMockData } from 'ish-core/utils/dev/basket-mock-data';
 import { findAllCustomElements } from 'ish-core/utils/dev/html-query-utils';
 import { AddressComponent } from 'ish-shared/components/address/address/address.component';
@@ -31,8 +32,9 @@ describe('Checkout Receipt Component', () => {
         MockComponent(FaIconComponent),
         MockComponent(InfoBoxComponent),
         MockComponent(LineItemListComponent),
+        MockPipe(ServerSettingPipe, path => path === 'shipping.messageToMerchant'),
       ],
-      imports: [FeatureToggleModule.forTesting('messageToMerchant'), TranslateModule.forRoot()],
+      imports: [FeatureToggleModule.forTesting(), TranslateModule.forRoot()],
     }).compileComponents();
   });
 

src/app/pages/checkout-review/checkout-review/checkout-review.component.html

@@ -33,7 +33,7 @@ <h1 class="d-flex flex-wrap align-items-baseline">
     </div>
     <ish-basket-approval-info *ngIf="basket.approval" [approval]="basket.approval" />
 
-    <ng-container *ishFeature="'messageToMerchant'">
+    <ng-container *ngIf="'shipping.messageToMerchant' | ishServerSetting">
       <!-- MessageToMerchant-->
       <ish-basket-merchant-message-view [data]="basket" editRouterLink="/checkout/shipping" />
     </ng-container>

src/app/pages/checkout-review/checkout-review/checkout-review.component.spec.ts

@@ -2,12 +2,13 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
 import { FormlyModule } from '@ngx-formly/core';
 import { TranslateModule } from '@ngx-translate/core';
-import { MockComponent, MockDirective } from 'ng-mocks';
+import { MockComponent, MockDirective, MockPipe } from 'ng-mocks';
 import { spy, verify } from 'ts-mockito';
 
 import { ServerHtmlDirective } from 'ish-core/directives/server-html.directive';
 import { FeatureToggleModule } from 'ish-core/feature-toggle.module';
 import { BasketApproval } from 'ish-core/models/basket-approval/basket-approval.model';
+import { ServerSettingPipe } from 'ish-core/pipes/server-setting.pipe';
 import { makeHttpError } from 'ish-core/utils/dev/api-service-utils';
 import { BasketMockData } from 'ish-core/utils/dev/basket-mock-data';
 import { findAllCustomElements } from 'ish-core/utils/dev/html-query-utils';
@@ -47,9 +48,10 @@ describe('Checkout Review Component', () => {
         MockComponent(LineItemListComponent),
         MockComponent(ModalDialogLinkComponent),
         MockDirective(ServerHtmlDirective),
+        MockPipe(ServerSettingPipe, path => path === 'shipping.messageToMerchant'),
       ],
       imports: [
-        FeatureToggleModule.forTesting('messageToMerchant'),
+        FeatureToggleModule.forTesting(),
         FormlyModule.forRoot({
           types: [{ name: 'ish-checkout-review-tac-field', component: CheckoutReviewTacFieldComponent }],
         }),

src/app/pages/checkout-shipping/checkout-shipping-page.component.html

@@ -32,7 +32,7 @@ <h3>{{ 'checkout.shipping_method.selection.heading' | translate }}</h3>
         <ish-basket-order-reference [basket]="basket$ | async" />
       </ng-container>
 
-      <ng-container *ishFeature="'messageToMerchant'">
+      <ng-container *ngIf="'shipping.messageToMerchant' | ishServerSetting">
         <ish-basket-merchant-message [basket]="basket$ | async" />
       </ng-container>
     </div>

src/app/pages/checkout-shipping/checkout-shipping-page.component.spec.ts

@@ -1,13 +1,13 @@
 import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { TranslateModule } from '@ngx-translate/core';
-import { MockComponent, MockDirective } from 'ng-mocks';
+import { MockComponent, MockDirective, MockPipe } from 'ng-mocks';
 import { of } from 'rxjs';
 import { anything, instance, mock, verify, when } from 'ts-mockito';
 
 import { ServerHtmlDirective } from 'ish-core/directives/server-html.directive';
 import { AccountFacade } from 'ish-core/facades/account.facade';
 import { CheckoutFacade } from 'ish-core/facades/checkout.facade';
-import { FeatureToggleModule } from 'ish-core/feature-toggle.module';
+import { ServerSettingPipe } from 'ish-core/pipes/server-setting.pipe';
 import { makeHttpError } from 'ish-core/utils/dev/api-service-utils';
 import { BasketMockData } from 'ish-core/utils/dev/basket-mock-data';
 import { BasketAddressSummaryComponent } from 'ish-shared/components/basket/basket-address-summary/basket-address-summary.component';
@@ -39,8 +39,9 @@ describe('Checkout Shipping Page Component', () => {
         MockComponent(CheckoutShippingComponent),
         MockComponent(ErrorMessageComponent),
         MockDirective(ServerHtmlDirective),
+        MockPipe(ServerSettingPipe, path => path === 'shipping.messageToMerchant'),
       ],
-      imports: [FeatureToggleModule.forTesting('messageToMerchant'), TranslateModule.forRoot()],
+      imports: [TranslateModule.forRoot()],
       providers: [
         { provide: AccountFacade, useFactory: () => instance(mock(AccountFacade)) },
         { provide: CheckoutFacade, useFactory: () => instance(checkoutFacade) },

src/environments/environment.b2b.ts

@@ -13,7 +13,6 @@ export const environment: Environment = {
     'businessCustomerRegistration',
     'costCenters',
     'maps',
-    'messageToMerchant',
     'punchout',
     'quickorder',
     'quoting',

src/environments/environment.model.ts

@@ -35,7 +35,6 @@ export interface Environment {
     /* B2B features */
     | 'businessCustomerRegistration'
     | 'costCenters'
-    | 'messageToMerchant'
     | 'quoting'
     | 'quickorder'
     | 'orderTemplates'
@@ -49,6 +48,8 @@ export interface Environment {
     | 'tracking'
     | 'tacton'
     | 'maps'
+    /* ICM compatibility - see ICMCompatibilityInterceptor */
+    | 'messageToMerchant'
   )[];
 
   /* ADDITIONAL FEATURE CONFIGURATIONS */