From 0742c248c0e72feb031f4e79a909eeca322a6cc3 Mon Sep 17 00:00:00 2001
From: Mateusz Kolasa <mateusz.kolasa@sap.com>
Date: Mon, 18 Mar 2024 12:45:16 +0100
Subject: [PATCH] feat: Add pickup in store support for GooglePay

Closes: CXSPA-5537
---
 .../quote-cart-guard.component.module.ts      |   9 +-
 .../quote-request-button.component.html       |   1 +
 .../quote-request-button.component.spec.ts    |  30 ++-
 .../quote-request-button.component.ts         |  10 +-
 .../quote-request-button.module.ts            |   8 +-
 .../apple-pay/apple-pay.component.spec.ts     |   1 +
 .../google-pay/google-pay.service.spec.ts     |  78 +++---
 .../google-pay/google-pay.service.ts          | 222 ++++++++++++------
 .../opf-quick-buy.service.spec.ts             |   2 +
 .../opf-quick-buy/opf-quick-buy.service.ts    |  16 ++
 .../opf/base/core/services/index.ts           |   1 +
 ...pf-pickup-in-store-handler.service.spec.ts |  56 +++++
 .../opf-pickup-in-store-handler.service.ts    |  64 +++++
 .../base/root/model/opf-quick-buy.model.ts    |   9 +-
 integration-libs/opf/package.json             |   1 +
 integration-libs/opf/tsconfig.lib.json        |  16 +-
 package.json                                  |   2 +-
 projects/schematics/src/dependencies.json     |   1 +
 .../src/shared/utils/graph-utils_spec.ts      |   2 +-
 19 files changed, 391 insertions(+), 138 deletions(-)
 create mode 100644 integration-libs/opf/base/core/services/opf-pickup-in-store-handler.service.spec.ts
 create mode 100644 integration-libs/opf/base/core/services/opf-pickup-in-store-handler.service.ts

diff --git a/feature-libs/quote/components/cart-guard/quote-cart-guard.component.module.ts b/feature-libs/quote/components/cart-guard/quote-cart-guard.component.module.ts
index 046f1f67220..e1e07e9db19 100644
--- a/feature-libs/quote/components/cart-guard/quote-cart-guard.component.module.ts
+++ b/feature-libs/quote/components/cart-guard/quote-cart-guard.component.module.ts
@@ -6,12 +6,7 @@
 
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import {
-  AuthGuard,
-  CmsConfig,
-  I18nModule,
-  provideDefaultConfig,
-} from '@spartacus/core';
+import { CmsConfig, I18nModule, provideDefaultConfig } from '@spartacus/core';
 import { QuoteCartGuardComponent } from './quote-cart-guard.component';
 import { QuoteCartGuard } from './quote-cart.guard';
 
@@ -22,7 +17,7 @@ import { QuoteCartGuard } from './quote-cart.guard';
       cmsComponents: {
         QuoteCartGuardComponent: {
           component: QuoteCartGuardComponent,
-          guards: [AuthGuard, QuoteCartGuard],
+          guards: [QuoteCartGuard],
         },
       },
     }),
diff --git a/feature-libs/quote/components/request-button/quote-request-button.component.html b/feature-libs/quote/components/request-button/quote-request-button.component.html
index 06d70a3204f..fa849b3c8f4 100644
--- a/feature-libs/quote/components/request-button/quote-request-button.component.html
+++ b/feature-libs/quote/components/request-button/quote-request-button.component.html
@@ -1,4 +1,5 @@
 <button
+  *ngIf="isLoggedIn$ | async"
   #element
   (click)="goToQuoteDetails()"
   type="button"
diff --git a/feature-libs/quote/components/request-button/quote-request-button.component.spec.ts b/feature-libs/quote/components/request-button/quote-request-button.component.spec.ts
index fe133aaf1d7..2e64d5888cd 100644
--- a/feature-libs/quote/components/request-button/quote-request-button.component.spec.ts
+++ b/feature-libs/quote/components/request-button/quote-request-button.component.spec.ts
@@ -1,8 +1,12 @@
 import { Pipe, PipeTransform } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { I18nTestingModule, RoutingService } from '@spartacus/core';
+import {
+  AuthService,
+  I18nTestingModule,
+  RoutingService,
+} from '@spartacus/core';
 import { Quote, QuoteFacade } from '@spartacus/quote/root';
-import { of } from 'rxjs';
+import { BehaviorSubject, Observable, of } from 'rxjs';
 import { createEmptyQuote } from '../../core/testing/quote-test-utils';
 import { QuoteRequestButtonComponent } from './quote-request-button.component';
 import createSpy = jasmine.createSpy;
@@ -22,6 +26,13 @@ const mockCreatedQuote: Quote = {
 class MockQuoteFacade implements Partial<QuoteFacade> {
   createQuote = createSpy().and.returnValue(of(mockCreatedQuote));
 }
+
+const loggedIn: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
+class MockAuthService implements Partial<AuthService> {
+  isUserLoggedIn(): Observable<boolean> {
+    return loggedIn.asObservable();
+  }
+}
 describe('QuoteRequestButtonComponent', () => {
   let fixture: ComponentFixture<QuoteRequestButtonComponent>;
   let component: QuoteRequestButtonComponent;
@@ -37,6 +48,10 @@ describe('QuoteRequestButtonComponent', () => {
           provide: QuoteFacade,
           useClass: MockQuoteFacade,
         },
+        {
+          provide: AuthService,
+          useClass: MockAuthService,
+        },
         { provide: RoutingService, useValue: mockRoutingService },
       ],
     }).compileComponents();
@@ -47,7 +62,6 @@ describe('QuoteRequestButtonComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(QuoteRequestButtonComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
@@ -61,4 +75,14 @@ describe('QuoteRequestButtonComponent', () => {
       params: { quoteId: quoteCode },
     });
   });
