refactor(payment): PAYPAL-2626 created PaypalPaymentsProPaymentMethod component as part of PaypalPaymentsPro migration from core to integration package (#2574)

Author: serhii-tkachenko

packages/paypal-payments-pro-integration/src/PayPalPaymentsProPaymentMethod.test.tsx

@@ -0,0 +1,97 @@
+import {
+    type CheckoutSelectors,
+    type CheckoutService,
+    createCheckoutService,
+    createLanguageService,
+} from '@bigcommerce/checkout-sdk';
+import { screen } from '@testing-library/react';
+import React from 'react';
+
+import type {
+    PaymentFormService,
+    PaymentMethodProps,
+} from '@bigcommerce/checkout/payment-integration-api';
+import {
+    getCart,
+    getCustomer,
+    getPaymentFormServiceMock,
+    getPaymentMethod,
+    getStoreConfig,
+} from '@bigcommerce/checkout/test-mocks';
+import { render } from '@bigcommerce/checkout/test-utils';
+
+import PaypalPaymentsProPaymentMethod from './PayPalPaymentsProPaymentMethod';
+
+const hostedPaymentMethodText = 'Hosted Payment Component rendered successfully';
+const hostedCreditCardPaymentMethodText =
+    'Hosted Credit Card Payment Component rendered successfully';
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-return
+jest.mock('@bigcommerce/checkout/hosted-payment-integration', () => ({
+    ...jest.requireActual('@bigcommerce/checkout/hosted-payment-integration'),
+    HostedPaymentComponent: () => <div>{hostedPaymentMethodText}</div>,
+}));
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-return
+jest.mock('@bigcommerce/checkout/hosted-credit-card-integration', () => ({
+    ...jest.requireActual('@bigcommerce/checkout/hosted-credit-card-integration'),
+    HostedCreditCardComponent: () => <div>{hostedCreditCardPaymentMethodText}</div>,
+}));
+
+describe('PaypalPaymentsProPaymentMethod', () => {
+    let checkoutService: CheckoutService;
+    let checkoutState: CheckoutSelectors;
+    let defaultProps: Omit<PaymentMethodProps, 'method'>;
+    let paymentForm: PaymentFormService;
+    let paymentMethod: PaymentMethodProps['method'];
+
+    beforeEach(() => {
+        checkoutService = createCheckoutService();
+        checkoutState = checkoutService.getState();
+        paymentForm = getPaymentFormServiceMock();
+        paymentMethod = {
+            ...getPaymentMethod(),
+            id: 'paypalpaymentsprous',
+            gateway: 'paypal',
+        };
+
+        jest.spyOn(checkoutState.data, 'getConfig').mockReturnValue(getStoreConfig());
+        jest.spyOn(checkoutState.data, 'getCart').mockReturnValue(getCart());
+        jest.spyOn(checkoutState.data, 'getCustomer').mockReturnValue(getCustomer());
+        jest.spyOn(checkoutService, 'deinitializePayment').mockResolvedValue(checkoutState);
+
+        defaultProps = {
+            checkoutService,
+            checkoutState,
+            paymentForm,
+            language: createLanguageService(),
+            onUnhandledError: jest.fn(),
+        };
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('renders HostedPaymentMethod when PaypalPaymentsPro payment method has PAYMENT_TYPE_HOSTED type', () => {
+        const method = {
+            ...paymentMethod,
+            type: 'PAYMENT_TYPE_HOSTED',
+        };
+
+        render(<PaypalPaymentsProPaymentMethod {...defaultProps} method={method} />);
+
+        expect(screen.getByText(hostedPaymentMethodText)).toBeInTheDocument();
+    });
+
+    it('renders HostedCreditCardPaymentMethod when PaypalPaymentsPro payment method has PAYMENT_TYPE_HOSTED type', () => {
+        const method = {
+            ...paymentMethod,
+            type: 'PAYMENT_TYPE_API',
+        };
+
+        render(<PaypalPaymentsProPaymentMethod {...defaultProps} method={method} />);
+
+        expect(screen.getByText(hostedCreditCardPaymentMethodText)).toBeInTheDocument();
+    });
+});

packages/paypal-payments-pro-integration/src/PayPalPaymentsProPaymentMethod.tsx

@@ -0,0 +1,49 @@
+import React, { type FunctionComponent } from 'react';
+
+import { HostedCreditCardComponent } from '@bigcommerce/checkout/hosted-credit-card-integration';
+import { HostedPaymentComponent } from '@bigcommerce/checkout/hosted-payment-integration';
+import {
+    type PaymentMethodProps,
+    type PaymentMethodResolveId,
+    toResolvableComponent,
+} from '@bigcommerce/checkout/payment-integration-api';
+
+const PayPalPaymentsProPaymentMethod: FunctionComponent<PaymentMethodProps> = ({
+    method,
+    checkoutService,
+    checkoutState,
+    paymentForm,
+    language,
+    onUnhandledError,
+}) => {
+    if (method.type === 'PAYMENT_TYPE_HOSTED') {
+        return (
+            <HostedPaymentComponent
+                checkoutService={checkoutService}
+                checkoutState={checkoutState}
+                deinitializePayment={checkoutService.deinitializePayment}
+                initializePayment={checkoutService.initializePayment}
+                language={language}
+                method={method}
+                onUnhandledError={onUnhandledError}
+                paymentForm={paymentForm}
+            />
+        );
+    }
+
+    return (
+        <HostedCreditCardComponent
+            checkoutService={checkoutService}
+            checkoutState={checkoutState}
+            language={language}
+            method={method}
+            onUnhandledError={onUnhandledError}
+            paymentForm={paymentForm}
+        />
+    );
+};
+
+export default toResolvableComponent<PaymentMethodProps, PaymentMethodResolveId>(
+    PayPalPaymentsProPaymentMethod,
+    [{ id: 'paypal' }],
+);

packages/paypal-payments-pro-integration/src/index.ts

@@ -0,0 +1 @@
+export { default as PayPalPaymentsProPaymentMethod } from './PayPalPaymentsProPaymentMethod';