From 773d10529ac592597e8dbc7d83ba8c65d2553024 Mon Sep 17 00:00:00 2001 From: George Usynin <103181646+george-usynin-binary@users.noreply.github.com> Date: Tue, 6 Sep 2022 13:11:30 +0300 Subject: [PATCH] george / rm65033 / ts migration of withdraw UI components (#6343) * perf(cashier withdraw): convert withdrawal-verification-email to TS * perf: add data-testid for checklist action * perf(cashier withdraw): convert withdrawal-locked to TS * perf(types): add types for TClinetStore * perf(cashier withdraw): convert withdraw to TS * perf(cashier withdraw): convert crypto-withdraw-receipt to TS * perf(cashier withdraw): convert crypto-withdraw-form to TS * perf(cashier withdraw): convert withdrawal to TS * refactor(cashier withdraw): refactor array syntax (ts) * test(cashier withdraw): remove eslint disables for tests --- .../crypto-fiat-converter.tsx | 2 + .../percentage-selector.tsx | 4 +- ...withdrawal.spec.js => withdrawal.spec.tsx} | 22 ++-- ....spec.js => crypto-withdraw-form.spec.tsx} | 41 +++---- ...draw-form.jsx => crypto-withdraw-form.tsx} | 111 +++++++++++------- .../withdrawal/crypto-withdraw-form/index.js | 3 - .../withdrawal/crypto-withdraw-form/index.ts | 3 + ...ec.js => crypto-withdraw-receipt.spec.tsx} | 2 +- ...eceipt.jsx => crypto-withdraw-receipt.tsx} | 59 ++++++---- .../crypto-withdraw-receipt/index.js | 3 - .../crypto-withdraw-receipt/index.ts | 3 + .../cashier/src/pages/withdrawal/index.js | 3 - .../cashier/src/pages/withdrawal/index.ts | 3 + .../{withdraw.spec.js => withdraw.spec.tsx} | 2 +- .../src/pages/withdrawal/withdraw/index.js | 3 - .../src/pages/withdrawal/withdraw/index.ts | 3 + .../withdraw/{withdraw.jsx => withdraw.tsx} | 30 ++--- ...ked.spec.js => withdrawal-locked.spec.tsx} | 79 ++++++------- .../withdrawal/withdrawal-locked/index.js | 3 - .../withdrawal/withdrawal-locked/index.ts | 3 + ...rawal-locked.jsx => withdrawal-locked.tsx} | 32 +++-- ...=> withdrawal-verification-email.spec.tsx} | 43 +++---- .../{index.js => index.ts} | 2 +- ....jsx => withdrawal-verification-email.tsx} | 36 +++--- .../{withdrawal.jsx => withdrawal.tsx} | 102 ++++++++++------ .../src/types/stores/client-store.types.ts | 7 ++ .../src/components/checklist/checklist.jsx | 6 +- 27 files changed, 335 insertions(+), 275 deletions(-) rename packages/cashier/src/pages/withdrawal/__tests__/{withdrawal.spec.js => withdrawal.spec.tsx} (89%) rename packages/cashier/src/pages/withdrawal/crypto-withdraw-form/__tests__/{crypto-withdraw-form.spec.js => crypto-withdraw-form.spec.tsx} (70%) rename packages/cashier/src/pages/withdrawal/crypto-withdraw-form/{crypto-withdraw-form.jsx => crypto-withdraw-form.tsx} (75%) delete mode 100644 packages/cashier/src/pages/withdrawal/crypto-withdraw-form/index.js create mode 100644 packages/cashier/src/pages/withdrawal/crypto-withdraw-form/index.ts rename packages/cashier/src/pages/withdrawal/crypto-withdraw-receipt/__tests__/{crypto-withdraw-receipt.spec.js => crypto-withdraw-receipt.spec.tsx} (97%) rename packages/cashier/src/pages/withdrawal/crypto-withdraw-receipt/{crypto-withdraw-receipt.jsx => crypto-withdraw-receipt.tsx} (86%) delete mode 100644 packages/cashier/src/pages/withdrawal/crypto-withdraw-receipt/index.js create mode 100644 packages/cashier/src/pages/withdrawal/crypto-withdraw-receipt/index.ts delete mode 100644 packages/cashier/src/pages/withdrawal/index.js create mode 100644 packages/cashier/src/pages/withdrawal/index.ts rename packages/cashier/src/pages/withdrawal/withdraw/__tests__/{withdraw.spec.js => withdraw.spec.tsx} (96%) delete mode 100644 packages/cashier/src/pages/withdrawal/withdraw/index.js create mode 100644 packages/cashier/src/pages/withdrawal/withdraw/index.ts rename packages/cashier/src/pages/withdrawal/withdraw/{withdraw.jsx => withdraw.tsx} (69%) rename packages/cashier/src/pages/withdrawal/withdrawal-locked/__tests__/{withdrawal-locked.spec.js => withdrawal-locked.spec.tsx} (62%) delete mode 100644 packages/cashier/src/pages/withdrawal/withdrawal-locked/index.js create mode 100644 packages/cashier/src/pages/withdrawal/withdrawal-locked/index.ts rename packages/cashier/src/pages/withdrawal/withdrawal-locked/{withdrawal-locked.jsx => withdrawal-locked.tsx} (84%) rename packages/cashier/src/pages/withdrawal/withdrawal-verification-email/__tests__/{withdrawal-verification-email.spec.js => withdrawal-verification-email.spec.tsx} (51%) rename packages/cashier/src/pages/withdrawal/withdrawal-verification-email/{index.js => index.ts} (87%) rename packages/cashier/src/pages/withdrawal/withdrawal-verification-email/{withdrawal-verification-email.jsx => withdrawal-verification-email.tsx} (83%) rename packages/cashier/src/pages/withdrawal/{withdrawal.jsx => withdrawal.tsx} (78%) diff --git a/packages/cashier/src/components/crypto-fiat-converter/crypto-fiat-converter.tsx b/packages/cashier/src/components/crypto-fiat-converter/crypto-fiat-converter.tsx index 6a67c118c530..fe2c7394af87 100644 --- a/packages/cashier/src/components/crypto-fiat-converter/crypto-fiat-converter.tsx +++ b/packages/cashier/src/components/crypto-fiat-converter/crypto-fiat-converter.tsx @@ -117,6 +117,7 @@ const CryptoFiatConverter = ({ required hint={hint} classNameHint='crypto-fiat-converter__hint' + data-testid='dt_converter_from_amount_input' /> )} @@ -149,6 +150,7 @@ const CryptoFiatConverter = ({ autoComplete='off' hint={localize('Approximate value')} classNameHint='crypto-fiat-converter__hint' + data-testid='dt_converter_to_amount_input' /> {is_timer_visible && ( void; percentage: number; should_percentage_reset: boolean; - to_account: string; + to_account?: string; }; type TCalculateAmountInputEvent = { target: { id: number } }; diff --git a/packages/cashier/src/pages/withdrawal/__tests__/withdrawal.spec.js b/packages/cashier/src/pages/withdrawal/__tests__/withdrawal.spec.tsx similarity index 89% rename from packages/cashier/src/pages/withdrawal/__tests__/withdrawal.spec.js rename to packages/cashier/src/pages/withdrawal/__tests__/withdrawal.spec.tsx index c5d340b85f94..2f52f9e21b67 100644 --- a/packages/cashier/src/pages/withdrawal/__tests__/withdrawal.spec.js +++ b/packages/cashier/src/pages/withdrawal/__tests__/withdrawal.spec.tsx @@ -11,17 +11,17 @@ jest.mock('Stores/connect.js', () => ({ connect: () => Component => Component, })); -jest.mock('Components/cashier-locked', () => () =>
CashierLocked
); -jest.mock('Components/cashier-container/virtual', () => () =>
Virtual
); -jest.mock('../withdrawal-locked', () => () =>
WithdrawalLocked
); -jest.mock('Components/no-balance', () => () =>
NoBalance
); -jest.mock('Components/error', () => () =>
Error
); -jest.mock('../withdraw', () => () =>
Withdraw
); -jest.mock('../crypto-withdraw-form', () => () =>
CryptoWithdrawForm
); -jest.mock('../crypto-withdraw-receipt', () => () =>
CryptoWithdrawReceipt
); -jest.mock('Components/crypto-transactions-history', () => () =>
CryptoTransactionsHistory
); -jest.mock('../withdrawal-verification-email', () => () =>
WithdrawalVerificationEmail
); -jest.mock('Components/recent-transaction', () => () =>
RecentTransaction
); +jest.mock('Components/cashier-locked', () => jest.fn(() => 'CashierLocked')); +jest.mock('Components/cashier-container/virtual', () => jest.fn(() => 'Virtual')); +jest.mock('../withdrawal-locked', () => jest.fn(() => 'WithdrawalLocked')); +jest.mock('Components/no-balance', () => jest.fn(() => 'NoBalance')); +jest.mock('Components/error', () => jest.fn(() => 'Error')); +jest.mock('../withdraw', () => jest.fn(() => 'Withdraw')); +jest.mock('../crypto-withdraw-form', () => jest.fn(() => 'CryptoWithdrawForm')); +jest.mock('../crypto-withdraw-receipt', () => jest.fn(() => 'CryptoWithdrawReceipt')); +jest.mock('Components/crypto-transactions-history', () => jest.fn(() => 'CryptoTransactionsHistory')); +jest.mock('../withdrawal-verification-email', () => jest.fn(() => 'WithdrawalVerificationEmail')); +jest.mock('Components/recent-transaction', () => jest.fn(() => 'RecentTransaction')); jest.mock('@deriv/components', () => ({ ...jest.requireActual('@deriv/components'), Loading: () =>
Loading
, diff --git a/packages/cashier/src/pages/withdrawal/crypto-withdraw-form/__tests__/crypto-withdraw-form.spec.js b/packages/cashier/src/pages/withdrawal/crypto-withdraw-form/__tests__/crypto-withdraw-form.spec.tsx similarity index 70% rename from packages/cashier/src/pages/withdrawal/crypto-withdraw-form/__tests__/crypto-withdraw-form.spec.js rename to packages/cashier/src/pages/withdrawal/crypto-withdraw-form/__tests__/crypto-withdraw-form.spec.tsx index 682836c3ae7e..edabb8edc473 100644 --- a/packages/cashier/src/pages/withdrawal/crypto-withdraw-form/__tests__/crypto-withdraw-form.spec.js +++ b/packages/cashier/src/pages/withdrawal/crypto-withdraw-form/__tests__/crypto-withdraw-form.spec.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { act } from 'react-dom/test-utils'; import { fireEvent, render, screen, waitFor } from '@testing-library/react'; -import CryptoWithdrawForm from '../crypto-withdraw-form.jsx'; +import CryptoWithdrawForm from '../crypto-withdraw-form'; jest.mock('Stores/connect.js', () => ({ __esModule: true, @@ -10,7 +10,7 @@ jest.mock('Stores/connect.js', () => ({ })); describe('', () => { - const mockProps = () => ({ + const props = { account_platform_icon: 'icon', blockchain_address: 'tb1ql7w62elx9ucw4pj5lgw4l028hmuw80sndtntxt', currency: 'BTC', @@ -23,22 +23,19 @@ describe('', () => { requestWithdraw: jest.fn(), setBlockchainAddress: jest.fn(), setWithdrawPercentageSelectorResult: jest.fn(), - }); + }; it('component and header should be rendered', () => { - const props = mockProps(); - const { container } = render(); + render(); expect(screen.getByText('Your BTC wallet address')).toBeInTheDocument(); - expect(container.querySelector('.cashier__wrapper')).toBeInTheDocument(); - expect(container.querySelector('.cashier__content-header')).toBeInTheDocument(); + expect(screen.getByTestId('dt_crypto_withdraw_form')).toBeInTheDocument(); }); it('should show a proper error if address is not provided', async () => { - const props = mockProps(); - const { container } = render(); + render(); - const address_field = container.querySelector('input[name=address]'); + const address_field = screen.getByTestId('dt_address_input'); act(() => { fireEvent.change(address_field, { target: { value: '1' } }); @@ -52,10 +49,9 @@ describe('', () => { }); it('should show a proper error if provided address has less characters than needed', async () => { - const props = mockProps(); - const { container } = render(); + render(); - const address_field = container.querySelector('input[name=address]'); + const address_field = screen.getByTestId('dt_address_input'); act(() => { fireEvent.change(address_field, { target: { value: 'address less than 25' } }); @@ -66,10 +62,9 @@ describe('', () => { }); it('should show a proper error if provided address has more characters than needed', async () => { - const props = mockProps(); - const { container } = render(); + render(); - const address_field = container.querySelector('input[name=address]'); + const address_field = screen.getByTestId('dt_address_input'); act(() => { fireEvent.change(address_field, { @@ -82,11 +77,10 @@ describe('', () => { }); it("requestWithdraw func should be called if value provided from 'converter_from_amount' input and withdraw button is clicked", async () => { - const props = mockProps(); - const { container } = render(); + render(); - const address_field = container.querySelector('input[name=address]'); - const converter_from_amount_field = container.querySelector('input[name=converter_from_amount]'); + const address_field = screen.getByTestId('dt_address_input'); + const converter_from_amount_field = screen.getByTestId('dt_converter_from_amount_input'); const withdraw_button = screen.getByText('Withdraw'); act(() => { @@ -103,11 +97,10 @@ describe('', () => { }); it("requestWithdraw func should be called if value provided from 'converter_to_amount' input and withdraw button is clicked", async () => { - const props = mockProps(); - const { container } = render(); + render(); - const address_field = container.querySelector('input[name=address]'); - const converter_to_amount_field = container.querySelector('input[name=converter_to_amount]'); + const address_field = screen.getByTestId('dt_address_input'); + const converter_to_amount_field = screen.getByTestId('dt_converter_to_amount_input'); const withdraw_button = screen.getByText('Withdraw'); act(() => { diff --git a/packages/cashier/src/pages/withdrawal/crypto-withdraw-form/crypto-withdraw-form.jsx b/packages/cashier/src/pages/withdrawal/crypto-withdraw-form/crypto-withdraw-form.tsx similarity index 75% rename from packages/cashier/src/pages/withdrawal/crypto-withdraw-form/crypto-withdraw-form.jsx rename to packages/cashier/src/pages/withdrawal/crypto-withdraw-form/crypto-withdraw-form.tsx index 7e556ce1cc8f..91fc7ab9e58c 100644 --- a/packages/cashier/src/pages/withdrawal/crypto-withdraw-form/crypto-withdraw-form.jsx +++ b/packages/cashier/src/pages/withdrawal/crypto-withdraw-form/crypto-withdraw-form.tsx @@ -1,21 +1,64 @@ import classNames from 'classnames'; -import PropTypes from 'prop-types'; import React from 'react'; +import { Field, FieldProps, Formik, FormikProps } from 'formik'; import { Button, Icon, Input, Loading, MobileWrapper, Text } from '@deriv/components'; import { CryptoConfig, getCurrencyName, isCryptocurrency, isMobile } from '@deriv/shared'; import { localize, Localize } from '@deriv/translations'; -import { Field, Formik } from 'formik'; -import { connect } from 'Stores/connect'; -import RecentTransaction from 'Components/recent-transaction'; import CryptoFiatConverter from 'Components/crypto-fiat-converter'; import PercentageSelector from 'Components/percentage-selector'; +import RecentTransaction from 'Components/recent-transaction'; +import { connect } from 'Stores/connect'; +import { TClientStore, TCryptoTransactionDetails, TReactChangeEvent, TRootStore } from 'Types'; import './crypto-withdraw-form.scss'; +type THeaderProps = { + currency: string; +}; + +type TCryptoWithdrawFormProps = { + account_platform_icon: string; + balance: TClientStore['balance']; + blockchain_address: string; + crypto_currency: TClientStore['currency']; + crypto_transactions: TCryptoTransactionDetails[]; + converter_to_error: string; + converter_from_error: string; + currency: TClientStore['currency']; + current_fiat_currency: TClientStore['current_fiat_currency']; + is_loading: boolean; + percentage: number; + should_percentage_reset: boolean; + verification_code: TClientStore['verification_code']['payment_withdraw']; + onChangeConverterFromAmount: ( + e: React.ChangeEvent, + from_currency: string, + to_currency: string + ) => void; + onChangeConverterToAmount: ( + e: React.ChangeEvent, + from_currency: string, + to_currency: string + ) => void; + onMountWithdraw: (verification_code: string) => void; + percentageSelectorSelectionStatus: (should_percentage_reset: boolean) => void; + recentTransactionOnMount: () => void; + requestWithdraw: (verification_code: string) => void; + resetConverter: () => void; + setBlockchainAddress: (address: string) => void; + setWithdrawPercentageSelectorResult: (amount: string) => void; + validateWithdrawFromAmount: () => void; + validateWithdrawToAmount: () => void; +}; + +type TFormValues = { + address: string; +}; + const MIN_ADDRESS_LENGTH = 25; const MAX_ADDRESS_LENGTH = 64; const DEFAULT_FIAT_CURRENCY = 'USD'; -const Header = ({ currency }) => { +const Header = ({ currency }: THeaderProps) => { const currency_name = getCurrencyName(currency); const currency_display_code = CryptoConfig.get()[currency].display_code; @@ -63,7 +106,7 @@ const CryptoWithdrawForm = ({ validateWithdrawFromAmount, validateWithdrawToAmount, verification_code, -}) => { +}: TCryptoWithdrawFormProps) => { React.useEffect(() => { recentTransactionOnMount(); }, [recentTransactionOnMount]); @@ -74,7 +117,7 @@ const CryptoWithdrawForm = ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, []); - const validateAddress = address => { + const validateAddress = (address: string): string | undefined => { if (!address) return localize('This field is required.'); if (address.length < MIN_ADDRESS_LENGTH || address.length > MAX_ADDRESS_LENGTH) { @@ -87,7 +130,7 @@ const CryptoWithdrawForm = ({ if (is_loading) return ; return ( -
+
{!isMobile() &&
}
@@ -97,19 +140,29 @@ const CryptoWithdrawForm = ({ initialValues={{ address: '', }} + onSubmit={() => requestWithdraw(verification_code)} > - {({ errors, isSubmitting, touched, setFieldTouched, handleChange, values }) => ( -
+ {({ + errors, + isSubmitting, + touched, + setFieldTouched, + handleChange, + handleSubmit, + values, + }: FormikProps) => ( +
- {({ field }) => ( + {({ field }: FieldProps) => ( { + onChange={(e: TReactChangeEvent) => { handleChange(e); setBlockchainAddress(e.target.value); setFieldTouched('address', true, false); }} className='cashier__input withdraw__input' + data-testid='dt_address_input' type='text' label={
requestWithdraw(verification_code)} >
-
+ )} @@ -173,34 +225,7 @@ const CryptoWithdrawForm = ({ ); }; -CryptoWithdrawForm.propTypes = { - account_platform_icon: PropTypes.string, - balance: PropTypes.number, - blockchain_address: PropTypes.string, - converter_from_error: PropTypes.string, - converter_to_error: PropTypes.string, - crypto_currency: PropTypes.string, - crypto_transactions: PropTypes.array, - currency: PropTypes.string, - current_fiat_currency: PropTypes.string, - is_loading: PropTypes.bool, - onChangeConverterFromAmount: PropTypes.func, - onChangeConverterToAmount: PropTypes.func, - onMountWithdraw: PropTypes.func, - percentage: PropTypes.number, - percentageSelectorSelectionStatus: PropTypes.func, - recentTransactionOnMount: PropTypes.func, - requestWithdraw: PropTypes.func, - resetConverter: PropTypes.func, - setBlockchainAddress: PropTypes.func, - setWithdrawPercentageSelectorResult: PropTypes.func, - should_percentage_reset: PropTypes.bool, - validateWithdrawFromAmount: PropTypes.func, - validateWithdrawToAmount: PropTypes.func, - verification_code: PropTypes.string, -}; - -export default connect(({ client, modules }) => ({ +export default connect(({ client, modules }: TRootStore) => ({ account_platform_icon: modules.cashier.withdraw.account_platform_icon, balance: client.balance, blockchain_address: modules.cashier.withdraw.blockchain_address, diff --git a/packages/cashier/src/pages/withdrawal/crypto-withdraw-form/index.js b/packages/cashier/src/pages/withdrawal/crypto-withdraw-form/index.js deleted file mode 100644 index adcdd18321b5..000000000000 --- a/packages/cashier/src/pages/withdrawal/crypto-withdraw-form/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import CryptoWithdrawForm from './crypto-withdraw-form.jsx'; - -export default CryptoWithdrawForm; diff --git a/packages/cashier/src/pages/withdrawal/crypto-withdraw-form/index.ts b/packages/cashier/src/pages/withdrawal/crypto-withdraw-form/index.ts new file mode 100644 index 000000000000..cd1f88da201d --- /dev/null +++ b/packages/cashier/src/pages/withdrawal/crypto-withdraw-form/index.ts @@ -0,0 +1,3 @@ +import CryptoWithdrawForm from './crypto-withdraw-form'; + +export default CryptoWithdrawForm; diff --git a/packages/cashier/src/pages/withdrawal/crypto-withdraw-receipt/__tests__/crypto-withdraw-receipt.spec.js b/packages/cashier/src/pages/withdrawal/crypto-withdraw-receipt/__tests__/crypto-withdraw-receipt.spec.tsx similarity index 97% rename from packages/cashier/src/pages/withdrawal/crypto-withdraw-receipt/__tests__/crypto-withdraw-receipt.spec.js rename to packages/cashier/src/pages/withdrawal/crypto-withdraw-receipt/__tests__/crypto-withdraw-receipt.spec.tsx index 352e93b230e7..84fab1554655 100644 --- a/packages/cashier/src/pages/withdrawal/crypto-withdraw-receipt/__tests__/crypto-withdraw-receipt.spec.js +++ b/packages/cashier/src/pages/withdrawal/crypto-withdraw-receipt/__tests__/crypto-withdraw-receipt.spec.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { fireEvent, render, screen } from '@testing-library/react'; -import CryptoWithdrawReceipt from '../crypto-withdraw-receipt.jsx'; +import CryptoWithdrawReceipt from '../crypto-withdraw-receipt'; jest.mock('Stores/connect.js', () => ({ __esModule: true, diff --git a/packages/cashier/src/pages/withdrawal/crypto-withdraw-receipt/crypto-withdraw-receipt.jsx b/packages/cashier/src/pages/withdrawal/crypto-withdraw-receipt/crypto-withdraw-receipt.tsx similarity index 86% rename from packages/cashier/src/pages/withdrawal/crypto-withdraw-receipt/crypto-withdraw-receipt.jsx rename to packages/cashier/src/pages/withdrawal/crypto-withdraw-receipt/crypto-withdraw-receipt.tsx index a67341f3d629..752804526856 100644 --- a/packages/cashier/src/pages/withdrawal/crypto-withdraw-receipt/crypto-withdraw-receipt.jsx +++ b/packages/cashier/src/pages/withdrawal/crypto-withdraw-receipt/crypto-withdraw-receipt.tsx @@ -1,13 +1,39 @@ -import PropTypes from 'prop-types'; import React from 'react'; import { Button, Clipboard, Icon, Text } from '@deriv/components'; import { isCryptocurrency, isMobile } from '@deriv/shared'; import { localize, Localize } from '@deriv/translations'; import { connect } from 'Stores/connect'; -import RecentTransaction from 'Components/recent-transaction'; +import { TClientStore, TCryptoTransactionDetails, TRootStore } from 'Types'; import { getAccountText } from 'Utils/utility'; +import RecentTransaction from 'Components/recent-transaction'; import './crypto-withdraw-receipt.scss'; +type TAccount = { + balance: string; + currency: string; + is_crypto: boolean; + is_dxtrade: boolean; + is_mt: boolean; + market_type: string; + platform_icon: string; + text: string; + value: string; +}; + +type TCryptoWithdrawReceiptProps = { + account: TAccount; + blockchain_address: string; + crypto_transactions: TCryptoTransactionDetails[]; + currency: TClientStore['currency']; + is_switching: TClientStore['is_switching']; + tab_index: number; + withdraw_amount: string; + resetWithrawForm: () => void; + recentTransactionOnMount: () => void; + setIsCryptoTransactionsVisible: (value: boolean) => void; + setIsWithdrawConfirmed: (value: boolean) => void; +}; + const Status = () => { return ( @@ -22,7 +48,7 @@ const Status = () => { ); }; -const AcountInformation = ({ account }) => { +const AcountInformation = ({ account }: Pick) => { return (
@@ -49,7 +75,10 @@ const AcountInformation = ({ account }) => { ); }; -const WalletInformation = ({ account, blockchain_address }) => { +const WalletInformation = ({ + account, + blockchain_address, +}: Pick) => { const text = getAccountText(account); return (
@@ -94,16 +123,16 @@ const WalletInformation = ({ account, blockchain_address }) => { const CryptoWithdrawReceipt = ({ account, blockchain_address, - withdraw_amount, crypto_transactions, currency, is_switching, - resetWithrawForm, recentTransactionOnMount, + resetWithrawForm, setIsCryptoTransactionsVisible, setIsWithdrawConfirmed, tab_index, -}) => { + withdraw_amount, +}: TCryptoWithdrawReceiptProps) => { React.useEffect(() => { recentTransactionOnMount(); }, [recentTransactionOnMount]); @@ -172,21 +201,7 @@ const CryptoWithdrawReceipt = ({ ); }; -CryptoWithdrawReceipt.propTypes = { - account: PropTypes.object, - crypto_transactions: PropTypes.array, - blockchain_address: PropTypes.string, - currency: PropTypes.string, - is_switching: PropTypes.bool, - resetWithrawForm: PropTypes.func, - recentTransactionOnMount: PropTypes.func, - setIsCryptoTransactionsVisible: PropTypes.func, - setIsWithdrawConfirmed: PropTypes.func, - tab_index: PropTypes.number, - withdraw_amount: PropTypes.string, -}; - -export default connect(({ client, modules }) => ({ +export default connect(({ client, modules }: TRootStore) => ({ account: modules.cashier.account_transfer.selected_from, blockchain_address: modules.cashier.withdraw.blockchain_address, withdraw_amount: modules.cashier.withdraw.withdraw_amount, diff --git a/packages/cashier/src/pages/withdrawal/crypto-withdraw-receipt/index.js b/packages/cashier/src/pages/withdrawal/crypto-withdraw-receipt/index.js deleted file mode 100644 index 1ec7fa4ee102..000000000000 --- a/packages/cashier/src/pages/withdrawal/crypto-withdraw-receipt/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import CryptoWithdrawReceipt from './crypto-withdraw-receipt.jsx'; - -export default CryptoWithdrawReceipt; diff --git a/packages/cashier/src/pages/withdrawal/crypto-withdraw-receipt/index.ts b/packages/cashier/src/pages/withdrawal/crypto-withdraw-receipt/index.ts new file mode 100644 index 000000000000..f774459a4b2b --- /dev/null +++ b/packages/cashier/src/pages/withdrawal/crypto-withdraw-receipt/index.ts @@ -0,0 +1,3 @@ +import CryptoWithdrawReceipt from './crypto-withdraw-receipt'; + +export default CryptoWithdrawReceipt; diff --git a/packages/cashier/src/pages/withdrawal/index.js b/packages/cashier/src/pages/withdrawal/index.js deleted file mode 100644 index 726d0870ab30..000000000000 --- a/packages/cashier/src/pages/withdrawal/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import Withdrawal from './withdrawal.jsx'; - -export default Withdrawal; diff --git a/packages/cashier/src/pages/withdrawal/index.ts b/packages/cashier/src/pages/withdrawal/index.ts new file mode 100644 index 000000000000..6c67413ae062 --- /dev/null +++ b/packages/cashier/src/pages/withdrawal/index.ts @@ -0,0 +1,3 @@ +import Withdrawal from './withdrawal'; + +export default Withdrawal; diff --git a/packages/cashier/src/pages/withdrawal/withdraw/__tests__/withdraw.spec.js b/packages/cashier/src/pages/withdrawal/withdraw/__tests__/withdraw.spec.tsx similarity index 96% rename from packages/cashier/src/pages/withdrawal/withdraw/__tests__/withdraw.spec.js rename to packages/cashier/src/pages/withdrawal/withdraw/__tests__/withdraw.spec.tsx index 57f930192df0..ecaba4b8cca6 100644 --- a/packages/cashier/src/pages/withdrawal/withdraw/__tests__/withdraw.spec.js +++ b/packages/cashier/src/pages/withdrawal/withdraw/__tests__/withdraw.spec.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; -import Withdraw from '../withdraw.jsx'; +import Withdraw from '../withdraw'; jest.mock('Stores/connect', () => ({ __esModule: true, diff --git a/packages/cashier/src/pages/withdrawal/withdraw/index.js b/packages/cashier/src/pages/withdrawal/withdraw/index.js deleted file mode 100644 index a422707c22f7..000000000000 --- a/packages/cashier/src/pages/withdrawal/withdraw/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import Withdraw from './withdraw.jsx'; - -export default Withdraw; diff --git a/packages/cashier/src/pages/withdrawal/withdraw/index.ts b/packages/cashier/src/pages/withdrawal/withdraw/index.ts new file mode 100644 index 000000000000..8a6a989c41d7 --- /dev/null +++ b/packages/cashier/src/pages/withdrawal/withdraw/index.ts @@ -0,0 +1,3 @@ +import Withdraw from './withdraw'; + +export default Withdraw; diff --git a/packages/cashier/src/pages/withdrawal/withdraw/withdraw.jsx b/packages/cashier/src/pages/withdrawal/withdraw/withdraw.tsx similarity index 69% rename from packages/cashier/src/pages/withdrawal/withdraw/withdraw.jsx rename to packages/cashier/src/pages/withdrawal/withdraw/withdraw.tsx index c317ea28d6b2..7fc77b2eda52 100644 --- a/packages/cashier/src/pages/withdrawal/withdraw/withdraw.jsx +++ b/packages/cashier/src/pages/withdrawal/withdraw/withdraw.tsx @@ -1,7 +1,18 @@ -import PropTypes from 'prop-types'; import React from 'react'; -import { connect } from 'Stores/connect'; import { Real } from 'Components/cashier-container'; +import { connect } from 'Stores/connect'; +import { TClientStore, TRootStore } from 'Types'; + +type TWithdrawProps = { + container: string; + iframe_height: number | string; + iframe_url: string; + is_loading: boolean; + verification_code: string; + clearIframe: () => void; + onMount: (verification_code: TClientStore['verification_code']['payment_withdraw']) => void; + setActiveTab: (container: string) => void; +}; const Withdraw = ({ container, @@ -12,7 +23,7 @@ const Withdraw = ({ onMount, setActiveTab, verification_code, -}) => { +}: TWithdrawProps) => { React.useEffect(() => { setActiveTab(container); onMount(verification_code); @@ -24,18 +35,7 @@ const Withdraw = ({ ); }; -Withdraw.propTypes = { - clearIframe: PropTypes.func, - container: PropTypes.string, - iframe_height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - iframe_url: PropTypes.string, - is_loading: PropTypes.bool, - onMount: PropTypes.func, - setActiveTab: PropTypes.func, - verification_code: PropTypes.string, -}; - -export default connect(({ client, modules }) => ({ +export default connect(({ client, modules }: TRootStore) => ({ container: modules.cashier.withdraw.container, iframe_height: modules.cashier.iframe.iframe_height, iframe_url: modules.cashier.iframe.iframe_url, diff --git a/packages/cashier/src/pages/withdrawal/withdrawal-locked/__tests__/withdrawal-locked.spec.js b/packages/cashier/src/pages/withdrawal/withdrawal-locked/__tests__/withdrawal-locked.spec.tsx similarity index 62% rename from packages/cashier/src/pages/withdrawal/withdrawal-locked/__tests__/withdrawal-locked.spec.js rename to packages/cashier/src/pages/withdrawal/withdrawal-locked/__tests__/withdrawal-locked.spec.tsx index 3dbfdc6e4430..4b93a7448487 100644 --- a/packages/cashier/src/pages/withdrawal/withdrawal-locked/__tests__/withdrawal-locked.spec.js +++ b/packages/cashier/src/pages/withdrawal/withdrawal-locked/__tests__/withdrawal-locked.spec.tsx @@ -2,9 +2,10 @@ import React from 'react'; import { Router } from 'react-router'; import { createBrowserHistory } from 'history'; import { fireEvent, render, screen } from '@testing-library/react'; -import { Checklist } from '@deriv/components'; import { routes } from '@deriv/shared'; -import WithdrawalLocked from '../withdrawal-locked.jsx'; +import WithdrawalLocked from '../withdrawal-locked'; + +type TStatus = 'document' | 'none' | 'pending' | ''; jest.mock('Stores/connect', () => ({ __esModule: true, @@ -12,20 +13,32 @@ jest.mock('Stores/connect', () => ({ connect: () => Component => Component, })); -jest.mock('Components/cashier-locked', () => () =>
CashierLocked
); +jest.mock('Components/cashier-locked', () => jest.fn(() => 'CashierLocked')); -const fireButtonEvent = (container, text_content) => { - const node_list = container.querySelectorAll('.dc-checklist__item'); - let node = Array.from(node_list).find(node => { - if (node.textContent === text_content) { - return node; +const fireButtonEvent = (button: 'proof_of_identity_btn' | 'proof_of_address_btn' | 'financial_assessment_btn') => { + const [proof_of_identity_btn, proof_of_address_btn, financial_assessment_btn] = screen.getAllByTestId( + 'dt_checklist_item_status_action' + ); + switch (button) { + case 'proof_of_identity_btn': { + fireEvent.click(proof_of_identity_btn); + break; } - }); - const btn = node.querySelector('.dc-checklist__item-status--action'); - fireEvent.click(btn); + case 'proof_of_address_btn': { + fireEvent.click(proof_of_address_btn); + break; + } + case 'financial_assessment_btn': { + fireEvent.click(financial_assessment_btn); + break; + } + default: { + break; + } + } }; -const setAccountStatus = (identity_status, document_status, needs_verification) => { +const setAccountStatus = (identity_status: TStatus, document_status: TStatus, needs_verification: TStatus) => { return { authentication: { identity: { @@ -40,92 +53,72 @@ const setAccountStatus = (identity_status, document_status, needs_verification) }; describe('WithdrawalLocked', () => { + const history = createBrowserHistory(); it('Should show "Check proof of identity document verification status" message and redirect to account/proof-of-identity when "-->" button clicked', () => { - const history = createBrowserHistory(); const need_poi_account_status = setAccountStatus('pending', '', ''); - const { container } = render( + render( ); - fireButtonEvent(container, 'Check proof of identity document verification status'); + fireButtonEvent('proof_of_identity_btn'); expect(history.location.pathname).toBe(routes.proof_of_identity); }); it('Should show "Upload a proof of identity to verify your identity" message and redirect to account/proof-of-identity when "-->" button clicked', () => { - const history = createBrowserHistory(); const need_poi_account_status = setAccountStatus('none', '', ''); - const { container } = render( + render( ); - fireButtonEvent(container, 'Upload a proof of identity to verify your identity'); + fireButtonEvent('proof_of_identity_btn'); expect(history.location.pathname).toBe(routes.proof_of_identity); }); it('Should show "Check proof of address document verification status" message and redirect to account/proof_of_address when "-->" button clicked', () => { - const history = createBrowserHistory(); const need_poa_account_status = setAccountStatus('', 'pending', 'document'); - const { container } = render( + render( ); - fireButtonEvent(container, 'Check proof of address document verification status'); + fireButtonEvent('proof_of_address_btn'); expect(history.location.pathname).toBe(routes.proof_of_address); }); it('Should show "Upload a proof of address to verify your address" message and redirect to account/proof_of_address when "-->" button clicked', () => { - const history = createBrowserHistory(); const need_poa_account_status = setAccountStatus('', 'none', 'document'); - const { container } = render( + render( ); - fireButtonEvent(container, 'Upload a proof of address to verify your address'); + fireButtonEvent('proof_of_address_btn'); expect(history.location.pathname).toBe(routes.proof_of_address); }); it('Should show "Complete the financial assessment form" message and redirect to account/financial_assessment when "-->" button clicked', () => { - const history = createBrowserHistory(); const account_status = setAccountStatus('', '', ''); - const { container } = render( + render( ); - fireButtonEvent(container, 'Complete the financial assessment form'); + fireButtonEvent('financial_assessment_btn'); expect(history.location.pathname).toBe(routes.financial_assessment); }); - it('Should trigger click on the checklist item', () => { - const onClick = jest.fn(); - const items = [ - { - content: 'Complete the financial assessment form', - status: 'action', - onClick: onClick, - }, - ]; - const { container } = render(); - const btn = container.querySelector('.dc-checklist__item-status--action'); - - fireEvent.click(btn); - expect(onClick).toHaveBeenCalled(); - }); - it('should render component', () => { const account_status = setAccountStatus('', '', ''); diff --git a/packages/cashier/src/pages/withdrawal/withdrawal-locked/index.js b/packages/cashier/src/pages/withdrawal/withdrawal-locked/index.js deleted file mode 100644 index 28c75b058a4d..000000000000 --- a/packages/cashier/src/pages/withdrawal/withdrawal-locked/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import WithdrawalLocked from './withdrawal-locked.jsx'; - -export default WithdrawalLocked; diff --git a/packages/cashier/src/pages/withdrawal/withdrawal-locked/index.ts b/packages/cashier/src/pages/withdrawal/withdrawal-locked/index.ts new file mode 100644 index 000000000000..c5ba4b13c4c6 --- /dev/null +++ b/packages/cashier/src/pages/withdrawal/withdrawal-locked/index.ts @@ -0,0 +1,3 @@ +import WithdrawalLocked from './withdrawal-locked'; + +export default WithdrawalLocked; diff --git a/packages/cashier/src/pages/withdrawal/withdrawal-locked/withdrawal-locked.jsx b/packages/cashier/src/pages/withdrawal/withdrawal-locked/withdrawal-locked.tsx similarity index 84% rename from packages/cashier/src/pages/withdrawal/withdrawal-locked/withdrawal-locked.jsx rename to packages/cashier/src/pages/withdrawal/withdrawal-locked/withdrawal-locked.tsx index b5b4e9235ffd..ba260b169843 100644 --- a/packages/cashier/src/pages/withdrawal/withdrawal-locked/withdrawal-locked.jsx +++ b/packages/cashier/src/pages/withdrawal/withdrawal-locked/withdrawal-locked.tsx @@ -1,21 +1,33 @@ import React from 'react'; -import PropTypes from 'prop-types'; import { useHistory } from 'react-router-dom'; -import { routes } from '@deriv/shared'; import { Icon, Checklist, Text } from '@deriv/components'; import { localize, Localize } from '@deriv/translations'; +import { routes } from '@deriv/shared'; import { connect } from 'Stores/connect'; +import { TClientStore, TRootStore } from 'Types'; import CashierLocked from 'Components/cashier-locked'; -const WithdrawalLocked = ({ account_status, is_10K_limit, is_ask_financial_risk_approval }) => { +type TWithdrawalLockedProps = { + account_status: Required; + is_10K_limit: boolean; + is_ask_financial_risk_approval: boolean; +}; + +type TItem = { + content: string; + status: string; + onClick: () => void; +}; + +const WithdrawalLocked = ({ account_status, is_10K_limit, is_ask_financial_risk_approval }: TWithdrawalLockedProps) => { const { document, identity, needs_verification } = account_status.authentication; - const is_poi_needed = is_10K_limit && identity.status !== 'verified'; - const has_poi_submitted = identity.status !== 'none'; + const is_poi_needed = is_10K_limit && identity?.status !== 'verified'; + const has_poi_submitted = identity?.status !== 'none'; const is_poa_needed = is_10K_limit && (needs_verification.includes('document') || document?.status !== 'verified'); const has_poa_submitted = document?.status !== 'none'; const is_ask_financial_risk_approval_needed = is_10K_limit && is_ask_financial_risk_approval; const history = useHistory(); - const items = [ + const items: TItem[] = [ ...(is_poi_needed ? [ { @@ -70,13 +82,7 @@ const WithdrawalLocked = ({ account_status, is_10K_limit, is_ask_financial_risk_ ); }; -WithdrawalLocked.propTypes = { - account_status: PropTypes.object, - is_10K_limit: PropTypes.bool, - is_ask_financial_risk_approval: PropTypes.bool, -}; - -export default connect(({ modules, client }) => ({ +export default connect(({ modules, client }: TRootStore) => ({ account_status: client.account_status, is_10K_limit: modules.cashier.withdraw.is_10k_withdrawal_limit_reached, is_ask_financial_risk_approval: modules.cashier.withdraw.error.is_ask_financial_risk_approval, diff --git a/packages/cashier/src/pages/withdrawal/withdrawal-verification-email/__tests__/withdrawal-verification-email.spec.js b/packages/cashier/src/pages/withdrawal/withdrawal-verification-email/__tests__/withdrawal-verification-email.spec.tsx similarity index 51% rename from packages/cashier/src/pages/withdrawal/withdrawal-verification-email/__tests__/withdrawal-verification-email.spec.js rename to packages/cashier/src/pages/withdrawal/withdrawal-verification-email/__tests__/withdrawal-verification-email.spec.tsx index 7ebc64478250..139f075d3a65 100644 --- a/packages/cashier/src/pages/withdrawal/withdrawal-verification-email/__tests__/withdrawal-verification-email.spec.js +++ b/packages/cashier/src/pages/withdrawal/withdrawal-verification-email/__tests__/withdrawal-verification-email.spec.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { fireEvent, render, screen } from '@testing-library/react'; -import WithdrawalVerificationEmail from '../withdrawal-verification-email.jsx'; +import WithdrawalVerificationEmail from '../withdrawal-verification-email'; jest.mock('Stores/connect.js', () => ({ __esModule: true, @@ -8,30 +8,29 @@ jest.mock('Stores/connect.js', () => ({ connect: () => Component => Component, })); +jest.mock('Components/verification-email', () => jest.fn(() => 'VerificationEmail')); + describe('', () => { - const recentTransactionOnMount = jest.fn(); - const sendVerificationEmail = jest.fn(); + const props = { + is_email_sent: true, + recentTransactionOnMount: jest.fn(), + sendVerificationEmail: jest.fn(), + }; it('component should be rendered', () => { - const { container } = render( - - ); + render(); - expect(container.querySelector('.cashier__wrapper')).toBeInTheDocument(); + expect(screen.getByTestId('dt_cashier_wrapper')).toBeInTheDocument(); }); - it(" component should be rendered when 'is_email_sent' prop is true", () => { - const { container } = render( - - ); + it(" component should be rendered when 'is_email_sent' prop is true", () => { + render(); - expect(container.querySelector('.verification-email')).toBeInTheDocument(); + expect(screen.getByText('VerificationEmail')).toBeInTheDocument(); }); it("React.Fragment should be rendered when 'is_email_sent' prop is false", () => { - render( - - ); + render(); expect(screen.getByText('Please help us verify your withdrawal request.')).toBeInTheDocument(); expect( @@ -43,25 +42,17 @@ describe('', () => { }); it("'Send email' button should be rendered when 'is_email_sent' prop is false", () => { - render( - - ); + render(); expect(screen.getByRole('button', { name: 'Send email' })).toBeInTheDocument(); }); it("sendVerificationEmail func should be triggered when click on 'Send email' button", () => { - render( - - ); + render(); const btn = screen.getByRole('button', { name: 'Send email' }); fireEvent.click(btn); - expect(sendVerificationEmail).toHaveBeenCalled(); + expect(props.sendVerificationEmail).toHaveBeenCalled(); }); }); diff --git a/packages/cashier/src/pages/withdrawal/withdrawal-verification-email/index.js b/packages/cashier/src/pages/withdrawal/withdrawal-verification-email/index.ts similarity index 87% rename from packages/cashier/src/pages/withdrawal/withdrawal-verification-email/index.js rename to packages/cashier/src/pages/withdrawal/withdrawal-verification-email/index.ts index 5def41e3d2ee..c9889c704e79 100644 --- a/packages/cashier/src/pages/withdrawal/withdrawal-verification-email/index.js +++ b/packages/cashier/src/pages/withdrawal/withdrawal-verification-email/index.ts @@ -1,3 +1,3 @@ -import WithdrawalVerificationEmail from './withdrawal-verification-email.jsx'; +import WithdrawalVerificationEmail from './withdrawal-verification-email'; export default WithdrawalVerificationEmail; diff --git a/packages/cashier/src/pages/withdrawal/withdrawal-verification-email/withdrawal-verification-email.jsx b/packages/cashier/src/pages/withdrawal/withdrawal-verification-email/withdrawal-verification-email.tsx similarity index 83% rename from packages/cashier/src/pages/withdrawal/withdrawal-verification-email/withdrawal-verification-email.jsx rename to packages/cashier/src/pages/withdrawal/withdrawal-verification-email/withdrawal-verification-email.tsx index 84fcf5125615..c90fb5ea5234 100644 --- a/packages/cashier/src/pages/withdrawal/withdrawal-verification-email/withdrawal-verification-email.jsx +++ b/packages/cashier/src/pages/withdrawal/withdrawal-verification-email/withdrawal-verification-email.tsx @@ -1,36 +1,45 @@ -import PropTypes from 'prop-types'; import React from 'react'; import { Button, Icon, MobileWrapper, Text } from '@deriv/components'; import { isCryptocurrency, isMobile } from '@deriv/shared'; import { localize, Localize } from '@deriv/translations'; import { connect } from 'Stores/connect'; +import { TClientStore, TCryptoTransactionDetails, TRootStore } from 'Types'; import RecentTransaction from 'Components/recent-transaction'; import VerificationEmail from 'Components/verification-email'; import './withdrawal-verification-email.scss'; +type TWithdrawalVerificationEmailProps = { + crypto_transactions: TCryptoTransactionDetails[]; + currency: TClientStore['currency']; + is_email_sent: boolean; + is_resend_clicked: boolean; + recentTransactionOnMount: () => void; + resendVerificationEmail: () => void; + setIsResendClicked: (value: boolean) => void; + sendVerificationEmail: () => void; +}; + const WithdrawalVerificationEmail = ({ crypto_transactions, currency, is_email_sent, is_resend_clicked, - resendVerificationEmail, recentTransactionOnMount, - sendVerificationEmail, + resendVerificationEmail, setIsResendClicked, -}) => { + sendVerificationEmail, +}: TWithdrawalVerificationEmailProps) => { React.useEffect(() => { recentTransactionOnMount(); }, [recentTransactionOnMount]); return ( -
+
{is_email_sent ? ( ) : ( @@ -62,18 +71,7 @@ const WithdrawalVerificationEmail = ({ ); }; -WithdrawalVerificationEmail.propTypes = { - crypto_transactions: PropTypes.array, - currency: PropTypes.string, - is_email_sent: PropTypes.bool, - is_resend_clicked: PropTypes.bool, - recentTransactionOnMount: PropTypes.func, - resendVerificationEmail: PropTypes.func, - sendVerificationEmail: PropTypes.func, - setIsResendClicked: PropTypes.func, -}; - -export default connect(({ client, modules }) => ({ +export default connect(({ client, modules }: TRootStore) => ({ crypto_transactions: modules.cashier.transaction_history.crypto_transactions, currency: client.currency, is_email_sent: modules.cashier.withdraw.verification.is_email_sent, diff --git a/packages/cashier/src/pages/withdrawal/withdrawal.jsx b/packages/cashier/src/pages/withdrawal/withdrawal.tsx similarity index 78% rename from packages/cashier/src/pages/withdrawal/withdrawal.jsx rename to packages/cashier/src/pages/withdrawal/withdrawal.tsx index ad3a209e80cb..193d4ceec37b 100644 --- a/packages/cashier/src/pages/withdrawal/withdrawal.jsx +++ b/packages/cashier/src/pages/withdrawal/withdrawal.tsx @@ -1,24 +1,78 @@ -import PropTypes from 'prop-types'; import React from 'react'; import { Loading } from '@deriv/components'; import { Localize } from '@deriv/translations'; import { isCryptocurrency, isDesktop } from '@deriv/shared'; import { connect } from 'Stores/connect'; +import { TClientStore, TCryptoTransactionDetails, TRootStore } from 'Types'; +import CryptoTransactionsHistory from 'Components/crypto-transactions-history'; import CryptoWithdrawForm from './crypto-withdraw-form'; import CryptoWithdrawReceipt from './crypto-withdraw-receipt'; import Withdraw from './withdraw'; +import WithdrawalLocked from './withdrawal-locked'; import WithdrawalVerificationEmail from './withdrawal-verification-email'; +import CashierLocked from 'Components/cashier-locked'; import Error from 'Components/error'; import NoBalance from 'Components/no-balance'; -import { Virtual } from 'Components/cashier-container'; -import WithdrawalLocked from './withdrawal-locked'; -import CashierLocked from 'Components/cashier-locked'; +import RecentTransaction from 'Components/recent-transaction'; import SideNote from 'Components/side-note'; import USDTSideNote from 'Components/usdt-side-note'; -import CryptoTransactionsHistory from 'Components/crypto-transactions-history'; -import RecentTransaction from 'Components/recent-transaction'; +import { Virtual } from 'Components/cashier-container'; -const WithdrawalSideNote = ({ is_mobile, currency }) => { +type TErrorFull = { + code?: string; + fields?: string; + is_ask_authentication: boolean; + is_ask_financial_risk_approval: boolean; + is_ask_uk_funds_protection: boolean; + is_self_exclusion_max_turnover_set: boolean; + is_show_full_page: boolean | null; + message?: string; + onClickButton?: () => void | null; +}; + +type TErrorShort = { + code: string; + message: string; +}; + +type TWithdrawalSideNoteProps = { + currency: string; + is_mobile?: boolean; +}; + +type TWithdrawalProps = { + balance: TClientStore['balance']; + container: string; + crypto_transactions: TCryptoTransactionDetails[]; + current_currency_type: TClientStore['current_currency_type']; + currency: TClientStore['currency']; + error: TErrorFull; + iframe_url: string; + is_10k_withdrawal_limit_reached: boolean; + is_cashier_locked: boolean; + is_crypto: boolean; + is_crypto_transactions_visible: boolean; + is_switching: TClientStore['is_switching']; + is_system_maintenance: boolean; + is_virtual: TClientStore['is_virtual']; + is_withdraw_confirmed: boolean; + is_withdrawal_locked: boolean; + tab_index: number; + verification_code: TClientStore['verification_code']['payment_withdraw']; + verify_error: TErrorFull; + check10kLimit: () => void; + setActiveTab: (container: string) => void; + setErrorMessage: ( + error: TErrorShort | string, + onClickButton?: () => void | null, + is_show_full_page?: boolean | null + ) => void; + setSideNotes: (notes: (JSX.Element | JSX.Element[])[] | null) => void; + willMountWithdraw: (verification_code: TClientStore['verification_code']['payment_withdraw']) => void; + recentTransactionOnMount: () => void; +}; + +const WithdrawalSideNote = ({ is_mobile, currency }: TWithdrawalSideNoteProps) => { const notes = [ { +}: TWithdrawalProps) => { React.useEffect(() => { if (!is_crypto_transactions_visible) { recentTransactionOnMount(); @@ -125,7 +179,7 @@ const Withdrawal = ({ if (is_withdrawal_locked || is_10k_withdrawal_limit_reached) { return ; } - if (!+balance) { + if (!Number(balance)) { return ( <> @@ -165,35 +219,7 @@ const Withdrawal = ({ ); }; -Withdrawal.propTypes = { - balance: PropTypes.string, - check10kLimit: PropTypes.func, - container: PropTypes.string, - crypto_transactions: PropTypes.array, - currency: PropTypes.string, - current_currency_type: PropTypes.string, - error: PropTypes.object, - iframe_url: PropTypes.string, - is_10k_withdrawal_limit_reached: PropTypes.bool, - is_cashier_locked: PropTypes.bool, - is_crypto: PropTypes.bool, - is_crypto_transactions_visible: PropTypes.bool, - is_switching: PropTypes.bool, - is_system_maintenance: PropTypes.bool, - is_virtual: PropTypes.bool, - is_withdraw_confirmed: PropTypes.bool, - is_withdrawal_locked: PropTypes.bool, - recentTransactionOnMount: PropTypes.func, - setActiveTab: PropTypes.func, - setErrorMessage: PropTypes.func, - setSideNotes: PropTypes.func, - tab_index: PropTypes.number, - verification_code: PropTypes.string, - verify_error: PropTypes.object, - willMountWithdraw: PropTypes.func, -}; - -export default connect(({ client, modules }) => ({ +export default connect(({ client, modules }: TRootStore) => ({ balance: client.balance, check10kLimit: modules.cashier.withdraw.check10kLimit, container: modules.cashier.withdraw.container, diff --git a/packages/cashier/src/types/stores/client-store.types.ts b/packages/cashier/src/types/stores/client-store.types.ts index 45e536f01fdf..14a4109e0dd9 100644 --- a/packages/cashier/src/types/stores/client-store.types.ts +++ b/packages/cashier/src/types/stores/client-store.types.ts @@ -24,6 +24,13 @@ export type TClientStore = { loginid?: string; residence: string; verification_code: { + payment_agent_withdraw: string; payment_withdraw: string; + request_email: string; + reset_password: string; + signup: string; + system_email_change: string; + trading_platform_dxtrade_password_reset: string; + trading_platform_mt5_password_reset: string; }; }; diff --git a/packages/components/src/components/checklist/checklist.jsx b/packages/components/src/components/checklist/checklist.jsx index fdfc1d9537fc..ef23f54dd091 100644 --- a/packages/components/src/components/checklist/checklist.jsx +++ b/packages/components/src/components/checklist/checklist.jsx @@ -17,7 +17,11 @@ const ItemStatus = ({ status, onClick, button_text }) => { case 'action': default: return ( -
+
);