fix: [Sale WIdget] Do not render more options section when all opti…

…ons are disabled (#1813)
immutable · May 22, 2024 · 6d25d98 · 6d25d98
1 parent 14f3c4a
commit 6d25d98
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 14 deletions.
diff --git a/packages/checkout/widgets-lib/src/widgets/sale/components/CoinsDrawer.tsx b/packages/checkout/widgets-lib/src/widgets/sale/components/CoinsDrawer.tsx
@@ -50,6 +50,9 @@ export function CoinsDrawer({
     size = 'small';
   }
 
+  const otherPaymentOptions = [SalePaymentTypes.DEBIT, SalePaymentTypes.CREDIT];
+  const withOtherOptions = !otherPaymentOptions.every((type) => disabledPaymentTypes?.includes(type));
+
   return (
     <Drawer
       size="full"
@@ -124,8 +127,7 @@ export function CoinsDrawer({
                 />
               )}
             >
-              {(disabledPaymentTypes?.includes(SalePaymentTypes.CREDIT)
-                && disabledPaymentTypes?.includes(SalePaymentTypes.DEBIT)) ?? (
+              {withOtherOptions && (
                 <Divider
                   size="small"
                   rc={<Caption />}
@@ -137,10 +139,9 @@ export function CoinsDrawer({
               <PaymentOptions
                 onClick={onPayWithCard}
                 size={size}
-                paymentOptions={[
-                  SalePaymentTypes.DEBIT,
-                  SalePaymentTypes.CREDIT,
-                ].filter((type) => !disabledPaymentTypes?.includes(type))}
+                hideDisabledOptions
+                paymentOptions={otherPaymentOptions}
+                disabledOptions={disabledPaymentTypes}
                 captions={{
                   [SalePaymentTypes.DEBIT]: t(
                     'views.PAYMENT_METHODS.options.debit.caption',

diff --git a/packages/checkout/widgets-lib/src/widgets/sale/components/PaymentOptions.tsx b/packages/checkout/widgets-lib/src/widgets/sale/components/PaymentOptions.tsx
@@ -3,6 +3,7 @@ import { Box, MenuItemSize } from '@biom3/react';
 import { SalePaymentTypes } from '@imtbl/checkout-sdk';
 import { listItemVariants, listVariants } from 'lib/animation/listAnimation';
 import { motion } from 'framer-motion';
+import { useMemo } from 'react';
 import { PaymentOption } from './PaymentOption';
 
 const defaultPaymentOptions: SalePaymentTypes[] = [
@@ -17,13 +18,24 @@ export interface PaymentOptionsProps {
   paymentOptions?: SalePaymentTypes[];
   captions?: Partial<Record<SalePaymentTypes, string>>;
   size?: MenuItemSize;
+  hideDisabledOptions?: boolean;
 }
 
 export function PaymentOptions(props: PaymentOptionsProps) {
   const {
-    disabledOptions = [], paymentOptions, onClick, captions, size,
+    disabledOptions = [],
+    paymentOptions,
+    onClick,
+    captions,
+    size,
+    hideDisabledOptions,
   } = props;
-  const options = paymentOptions || defaultPaymentOptions;
+  const options = useMemo(
+    () => (paymentOptions || defaultPaymentOptions).filter(
+      (option) => !hideDisabledOptions || !disabledOptions.includes(option),
+    ),
+    [paymentOptions, disabledOptions, hideDisabledOptions],
+  );
 
   return (
     <Box
@@ -47,12 +59,7 @@ export function PaymentOptions(props: PaymentOptionsProps) {
           onClick={onClick}
           disabled={disabledOptions.includes(type)}
           caption={captions?.[type]}
-          rc={(
-            <motion.div
-              custom={idx}
-              variants={listItemVariants}
-            />
-          )}
+          rc={<motion.div custom={idx} variants={listItemVariants} />}
         />
       ))}
     </Box>