From a396d74e0edb2542ac3ab2fb90795f963802a8ec Mon Sep 17 00:00:00 2001
From: Bahar <bahar@firstsource.tech>
Date: Thu, 3 Mar 2022 10:01:00 +0330
Subject: [PATCH] refactor_payment_agent_component_for_app_store

---
 .../Components/Form/payment-agent-deposit.jsx |  93 +++++++++++++++
 .../src/Components/payment-agent-list.jsx     | 111 +-----------------
 2 files changed, 96 insertions(+), 108 deletions(-)
 create mode 100644 packages/cashier/src/Components/Form/payment-agent-deposit.jsx

diff --git a/packages/cashier/src/Components/Form/payment-agent-deposit.jsx b/packages/cashier/src/Components/Form/payment-agent-deposit.jsx
new file mode 100644
index 000000000000..3c1a86429fef
--- /dev/null
+++ b/packages/cashier/src/Components/Form/payment-agent-deposit.jsx
@@ -0,0 +1,93 @@
+import { PropTypes as MobxPropTypes } from 'mobx-react';
+import { toJS } from 'mobx';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Accordion, DesktopWrapper, Dropdown, MobileWrapper, SelectNative, Text } from '@deriv/components';
+import { localize, Localize } from '@deriv/translations';
+import { isMobile } from '@deriv/shared';
+import { connect } from 'Stores/connect';
+import PaymentAgentDetails from '../payment-agent-details.jsx';
+import 'Sass/payment-agent-list.scss';
+
+const PaymentAgentDeposit = ({ onChangePaymentMethod, payment_agent_list, selected_bank, supported_banks }) => {
+    const list_with_default = [
+        { text: <Localize i18n_default_text='All payment agents' />, value: 0 },
+        ...supported_banks,
+    ];
+
+    return (
+        <React.Fragment>
+            <Text as='p' size='xs' weight='bold' color='prominent' className='payment-agent-list__list-header'>
+                <Localize i18n_default_text='Payment agents' />
+            </Text>
+            <div className='payment-agent-list__list-line' />
+            <div className='payment-agent-list__list-selector'>
+                <Text as='p' size={isMobile() ? 'xxs' : 'xs'} line_height='s' className='cashier__paragraph'>
+                    <Localize i18n_default_text='Choose a payment agent and contact them for instructions.' />
+                </Text>
+                {supported_banks.length > 1 && (
+                    <div>
+                        <DesktopWrapper>
+                            <Dropdown
+                                id='payment_methods'
+                                className='payment-agent-list__drop-down payment-agent-list__filter'
+                                classNameDisplay='cashier__drop-down-display payment-agent-list__filter-display'
+                                classNameDisplaySpan='cashier__drop-down-display-span'
+                                classNameItems='cashier__drop-down-items'
+                                list={list_with_default}
+                                name='payment_methods'
+                                value={selected_bank}
+                                onChange={onChangePaymentMethod}
+                            />
+                        </DesktopWrapper>
+                        <MobileWrapper>
+                            <SelectNative
+                                placeholder={localize('Please select')}
+                                name='payment_methods'
+                                list_items={supported_banks}
+                                value={selected_bank.toString()}
+                                label={selected_bank === 0 ? localize('All payment agents') : localize('Type')}
+                                onChange={e =>
+                                    onChangePaymentMethod({
+                                        target: {
+                                            name: 'payment_methods',
+                                            value: e.target.value.toLowerCase(),
+                                        },
+                                    })
+                                }
+                                use_text={false}
+                            />
+                        </MobileWrapper>
+                    </div>
+                )}
+            </div>
+            <Accordion
+                className='payment-agent-list__accordion'
+                list={payment_agent_list.map(payment_agent => ({
+                    header: payment_agent.name,
+                    content: (
+                        <PaymentAgentDetails
+                            payment_agent_email={payment_agent.email}
+                            payment_agent_phones={toJS(payment_agent.phones)}
+                            payment_agent_urls={toJS(payment_agent.urls)}
+                        />
+                    ),
+                }))}
+            />
+        </React.Fragment>
+    );
+};
+
+PaymentAgentDeposit.propTypes = {
+    onChangePaymentMethod: PropTypes.func,
+    payment_agent_list: PropTypes.array,
+    selected_bank: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    supported_banks: MobxPropTypes.arrayOrObservableArray,
+};
+
+export default connect(({ modules }) => ({
+    onChangePaymentMethod: modules.cashier.payment_agent.onChangePaymentMethod,
+    payment_agent_list: modules.cashier.payment_agent.filtered_list,
+    selected_bank: modules.cashier.payment_agent.selected_bank,
+    supported_banks: modules.cashier.payment_agent.supported_banks,
+}))(PaymentAgentDeposit);
diff --git a/packages/cashier/src/Components/payment-agent-list.jsx b/packages/cashier/src/Components/payment-agent-list.jsx
index 0f6c8c735b63..c1b504f14379 100644
--- a/packages/cashier/src/Components/payment-agent-list.jsx
+++ b/packages/cashier/src/Components/payment-agent-list.jsx
@@ -1,23 +1,12 @@
-import { PropTypes as MobxPropTypes } from 'mobx-react';
-import { toJS } from 'mobx';
 import PropTypes from 'prop-types';
 import React from 'react';
