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

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}

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;

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';

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);

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';

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;
+    }
+}

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,
         ],
     );
 

packages/core/src/app/ui/accordion/Accordion.tsx → packages/ui/src/accordion/Accordion.tsx

@@ -19,7 +19,7 @@ export interface AccordionState {
 export default class Accordion extends Component<AccordionProps, AccordionState> {
     state: AccordionState = {};
 
-    private getContextValue = memoizeOne((selectedItemId) => {
+    private getContextValue = memoizeOne((selectedItemId?: string) => {
         return {
             onToggle: this.handleToggleItem,
             selectedItemId,

packages/core/src/app/ui/accordion/AccordionItem.tsx → packages/ui/src/accordion/AccordionItem.tsx

@@ -33,7 +33,7 @@ const AccordionItem: FunctionComponent<AccordionItemProps> = ({
     const { onToggle, selectedItemId } = useContext(AccordionContext);
     const isSelected = selectedItemId === itemId;
 
-    const transitionEndListener = useCallback((node, done) => {
+    const transitionEndListener = useCallback((node: Node, done) => {
         node.addEventListener('transitionend', ({ target }: Event) => {
             if (target === node) {
                 done();
@@ -42,14 +42,12 @@ const AccordionItem: FunctionComponent<AccordionItemProps> = ({
     }, []);
 
     return (
-        <li
-            className={classNames(className, { [classNameSelected]: isSelected })}
-        >
+        <li className={classNames(className, { [classNameSelected]: isSelected })}>
             <div className={classNames(headerClassName, { [headerClassNameSelected]: isSelected })}>
                 {headerContent({ isSelected, onToggle })}
             </div>
 
-            {children && (
+            {children ? (
                 <CSSTransition
                     addEndListener={transitionEndListener}
                     classNames={bodyClassName}
@@ -60,7 +58,7 @@ const AccordionItem: FunctionComponent<AccordionItemProps> = ({
                 >
                     <div className={bodyClassName}>{children}</div>
                 </CSSTransition>
-            )}
+            ) : undefined}
         </li>
     );
 };

packages/core/src/app/ui/accordion/index.ts → packages/ui/src/accordion/index.ts

@@ -4,3 +4,4 @@ export {
     AccordionItemHeaderProps,
     AccordionItemProps,
 } from './AccordionItem';
+export { default as AccordionContext, AccordionContextProps } from './AccordionContext';

packages/ui/src/index.ts

@@ -1,5 +1,14 @@
 /* istanbul ignore file */
 export { Alert, AlertType } from './alert';
+export {
+    Accordion,
+    AccordionProps,
+    AccordionItem,
+    AccordionItemHeaderProps,
+    AccordionItemProps,
+    AccordionContext,
+    AccordionContextProps,
+} from './accordion';
 export { Button, ButtonSize, ButtonVariant } from './button';
 export { DropdownTrigger } from './dropdown';
 export {