fix(wallets): 🚑 fix platform status badge

deriv-com · Oct 17, 2024 · d87b447 · d87b447
1 parent 17cdf1a
commit d87b447
Show file tree

Hide file tree

Showing 7 changed files with 114 additions and 89 deletions.
diff --git a/...es/wallets/src/features/cashier/modules/Transfer/components/TransferForm/TransferForm.tsx b/...es/wallets/src/features/cashier/modules/Transfer/components/TransferForm/TransferForm.tsx
@@ -2,17 +2,16 @@ import React, { useCallback, useRef } from 'react';
 import { Formik } from 'formik';
 import { Localize } from '@deriv-com/translations';
 import { Button, Loader, useDevice } from '@deriv-com/ui';
-import { MT5_ACCOUNT_STATUS, TRADING_PLATFORM_STATUS } from '../../../../../cfd/constants';
 import { useTransfer } from '../../provider';
-import type { TAccount, TInitialTransferFormValues } from '../../types';
+import type { TInitialTransferFormValues } from '../../types';
 import { TransferFormAmountInput } from '../TransferFormAmountInput';
 import { TransferFormDropdown } from '../TransferFormDropdown';
 import { TransferMessages } from '../TransferMessages';
 import './TransferForm.scss';
 
 const TransferForm = () => {
     const { isDesktop } = useDevice();
-    const { activeWallet, isLoading, requestTransferBetweenAccounts } = useTransfer();
+    const { activeWallet, hasPlatformStatus, isLoading, requestTransferBetweenAccounts } = useTransfer();
     const mobileAccountsListRef = useRef<HTMLDivElement | null>(null);
 
     const initialValues: TInitialTransferFormValues = {
@@ -29,54 +28,51 @@ const TransferForm = () => {
         [requestTransferBetweenAccounts]
     );
 
-    const isAccountUnavailable = (account: TAccount) =>
-        account?.status === TRADING_PLATFORM_STATUS.UNAVAILABLE ||
-        account?.status === MT5_ACCOUNT_STATUS.UNDER_MAINTENANCE;
-
-    const hasPlatformStatus = (values: TInitialTransferFormValues) =>
-        isAccountUnavailable(values.fromAccount) || isAccountUnavailable(values.toAccount);
     if (isLoading) return <Loader />;
 
     return (
         <div className='wallets-transfer'>
             <Formik initialValues={initialValues} onSubmit={onSubmit}>
-                {({ handleSubmit, values }) => (
-                    <form className='wallets-transfer__form' onSubmit={handleSubmit}>
-                        <div className='wallets-transfer__fields'>
-                            <div className='wallets-transfer__fields-section'>
-                                <TransferFormAmountInput fieldName='fromAmount' />
-                                <TransferFormDropdown
-                                    fieldName='fromAccount'
-                                    mobileAccountsListRef={mobileAccountsListRef}
-                                />
+                {({ handleSubmit, values }) => {
+                    const { fromAccount, fromAmount, isError, toAccount, toAmount } = values;
+                    return (
+                        <form className='wallets-transfer__form' onSubmit={handleSubmit}>
+                            <div className='wallets-transfer__fields'>
+                                <div className='wallets-transfer__fields-section'>
+                                    <TransferFormAmountInput fieldName='fromAmount' />
+                                    <TransferFormDropdown
+                                        fieldName='fromAccount'
+                                        mobileAccountsListRef={mobileAccountsListRef}
+                                    />
+                                </div>
+                                <TransferMessages />
+                                <div className='wallets-transfer__fields-section'>
+                                    <TransferFormAmountInput fieldName='toAmount' />
+                                    <TransferFormDropdown
+                                        fieldName='toAccount'
+                                        mobileAccountsListRef={mobileAccountsListRef}
+                                    />
+                                </div>
                             </div>
-                            <TransferMessages />
-                            <div className='wallets-transfer__fields-section'>
-                                <TransferFormAmountInput fieldName='toAmount' />
-                                <TransferFormDropdown
-                                    fieldName='toAccount'
-                                    mobileAccountsListRef={mobileAccountsListRef}
-                                />
+                            <div className='wallets-transfer__submit-button' data-testid='dt_transfer_form_submit_btn'>
+                                <Button
+                                    borderWidth='sm'
+                                    disabled={
+                                        !fromAmount ||
+                                        !toAmount ||
+                                        isError ||
+                                        [fromAccount, toAccount].some(hasPlatformStatus)
+                                    }
+                                    size={isDesktop ? 'lg' : 'md'}
+                                    textSize={isDesktop ? 'md' : 'sm'}
+                                    type='submit'
+                                >
+                                    <Localize i18n_default_text='Transfer' />
+                                </Button>
                             </div>
-                        </div>
-                        <div className='wallets-transfer__submit-button' data-testid='dt_transfer_form_submit_btn'>
-                            <Button
-                                borderWidth='sm'
-                                disabled={
-                                    !values.fromAmount ||
-                                    !values.toAmount ||
-                                    values.isError ||
-                                    hasPlatformStatus(values)
-                                }
-                                size={isDesktop ? 'lg' : 'md'}
-                                textSize={isDesktop ? 'md' : 'sm'}
-                                type='submit'
-                            >
-                                <Localize i18n_default_text='Transfer' />
-                            </Button>
-                        </div>
-                    </form>
-                )}
+                        </form>
+                    );
+                }}
             </Formik>
             {/* Portal for accounts list in mobile view */}
             <div className='wallets-transfer__mobile-accounts-list' ref={mobileAccountsListRef} />

diff --git a/...s/cashier/modules/Transfer/components/TransferFormAccountCard/TransferFormAccountCard.tsx b/...s/cashier/modules/Transfer/components/TransferFormAccountCard/TransferFormAccountCard.tsx
@@ -5,23 +5,20 @@ import { Text, useDevice } from '@deriv-com/ui';
 import { WalletCurrencyCard, WalletListCardBadge, WalletMarketCurrencyIcon } from '../../../../../../components';
 import { TPlatforms } from '../../../../../../types';
 import { PlatformStatusBadge } from '../../../../../cfd/components/PlatformStatusBadge';
-import { TRADING_PLATFORM_STATUS } from '../../../../../cfd/constants';
 import type { TAccount } from '../../types';
 import './TransferFormAccountCard.scss';
 
 type TProps = {
     account?: TAccount;
+    hasPlatformStatus: (account: TAccount) => boolean;
     type?: 'input' | 'modal';
 };
 
-const TransferFormAccountCard: React.FC<TProps> = ({ account, type = 'modal' }) => {
+const TransferFormAccountCard: React.FC<TProps> = ({ account, hasPlatformStatus, type = 'modal' }) => {
     const { isDesktop } = useDevice();
     const isInput = type === 'input';
     const isModal = type === 'modal';
 
-    const hasPlatformStatus =
-        account?.status === TRADING_PLATFORM_STATUS.UNAVAILABLE || TRADING_PLATFORM_STATUS.MAINTENANCE;
-
     return (
         <div
             className={classNames('wallets-transfer-form-account-card', {
@@ -55,24 +52,25 @@ const TransferFormAccountCard: React.FC<TProps> = ({ account, type = 'modal' })
                 <Text as='p' size={isInput ? '2xs' : 'sm'} weight='bold'>
                     {account?.accountName}
                 </Text>
-                <Text size={isInput ? '2xs' : 'xs'}>
-                    <Localize
-                        i18n_default_text='Balance: {{balance}}'
-                        values={{
-                            balance: account?.displayBalance,
-                        }}
+                {!hasPlatformStatus(account) && (
+                    <Text size={isInput ? '2xs' : 'xs'}>
+                        <Localize
+                            i18n_default_text='Balance: {{balance}}'
+                            values={{
+                                balance: account?.displayBalance,
+                            }}
+                        />
+                    </Text>
+                )}
+                {isModal && hasPlatformStatus?.(account) && (
+                    <PlatformStatusBadge
+                        badgeSize='sm'
+                        cashierAccount={account}
+                        className='wallets-transfer-form-account-card--badge'
                     />
-                </Text>
+                )}
             </div>
 
-            {account?.status && hasPlatformStatus && (
-                <PlatformStatusBadge
-                    badgeSize='sm'
-                    cashierAccount={account}
-                    className='wallets-transfer-form-account-card--badge'
-                />
-            )}
-
             {isModal && !!account?.demo_account && (
                 <div className='wallets-transfer-form-account-card__modal-badge'>
                     <WalletListCardBadge />

diff --git a/...modules/Transfer/components/TransferFormAccountSelection/TransferFormAccountSelection.tsx b/...modules/Transfer/components/TransferFormAccountSelection/TransferFormAccountSelection.tsx
@@ -12,6 +12,7 @@ type TProps = {
     accountsList: TAccountsList;
     activeWallet: TAccount;
     fromAccount?: TAccount;
+    hasPlatformStatus: (account: TAccount) => boolean;
     isFromAccountDropdown: boolean;
     label: string;
     onSelect: (value?: TAccount) => void;
@@ -30,6 +31,7 @@ const TransferFormAccountSelection: React.FC<TProps> = ({
     accountsList,
     activeWallet,
     fromAccount,
+    hasPlatformStatus,
     isFromAccountDropdown,
     label,
     onSelect,
@@ -126,7 +128,10 @@ const TransferFormAccountSelection: React.FC<TProps> = ({
                                                 modal.hide();
                                             }}
                                         >
-                                            <TransferFormAccountCard account={account} />
+                                            <TransferFormAccountCard
+                                                account={account}
+                                                hasPlatformStatus={hasPlatformStatus}
+                                            />
                                         </button>
                                     ))}
                                 </div>

diff --git a/...s/cashier/modules/Transfer/components/TransferFormAmountInput/TransferFormAmountInput.tsx b/...s/cashier/modules/Transfer/components/TransferFormAmountInput/TransferFormAmountInput.tsx
@@ -22,8 +22,14 @@ const TransferFormAmountInput: React.FC<TProps> = ({ fieldName }) => {
     const { fromAccount, fromAmount, toAccount, toAmount } = values;
     const { localize } = useTranslations();
 
-    const { USDExchangeRates, activeWallet, activeWalletExchangeRates, refetchAccountLimits, refetchExchangeRates } =
-        useTransfer();
+    const {
+        USDExchangeRates,
+        activeWallet,
+        activeWalletExchangeRates,
+        hasPlatformStatus,
+        refetchAccountLimits,
+        refetchExchangeRates,
+    } = useTransfer();
 
     const refetchExchangeRatesAndLimits = useCallback(() => {
         refetchAccountLimits();
@@ -35,7 +41,8 @@ const TransferFormAmountInput: React.FC<TProps> = ({ fieldName }) => {
     const hasFunds = Number(fromAccount?.balance) > 0;
     const isFromAmountField = fieldName === 'fromAmount';
     const isSameCurrency = fromAccount?.currency === toAccount?.currency;
-    const isAmountInputDisabled = !hasFunds || (fieldName === 'toAmount' && !toAccount);
+    const isAmountInputDisabled =
+        !hasFunds || (fieldName === 'toAmount' && !toAccount) || [fromAccount, toAccount].some(hasPlatformStatus);
     const isAmountFieldActive = fieldName === values.activeAmountFieldName;
     const isTimerVisible = !isFromAmountField && toAccount && !isSameCurrency && fromAmount > 0 && toAmount > 0;
     const prevTimerVisible = useRef(isTimerVisible);

diff --git a/...eatures/cashier/modules/Transfer/components/TransferFormDropdown/TransferFormDropdown.tsx b/...eatures/cashier/modules/Transfer/components/TransferFormDropdown/TransferFormDropdown.tsx
@@ -1,13 +1,11 @@
 import React, { RefObject, useCallback, useEffect, useMemo } from 'react';
 import { useFormikContext } from 'formik';
 import { useHistory } from 'react-router-dom';
-import { useTradingPlatformStatus } from '@deriv/api-v2';
 import { LegacyChevronDown2pxIcon } from '@deriv/quill-icons';
 import { Localize, useTranslations } from '@deriv-com/translations';
 import { Text, useDevice } from '@deriv-com/ui';
 import { WalletListCardBadge } from '../../../../../../components';
 import { useModal } from '../../../../../../components/ModalProvider';
-import { TRADING_PLATFORM_STATUS } from '../../../../../cfd/constants';
 import { useTransfer } from '../../provider';
 import { TInitialTransferFormValues, TToAccount } from '../../types';
 import { TransferFormAccountCard } from '../TransferFormAccountCard';
@@ -21,12 +19,11 @@ type TProps = {
 
 const TransferFormDropdown: React.FC<TProps> = ({ fieldName, mobileAccountsListRef }) => {
     const { setValues, values } = useFormikContext<TInitialTransferFormValues>();
-    const { accounts, activeWallet } = useTransfer();
+    const { accounts, activeWallet, hasPlatformStatus } = useTransfer();
     const { localize } = useTranslations();
     const { fromAccount, toAccount } = values;
     const { isDesktop } = useDevice();
     const modal = useModal();
-    const { getPlatformStatus } = useTradingPlatformStatus();
 
     const isFromAccountDropdown = fieldName === 'fromAccount';
 
@@ -58,12 +55,6 @@ const TransferFormDropdown: React.FC<TProps> = ({ fieldName, mobileAccountsListR
     const shouldDefaultUSDWallet =
         location.pathname === '/wallet/account-transfer' ? location.state?.shouldSelectDefaultWallet : false;
 
-    const platformStatus = getPlatformStatus(selectedAccount?.account_type ?? '');
-
-    const hasPlatformStatus =
-        selectedAccount?.status === TRADING_PLATFORM_STATUS.UNAVAILABLE ||
-        platformStatus === TRADING_PLATFORM_STATUS.MAINTENANCE;
-
     const toDefaultAccount = useMemo(
         () => toAccountList.walletAccounts.find(wallet => wallet.currency === 'USD'),
         [toAccountList.walletAccounts]
@@ -128,6 +119,7 @@ const TransferFormDropdown: React.FC<TProps> = ({ fieldName, mobileAccountsListR
                         accountsList={accountsList}
                         activeWallet={activeWallet}
                         fromAccount={fromAccount}
+                        hasPlatformStatus={hasPlatformStatus}
                         isFromAccountDropdown={isFromAccountDropdown}
                         label={label}
                         onSelect={handleSelect}
@@ -149,7 +141,11 @@ const TransferFormDropdown: React.FC<TProps> = ({ fieldName, mobileAccountsListR
                 </div>
 
                 {selectedAccount ? (
-                    <TransferFormAccountCard account={selectedAccount} type='input' />
+                    <TransferFormAccountCard
+                        account={selectedAccount}
+                        hasPlatformStatus={hasPlatformStatus}
+                        type='input'
+                    />
                 ) : (
                     <div className='wallets-transfer-form-dropdown__select-account-cta'>
                         <Text size='sm' weight='bold'>
@@ -170,12 +166,7 @@ const TransferFormDropdown: React.FC<TProps> = ({ fieldName, mobileAccountsListR
                             <WalletListCardBadge />
                         </div>
                     ) : null}
-                    {!hasPlatformStatus && (
-                        <LegacyChevronDown2pxIcon
-                            className='wallets-transfer-form-dropdown__icon-dropdown'
-                            iconSize='xs'
-                        />
-                    )}
+                    <LegacyChevronDown2pxIcon className='wallets-transfer-form-dropdown__icon-dropdown' iconSize='xs' />
                 </>
             )}
         </button>

diff --git a/packages/wallets/src/features/cashier/modules/Transfer/provider/TransferProvider.tsx b/packages/wallets/src/features/cashier/modules/Transfer/provider/TransferProvider.tsx
@@ -1,8 +1,14 @@
 import React, { createContext, useCallback, useContext, useEffect, useState } from 'react';
-import { useAccountLimits, useGetExchangeRate, useTransferBetweenAccounts } from '@deriv/api-v2';
+import {
+    useAccountLimits,
+    useGetExchangeRate,
+    useTradingPlatformStatus,
+    useTransferBetweenAccounts,
+} from '@deriv/api-v2';
 import type { THooks } from '../../../../../types';
+import { MT5_ACCOUNT_STATUS, TRADING_PLATFORM_STATUS } from '../../../../cfd/constants';
 import { useExtendedTransferAccountProperties, useSortedTransferAccounts } from '../hooks';
-import type { TInitialTransferFormValues } from '../types';
+import type { TAccount, TInitialTransferFormValues } from '../types';
 
 type TReceipt = {
     feeAmount?: string;
@@ -19,6 +25,7 @@ export type TTransferContext = {
     activeWallet: ReturnType<typeof useExtendedTransferAccountProperties>['activeWallet'];
     activeWalletExchangeRates?: THooks.ExchangeRate;
     error: ReturnType<typeof useTransferBetweenAccounts>['error'];
+    hasPlatformStatus: (account: TAccount) => boolean;
     isLoading: boolean;
     receipt?: TReceipt;
     refetchAccountLimits: ReturnType<typeof useAccountLimits>['refetch'];
@@ -47,9 +54,29 @@ const TransferProvider: React.FC<React.PropsWithChildren<TProps>> = ({ accounts:
         accounts,
         activeWallet,
         isLoading: isModifiedAccountsLoading,
-    } = useExtendedTransferAccountProperties(data?.accounts ?? transferAccounts);
+    } = useExtendedTransferAccountProperties(
+        data?.accounts?.map(account => {
+            if (account.account_type === 'mt5') {
+                return {
+                    ...account,
+                    status: 'unavailable',
+                };
+            }
+            return account;
+        }) ?? transferAccounts
+    );
     const [receipt, setReceipt] = useState<TReceipt>();
     const sortedAccounts = useSortedTransferAccounts(accounts);
+    const { getPlatformStatus } = useTradingPlatformStatus();
+
+    const hasPlatformStatus = (account: TInitialTransferFormValues['fromAccount']) => {
+        const platformStatus = getPlatformStatus(account?.account_type ?? '');
+        return (
+            account?.status === TRADING_PLATFORM_STATUS.UNAVAILABLE ||
+            account?.status === MT5_ACCOUNT_STATUS.UNDER_MAINTENANCE ||
+            platformStatus === TRADING_PLATFORM_STATUS.MAINTENANCE
+        );
+    };
 
     const { data: accountLimits, refetch: refetchAccountLimits } = useAccountLimits();
 
@@ -124,6 +151,7 @@ const TransferProvider: React.FC<React.PropsWithChildren<TProps>> = ({ accounts:
                 activeWallet,
                 activeWalletExchangeRates,
                 error,
+                hasPlatformStatus,
                 isLoading,
                 receipt,
                 refetchAccountLimits,

diff --git a/packages/wallets/src/features/cfd/components/PlatformStatusBadge/PlatformStatusBadge.tsx b/packages/wallets/src/features/cfd/components/PlatformStatusBadge/PlatformStatusBadge.tsx
@@ -21,7 +21,7 @@ const PlatformStatusBadge: React.FC<TProps> = ({ badgeSize, cashierAccount, clas
 
     const isMaintenance =
         platformStatus === TRADING_PLATFORM_STATUS.MAINTENANCE ||
-        [mt5Account?.status || cashierAccount?.status].includes(MT5_ACCOUNT_STATUS.UNDER_MAINTENANCE);
+        [mt5Account?.status, cashierAccount?.status].includes(MT5_ACCOUNT_STATUS.UNDER_MAINTENANCE);
     const isUnavailable = [mt5Account?.status, cashierAccount?.status].includes(TRADING_PLATFORM_STATUS.UNAVAILABLE);
 
     const getBadgeText = () => {