feat: add the message to merchant feature to the checkout (#1323)

Co-authored-by: Silke <s.grueber@intershop.de>

docs/concepts/configuration.md

@@ -160,6 +160,7 @@ 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                                                                              |

projects/requisition-management/src/app/models/requisition/requisition.mapper.spec.ts

@@ -103,6 +103,7 @@ describe('Requisition Mapper', () => {
           "invoiceToAddress": undefined,
           "lineItemCount": 2,
           "lineItems": Array [],
+          "messageToMerchant": undefined,
           "orderNo": "10001",
           "payment": undefined,
           "promotionCodes": undefined,

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

@@ -43,6 +43,11 @@ <h1>
 
     <h2>{{ 'approval.detailspage.order_details.heading' | translate }}</h2>
 
+    <div *ishFeature="'messageToMerchant'">
+      <!-- MessageToMerchant-->
+      <ish-basket-merchant-message-view [data]="requisition"></ish-basket-merchant-message-view>
+    </div>
+
     <div class="row d-flex">
       <!-- Invoice Address -->
       <ish-info-box heading="checkout.widget.billing-address.heading" class="infobox-wrapper col-md-6">

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

@@ -7,9 +7,11 @@ 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 { 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';
+import { BasketMerchantMessageViewComponent } from 'ish-shared/components/basket/basket-merchant-message-view/basket-merchant-message-view.component';
 import { BasketShippingMethodComponent } from 'ish-shared/components/basket/basket-shipping-method/basket-shipping-method.component';
 import { ErrorMessageComponent } from 'ish-shared/components/common/error-message/error-message.component';
 import { InfoBoxComponent } from 'ish-shared/components/common/info-box/info-box.component';
@@ -32,10 +34,11 @@ describe('Requisition Detail Page Component', () => {
     context = mock(RequisitionContextFacade);
 
     await TestBed.configureTestingModule({
-      imports: [RouterTestingModule, TranslateModule.forRoot()],
+      imports: [FeatureToggleModule.forTesting('messageToMerchant'), RouterTestingModule, TranslateModule.forRoot()],
       declarations: [
         MockComponent(AddressComponent),
         MockComponent(BasketCostSummaryComponent),
+        MockComponent(BasketMerchantMessageViewComponent),
         MockComponent(BasketShippingMethodComponent),
         MockComponent(ErrorMessageComponent),
         MockComponent(FaIconComponent),
@@ -76,6 +79,7 @@ describe('Requisition Detail Page Component', () => {
         "ish-error-message",
         "ish-requisition-summary",
         "ish-requisition-cost-center-approval",
+        "ish-basket-merchant-message-view",
         "ish-info-box",
         "ish-address",
         "ish-info-box",

src/app/core/facades/checkout.facade.ts

@@ -13,6 +13,7 @@ import { selectRouteData } from 'ish-core/store/core/router';
 import { getServerConfigParameter } from 'ish-core/store/core/server-config';
 import { getAllAddresses } from 'ish-core/store/customer/addresses';
 import {
+  addMessageToMerchant,
   addPromotionCodeToBasket,
   assignBasketAddress,
   continueCheckout,
@@ -139,6 +140,11 @@ export class CheckoutFacade {
     this.store.dispatch(deleteBasketAttribute({ attributeName }));
   }
 
+  setBasketMessageToMerchant(messageToMerchant: string) {
+    // eslint-disable-next-line unicorn/no-null
+    this.store.dispatch(addMessageToMerchant({ messageToMerchant: messageToMerchant || null }));
+  }
+
   // ORDERS
 
   private ordersError$ = this.store.pipe(select(getOrdersError));

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

@@ -28,6 +28,7 @@ export interface BasketBaseData {
   };
   buckets?: string[];
   lineItems?: string[];
+  messageToMerchant?: string;
   payments?: string[];
   promotionCodes?: string[];
   totals: BasketTotalData;

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

@@ -68,6 +68,7 @@ export class BasketMapper {
       attributes: data.attributes,
       taxationId: data.attributes?.find(attr => attr.name === 'taxationID')?.value as string,
       user: data.buyer,
+      messageToMerchant: data.messageToMerchant,
     };
   }
 

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

@@ -34,6 +34,7 @@ export interface AbstractBasket<T> {
     firstName: string;
     lastName: string;
   };
+  messageToMerchant?: string;
 }
 
 export type Basket = AbstractBasket<LineItem>;

src/app/core/services/basket/basket.service.ts

@@ -34,7 +34,8 @@ export type BasketUpdateType =
   | { commonShipToAddress: string }
   | { commonShippingMethod: string }
   | { costCenter: string }
-  | { calculated: boolean };
+  | { calculated: boolean }
+  | { messageToMerchant: string };
 
 export type BasketItemUpdateType =
   | { quantity?: { value: number; unit: string }; product?: string }

src/app/core/store/customer/basket/basket.actions.ts

@@ -65,7 +65,10 @@ export const updateBasketCostCenter = createAction(
   '[Basket] Assign a Cost Center at Basket ',
   payload<{ costCenter: string }>()
 );
-
+export const addMessageToMerchant = createAction(
+  '[Basket] Message to Merchant',
+  payload<{ messageToMerchant: string }>()
+);
 export const updateBasket = createAction('[Basket Internal] Update Basket', payload<{ update: BasketUpdateType }>());
 
 export const updateBasketFail = createAction('[Basket API] Update Basket Fail', httpError());

src/app/core/store/customer/basket/basket.effects.spec.ts

@@ -20,6 +20,7 @@ import { BasketMockData } from 'ish-core/utils/dev/basket-mock-data';
 import { routerTestNavigatedAction } from 'ish-core/utils/dev/routing';
 
 import {
+  addMessageToMerchant,
   createBasket,
   createBasketFail,
   createBasketSuccess,
@@ -397,6 +398,19 @@ describe('Basket Effects', () => {
     });
   });
 
+  describe('addMessageToMerchant$', () => {
+    it('should trigger the updateBasket action if called', () => {
+      const messageToMerchant = 'My Message To Merchant';
+      const action = addMessageToMerchant({ messageToMerchant });
+      const completion = updateBasket({
+        update: { messageToMerchant },
+      });
+      actions$ = hot('-a-a-a', { a: action });
+      const expected$ = cold('-c-c-c', { c: completion });
+      expect(effects.addMessageToMerchant$).toBeObservable(expected$);
+    });
+  });
+
   describe('setBasketDesiredDeliveryDate$', () => {
     beforeEach(() => {
       when(basketServiceMock.updateBasketItemsDesiredDeliveryDate(anything(), anything())).thenReturn(of([]));

src/app/core/store/customer/basket/basket.effects.ts

@@ -28,6 +28,7 @@ import { ApiTokenService } from 'ish-core/utils/api-token/api-token.service';
 import { mapErrorToAction, mapToPayloadProperty, mapToProperty } from 'ish-core/utils/operators';
 
 import {
+  addMessageToMerchant,
   continueCheckout,
   createBasket,
   createBasketFail,
@@ -204,6 +205,17 @@ export class BasketEffects {
     )
   );
 
+  /**
+   * Sets a message to merchant at the current basket.
+   */
+  addMessageToMerchant$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(addMessageToMerchant),
+      mapToPayloadProperty('messageToMerchant'),
+      map(messageToMerchant => updateBasket({ update: { messageToMerchant } }))
+    )
+  );
+
   /**
    * Sets a desired delivery date at the current basket and each line item.
    */

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

@@ -47,6 +47,12 @@ <h1>{{ 'account.orderdetails.heading.default' | translate }}</h1>
       <ish-basket-buyer [object]="order"></ish-basket-buyer>
     </ish-info-box>
   </div>
+
+  <ng-container *ishFeature="'messageToMerchant'">
+    <!-- MessageToMerchant-->
+    <ish-basket-merchant-message-view [data]="order"></ish-basket-merchant-message-view>
+  </ng-container>
+
   <div class="row d-flex">
     <!-- Invoice Address -->
     <ish-info-box heading="checkout.widget.billing-address.heading" class="infobox-wrapper col-md-6">

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

@@ -1,13 +1,14 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { TranslateModule } from '@ngx-translate/core';
-import { MockComponent, MockDirective, MockPipe } from 'ng-mocks';
+import { MockComponent, MockPipe } from 'ng-mocks';
 
-import { FeatureToggleDirective } from 'ish-core/directives/feature-toggle.directive';
+import { FeatureToggleModule } from 'ish-core/feature-toggle.module';
 import { DatePipe } from 'ish-core/pipes/date.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';
+import { BasketMerchantMessageViewComponent } from 'ish-shared/components/basket/basket-merchant-message-view/basket-merchant-message-view.component';
 import { BasketShippingMethodComponent } from 'ish-shared/components/basket/basket-shipping-method/basket-shipping-method.component';
 import { InfoBoxComponent } from 'ish-shared/components/common/info-box/info-box.component';
 import { LineItemListComponent } from 'ish-shared/components/line-item/line-item-list/line-item-list.component';
@@ -25,14 +26,14 @@ describe('Account Order Component', () => {
         AccountOrderComponent,
         MockComponent(AddressComponent),
         MockComponent(BasketCostSummaryComponent),
+        MockComponent(BasketMerchantMessageViewComponent),
         MockComponent(BasketShippingMethodComponent),
         MockComponent(FaIconComponent),
         MockComponent(InfoBoxComponent),
         MockComponent(LineItemListComponent),
-        MockDirective(FeatureToggleDirective),
         MockPipe(DatePipe),
       ],
-      imports: [TranslateModule.forRoot()],
+      imports: [FeatureToggleModule.forTesting('messageToMerchant'), TranslateModule.forRoot()],
     }).compileComponents();
   });
 
@@ -61,6 +62,7 @@ describe('Account Order Component', () => {
     expect(element.querySelectorAll('ish-info-box')).toHaveLength(4);
     expect(element.querySelector('ish-line-item-list')).toBeTruthy();
     expect(element.querySelector('ish-basket-cost-summary')).toBeTruthy();
+    expect(element.querySelector('ish-basket-merchant-message-view')).toBeTruthy();
   });
 
   it('should display the home link after creation', () => {

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

@@ -3,6 +3,11 @@
     <!-- header as content -->
     <ng-content></ng-content>
 
+    <ng-container *ishFeature="'messageToMerchant'">
+      <!-- MessageToMerchant-->
+      <ish-basket-merchant-message-view [data]="order"></ish-basket-merchant-message-view>
+    </ng-container>
+
     <div *ishFeature="'businessCustomerRegistration'" class="row">
       <!-- Buyer-->
       <ish-info-box heading="checkout.widget.buyer.heading" class="infobox-wrapper col-md-6">

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

@@ -1,12 +1,14 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { TranslateModule } from '@ngx-translate/core';
-import { MockComponent, MockDirective } from 'ng-mocks';
+import { MockComponent } from 'ng-mocks';
 
-import { FeatureToggleDirective } from 'ish-core/directives/feature-toggle.directive';
+import { FeatureToggleModule } from 'ish-core/feature-toggle.module';
 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';
 import { BasketCostSummaryComponent } from 'ish-shared/components/basket/basket-cost-summary/basket-cost-summary.component';
+import { BasketMerchantMessageViewComponent } from 'ish-shared/components/basket/basket-merchant-message-view/basket-merchant-message-view.component';
 import { BasketShippingMethodComponent } from 'ish-shared/components/basket/basket-shipping-method/basket-shipping-method.component';
 import { InfoBoxComponent } from 'ish-shared/components/common/info-box/info-box.component';
 import { LineItemListComponent } from 'ish-shared/components/line-item/line-item-list/line-item-list.component';
@@ -24,13 +26,13 @@ describe('Checkout Receipt Component', () => {
         CheckoutReceiptComponent,
         MockComponent(AddressComponent),
         MockComponent(BasketCostSummaryComponent),
+        MockComponent(BasketMerchantMessageViewComponent),
         MockComponent(BasketShippingMethodComponent),
         MockComponent(FaIconComponent),
         MockComponent(InfoBoxComponent),
         MockComponent(LineItemListComponent),
-        MockDirective(FeatureToggleDirective),
       ],
-      imports: [TranslateModule.forRoot()],
+      imports: [FeatureToggleModule.forTesting('messageToMerchant'), TranslateModule.forRoot()],
     }).compileComponents();
   });
 
@@ -56,4 +58,23 @@ describe('Checkout Receipt Component', () => {
     fixture.detectChanges();
     expect(element.querySelector('[data-testing-id="myaccount-link"]')).toBeTruthy();
   });
+
+  it('should display standard elements by default', () => {
+    fixture.detectChanges();
+    expect(findAllCustomElements(element)).toMatchInlineSnapshot(`
+      Array [
+        "ish-basket-merchant-message-view",
+        "ish-info-box",
+        "ish-address",
+        "ish-info-box",
+        "ish-address",
+        "ish-info-box",
+        "ish-basket-shipping-method",
+        "ish-info-box",
+        "ish-line-item-list",
+        "fa-icon",
+        "ish-basket-cost-summary",
+      ]
+    `);
+  });
 });

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

@@ -35,6 +35,15 @@ <h1 class="d-flex flex-wrap align-items-baseline">
       </p>
     </div>
     <ish-basket-approval-info *ngIf="basket.approval" [approval]="basket.approval"></ish-basket-approval-info>
+
+    <ng-container *ishFeature="'messageToMerchant'">
+      <!-- MessageToMerchant-->
+      <ish-basket-merchant-message-view
+        [data]="basket"
+        editRouterLink="/checkout/shipping"
+      ></ish-basket-merchant-message-view>
+    </ng-container>
+
     <div *ishFeature="'businessCustomerRegistration'" class="row">
       <!-- Buyer-->
       <ish-info-box heading="checkout.widget.buyer.heading" class="infobox-wrapper col-md-6">

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

@@ -5,14 +5,16 @@ import { TranslateModule } from '@ngx-translate/core';
 import { MockComponent, MockDirective } from 'ng-mocks';
 import { spy, verify } from 'ts-mockito';
 
-import { FeatureToggleDirective } from 'ish-core/directives/feature-toggle.directive';
 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 { 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';
 import { AddressComponent } from 'ish-shared/components/address/address/address.component';
 import { BasketApprovalInfoComponent } from 'ish-shared/components/basket/basket-approval-info/basket-approval-info.component';
 import { BasketCostSummaryComponent } from 'ish-shared/components/basket/basket-cost-summary/basket-cost-summary.component';
+import { BasketMerchantMessageViewComponent } from 'ish-shared/components/basket/basket-merchant-message-view/basket-merchant-message-view.component';
 import { BasketShippingMethodComponent } from 'ish-shared/components/basket/basket-shipping-method/basket-shipping-method.component';
 import { BasketValidationResultsComponent } from 'ish-shared/components/basket/basket-validation-results/basket-validation-results.component';
 import { ErrorMessageComponent } from 'ish-shared/components/common/error-message/error-message.component';
@@ -37,16 +39,17 @@ describe('Checkout Review Component', () => {
         MockComponent(AddressComponent),
         MockComponent(BasketApprovalInfoComponent),
         MockComponent(BasketCostSummaryComponent),
+        MockComponent(BasketMerchantMessageViewComponent),
         MockComponent(BasketShippingMethodComponent),
         MockComponent(BasketValidationResultsComponent),
         MockComponent(ErrorMessageComponent),
         MockComponent(InfoBoxComponent),
         MockComponent(LineItemListComponent),
         MockComponent(ModalDialogLinkComponent),
-        MockDirective(FeatureToggleDirective),
         MockDirective(ServerHtmlDirective),
       ],
       imports: [
+        FeatureToggleModule.forTesting('messageToMerchant'),
         FormlyModule.forRoot({
           types: [{ name: 'ish-checkout-review-tac-field', component: CheckoutReviewTacFieldComponent }],
         }),
@@ -101,4 +104,30 @@ describe('Checkout Review Component', () => {
     fixture.detectChanges();
     expect(element.querySelector('ish-basket-approval-info')).toBeTruthy();
   });
+
+  it('should display standard elements by default', () => {
+    fixture.detectChanges();
+    expect(findAllCustomElements(element)).toMatchInlineSnapshot(`
+      Array [
+        "ish-modal-dialog-link",
+        "ish-error-message",
+        "ish-basket-validation-results",
+        "ish-basket-merchant-message-view",
+        "ish-info-box",
+        "ish-address",
+        "ish-info-box",
+        "ish-address",
+        "ish-info-box",
+        "ish-basket-shipping-method",
+        "ish-info-box",
+        "ish-line-item-list",
+        "ish-basket-cost-summary",
+        "formly-form",
+        "formly-field",
+        "formly-group",
+        "formly-field",
+        "ish-checkout-review-tac-field",
+      ]
+    `);
+  });
 });

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

@@ -31,6 +31,10 @@ <h3>{{ 'checkout.shipping_method.selection.heading' | translate }}</h3>
       <ng-container *ngIf="isBusinessCustomer$ | async">
         <ish-basket-order-reference [basket]="basket$ | async"></ish-basket-order-reference>
       </ng-container>
+
+      <ng-container *ishFeature="'messageToMerchant'">
+        <ish-basket-merchant-message [basket]="basket$ | async"></ish-basket-merchant-message>
+      </ng-container>
     </div>
     <!-- basket summary -->
     <div class="col-md-12 col-lg-4 order-summary" *ngIf="basket$ | async as basket">