Merge pull request binary-com#66 from utkarsha-deriv/utkarsha/WALL-16…

…14/Add-Account-Status

Utkarsha/wall 1614/add account status

packages/appstore/src/components/cfds-listing/cfds-listing.scss

@@ -391,6 +391,11 @@
     margin: 2.4rem;
     align-items: center;
     gap: 0.8rem;
+    &__acc_status {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+    }
     &--paragraph {
         @include typeface(--paragraph-left-normal-black, none);
         color: var(--text-less-prominent);

packages/appstore/src/components/cfds-listing/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { observer, useStore } from '@deriv/stores';
 import { Text, StaticUrl } from '@deriv/components';
+import { useCFDCanGetMoreMT5Accounts, useIsMt5LoginListStatusPresent } from '@deriv/hooks';
+import { observer, useStore } from '@deriv/stores';
 import { isMobile, formatMoney, getAuthenticationStatusInfo, Jurisdiction } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
 import ListingContainer from 'Components/containers/listing-container';
@@ -13,7 +14,6 @@ import { Actions } from 'Components/containers/trading-app-card-actions';
 import { getHasDivider } from 'Constants/utils';
 import { AvailableAccount, TDetailsOfEachMT5Loginid } from 'Types';
 import './cfds-listing.scss';
-import { useCFDCanGetMoreMT5Accounts } from '@deriv/hooks';
 
 type TDetailedExistingAccount = AvailableAccount &
     TDetailsOfEachMT5Loginid &
@@ -180,6 +180,7 @@ const CFDsListing = observer(() => {
                     {localize('Deriv MT5')}
                 </Text>
             </div>
+
             {is_landing_company_loaded ? (
                 <React.Fragment>
                     {combined_cfd_mt5_accounts.map((existing_account: TDetailedExistingAccount, index: number) => {
@@ -191,6 +192,11 @@ const CFDsListing = observer(() => {
                                       existing_account?.landing_company_short
                                   )
                                 : null;
+                        //TODO replace status with open_order_position_status once key is available in BE response and in type TSocketResponseData<"mt5_login_list">
+                        const {
+                            is_flag_present: is_open_order_position_status_present,
+                            flag_value: open_order_position_status,
+                        } = useIsMt5LoginListStatusPresent('landing_company_short', existing_account?.login ?? '');
 
                         return (
                             <TradingAppCard
@@ -240,6 +246,9 @@ const CFDsListing = observer(() => {
                                     jurisdiction: existing_account.landing_company_short,
                                 }}
                                 openFailedVerificationModal={openFailedVerificationModal}
+                                is_open_order_position_status_present={is_open_order_position_status_present}
+                                open_order_position_status={!!open_order_position_status}
+                                market_type={existing_account?.market_type}
                             />
                         );
                     })}

packages/appstore/src/components/containers/trading-app-card.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { getStatusBadgeConfig } from '@deriv/account';
 import { Text, StatusBadge } from '@deriv/components';
+import { Localize, localize } from '@deriv/translations';
 import TradingPlatformIconProps from 'Assets/svgs/trading-platform';
 import {
     getAppstorePlatforms,
@@ -14,8 +15,8 @@ import TradingAppCardActions, { Actions } from './trading-app-card-actions';
 import { AvailableAccount, TDetailsOfEachMT5Loginid } from 'Types';
 import { useStores } from 'Stores/index';
 import { observer } from 'mobx-react-lite';
-import { localize } from '@deriv/translations';
 import { CFD_PLATFORMS, ContentFlag, getStaticUrl, getUrlSmartTrader, getUrlBinaryBot } from '@deriv/shared';
+import OpenPositionsSVGModal from '../modals/open-positions-svg-modal';
 
 const TradingAppCard = ({
     availability,
@@ -33,6 +34,9 @@ const TradingAppCard = ({
     mt5_acc_auth_status,
     selected_mt5_jurisdiction,
     openFailedVerificationModal,
+    is_open_order_position_status_present,
+    open_order_position_status,
+    market_type,
 }: Actions & BrandConfig & AvailableAccount & TDetailsOfEachMT5Loginid) => {
     const {
         common,
@@ -98,6 +102,9 @@ const TradingAppCard = ({
         else;
     };
 
+    const [is_open_position_svg_modal_open, setIsOpenPositionSvgModalOpen] = React.useState(false);
+    const status_text = open_order_position_status ? 'No new positions' : 'Account closed';
+
     return (
         <div className='trading-app-card' key={`trading-app-card__${current_language}`}>
             <div
@@ -144,6 +151,31 @@ const TradingAppCard = ({
                             text={badge_text}
                         />
                     )}
+                    {is_open_order_position_status_present && (
+                        <StatusBadge
+                            className='trading-app-card__acc_status_badge'
+                            onClick={() => {
+                                setIsOpenPositionSvgModalOpen(!is_open_position_svg_modal_open);
+                            }}
+                            account_status='open-order-position'
+                            icon='IcAlertWarning'
+                            text={
+                                <Localize
+                                    i18n_default_text='<0>{{status_text}}</0>'
+                                    values={{ status_text }}
+                                    components={[<Text key={0} weight='bold' size='xxxs' color='warning' />]}
+                                />
+                            }
+                        />
+                    )}
+                    {is_open_position_svg_modal_open && (
+                        <OpenPositionsSVGModal
+                            market_type={market_type}
+                            open_order_position_status={open_order_position_status}
+                            is_modal_open={is_open_position_svg_modal_open}
+                            setModalOpen={setIsOpenPositionSvgModalOpen}
+                        />
+                    )}
                 </div>
                 <div className='trading-app-card__actions'>
                     <TradingAppCardActions

packages/appstore/src/components/modals/open-positions-svg-modal/index.ts

@@ -0,0 +1,4 @@
+import OpenPositionsSVGModal from './open-positions-svg-modal';
+import './open-positions-svg-modal.scss';
+
+export default OpenPositionsSVGModal;

packages/appstore/src/components/modals/open-positions-svg-modal/open-positions-svg-modal.scss

@@ -0,0 +1,10 @@
+.open-positions-svg {
+    &__modal {
+        &-title {
+            margin-bottom: 2.4rem;
+        }
+        &-footer {
+            padding: 0 2.4rem 2.4rem;
+        }
+    }
+}

packages/appstore/src/components/modals/open-positions-svg-modal/open-positions-svg-modal.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { Button, Modal, Text } from '@deriv/components';
+import { useMT5SVGEligibleToMigrate } from '@deriv/hooks';
+import {
+    CFD_PLATFORMS,
+    getCFDPlatformLabel,
+    getFormattedJurisdictionCode,
+    getFormattedJurisdictionMarketTypes,
+    Jurisdiction,
+    JURISDICTION_MARKET_TYPES,
+} from '@deriv/shared';
+import { Localize } from '@deriv/translations';
+
+type TOpenPositionsSVGModal = {
+    market_type: string;
+    open_order_position_status: boolean | undefined;
+    is_modal_open: boolean;
+    setModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+const OpenPositionsSVGModal = ({
+    market_type,
+    open_order_position_status,
+    is_modal_open,
+    setModalOpen,
+}: TOpenPositionsSVGModal) => {
+    const { eligible_account_to_migrate_label } = useMT5SVGEligibleToMigrate();
+    const title = open_order_position_status ? 'No new positions' : 'Account closed';
+    const account_type =
+        market_type === JURISDICTION_MARKET_TYPES.FINANCIAL
+            ? getFormattedJurisdictionMarketTypes(JURISDICTION_MARKET_TYPES.FINANCIAL)
+            : getFormattedJurisdictionMarketTypes(JURISDICTION_MARKET_TYPES.DERIVED);
+    const from_account = getFormattedJurisdictionCode(Jurisdiction.SVG);
+    const cfd_platform = getCFDPlatformLabel(CFD_PLATFORMS.MT5);
+
+    const onClick = () => {
+        setModalOpen(false);
+    };
+    return (
+        <Modal
+            is_open={is_modal_open}
+            toggleModal={() => setModalOpen(is_modal_open => !is_modal_open)}
+            small
+            has_close_icon={false}
+        >
+            <Modal.Body>
+                <Text as='h1' color='prominent' weight='bold' className='open-positions-svg__modal-title'>
+                    <Localize i18n_default_text='{{title}}' values={{ title }} />
+                </Text>
+                <Text as='p' color='prominent ' size='xs'>
+                    {open_order_position_status ? (
+                        <Localize
+                            i18n_default_text='You can no longer open new positions with your {{cfd_platform}} {{account_type}} {{from_account}} account. Please use your {{cfd_platform}} {{account_type}} {{eligible_account_to_migrate_label}} account to open new positions.'
+                            values={{ account_type, from_account, eligible_account_to_migrate_label, cfd_platform }}
+                        />
+                    ) : (
+                        <Localize
+                            i18n_default_text='Your {{cfd_platform}} {{account_type}} {{from_account}} account will be archived after 30 days of inactivity. You can still access your trade history until the account is archived.'
+                            values={{ account_type, from_account, cfd_platform }}
+                        />
+                    )}
+                </Text>
+            </Modal.Body>
+            <Modal.Footer className='open-positions-svg__modal-footer'>
+                <Button has_effect onClick={onClick} secondary large>
+                    <Localize i18n_default_text='OK' />
+                </Button>
+            </Modal.Footer>
+        </Modal>
+    );
+};
+
+export default OpenPositionsSVGModal;

packages/appstore/src/types/common.types.ts

@@ -63,6 +63,9 @@ export type TDetailsOfEachMT5Loginid = DetailsOfEachMT5Loginid & {
         };
     platform?: TPlatform;
     openFailedVerificationModal?: (from_account: string) => void;
+    is_open_order_position_status_present?: boolean;
+    open_order_position_status: boolean | undefined;
+    market_type: string;
 };
 
 export type TTradingPlatformAvailableAccount = {

packages/cfd/src/Containers/dmt5-trade-modal.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Text, Icon, Money } from '@deriv/components';
+import { Text, Icon, Money, StatusBadge } from '@deriv/components';
+import { useIsMt5LoginListStatusPresent } from '@deriv/hooks';
 import { TTradingPlatformAccounts } from '../Components/props.types';
 import { DetailsOfEachMT5Loginid } from '@deriv/api-types';
 import {
@@ -69,6 +70,12 @@ const DMT5TradeModal = ({
         else if (mt5_trade_account.market_type === 'all') return 'SwapFree';
         return 'Financial';
     };
+
+    //TODO replace status with open_order_position_status once key is available in BE response and in type TSocketResponseData<"mt5_login_list">
+    const { is_flag_present: is_open_order_position_status_present, flag_value: open_order_position_status } =
+        useIsMt5LoginListStatusPresent('landing_company_short', mt5_trade_account?.login ?? '');
+    const status_text = open_order_position_status ? 'No new positions' : 'Account closed';
+
     return (
         <div className='cfd-trade-modal-container'>
             <div className='cfd-trade-modal'>
@@ -83,16 +90,32 @@ const DMT5TradeModal = ({
                         </Text>
                     )}
                 </div>
-                {mt5_trade_account?.display_balance && (
-                    <Text size='xs' color='profit-success' className='cfd-trade-modal__desc-balance' weight='bold'>
-                        <Money
-                            amount={mt5_trade_account.display_balance}
-                            currency={mt5_trade_account.currency}
-                            has_sign={!!mt5_trade_account.balance && mt5_trade_account.balance < 0}
-                            show_currency
+                <div className='cfd-trade-modal__acc_status'>
+                    {mt5_trade_account?.display_balance && (
+                        <Text size='xs' color='profit-success' className='cfd-trade-modal__desc-balance' weight='bold'>
+                            <Money
+                                amount={mt5_trade_account.display_balance}
+                                currency={mt5_trade_account.currency}
+                                has_sign={!!mt5_trade_account.balance && mt5_trade_account.balance < 0}
+                                show_currency
+                            />
+                        </Text>
+                    )}
+                    {is_open_order_position_status_present && (
+                        <StatusBadge
+                            className='cfd-trade-modal__acc_status_badge'
+                            account_status='open-order-position'
+                            icon='IcAlertWarning'
+                            text={
+                                <Localize
+                                    i18n_default_text='<0>{{status_text}}</0>'
+                                    values={{ status_text }}
+                                    components={[<Text key={0} weight='bold' size='xxxs' color='warning' />]}
+                                />
+                            }
                         />
-                    </Text>
-                )}
+                    )}
+                </div>
             </div>
             <div className='cfd-trade-modal__login-specs'>
                 <div className='cfd-trade-modal__login-specs-item'>

packages/cfd/src/sass/cfd-dashboard.scss

@@ -1520,6 +1520,9 @@
         text-align: left;
         margin: 0 2.4rem;
     }
+    &__acc_status_badge {
+        max-width: fit-content;
+    }
 }
 
 .cfd-password-manager {

packages/components/src/components/status-badge/status-badge.scss

@@ -11,6 +11,7 @@
         border: 1.5px solid var(--status-info);
         align-items: center;
 
+        &--open-order-position,
         &--pending {
             border-color: var(--status-warning);
             color: var(--status-warning);

packages/components/src/components/status-badge/status-badge.tsx

@@ -8,16 +8,24 @@ type StatusBadgeProps = {
     account_status: any;
     icon: string;
     text: ReactNode;
+    onClick?: () => void;
 };
 
-const StatusBadge = ({ account_status, icon, text, className }: StatusBadgeProps & HTMLAttributes<HTMLDivElement>) => {
+const StatusBadge = ({
+    account_status,
+    icon,
+    text,
+    className,
+    onClick,
+}: StatusBadgeProps & HTMLAttributes<HTMLDivElement>) => {
     return (
         <div
             className={classNames(
                 'switcher-status-badge__container',
                 className,
                 `switcher-status-badge__container--${account_status || 'failed'}`
             )}
+            onClick={onClick}
         >
             <div
                 className={classNames(

packages/shared/src/utils/constants/jurisdictions-config.ts

@@ -55,3 +55,20 @@ export const JURISDICTION_MARKET_TYPES = {
     FINANCIAL: 'financial',
     DERIVED: 'derived',
 } as const;
+
+export const getFormattedJurisdictionMarketTypes = (jurisdiction_market_type: string) => {
+    let formatted_market_type = '';
+
+    switch (jurisdiction_market_type) {
+        case JURISDICTION_MARKET_TYPES.DERIVED:
+            formatted_market_type = localize('Derived');
+            break;
+        case JURISDICTION_MARKET_TYPES.FINANCIAL:
+            formatted_market_type = localize('Financial');
+            break;
+        default:
+            formatted_market_type = jurisdiction_market_type?.toUpperCase();
+            break;
+    }
+    return formatted_market_type;
+};