+  it('should render button in case user is logged in', () => {
+    loggedIn.next(true);
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelector('button')).not.toBe(null);
+  });
+  it('should not render button in case user is anonymous', () => {
+    loggedIn.next(false);
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelector('button')).toBe(null);
+  });
 });
diff --git a/feature-libs/quote/components/request-button/quote-request-button.component.ts b/feature-libs/quote/components/request-button/quote-request-button.component.ts
index 97ff167f9d8..ae3f06963b1 100644
--- a/feature-libs/quote/components/request-button/quote-request-button.component.ts
+++ b/feature-libs/quote/components/request-button/quote-request-button.component.ts
@@ -10,7 +10,7 @@ import {
   inject,
   OnDestroy,
 } from '@angular/core';
-import { RoutingService } from '@spartacus/core';
+import { AuthService, RoutingService } from '@spartacus/core';
 import { QuoteFacade } from '@spartacus/quote/root';
 import { Subscription } from 'rxjs';
 import { tap } from 'rxjs/operators';
@@ -23,9 +23,17 @@ import { tap } from 'rxjs/operators';
 export class QuoteRequestButtonComponent implements OnDestroy {
   protected quoteFacade = inject(QuoteFacade);
   protected routingService = inject(RoutingService);
+  protected authService = inject(AuthService);
 
   protected subscription = new Subscription();
 
+  /**
+   * Quote handling requires a logged-in user. We cannot enforce that via an authGuard here
+   * because otheriwise the entire cart page would need an authenticated user. So we check on
+   * the view and don't render the button if the user is not logged in.
+   */
+  isLoggedIn$ = this.authService.isUserLoggedIn();
+
   /**
    * Creates a new quote and triggers the navigation according to route 'quoteDetails',
    * in order to land on the quote details page.
diff --git a/feature-libs/quote/components/request-button/quote-request-button.module.ts b/feature-libs/quote/components/request-button/quote-request-button.module.ts
index f0540e2c622..83058812212 100644
--- a/feature-libs/quote/components/request-button/quote-request-button.module.ts
+++ b/feature-libs/quote/components/request-button/quote-request-button.module.ts
@@ -6,12 +6,7 @@
 
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import {
-  AuthGuard,
-  CmsConfig,
-  I18nModule,
-  provideDefaultConfig,
-} from '@spartacus/core';
+import { CmsConfig, I18nModule, provideDefaultConfig } from '@spartacus/core';
 import { QuoteRequestButtonComponent } from './quote-request-button.component';
 
 @NgModule({
@@ -23,7 +18,6 @@ import { QuoteRequestButtonComponent } from './quote-request-button.component';
       cmsComponents: {
         QuoteRequestComponent: {
           component: QuoteRequestButtonComponent,
-          guards: [AuthGuard],
         },
       },
     }),
diff --git a/integration-libs/opf/base/components/opf-quick-buy/apple-pay/apple-pay.component.spec.ts b/integration-libs/opf/base/components/opf-quick-buy/apple-pay/apple-pay.component.spec.ts
index 425c63672f8..1691a16224f 100644
--- a/integration-libs/opf/base/components/opf-quick-buy/apple-pay/apple-pay.component.spec.ts
+++ b/integration-libs/opf/base/components/opf-quick-buy/apple-pay/apple-pay.component.spec.ts
@@ -68,6 +68,7 @@ describe('ApplePayComponent', () => {
     ]);
     mockCartHandlerService = jasmine.createSpyObj('OpfCartHandlerService', [
       'checkStableCart',
+      'blockMiniCartComponentUpdate',
     ]);
     mockApplePaySessionFactory = jasmine.createSpyObj(
       'ApplePaySessionFactory',
diff --git a/integration-libs/opf/base/components/opf-quick-buy/google-pay/google-pay.service.spec.ts b/integration-libs/opf/base/components/opf-quick-buy/google-pay/google-pay.service.spec.ts
index 1c7efc85385..641ac69a5f3 100644
--- a/integration-libs/opf/base/components/opf-quick-buy/google-pay/google-pay.service.spec.ts
+++ b/integration-libs/opf/base/components/opf-quick-buy/google-pay/google-pay.service.spec.ts
@@ -60,6 +60,7 @@ describe('OpfGooglePayService', () => {
       'loadOriginalCart',
       'removeProductFromOriginalCart',
       'loadCartAfterSingleProductTransaction',
+      'blockMiniCartComponentUpdate',
     ]);
     mockPaymentFacade = jasmine.createSpyObj('OpfPaymentFacade', [
       'submitPayment',
@@ -67,12 +68,16 @@ describe('OpfGooglePayService', () => {
     mockQuickBuyService = jasmine.createSpyObj('OpfQuickBuyService', [
       'getQuickBuyLocationContext',
       'getQuickBuyProviderConfig',
+      'getQuickBuyDeliveryType',
     ]);
 
     const googlePayApiMock = {
       payments: {
         api: {
           PaymentsClient: jasmine.createSpy('PaymentsClient').and.returnValue({
+            loadPaymentData: jasmine
+              .createSpy()
+              .and.returnValue(Promise.resolve({})),
             isReadyToPay: jasmine
               .createSpy()
               .and.returnValue(Promise.resolve({ result: true })),
@@ -99,6 +104,7 @@ describe('OpfGooglePayService', () => {
     });
 
     service = TestBed.inject(OpfGooglePayService);
+    service['updateGooglePaymentClient']();
   });
 
   describe('getClient', () => {
@@ -479,72 +485,50 @@ describe('OpfGooglePayService', () => {
   });
 
   describe('initTransaction', () => {
-    beforeEach(() => {
-      const mockGooglePaymentClient = jasmine.createSpyObj('PaymentsClient', [
-        'loadPaymentData',
-        'isReadyToPay',
-      ]);
-      service['googlePaymentClient'] = mockGooglePaymentClient;
-      service['googlePaymentClient'].loadPaymentData = () =>
-        Promise.resolve({} as google.payments.api.PaymentData);
-    });
-
-    it('should initiate a transaction process for single product', (done) => {
-      spyOn(service, 'handleActiveCartTransaction').and.callThrough();
-      spyOn(service, 'handleSingleProductTransaction').and.callThrough();
-      spyOn(
-        service['googlePaymentClient'],
-        'loadPaymentData'
-      ).and.callThrough();
+    it('should initialize transaction for single product context', (done: DoneFn) => {
+      spyOn(service, 'handleSingleProductTransaction').and.returnValue(
+        of(null)
+      );
+      spyOn(service, 'handleActiveCartTransaction').and.returnValue(of(null));
 
       mockQuickBuyService.getQuickBuyLocationContext.and.returnValue(
         of(OpfQuickBuyLocation.PRODUCT)
       );
-      const mockProduct = { code: 'productCode', price: { value: 100 } };
-      const counter = 1;
-      mockCurrentProductService.getProduct.and.returnValue(of(mockProduct));
-      mockItemCounterService.getCounter.and.returnValue(counter);
-      mockCartHandlerService.deleteCurrentCart.and.returnValue(of(true));
-      mockCartHandlerService.addProductToCart.and.returnValue(of(true));
-      mockCartHandlerService.getCurrentCart.and.returnValue(of({}));
-      mockCartHandlerService.loadCartAfterSingleProductTransaction.and.returnValue();
 
       service.initTransaction();
 
+      expect(service['transactionDetails'].context).toBe(
+        OpfQuickBuyLocation.PRODUCT
+      );
+
       setTimeout(() => {
-        expect(service.handleActiveCartTransaction).not.toHaveBeenCalled();
         expect(service.handleSingleProductTransaction).toHaveBeenCalled();
-        expect(mockCurrentProductService.getProduct).toHaveBeenCalled();
-        expect(mockCartHandlerService.deleteCurrentCart).not.toHaveBeenCalled();
-        expect(mockCartHandlerService.addProductToCart).toHaveBeenCalledWith(
-          mockProduct.code,
-          counter
-        );
-        expect(
-          service['googlePaymentClient'].loadPaymentData
-        ).toHaveBeenCalled();
+        expect(service.handleActiveCartTransaction).not.toHaveBeenCalled();
         done();
       }, 0);
     });
 
-    it('should initiate a transaction process for active cart', () => {
-      spyOn(service, 'handleActiveCartTransaction').and.callThrough();
-      spyOn(service, 'handleSingleProductTransaction').and.callThrough();
-      spyOn(
-        service['googlePaymentClient'],
-        'loadPaymentData'
-      ).and.callThrough();
+    it('should initialize transaction for active cart context', (done: DoneFn) => {
+      spyOn(service, 'handleSingleProductTransaction').and.returnValue(
+        of(null)
+      );
+      spyOn(service, 'handleActiveCartTransaction').and.returnValue(of(null));
+
       mockQuickBuyService.getQuickBuyLocationContext.and.returnValue(
         of(OpfQuickBuyLocation.CART)
       );
-      mockCartHandlerService.getCurrentCart.and.returnValue(of({}));
 
       service.initTransaction();
 
-      expect(mockCartHandlerService.getCurrentCart).toHaveBeenCalled();
-      expect(service.handleActiveCartTransaction).toHaveBeenCalled();
-      expect(service.handleSingleProductTransaction).not.toHaveBeenCalled();
-      expect(service['googlePaymentClient'].loadPaymentData).toHaveBeenCalled();
+      expect(service['transactionDetails'].context).toBe(
+        OpfQuickBuyLocation.CART
+      );
+
+      setTimeout(() => {
+        expect(service.handleActiveCartTransaction).toHaveBeenCalled();
+        expect(service.handleSingleProductTransaction).not.toHaveBeenCalled();
+        done();
+      }, 0);
     });
   });
 
diff --git a/integration-libs/opf/base/components/opf-quick-buy/google-pay/google-pay.service.ts b/integration-libs/opf/base/components/opf-quick-buy/google-pay/google-pay.service.ts
index f51240ea653..77d75311ab6 100644
--- a/integration-libs/opf/base/components/opf-quick-buy/google-pay/google-pay.service.ts
+++ b/integration-libs/opf/base/components/opf-quick-buy/google-pay/google-pay.service.ts
@@ -10,9 +10,11 @@ import { Cart, DeliveryMode } from '@spartacus/cart/base/root';
 import { Address, Product } from '@spartacus/core';
 import { OpfCartHandlerService } from '@spartacus/opf/base/core';
 import {
+  ADDRESS_FIELD_PLACEHOLDER,
   ActiveConfiguration,
   OpfPaymentFacade,
   OpfProviderType,
+  OpfQuickBuyDeliveryType,
   OpfQuickBuyLocation,
   OpfResourceLoaderService,
   PaymentMethod,
@@ -51,33 +53,33 @@ export class OpfGooglePayService {
 
   private googlePaymentClientOptions: google.payments.api.PaymentOptions = {
     environment: 'TEST',
-    paymentDataCallbacks: this.handlePaymentCallbacks(),
   };
 
-  private googlePaymentRequest: google.payments.api.PaymentDataRequest = {
-    /**
-     * TODO: Move this part into configuration layer.
-     */
-    apiVersion: 2,
-    apiVersionMinor: 0,
-    callbackIntents: [
-      'SHIPPING_ADDRESS',
-      'SHIPPING_OPTION',
-      'PAYMENT_AUTHORIZATION',
-    ],
-
-    // @ts-ignore
-    merchantInfo: {
-      // merchantId: 'spartacusStorefront',
-      merchantName: 'Spartacus Storefront',
-    },
-    shippingOptionRequired: true,
-    shippingAddressRequired: true,
-    // @ts-ignore
-    shippingAddressParameters: {
-      phoneNumberRequired: false,
-    },
-  };
+  private initialGooglePaymentRequest: google.payments.api.PaymentDataRequest =
+    {
+      /**
+       * TODO: Move this part into configuration layer.
+       */
+      apiVersion: 2,
+      apiVersionMinor: 0,
+      callbackIntents: [
+        'PAYMENT_AUTHORIZATION',
+        'SHIPPING_ADDRESS',
+        'SHIPPING_OPTION',
+      ],
+
+      // @ts-ignore
+      merchantInfo: {
+        // merchantId: 'spartacusStorefront',
+        merchantName: 'Spartacus Storefront',
+      },
+      shippingOptionRequired: true,
+      shippingAddressRequired: true,
+      // @ts-ignore
+      shippingAddressParameters: {
+        phoneNumberRequired: false,
+      },
+    };
 
   private initialTransactionInfo: google.payments.api.TransactionInfo = {
     totalPrice: '0.00',
@@ -90,6 +92,7 @@ export class OpfGooglePayService {
     product: undefined,
     cart: undefined,
     quantity: 0,
+    deliveryType: OpfQuickBuyDeliveryType.SHIPPING,
     addressIds: [],
     total: {
       label: '',
@@ -98,8 +101,44 @@ export class OpfGooglePayService {
     },
   };
 
+  private googlePaymentRequest = this.initialGooglePaymentRequest;
+
   protected transactionDetails = this.initialTransactionDetails;
 
+  protected updateGooglePaymentClient(): void {
+    this.googlePaymentClient = new google.payments.api.PaymentsClient(
+      this.googlePaymentClientOptions
+    );
+  }
+
+  protected setGooglePaymentRequestConfig(
+    deliveryType: OpfQuickBuyDeliveryType
+  ) {
+    if (deliveryType === OpfQuickBuyDeliveryType.PICKUP) {
+      this.googlePaymentClientOptions = {
+        ...this.googlePaymentClientOptions,
+        paymentDataCallbacks: {
+          onPaymentAuthorized:
+            this.handlePaymentCallbacks().onPaymentAuthorized,
+        },
+      };
+      this.googlePaymentRequest = {
+        ...this.initialGooglePaymentRequest,
+        shippingAddressRequired: false,
+        shippingOptionRequired: false,
+        callbackIntents: ['PAYMENT_AUTHORIZATION'],
+      };
+    } else {
+      this.googlePaymentClientOptions = {
+        ...this.googlePaymentClientOptions,
+        paymentDataCallbacks: this.handlePaymentCallbacks(),
+      };
+      this.googlePaymentRequest = this.initialGooglePaymentRequest;
+    }
+
+    this.updateGooglePaymentClient();
+  }
+
   loadProviderResources(): Promise<void> {
     return this.opfResourceLoaderService.loadProviderResources([
       { url: this.GOOGLE_PAY_JS_URL },
@@ -108,9 +147,7 @@ export class OpfGooglePayService {
 
   initClient(activeConfiguration: ActiveConfiguration): void {
     this.setAllowedPaymentMethodsConfig(activeConfiguration);
-    this.googlePaymentClient = new google.payments.api.PaymentsClient(
-      this.googlePaymentClientOptions
-    );
+    this.updateGooglePaymentClient();
   }
 
   private getClient(): google.payments.api.PaymentsClient {
@@ -166,8 +203,6 @@ export class OpfGooglePayService {
   private setDeliveryAddress(
     address: google.payments.api.Address | undefined
   ): Observable<string> {
-    const ADDRESS_FIELD_PLACEHOLDER = '[FIELD_NOT_SET]';
-
     let deliveryAddress: Address = {
       firstName: ADDRESS_FIELD_PLACEHOLDER,
       lastName: ADDRESS_FIELD_PLACEHOLDER,
@@ -187,61 +222,109 @@ export class OpfGooglePayService {
         ...this.getFirstAndLastName(address?.name),
       };
     }
-
-    return this.opfCartHandlerService.setDeliveryAddress(deliveryAddress).pipe(
-      tap((addressId) => {
-        this.associateAddressId(addressId);
-      })
-    );
+    if (
+      this.transactionDetails.deliveryType === OpfQuickBuyDeliveryType.SHIPPING
+    ) {
+      return this.opfCartHandlerService
+        .setDeliveryAddress(deliveryAddress)
+        .pipe(
+          tap((addressId) => {
+            this.associateAddressId(addressId);
+          })
+        );
+    } else {
+      return of(OpfQuickBuyDeliveryType.PICKUP);
+    }
   }
 
   setDeliveryMode(
-    mode: string | undefined
+    mode?: string,
+    type?: OpfQuickBuyDeliveryType
   ): Observable<DeliveryMode | undefined> {
+    if (type === OpfQuickBuyDeliveryType.PICKUP) {
+      mode = OpfQuickBuyDeliveryType.PICKUP.toLocaleLowerCase();
+    }
+
+    if (!mode && type === OpfQuickBuyDeliveryType.SHIPPING) {
+      return of(undefined);
+    }
+
     return mode && this.verifyShippingOption(mode)
       ? this.opfCartHandlerService.setDeliveryMode(mode)
       : of(undefined);
   }
 
   handleSingleProductTransaction(): Observable<Product | boolean | null> {
-    return this.currentProductService.getProduct().pipe(
-      take(1),
-      switchMap((product: Product | null) => {
-        const count = this.itemCounterService.getCounter();
-        this.transactionDetails.product = product as Product;
-        this.transactionDetails.quantity = count;
-        this.transactionDetails.context = OpfQuickBuyLocation.PRODUCT;
-        return this.opfCartHandlerService
-          .addProductToCart(product?.code || '', count)
-          .pipe(
-            tap(() => {
-              this.updateTransactionInfo({
-                totalPrice: this.estimateTotalPrice(product?.price?.value),
-                currencyCode:
-                  product?.price?.currencyIso ||
-                  this.initialTransactionInfo.currencyCode,
-                totalPriceStatus: this.initialTransactionInfo.totalPriceStatus,
-              });
+    this.transactionDetails.context = OpfQuickBuyLocation.PRODUCT;
+    return this.opfQuickBuyService
+      .getQuickBuyDeliveryType(this.transactionDetails.context)
+      .pipe(
+        switchMap((deliveryType) => {
+          this.transactionDetails.deliveryType = deliveryType;
+          this.setGooglePaymentRequestConfig(deliveryType);
+
+          return this.currentProductService.getProduct().pipe(
+            take(1),
+            switchMap((product: Product | null) => {
+              const count = this.itemCounterService.getCounter();
+              this.transactionDetails.product = product as Product;
+              this.transactionDetails.quantity = count;
+              return this.opfCartHandlerService
+                .addProductToCart(product?.code || '', count)
+                .pipe(
+                  tap(() => {
+                    this.setDeliveryMode(
+                      undefined,
+                      this.transactionDetails.deliveryType
+                    );
+                    this.updateTransactionInfo({
+                      totalPrice: this.estimateTotalPrice(
+                        product?.price?.value
+                      ),
+                      currencyCode:
+                        product?.price?.currencyIso ||
+                        this.initialTransactionInfo.currencyCode,
+                      totalPriceStatus:
+                        this.initialTransactionInfo.totalPriceStatus,
+                    });
+                  })
+                );
             })
           );
-      })
-    );
+        })
+      );
   }
 
   handleActiveCartTransaction(): Observable<Cart> {
     this.transactionDetails.context = OpfQuickBuyLocation.CART;
-    return this.opfCartHandlerService.getCurrentCart().pipe(
-      take(1),
-      tap((cart: Cart) => {
-        this.updateTransactionInfo({
-          totalPrice: `${cart.totalPrice?.value}`,
-          currencyCode:
-            cart.totalPrice?.currencyIso ||
-            this.initialTransactionInfo.currencyCode,
-          totalPriceStatus: this.initialTransactionInfo.totalPriceStatus,
-        });
-      })
-    );
+
+    return this.opfQuickBuyService
+      .getQuickBuyDeliveryType(this.transactionDetails.context)
+      .pipe(
+        switchMap((deliveryType) => {
+          this.transactionDetails.deliveryType = deliveryType;
+          this.setGooglePaymentRequestConfig(deliveryType);
+
+          return this.setDeliveryMode(undefined, deliveryType).pipe(
+            switchMap(() =>
+              this.opfCartHandlerService.getCurrentCart().pipe(
+                take(1),
+                tap((cart: Cart) => {
+                  this.transactionDetails.cart = cart;
+                  this.updateTransactionInfo({
+                    totalPrice: `${cart.totalPrice?.value}`,
+                    currencyCode:
+                      cart.totalPrice?.currencyIso ||
+                      this.initialTransactionInfo.currencyCode,
+                    totalPriceStatus:
+                      this.initialTransactionInfo.totalPriceStatus,
+                  });
+                })
+              )
+            )
+          );
+        })
+      );
   }
 
   initTransaction(): void {
@@ -254,6 +337,7 @@ export class OpfGooglePayService {
       .getQuickBuyLocationContext()
       .pipe(
         switchMap((context: OpfQuickBuyLocation) => {
+          this.transactionDetails.context = context;
           if (context === OpfQuickBuyLocation.PRODUCT) {
             return this.handleSingleProductTransaction();
           }
diff --git a/integration-libs/opf/base/components/opf-quick-buy/opf-quick-buy.service.spec.ts b/integration-libs/opf/base/components/opf-quick-buy/opf-quick-buy.service.spec.ts
index 1473574b8be..b409c1ad3c3 100644
--- a/integration-libs/opf/base/components/opf-quick-buy/opf-quick-buy.service.spec.ts
+++ b/integration-libs/opf/base/components/opf-quick-buy/opf-quick-buy.service.spec.ts
@@ -4,6 +4,7 @@
  */
 
 import { TestBed } from '@angular/core/testing';
+import { StoreModule } from '@ngrx/store';
 import { CheckoutConfig } from '@spartacus/checkout/base/root';
 import { AuthService, BaseSiteService, RoutingService } from '@spartacus/core';
 import { BehaviorSubject, of, throwError } from 'rxjs';
@@ -36,6 +37,7 @@ describe('OpfQuickBuyService', () => {
     ]);
 
     TestBed.configureTestingModule({
+      imports: [StoreModule.forRoot({})],
       providers: [
         OpfQuickBuyService,
         { provide: OpfPaymentFacade, useValue: opfPaymentFacadeMock },
diff --git a/integration-libs/opf/base/components/opf-quick-buy/opf-quick-buy.service.ts b/integration-libs/opf/base/components/opf-quick-buy/opf-quick-buy.service.ts
index 6d4af6df2e9..01e748c53da 100644
--- a/integration-libs/opf/base/components/opf-quick-buy/opf-quick-buy.service.ts
+++ b/integration-libs/opf/base/components/opf-quick-buy/opf-quick-buy.service.ts
@@ -7,12 +7,14 @@
 import { Injectable, inject } from '@angular/core';
 import { CheckoutConfig } from '@spartacus/checkout/base/root';
 import { AuthService, BaseSiteService, RoutingService } from '@spartacus/core';
+import { OpfPickupInStoreHandlerService } from '@spartacus/opf/base/core';
 import {
   ActiveConfiguration,
   DigitalWalletQuickBuy,
   OpfPaymentFacade,
   OpfPaymentProviderType,
   OpfProviderType,
+  OpfQuickBuyDeliveryType,
   OpfQuickBuyLocation,
 } from '@spartacus/opf/base/root';
 import { Observable, of } from 'rxjs';
@@ -27,6 +29,9 @@ export class OpfQuickBuyService {
   protected baseSiteService = inject(BaseSiteService);
   protected authService = inject(AuthService);
   protected routingService = inject(RoutingService);
+  protected opfPickupInStoreHandlerService = inject(
+    OpfPickupInStoreHandlerService
+  );
 
   getPaymentGatewayConfiguration(): Observable<ActiveConfiguration> {
     return this.opfPaymentFacade
@@ -94,4 +99,15 @@ export class OpfQuickBuyService {
       )
     );
   }
+
+  getQuickBuyDeliveryType(
+    context: OpfQuickBuyLocation
+  ): Observable<OpfQuickBuyDeliveryType> {
+    const deliveryTypeObservable =
+      context === OpfQuickBuyLocation.CART
+        ? this.opfPickupInStoreHandlerService.getActiveCartDeliveryType()
+        : this.opfPickupInStoreHandlerService.getSingleProductDeliveryType();
+
+    return deliveryTypeObservable.pipe(take(1));
+  }
 }
diff --git a/integration-libs/opf/base/core/services/index.ts b/integration-libs/opf/base/core/services/index.ts
index e6046ad7714..e0dd80b67cc 100644
--- a/integration-libs/opf/base/core/services/index.ts
+++ b/integration-libs/opf/base/core/services/index.ts
@@ -9,3 +9,4 @@ export * from './opf-endpoints.service';
 export * from './opf-payment-apple-pay.service';
 export * from './opf-payment-error-handler.service';
 export * from './opf-payment-hosted-fields.service';
+export * from './opf-pickup-in-store-handler.service';
diff --git a/integration-libs/opf/base/core/services/opf-pickup-in-store-handler.service.spec.ts b/integration-libs/opf/base/core/services/opf-pickup-in-store-handler.service.spec.ts
new file mode 100644
index 00000000000..a66505336c5
--- /dev/null
+++ b/integration-libs/opf/base/core/services/opf-pickup-in-store-handler.service.spec.ts
@@ -0,0 +1,56 @@
+import { TestBed } from '@angular/core/testing';
+import { ActiveCartFacade } from '@spartacus/cart/base/root';
+import { OpfQuickBuyDeliveryType } from '@spartacus/opf/base/root';
+import { IntendedPickupLocationFacade } from '@spartacus/pickup-in-store/root';
+import { CurrentProductService } from '@spartacus/storefront';
+import { of } from 'rxjs';
+import { OpfPickupInStoreHandlerService } from './opf-pickup-in-store-handler.service';
+
+describe('OpfPickupInStoreHandlerService', () => {
+  let service: OpfPickupInStoreHandlerService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        OpfPickupInStoreHandlerService,
+        {
+          provide: CurrentProductService,
+          useValue: { getProduct: () => of({ code: 'TEST_CODE' }) },
+        },
+        {
+          provide: ActiveCartFacade,
+          useValue: { hasDeliveryItems: () => of(true) },
+        },
+        {
+          provide: IntendedPickupLocationFacade,
+          useValue: {
+            getIntendedLocation: () => of({ pickupOption: 'pickup' }),
+          },
+        },
+      ],
+    });
+
+    service = TestBed.inject(OpfPickupInStoreHandlerService);
+    TestBed.inject(CurrentProductService);
+    TestBed.inject(ActiveCartFacade);
+    TestBed.inject(IntendedPickupLocationFacade);
+  });
+
+  it('should return pickup delivery type for single product', (done: DoneFn) => {
+    service
+      .getSingleProductDeliveryType()
+      .subscribe((deliveryType: OpfQuickBuyDeliveryType) => {
+        expect(deliveryType).toBe(OpfQuickBuyDeliveryType.PICKUP);
+        done();
+      });
+  });
+
+  it('should return shipping delivery type for active cart', (done: DoneFn) => {
+    service
+      .getActiveCartDeliveryType()
+      .subscribe((deliveryType: OpfQuickBuyDeliveryType) => {
+        expect(deliveryType).toBe(OpfQuickBuyDeliveryType.SHIPPING);
+        done();
+      });
+  });
+});
diff --git a/integration-libs/opf/base/core/services/opf-pickup-in-store-handler.service.ts b/integration-libs/opf/base/core/services/opf-pickup-in-store-handler.service.ts
new file mode 100644
index 00000000000..e24bb61badb
--- /dev/null
+++ b/integration-libs/opf/base/core/services/opf-pickup-in-store-handler.service.ts
@@ -0,0 +1,64 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP Spartacus team <spartacus-team@sap.com>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Injectable, inject } from '@angular/core';
+import { ActiveCartFacade } from '@spartacus/cart/base/root';
+import { Product } from '@spartacus/core';
+import { OpfQuickBuyDeliveryType } from '@spartacus/opf/base/root';
+import { IntendedPickupLocationFacade } from '@spartacus/pickup-in-store/root';
+import { CurrentProductService } from '@spartacus/storefront';
+import { Observable, of } from 'rxjs';
+import { map, switchMap, take } from 'rxjs/operators';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class OpfPickupInStoreHandlerService {
+  protected currentProductService = inject(CurrentProductService);
+  protected activeCartFacade = inject(ActiveCartFacade);
+  protected intendedPickupLocationFacade = inject(IntendedPickupLocationFacade);
+
+  /**
+   * Retrieves the delivery type for a single product based on the intended pickup location.
+   * @return An observable emitting the delivery type (pickup or shipping).
+   */
+  getSingleProductDeliveryType(): Observable<OpfQuickBuyDeliveryType> {
+    if (!this.intendedPickupLocationFacade) {
+      return of(OpfQuickBuyDeliveryType.SHIPPING);
+    }
+
+    return this.currentProductService.getProduct().pipe(
+      take(1),
+      switchMap((product: Product | null) =>
+        this.intendedPickupLocationFacade
+          .getIntendedLocation(product?.code as string)
+          .pipe(
+            map((intendedLocation) => {
+              return intendedLocation?.pickupOption ===
+                OpfQuickBuyDeliveryType.PICKUP.toLowerCase()
+                ? OpfQuickBuyDeliveryType.PICKUP
+                : OpfQuickBuyDeliveryType.SHIPPING;
+            })
+          )
+      )
+    );
+  }
+
+  /**
+   * Retrieves the delivery type for the active cart based on the presence of delivery items.
+   * @return An observable emitting the delivery type (shipping or pickup) for the active cart.
+   */
+  getActiveCartDeliveryType(): Observable<OpfQuickBuyDeliveryType> {
+    return this.activeCartFacade.hasDeliveryItems().pipe(
+      take(1),
+      map((hasDeliveryItems: boolean) =>
+        hasDeliveryItems
+          ? OpfQuickBuyDeliveryType.SHIPPING
+          : OpfQuickBuyDeliveryType.PICKUP
+      )
+    );
+  }
+}
diff --git a/integration-libs/opf/base/root/model/opf-quick-buy.model.ts b/integration-libs/opf/base/root/model/opf-quick-buy.model.ts
index 7933179daea..ffa9d8ea351 100644
--- a/integration-libs/opf/base/root/model/opf-quick-buy.model.ts
+++ b/integration-libs/opf/base/root/model/opf-quick-buy.model.ts
@@ -80,7 +80,7 @@ export interface QuickBuyTransactionDetails {
   cart?: Cart;
   product?: Product;
   quantity?: number;
-  pickup?: boolean;
+  deliveryType?: OpfQuickBuyDeliveryType;
   addressIds: string[];
   total: {
     amount: string;
@@ -138,3 +138,10 @@ export enum OpfQuickBuyLocation {
   CART = 'CART',
   PRODUCT = 'PRODUCT',
 }
+
+export enum OpfQuickBuyDeliveryType {
+  SHIPPING = 'SHIPPING',
+  PICKUP = 'PICKUP',
+}
+
+export const ADDRESS_FIELD_PLACEHOLDER = '[FIELD_NOT_SET]';
diff --git a/integration-libs/opf/package.json b/integration-libs/opf/package.json
index 39255f2714b..ee939eee05e 100644
--- a/integration-libs/opf/package.json
+++ b/integration-libs/opf/package.json
@@ -37,6 +37,7 @@
     "@spartacus/checkout": "2211.20.0-2",
     "@spartacus/core": "2211.20.0-2",
     "@spartacus/order": "2211.20.0-2",
+    "@spartacus/pickup-in-store": "2211.20.0-2",
     "@spartacus/schematics": "2211.20.0-2",
     "@spartacus/storefront": "2211.20.0-2",
     "@spartacus/styles": "2211.20.0-2",
diff --git a/integration-libs/opf/tsconfig.lib.json b/integration-libs/opf/tsconfig.lib.json
index 967fb1d8ddb..4fb62e5bf26 100644
--- a/integration-libs/opf/tsconfig.lib.json
+++ b/integration-libs/opf/tsconfig.lib.json
@@ -108,12 +108,26 @@
       "@spartacus/user/profile": ["dist/user/profile"],
       "@spartacus/user/profile/occ": ["dist/user/profile/occ"],
       "@spartacus/user/profile/root": ["dist/user/profile/root"],
+      "@spartacus/pickup-in-store/assets": ["dist/pickup-in-store/assets"],
+      "@spartacus/pickup-in-store/components": [
+        "dist/pickup-in-store/components"
+      ],
+      "@spartacus/pickup-in-store/core": ["dist/pickup-in-store/core"],
+      "@spartacus/pickup-in-store": ["dist/pickup-in-store"],
+      "@spartacus/pickup-in-store/occ": ["dist/pickup-in-store/occ"],
+      "@spartacus/pickup-in-store/root": ["dist/pickup-in-store/root"],
       "@spartacus/pdf-invoices/assets": ["dist/pdf-invoices/assets"],
       "@spartacus/pdf-invoices/components": ["dist/pdf-invoices/components"],
       "@spartacus/pdf-invoices/core": ["dist/pdf-invoices/core"],
       "@spartacus/pdf-invoices": ["dist/pdf-invoices"],
       "@spartacus/pdf-invoices/occ": ["dist/pdf-invoices/occ"],
-      "@spartacus/pdf-invoices/root": ["dist/pdf-invoices/root"]
+      "@spartacus/pdf-invoices/root": ["dist/pdf-invoices/root"],
+      "@spartacus/storefinder/assets": ["dist/storefinder/assets"],
+      "@spartacus/storefinder/components": ["dist/storefinder/components"],
+      "@spartacus/storefinder/core": ["dist/storefinder/core"],
+      "@spartacus/storefinder": ["dist/storefinder"],
+      "@spartacus/storefinder/occ": ["dist/storefinder/occ"],
+      "@spartacus/storefinder/root": ["dist/storefinder/root"]
     },
     "resolveJsonModule": true,
     "esModuleInterop": true
diff --git a/package.json b/package.json
index 2fd3a3645d5..1e79941999b 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     "build:customer-ticketing": "npm --prefix feature-libs/customer-ticketing run build:schematics && nx build customer-ticketing --configuration production",
     "build:digital-payments": "npm --prefix integration-libs/digital-payments run build:schematics && nx build digital-payments --configuration production",
     "build:epd-visualization": "npm --prefix integration-libs/epd-visualization run build:schematics && nx build epd-visualization --configuration production",
-    "build:libs": "nx build core --configuration production && nx build storefrontlib --configuration production && concurrently --kill-others-on-fail npm:build:schematics npm:build:user && npm run build:cart && npm run build:pdf-invoices && npm run build:order && npm run build:storefinder && concurrently --kill-others-on-fail npm:build:checkout npm:build:asm npm:build:tracking npm:build:customer-ticketing && concurrently --kill-others-on-fail npm:build:organization npm:build:product npm:build:product-configurator npm:build:requested-delivery-date && concurrently --kill-others-on-fail npm:build:smartedit npm:build:qualtrics npm:build:assets npm:build:cds npm:build:cdc npm:build:cdp npm:build:digital-payments npm:build:epd-visualization npm:build:s4om npm:build:segment-refs npm:build:pickup-in-store npm:build:quote npm:build:opf && npm run build:setup",
+    "build:libs": "nx build core --configuration production && nx build storefrontlib --configuration production && concurrently --kill-others-on-fail npm:build:schematics npm:build:user && npm run build:cart && npm run build:pdf-invoices && npm run build:order && npm run build:storefinder && concurrently --kill-others-on-fail npm:build:checkout npm:build:asm npm:build:tracking npm:build:customer-ticketing && concurrently --kill-others-on-fail npm:build:organization npm:build:product npm:build:product-configurator npm:build:requested-delivery-date npm:build:pickup-in-store && concurrently --kill-others-on-fail npm:build:smartedit npm:build:qualtrics npm:build:assets npm:build:cds npm:build:cdc npm:build:cdp npm:build:digital-payments npm:build:epd-visualization npm:build:s4om npm:build:segment-refs npm:build:quote npm:build:opf && npm run build:setup",
     "build:order": "npm --prefix feature-libs/order run build:schematics && nx build order --configuration production",
     "build:opf": "npm --prefix integration-libs/opf run build:schematics && nx build opf --configuration production",
     "build:organization": "npm --prefix feature-libs/organization run build:schematics && nx build organization --configuration production",
diff --git a/projects/schematics/src/dependencies.json b/projects/schematics/src/dependencies.json
index 866055826f2..be73ac4cced 100644
--- a/projects/schematics/src/dependencies.json
+++ b/projects/schematics/src/dependencies.json
@@ -379,6 +379,7 @@
     "@spartacus/checkout": "2211.20.0-2",
     "@spartacus/core": "2211.20.0-2",
     "@spartacus/order": "2211.20.0-2",
+    "@spartacus/pickup-in-store": "2211.20.0-2",
     "@spartacus/schematics": "2211.20.0-2",
     "@spartacus/storefront": "2211.20.0-2",
     "@spartacus/styles": "2211.20.0-2",
diff --git a/projects/schematics/src/shared/utils/graph-utils_spec.ts b/projects/schematics/src/shared/utils/graph-utils_spec.ts
index 9d1fabf928a..8be71fe0a1d 100644
--- a/projects/schematics/src/shared/utils/graph-utils_spec.ts
+++ b/projects/schematics/src/shared/utils/graph-utils_spec.ts
@@ -137,6 +137,7 @@ describe('Graph utils', () => {
         SPARTACUS_CHECKOUT,
         SPARTACUS_STOREFINDER,
         SPARTACUS_REQUESTED_DELIVERY_DATE,
+        SPARTACUS_PICKUP_IN_STORE,
         SPARTACUS_TRACKING,
         SPARTACUS_CUSTOMER_TICKETING,
         SPARTACUS_ORGANIZATION,
@@ -154,7 +155,6 @@ describe('Graph utils', () => {
         SPARTACUS_QUALTRICS,
         SPARTACUS_PRODUCT_CONFIGURATOR,
         SPARTACUS_PRODUCT,
-        SPARTACUS_PICKUP_IN_STORE,
       ]);
     });
   });