Merge pull request #394 from ameerul-deriv/P2PS-4384-some-payment-met…

…hod-is-not-showing-on-sell-order-modal Ameerul / P2PS-4384 Some Payment method is not showing on Sell order modal
deriv-com · Nov 8, 2024 · c0389fe · c0389fe
2 parents 5ea6e67 + 00e02f4
commit c0389fe
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 7 deletions.
diff --git a/src/components/BuySellForm/BuySellForm.tsx b/src/components/BuySellForm/BuySellForm.tsx
@@ -132,6 +132,10 @@ const BuySellForm = ({ advertId, isModalOpen, onRequestClose }: TBuySellFormProp
         };
     });
 
+    const filteredAdvertiserPaymentMethods = advertiserPaymentMethods?.filter(method =>
+        paymentMethodNames?.includes(method.display_name || '')
+    );
+
     const history = useHistory();
     const { isDesktop } = useDevice();
     const isBuy = type === BUY_SELL.BUY;
@@ -343,7 +347,7 @@ const BuySellForm = ({ advertId, isModalOpen, onRequestClose }: TBuySellFormProp
                 <LightDivider />
                 {isBuy && paymentMethodNames && paymentMethodNames?.length > 0 && (
                     <BuySellPaymentSection
-                        advertiserPaymentMethods={advertiserPaymentMethods as TPaymentMethod[]}
+                        advertiserPaymentMethods={filteredAdvertiserPaymentMethods as TPaymentMethod[]}
                         availablePaymentMethods={availablePaymentMethods as TPaymentMethod[]}
                         isDisabled={shouldDisableField}
                         onSelectPaymentMethodCard={onSelectPaymentMethodCard}

diff --git a/src/components/BuySellForm/BuySellPaymentSection/BuySellPaymentSection.tsx b/src/components/BuySellForm/BuySellPaymentSection/BuySellPaymentSection.tsx
@@ -26,7 +26,8 @@ const BuySellPaymentSection = ({
     setIsHidden,
 }: TBuySellPaymentSectionProps) => {
     const { isDesktop } = useDevice();
-    const sortedList = sortPaymentMethodsWithAvailability(availablePaymentMethods);
+    const sortedList = sortPaymentMethodsWithAvailability(availablePaymentMethods).filter(p => !p.isAvailable);
+    const disableAdvertiserPaymentMethods = selectedPaymentMethodIds.length === 3;
     const { localize } = useTranslations();
 
     const [formState, dispatch] = useReducer(
@@ -67,6 +68,20 @@ const BuySellPaymentSection = ({
                     )}
                 </Text>
                 <div className='flex gap-[0.8rem] flex-wrap'>
+                    {advertiserPaymentMethods?.map((paymentMethod, index) => {
+                        const isSelected = selectedPaymentMethodIds.includes(Number(paymentMethod.id));
+
+                        return (
+                            <PaymentMethodCard
+                                isDisabled={isDisabled || (disableAdvertiserPaymentMethods && !isSelected)}
+                                key={index}
+                                medium
+                                onSelectPaymentMethodCard={onSelectPaymentMethodCard}
+                                paymentMethod={paymentMethod}
+                                selectedPaymentMethodIds={selectedPaymentMethodIds}
+                            />
+                        );
+                    })}
                     {sortedList?.map((paymentMethod, index) => (
                         <PaymentMethodCard
                             isDisabled={isDisabled}

diff --git a/src/components/BuySellForm/BuySellPaymentSection/__tests__/BuySellPaymentSection.spec.tsx b/src/components/BuySellForm/BuySellPaymentSection/__tests__/BuySellPaymentSection.spec.tsx
@@ -61,12 +61,10 @@ describe('<BuySellPaymentSection />', () => {
         render(<BuySellPaymentSection {...mockProps} />);
         expect(screen.getByText('Receive payment to')).toBeInTheDocument();
     });
-    it('should render the payment method cards when there are available payment methods', async () => {
-        render(<BuySellPaymentSection {...mockProps} availablePaymentMethods={[mockAvailablePaymentMethods]} />);
+    it('should render the payment method cards when there are advertiser payment methods', async () => {
+        render(<BuySellPaymentSection {...mockProps} advertiserPaymentMethods={[mockAvailablePaymentMethods]} />);
         expect(screen.getByText('Receive payment to')).toBeInTheDocument();
-        expect(
-            screen.getByText('To place an order, add one of the advertiser’s preferred payment methods:')
-        ).toBeInTheDocument();
+        expect(screen.getByText('You may choose up to 3.')).toBeInTheDocument();
         expect(screen.getByText('Other')).toBeInTheDocument();
         const checkbox = screen.getByRole('checkbox');
         await userEvent.click(checkbox);