feat/CXSPA-8061: S/4HANA Service Order UI - Alter Delivery Mode Tab in Checkout

.env-cmdrc

@@ -87,7 +87,7 @@
     "CX_OPPS": "true"
   },
   "s4-service":{
-    "CX_BASE_URL": "https://api.cg79x9wuu9-eccommerc1-s1-public.model-t.myhybris.cloud",
+    "CX_BASE_URL": "https://api.cg79x9wuu9-eccommerc1-s8-public.model-t.myhybris.cloud",
     "CX_S4_SERVICE": "true",
     "CX_B2B": "true"
   }

feature-libs/order/components/order-details/index.ts

@@ -13,4 +13,5 @@ export * from './order-details.module';
 export * from './order-details.service';
 export * from './my-account-v2-order-consignments.service';
 export * from './order-overview/order-overview.component';
+export * from './order-overview/order-overview-component.service';
 export * from './my-account-v2/index';

feature-libs/order/components/order-details/order-details.module.ts

@@ -49,6 +49,7 @@ import { ReorderDialogComponent } from './order-detail-reorder/reorder-dialog/re
 import { OrderDetailTotalsComponent } from './order-detail-totals/order-detail-totals.component';
 import { OrderOverviewComponent } from './order-overview/order-overview.component';
 import { defaultReorderLayoutConfig } from './reoder-layout.config';
