feat(payment): STRIPE-444 New Stripe UPE (PoC)

bigcommerce · Oct 2, 2024 · dd71610 · dd71610
1 parent 1c1eae6
commit dd71610
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 2 deletions.
diff --git a/packages/core/src/app/payment/paymentMethod/PaymentMethodList.tsx b/packages/core/src/app/payment/paymentMethod/PaymentMethodList.tsx
@@ -4,7 +4,7 @@ import React, { FunctionComponent, memo, useCallback, useMemo } from 'react';
 
 import { connectFormik, ConnectFormikProps } from '../../common/form';
 import { isMobile } from '../../common/utility';
-import { Checklist, ChecklistItem } from '../../ui/form';
+import { Checklist, ChecklistItem, CustomChecklistItem } from '../../ui/form';
 
 import getUniquePaymentMethodId, { parseUniquePaymentMethodId } from './getUniquePaymentMethodId';
 import PaymentMethodTitle from './PaymentMethodTitle';
@@ -116,6 +116,15 @@ const PaymentMethodListItem: FunctionComponent<PaymentMethodListItemProps> = ({
         [method],
     );
 
+    if (method.initializationData?.accordion) { // TODO: accordion key will be changed to more relevant after changes on BCapp side
+        return (
+            <CustomChecklistItem
+                content={renderPaymentMethod}
+                htmlId={`radio-${value}`}
+            />
+        );
+    }
+
     return (
         <ChecklistItem
             content={renderPaymentMethod}

diff --git a/packages/core/src/app/ui/form/CustomChecklistItem.tsx b/packages/core/src/app/ui/form/CustomChecklistItem.tsx
@@ -0,0 +1,22 @@
+import React, { FunctionComponent, memo, ReactNode } from 'react';
+
+export interface CustomChecklistItemProps {
+    content?: ReactNode;
+    htmlId?: string;
+}
+
+const CustomChecklistItem: FunctionComponent<CustomChecklistItemProps> = ({
+    content,
+    htmlId,
+}) => {
+    return (
+        <li
+            className="form-checklist-item optimizedCheckout-form-checklist-item  custom-checklist-item"
+            id={htmlId}
+        >
+            {content}
+        </li>
+    );
+};
+
+export default memo(CustomChecklistItem);
diff --git a/packages/core/src/app/ui/form/index.ts b/packages/core/src/app/ui/form/index.ts
@@ -17,5 +17,6 @@ export { default as CheckboxInput } from './CheckboxInput';
 export { default as Label, LabelProps } from './Label';
 export { default as Legend, LegendProps } from './Legend';
 export { default as ChecklistItemInput, ChecklistItemInputProps } from './ChecklistItemInput';
+export { default as CustomChecklistItem, CustomChecklistItemProps } from './CustomChecklistItem';
 export { default as DynamicFormField } from './DynamicFormField';
 export { default as DynamicFormFieldType } from './DynamicFormFieldType';
diff --git a/packages/core/src/scss/components/checkout/checklist/_checklist.scss b/packages/core/src/scss/components/checkout/checklist/_checklist.scss
@@ -212,3 +212,14 @@
         will-change: $loading-skeleton-will-change;
     }
 }
+
+.custom-checklist-item {
+    margin: 0;
+    overflow: hidden;
+    border-bottom: 0;
+
+    .paymentMethod--hosted,
+    .widget {
+        padding: 0;
+    }
+}
diff --git a/packages/stripe-integration/src/stripe-upe/StripeUPEPaymentMethod.tsx b/packages/stripe-integration/src/stripe-upe/StripeUPEPaymentMethod.tsx
@@ -1,6 +1,13 @@
 import { PaymentInitializeOptions } from '@bigcommerce/checkout-sdk';
 import { noop, some } from 'lodash';
-import React, { FunctionComponent, useCallback, useMemo } from 'react';
+import React, {
+    FunctionComponent,
+    useCallback,
+    useContext,
+    useEffect,
+    useMemo,
+    useRef,
+} from 'react';
 
 import { getAppliedStyles } from '@bigcommerce/checkout/dom-utils';
 import { HostedWidgetPaymentComponent } from '@bigcommerce/checkout/hosted-widget-integration';
@@ -13,6 +20,7 @@ import {
     PaymentMethodResolveId,
     toResolvableComponent,
 } from '@bigcommerce/checkout/payment-integration-api';
+import { AccordionContext } from '@bigcommerce/checkout/ui';
 
 const StripeUPEPaymentMethod: FunctionComponent<PaymentMethodProps> = ({
     paymentForm,
@@ -22,9 +30,19 @@ const StripeUPEPaymentMethod: FunctionComponent<PaymentMethodProps> = ({
     onUnhandledError = noop,
     ...rest
 }) => {
+    const collapseStripeElement = useRef<() => void>();
+    const { onToggle, selectedItemId } = useContext(AccordionContext);
     const containerId = `stripe-${method.id}-component-field`;
     const paymentContext = paymentForm;
 
+    useEffect(() => {
+        if (selectedItemId?.includes('stripeupe-')) {
+            return;
+        }
+
+        collapseStripeElement.current?.();
+    }, [selectedItemId]);
+
     const renderSubmitButton = useCallback(() => {
         paymentContext.hidePaymentSubmitButton(method, false);
     }, [paymentContext, method]);
@@ -69,6 +87,10 @@ const StripeUPEPaymentMethod: FunctionComponent<PaymentMethodProps> = ({
         return getAppliedStyles(parentContainer, properties);
     };
 
+    // const accordionCollapseListener = (collapseElement: () => void) => {
+    //     collapseStripeElement.current = collapseElement;
+    // };
+
     const initializeStripePayment = useCallback(
         async (options: PaymentInitializeOptions) => {
             const formInput = getStylesFromElement(`${containerId}--input`, [
@@ -97,6 +119,10 @@ const StripeUPEPaymentMethod: FunctionComponent<PaymentMethodProps> = ({
                     },
                     onError: onUnhandledError,
                     render: renderSubmitButton,
+                    paymentMethodSelect: onToggle,
+                    handleClosePaymentMethod: (collapseElement: () => void) => {
+                        collapseStripeElement.current = collapseElement;
+                    },
                 },
             });
         },
@@ -107,6 +133,7 @@ const StripeUPEPaymentMethod: FunctionComponent<PaymentMethodProps> = ({
             method,
             paymentContext,
             renderSubmitButton,
+            onToggle,
         ],
     );