feat: BOPIS feature with OPF CXSPA-10761 (#20674)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: ijitendrasap <jitendra.kumar.shah@sap>
Co-authored-by: Mateusz Kolasa <[email protected]>
Co-authored-by: ijitendrasap <[email protected]>

Author: 5 people

feature-libs/pickup-in-store/components/container/pickup-items-details/pickup-items-details.module.ts

@@ -11,6 +11,7 @@ import { RouterModule } from '@angular/router';
 import {
   CmsConfig,
   ConfigModule,
+  FeaturesConfigModule,
   I18nModule,
   UrlModule,
 } from '@spartacus/core';
@@ -28,6 +29,7 @@ import { PickUpItemsDetailsComponent } from './pickup-items-details.component';
     StoreModule,
     CardModule,
     MediaModule,
+    FeaturesConfigModule,
     ConfigModule.withConfig({
       cmsComponents: {
         OrderConfirmationPickUpComponent: {

integration-libs/opf/checkout/assets/translations/en/opfCheckout.json

@@ -32,7 +32,8 @@
     "errors": {
       "loadActiveConfigurations": "We are unable to load payment options at this time. Please try again later.",
       "noActiveConfigurations": "There are no payment options available at this time. Please try again later or contact support.",
-      "updateBillingAddress": "The address could not be updated. Please check that the address information is correct and that your device is connected to the internet. If the problem persists, you may need to clear your cart and start the checkout again."
+      "updateBillingAddress": "The address could not be updated. Please check that the address information is correct and that your device is connected to the internet. If the problem persists, you may need to clear your cart and start the checkout again.",
+      "noBillingAddress": "Billing address is required"
     }
   }
 }

integration-libs/opf/checkout/components/opf-checkout-billing-address-form/opf-checkout-billing-address-form.component.html

@@ -8,7 +8,7 @@ <h3>{{ 'opfCheckout.billingAddress' | cxTranslate }}</h3>
       } as addressData"
     >
       <div class="form-group">
-        <div class="form-check">
+        <div class="form-check" *ngIf="cart?.deliveryItemsQuantity">
           <label>
             <input
               type="checkbox"
@@ -50,9 +50,13 @@ <h3>{{ 'opfCheckout.billingAddress' | cxTranslate }}</h3>
           [showTitleCode]="true"
           [showCancelBtn]="true"
           actionBtnLabel="{{ 'common.save' | cxTranslate }}"
-          cancelBtnLabel="{{ 'common.cancel' | cxTranslate }}"
+          [cancelBtnLabel]="
+            (service.paymentOptionsDisabled$ | async)
+              ? ('common.back' | cxTranslate)
+              : ('common.cancel' | cxTranslate)
+          "
           (submitAddress)="onSubmitAddress($event)"
-          (backToAddress)="cancelAndHideForm()"
+          (backToAddress)="onBackToAddress()"
           [setAsDefaultField]="false"
           [countries]="countries$"
         ></cx-address-form>

integration-libs/opf/checkout/components/opf-checkout-billing-address-form/opf-checkout-billing-address-form.component.spec.ts

@@ -5,15 +5,25 @@
 
 import { Pipe, PipeTransform } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Address, Country } from '@spartacus/core';
-import { BehaviorSubject, EMPTY, Observable, of } from 'rxjs';
+import {
+  Address,
+  Country,
+  BaseSiteService,
+  UserAddressAdapter,
+} from '@spartacus/core';
+import { BehaviorSubject, EMPTY, Observable, of, Subject } from 'rxjs';
 import { OpfCheckoutBillingAddressFormComponent } from './opf-checkout-billing-address-form.component';
 import { OpfCheckoutBillingAddressFormService } from './opf-checkout-billing-address-form.service';
+import { Store } from '@ngrx/store';
+import { ActiveCartFacade } from '@spartacus/cart/base/root';
+import { CheckoutStepService } from '@spartacus/checkout/base/components';
+import { ActivatedRoute } from '@angular/router';
 
 class Service {
   billingAddress$ = new BehaviorSubject<Address | undefined>(undefined);
   isLoadingAddress$ = new BehaviorSubject<boolean>(false);
   isSameAsDelivery$ = new BehaviorSubject<boolean>(true);
+  pickupNoDefaultAddress$ = new Subject<void>();
 
   getCountries(): Observable<Country[]> {
     return EMPTY;
@@ -38,6 +48,7 @@ class Service {
   setIsSameAsDeliveryValue(value: boolean): void {
     this.isSameAsDelivery$.next(value);
   }
+  setDefaultBillingAddress(): void {}
 }
 
 @Pipe({
@@ -61,6 +72,17 @@ describe('OpfCheckoutBillingAddressFormComponent', () => {
           provide: OpfCheckoutBillingAddressFormService,
           useClass: Service,
         },
+        {
+          provide: ActiveCartFacade,
+          useValue: {
+            getActive: () => of({ code: '123', totalItems: 2 }),
+          },
+        },
+        { provide: Store, useValue: {} },
+        { provide: UserAddressAdapter, useValue: {} },
+        { provide: CheckoutStepService, useValue: {} },
+        { provide: BaseSiteService, useValue: {} },
+        { provide: ActivatedRoute, useValue: { params: of({}) } },
       ],
     }).compileComponents();
 
@@ -78,12 +100,14 @@ describe('OpfCheckoutBillingAddressFormComponent', () => {
     const countries = [{ id: '1', name: 'Country 1' }];
     spyOn(service, 'getCountries').and.returnValue(of(countries));
     spyOn(service, 'getAddresses');
+    spyOn(service, 'setDefaultBillingAddress');
 
     component.ngOnInit();
 
     expect(component.countries$).toBeDefined();
     expect(service.getCountries).toHaveBeenCalled();
     expect(service.getAddresses).toHaveBeenCalled();
+    expect(service.setDefaultBillingAddress).toHaveBeenCalled();
   });
 
   it('should cancel and hide form on cancelAndHideForm', () => {

integration-libs/opf/checkout/components/opf-checkout-billing-address-form/opf-checkout-billing-address-form.component.ts

@@ -9,22 +9,35 @@ import {
   Component,
   OnInit,
   inject,
+  OnDestroy,
 } from '@angular/core';
-import { Address, Country } from '@spartacus/core';
+import { Address, Country, UserAddressService } from '@spartacus/core';
 import { ICON_TYPE } from '@spartacus/storefront';
-import { Observable } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 import { OpfCheckoutBillingAddressFormService } from './opf-checkout-billing-address-form.service';
+import { ActiveCartFacade, Cart } from '@spartacus/cart/base/root';
+import { ActivatedRoute } from '@angular/router';
+import { CheckoutStepService } from '@spartacus/checkout/base/components';
 
 @Component({
   selector: 'cx-opf-checkout-billing-address-form',
   templateUrl: './opf-checkout-billing-address-form.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: false,
 })
-export class OpfCheckoutBillingAddressFormComponent implements OnInit {
+export class OpfCheckoutBillingAddressFormComponent
+  implements OnInit, OnDestroy
+{
   protected service = inject(OpfCheckoutBillingAddressFormService);
+  protected userAddressService = inject(UserAddressService);
+  protected activeCartFacade = inject(ActiveCartFacade);
+  protected checkoutStepService = inject(CheckoutStepService);
+  protected activatedRoute = inject(ActivatedRoute);
+
+  protected cart: Cart | null = null;
 
   iconTypes = ICON_TYPE;
+  subscription = new Subscription();
 
   billingAddress$ = this.service.billingAddress$;
   isLoadingAddress$ = this.service.isLoadingAddress$;
@@ -36,8 +49,19 @@ export class OpfCheckoutBillingAddressFormComponent implements OnInit {
   countries$: Observable<Country[]>;
 
   ngOnInit() {
+    this.subscription.add(
+      this.activeCartFacade.getActive().subscribe((cart) => (this.cart = cart))
+    );
     this.countries$ = this.service.getCountries();
+    this.userAddressService.loadAddresses();
+    this.service.setDefaultBillingAddress();
     this.service.getAddresses();
+    this.subscription.add(
+      this.service.pickupNoDefaultAddress$.subscribe(() => {
+        this.isEditBillingAddress = true;
+        this.isAddingBillingAddressInProgress = true;
+      })
+    );
   }
 
   cancelAndHideForm(): void {
@@ -47,6 +71,17 @@ export class OpfCheckoutBillingAddressFormComponent implements OnInit {
       this.isAddingBillingAddressInProgress = false;
     }
   }
+  back(): void {
+    this.checkoutStepService.back(this.activatedRoute);
+  }
+
+  onBackToAddress(): void {
+    this.subscription.add(
+      this.service.paymentOptionsDisabled$.subscribe((isDisabled) =>
+        isDisabled ? this.back() : this.cancelAndHideForm()
+      )
+    );
+  }
 
   editCustomBillingAddress(): void {
     this.isEditBillingAddress = true;
@@ -78,6 +113,17 @@ export class OpfCheckoutBillingAddressFormComponent implements OnInit {
       return;
     }
 
-    this.service.setBillingAddress(address).subscribe();
+    this.service.setBillingAddress(address).subscribe({
+      next: () => {
+        this.service.setPaymentOptionsDisabled(false);
+      },
+      error: () => {
+        this.service.setPaymentOptionsDisabled(true);
+      },
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
   }
 }

integration-libs/opf/checkout/components/opf-checkout-billing-address-form/opf-checkout-billing-address-form.service.spec.ts

@@ -13,11 +13,14 @@ import {
   Address,
   GlobalMessageService,
   HttpErrorModel,
+  UserAddressAdapter,
+  UserAddressService,
   UserPaymentService,
 } from '@spartacus/core';
-import { of, throwError } from 'rxjs';
+import { BehaviorSubject, Observable, of, throwError } from 'rxjs';
 import { OpfCheckoutPaymentWrapperService } from '../opf-checkout-payment-wrapper';
 import { OpfCheckoutBillingAddressFormService } from './opf-checkout-billing-address-form.service';
+import { Store } from '@ngrx/store';
 
 describe('OpfCheckoutBillingAddressFormService', () => {
   let service: OpfCheckoutBillingAddressFormService;
@@ -27,6 +30,8 @@ describe('OpfCheckoutBillingAddressFormService', () => {
   let mockActiveCartFacade: Partial<ActiveCartFacade>;
   let mockGlobalMessageService: Partial<GlobalMessageService>;
   let mockOpfCheckoutPaymentWrapperService: Partial<OpfCheckoutPaymentWrapperService>;
+  let mockPickupNoDefaultAddress$: BehaviorSubject<void>;
+  let mockUserAddressService: Partial<UserAddressService>;
 
   const mockDeliveryAddress: Address = {
     id: '123',
@@ -54,6 +59,7 @@ describe('OpfCheckoutBillingAddressFormService', () => {
       reloadActiveCart: () => of(true),
       isStable: () => of(true),
       getActive: () => of({ sapBillingAddress: mockPaymentAddress } as Cart),
+      hasDeliveryItems: () => of(false),
     };
 
     mockGlobalMessageService = {
@@ -63,6 +69,11 @@ describe('OpfCheckoutBillingAddressFormService', () => {
     mockOpfCheckoutPaymentWrapperService = {
       reloadPaymentMode: () => {},
     };
+    mockPickupNoDefaultAddress$ = new BehaviorSubject<void>(undefined);
+
+    mockUserAddressService = {
+      getDefaultAddress: () => of(undefined),
+    };
 
     TestBed.configureTestingModule({
       providers: [
@@ -82,6 +93,13 @@ describe('OpfCheckoutBillingAddressFormService', () => {
           provide: OpfCheckoutPaymentWrapperService,
           useValue: mockOpfCheckoutPaymentWrapperService,
         },
+        { provide: Store, useValue: { pipe: () => of(undefined) } },
+        { provide: UserAddressAdapter, useValue: {} },
+        {
+          provide: '_noDefaultAddressFoundForPickupMode$',
+          useValue: mockPickupNoDefaultAddress$,
+        },
+        { provide: UserAddressService, useValue: mockUserAddressService },
       ],
     });
 
@@ -251,4 +269,67 @@ describe('OpfCheckoutBillingAddressFormService', () => {
 
     expect(service.setBillingAddress).not.toHaveBeenCalled();
   });
+
+  it('should return an observable from pickupNoDefaultAddress$', () => {
+    spyOn(mockPickupNoDefaultAddress$, 'asObservable').and.callThrough();
+
+    (service as any)._noDefaultAddressFoundForPickupMode$ =
+      mockPickupNoDefaultAddress$;
+
+    const result: Observable<void> = service.pickupNoDefaultAddress$;
+
+    expect(mockPickupNoDefaultAddress$.asObservable).toHaveBeenCalled();
+    expect(result).toEqual(mockPickupNoDefaultAddress$.asObservable());
+  });
+
+  it('should handle no default address by setting isSameAsDelivery=false and emitting pickupNoDefaultAddress$', (done) => {
+    spyOn(service, 'setIsSameAsDeliveryValue').and.callThrough();
+    service.pickupNoDefaultAddress$.subscribe(() => {
+      expect(service.setIsSameAsDeliveryValue).toHaveBeenCalledWith(false);
+      done();
+    });
+    (service as any).handleNoDefaultAddress();
+  });
+
+  it('should handle error when setting default billing address fails', fakeAsync(() => {
+    spyOn(mockActiveCartFacade, 'hasDeliveryItems').and.returnValue(of(false));
+    spyOn(mockUserAddressService, 'getDefaultAddress').and.returnValue(
+      of(mockDeliveryAddress)
+    );
+    spyOn(service, 'setBillingAddress').and.returnValue(
+      throwError(() => new Error('Error'))
+    );
+
+    service.setDefaultBillingAddress();
+    flush();
+
+    expect(service['_$isLoadingAddress'].value).toBeFalsy();
+  }));
+
+  it('should handle the absence of a default address by invoking handleNoDefaultAddress', fakeAsync(() => {
+    spyOn(mockActiveCartFacade, 'hasDeliveryItems').and.returnValue(of(false));
+    spyOn(mockUserAddressService, 'getDefaultAddress').and.returnValue(
+      of(undefined)
+    );
+    const handleNoDefaultAddressSpy = spyOn(
+      service as any,
+      'handleNoDefaultAddress'
+    ).and.callThrough();
+
+    service.setDefaultBillingAddress();
+    flush();
+
+    expect(handleNoDefaultAddressSpy).toHaveBeenCalled();
+  }));
+  it('should handle errors when loading the default address', fakeAsync(() => {
+    spyOn(mockActiveCartFacade, 'hasDeliveryItems').and.returnValue(of(false));
+    spyOn(mockUserAddressService, 'getDefaultAddress').and.returnValue(
+      throwError(() => new Error('Error loading default address'))
+    );
+
+    service.setDefaultBillingAddress();
+    flush();
+
+    expect(service['_$isLoadingAddress'].value).toBeFalsy();
+  }));
 });