+import { OrderOverviewComponentService } from './order-overview/order-overview-component.service';
 
 function registerOrderOutletFactory(): () => void {
   const isMyAccountV2 = inject(USE_MY_ACCOUNT_V2_ORDER);
@@ -111,6 +112,7 @@ const moduleComponents = [
     AbstractOrderContextModule,
   ],
   providers: [
+    OrderOverviewComponentService,
     provideDefaultConfig(<CmsConfig | FeaturesConfig>{
       cmsComponents: {
         AccountOrderDetailsActionsComponent: {

feature-libs/order/components/order-details/order-overview/order-orverview-component.service.spec.ts

@@ -0,0 +1,28 @@
+import { TestBed } from '@angular/core/testing';
+import { OrderOverviewComponentService } from './order-overview-component.service';
+import { Order } from '@spartacus/order/root';
+
+describe('OrderOverviewComponentService', () => {
+  let service: OrderOverviewComponentService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [OrderOverviewComponentService],
+    });
+    service = TestBed.inject(OrderOverviewComponentService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+  it('should return true if delivery mode is defined', () => {
+    const order: Order = {
+      deliveryMode: { code: 'd1' },
+    };
+    expect(service.showDeliveryMode(order?.deliveryMode)).toEqual(true);
+  });
+  it('should return false if delivery mode is not defined', () => {
+    const order: Order = {};
+    expect(service.showDeliveryMode(order?.deliveryMode)).toEqual(false);
+  });
+});

feature-libs/order/components/order-details/order-overview/order-overview-component.service.ts

@@ -0,0 +1,15 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP Spartacus team <[email protected]>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Injectable } from '@angular/core';
+import { DeliveryMode } from '@spartacus/cart/base/root';
+
+@Injectable()
+export class OrderOverviewComponentService {
+  showDeliveryMode(mode: DeliveryMode | undefined): boolean {
+    return mode !== undefined;
+  }
+}

feature-libs/order/components/order-details/order-overview/order-overview.component.html

@@ -100,7 +100,7 @@
           ></cx-card>
         </ng-container>
 
-        <ng-container *ngIf="order.deliveryMode">
+        <ng-container *ngIf="showDeliveryMode(order.deliveryMode)">
           <cx-card
             [content]="getDeliveryModeCardContent(order?.deliveryMode) | async"
           ></cx-card>

feature-libs/order/components/order-details/order-overview/order-overview.component.spec.ts

@@ -13,6 +13,7 @@ import { Card, CmsComponentData } from '@spartacus/storefront';
 import { EMPTY, Observable, of } from 'rxjs';
 import { OrderDetailsService } from '../order-details.service';
 import { OrderOverviewComponent } from './order-overview.component';
+import { OrderOverviewComponentService } from './order-overview-component.service';
 
 @Component({ selector: 'cx-card', template: '' })
 class MockCardComponent {
@@ -125,6 +126,11 @@ class MockOrderDetailsService {
     return of(mockOrder);
   }
 }
+class MockOrderOverviewComponentService {
+  showDeliveryMode(_mode: DeliveryMode): boolean {
+    return true;
+  }
+}
 
 const mockData: CmsOrderDetailOverviewComponent = {
   simple: false,
@@ -139,13 +145,18 @@ describe('OrderOverviewComponent', () => {
   let fixture: ComponentFixture<OrderOverviewComponent>;
   let translationService: TranslationService;
   let orderDetailsService: OrderDetailsService;
+  let componentService: OrderOverviewComponentService;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [I18nTestingModule],
       declarations: [OrderOverviewComponent, MockCardComponent],
       providers: [
         { provide: TranslationService, useClass: MockTranslationService },
+        {
+          provide: OrderOverviewComponentService,
+          useClass: MockOrderOverviewComponentService,
+        },
         { provide: OrderDetailsService, useClass: MockOrderDetailsService },
         { provide: CmsComponentData, useValue: MockCmsComponentData },
       ],
@@ -157,6 +168,7 @@ describe('OrderOverviewComponent', () => {
     component = fixture.componentInstance;
     translationService = TestBed.inject(TranslationService);
     orderDetailsService = TestBed.inject(OrderDetailsService);
+    componentService = TestBed.inject(OrderOverviewComponentService);
   });
 
   it('should create', () => {
@@ -517,4 +529,21 @@ describe('OrderOverviewComponent', () => {
       expect(address).toEqual(mockFormattedAddress);
     });
   });
+
+  describe('show delivery mode in order summary', () => {
+    it('should show delivery mode card in order summary', () => {
+      spyOn(componentService, 'showDeliveryMode').and.returnValue(true);
+      const result = component.showDeliveryMode(mockDeliveryMode);
+      expect(result).toEqual(true);
+      expect(componentService.showDeliveryMode).toHaveBeenCalledWith(
+        mockDeliveryMode
+      );
+    });
+    it('should not show delivery mode card in order summary', () => {
+      spyOn(componentService, 'showDeliveryMode').and.returnValue(false);
+      const result = component.showDeliveryMode(undefined);
+      expect(result).toEqual(false);
+      expect(componentService.showDeliveryMode).toHaveBeenCalledWith(undefined);
+    });
+  });
 });

feature-libs/order/components/order-details/order-overview/order-overview.component.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { CartOutlets, DeliveryMode } from '@spartacus/cart/base/root';
 import {
   Address,
@@ -18,13 +18,17 @@ import { Observable, combineLatest, of } from 'rxjs';
 import { filter, map } from 'rxjs/operators';
 import { OrderDetailsService } from '../order-details.service';
 import { OrderOutlets, paymentMethodCard } from '@spartacus/order/root';
+import { OrderOverviewComponentService } from './order-overview-component.service';
 
 @Component({
   selector: 'cx-order-overview',
   templateUrl: './order-overview.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class OrderOverviewComponent {
+  protected orderOverviewComponentService = inject(
+    OrderOverviewComponentService
+  );
   readonly cartOutlets = CartOutlets;
   readonly orderOutlets = OrderOutlets;
 
@@ -192,6 +196,9 @@ export class OrderOverviewComponent {
     );
   }
 
+  showDeliveryMode(mode: DeliveryMode | undefined): boolean {
+    return this.orderOverviewComponentService.showDeliveryMode(mode);
+  }
   getDeliveryModeCardContent(deliveryMode: DeliveryMode): Observable<Card> {
     return this.translation.translate('orderDetails.shippingMethod').pipe(
       filter(() => Boolean(deliveryMode)),

integration-libs/s4-service/assets/translations/en/s4-service.json

@@ -6,7 +6,11 @@
     "serviceLocationHeading": "Service Location",
     "datePickerLabel": "Schedule Service Date",
     "timePickerLabel": "Schedule Service Time",
-    "unknownError": "An unknown error occurred. Please contact support."
+    "unknownError": "An unknown error occurred. Please contact support.",
+    "productDeliveryOptions": "Delivery Options for Products",
+    "serviceDeliveryOption": "Delivery Option for Services",
+    "productDeliveryMethods": "Delivery Methods for Products",
+    "serviceDeliveryMethod": "Delivery Method for Services"
   },
   "cancelService": {
     "heading": "The following items will be included in the cancellation request",