Merge pull request #163 from rupato-deriv/Rupato/Fix--account-switche…

…r-issues

Rupato/fix  account switcher issues

src/components/error-component/error-component.tsx

@@ -23,15 +23,12 @@ const ErrorComponent = ({
     should_clear_error_on_click,
     setError,
     redirect_to = standalone_routes.trade,
-    should_show_refresh = true,
     should_redirect = true,
 }: Partial<TErrorComponent>) => {
-    const refresh_message = should_show_refresh ? localize('Please refresh this page to continue.') : '';
-
     return (
         <PageErrorContainer
             error_header={header ?? ''}
-            error_messages={message ? [message, refresh_message] : []}
+            error_messages={message ? [message, ''] : []}
             redirect_urls={[redirect_to]}
             redirect_labels={(!redirect_label && []) || [redirect_label || localize('Refresh')]}
             buttonOnClick={redirectOnClick || (() => window.location.reload())}

src/components/layout/header/common/account-swticher-footer.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import classNames from 'classnames';
+import RectangleSkeleton from '@/components/loader/rectangle-skeleton';
+import { standalone_routes } from '@/components/shared';
+import Button from '@/components/shared_ui/button';
+import Text from '@/components/shared_ui/text';
+import { LegacyLogout1pxIcon } from '@deriv/quill-icons';
+import { Localize, localize } from '@deriv-com/translations';
+import { AccountSwitcher as UIAccountSwitcher } from '@deriv-com/ui';
+import { TAccountSwitcherFooter } from './types';
+import { AccountSwitcherDivider } from './utils';
+
+const AccountSwitcherFooter = ({ oAuthLogout, loginid, is_logging_out }: TAccountSwitcherFooter) => {
+    const show_manage_button = loginid?.includes('CR') || loginid?.includes('MF');
+    return (
+        <div className=''>
+            <UIAccountSwitcher.TradersHubLink href={standalone_routes.traders_hub}>
+                {localize(`Looking for CFD accounts? Go to Trader's Hub`)}
+            </UIAccountSwitcher.TradersHubLink>
+            <AccountSwitcherDivider />
+            <div
+                className={classNames('account-switcher-footer__actions', {
+                    'account-switcher-footer__actions--hide-manage-button': !show_manage_button,
+                })}
+            >
+                {show_manage_button && (
+                    <Button
+                        id='manage-button'
+                        className='manage-button'
+                        onClick={() => location.replace('https://app.deriv.com')}
+                    >
+                        <Localize i18n_default_text='Manage accounts' />
+                    </Button>
+                )}
+                <UIAccountSwitcher.Footer>
+                    {is_logging_out ? (
+                        <div className='deriv-account-switcher__logout--loader'>
+                            <RectangleSkeleton width='120px' height='12px' />
+                        </div>
+                    ) : (
+                        <div id='dt_logout_button' className='deriv-account-switcher__logout' onClick={oAuthLogout}>
+                            <Text
+                                color='prominent'
+                                size='xs'
+                                align='left'
+                                className='deriv-account-switcher__logout-text'
+                            >
+                                {localize('Log out')}
+                            </Text>
+                            <LegacyLogout1pxIcon
+                                iconSize='xs'
+                                fill='var(--text-general)'
+                                className='icon-general-fill-path'
+                            />
+                        </div>
+                    )}
+                </UIAccountSwitcher.Footer>
+            </div>
+        </div>
+    );
+};
+
+export default AccountSwitcherFooter;

src/components/layout/header/common/demo-accounts.tsx

@@ -0,0 +1,60 @@
+import clsx from 'clsx';
+import { api_base } from '@/external/bot-skeleton';
+import { localize } from '@deriv-com/translations';
+import { AccountSwitcher as UIAccountSwitcher } from '@deriv-com/ui';
+import AccountSwitcherFooter from './account-swticher-footer';
+import { TDemoAccounts } from './types';
+import { AccountSwitcherDivider, convertCommaValue } from './utils';
+
+const DemoAccounts = ({
+    tabs_labels,
+    modifiedVRTCRAccountList,
+    switchAccount,
+    isVirtual,
+    activeLoginId,
+    oAuthLogout,
+    is_logging_out,
+}: TDemoAccounts) => {
+    return (
+        <>
+            <UIAccountSwitcher.AccountsPanel
+                isOpen
+                title={localize('Deriv account')}
+                className='account-switcher-panel'
+                key={tabs_labels.demo.toLowerCase()}
+            >
+                {modifiedVRTCRAccountList &&
+                    modifiedVRTCRAccountList.map(account => (
+                        <span
+                            className={clsx('account-switcher__item', {
+                                'account-switcher__item--disabled': account.is_disabled,
+                            })}
+                            key={account.loginid}
+                        >
+                            <UIAccountSwitcher.AccountsItem
+                                account={account}
+                                onSelectAccount={() => {
+                                    if (!account.is_disabled) switchAccount(account.loginid);
+                                }}
+                                onResetBalance={
+                                    isVirtual &&
+                                    activeLoginId === account.loginid &&
+                                    convertCommaValue(account.balance) !== 10000
+                                        ? () => {
+                                              api_base?.api?.send({
+                                                  topup_virtual: 1,
+                                              });
+                                          }
+                                        : undefined
+                                }
+                            />
+                        </span>
+                    ))}
+            </UIAccountSwitcher.AccountsPanel>
+            <AccountSwitcherDivider />
+            <AccountSwitcherFooter loginid={activeLoginId} oAuthLogout={oAuthLogout} is_logging_out={is_logging_out} />
+        </>
+    );
+};
+
+export default DemoAccounts;

src/components/layout/header/common/eu-accounts.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import clsx from 'clsx';
+import { localize } from '@deriv-com/translations';
+import { AccountSwitcher as UIAccountSwitcher } from '@deriv-com/ui';
+import { TEuAccounts } from './types';
+
+const EuAccounts = ({
+    isVirtual,
+    tabs_labels,
+    modifiedMFAccountList,
+    switchAccount,
+    is_low_risk_country,
+}: TEuAccounts) => {
+    const account_switcher_title_eu =
+        modifiedMFAccountList?.length === 0 || !is_low_risk_country
+            ? localize('Deriv accounts')
+            : localize('Eu Deriv accounts');
+    return (
+        <UIAccountSwitcher.AccountsPanel
+            isOpen
+            title={account_switcher_title_eu}
+            className='account-switcher-panel'
+            key={!isVirtual ? tabs_labels.demo.toLowerCase() : tabs_labels.real.toLowerCase()}
+        >
+            {modifiedMFAccountList.map(account => {
+                account.currencyLabel = localize('Multipliers');
+                return (
+                    <span
+                        className={clsx('account-switcher__item', {
+                            'account-switcher__item--disabled': account.is_disabled,
+                        })}
+                        key={account.loginid}
+                    >
+                        <UIAccountSwitcher.AccountsItem
+                            account={account}
+                            onSelectAccount={() => {
+                                if (!account.is_disabled) switchAccount(account.loginid);
+                            }}
+                        />
+                    </span>
+                );
+            })}
+        </UIAccountSwitcher.AccountsPanel>
+    );
+};
+
+export default EuAccounts;

src/components/layout/header/common/no-non-eu-accounts.tsx

@@ -0,0 +1,33 @@
+import { standalone_routes } from '@/components/shared';
+import { Localize, localize } from '@deriv-com/translations';
+import { AccountSwitcher as UIAccountSwitcher, Button } from '@deriv-com/ui';
+import { TNoNonEuAccounts } from './types';
+import { AccountSwitcherDivider, no_account } from './utils';
+
+const NoNonEuAccounts = ({ isVirtual, tabs_labels, is_low_risk_country }: TNoNonEuAccounts) => {
+    if (!is_low_risk_country) {
+        return null;
+    }
+    return (
+        <UIAccountSwitcher.AccountsPanel
+            isOpen
+            title={localize('Non-Eu Deriv account')}
+            className='account-switcher-panel'
+            key={!isVirtual ? tabs_labels?.demo?.toLowerCase() : tabs_labels?.real?.toLowerCase()}
+        >
+            <div className='account-switcher-panel__no-eu-accounts'>
+                <UIAccountSwitcher.AccountsItem account={no_account} onSelectAccount={() => {}} />
+                <AccountSwitcherDivider />
+                <Button
+                    id='add-button'
+                    className='add-button'
+                    onClick={() => location.replace(standalone_routes.traders_hub)}
+                >
+                    <Localize i18n_default_text='Add' />
+                </Button>
+            </div>
+        </UIAccountSwitcher.AccountsPanel>
+    );
+};
+
+export default NoNonEuAccounts;

src/components/layout/header/common/non-eu-accounts.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import clsx from 'clsx';
+import { localize } from '@deriv-com/translations';
+import { AccountSwitcher as UIAccountSwitcher } from '@deriv-com/ui';
+import { TNonEUAccounts } from './types';
+
+const NonEUAccounts = ({
+    isVirtual,
+    tabs_labels,
+    modifiedCRAccountList,
+    modifiedMFAccountList,
+    is_low_risk_country,
+    switchAccount,
+}: TNonEUAccounts) => {
+    if (!is_low_risk_country && modifiedCRAccountList && modifiedCRAccountList?.length === 0) {
+        return null;
+    }
+
+    const account_switcher_title_non_eu =
+        modifiedMFAccountList?.length === 0 ? localize('Deriv accounts') : localize('Non-Eu Deriv account');
+    return (
+        <>
+            <UIAccountSwitcher.AccountsPanel
+                isOpen
+                title={account_switcher_title_non_eu}
+                className='account-switcher-panel'
+                style={{ maxHeight: '220px' }}
+                key={!isVirtual ? tabs_labels.demo.toLowerCase() : tabs_labels?.real.toLowerCase()}
+            >
+                {modifiedCRAccountList.map(account => (
+                    <span
+                        className={clsx('account-switcher__item', {
+                            'account-switcher__item--disabled': account.is_disabled,
+                        })}
+                        key={account.loginid}
+                    >
+                        <UIAccountSwitcher.AccountsItem
+                            account={account}
+                            onSelectAccount={() => {
+                                if (!account.is_disabled) switchAccount(account.loginid);
+                            }}
+                        />
+                    </span>
+                ))}
+            </UIAccountSwitcher.AccountsPanel>
+        </>
+    );
+};
+
+export default NonEUAccounts;

src/components/layout/header/common/real-accounts.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import AccountSwitcherFooter from './account-swticher-footer';
+import EuAccounts from './eu-accounts';
+import NoNonEuAccounts from './no-non-eu-accounts';
+import NonEUAccounts from './non-eu-accounts';
+import { TRealAccounts } from './types';
+import { AccountSwitcherDivider } from './utils';
+
+const RealAccounts = ({
+    modifiedCRAccountList,
+    modifiedMFAccountList,
+    switchAccount,
+    isVirtual,
+    tabs_labels,
+    is_low_risk_country,
+    oAuthLogout,
+    loginid,
+    is_logging_out,
+}: TRealAccounts) => {
+    const hasNonEuAccounts = modifiedCRAccountList && modifiedCRAccountList?.length > 0;
+    const hasEuAccounts = modifiedMFAccountList && modifiedMFAccountList?.length > 0;
+    return (
+        <>
+            {hasNonEuAccounts ? (
+                <>
+                    <NonEUAccounts
+                        modifiedCRAccountList={modifiedCRAccountList}
+                        modifiedMFAccountList={modifiedMFAccountList}
+                        switchAccount={switchAccount}
+                        isVirtual={isVirtual}
+                        tabs_labels={tabs_labels}
+                        is_low_risk_country={is_low_risk_country}
+                    />
+                    <AccountSwitcherDivider />
+                </>
+            ) : (
+                <>
+                    <NoNonEuAccounts
+                        is_low_risk_country={is_low_risk_country}
+                        isVirtual={isVirtual}
+                        tabs_labels={tabs_labels}
+                    />
+                    <AccountSwitcherDivider />
+                </>
+            )}
+            {hasEuAccounts && (
+                <>
+                    <EuAccounts
+                        modifiedMFAccountList={modifiedMFAccountList}
+                        switchAccount={switchAccount}
+                        isVirtual={isVirtual}
+                        tabs_labels={tabs_labels}
+                        is_low_risk_country={is_low_risk_country}
+                    />
+                    <AccountSwitcherDivider />
+                </>
+            )}
+            <AccountSwitcherFooter oAuthLogout={oAuthLogout} loginid={loginid} is_logging_out={is_logging_out} />
+        </>
+    );
+};
+
+export default RealAccounts;