Merge pull request #3054 from bigcommerce/bcp-button-app-switch

feat(payment): PAYPAL-5723 add bcp button 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-button-strategy.spec.ts

@@ -441,6 +441,57 @@ describe('BigCommercePaymentsButtonStrategy', () => {
             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: bigCommercePaymentsOptions.style,
+                createOrder: expect.any(Function),
+                onApprove: 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-button-strategy.ts

@@ -88,7 +88,7 @@ export default class BigCommercePaymentsButtonStrategy implements CheckoutButton
             false,
         );
 
-        this.renderButton(containerId, methodId, bigcommerce_payments);
+        this.renderButton(containerId, methodId, bigcommerce_payments, isBuyNowFlow);
     }
 
     deinitialize(): Promise<void> {
@@ -99,6 +99,7 @@ export default class BigCommercePaymentsButtonStrategy implements CheckoutButton
         containerId: string,
         methodId: string,
         bigcommerce_payments: BigCommercePaymentsButtonInitializeOptions,
+        isBuyNowFlow?: boolean,
     ): void {
         const { buyNowInitializeOptions, style, onComplete, onEligibilityFailure } =
             bigcommerce_payments;
@@ -107,9 +108,14 @@ export default class BigCommercePaymentsButtonStrategy implements CheckoutButton
         const state = this.paymentIntegrationService.getState();
         const paymentMethod =
             state.getPaymentMethodOrThrow<BigCommercePaymentsInitializationData>(methodId);
-        const { isHostedCheckoutEnabled } = paymentMethod.initializationData || {};
+        const { isHostedCheckoutEnabled, isAppSwitchEnabled } =
+            paymentMethod.initializationData || {};
 
         const defaultCallbacks = {
+            ...(!isBuyNowFlow &&
+                this.isPaypalCommerceAppSwitchEnabled(methodId) && {
+                    appSwitchWhenAvailable: true,
+                }),
             createOrder: () =>
                 this.bigCommercePaymentsIntegrationService.createOrder('bigcommerce_payments'),
             onApprove: ({ orderID }: ApproveCallbackPayload) =>
@@ -122,10 +128,12 @@ export default class BigCommercePaymentsButtonStrategy implements CheckoutButton
         };
 
         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),
         };
@@ -141,7 +149,11 @@ export default class BigCommercePaymentsButtonStrategy implements CheckoutButton
         const paypalButton = paypalSdk.Buttons(buttonRenderOptions);
 
         if (paypalButton.isEligible()) {
-            paypalButton.render(`#${containerId}`);
+            if (paypalButton.hasReturned?.() && this.isPaypalCommerceAppSwitchEnabled(methodId)) {
+                paypalButton.resume?.();
+            } else {
+                paypalButton.render(`#${containerId}`);
+            }
         } else if (onEligibilityFailure && typeof onEligibilityFailure === 'function') {
             onEligibilityFailure();
         } else {
@@ -259,4 +271,17 @@ export default class BigCommercePaymentsButtonStrategy implements CheckoutButton
             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',