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

bigcommerce · Sep 18, 2024 · 1af8268 · 1af8268
1 parent 868cb3d
commit 1af8268
Show file tree

Hide file tree

Showing 15 changed files with 256 additions and 170 deletions.
diff --git a/packages/core/src/app/payment/paymentMethod/PaymentMethodList.tsx b/packages/core/src/app/payment/paymentMethod/PaymentMethodList.tsx
@@ -120,6 +120,7 @@ const PaymentMethodListItem: FunctionComponent<PaymentMethodListItemProps> = ({
         <ChecklistItem
             content={renderPaymentMethod}
             htmlId={`radio-${value}`}
+            isCustomItem={method.initializationData?.accordion} // TODO: accordion key will be changed to more relevant after changes on BCapp side
             isDisabled={isDisabled}
             label={renderPaymentMethodTitle}
             value={value}

diff --git a/packages/core/src/app/ui/accordion/Accordion.spec.tsx b/packages/core/src/app/ui/accordion/Accordion.spec.tsx
diff --git a/packages/core/src/app/ui/accordion/AccordionItem.tsx b/packages/core/src/app/ui/accordion/AccordionItem.tsx
diff --git a/packages/core/src/app/ui/form/Checklist.tsx b/packages/core/src/app/ui/form/Checklist.tsx
@@ -8,8 +8,9 @@ import React, {
     useMemo,
 } from 'react';
 
+import { Accordion } from '@bigcommerce/checkout/ui';
+
 import { connectFormik, ConnectFormikProps } from '../../common/form';
-import { Accordion } from '../accordion';
 
 export interface ChecklistProps {
     children: ReactNode;

diff --git a/packages/core/src/app/ui/form/ChecklistItem.tsx b/packages/core/src/app/ui/form/ChecklistItem.tsx
@@ -3,7 +3,7 @@ import { FieldProps } from 'formik';
 import { kebabCase } from 'lodash';
 import React, { FunctionComponent, memo, ReactNode, useCallback, useContext } from 'react';
 
-import { AccordionItem, AccordionItemHeaderProps } from '../accordion';
+import { AccordionItem, AccordionItemHeaderProps } from '@bigcommerce/checkout/ui';
 
 import BasicFormField from './BasicFormField';
 import { ChecklistContext } from './Checklist';
@@ -12,12 +12,14 @@ import ChecklistItemInput from './ChecklistItemInput';
 export interface ChecklistItemProps {
     content?: ReactNode;
     htmlId?: string;
+    isCustomItem?: boolean;
     isDisabled?: boolean;
     label: ReactNode | ((isSelected: boolean) => ReactNode);
     value: string;
 }
 
 const ChecklistItem: FunctionComponent<ChecklistItemProps> = ({
+    isCustomItem,
     isDisabled,
     value,
     content,
@@ -72,6 +74,7 @@ const ChecklistItem: FunctionComponent<ChecklistItemProps> = ({
             headerClassName="form-checklist-header"
             headerClassNameSelected="form-checklist-header--selected"
             headerContent={renderHeaderContent}
+            isCustomItem={isCustomItem}
             itemId={value}
         >
             {content}

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,13 @@
         will-change: $loading-skeleton-will-change;
     }
 }
+
+.accordion-item-body-full-size {
+    margin: 0;
+    overflow: hidden;
+
+    .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,8 @@ const StripeUPEPaymentMethod: FunctionComponent<PaymentMethodProps> = ({
                     },
                     onError: onUnhandledError,
                     render: renderSubmitButton,
+                    toggleSelectedMethod: onToggle,
+                    accordionCollapseListener,
                 },
             });
         },
@@ -107,6 +131,7 @@ const StripeUPEPaymentMethod: FunctionComponent<PaymentMethodProps> = ({
             method,
             paymentContext,
             renderSubmitButton,
+            onToggle,
         ],
     );