Disable payment options for "Kids" customer group

vacuumlabs · Aug 13, 2024 · 2987861 · 2987861
1 parent bdf002b
commit 2987861
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/packages/core/src/app/payment/Payment.tsx b/packages/core/src/app/payment/Payment.tsx
@@ -3,6 +3,7 @@ import {
     CheckoutSelectors,
     CheckoutService,
     CheckoutSettings,
+    CustomerGroup,
     OrderRequestBody,
     PaymentMethod,
 } from '@bigcommerce/checkout-sdk';
@@ -55,6 +56,7 @@ export interface PaymentProps {
 interface WithCheckoutPaymentProps {
     availableStoreCredit: number;
     cartUrl: string;
+    customerGroup?: CustomerGroup;
     defaultMethod?: PaymentMethod;
     finalizeOrderError?: Error;
     isInitializingPayment: boolean;
@@ -209,6 +211,7 @@ class Payment extends Component<
                             shouldDisableSubmit={
                                 (uniqueSelectedMethodId &&
                                     shouldDisableSubmit[uniqueSelectedMethodId]) ||
+                                (rest.customerGroup?.name == 'Kids' && (!rest.isStoreCreditApplied || rest.isPaymentDataRequired())) ||
                                 undefined
                             }
                             shouldHidePaymentSubmitButton={
@@ -678,6 +681,7 @@ export function mapToPaymentProps({
         applyStoreCredit: checkoutService.applyStoreCredit,
         availableStoreCredit: customer.storeCredit,
         cartUrl: config.links.cartLink,
+        customerGroup: customer?.customerGroup || undefined,
         clearError: checkoutService.clearError,
         defaultMethod: selectedPaymentMethod || filteredMethods[0],
         finalizeOrderError: getFinalizeOrderError(),

diff --git a/packages/core/src/app/payment/PaymentForm.tsx b/packages/core/src/app/payment/PaymentForm.tsx
@@ -1,4 +1,4 @@
-import { PaymentMethod } from '@bigcommerce/checkout-sdk';
+import {CustomerGroup, PaymentMethod} from '@bigcommerce/checkout-sdk';
 import { FormikProps, withFormik, WithFormikConfig } from 'formik';
 import { isNil, noop, omitBy } from 'lodash';
 import React, { FunctionComponent, memo, useCallback, useContext, useMemo } from 'react';
@@ -25,6 +25,7 @@ import { StoreCreditField, StoreCreditOverlay } from './storeCredit';
 
 export interface PaymentFormProps {
     availableStoreCredit?: number;
+    customerGroup?: CustomerGroup;
     defaultGatewayId?: string;
     defaultMethodId: string;
     didExceedSpamLimit?: boolean;
@@ -54,6 +55,7 @@ const PaymentForm: FunctionComponent<
     PaymentFormProps & FormikProps<PaymentFormValues> & WithLanguageProps
 > = ({
     availableStoreCredit = 0,
+    customerGroup,
     didExceedSpamLimit,
     isEmbedded,
     isInitializingPayment,
@@ -114,6 +116,8 @@ const PaymentForm: FunctionComponent<
         );
     }
 
+    const isPaymentDisabled = customerGroup?.name == 'Kids'
+
     return (
         <Form className="checkout-form" testId="payment-form">
             {usableStoreCredit > 0 && (
@@ -129,6 +133,7 @@ const PaymentForm: FunctionComponent<
             <PaymentMethodListFieldset
                 isEmbedded={isEmbedded}
                 isInitializingPayment={isInitializingPayment}
+                isPaymentDisabled={isPaymentDisabled}
                 isPaymentDataRequired={isPaymentDataRequired}
                 isUsingMultiShipping={isUsingMultiShipping}
                 methods={methods}
@@ -178,6 +183,7 @@ const PaymentMethodSubmitButtonContainer: FunctionComponent = () => {
 interface PaymentMethodListFieldsetProps {
     isEmbedded?: boolean;
     isInitializingPayment?: boolean;
+    isPaymentDisabled: boolean;
     isUsingMultiShipping?: boolean;
     methods: PaymentMethod[];
     values: PaymentFormValues;
@@ -190,6 +196,7 @@ interface PaymentMethodListFieldsetProps {
 const PaymentMethodListFieldset: FunctionComponent<PaymentMethodListFieldsetProps> = ({
     isEmbedded,
     isInitializingPayment,
+    isPaymentDisabled,
     isPaymentDataRequired,
     isUsingMultiShipping,
     methods,
@@ -230,7 +237,7 @@ const PaymentMethodListFieldset: FunctionComponent<PaymentMethodListFieldsetProp
 
     return (
         <Fieldset>
-            {!isPaymentDataRequired() && <StoreCreditOverlay />}
+            {(isPaymentDisabled || !isPaymentDataRequired()) && <StoreCreditOverlay isPaymentDisabled={isPaymentDisabled} />}
 
             <PaymentMethodList
                 isEmbedded={isEmbedded}

diff --git a/packages/core/src/app/payment/storeCredit/StoreCreditOverlay.tsx b/packages/core/src/app/payment/storeCredit/StoreCreditOverlay.tsx
@@ -2,10 +2,10 @@ import React, { FunctionComponent } from 'react';
 
 import { TranslatedString } from '@bigcommerce/checkout/locale';
 
-const StoreCreditOverlay: FunctionComponent = () => (
+const StoreCreditOverlay: FunctionComponent<{isPaymentDisabled: boolean}> = ({isPaymentDisabled}) => (
     <div className="storeCreditOverlay" data-test="payment-store-credit-overlay">
         <p className="storeCreditOverlay-text">
-            <TranslatedString id="payment.payment_not_required_text" />
+          {isPaymentDisabled ? ("Payment options unavailable") : <TranslatedString id="payment.payment_not_required_text" />}
         </p>
     </div>
 );