[FIX] CXSPA-9334 Terms and condition URL not changed accordingly when… (

#19966)

feature-libs/checkout/base/components/checkout-place-order/checkout-place-order.component.html

@@ -17,7 +17,12 @@
       <span class="form-check-label">
         {{ 'checkoutReview.confirmThatRead' | cxTranslate }}
         <a
-          [routerLink]="{ cxRoute: 'termsAndConditions' } | cxUrl"
+          [routerLink]="
+            {
+              cxRoute: 'termsAndConditions',
+              params: [params$ | async],
+            } | cxUrl
+          "
           class="cx-tc-link"
           target="_blank"
           rel="noopener noreferrer"

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);

feature-libs/checkout/base/components/checkout-place-order/checkout-place-order.component.ts

@@ -8,32 +8,41 @@ import {
   ChangeDetectionStrategy,
   Component,
   ComponentRef,
+  inject,
   OnDestroy,
+  OnInit,
   ViewContainerRef,
 } from '@angular/core';
 import {
   UntypedFormBuilder,
   UntypedFormGroup,
   Validators,
 } from '@angular/forms';
-import { RoutingService } from '@spartacus/core';
+import {
+  CurrencyService,
+  LanguageService,
+  RoutingService,
+} 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',
   templateUrl: './checkout-place-order.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: false,
 })
-export class CheckoutPlaceOrderComponent implements OnDestroy {
+export class CheckoutPlaceOrderComponent implements OnDestroy, OnInit {
   placedOrder: void | Observable<ComponentRef<any> | undefined>;
-
+  params$ = new Observable<string[]>();
   checkoutSubmitForm: UntypedFormGroup = this.fb.group({
     termsAndConditions: [false, Validators.requiredTrue],
   });
 
+  private currencyService = inject(CurrencyService);
+  private languageService = inject(LanguageService);
+
   get termsAndConditionInvalid(): boolean {
     return this.checkoutSubmitForm.invalid;
   }
@@ -46,6 +55,13 @@ export class CheckoutPlaceOrderComponent implements OnDestroy {
     protected vcr: ViewContainerRef
   ) {}
 
+  ngOnInit() {
+    this.params$ = combineLatest([
+      this.currencyService.getActive(),
+      this.languageService.getActive(),
+    ]).pipe(map(([currency, language]) => [currency, language]));
+  }
+
   submitForm(): void {
     if (this.checkoutSubmitForm.valid) {
       this.placedOrder = this.launchDialogService.launch(

feature-libs/checkout/base/components/checkout-progress/checkout-progress.component.html

@@ -11,7 +11,12 @@
           [class.disabled]="isDisabled(i)"
         >
           <a
-            [routerLink]="{ cxRoute: step.routeName } | cxUrl"
+            [routerLink]="
+              {
+                cxRoute: step.routeName,
+                params: [params$ | async],
+              } | cxUrl
+            "
             class="cx-link"
             [attr.aria-current]="isActive(i) ? 'step' : null"
             [attr.aria-disabled]="isDisabled(i) ? 'true' : null"

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';
@@ -58,6 +62,12 @@ describe('CheckoutProgressComponent', () => {
   let fixture: ComponentFixture<CheckoutProgressComponent>;
 
   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')

feature-libs/checkout/base/components/checkout-progress/checkout-progress.component.ts

@@ -4,21 +4,30 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { ChangeDetectionStrategy, Component } 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';
+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';
 
 @Component({
   selector: 'cx-checkout-progress',
   templateUrl: './checkout-progress.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: false,
 })
-export class CheckoutProgressComponent {
+export class CheckoutProgressComponent implements OnInit {
+  params$ = new Observable<string[]>();
   private _steps$: BehaviorSubject<CheckoutStep[]> =
     this.checkoutStepService.steps$;
+  private currencyService = inject(CurrencyService);
+  private languageService = inject(LanguageService);
 
   constructor(protected checkoutStepService: CheckoutStepService) {}
 
@@ -32,6 +41,13 @@ export class CheckoutProgressComponent {
     return this._steps$.asObservable();
   }
 
+  ngOnInit(): void {
+    this.params$ = combineLatest([
+      this.currencyService.getActive(),
+      this.languageService.getActive(),
+    ]).pipe(map(([currency, language]) => [currency, language]));
+  }
+
   getTabIndex(stepIndex: number): number {
     return !this.isActive(stepIndex) && !this.isDisabled(stepIndex) ? 0 : -1;
   }

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();
   }));