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: , value: 0 }, + ...supported_banks, + ]; + + return ( + + + + +
+
+ + + + {supported_banks.length > 1 && ( +
+ + + + + + onChangePaymentMethod({ + target: { + name: 'payment_methods', + value: e.target.value.toLowerCase(), + }, + }) + } + use_text={false} + /> + +
+ )} +
+ ({ + header: payment_agent.name, + content: ( + + ), + }))} + /> + + ); +}; + +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: , value: 0 }, - ...supported_banks, - ]; - return (
@@ -67,84 +47,7 @@ const PaymentAgentList = ({ header_fit_content={isDesktop()} >
- {is_loading ? ( - - ) : ( - - - - -
-
- - - - {supported_banks.length > 1 && ( -
- - - - - - onChangePaymentMethod({ - target: { - name: 'payment_methods', - value: e.target.value.toLowerCase(), - }, - }) - } - use_text={false} - /> - -
- )} -
- ({ - header: payment_agent.name, - content: ( - - ), - }))} - /> - - )} + {is_loading ? : }
@@ -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);