From b646675eea10460d83e5b897c58b53cb4f2e7d03 Mon Sep 17 00:00:00 2001 From: andreighervan7 Date: Wed, 5 Feb 2025 13:07:03 +0200 Subject: [PATCH 1/8] [FIX] CXSPA-9334 Terms and condition URL not changed accordingly when site language is switched --- .../checkout-place-order.component.html | 4 +- .../checkout-place-order.component.ts | 35 ++++++++++-- .../checkout-progress.component.html | 25 ++++++++- .../checkout-progress.component.ts | 54 +++++++++++++++++-- .../checkout-place-order.component.ts | 19 +++++-- 5 files changed, 123 insertions(+), 14 deletions(-) diff --git a/feature-libs/checkout/base/components/checkout-place-order/checkout-place-order.component.html b/feature-libs/checkout/base/components/checkout-place-order/checkout-place-order.component.html index 75a0658e99b..e6d6b60812c 100644 --- a/feature-libs/checkout/base/components/checkout-place-order/checkout-place-order.component.html +++ b/feature-libs/checkout/base/components/checkout-place-order/checkout-place-order.component.html @@ -16,8 +16,8 @@ /> {{ 'checkoutReview.confirmThatRead' | cxTranslate }} - | undefined>; + currency: string; + termsAndConditionUrl$ = new BehaviorSubject(''); + private currency$ = this.currencyService.getActive(); + private language$ = this.languageService.getActive(); checkoutSubmitForm: UntypedFormGroup = this.fb.group({ termsAndConditions: [false, Validators.requiredTrue], @@ -43,9 +53,16 @@ export class CheckoutPlaceOrderComponent implements OnDestroy { protected routingService: RoutingService, protected fb: UntypedFormBuilder, protected launchDialogService: LaunchDialogService, - protected vcr: ViewContainerRef + protected vcr: ViewContainerRef, + protected route: Router, + protected currencyService: CurrencyService, + protected languageService: LanguageService ) {} + ngOnInit() { + this.setTermsOfConditionUrl(); + } + submitForm(): void { if (this.checkoutSubmitForm.valid) { this.placedOrder = this.launchDialogService.launch( @@ -78,6 +95,16 @@ export class CheckoutPlaceOrderComponent implements OnDestroy { this.routingService.go({ cxRoute: 'orderConfirmation' }); } + setTermsOfConditionUrl(): void { + combineLatest([this.currency$, this.language$]).subscribe( + ([currency, language]) => { + const segments = this.route.url.split('/').filter((s) => !!s); + const url = `/${segments[0]}/${language}/${currency}/terms-and-conditions`; + this.termsAndConditionUrl$.next(url); + } + ); + } + ngOnDestroy(): void { this.launchDialogService.clear(LAUNCH_CALLER.PLACE_ORDER_SPINNER); } diff --git a/feature-libs/checkout/base/components/checkout-progress/checkout-progress.component.html b/feature-libs/checkout/base/components/checkout-progress/checkout-progress.component.html index 59a4f2bfa66..b1bec93e4fa 100644 --- a/feature-libs/checkout/base/components/checkout-progress/checkout-progress.component.html +++ b/feature-libs/checkout/base/components/checkout-progress/checkout-progress.component.html @@ -10,7 +10,8 @@ [class.active]="isActive(i)" [class.disabled]="isDisabled(i)" > - + --> + diff --git a/feature-libs/checkout/base/components/checkout-progress/checkout-progress.component.ts b/feature-libs/checkout/base/components/checkout-progress/checkout-progress.component.ts index 62d0ffc968e..1e14de80872 100644 --- a/feature-libs/checkout/base/components/checkout-progress/checkout-progress.component.ts +++ b/feature-libs/checkout/base/components/checkout-progress/checkout-progress.component.ts @@ -4,11 +4,13 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; import { CheckoutStep, CheckoutStepState } from '@spartacus/checkout/base/root'; -import { BehaviorSubject, Observable } from 'rxjs'; +import { BehaviorSubject, combineLatest, Observable } from 'rxjs'; import { tap } from 'rxjs/operators'; import { CheckoutStepService } from '../services/checkout-step.service'; +import { Router } from '@angular/router'; +import { CurrencyService, LanguageService } from '@spartacus/core'; @Component({ selector: 'cx-checkout-progress', @@ -16,11 +18,18 @@ import { CheckoutStepService } from '../services/checkout-step.service'; changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, }) -export class CheckoutProgressComponent { +export class CheckoutProgressComponent implements OnInit { private _steps$: BehaviorSubject = this.checkoutStepService.steps$; + currency: string | undefined; + language: string | undefined; - constructor(protected checkoutStepService: CheckoutStepService) {} + constructor( + protected checkoutStepService: CheckoutStepService, + protected route: Router, + protected currencyService: CurrencyService, + protected languageService: LanguageService + ) {} activeStepIndex: number; activeStepIndex$: Observable = @@ -32,6 +41,10 @@ export class CheckoutProgressComponent { return this._steps$.asObservable(); } + ngOnInit(): void { + this.setLanguageAndCurrency(); + } + getTabIndex(stepIndex: number): number { return !this.isActive(stepIndex) && !this.isDisabled(stepIndex) ? 0 : -1; } @@ -53,4 +66,37 @@ export class CheckoutProgressComponent { } return CheckoutStepState.COMPLETED; } + + setNavUrl(routeName: string): string { + const segments = this.route.url.split('/').filter((s) => !!s); + + if (!this.currency || !this.language) { + return ''; + } + + const baseUrl = `/${segments[0]}/${this.language}/${this.currency}/checkout`; + + switch (routeName) { + case 'checkoutDeliveryAddress': + return `${baseUrl}/delivery-address`; + case 'checkoutPaymentDetails': + return `${baseUrl}/payment-details`; + case 'checkoutReviewOrder': + return `${baseUrl}/review-order`; + case 'checkoutDeliveryMode': + return `${baseUrl}/delivery-mode`; + default: + return baseUrl; + } + } + + setLanguageAndCurrency(): void { + combineLatest([ + this.currencyService.getActive(), + this.languageService.getActive(), + ]).subscribe(([currency, language]) => { + this.currency = currency; + this.language = language; + }); + } } diff --git a/feature-libs/checkout/scheduled-replenishment/components/checkout-place-order/checkout-place-order.component.ts b/feature-libs/checkout/scheduled-replenishment/components/checkout-place-order/checkout-place-order.component.ts index 7dee3f64c75..d9df62288f4 100644 --- a/feature-libs/checkout/scheduled-replenishment/components/checkout-place-order/checkout-place-order.component.ts +++ b/feature-libs/checkout/scheduled-replenishment/components/checkout-place-order/checkout-place-order.component.ts @@ -13,7 +13,8 @@ import { } from '@angular/core'; import { UntypedFormBuilder } from '@angular/forms'; import { CheckoutPlaceOrderComponent } from '@spartacus/checkout/base/components'; -import { RoutingService } from '@spartacus/core'; +import { CurrencyService, LanguageService, RoutingService } from '@spartacus/core'; +import { Router } from '@angular/router'; import { OrderFacade, ORDER_TYPE, @@ -49,9 +50,21 @@ export class CheckoutScheduledReplenishmentPlaceOrderComponent protected launchDialogService: LaunchDialogService, protected vcr: ViewContainerRef, protected checkoutReplenishmentFormService: CheckoutReplenishmentFormService, - protected scheduledReplenishmentOrderFacade: ScheduledReplenishmentOrderFacade + protected scheduledReplenishmentOrderFacade: ScheduledReplenishmentOrderFacade, + protected route: Router, + protected currencyService: CurrencyService, + protected languageService: LanguageService ) { - super(orderFacade, routingService, fb, launchDialogService, vcr); + super( + orderFacade, + routingService, + fb, + launchDialogService, + vcr, + route, + currencyService, + languageService + ); } submitForm(): void { From d6a809dacf4eaf288d12bdb59e924a9d966fb99a Mon Sep 17 00:00:00 2001 From: andreighervan7 Date: Thu, 6 Feb 2025 10:47:40 +0200 Subject: [PATCH 2/8] [AFTER CODE REVIEW] v1 --- .../checkout-place-order.component.html | 4 +- .../checkout-place-order.component.ts | 22 +++------- .../checkout-progress.component.html | 25 +---------- .../checkout-progress.component.ts | 42 +++---------------- 4 files changed, 13 insertions(+), 80 deletions(-) diff --git a/feature-libs/checkout/base/components/checkout-place-order/checkout-place-order.component.html b/feature-libs/checkout/base/components/checkout-place-order/checkout-place-order.component.html index e6d6b60812c..552774dd043 100644 --- a/feature-libs/checkout/base/components/checkout-place-order/checkout-place-order.component.html +++ b/feature-libs/checkout/base/components/checkout-place-order/checkout-place-order.component.html @@ -16,8 +16,8 @@ /> {{ 'checkoutReview.confirmThatRead' | cxTranslate }} - | undefined>; - currency: string; - termsAndConditionUrl$ = new BehaviorSubject(''); - private currency$ = this.currencyService.getActive(); - private language$ = this.languageService.getActive(); - + currency$ = new Observable(); + language$ = new Observable(); checkoutSubmitForm: UntypedFormGroup = this.fb.group({ termsAndConditions: [false, Validators.requiredTrue], }); @@ -60,7 +57,8 @@ export class CheckoutPlaceOrderComponent implements OnDestroy, OnInit { ) {} ngOnInit() { - this.setTermsOfConditionUrl(); + this.currency$ = this.currencyService.getActive(); + this.language$ = this.languageService.getActive(); } submitForm(): void { @@ -95,16 +93,6 @@ export class CheckoutPlaceOrderComponent implements OnDestroy, OnInit { this.routingService.go({ cxRoute: 'orderConfirmation' }); } - setTermsOfConditionUrl(): void { - combineLatest([this.currency$, this.language$]).subscribe( - ([currency, language]) => { - const segments = this.route.url.split('/').filter((s) => !!s); - const url = `/${segments[0]}/${language}/${currency}/terms-and-conditions`; - this.termsAndConditionUrl$.next(url); - } - ); - } - ngOnDestroy(): void { this.launchDialogService.clear(LAUNCH_CALLER.PLACE_ORDER_SPINNER); } diff --git a/feature-libs/checkout/base/components/checkout-progress/checkout-progress.component.html b/feature-libs/checkout/base/components/checkout-progress/checkout-progress.component.html index b1bec93e4fa..fd497997d48 100644 --- a/feature-libs/checkout/base/components/checkout-progress/checkout-progress.component.html +++ b/feature-libs/checkout/base/components/checkout-progress/checkout-progress.component.html @@ -10,31 +10,8 @@ [class.active]="isActive(i)" [class.disabled]="isDisabled(i)" > - - = this.checkoutStepService.steps$; - currency: string | undefined; - language: string | undefined; + currency$ = new Observable(); + language$ = new Observable(); constructor( protected checkoutStepService: CheckoutStepService, @@ -42,7 +42,8 @@ export class CheckoutProgressComponent implements OnInit { } ngOnInit(): void { - this.setLanguageAndCurrency(); + this.currency$ = this.currencyService.getActive(); + this.language$ = this.languageService.getActive(); } getTabIndex(stepIndex: number): number { @@ -66,37 +67,4 @@ export class CheckoutProgressComponent implements OnInit { } return CheckoutStepState.COMPLETED; } - - setNavUrl(routeName: string): string { - const segments = this.route.url.split('/').filter((s) => !!s); - - if (!this.currency || !this.language) { - return ''; - } - - const baseUrl = `/${segments[0]}/${this.language}/${this.currency}/checkout`; - - switch (routeName) { - case 'checkoutDeliveryAddress': - return `${baseUrl}/delivery-address`; - case 'checkoutPaymentDetails': - return `${baseUrl}/payment-details`; - case 'checkoutReviewOrder': - return `${baseUrl}/review-order`; - case 'checkoutDeliveryMode': - return `${baseUrl}/delivery-mode`; - default: - return baseUrl; - } - } - - setLanguageAndCurrency(): void { - combineLatest([ - this.currencyService.getActive(), - this.languageService.getActive(), - ]).subscribe(([currency, language]) => { - this.currency = currency; - this.language = language; - }); - } } From 173a9b64faca4f8e167a535ab55c7745e6783dd5 Mon Sep 17 00:00:00 2001 From: andreighervan7 Date: Thu, 6 Feb 2025 10:51:17 +0200 Subject: [PATCH 3/8] [AFTER CODE REVIEW] v2 --- .../checkout-place-order.component.ts | 2 -- .../checkout-progress/checkout-progress.component.ts | 2 -- .../checkout-place-order.component.ts | 9 +++++---- 3 files changed, 5 insertions(+), 8 deletions(-) diff --git a/feature-libs/checkout/base/components/checkout-place-order/checkout-place-order.component.ts b/feature-libs/checkout/base/components/checkout-place-order/checkout-place-order.component.ts index e28bde40af7..bb37d8db5d8 100644 --- a/feature-libs/checkout/base/components/checkout-place-order/checkout-place-order.component.ts +++ b/feature-libs/checkout/base/components/checkout-place-order/checkout-place-order.component.ts @@ -17,7 +17,6 @@ import { UntypedFormGroup, Validators, } from '@angular/forms'; -import { Router } from '@angular/router'; import { CurrencyService, LanguageService, @@ -51,7 +50,6 @@ export class CheckoutPlaceOrderComponent implements OnDestroy, OnInit { protected fb: UntypedFormBuilder, protected launchDialogService: LaunchDialogService, protected vcr: ViewContainerRef, - protected route: Router, protected currencyService: CurrencyService, protected languageService: LanguageService ) {} diff --git a/feature-libs/checkout/base/components/checkout-progress/checkout-progress.component.ts b/feature-libs/checkout/base/components/checkout-progress/checkout-progress.component.ts index f49a521926b..6bffb2c70ec 100644 --- a/feature-libs/checkout/base/components/checkout-progress/checkout-progress.component.ts +++ b/feature-libs/checkout/base/components/checkout-progress/checkout-progress.component.ts @@ -9,7 +9,6 @@ import { CheckoutStep, CheckoutStepState } from '@spartacus/checkout/base/root'; import { BehaviorSubject, Observable } from 'rxjs'; import { tap } from 'rxjs/operators'; import { CheckoutStepService } from '../services/checkout-step.service'; -import { Router } from '@angular/router'; import { CurrencyService, LanguageService } from '@spartacus/core'; @Component({ @@ -26,7 +25,6 @@ export class CheckoutProgressComponent implements OnInit { constructor( protected checkoutStepService: CheckoutStepService, - protected route: Router, protected currencyService: CurrencyService, protected languageService: LanguageService ) {} diff --git a/feature-libs/checkout/scheduled-replenishment/components/checkout-place-order/checkout-place-order.component.ts b/feature-libs/checkout/scheduled-replenishment/components/checkout-place-order/checkout-place-order.component.ts index d9df62288f4..ffb691c5bef 100644 --- a/feature-libs/checkout/scheduled-replenishment/components/checkout-place-order/checkout-place-order.component.ts +++ b/feature-libs/checkout/scheduled-replenishment/components/checkout-place-order/checkout-place-order.component.ts @@ -13,8 +13,11 @@ import { } from '@angular/core'; import { UntypedFormBuilder } from '@angular/forms'; import { CheckoutPlaceOrderComponent } from '@spartacus/checkout/base/components'; -import { CurrencyService, LanguageService, RoutingService } from '@spartacus/core'; -import { Router } from '@angular/router'; +import { + CurrencyService, + LanguageService, + RoutingService, +} from '@spartacus/core'; import { OrderFacade, ORDER_TYPE, @@ -51,7 +54,6 @@ export class CheckoutScheduledReplenishmentPlaceOrderComponent protected vcr: ViewContainerRef, protected checkoutReplenishmentFormService: CheckoutReplenishmentFormService, protected scheduledReplenishmentOrderFacade: ScheduledReplenishmentOrderFacade, - protected route: Router, protected currencyService: CurrencyService, protected languageService: LanguageService ) { @@ -61,7 +63,6 @@ export class CheckoutScheduledReplenishmentPlaceOrderComponent fb, launchDialogService, vcr, - route, currencyService, languageService ); From 89937086834918452ea6432ea50c9175cce7b4ff Mon Sep 17 00:00:00 2001 From: andreighervan7 Date: Thu, 6 Feb 2025 11:02:35 +0200 Subject: [PATCH 4/8] [AFTER CODE REVIEW] v3 --- .../checkout-place-order.component.ts | 8 +++++--- .../checkout-progress.component.ts | 20 +++++++++++-------- .../checkout-place-order.component.ts | 20 +++---------------- 3 files changed, 20 insertions(+), 28 deletions(-) diff --git a/feature-libs/checkout/base/components/checkout-place-order/checkout-place-order.component.ts b/feature-libs/checkout/base/components/checkout-place-order/checkout-place-order.component.ts index bb37d8db5d8..09b8310697c 100644 --- a/feature-libs/checkout/base/components/checkout-place-order/checkout-place-order.component.ts +++ b/feature-libs/checkout/base/components/checkout-place-order/checkout-place-order.component.ts @@ -8,6 +8,7 @@ import { ChangeDetectionStrategy, Component, ComponentRef, + inject, OnDestroy, OnInit, ViewContainerRef, @@ -40,6 +41,9 @@ export class CheckoutPlaceOrderComponent implements OnDestroy, OnInit { termsAndConditions: [false, Validators.requiredTrue], }); + private currencyService = inject(CurrencyService); + private languageService = inject(LanguageService); + get termsAndConditionInvalid(): boolean { return this.checkoutSubmitForm.invalid; } @@ -49,9 +53,7 @@ export class CheckoutPlaceOrderComponent implements OnDestroy, OnInit { protected routingService: RoutingService, protected fb: UntypedFormBuilder, protected launchDialogService: LaunchDialogService, - protected vcr: ViewContainerRef, - protected currencyService: CurrencyService, - protected languageService: LanguageService + protected vcr: ViewContainerRef ) {} ngOnInit() { diff --git a/feature-libs/checkout/base/components/checkout-progress/checkout-progress.component.ts b/feature-libs/checkout/base/components/checkout-progress/checkout-progress.component.ts index 6bffb2c70ec..ec3f51eeb1b 100644 --- a/feature-libs/checkout/base/components/checkout-progress/checkout-progress.component.ts +++ b/feature-libs/checkout/base/components/checkout-progress/checkout-progress.component.ts @@ -4,7 +4,12 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + inject, + OnInit, +} from '@angular/core'; import { CheckoutStep, CheckoutStepState } from '@spartacus/checkout/base/root'; import { BehaviorSubject, Observable } from 'rxjs'; import { tap } from 'rxjs/operators'; @@ -18,16 +23,15 @@ import { CurrencyService, LanguageService } from '@spartacus/core'; standalone: false, }) export class CheckoutProgressComponent implements OnInit { - private _steps$: BehaviorSubject = - this.checkoutStepService.steps$; currency$ = new Observable(); language$ = new Observable(); - constructor( - protected checkoutStepService: CheckoutStepService, - protected currencyService: CurrencyService, - protected languageService: LanguageService - ) {} + private _steps$: BehaviorSubject = + this.checkoutStepService.steps$; + private currencyService = inject(CurrencyService); + private languageService = inject(LanguageService); + + constructor(protected checkoutStepService: CheckoutStepService) {} activeStepIndex: number; activeStepIndex$: Observable = diff --git a/feature-libs/checkout/scheduled-replenishment/components/checkout-place-order/checkout-place-order.component.ts b/feature-libs/checkout/scheduled-replenishment/components/checkout-place-order/checkout-place-order.component.ts index ffb691c5bef..7dee3f64c75 100644 --- a/feature-libs/checkout/scheduled-replenishment/components/checkout-place-order/checkout-place-order.component.ts +++ b/feature-libs/checkout/scheduled-replenishment/components/checkout-place-order/checkout-place-order.component.ts @@ -13,11 +13,7 @@ import { } from '@angular/core'; import { UntypedFormBuilder } from '@angular/forms'; import { CheckoutPlaceOrderComponent } from '@spartacus/checkout/base/components'; -import { - CurrencyService, - LanguageService, - RoutingService, -} from '@spartacus/core'; +import { RoutingService } from '@spartacus/core'; import { OrderFacade, ORDER_TYPE, @@ -53,19 +49,9 @@ export class CheckoutScheduledReplenishmentPlaceOrderComponent protected launchDialogService: LaunchDialogService, protected vcr: ViewContainerRef, protected checkoutReplenishmentFormService: CheckoutReplenishmentFormService, - protected scheduledReplenishmentOrderFacade: ScheduledReplenishmentOrderFacade, - protected currencyService: CurrencyService, - protected languageService: LanguageService + protected scheduledReplenishmentOrderFacade: ScheduledReplenishmentOrderFacade ) { - super( - orderFacade, - routingService, - fb, - launchDialogService, - vcr, - currencyService, - languageService - ); + super(orderFacade, routingService, fb, launchDialogService, vcr); } submitForm(): void { From 7261737a43539aee6e5d8b1261301e2ffe7ed1ea Mon Sep 17 00:00:00 2001 From: andreighervan7 Date: Thu, 6 Feb 2025 16:49:26 +0200 Subject: [PATCH 5/8] [AFTER CODE REVIEW] fix prettier --- .../checkout-place-order.component.html | 7 ++++++- .../checkout-progress/checkout-progress.component.html | 7 ++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/feature-libs/checkout/base/components/checkout-place-order/checkout-place-order.component.html b/feature-libs/checkout/base/components/checkout-place-order/checkout-place-order.component.html index 552774dd043..ff644c3d11f 100644 --- a/feature-libs/checkout/base/components/checkout-place-order/checkout-place-order.component.html +++ b/feature-libs/checkout/base/components/checkout-place-order/checkout-place-order.component.html @@ -17,7 +17,12 @@ {{ 'checkoutReview.confirmThatRead' | cxTranslate }} Date: Fri, 7 Feb 2025 14:08:01 +0200 Subject: [PATCH 6/8] [AFTYER CODE REVIEW] fix unit testing --- .../checkout-place-order.component.html | 2 +- .../checkout-place-order.component.spec.ts | 19 ++++++++++++++ .../checkout-place-order.component.ts | 11 ++++---- .../checkout-progress.component.html | 2 +- .../checkout-progress.component.spec.ts | 25 +++++++++++++++++-- .../checkout-progress.component.ts | 14 +++++------ 6 files changed, 57 insertions(+), 16 deletions(-) diff --git a/feature-libs/checkout/base/components/checkout-place-order/checkout-place-order.component.html b/feature-libs/checkout/base/components/checkout-place-order/checkout-place-order.component.html index ff644c3d11f..7196ce329c8 100644 --- a/feature-libs/checkout/base/components/checkout-place-order/checkout-place-order.component.html +++ b/feature-libs/checkout/base/components/checkout-place-order/checkout-place-order.component.html @@ -20,7 +20,7 @@ [routerLink]=" { cxRoute: 'termsAndConditions', - params: [language$ | async, currency$ | async], + params: [params$ | async], } | cxUrl " class="cx-tc-link" diff --git a/feature-libs/checkout/base/components/checkout-place-order/checkout-place-order.component.spec.ts b/feature-libs/checkout/base/components/checkout-place-order/checkout-place-order.component.spec.ts index b383ea54b2a..94a5ad32bd9 100644 --- a/feature-libs/checkout/base/components/checkout-place-order/checkout-place-order.component.spec.ts +++ b/feature-libs/checkout/base/components/checkout-place-order/checkout-place-order.component.spec.ts @@ -2,8 +2,10 @@ import { Pipe, PipeTransform } from '@angular/core'; import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; import { ReactiveFormsModule, UntypedFormGroup } from '@angular/forms'; import { + CurrencyService, GlobalMessageService, I18nTestingModule, + LanguageService, RoutingService, } from '@spartacus/core'; import { OrderFacade } from '@spartacus/order/root'; @@ -48,6 +50,12 @@ describe('CheckoutPlaceOrderComponent', () => { let launchDialogService: LaunchDialogService; beforeEach(waitForAsync(() => { + const mockCurrencyService = { + getActive: () => of('USD'), + }; + const mockLanguageService = { + getActive: () => of('en'), + }; TestBed.configureTestingModule({ imports: [ReactiveFormsModule, I18nTestingModule, AtMessageModule], declarations: [MockUrlPipe, CheckoutPlaceOrderComponent], @@ -56,6 +64,8 @@ describe('CheckoutPlaceOrderComponent', () => { { provide: RoutingService, useClass: MockRoutingService }, { provide: LaunchDialogService, useClass: MockLaunchDialogService }, { provide: GlobalMessageService, useValue: {} }, + { provide: CurrencyService, useValue: mockCurrencyService }, + { provide: LanguageService, useValue: mockLanguageService }, ], }).compileComponents(); })); @@ -100,6 +110,15 @@ describe('CheckoutPlaceOrderComponent', () => { }); }); + it('should combine currency and language into params$', (done) => { + component.ngOnInit(); + component.params$.subscribe(([currency, language]) => { + expect(currency).toBe('USD'); + expect(language).toBe('en'); + done(); + }); + }); + describe('Place order UI', () => { beforeEach(() => { controls.termsAndConditions.setValue(true); diff --git a/feature-libs/checkout/base/components/checkout-place-order/checkout-place-order.component.ts b/feature-libs/checkout/base/components/checkout-place-order/checkout-place-order.component.ts index 09b8310697c..7293fc55d73 100644 --- a/feature-libs/checkout/base/components/checkout-place-order/checkout-place-order.component.ts +++ b/feature-libs/checkout/base/components/checkout-place-order/checkout-place-order.component.ts @@ -25,7 +25,7 @@ import { } from '@spartacus/core'; import { OrderFacade } from '@spartacus/order/root'; import { LaunchDialogService, LAUNCH_CALLER } from '@spartacus/storefront'; -import { Observable } from 'rxjs'; +import { combineLatest, map, Observable } from 'rxjs'; @Component({ selector: 'cx-place-order', @@ -35,8 +35,7 @@ import { Observable } from 'rxjs'; }) export class CheckoutPlaceOrderComponent implements OnDestroy, OnInit { placedOrder: void | Observable | undefined>; - currency$ = new Observable(); - language$ = new Observable(); + params$ = new Observable(); checkoutSubmitForm: UntypedFormGroup = this.fb.group({ termsAndConditions: [false, Validators.requiredTrue], }); @@ -57,8 +56,10 @@ export class CheckoutPlaceOrderComponent implements OnDestroy, OnInit { ) {} ngOnInit() { - this.currency$ = this.currencyService.getActive(); - this.language$ = this.languageService.getActive(); + this.params$ = combineLatest([ + this.currencyService.getActive(), + this.languageService.getActive(), + ]).pipe(map(([currency, language]) => [currency, language])); } submitForm(): void { diff --git a/feature-libs/checkout/base/components/checkout-progress/checkout-progress.component.html b/feature-libs/checkout/base/components/checkout-progress/checkout-progress.component.html index 61c3ef8aaaf..e023a0f3bff 100644 --- a/feature-libs/checkout/base/components/checkout-progress/checkout-progress.component.html +++ b/feature-libs/checkout/base/components/checkout-progress/checkout-progress.component.html @@ -14,7 +14,7 @@ [routerLink]=" { cxRoute: step.routeName, - params: [language$ | async, currency$ | async], + params: [params$ | async], } | cxUrl " class="cx-link" diff --git a/feature-libs/checkout/base/components/checkout-progress/checkout-progress.component.spec.ts b/feature-libs/checkout/base/components/checkout-progress/checkout-progress.component.spec.ts index a21878d6df5..28eb31cc2e7 100644 --- a/feature-libs/checkout/base/components/checkout-progress/checkout-progress.component.spec.ts +++ b/feature-libs/checkout/base/components/checkout-progress/checkout-progress.component.spec.ts @@ -2,7 +2,11 @@ import { Pipe, PipeTransform } from '@angular/core'; import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { CheckoutStep, CheckoutStepType } from '@spartacus/checkout/base/root'; -import { I18nTestingModule } from '@spartacus/core'; +import { + CurrencyService, + I18nTestingModule, + LanguageService, +} from '@spartacus/core'; import { BehaviorSubject, Observable, of } from 'rxjs'; import { CheckoutStepService } from '../services/checkout-step.service'; import { CheckoutProgressComponent } from './checkout-progress.component'; @@ -53,11 +57,17 @@ class MockMultiLinePipe implements PipeTransform { } } -describe('CheckoutProgressComponent', () => { + xdescribe('CheckoutProgressComponent', () => { let component: CheckoutProgressComponent; let fixture: ComponentFixture; beforeEach(waitForAsync(() => { + const mockCurrencyService = { + getActive: () => of('USD'), + }; + const mockLanguageService = { + getActive: () => of('en'), + }; TestBed.configureTestingModule({ imports: [I18nTestingModule], declarations: [ @@ -67,6 +77,8 @@ describe('CheckoutProgressComponent', () => { ], providers: [ { provide: CheckoutStepService, useClass: MockCheckoutStepService }, + { provide: CurrencyService, useValue: mockCurrencyService }, + { provide: LanguageService, useValue: mockLanguageService }, ], }).compileComponents(); })); @@ -89,6 +101,15 @@ describe('CheckoutProgressComponent', () => { }); }); + it('should combine currency and language into params$', (done) => { + component.ngOnInit(); + component.params$.subscribe(([currency, language]) => { + expect(currency).toBe('USD'); + expect(language).toBe('en'); + done(); + }); + }); + it('should contain link with "active" class', () => { const step = fixture.debugElement.query( By.css('.cx-item:nth-child(1) .cx-link') diff --git a/feature-libs/checkout/base/components/checkout-progress/checkout-progress.component.ts b/feature-libs/checkout/base/components/checkout-progress/checkout-progress.component.ts index ec3f51eeb1b..18e3b631450 100644 --- a/feature-libs/checkout/base/components/checkout-progress/checkout-progress.component.ts +++ b/feature-libs/checkout/base/components/checkout-progress/checkout-progress.component.ts @@ -11,8 +11,8 @@ import { OnInit, } from '@angular/core'; import { CheckoutStep, CheckoutStepState } from '@spartacus/checkout/base/root'; -import { BehaviorSubject, Observable } from 'rxjs'; -import { tap } from 'rxjs/operators'; +import { BehaviorSubject, combineLatest, Observable } from 'rxjs'; +import { map, tap } from 'rxjs/operators'; import { CheckoutStepService } from '../services/checkout-step.service'; import { CurrencyService, LanguageService } from '@spartacus/core'; @@ -23,9 +23,7 @@ import { CurrencyService, LanguageService } from '@spartacus/core'; standalone: false, }) export class CheckoutProgressComponent implements OnInit { - currency$ = new Observable(); - language$ = new Observable(); - + params$ = new Observable(); private _steps$: BehaviorSubject = this.checkoutStepService.steps$; private currencyService = inject(CurrencyService); @@ -44,8 +42,10 @@ export class CheckoutProgressComponent implements OnInit { } ngOnInit(): void { - this.currency$ = this.currencyService.getActive(); - this.language$ = this.languageService.getActive(); + this.params$ = combineLatest([ + this.currencyService.getActive(), + this.languageService.getActive(), + ]).pipe(map(([currency, language]) => [currency, language])); } getTabIndex(stepIndex: number): number { From 9aac2306271d6477b7cef0756d5c2529da07431d Mon Sep 17 00:00:00 2001 From: andreighervan7 Date: Fri, 7 Feb 2025 15:46:54 +0200 Subject: [PATCH 7/8] [After code review] fix unit testing --- .../checkout-place-order.component.spec.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/feature-libs/checkout/scheduled-replenishment/components/checkout-place-order/checkout-place-order.component.spec.ts b/feature-libs/checkout/scheduled-replenishment/components/checkout-place-order/checkout-place-order.component.spec.ts index 5460708a17b..e0f9d8db18a 100644 --- a/feature-libs/checkout/scheduled-replenishment/components/checkout-place-order/checkout-place-order.component.spec.ts +++ b/feature-libs/checkout/scheduled-replenishment/components/checkout-place-order/checkout-place-order.component.spec.ts @@ -2,8 +2,10 @@ import { Pipe, PipeTransform } from '@angular/core'; import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; import { ReactiveFormsModule, UntypedFormGroup } from '@angular/forms'; import { + CurrencyService, GlobalMessageService, I18nTestingModule, + LanguageService, RoutingService, } from '@spartacus/core'; import { @@ -91,6 +93,12 @@ describe('CheckoutScheduledReplenishmentPlaceOrderComponent', () => { let scheduledReplenishmentOrderFacade: ScheduledReplenishmentOrderFacade; beforeEach(waitForAsync(() => { + const mockCurrencyService = { + getActive: () => of('USD'), + }; + const mockLanguageService = { + getActive: () => of('en'), + }; TestBed.configureTestingModule({ imports: [ReactiveFormsModule, I18nTestingModule, AtMessageModule], declarations: [ @@ -113,6 +121,8 @@ describe('CheckoutScheduledReplenishmentPlaceOrderComponent', () => { provide: GlobalMessageService, useValue: {}, }, + { provide: CurrencyService, useValue: mockCurrencyService }, + { provide: LanguageService, useValue: mockLanguageService }, ], }).compileComponents(); })); From 732a1d083241343099d7546f9f961ba799d96ff1 Mon Sep 17 00:00:00 2001 From: andreighervan7 Date: Mon, 10 Feb 2025 09:20:26 +0200 Subject: [PATCH 8/8] [AFTER CODE REVIEW] fix prettier --- .../checkout-progress.component.spec.ts | 2 +- .../checkout-place-order.component.spec.ts | 12 ++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/feature-libs/checkout/base/components/checkout-progress/checkout-progress.component.spec.ts b/feature-libs/checkout/base/components/checkout-progress/checkout-progress.component.spec.ts index 28eb31cc2e7..ef5253b5012 100644 --- a/feature-libs/checkout/base/components/checkout-progress/checkout-progress.component.spec.ts +++ b/feature-libs/checkout/base/components/checkout-progress/checkout-progress.component.spec.ts @@ -57,7 +57,7 @@ class MockMultiLinePipe implements PipeTransform { } } - xdescribe('CheckoutProgressComponent', () => { +describe('CheckoutProgressComponent', () => { let component: CheckoutProgressComponent; let fixture: ComponentFixture; diff --git a/feature-libs/checkout/scheduled-replenishment/components/checkout-place-order/checkout-place-order.component.spec.ts b/feature-libs/checkout/scheduled-replenishment/components/checkout-place-order/checkout-place-order.component.spec.ts index e0f9d8db18a..86e71b124bf 100644 --- a/feature-libs/checkout/scheduled-replenishment/components/checkout-place-order/checkout-place-order.component.spec.ts +++ b/feature-libs/checkout/scheduled-replenishment/components/checkout-place-order/checkout-place-order.component.spec.ts @@ -93,12 +93,12 @@ describe('CheckoutScheduledReplenishmentPlaceOrderComponent', () => { let scheduledReplenishmentOrderFacade: ScheduledReplenishmentOrderFacade; beforeEach(waitForAsync(() => { - const mockCurrencyService = { - getActive: () => of('USD'), - }; - const mockLanguageService = { - getActive: () => of('en'), - }; + const mockCurrencyService = { + getActive: () => of('USD'), + }; + const mockLanguageService = { + getActive: () => of('en'), + }; TestBed.configureTestingModule({ imports: [ReactiveFormsModule, I18nTestingModule, AtMessageModule], declarations: [