From 463054a7bb75c993ecb693d62d5ca8af3dfee0d9 Mon Sep 17 00:00:00 2001 From: PavlenkoM Date: Wed, 2 Oct 2024 10:57:19 +0300 Subject: [PATCH 1/3] feat(payment): STRIPE-444 New Stripe UPE (PoC) --- packages/core/src/app/ui/form/index.ts | 1 + .../checkout/checklist/_checklist.scss | 11 +++++++ .../src/stripe-upe/StripeUPEPaymentMethod.tsx | 29 ++++++++++++++++++- 3 files changed, 40 insertions(+), 1 deletion(-) diff --git a/packages/core/src/app/ui/form/index.ts b/packages/core/src/app/ui/form/index.ts index 28f7184be4..81a3df6c30 100644 --- 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 index 9f1c3cae08..500c1e7e05 100644 --- 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 index 04c8ba1ea8..43cda6d549 100644 --- 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 = ({ paymentForm, @@ -22,9 +30,19 @@ const StripeUPEPaymentMethod: FunctionComponent = ({ 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 = ({ 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 = ({ }, onError: onUnhandledError, render: renderSubmitButton, + paymentMethodSelect: onToggle, + handleClosePaymentMethod: (collapseElement: () => void) => { + collapseStripeElement.current = collapseElement; + }, }, }); }, @@ -107,6 +133,7 @@ const StripeUPEPaymentMethod: FunctionComponent = ({ method, paymentContext, renderSubmitButton, + onToggle, ], ); From d0079d70fe0a63d71dbf00e95713544e1b68fe62 Mon Sep 17 00:00:00 2001 From: PavlenkoM Date: Wed, 16 Oct 2024 12:07:20 +0300 Subject: [PATCH 2/3] feat(payment): STRIPE-444 New Stripe UPE (PoC) --- packages/core/src/app/ui/form/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/core/src/app/ui/form/index.ts b/packages/core/src/app/ui/form/index.ts index 81a3df6c30..28f7184be4 100644 --- a/packages/core/src/app/ui/form/index.ts +++ b/packages/core/src/app/ui/form/index.ts @@ -18,6 +18,5 @@ 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'; From 4501a5fdbeb5f5267b91c3b6f39c7a082613ea3e Mon Sep 17 00:00:00 2001 From: PavlenkoM Date: Thu, 17 Oct 2024 16:58:34 +0300 Subject: [PATCH 3/3] feat(payment): STRIPE-444 New Stripe UPE (PoC) --- .../src/stripe-upe/StripeUPEPaymentMethod.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/stripe-integration/src/stripe-upe/StripeUPEPaymentMethod.tsx b/packages/stripe-integration/src/stripe-upe/StripeUPEPaymentMethod.tsx index 43cda6d549..fcd80dbca1 100644 --- a/packages/stripe-integration/src/stripe-upe/StripeUPEPaymentMethod.tsx +++ b/packages/stripe-integration/src/stripe-upe/StripeUPEPaymentMethod.tsx @@ -87,10 +87,6 @@ const StripeUPEPaymentMethod: FunctionComponent = ({ return getAppliedStyles(parentContainer, properties); }; - // const accordionCollapseListener = (collapseElement: () => void) => { - // collapseStripeElement.current = collapseElement; - // }; - const initializeStripePayment = useCallback( async (options: PaymentInitializeOptions) => { const formInput = getStylesFromElement(`${containerId}--input`, [