feat(payment): PAYPAL-5725 add bcp payments app switch

Author: bc-yaroslav-zhmutskyi

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

@@ -225,6 +225,64 @@ describe('BigCommercePaymentsPaymentStrategy', () => {
             });
         });
 
+        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: {
+                    color: 'black',
+                    height: 55,
+                    label: 'pay',
+                },
+                createOrder: expect.any(Function),
+                onClick: expect.any(Function),
+                onApprove: expect.any(Function),
+                onCancel: expect.any(Function),
+                onError: 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-payment-strategy.ts

@@ -236,6 +236,9 @@ export default class BigCommercePaymentsPaymentStrategy implements PaymentStrate
         const { container, onError, onRenderButton, onValidate, submitForm } = bigcommerce_payments;
 
         const buttonOptions: BigCommercePaymentsButtonsOptions = {
+            ...(this.isPaypalCommerceAppSwitchEnabled(methodId) && {
+                appSwitchWhenAvailable: true,
+            }),
             fundingSource: paypalSdk.FUNDING.PAYPAL,
             style: this.bigCommercePaymentsIntegrationService.getValidButtonStyle(
                 checkoutPaymentButtonStyles,
@@ -257,7 +260,11 @@ export default class BigCommercePaymentsPaymentStrategy implements PaymentStrate
             onRenderButton();
         }
 
-        this.paypalButton.render(container);
+        if (this.paypalButton.hasReturned?.() && this.isPaypalCommerceAppSwitchEnabled(methodId)) {
+            this.paypalButton.resume?.();
+        } else {
+            this.paypalButton.render(container);
+        }
     }
 
     private async handleClick(
@@ -373,4 +380,17 @@ export default class BigCommercePaymentsPaymentStrategy implements PaymentStrate
 
         return false;
     }
+
+    /**
+     *
+     * 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;
+    }
 }