From 41ea75b676062baee3eb613ab5105fff330df160 Mon Sep 17 00:00:00 2001 From: anjana-bl <84384970+anjana-bl@users.noreply.github.com> Date: Thu, 25 Jul 2024 09:15:45 +0530 Subject: [PATCH] CXSPA-7889 : Service Order Checkout - UX changes (#19073) --- .../assets/translations/en/s4-service.json | 5 +- ...e-checkout-review-submit.component.spec.ts | 4 +- ...ervice-checkout-review-submit.component.ts | 11 +- .../checkout-service-details.component.html | 109 ++++++++++-------- .../service-details-card.component.spec.ts | 7 +- .../service-details-card.component.ts | 51 +++----- .../components/_checkout-service-details.scss | 7 ++ 7 files changed, 103 insertions(+), 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 index afd5204babe..e37edb38269 100644 --- 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/integration-libs/s4-service/checkout/components/checkout-review-submit/service-checkout-review-submit.component.spec.ts b/integration-libs/s4-service/checkout/components/checkout-review-submit/service-checkout-review-submit.component.spec.ts index 2a0cd47733e..30aa4bad112 100644 --- a/integration-libs/s4-service/checkout/components/checkout-review-submit/service-checkout-review-submit.component.spec.ts +++ b/integration-libs/s4-service/checkout/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/integration-libs/s4-service/checkout/components/checkout-review-submit/service-checkout-review-submit.component.ts b/integration-libs/s4-service/checkout/components/checkout-review-submit/service-checkout-review-submit.component.ts index 479b13362fc..0245879568e 100644 --- a/integration-libs/s4-service/checkout/components/checkout-review-submit/service-checkout-review-submit.component.ts +++ b/integration-libs/s4-service/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 { 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/integration-libs/s4-service/checkout/components/checkout-service-details/checkout-service-details.component.html b/integration-libs/s4-service/checkout/components/checkout-service-details/checkout-service-details.component.html index 65f5484eaaa..742985c2e94 100644 --- a/integration-libs/s4-service/checkout/components/checkout-service-details/checkout-service-details.component.html +++ b/integration-libs/s4-service/checkout/components/checkout-service-details/checkout-service-details.component.html @@ -1,10 +1,3 @@ -

- {{ 'serviceOrderCheckout.heading' | cxTranslate }} -

- +

+ {{ 'serviceOrderCheckout.serviceLocationHeading' | cxTranslate }} +

+
+ {{ 'serviceOrderCheckout.address' | cxTranslate }} +
+

+ {{ 'serviceOrderCheckout.serviceScheduleHeading' | cxTranslate }} +

- +
+ - + + +
+ +
diff --git a/integration-libs/s4-service/order/components/order-summary/service-details-card.component.spec.ts b/integration-libs/s4-service/order/components/order-summary/service-details-card.component.spec.ts index a0aab7d7f4c..0ef7bff889b 100644 --- a/integration-libs/s4-service/order/components/order-summary/service-details-card.component.spec.ts +++ b/integration-libs/s4-service/order/components/order-summary/service-details-card.component.spec.ts @@ -55,8 +55,8 @@ 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'], }); }); }); @@ -64,7 +64,8 @@ describe('ServiceDetailsCardComponent', () => { 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 index 23a6ec7d119..27851c9a8b4 100644 --- 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 { - 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 index 7a6148135f0..2374e5a1c59 100644 --- 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; + } + } }