feat(payment): PI-1537 Refactor the existing bluesnapv2 payment strategy in Checkout-js

bc-ania · bc-ania · commit 9d58dca52077 · 2024-03-26T09:32:09.000+01:00
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -21,7 +21,6 @@ package-lock.json @bigcommerce/team-checkout @bigcommerce/team-integrations @big
 /packages/core/payment/paymentMethod/AffirmPaymentMethod.tsx @bigcommerce/team-integrations
 /packages/core/payment/paymentMethod/AmazonPaymentMethod.tsx @bigcommerce/team-integrations
 /packages/core/payment/paymentMethod/BarclayCardPaymentMethod.tsx @bigcommerce/team-integrations
-/packages/core/payment/paymentMethod/BlueSnapV2PaymentMethod.tsx @bigcommerce/team-integrations
 /packages/core/payment/paymentMethod/BoltClientPaymentMethod.tsx @bigcommerce/team-integrations
 /packages/core/payment/paymentMethod/BoltCustomForm.tsx @bigcommerce/team-integrations
 /packages/core/payment/paymentMethod/BoltCustomFormValues.ts @bigcommerce/team-integrations
diff --git a/packages/bluesnap-direct-integration/.eslintrc.json b/packages/bluesnap-direct-integration/.eslintrc.json
@@ -10,7 +10,8 @@
     {
       "files": ["*.mock.ts"],
       "rules": {
-        "@typescript-eslint/naming-convention": "off"
+        "@typescript-eslint/naming-convention": "off",
+        "@typescript-eslint/no-unsafe-assignment" : "off"
       }
     }
   ]
diff --git a/packages/bluesnap-direct-integration/src/BlueSnapV2PaymentMethod.test.tsx b/packages/bluesnap-direct-integration/src/BlueSnapV2PaymentMethod.test.tsx
@@ -2,56 +2,73 @@ import {
     CheckoutSelectors,
     CheckoutService,
     createCheckoutService,
+    createLanguageService,
+    PaymentInitializeOptions,
 } from '@bigcommerce/checkout-sdk';
+import { act } from '@testing-library/react';
 import { mount, ReactWrapper } from 'enzyme';
 import { Formik } from 'formik';
 import { noop } from 'lodash';
 import React, { FunctionComponent } from 'react';
-import { act } from 'react-dom/test-utils';
 
