george / rm72476 / account switching issue when using p2p/cash-deposit with crypto account

packages/cashier/src/components/account-prompt-dialog/__tests__/account-prompt-dialog.spec.js

@@ -15,17 +15,10 @@ jest.mock('@deriv/components', () => ({
 
 describe('<AccountPromptDialog />', () => {
     const props = {
-        accounts_list: [
-            {
-                balance: '10000.00',
-                currency: 'USD',
-                is_crypto: false,
-                is_dxtrade: false,
-                is_mt: false,
-                text: 'USD',
-                value: 'CR90000195',
-            },
-        ],
+        accounts: {
+            CR90000001: { is_virtual: 0, currency: 'USD' },
+            CR90000002: { is_virtual: 0, currency: 'BTC' },
+        },
         currency: 'USD',
         continueRoute: jest.fn(),
     };

packages/cashier/src/components/account-prompt-dialog/account-prompt-dialog.jsx

@@ -1,11 +1,12 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { localize, Localize } from '@deriv/translations';
 import { Dialog } from '@deriv/components';
+import { isCryptocurrency } from '@deriv/shared';
+import { localize, Localize } from '@deriv/translations';
 import { connect } from 'Stores/connect';
 
 const AccountPromptDialog = ({
-    accounts_list,
+    accounts,
     continueRoute,
     is_confirmed,
     last_location,
@@ -15,8 +16,15 @@ const AccountPromptDialog = ({
 }) => {
     React.useEffect(continueRoute, [is_confirmed, last_location, continueRoute]);
 
-    const non_crypto_accounts = accounts_list.filter(x => !x.is_crypto);
-    const non_crypto_currency = non_crypto_accounts.map(x => x.currency)[0];
+    const non_crypto_account_loginid = React.useMemo(
+        () =>
+            Object.entries(accounts).reduce((initial_value, [loginid, settings]) => {
+                return !settings.is_virtual && !isCryptocurrency(settings.currency) ? loginid : initial_value;
+            }, ''),
+        [accounts]
+    );
+
+    const non_crypto_currency = non_crypto_account_loginid && accounts[non_crypto_account_loginid].currency;
 
     return (
         <Dialog
@@ -39,7 +47,7 @@ const AccountPromptDialog = ({
 };
 
 AccountPromptDialog.propTypes = {
-    accounts_list: PropTypes.array,
+    accounts: PropTypes.object,
     continueRoute: PropTypes.func,
     is_confirmed: PropTypes.bool,
     last_location: PropTypes.string,
@@ -48,8 +56,8 @@ AccountPromptDialog.propTypes = {
     should_show: PropTypes.bool,
 };
 
-export default connect(({ modules }) => ({
-    accounts_list: modules.cashier.account_transfer.accounts_list,
+export default connect(({ modules, client }) => ({
+    accounts: client.accounts,
     continueRoute: modules.cashier.account_prompt_dialog.continueRoute,
     is_confirmed: modules.cashier.account_prompt_dialog.is_confirmed,
     last_location: modules.cashier.account_prompt_dialog.last_location,

packages/cashier/src/components/cashier-onboarding/__tests__/cashier-onboarding.spec.js

@@ -31,7 +31,7 @@ describe('<CashierOnboarding />', () => {
 
     it('should show the proper messages when <CashierOnboarding /> is rendered with fiat account', () => {
         const props = mockProps();
-        props.accounts_list = [{ is_crypto: false }];
+        props.accounts = { CR90000001: { is_virtual: 0, currency: 'USD' } };
         render(
             <CashierOnboarding
                 {...props}
@@ -67,7 +67,7 @@ describe('<CashierOnboarding />', () => {
 
     it('should show the proper message when <CashierOnboarding /> is rendered with crypto account', () => {
         const props = mockProps();
-        props.accounts_list = [{ is_crypto: true }];
+        props.accounts = { CR90000002: { is_virtual: 0, currency: 'BTC' } };
         render(
             <CashierOnboarding
                 {...props}
@@ -83,7 +83,7 @@ describe('<CashierOnboarding />', () => {
 
     it('should trigger proper callbacks when the client chooses "Deposit via bank wire, credit card, and e-wallet" section from his fiat account', () => {
         const props = mockProps();
-        props.accounts_list = [{ is_crypto: false }];
+        props.accounts = { CR90000001: { is_virtual: 0, currency: 'USD' } };
         const { container } = render(<CashierOnboarding {...props} currency='USD' />);
 
         const node_list = container.querySelectorAll('.cashier-onboarding-detail__div');
@@ -98,7 +98,7 @@ describe('<CashierOnboarding />', () => {
 
     it('should trigger proper callbacks when the client chooses "Deposit via bank wire, credit card, and e-wallet" section from his crypto account, not having the fiat account', () => {
         const props = mockProps();
-        props.accounts_list = [{ is_crypto: true }];
+        props.accounts = { CR90000002: { is_virtual: 0, currency: 'BTC' } };
         const { container } = render(
             <CashierOnboarding {...props} currency='BTC' available_crypto_currencies={['BTC', 'ETH']} />
         );
@@ -115,7 +115,10 @@ describe('<CashierOnboarding />', () => {
 
     it('should trigger proper callbacks when the client chooses "Deposit via bank wire, credit card, and e-wallet" section from his crypto account, having the fiat account', () => {
         const props = mockProps();
-        props.accounts_list = [{ is_crypto: true }, { is_crypto: false }];
+        props.accounts = {
+            CR90000001: { is_virtual: 0, currency: 'USD' },
+            CR90000002: { is_virtual: 0, currency: 'BTC' },
+        };
         const { container } = render(
             <CashierOnboarding {...props} currency='BTC' available_crypto_currencies={['BTC', 'ETH']} />
         );
@@ -132,7 +135,7 @@ describe('<CashierOnboarding />', () => {
 
     it('should trigger proper callbacks when the client chooses "Deposit cryptocurrencies" section from his fiat account, not having the crypto account', () => {
         const props = mockProps();
-        props.accounts_list = [{ is_crypto: false }];
+        props.accounts = { CR90000001: { is_virtual: 0, currency: 'USD' } };
         const { container } = render(<CashierOnboarding {...props} currency='USD' />);
 
         const node_list = container.querySelectorAll('.cashier-onboarding-detail__div');
@@ -147,7 +150,7 @@ describe('<CashierOnboarding />', () => {
 
     it('should trigger proper callbacks when the client chooses "Deposit cryptocurrencies" section from his crypto account', () => {
         const props = mockProps();
-        props.accounts_list = [{ is_crypto: true }];
+        props.accounts = { CR90000002: { is_virtual: 0, currency: 'BTC' } };
         const { container } = render(
             <CashierOnboarding {...props} available_crypto_currencies={['BTC', 'ETH']} currency='BTC' />
         );
@@ -165,7 +168,7 @@ describe('<CashierOnboarding />', () => {
 
     it('should trigger proper callbacks when the client chooses "Buy cryptocurrencies via fiat onramp" section from his fiat account, not having the crypto account', () => {
         const props = mockProps();
-        props.accounts_list = [{ is_crypto: false }];
+        props.accounts = { CR90000001: { is_virtual: 0, currency: 'USD' } };
         const { container } = render(<CashierOnboarding {...props} currency='USD' />);
 
         const node_list = container.querySelectorAll('.cashier-onboarding-detail__div');
@@ -180,7 +183,7 @@ describe('<CashierOnboarding />', () => {
 
     it('should trigger proper callbacks when the client chooses "Buy cryptocurrencies" section from his crypto account', () => {
         const props = mockProps();
-        props.accounts_list = [{ is_crypto: true }];
+        props.accounts = { CR90000002: { is_virtual: 0, currency: 'BTC' } };
         const { container } = render(
             <CashierOnboarding {...props} available_crypto_currencies={['BTC', 'ETH']} currency='BTC' />
         );
@@ -198,7 +201,10 @@ describe('<CashierOnboarding />', () => {
 
     it('should trigger proper callbacks when the client chooses "Deposit via payment agents" section', () => {
         const props = mockProps();
-        props.accounts_list = [{ is_crypto: false }, { is_crypto: true }];
+        props.accounts = {
+            CR90000001: { is_virtual: 0, currency: 'USD' },
+            CR90000002: { is_virtual: 0, currency: 'BTC' },
+        };
         const { container } = render(
             <CashierOnboarding {...props} currency='USD' is_payment_agent_visible_in_onboarding />
         );
@@ -219,7 +225,10 @@ describe('<CashierOnboarding />', () => {
     it('should trigger proper callbacks when the client chooses "Deposit with Deriv P2P" section from his fiat account', () => {
         const props = mockProps();
         const history = createBrowserHistory();
-        props.accounts_list = [{ is_crypto: false }, { is_crypto: true }];
+        props.accounts = {
+            CR90000001: { is_virtual: 0, currency: 'USD' },
+            CR90000002: { is_virtual: 0, currency: 'BTC' },
+        };
         const { container } = render(
             <Router history={history}>
                 <CashierOnboarding {...props} currency='USD' show_p2p_in_cashier_onboarding />
@@ -240,7 +249,10 @@ describe('<CashierOnboarding />', () => {
 
     it('should trigger proper callbacks when the client chooses "Deposit with Deriv P2P" section from his crypto account, already having the fiat account', () => {
         const props = mockProps();
-        props.accounts_list = [{ is_crypto: false }, { is_crypto: true }];
+        props.accounts = {
+            CR90000001: { is_virtual: 0, currency: 'USD' },
+            CR90000002: { is_virtual: 0, currency: 'BTC' },
+        };
         const { container } = render(
             <CashierOnboarding
                 {...props}
@@ -264,7 +276,7 @@ describe('<CashierOnboarding />', () => {
 
     it('should trigger proper callbacks when the client chooses "Deposit with Deriv P2P" section from his crypto account, not having the fiat account', () => {
         const props = mockProps();
-        props.accounts_list = [{ is_crypto: true }];
+        props.accounts = { CR90000002: { is_virtual: 0, currency: 'BTC' } };
         const { container } = render(
             <CashierOnboarding
                 {...props}
@@ -288,15 +300,15 @@ describe('<CashierOnboarding />', () => {
 
     it('should show the "Learn more about payment methods" message in Mobile mode', () => {
         const props = mockProps();
-        props.accounts_list = [{ is_crypto: false }];
+        props.accounts = { CR90000001: { is_virtual: 0, currency: 'USD' } };
         render(<CashierOnboarding {...props} is_mobile />);
 
         expect(screen.getByText('Learn more about payment methods')).toBeInTheDocument();
     });
 
     it('should trigger onClick callback when the user clicks "Learn more about payment methods" message in Mobile mode', () => {
         const props = mockProps();
-        props.accounts_list = [{ is_crypto: false }];
+        props.accounts = { CR90000001: { is_virtual: 0, currency: 'USD' } };
         window.open = jest.fn();
         const { container } = render(<CashierOnboarding {...props} is_mobile />);
         const link = container.querySelector('.cashier-onboarding-header-learn-more');
@@ -307,23 +319,23 @@ describe('<CashierOnboarding />', () => {
 
     it('should not show "Choose a way to fund your account" message if is_switching is true', () => {
         const props = mockProps();
-        props.accounts_list = [{ is_crypto: false }];
+        props.accounts = { CR90000001: { is_virtual: 0, currency: 'USD' } };
         render(<CashierOnboarding {...props} is_switching />);
 
         expect(screen.queryByText('Choose a way to fund your account')).not.toBeInTheDocument();
     });
 
     it('should not show "Choose a way to fund your account" message if accounts_list is an empty array', () => {
         const props = mockProps();
-        props.accounts_list = [];
+        props.accounts = [];
         render(<CashierOnboarding {...props} />);
 
         expect(screen.queryByText('Choose a way to fund your account')).not.toBeInTheDocument();
     });
 
     it('should not show "Choose a way to fund your account" message if is_landing_company_loaded is false', () => {
         const props = mockProps();
-        props.accounts_list = [{ is_crypto: false }];
+        props.accounts = { CR90000001: { is_virtual: 0, currency: 'USD' } };
         render(<CashierOnboarding {...props} is_landing_company_loaded={false} />);
 
         expect(screen.queryByText('Choose a way to fund your account')).not.toBeInTheDocument();
@@ -332,7 +344,10 @@ describe('<CashierOnboarding />', () => {
     it('should redirect to "routes.trade" when the component will unmount', () => {
         const props = mockProps();
         const history = createBrowserHistory();
-        props.accounts_list = [{ is_crypto: false }, { is_crypto: true }];
+        props.accounts = {
+            CR90000001: { is_virtual: 0, currency: 'USD' },
+            CR90000002: { is_virtual: 0, currency: 'BTC' },
+        };
         props.has_set_currency = false;
         const { unmount } = render(
             <Router history={history}>

packages/cashier/src/components/cashier-onboarding/cashier-onboarding.jsx

@@ -11,8 +11,8 @@ import CashierOnboardingSideNote from './cashier-onboarding-side-note.jsx';
 import SideNote from 'Components/side-note';
 
 const CashierOnboarding = ({
+    accounts,
     available_crypto_currencies,
-    accounts_list,
     can_change_fiat_currency,
     currency,
     has_set_currency,
@@ -37,8 +37,18 @@ const CashierOnboarding = ({
 }) => {
     const history = useHistory();
     const is_crypto = !!currency && isCryptocurrency(currency);
-    const has_crypto_account = accounts_list.some(x => x.is_crypto);
-    const has_fiat_account = accounts_list.some(x => !x.is_crypto);
+    const has_crypto_account = React.useMemo(
+        () => Object.values(accounts).some(acc_settings => isCryptocurrency(acc_settings.currency)),
+        [accounts]
+    );
+    const has_fiat_account = React.useMemo(
+        () =>
+            Object.values(accounts).some(
+                acc_settings => !acc_settings.is_virtual && !isCryptocurrency(acc_settings.currency)
+            ),
+        [accounts]
+    );
+
     const is_currency_banner_visible =
         (!is_crypto && !can_change_fiat_currency) || (is_crypto && available_crypto_currencies.length > 0);
 
@@ -58,14 +68,14 @@ const CashierOnboarding = ({
         if (
             typeof setSideNotes === 'function' &&
             !is_switching &&
-            accounts_list.length > 0 &&
+            Object.keys(accounts).length > 0 &&
             is_landing_company_loaded &&
             is_currency_banner_visible
         ) {
             setSideNotes([<CashierOnboardingSideNote key={0} is_crypto={is_crypto} />]);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [is_switching, accounts_list, is_landing_company_loaded]);
+    }, [is_switching, accounts, is_landing_company_loaded]);
 
     const openRealAccount = target => {
         openRealAccountSignup('choose');
@@ -139,7 +149,7 @@ const CashierOnboarding = ({
         return options;
     };
 
-    if (is_switching || accounts_list.length === 0 || !is_landing_company_loaded)
+    if (is_switching || Object.keys(accounts).length === 0 || !is_landing_company_loaded)
         return <Loading className='cashier-onboarding__loader' is_fullscreen />;
 
     return (
@@ -189,7 +199,7 @@ const CashierOnboarding = ({
 };
 
 CashierOnboarding.propTypes = {
-    accounts_list: PropTypes.array,
+    accounts: PropTypes.object,
     available_crypto_currencies: PropTypes.array,
     can_change_fiat_currency: PropTypes.bool,
     currency: PropTypes.string,
@@ -215,7 +225,7 @@ CashierOnboarding.propTypes = {
 };
 
 export default connect(({ client, common, modules, ui }) => ({
-    accounts_list: modules.cashier.account_transfer.accounts_list,
+    accounts: client.accounts,
     available_crypto_currencies: client.available_crypto_currencies,
     can_change_fiat_currency: client.can_change_fiat_currency,
     currency: client.currency,

packages/cashier/src/stores/__tests__/account-prompt-dialog-store.spec.js

@@ -8,17 +8,21 @@ describe('AccountPromptDialogStore', () => {
             routeTo: jest.fn(),
         },
         client: {
+            accounts: {
+                CR90000001: {
+                    is_virtual: 0,
+                    currency: 'USD',
+                },
+                CR90000002: {
+                    is_virtual: 0,
+                    currency: 'BTC',
+                },
+            },
             currency: 'BTC',
             switchAccount: jest.fn(),
         },
         modules: {
             cashier: {
-                account_transfer: {
-                    accounts_list: [
-                        { currency: 'USD', is_crypto: false, text: 'USD', value: 'CR90000001' },
-                        { currency: 'BTC', is_crypto: true, text: 'BTC', value: 'CR90000002' },
-                    ],
-                },
                 general_store: {
                     setIsDeposit: jest.fn(),
                 },

packages/cashier/src/stores/account-prompt-dialog-store.js

@@ -32,23 +32,28 @@ export default class AccountPromptDialogStore {
 
     @action.bound
     async onConfirm() {
-        const { client, modules } = this.root_store;
-        const { accounts_list } = modules.cashier.account_transfer;
+        const { client } = this.root_store;
 
         this.should_show = false;
         this.is_confirmed = true;
 
-        const has_fiat_account = accounts_list.some(x => !x.is_crypto);
+        const has_fiat_account = Object.values(client.accounts).some(
+            acc_settings => !acc_settings.is_virtual && !isCryptocurrency(acc_settings.currency)
+        );
         if (isCryptocurrency(client?.currency) && has_fiat_account) await this.doSwitch();
     }
 
     async doSwitch() {
         const { client, modules } = this.root_store;
-        const { account_transfer, general_store } = modules.cashier;
+        const { general_store } = modules.cashier;
 
-        const non_crypto_accounts = account_transfer.accounts_list.filter(x => !x.is_crypto);
-        const loginid = non_crypto_accounts.map(x => x.value)[0];
-        await client.switchAccount(loginid);
+        const non_crypto_account_loginid = Object.entries(client.accounts).reduce(
+            (initial_value, [loginid, settings]) => {
+                return !settings.is_virtual && !isCryptocurrency(settings.currency) ? loginid : initial_value;
+            },
+            ''
+        );
+        await client.switchAccount(non_crypto_account_loginid);
 
         if (this.current_location === 'deposit') {
             general_store.setIsDeposit(true);