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

bigcommerce · Oct 7, 2024 · e12c07e · e12c07e
1 parent 79f0163
commit e12c07e
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 1 deletion.
diff --git a/packages/core/src/app/ui/form/index.ts b/packages/core/src/app/ui/form/index.ts
@@ -18,5 +18,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,
         ],
     );