Merge branch 'develop' into feat/CXSPA-7861

SAP · Jul 25, 2024 · fe929c5 · fe929c5
2 parents 4acf728 + 41ea75b
commit fe929c5
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 91 deletions.
diff --git a/integration-libs/s4-service/assets/translations/en/s4-service.json b/integration-libs/s4-service/assets/translations/en/s4-service.json
@@ -1,10 +1,11 @@
 {
   "serviceOrderCheckout": {
     "serviceDetails": "Service Details",
-    "heading": "Service Schedule - Date and Time",
+    "serviceScheduleHeading": "Service Schedule - Date and Time",
+    "address": "Same as Shipping Address",
+    "serviceLocationHeading": "Service Location",
     "datePickerLabel": "Schedule Service Date",
     "timePickerLabel": "Schedule Service Time",
-    "cardLabel": "Scheduled At",
     "clickContinue": "No Service details required. Click Continue",
     "emptyServiceDetailsCard": "None",
     "unknownError": "An unknown error occurred. Please contact support."

diff --git a/...eckout/components/checkout-review-submit/service-checkout-review-submit.component.spec.ts b/...eckout/components/checkout-review-submit/service-checkout-review-submit.component.spec.ts
@@ -479,8 +479,8 @@ describe('ServiceCheckoutReviewSubmitComponent', () => {
   it('should call getServiceDetailsCard() to get service details', (done) => {
     component.getServiceDetailsCard(mockScheduledAt).subscribe((card) => {
       expect(card.title).toEqual('serviceOrderCheckout.serviceDetails');
-      expect(card.textBold).toEqual('serviceOrderCheckout.cardLabel');
-      expect(card.text).toEqual(['27/06/2024, 09:30']);
+      expect(card.textBold).toEqual('27/06/2024');
+      expect(card.text).toEqual(['09:30']);
       done();
     });
   });

diff --git a/...ce/checkout/components/checkout-review-submit/service-checkout-review-submit.component.ts b/...ce/checkout/components/checkout-review-submit/service-checkout-review-submit.component.ts
@@ -25,6 +25,7 @@ import { filter, map } from 'rxjs/operators';
 import {
   CheckoutServiceDetailsFacade,
   CheckoutServiceSchedulePickerService,
+  ServiceDateTime,
 } from '@spartacus/s4-service/root';
 
 @Component({
@@ -82,27 +83,25 @@ export class ServiceCheckoutReviewSubmitComponent extends B2BCheckoutReviewSubmi
   }
 
   getServiceDetailsCard(
-    scheduledAt: string | null | undefined
+    scheduledAt: ServiceDateTime | undefined | null
   ): Observable<Card> {
     return combineLatest([
       this.translationService.translate('serviceOrderCheckout.serviceDetails'),
-      this.translationService.translate('serviceOrderCheckout.cardLabel'),
       this.translationService.translate(
         'serviceOrderCheckout.emptyServiceDetailsCard'
       ),
     ]).pipe(
-      map(([textTitle, textLabel, emptyTextLabel]) => {
+      map(([textTitle, emptyTextLabel]) => {
         if (scheduledAt) {
           scheduledAt =
             this.checkoutServiceSchedulePickerService.convertDateTimeToReadableString(
               scheduledAt
             );
         }
-
         return {
           title: textTitle,
-          textBold: scheduledAt ? textLabel : emptyTextLabel,
-          text: scheduledAt ? [scheduledAt] : undefined,
+          textBold: scheduledAt ? scheduledAt.split(',')[0] : emptyTextLabel,
+          text: scheduledAt ? [scheduledAt.split(',')[1].trim()] : undefined,
         };
       })
     );

diff --git a/...vice/checkout/components/checkout-service-details/checkout-service-details.component.html b/...vice/checkout/components/checkout-service-details/checkout-service-details.component.html
@@ -1,10 +1,3 @@
-<h2
-  class="cx-checkout-title d-none d-lg-block d-xl-block"
-  [attr.aria-label]="'serviceOrderCheckout.heading' | cxTranslate"
->
-  {{ 'serviceOrderCheckout.heading' | cxTranslate }}
-</h2>
-
 <ng-container *ngIf="serviceProducts$ | async as products">
   <ng-container *ngIf="products.length === 0; else showScheduler">
     <span
@@ -38,47 +31,71 @@
 </div>
 
 <ng-template #showScheduler>
+  <h2
+    class="cx-checkout-title d-none d-lg-block d-xl-block"
+    [attr.aria-label]="
+      'serviceOrderCheckout.serviceLocationHeading' | cxTranslate
+    "
+  >
+    {{ 'serviceOrderCheckout.serviceLocationHeading' | cxTranslate }}
+  </h2>
+  <div
+    class="cx-service-location-text"
+    [attr.aria-label]="'serviceOrderCheckout.address' | cxTranslate"
+  >
+    {{ 'serviceOrderCheckout.address' | cxTranslate }}
+  </div>
+  <h2
+    class="cx-checkout-title d-none d-lg-block d-xl-block"
+    [attr.aria-label]="
+      'serviceOrderCheckout.serviceScheduleHeading' | cxTranslate
+    "
+  >
+    {{ 'serviceOrderCheckout.serviceScheduleHeading' | cxTranslate }}
+  </h2>
   <form [formGroup]="this.form">
-    <label
-      class="row"
-      [attr.aria-label]="'serviceOrderCheckout.datePickerLabel' | cxTranslate"
-    >
-      <div class="pl-4 col-8">
-        {{ 'serviceOrderCheckout.datePickerLabel' | cxTranslate }}
-      </div>
-      <div class="col-4">
-        <cx-date-picker
-          [control]="$any(form.get('scheduleDate'))"
-          [min]="(minServiceDate$ | async) ?? undefined"
-          label="serviceOrderCheckout.datePickerLabel"
-        >
-        </cx-date-picker>
-      </div>
-    </label>
+    <div class="row">
+      <label
+        class="col"
+        [attr.aria-label]="'serviceOrderCheckout.datePickerLabel' | cxTranslate"
+      >
+        <div>
+          {{ 'serviceOrderCheckout.datePickerLabel' | cxTranslate }}
+        </div>
+        <div>
+          <cx-date-picker
+            [control]="$any(form.get('scheduleDate'))"
+            [min]="(minServiceDate$ | async) ?? undefined"
+            label="serviceOrderCheckout.datePickerLabel"
+          >
+          </cx-date-picker>
+        </div>
+      </label>
 
-    <label
-      class="row"
-      [attr.aria-label]="'serviceOrderCheckout.timePickerLabel' | cxTranslate"
-    >
-      <div class="pl-4 col-8">
-        {{ 'serviceOrderCheckout.timePickerLabel' | cxTranslate }}
-      </div>
-      <div class="col-4">
-        <select
-          *ngIf="scheduleTimes$ | async as scheduleTimes"
-          class="form-control"
-          formControlName="scheduleTime"
-          (change)="setScheduleTime($event)"
-        >
-          <option
-            *ngFor="let time of scheduleTimes"
-            [value]="time"
-            [selected]="form.get('scheduleTime')?.value === time"
+      <label
+        class="col"
+        [attr.aria-label]="'serviceOrderCheckout.timePickerLabel' | cxTranslate"
+      >
+        <div>
+          {{ 'serviceOrderCheckout.timePickerLabel' | cxTranslate }}
+        </div>
+        <div>
+          <select
+            *ngIf="scheduleTimes$ | async as scheduleTimes"
+            class="form-control"
+            formControlName="scheduleTime"
+            (change)="setScheduleTime($event)"
           >
-            {{ time }}
-          </option>
-        </select>
-      </div>
-    </label>
+            <option
+              *ngFor="let time of scheduleTimes"
+              [value]="time"
+              [selected]="form.get('scheduleTime')?.value === time"
+            >
+              {{ time }}
+            </option>
+          </select>
+        </div>
+      </label>
+    </div>
   </form>
 </ng-template>
diff --git a/...ion-libs/s4-service/order/components/order-summary/service-details-card.component.spec.ts b/...ion-libs/s4-service/order/components/order-summary/service-details-card.component.spec.ts
@@ -55,16 +55,17 @@ describe('ServiceDetailsCardComponent', () => {
     component.getServiceDetailsCard('2023/12/12TY12:00').subscribe((card) => {
       expect(card).toEqual({
         title: 'card title',
-        textBold: 'card bold text',
-        text: ['2023/12/12, 12:00'],
+        textBold: '2023/12/12',
+        text: ['12:00'],
       });
     });
   });
   it('should return card with details', () => {
     component.getServiceDetailsCard(undefined).subscribe((card) => {
       expect(card).toEqual({
         title: 'card title',
-        text: ['card empty'],
+        textBold: 'card empty',
+        text: undefined,
       });
     });
   });

diff --git a/integration-libs/s4-service/order/components/order-summary/service-details-card.component.ts b/integration-libs/s4-service/order/components/order-summary/service-details-card.component.ts
@@ -37,41 +37,28 @@ export class ServiceDetailsCardComponent implements OnInit, OnDestroy {
   }
 
   getServiceDetailsCard(
-    servicedAt: ServiceDateTime | undefined
+    scheduledAt: ServiceDateTime | undefined
   ): Observable<Card> {
-    const titleTranslation$ = this.translationService.translate(
-      'serviceOrderCheckout.serviceDetails'
-    );
-    if (servicedAt) {
-      const labelTranslation$ = this.translationService.translate(
-        'serviceOrderCheckout.cardLabel'
-      );
-      return combineLatest([titleTranslation$, labelTranslation$]).pipe(
-        map(([textTitle, textLabel]) => {
-          const text =
+    return combineLatest([
+      this.translationService.translate('serviceOrderCheckout.serviceDetails'),
+      this.translationService.translate(
+        'serviceOrderCheckout.emptyServiceDetailsCard'
+      ),
+    ]).pipe(
+      map(([textTitle, emptyTextLabel]) => {
+        if (scheduledAt) {
+          scheduledAt =
             this.checkoutServiceSchedulePickerService.convertDateTimeToReadableString(
-              servicedAt ?? ''
+              scheduledAt
             );
-          return {
-            title: textTitle,
-            textBold: textLabel,
-            text: [text],
-          };
-        })
-      );
-    } else {
-      const emptyTextTranslation$ = this.translationService.translate(
-        'serviceOrderCheckout.emptyServiceDetailsCard'
-      );
-      return combineLatest([titleTranslation$, emptyTextTranslation$]).pipe(
-        map(([textTitle, text]) => {
-          return {
-            title: textTitle,
-            text: [text],
-          };
-        })
-      );
-    }
+        }
+        return {
+          title: textTitle,
+          textBold: scheduledAt ? scheduledAt.split(',')[0] : emptyTextLabel,
+          text: scheduledAt ? [scheduledAt.split(',')[1].trim()] : undefined,
+        };
+      })
+    );
   }
 
   ngOnDestroy(): void {

diff --git a/integration-libs/s4-service/styles/components/_checkout-service-details.scss b/integration-libs/s4-service/styles/components/_checkout-service-details.scss
@@ -19,4 +19,11 @@
     display: flex;
     flex-direction: column;
   }
+  .cx-service-location-text {
+    margin-bottom: 1.25rem;
+
+    @include media-breakpoint-down(md) {
+      padding-inline-start: 0;
+    }
+  }
 }