Ameerul /Task 89855 Add a checkbox to select/deselect a payment metho…

…d when creating or updating a sell ad and making a sell order (deriv-com#7824)

* chore: added checkbox to payment method card

* fix: added logic to disable checkbox and show checkbox in certain tabs only

packages/p2p/src/components/my-profile/payment-methods/payment-method-card/payment-method-card.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
-import { Dropdown, Icon, Text } from '@deriv/components';
+import { Checkbox, Dropdown, Icon, Text } from '@deriv/components';
+import { isEmptyObject } from '@deriv/shared';
 import { localize } from 'Components/i18next';
 import { useStores } from 'Stores';
 import PropTypes from 'prop-types';
@@ -20,7 +21,7 @@ const PaymentMethodCard = ({
     small,
     style,
 }) => {
-    const { my_profile_store } = useStores();
+    const { general_store, my_ads_store, my_profile_store } = useStores();
     const method = !is_add && payment_method?.display_name.replace(/\s|-/gm, '');
     const payment_account = payment_method?.fields?.account?.value;
     const payment_account_name = payment_method?.display_name;
@@ -49,7 +50,6 @@ const PaymentMethodCard = ({
                     custom_color='var(--brand-red-coral)'
                     size={32}
                 />
-
                 <Text align='center' color={disabled ? 'less-prominent' : 'prominent'} size='xs'>
                     {label || add_payment_method}
                 </Text>
@@ -86,6 +86,17 @@ const PaymentMethodCard = ({
                         is_align_text_left
                     />
                 )}
+                {(general_store.active_index === 2 || general_store.active_index === 0) && (
+                    <Checkbox
+                        className='payment-method-card__checkbox'
+                        disabled={
+                            my_ads_store.payment_method_ids.length === 3 &&
+                            !my_ads_store.payment_method_ids.includes(payment_method.ID)
+                        }
+                        onChange={onClick}
+                        value={!isEmptyObject(style)}
+                    />
+                )}
             </div>
             <div className='payment-method-card__body'>
                 <Text color='prominent' size={large ? 'xs' : 'xxs'}>

packages/p2p/src/components/my-profile/payment-methods/payment-method-card/payment-method-card.scss

@@ -89,6 +89,12 @@
         }
     }
 
+    &__checkbox {
+        .dc-checkbox__box {
+            margin: 0;
+        }
+    }
+
     &__icon {
         border-radius: 2px;
     }