feat(payment): PAYPAL-5724 add bcp customer app switch

Author: bc-yaroslav-zhmutskyi

packages/bigcommerce-payments-integration/src/bigcommerce-payments-types.ts

@@ -263,6 +263,7 @@ export interface BigCommercePaymentsInitializationData {
     shouldRenderFields?: boolean;
     shouldRunAcceleratedCheckout?: boolean;
     paymentButtonStyles?: Record<string, PayPalButtonStyleOptions>;
+    isAppSwitchEnabled?: boolean;
 }
 
 /**
@@ -357,6 +358,8 @@ export interface BigCommercePaymentsButtons {
     render(id: string): void;
     close(): void;
     isEligible(): boolean;
+    hasReturned?(): boolean;
+    resume?(): void;
 }
 
 export interface BigCommercePaymentsButtonsOptions {

packages/bigcommerce-payments-integration/src/bigcommerce-payments/bigcommerce-payments-customer-strategy.spec.ts

@@ -333,6 +333,62 @@ describe('BigCommercePaymentsCustomerStrategy', () => {
             expect(bigCommercePaymentsSdkRenderMock).toHaveBeenCalled();
         });
 
+        it('render button with appSwitch flag', async () => {
+            jest.spyOn(
+                paymentIntegrationService.getState(),
+                'getPaymentMethodOrThrow',
+            ).mockReturnValue({
+                ...paymentMethod,
+                initializationData: {
+                    ...paymentMethod.initializationData,
+                    isAppSwitchEnabled: true,
+                },
+            });
+
+            await strategy.initialize(initializationOptions);
+
+            expect(paypalSdk.Buttons).toHaveBeenCalledWith({
+                appSwitchWhenAvailable: true,
+                fundingSource: paypalSdk.FUNDING.PAYPAL,
+                style: {
+                    height: DefaultCheckoutButtonHeight,
+                    color: StyleButtonColor.silver,
+                    label: 'checkout',
+                },
+                createOrder: expect.any(Function),
+                onApprove: expect.any(Function),
+                onClick: expect.any(Function),
+            });
+        });
+
+        it('calls resume when appSwitch enabled and returned from app', async () => {
+            jest.spyOn(
+                paymentIntegrationService.getState(),
+                'getPaymentMethodOrThrow',
+            ).mockReturnValue({
+                ...paymentMethod,
+                initializationData: {
+                    ...paymentMethod.initializationData,
+                    isAppSwitchEnabled: true,
+                },
+            });
+
+            const resumeMock = jest.fn();
+            const bigCommercePaymentsSdkRenderMock = jest.fn();
+
+            jest.spyOn(paypalSdk, 'Buttons').mockImplementation(() => ({
+                close: jest.fn(),
+                isEligible: jest.fn(() => true),
+                render: bigCommercePaymentsSdkRenderMock,
+                hasReturned: jest.fn(() => true),
+                resume: resumeMock,
+            }));
+
+            await strategy.initialize(initializationOptions);
+
+            expect(resumeMock).toHaveBeenCalled();
+        });
+
         it('does not render PayPal button if it is not eligible', async () => {
             const bigCommercePaymentsSdkRenderMock = jest.fn();
 

packages/bigcommerce-payments-integration/src/bigcommerce-payments/bigcommerce-payments-customer-strategy.ts

@@ -119,11 +119,14 @@ export default class BigCommercePaymentsCustomerStrategy implements CustomerStra
         const state = this.paymentIntegrationService.getState();
         const paymentMethod =
             state.getPaymentMethodOrThrow<BigCommercePaymentsInitializationData>(methodId);
-        const { isHostedCheckoutEnabled, paymentButtonStyles } =
+        const { isHostedCheckoutEnabled, paymentButtonStyles, isAppSwitchEnabled } =
             paymentMethod.initializationData || {};
         const { checkoutTopButtonStyles } = paymentButtonStyles || {};
 
         const defaultCallbacks = {
+            ...(this.isPaypalCommerceAppSwitchEnabled(methodId) && {
+                appSwitchWhenAvailable: true,
+            }),
             createOrder: () =>
                 this.bigCommercePaymentsIntegrationService.createOrder('bigcommerce_payments'),
             onApprove: ({ orderID }: ApproveCallbackPayload) =>
@@ -132,10 +135,12 @@ export default class BigCommercePaymentsCustomerStrategy implements CustomerStra
         };
 
         const hostedCheckoutCallbacks = {
-            onShippingAddressChange: (data: ShippingAddressChangeCallbackPayload) =>
-                this.onShippingAddressChange(data),
-            onShippingOptionsChange: (data: ShippingOptionChangeCallbackPayload) =>
-                this.onShippingOptionsChange(data),
+            ...(!isAppSwitchEnabled && {
+                onShippingAddressChange: (data: ShippingAddressChangeCallbackPayload) =>
+                    this.onShippingAddressChange(data),
+                onShippingOptionsChange: (data: ShippingOptionChangeCallbackPayload) =>
+                    this.onShippingOptionsChange(data),
+            }),
             onApprove: (data: ApproveCallbackPayload, actions: ApproveCallbackActions) =>
                 this.onHostedCheckoutApprove(data, actions, methodId, onComplete),
         };
@@ -153,7 +158,11 @@ export default class BigCommercePaymentsCustomerStrategy implements CustomerStra
         const paypalButton = paypalSdk.Buttons(buttonRenderOptions);
 
         if (paypalButton.isEligible()) {
-            paypalButton.render(`#${container}`);
+            if (paypalButton.hasReturned?.() && this.isPaypalCommerceAppSwitchEnabled(methodId)) {
+                paypalButton.resume?.();
+            } else {
+                paypalButton.render(`#${container}`);
+            }
         } else {
             this.bigCommercePaymentsIntegrationService.removeElement(container);
         }
@@ -249,4 +258,17 @@ export default class BigCommercePaymentsCustomerStrategy implements CustomerStra
             throw error;
         }
     }
+
+    /**
+     *
+     * PayPal AppSwitch enabling handling
+     *
+     */
+    private isPaypalCommerceAppSwitchEnabled(methodId: string): boolean {
+        const state = this.paymentIntegrationService.getState();
+        const paymentMethod =
+            state.getPaymentMethodOrThrow<BigCommercePaymentsInitializationData>(methodId);
+
+        return paymentMethod.initializationData?.isAppSwitchEnabled ?? false;
+    }
 }

packages/bigcommerce-payments-integration/src/mocks/get-bigcommerce-payments-payment-method.mock.ts

@@ -72,6 +72,7 @@ export default function getBigCommercePaymentsPaymentMethod(): PaymentMethod {
                     },
                 },
             ],
+            isAppSwitchEnabled: false,
         },
         skipRedirectConfirmationAlert: false,
         type: 'PAYMENT_TYPE_API',