refactor(payment): Moved PayPalCommerceButton to paypal-utils

packages/core/src/app/customer/CheckoutButtonList.tsx

@@ -4,8 +4,9 @@ import React, { FunctionComponent, memo } from 'react';
 import { TranslatedString } from '@bigcommerce/checkout/locale';
 
 import CheckoutButton from './CheckoutButton';
-import { AmazonPayV2Button, ApplePayButton, PayPalCommerceButton } from './customWalletButton';
+import { AmazonPayV2Button, ApplePayButton } from './customWalletButton';
 import { getSupportedMethodIds } from './getSupportedMethods';
+import { PayPalCommerceButton } from '@bigcommerce/checkout/paypal-utils';
 
 export interface CheckoutButtonListProps {
     methodIds?: string[];

packages/core/src/app/customer/WalletButtonV1Resolver.tsx

@@ -2,7 +2,8 @@ import { CustomerInitializeOptions, CustomerRequestOptions } from "@bigcommerce/
 import React, { FunctionComponent } from "react";
 
 import CheckoutButton from "./CheckoutButton";
-import { ApplePayButton, PayPalCommerceButton } from "./customWalletButton";
+import { ApplePayButton } from "./customWalletButton";
+import { PayPalCommerceButton } from "@bigcommerce/checkout/paypal-utils";
 
 interface CheckoutButtonV1ResolverProps {
     methodId: string;

packages/core/src/app/customer/customWalletButton/index.ts

@@ -1,3 +1,2 @@
 export { default as ApplePayButton } from './ApplePayButton';
 export { default as AmazonPayV2Button } from './AmazonPayV2Button';
-export { default as PayPalCommerceButton } from './PayPalCommerceButton';

packages/paypal-utils/src/PayPalCommerceButton.tsx

@@ -0,0 +1,68 @@
+import { noop } from 'lodash';
+import React, {FunctionComponent, useEffect} from 'react';
+import { CustomerRequestOptions, CustomerInitializeOptions } from '@bigcommerce/checkout-sdk';
+import { useCheckout } from '@bigcommerce/checkout/payment-integration-api';
+
+interface CheckoutButtonProps { // TODO: MOVE TO PROPER PLACE
+    containerId: string;
+    methodId: string;
+    isShowingWalletButtonsOnTop?: boolean;
+    deinitialize(options: CustomerRequestOptions): void;
+    initialize(options: CustomerInitializeOptions): void;
+    onError?(error: Error): void;
+    onClick?(methodId: string): void;
+};
+
+const PayPalCommerceButton: FunctionComponent<CheckoutButtonProps> = ({
+    methodId,
+    onError,
+    onClick = noop,
+    containerId,
+}) => {
+    const { checkoutService } = useCheckout();
+    useEffect(() => {
+        const initializeCustomer = async () => {
+            try {
+                await checkoutService.initializeCustomer({
+                    methodId,
+                    [methodId]: {
+                        container: containerId,
+                        onError,
+                        onClick: () => onClick(methodId),
+                        onComplete: () => {}, //TODO: Add navigateToOrderConfirmation
+                    },
+                });
+            } catch (error) {
+                if (error instanceof Error) {
+                    if (onError) {
+                        onError(error);
+                    }
+                }
+            }
+        };
+
+        void initializeCustomer();
+
+        return () => {
+            const deinitializeCustomer = async () => {
+                try {
+                    await checkoutService.deinitializeCustomer({
+                        methodId,
+                    });
+                } catch (error) {
+                    if (error instanceof Error) {
+                        if (onError) {
+                            onError(error);
+                        }
+                    }
+                }
+            };
+
+            void deinitializeCustomer();
+        };
+    }, [checkoutService, onError]);
+
+    return <div id={containerId}></div>
+};
+
+export default PayPalCommerceButton;

packages/paypal-utils/src/index.ts

@@ -1,2 +1,3 @@
 export { default as PaypalCommerceCreditBanner } from './PaypalCommerceCreditBanner';
 export { default as BraintreePaypalCreditBanner } from './BraintreePaypalCreditBanner';
+export { default as PayPalCommerceButton } from './PayPalCommerceButton';