-import { createLocaleContext, LocaleContext, LocaleContextType } from '@bigcommerce/checkout/locale';
-import { CheckoutProvider } from '@bigcommerce/checkout/payment-integration-api';
-
-import { getCart } from '../../cart/carts.mock';
-import { getStoreConfig } from '../../config/config.mock';
-import { getCustomer } from '../../customer/customers.mock';
-import { Modal, ModalProps } from '../../ui/modal';
-import { getPaymentMethod } from '../payment-methods.mock';
-import PaymentContext, { PaymentContextProps } from '../PaymentContext';
-
-import BlueSnapV2PaymentMethod, { BlueSnapV2PaymentMethodProps } from './BlueSnapV2PaymentMethod';
-import HostedPaymentMethod from './HostedPaymentMethod';
-import PaymentMethodId from './PaymentMethodId';
+import {
+    createLocaleContext,
+    LocaleContext,
+    LocaleContextType,
+} from '@bigcommerce/checkout/locale';
+import {
+    CheckoutProvider,
+    PaymentFormContext,
+    PaymentFormService,
+    PaymentMethodId,
+    PaymentMethodProps,
+} from '@bigcommerce/checkout/payment-integration-api';
+import {
+    getCart,
+    getCustomer,
+    getPaymentFormServiceMock,
+    getPaymentMethod,
+    getStoreConfig,
+} from '@bigcommerce/checkout/test-mocks';
+import { Modal } from '@bigcommerce/checkout/ui';
+import HostedPaymentMethodComponent from 'packages/hosted-payment-integration/src/HostedPaymentComponent';
+import { ModalProps } from 'packages/ui/src/modal';
+
+import BlueSnapV2PaymentMethod from './BlueSnapV2PaymentMethod';
 
 describe('when using BlueSnapV2 payment', () => {
-    let defaultProps: BlueSnapV2PaymentMethodProps;
+    let defaultProps: PaymentMethodProps;
     let checkoutService: CheckoutService;
     let checkoutState: CheckoutSelectors;
     let localeContext: LocaleContextType;
-    let paymentContext: PaymentContextProps;
     let BlueSnapV2PaymentMethodTest: FunctionComponent;
+    let paymentForm: PaymentFormService;
+    let initializePayment: jest.SpyInstance<
+        Promise<CheckoutSelectors>,
+        [options: PaymentInitializeOptions]
+    >;
 
     beforeEach(() => {
+        checkoutService = createCheckoutService();
+        checkoutState = checkoutService.getState();
+        localeContext = createLocaleContext(getStoreConfig());
+        paymentForm = getPaymentFormServiceMock();
+        initializePayment = jest
+            .spyOn(checkoutService, 'initializePayment')
+            .mockResolvedValue(checkoutState);
         defaultProps = {
-            initializePayment: jest.fn(),
-            deinitializePayment: jest.fn(),
+            checkoutService,
+            checkoutState,
+            paymentForm: getPaymentFormServiceMock(),
+            language: createLanguageService(),
+            onUnhandledError: jest.fn(),
             method: {
                 ...getPaymentMethod(),
                 id: 'mastercard',
                 gateway: PaymentMethodId.BlueSnapV2,
             },
         };
-
-        checkoutService = createCheckoutService();
-        checkoutState = checkoutService.getState();
-        localeContext = createLocaleContext(getStoreConfig());
-
-        paymentContext = {
-            disableSubmit: jest.fn(),
-            setSubmit: jest.fn(),
-            setValidationSchema: jest.fn(),
-            hidePaymentSubmitButton: jest.fn(),
-        };
+        jest.spyOn(checkoutService, 'initializePayment').mockResolvedValue(checkoutState);
 
         jest.spyOn(checkoutState.data, 'getCart').mockReturnValue(getCart());
 
@@ -61,27 +78,27 @@ describe('when using BlueSnapV2 payment', () => {
 
         BlueSnapV2PaymentMethodTest = (props) => (
             <CheckoutProvider checkoutService={checkoutService}>
-                <PaymentContext.Provider value={paymentContext}>
+                <PaymentFormContext.Provider value={{ paymentForm }}>
                     <LocaleContext.Provider value={localeContext}>
                         <Formik initialValues={{}} onSubmit={noop}>
                             <BlueSnapV2PaymentMethod {...defaultProps} {...props} />
                         </Formik>
                     </LocaleContext.Provider>
-                </PaymentContext.Provider>
+                </PaymentFormContext.Provider>
             </CheckoutProvider>
         );
     });
 
     it('renders as hosted payment method', () => {
         const container = mount(<BlueSnapV2PaymentMethodTest />);
 
-        expect(container.find(HostedPaymentMethod)).toHaveLength(1);
+        expect(container.find(HostedPaymentMethodComponent)).toHaveLength(1);
     });
 
     it('initializes method with required config', () => {
         mount(<BlueSnapV2PaymentMethodTest />);
 
-        expect(defaultProps.initializePayment).toHaveBeenCalledWith(
+        expect(defaultProps.checkoutService.initializePayment).toHaveBeenCalledWith(
             expect.objectContaining({
                 methodId: 'mastercard',
                 gatewayId: 'bluesnapv2',
@@ -99,10 +116,10 @@ describe('when using BlueSnapV2 payment', () => {
 
     it('renders modal that hosts bluesnap payment page', async () => {
         const component = mount(<BlueSnapV2PaymentMethodTest />);
-        const initializeOptions = (defaultProps.initializePayment as jest.Mock).mock.calls[0][0];
+        const initializeOptions = initializePayment.mock.calls[0][0];
 
         act(() => {
-            initializeOptions.bluesnapv2.onLoad(document.createElement('iframe'), jest.fn());
+            initializeOptions.bluesnapv2?.onLoad(document.createElement('iframe'), jest.fn());
         });
 
         await new Promise((resolve) => process.nextTick(resolve));
@@ -116,10 +133,10 @@ describe('when using BlueSnapV2 payment', () => {
 
     it('renders modal and appends bluesnap payment page', async () => {
         const component = mount(<BlueSnapV2PaymentMethodTest />);
-        const initializeOptions = (defaultProps.initializePayment as jest.Mock).mock.calls[0][0];
+        const initializeOptions = initializePayment.mock.calls[0][0];
         const iframe = document.createElement('iframe');
 
-        act(() => initializeOptions.bluesnapv2.onLoad(iframe, jest.fn()));
+        act(() => initializeOptions.bluesnapv2?.onLoad(iframe, jest.fn()));
 
         await new Promise((resolve) => process.nextTick(resolve));
 
@@ -136,10 +153,10 @@ describe('when using BlueSnapV2 payment', () => {
 
     it('renders modal but does not append bluesnap payment page because is empty', async () => {
         const component = mount(<BlueSnapV2PaymentMethodTest />);
-        const initializeOptions = (defaultProps.initializePayment as jest.Mock).mock.calls[0][0];
-
+        const initializeOptions = initializePayment.mock.calls[0][0];
+        
         act(() => {
-            initializeOptions.bluesnapv2.onLoad(undefined, jest.fn());
+            initializeOptions.bluesnapv2?.onLoad(undefined, jest.fn());
         });
 
         await new Promise((resolve) => process.nextTick(resolve));
@@ -158,10 +175,10 @@ describe('when using BlueSnapV2 payment', () => {
     it('cancels payment flow if user chooses to close modal', async () => {
         const cancelBlueSnapV2Payment = jest.fn();
         const component = mount(<BlueSnapV2PaymentMethodTest />);
-        const initializeOptions = (defaultProps.initializePayment as jest.Mock).mock.calls[0][0];
+        const initializeOptions = initializePayment.mock.calls[0][0];
 
         act(() => {
-            initializeOptions.bluesnapv2.onLoad(
+            initializeOptions.bluesnapv2?.onLoad(
                 document.createElement('iframe'),
                 cancelBlueSnapV2Payment,
             );
@@ -176,9 +193,9 @@ describe('when using BlueSnapV2 payment', () => {
         const modal: ReactWrapper<ModalProps> = component.find(Modal);
 
         act(() => {
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument, @typescript-eslint/consistent-type-assertions
             modal.prop('onRequestClose')!(new MouseEvent('click') as any);
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-unsafe-argument, @typescript-eslint/consistent-type-assertions, @typescript-eslint/no-explicit-any
             modal.prop('onRequestClose')!(new MouseEvent('click') as any);
         });
 
diff --git a/packages/bluesnap-direct-integration/src/BlueSnapV2PaymentMethod.tsx b/packages/bluesnap-direct-integration/src/BlueSnapV2PaymentMethod.tsx
@@ -8,10 +8,16 @@ import React, {
     useState,
 } from 'react';
 
-import { LoadingOverlay } from '../../ui/loading';
-import { Modal } from '../../ui/modal';
-
-import HostedPaymentMethod, { HostedPaymentMethodProps } from './HostedPaymentMethod';
+import {
+    HostedPaymentComponent,
+    HostedPaymentMethodProps,
+} from '@bigcommerce/checkout/hosted-payment-integration';
+import {
+    PaymentMethodProps,
+    PaymentMethodResolveId,
+    toResolvableComponent,
+} from '@bigcommerce/checkout/payment-integration-api';
+import { LoadingOverlay, Modal } from '@bigcommerce/checkout/ui';
 
 export type BlueSnapV2PaymentMethodProps = HostedPaymentMethodProps;
 
@@ -20,8 +26,11 @@ interface BlueSnapV2PaymentMethodRef {
     cancelBlueSnapV2Payment?(): void;
 }
 
-const BlueSnapV2PaymentMethod: FunctionComponent<BlueSnapV2PaymentMethodProps> = ({
-    initializePayment,
+const BlueSnapV2PaymentMethod: FunctionComponent<PaymentMethodProps> = ({
+    checkoutService,
+    checkoutState,
+    method,
+    paymentForm,
     ...rest
 }) => {
     const [isLoadingIframe, setisLoadingIframe] = useState<boolean>(false);
@@ -41,7 +50,8 @@ const BlueSnapV2PaymentMethod: FunctionComponent<BlueSnapV2PaymentMethodProps> =
 
     const initializeBlueSnapV2Payment = useCallback(
         (options: PaymentInitializeOptions) => {
-            return initializePayment({
+
+            return checkoutService.initializePayment({
                 ...options,
                 bluesnapv2: {
                     onLoad(content: HTMLIFrameElement, cancel: () => void) {
@@ -57,7 +67,7 @@ const BlueSnapV2PaymentMethod: FunctionComponent<BlueSnapV2PaymentMethodProps> =
                 },
             });
         },
-        [initializePayment],
+        [checkoutService],
     );
 
     const appendPaymentPageContent = useCallback(() => {
@@ -71,7 +81,15 @@ const BlueSnapV2PaymentMethod: FunctionComponent<BlueSnapV2PaymentMethodProps> =
 
     return (
         <>
-            <HostedPaymentMethod {...rest} initializePayment={initializeBlueSnapV2Payment} />
+            <HostedPaymentComponent
+                {...rest}
+                checkoutService={checkoutService}
+                checkoutState={checkoutState}
+                deinitializePayment={checkoutService.deinitializePayment}
+                initializePayment={initializeBlueSnapV2Payment}
+                method={method}
+                paymentForm={paymentForm}
+            />
             <Modal
                 additionalModalClassName="modal--bluesnap"
                 isOpen={!!paymentPageContent}
@@ -87,4 +105,7 @@ const BlueSnapV2PaymentMethod: FunctionComponent<BlueSnapV2PaymentMethodProps> =
     );
 };
 
-export default BlueSnapV2PaymentMethod;
+export default toResolvableComponent<PaymentMethodProps, PaymentMethodResolveId>(
+    BlueSnapV2PaymentMethod,
+    [{ gateway: 'bluesnapv2' }],
+);
diff --git a/packages/bluesnap-direct-integration/src/index.ts b/packages/bluesnap-direct-integration/src/index.ts
@@ -2,3 +2,4 @@ export { default as BlueSnapDirectEcpPaymentMethod } from './BlueSnapDirectEcpPa
 export { default as BlueSnapDirectAlternativePaymentMethod } from './BlueSnapDirectAlternativePaymentMethod';
 export { default as BlueSnapDirectSepaPaymentMethod } from './BlueSnapDirectSepaPaymentMethod';
 export { default as BlueSnapDirectIdealPaymentMethod } from './BlueSnapDirectIdealPaymentMethod';
+export { default as BlueSnapV2PaymentMethod } from './BlueSnapV2PaymentMethod';
diff --git a/packages/core/src/app/payment/Payment.tsx b/packages/core/src/app/payment/Payment.tsx
@@ -331,6 +331,7 @@ class Payment extends Component<
             selectedMethod.type === PaymentMethodProviderType.Hosted ||
             selectedMethod.type === PaymentMethodProviderType.PPSDK ||
             selectedMethod.gateway === PaymentMethodId.BlueSnapDirect ||
+            selectedMethod.gateway === PaymentMethodId.BlueSnapV2 ||
             selectedMethod.id === PaymentMethodId.AmazonPay ||
             selectedMethod.id === PaymentMethodId.CBAMPGS ||
             selectedMethod.id === PaymentMethodId.Checkoutcom ||
diff --git a/packages/core/src/app/payment/paymentMethod/PaymentMethod.tsx b/packages/core/src/app/payment/paymentMethod/PaymentMethod.tsx
@@ -14,7 +14,6 @@ import { withCheckout } from '../../checkout';
 
 import AmazonPayV2PaymentMethod from './AmazonPayV2PaymentMethod';
 import BarclaycardPaymentMethod from './BarclaycardPaymentMethod';
-import BlueSnapV2PaymentMethod from './BlueSnapV2PaymentMethod';
 import BoltPaymentMethod from './BoltPaymentMethod';
 import BraintreeCreditCardPaymentMethod from './BraintreeCreditCardPaymentMethod';
 import CCAvenueMarsPaymentMethod from './CCAvenueMarsPaymentMethod';
@@ -95,10 +94,6 @@ const PaymentMethodComponent: FunctionComponent<
         return <AmazonPayV2PaymentMethod {...props} />;
     }
 
-    if (method.gateway === PaymentMethodId.BlueSnapV2) {
-        return <BlueSnapV2PaymentMethod {...props} />;
-    }
-
     if (method.id === PaymentMethodId.DigitalRiver) {
         return <DigitalRiverPaymentMethod {...props} />;
     }

Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,8 @@`
`10`	`10`	`{`
`11`	`11`	`"files": ["*.mock.ts"],`
`12`	`12`	`"rules": {`
`13`		`- "@typescript-eslint/naming-convention": "off"`
	`13`	`+ "@typescript-eslint/naming-convention": "off",`
	`14`	`+ "@typescript-eslint/no-unsafe-assignment" : "off"`
`14`	`15`	`}`
`15`	`16`	`}`
`16`	`17`	`]`