diff --git a/packages/core/src/app/payment/paymentMethod/HostedCreditCardPaymentMethod.tsx b/packages/core/src/app/payment/paymentMethod/HostedCreditCardPaymentMethod.tsx index 0726e85c32..3aba1c2630 100644 --- a/packages/core/src/app/payment/paymentMethod/HostedCreditCardPaymentMethod.tsx +++ b/packages/core/src/app/payment/paymentMethod/HostedCreditCardPaymentMethod.tsx @@ -7,6 +7,9 @@ import { import { createSagePayPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/sagepay'; import React, { type FunctionComponent, useCallback } from 'react'; +import { useCheckout } from '@bigcommerce/checkout/contexts'; + +import { isExperimentEnabled } from '../../common/utility'; import { withHostedCreditCardFieldset, type WithInjectedHostedCreditCardFieldsetProps, @@ -35,6 +38,13 @@ const HostedCreditCardPaymentMethod: FunctionComponent< initializePayment, ...rest }) => { + const { selectedState: config } = useCheckout(({ data }) => data.getConfig()); + const isCBAMPGSResolverEnabled = isExperimentEnabled( + config?.checkoutSettings, + 'PI-4748.cba_resolver_configuration', + false, + ); + const initializeHostedCreditCardPayment: CreditCardPaymentMethodProps['initializePayment'] = useCallback( async (options, selectedInstrument) => { @@ -46,14 +56,14 @@ const HostedCreditCardPaymentMethod: FunctionComponent< createCyberSourcePaymentStrategy, createCyberSourceV2PaymentStrategy, createSagePayPaymentStrategy, - createCBAMPGSPaymentStrategy, + ...(!isCBAMPGSResolverEnabled ? [createCBAMPGSPaymentStrategy] : []), ], creditCard: getHostedFormOptions && { form: await getHostedFormOptions(selectedInstrument), }, }); }, - [getHostedFormOptions, initializePayment], + [getHostedFormOptions, initializePayment, isCBAMPGSResolverEnabled], ); return ( diff --git a/packages/core/src/app/payment/paymentMethod/PaymentMethodV2.tsx b/packages/core/src/app/payment/paymentMethod/PaymentMethodV2.tsx index 865ef8a3e2..43cdc8f7b6 100644 --- a/packages/core/src/app/payment/paymentMethod/PaymentMethodV2.tsx +++ b/packages/core/src/app/payment/paymentMethod/PaymentMethodV2.tsx @@ -58,11 +58,15 @@ const PaymentMethodContainer: ComponentType< setValidationSchema, }; - const ResolvedPaymentMethod = resolvePaymentMethod({ - id: method.id, - gateway: method.gateway, - type: method.type, - }); + const config = checkoutState.data.getConfig(); + const ResolvedPaymentMethod = resolvePaymentMethod( + { + id: method.id, + gateway: method.gateway, + type: method.type, + }, + config?.checkoutSettings, + ); if (!ResolvedPaymentMethod) { return ( diff --git a/packages/core/src/app/payment/resolvePaymentMethod.ts b/packages/core/src/app/payment/resolvePaymentMethod.ts index 36fcc6dfc2..38ec3aa8fc 100644 --- a/packages/core/src/app/payment/resolvePaymentMethod.ts +++ b/packages/core/src/app/payment/resolvePaymentMethod.ts @@ -1,3 +1,4 @@ +import type { CheckoutSettings } from '@bigcommerce/checkout-sdk'; import { type ComponentType } from 'react'; import { @@ -5,15 +6,36 @@ import { type PaymentMethodResolveId, } from '@bigcommerce/checkout/payment-integration-api'; +import { isExperimentEnabled } from '../common/utility'; import { resolveLazyComponent } from '../common/resolver'; import * as lazyPaymentMethods from '../generated/paymentIntegrations'; export default function resolvePaymentMethod( query: PaymentMethodResolveId, + checkoutSettings?: CheckoutSettings, ): ComponentType | undefined { const { ComponentRegistry, ...allExports } = lazyPaymentMethods; + const filteredMethods = Object.fromEntries( + Object.entries(ComponentRegistry).map(([key, value]) => { + const methods = value.filter((resolveId) => { + const { experiment } = resolveId as PaymentMethodResolveId; + + if (!experiment) { + return true; + } + + // should be normalized after config + const normalizedKey = experiment.replace('_', '.'); + + return isExperimentEnabled(checkoutSettings, normalizedKey, false); + }); + + return [key, methods]; + }), + ); + const components = Object.fromEntries( - Object.keys(ComponentRegistry).map((key) => [ + Object.keys(filteredMethods).map((key) => [ key, allExports[key as keyof typeof allExports], ]), @@ -22,6 +44,6 @@ export default function resolvePaymentMethod( return resolveLazyComponent( query, components, - ComponentRegistry, + filteredMethods, ); } diff --git a/packages/hosted-credit-card-integration/src/HostedCreditCardPaymentMethod.tsx b/packages/hosted-credit-card-integration/src/HostedCreditCardPaymentMethod.tsx index 662ff2cde2..fc3f491b0c 100644 --- a/packages/hosted-credit-card-integration/src/HostedCreditCardPaymentMethod.tsx +++ b/packages/hosted-credit-card-integration/src/HostedCreditCardPaymentMethod.tsx @@ -30,6 +30,7 @@ const HostedCreditCardPaymentMethod: FunctionComponent = ({ export default toResolvableComponent( HostedCreditCardPaymentMethod, + // experiment should be write with underscore because point after build will set this value like variable [ { id: 'hosted-credit-card', @@ -38,5 +39,6 @@ export default toResolvableComponent { id: 'credit_card', gateway: 'checkoutcom' }, { id: 'tdonlinemart' }, + { id: 'cba_mpgs', experiment: 'PI-4748_cba_resolver_configuration' }, ], ); diff --git a/packages/hosted-credit-card-integration/src/components/HostedCreditCardComponent.test.tsx b/packages/hosted-credit-card-integration/src/components/HostedCreditCardComponent.test.tsx index 3e0e6b1db5..9bbfb502a1 100644 --- a/packages/hosted-credit-card-integration/src/components/HostedCreditCardComponent.test.tsx +++ b/packages/hosted-credit-card-integration/src/components/HostedCreditCardComponent.test.tsx @@ -93,7 +93,15 @@ const getDefaultProps = (overrides = {}): HostedCreditCardComponentProps => initializePayment: jest.fn().mockResolvedValue(undefined), deinitializePayment: jest.fn(), }, - checkoutState: {}, + checkoutState: { + data: { + getConfig: jest.fn().mockReturnValue({ + checkoutSettings: { + features: {}, + }, + }), + }, + }, paymentForm: { setFieldTouched: jest.fn(), setFieldValue: jest.fn(), diff --git a/packages/hosted-credit-card-integration/src/components/HostedCreditCardComponent.tsx b/packages/hosted-credit-card-integration/src/components/HostedCreditCardComponent.tsx index 1b27dbb683..11a1e6a0f3 100644 --- a/packages/hosted-credit-card-integration/src/components/HostedCreditCardComponent.tsx +++ b/packages/hosted-credit-card-integration/src/components/HostedCreditCardComponent.tsx @@ -4,6 +4,7 @@ import { type LegacyHostedFormOptions, } from '@bigcommerce/checkout-sdk'; import { createBlueSnapDirectCreditCardPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/bluesnap-direct'; +import { createCBAMPGSPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/cba-mpgs'; import { createCheckoutComCreditCardPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/checkoutcom-custom'; import { createCreditCardPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/credit-card'; import { createTDOnlineMartPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/td-bank'; @@ -43,6 +44,11 @@ const HostedCreditCardComponent: FunctionComponent { const [focusedFieldType, setFocusedFieldType] = useState(); + const isCBAMPGSResolverEnabled = + checkoutState.data.getConfig()?.checkoutSettings.features?.[ + 'PI-4748.cba_resolver_configuration' + ] ?? false; + const { setFieldTouched, setFieldValue, setSubmitted, submitForm } = paymentForm; const isInstrumentCardCodeRequiredProp = isInstrumentCardCodeRequiredSelector(checkoutState); const isInstrumentCardNumberRequiredProp = @@ -257,6 +263,7 @@ const HostedCreditCardComponent: FunctionComponent; export default PaymentMethodResolveId;