hamid/65032/migrate-deposit-to-ts

packages/cashier/package.json

@@ -71,6 +71,7 @@
         "@babel/preset-env": "^7.12.11",
         "@babel/preset-react": "^7.16.7",
         "@testing-library/react": "^12.0.0",
+        "@types/qrcode.react": "^1.0.2",
         "babel-loader": "^8.1.0",
         "clean-webpack-plugin": "^3.0.0",
         "copy-webpack-plugin": "^9.0.1",

packages/cashier/src/pages/deposit/__tests__/deposit.spec.js → packages/cashier/src/pages/deposit/__tests__/deposit.spec.tsx

@@ -11,16 +11,42 @@ jest.mock('@deriv/components', () => ({
     ...jest.requireActual('@deriv/components'),
     Loading: () => <div>Loading</div>,
 }));
-jest.mock('Components/cashier-container/virtual', () => () => <div>Virtual</div>);
-jest.mock('Components/cashier-locked', () => () => <div>CashierLocked</div>);
-jest.mock('Components/funds-protection', () => () => <div>FundsProtection</div>);
-jest.mock('Components/crypto-transactions-history', () => () => <div>CryptoTransactionsHistory</div>);
-jest.mock('Components/error', () => () => <div>Error</div>);
-jest.mock('../crypto-deposit', () => () => <div>CryptoDeposit</div>);
-jest.mock('Components/cashier-container/real', () => () => <div>Real</div>);
-jest.mock('Components/cashier-onboarding/cashier-onboarding', () => () => <div>CashierOnboarding</div>);
-jest.mock('../crypto-deposit', () => () => <div>CryptoDeposit</div>);
-jest.mock('../deposit-locked', () => () => <div>DepositLocked</div>);
+jest.mock('Components/cashier-container/virtual', () => {
+    const CashierContainerVirtual = () => <div>Virtual</div>;
+    return CashierContainerVirtual;
+});
+jest.mock('Components/cashier-locked', () => {
+    const CashierLocked = () => <div>CashierLocked</div>;
+    return CashierLocked;
+});
+jest.mock('Components/funds-protection', () => {
+    const FundsProtection = () => <div>FundsProtection</div>;
+    return FundsProtection;
+});
+jest.mock('Components/crypto-transactions-history', () => {
+    const CryptoTransactionsHistory = () => <div>CryptoTransactionsHistory</div>;
+    return CryptoTransactionsHistory;
+});
+jest.mock('Components/error', () => {
+    const Error = () => <div>Error</div>;
+    return Error;
+});
+jest.mock('../crypto-deposit', () => {
+    const CryptoDeposit = () => <div>CryptoDeposit</div>;
+    return CryptoDeposit;
+});
+jest.mock('Components/cashier-container/real', () => {
+    const CashierContainerReal = () => <div>Real</div>;
+    return CashierContainerReal;
+});
+jest.mock('Components/cashier-onboarding/cashier-onboarding', () => {
+    const CashierOnboarding = () => <div>CashierOnboarding</div>;
+    return CashierOnboarding;
+});
+jest.mock('../deposit-locked', () => {
+    const DepositLocked = () => <div>DepositLocked</div>;
+    return DepositLocked;
+});
 
 describe('<Deposit />', () => {
     const props = {

packages/cashier/src/pages/deposit/crypto-deposit/__tests__/crypto-deposit.spec.js → packages/cashier/src/pages/deposit/crypto-deposit/__tests__/crypto-deposit.spec.tsx

@@ -22,9 +22,14 @@ jest.mock('@deriv/shared', () => ({
     isMobile: jest.fn(() => false),
 }));
 
-jest.mock('qrcode.react', () => () => <div>QRCode</div>);
-
-jest.mock('Components/recent-transaction', () => () => <div>RecentTransactions</div>);
+jest.mock('qrcode.react', () => {
+    const QrCode = () => <div>QRCode</div>;
+    return QrCode;
+});
+jest.mock('Components/recent-transaction', () => {
+    const RecentTransactions = () => <div>RecentTransactions</div>;
+    return RecentTransactions;
+});
 
 describe('<CryptoDeposit />', () => {
     let history;
@@ -70,8 +75,8 @@ describe('<CryptoDeposit />', () => {
         expect(props.pollApiForDepositAddress).toHaveBeenCalledTimes(2);
     });
 
-    it('should show proper messsages for BTC cryptocurrency', () => {
-        getCurrencyName.mockReturnValueOnce('Bitcoin');
+    it('should show proper messages for BTC cryptocurrency', () => {
+        (getCurrencyName as jest.Mock).mockReturnValueOnce('Bitcoin');
         renderWithRouter(<CryptoDeposit {...props} />);
 
         expect(screen.getByText('Send only Bitcoin (BTC) to this address.')).toBeInTheDocument();
@@ -87,8 +92,8 @@ describe('<CryptoDeposit />', () => {
         expect(screen.getByRole('link', { name: 'Try our Fiat onramp' })).toBeInTheDocument();
     });
 
-    it('should show proper messsages for ETH cryptocurrency', () => {
-        getCurrencyName.mockReturnValueOnce('Ethereum');
+    it('should show proper messages for ETH cryptocurrency', () => {
+        (getCurrencyName as jest.Mock).mockReturnValueOnce('Ethereum');
         renderWithRouter(<CryptoDeposit {...props} currency='ETH' />);
 
         expect(screen.getByText('Send only Ethereum (ETH) to this address.')).toBeInTheDocument();
@@ -203,8 +208,12 @@ describe('<CryptoDeposit />', () => {
     });
 
     it('should show "RecentTransactions" in Mobile mode', () => {
-        isMobile.mockReturnValue(true);
-        renderWithRouter(<CryptoDeposit {...props} />);
+        (isMobile as jest.Mock).mockReturnValue(true);
+        render(
+            <Router history={history}>
+                <CryptoDeposit {...props} />
+            </Router>
+        );
 
         expect(screen.getByText('RecentTransactions')).toBeInTheDocument();
     });

packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.jsx → packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.tsx

@@ -1,13 +1,24 @@
-import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import { Button, ButtonLink, Clipboard, Dropdown, Icon, Loading, Text } from '@deriv/components';
 import { localize, Localize } from '@deriv/translations';
 import { CryptoConfig, getCurrencyName, isCryptocurrency, isMobile } from '@deriv/shared';
 import QRCode from 'qrcode.react';
 import { connect } from 'Stores/connect';
+import { TRootStore, TClientStore, TCryptoTransactionDetails } from 'Types';
 import RecentTransaction from 'Components/recent-transaction';
 import './crypto-deposit.scss';
 
+type TCryptoDeposit = {
+    api_error: string;
+    crypto_transactions: Array<TCryptoTransactionDetails>;
+    currency: TClientStore['currency'];
+    deposit_address: string;
+    is_deposit_address_loading: boolean;
+    recentTransactionOnMount: () => void;
+    pollApiForDepositAddress: (poll: boolean) => void;
+    setIsDeposit: (is_deposit: boolean) => void;
+};
+
 const CryptoDeposit = ({
     api_error,
     currency,
@@ -17,7 +28,7 @@ const CryptoDeposit = ({
     recentTransactionOnMount,
     pollApiForDepositAddress,
     setIsDeposit,
-}) => {
+}: TCryptoDeposit) => {
     React.useEffect(() => {
         recentTransactionOnMount();
     }, [recentTransactionOnMount]);
@@ -39,11 +50,11 @@ const CryptoDeposit = ({
         { text: <Localize i18n_default_text='Ethereum (ETH)' />, value: 5 },
     ];
 
-    const [option_message, setOptionMessage] = useState('');
-    const [option_list_value, setOptionListValue] = useState(0);
-    const [qrcode_header, setQRCodeHeader] = useState('');
+    const [option_message, setOptionMessage] = useState<JSX.Element | string>('');
+    const [option_list_value, setOptionListValue] = useState<string | number>(0);
+    const [qrcode_header, setQRCodeHeader] = useState<JSX.Element | string>('');
 
-    const onChangeListOption = event => {
+    const onChangeListOption = (event: { target: { value: number | string } }) => {
         const token_ETH = 'ETH';
         const token_USDC_eUSDT = 'ERC20';
         let token = '';
@@ -245,18 +256,7 @@ const CryptoDeposit = ({
     );
 };
 
-CryptoDeposit.propTypes = {
-    api_error: PropTypes.string,
-    crypto_transactions: PropTypes.array,
-    currency: PropTypes.string,
-    deposit_address: PropTypes.string,
-    is_deposit_address_loading: PropTypes.bool,
-    recentTransactionOnMount: PropTypes.func,
-    pollApiForDepositAddress: PropTypes.func,
-    setIsDeposit: PropTypes.func,
-};
-
-export default connect(({ modules, client }) => ({
+export default connect(({ modules, client }: TRootStore) => ({
     api_error: modules.cashier.onramp.api_error,
     crypto_transactions: modules.cashier.transaction_history.crypto_transactions,
     currency: client.currency,

packages/cashier/src/pages/deposit/crypto-deposit/index.ts

@@ -0,0 +1,3 @@
+import CryptoDeposit from './crypto-deposit';
+
+export default CryptoDeposit;

packages/cashier/src/pages/deposit/deposit-locked/__tests__/deposit-locked.spec.js → packages/cashier/src/pages/deposit/deposit-locked/__tests__/deposit-locked.spec.tsx

@@ -132,11 +132,11 @@ describe('<DepositLocked />', () => {
             {
                 content: 'Check proof of identity document verification status',
                 status: 'action',
-                onClick: onClick,
+                onClick,
             },
         ];
-        const { container } = render(<Checklist className='cashier-locked__checklist' items={items} />);
-        const btn = container.querySelector('.dc-checklist__item-status--action');
+        render(<Checklist className='cashier-locked__checklist' items={items} />);
+        const btn = screen.getByTestId('dc-checklist__item-status--action');
 
         fireEvent.click(btn);
         expect(onClick).toHaveBeenCalled();

packages/cashier/src/pages/deposit/deposit-locked/deposit-locked.jsx → packages/cashier/src/pages/deposit/deposit-locked/deposit-locked.tsx

@@ -1,27 +1,39 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
 import { routes, WS } from '@deriv/shared';
 import { Icon, Checklist, StaticUrl, Text } from '@deriv/components';
 import { Localize, localize } from '@deriv/translations';
 import { connect } from 'Stores/connect';
+import { TRootStore, TClientStore } from 'Types';
 import CashierLocked from 'Components/cashier-locked';
 
+type TDepositLocked = {
+    account_status: TClientStore['account_status'];
+    is_financial_account: TClientStore['is_financial_account'];
+    is_financial_information_incomplete: TClientStore['is_financial_information_incomplete'];
+    is_tnc_needed: TClientStore['is_tnc_needed'];
+    is_trading_experience_incomplete: TClientStore['is_trading_experience_incomplete'];
+    onMount: () => void;
+    standpoint: TClientStore['standpoint'];
+};
+
 const DepositLocked = ({
     account_status,
-    is_tnc_needed,
+    is_financial_account,
     is_financial_information_incomplete,
+    is_tnc_needed,
     is_trading_experience_incomplete,
-    is_financial_account,
     onMount,
     standpoint,
-}) => {
+}: TDepositLocked) => {
     // handle authentication locked
-    const { identity, document, needs_verification } = account_status.authentication;
-    const is_poi_needed = needs_verification.includes('identity');
-    const is_poa_needed = needs_verification.includes('document');
-    const has_poi_submitted = identity.status !== 'none';
-    const has_poa_submitted = document.status !== 'none';
+    const identity = account_status?.authentication?.identity;
+    const document = account_status?.authentication?.document;
+    const needs_verification = account_status?.authentication?.needs_verification;
+    const is_poi_needed = needs_verification?.includes('identity');
+    const is_poa_needed = needs_verification?.includes('document');
+    const has_poi_submitted = identity?.status !== 'none';
+    const has_poa_submitted = document?.status !== 'none';
     const deposit_desc = standpoint.iom
         ? localize(
               'We were unable to verify your information automatically. To enable this function, you must complete the following:'
@@ -82,7 +94,7 @@ const DepositLocked = ({
             : []),
     ];
     return (
-        <React.Fragment>
+        <>
             {items.length ? (
                 <div className='cashier-locked'>
                     <Icon icon='IcCashierDepositLock' className='cashier-locked__icon' />
@@ -98,26 +110,16 @@ const DepositLocked = ({
             ) : (
                 <CashierLocked />
             )}
-        </React.Fragment>
+        </>
     );
 };
 
-DepositLocked.propTypes = {
-    account_status: PropTypes.object,
-    is_tnc_needed: PropTypes.bool,
-    is_financial_information_incomplete: PropTypes.bool,
-    is_trading_experience_incomplete: PropTypes.bool,
-    is_financial_account: PropTypes.bool,
-    onMount: PropTypes.func,
-    standpoint: PropTypes.object,
-};
-
-export default connect(({ client, modules }) => ({
+export default connect(({ client, modules }: TRootStore) => ({
     account_status: client.account_status,
-    is_tnc_needed: client.is_tnc_needed,
+    is_financial_account: client.is_financial_account,
     is_financial_information_incomplete: client.is_financial_information_incomplete,
+    is_tnc_needed: client.is_tnc_needed,
     is_trading_experience_incomplete: client.is_trading_experience_incomplete,
-    is_financial_account: client.is_financial_account,
     onMount: modules.cashier.deposit.onMountDeposit,
     standpoint: client.standpoint,
 }))(DepositLocked);

packages/cashier/src/pages/deposit/deposit-locked/index.ts

@@ -0,0 +1,3 @@
+import DepositLocked from './deposit-locked';
+
+export default DepositLocked;