-import {
-    Accordion,
-    DesktopWrapper,
-    Dropdown,
-    Loading,
-    MobileWrapper,
-    SelectNative,
-    Tabs,
-    Text,
-} from '@deriv/components';
+import { Loading, Tabs, Text } from '@deriv/components';
 import { localize, Localize } from '@deriv/translations';
 import { isDesktop, isMobile, website_name } from '@deriv/shared';
 import { connect } from 'Stores/connect';
-import PaymentAgentDetails from './payment-agent-details.jsx';
 import Error from './Error/error.jsx';
 import EmailSent from './Email/email-sent.jsx';
+import PaymentAgentDeposit from './Form/payment-agent-deposit.jsx';
 import PaymentAgentWithdrawForm from './Form/payment-agent-withdraw-form.jsx';
 import 'Sass/payment-agent-list.scss';
 
@@ -27,28 +16,19 @@ const PaymentAgentList = ({
     is_loading,
     is_resend_clicked,
     is_payment_agent_withdraw,
-    onChangePaymentMethod,
     onMount,
     payment_agent_active_tab_index,
-    payment_agent_list,
     resend_timeout,
     resendVerificationEmail,
-    selected_bank,
     sendVerificationEmail,
     setActiveTabIndex,
     setIsResendClicked,
-    supported_banks,
     verification_code,
 }) => {
     React.useEffect(() => {
         onMount();
     }, [onMount]);
 
-    const list_with_default = [
-        { text: <Localize i18n_default_text='All payment agents' />, value: 0 },
-        ...supported_banks,
-    ];
-
     return (
         <div className='cashier__wrapper--align-left cashier__wrapper-padding'>
             <React.Fragment>
@@ -67,84 +47,7 @@ const PaymentAgentList = ({
                         header_fit_content={isDesktop()}
                     >
                         <div label={localize('Deposit')}>
-                            {is_loading ? (
-                                <Loading is_fullscreen={false} />
-                            ) : (
-                                <React.Fragment>
-                                    <Text
-                                        as='p'
-                                        size='xs'
-                                        weight='bold'
-                                        color='prominent'
-                                        className='payment-agent-list__list-header'
-                                    >
-                                        <Localize i18n_default_text='Payment agents' />
-                                    </Text>
-                                    <div className='payment-agent-list__list-line' />
-                                    <div className='payment-agent-list__list-selector'>
-                                        <Text
-                                            as='p'
-                                            size={isMobile() ? 'xxs' : 'xs'}
-                                            line_height='s'
-                                            className='cashier__paragraph'
-                                        >
-                                            <Localize i18n_default_text='Choose a payment agent and contact them for instructions.' />
-                                        </Text>
-                                        {supported_banks.length > 1 && (
-                                            <div>
-                                                <DesktopWrapper>
-                                                    <Dropdown
-                                                        id='payment_methods'
-                                                        className='payment-agent-list__drop-down payment-agent-list__filter'
-                                                        classNameDisplay='cashier__drop-down-display payment-agent-list__filter-display'
-                                                        classNameDisplaySpan='cashier__drop-down-display-span'
-                                                        classNameItems='cashier__drop-down-items'
-                                                        list={list_with_default}
-                                                        name='payment_methods'
-                                                        value={selected_bank}
-                                                        onChange={onChangePaymentMethod}
-                                                    />
-                                                </DesktopWrapper>
-                                                <MobileWrapper>
-                                                    <SelectNative
-                                                        placeholder={localize('Please select')}
-                                                        name='payment_methods'
-                                                        list_items={supported_banks}
-                                                        value={selected_bank}
-                                                        label={
-                                                            selected_bank === 0
-                                                                ? localize('All payment agents')
-                                                                : localize('Type')
-                                                        }
-                                                        onChange={e =>
-                                                            onChangePaymentMethod({
-                                                                target: {
-                                                                    name: 'payment_methods',
-                                                                    value: e.target.value.toLowerCase(),
-                                                                },
-                                                            })
-                                                        }
-                                                        use_text={false}
-                                                    />
-                                                </MobileWrapper>
-                                            </div>
-                                        )}
-                                    </div>
-                                    <Accordion
-                                        className='payment-agent-list__accordion'
-                                        list={payment_agent_list.map(payment_agent => ({
-                                            header: payment_agent.name,
-                                            content: (
-                                                <PaymentAgentDetails
-                                                    payment_agent_email={payment_agent.email}
-                                                    payment_agent_phones={toJS(payment_agent.phones)}
-                                                    payment_agent_urls={toJS(payment_agent.urls)}
-                                                />
-                                            ),
-                                        }))}
-                                    />
-                                </React.Fragment>
-                            )}
+                            {is_loading ? <Loading is_fullscreen={false} /> : <PaymentAgentDeposit />}
                             <div className='payment-agent-list__disclaimer'>
                                 <Text size='xs' lh='s' weight='bold' className='cashier__text'>
                                     <Localize i18n_default_text='DISCLAIMER' />
@@ -195,17 +98,13 @@ PaymentAgentList.propTypes = {
     is_loading: PropTypes.bool,
     is_resend_clicked: PropTypes.bool,
     is_payment_agent_withdraw: PropTypes.bool,
-    onChangePaymentMethod: PropTypes.func,
     onMount: PropTypes.func,
     payment_agent_active_tab_index: PropTypes.number,
-    payment_agent_list: PropTypes.array,
     resend_timeout: PropTypes.number,
     resendVerificationEmail: PropTypes.func,
-    selected_bank: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     sendVerificationEmail: PropTypes.func,
     setActiveTabIndex: PropTypes.func,
     setIsResendClicked: PropTypes.func,
-    supported_banks: MobxPropTypes.arrayOrObservableArray,
     verification_code: PropTypes.string,
 };
 
@@ -214,15 +113,11 @@ export default connect(({ modules }) => ({
     is_email_sent: modules.cashier.payment_agent.verification.is_email_sent,
     is_loading: modules.cashier.general_store.is_loading,
     is_resend_clicked: modules.cashier.payment_agent.verification.is_resend_clicked,
-    onChangePaymentMethod: modules.cashier.payment_agent.onChangePaymentMethod,
     onMount: modules.cashier.payment_agent.onMountPaymentAgentList,
     payment_agent_active_tab_index: modules.cashier.payment_agent.active_tab_index,
-    payment_agent_list: modules.cashier.payment_agent.filtered_list,
     resend_timeout: modules.cashier.payment_agent.verification.resend_timeout,
     resendVerificationEmail: modules.cashier.payment_agent.verification.resendVerificationEmail,
-    selected_bank: modules.cashier.payment_agent.selected_bank,
     sendVerificationEmail: modules.cashier.payment_agent.verification.sendVerificationEmail,
     setActiveTabIndex: modules.cashier.payment_agent.setActiveTab,
     setIsResendClicked: modules.cashier.payment_agent.verification.setIsResendClicked,
-    supported_banks: modules.cashier.payment_agent.supported_banks,
 }))(PaymentAgentList);