Skip to content

Commit

Permalink
refactor_payment_agent_component_for_app_store (#4968)
Browse files Browse the repository at this point in the history
  • Loading branch information
Bahar committed Mar 14, 2022
1 parent 19bc0e3 commit e6e5632
Show file tree
Hide file tree
Showing 2 changed files with 96 additions and 108 deletions.
93 changes: 93 additions & 0 deletions packages/cashier/src/Components/Form/payment-agent-deposit.jsx
View file
Original file line number Diff line number Diff line change
@@ -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);
111 changes: 3 additions & 108 deletions packages/cashier/src/Components/payment-agent-list.jsx
View file
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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>
Expand All @@ -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' />
Expand Down Expand Up @@ -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,
};

Expand All @@ -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);

0 comments on commit e6e5632

Please sign in to comment.