From 2bae223f92fecf1a839e9a8261764ede22e395d8 Mon Sep 17 00:00:00 2001
From: Jim Daniels Wasswa <jim@deriv.com>
Date: Tue, 10 Jan 2023 12:28:42 +0800
Subject: [PATCH 1/2] chore: integrate topup button

---
 .../src/components/cfds-listing/index.tsx     | 27 ++++++++++-----
 .../containers/trading-app-card-actions.tsx   | 21 ++++++++----
 .../containers/trading-app-card.tsx           |  7 ++--
 .../src/components/modals/modal-manager.tsx   | 27 +++++++++++++--
 .../multi-action-button-group/index.ts        |  4 +++
 .../multi-action-button-group.scss}           |  2 +-
 .../multi-action-button-group.tsx             | 34 +++++++++++++++++++
 .../options-multipliers-listing/index.tsx     |  4 +--
 .../transfer-trade-button-group/index.ts      |  4 ---
 .../transfer-trade-button-group.tsx           | 21 ------------
 packages/core/src/Stores/traders-hub-store.js | 15 ++++++--
 11 files changed, 117 insertions(+), 49 deletions(-)
 create mode 100644 packages/appstore/src/components/multi-action-button-group/index.ts
 rename packages/appstore/src/components/{transfer-trade-button-group/transfer-trade-button-group.scss => multi-action-button-group/multi-action-button-group.scss} (73%)
 create mode 100644 packages/appstore/src/components/multi-action-button-group/multi-action-button-group.tsx
 delete mode 100644 packages/appstore/src/components/transfer-trade-button-group/index.ts
 delete mode 100644 packages/appstore/src/components/transfer-trade-button-group/transfer-trade-button-group.tsx

diff --git a/packages/appstore/src/components/cfds-listing/index.tsx b/packages/appstore/src/components/cfds-listing/index.tsx
index 5d4c1bcbb9d5..3eaab522d3d4 100644
--- a/packages/appstore/src/components/cfds-listing/index.tsx
+++ b/packages/appstore/src/components/cfds-listing/index.tsx
@@ -45,6 +45,7 @@ const CFDsListing = () => {
         no_MF_account,
         toggleAccountTransferModal,
         is_demo,
+        showTopUpModal,
     } = traders_hub;
 
     const { toggleCompareAccountsModal, setAccountType } = cfd;
@@ -125,11 +126,11 @@ const CFDsListing = () => {
                                 platform={existing_account.platform}
                                 description={existing_account.description}
                                 key={existing_account.key}
-                                type={existing_account.type}
+                                action_type={existing_account.action_type}
                                 availability={selected_region}
                                 has_divider={(!is_eu_user || is_demo) && getHasDivider(index, list_size, 3)}
                                 onAction={(e?: React.MouseEvent<HTMLButtonElement>) => {
-                                    if (existing_account.type === 'get') {
+                                    if (existing_account.action_type === 'get') {
                                         if ((has_no_real_account && is_real) || no_real_mf_account_eu_regulator) {
                                             openDerivRealAccountNeededModal();
                                         } else {
@@ -140,9 +141,12 @@ const CFDsListing = () => {
                                             setAppstorePlatform(existing_account.platform);
                                             getAccount();
                                         }
-                                    } else if (existing_account.type === 'transfer_trade') {
-                                        if (e?.currentTarget?.name === 'transfer-btn') {
+                                    } else if (existing_account.action_type === 'multi-action') {
+                                        const button_name = e?.currentTarget?.name;
+                                        if (button_name === 'transfer-btn') {
                                             toggleAccountTransferModal();
+                                        } else if (button_name === 'topup-btn') {
+                                            showTopUpModal(existing_account);
                                         } else {
                                             startTrade(existing_account.platform, existing_account);
                                         }
@@ -195,10 +199,17 @@ const CFDsListing = () => {
                                 description={existing_account.display_login}
                                 platform={account.platform}
                                 key={`trading_app_card_${existing_account.display_login}`}
-                                type='transfer_trade'
+                                action_type='multi-action'
                                 availability={selected_region}
-                                onAction={() => {
-                                    startTrade(account.platform, existing_account);
+                                onAction={(e?: React.MouseEvent<HTMLButtonElement>) => {
+                                    const button_name = e?.currentTarget?.name;
+                                    if (button_name === 'transfer-btn') {
+                                        toggleAccountTransferModal();
+                                    } else if (button_name === 'topup-btn') {
+                                        showTopUpModal(existing_account);
+                                    } else {
+                                        startTrade(account.platform, existing_account);
+                                    }
                                 }}
                             />
                         ))
@@ -221,7 +232,7 @@ const CFDsListing = () => {
                                 }
                             }}
                             key={`trading_app_card_${account.name}`}
-                            type='get'
+                            action_type='get'
                             availability={selected_region}
                         />
                     );
diff --git a/packages/appstore/src/components/containers/trading-app-card-actions.tsx b/packages/appstore/src/components/containers/trading-app-card-actions.tsx
index 629ac6585342..330f7519f1d7 100644
--- a/packages/appstore/src/components/containers/trading-app-card-actions.tsx
+++ b/packages/appstore/src/components/containers/trading-app-card-actions.tsx
@@ -1,21 +1,29 @@
 import { Button } from '@deriv/components';
 import { localize } from '@deriv/translations';
 import TradeButton from 'Components/trade-button/trade-button';
-import TransferTradeButtonGroup from 'Components/transfer-trade-button-group';
 import React from 'react';
 import { observer } from 'mobx-react-lite';
+import MultiActionButtonGroup from 'Components/multi-action-button-group';
 
 export type Actions = {
-    type: 'get' | 'none' | 'trade' | 'dxtrade' | 'transfer_trade' | 'dxtrade_transfer_trade';
+    action_type: 'get' | 'none' | 'trade' | 'dxtrade' | 'multi-action'; // multi-action can be tranfer_trade or top_up_trade
     link_to?: string;
     has_divider?: boolean;
     onAction?: (e?: React.MouseEvent<HTMLButtonElement>) => void;
     is_external?: boolean;
     is_buttons_disabled?: boolean;
+    is_real?: boolean;
 };
 
-const TradingAppCardActions = ({ type, link_to, onAction, is_external, is_buttons_disabled }: Actions) => {
-    switch (type) {
+const TradingAppCardActions = ({
+    action_type,
+    link_to,
+    onAction,
+    is_external,
+    is_buttons_disabled,
+    is_real,
+}: Actions) => {
+    switch (action_type) {
         case 'get':
             return (
                 <Button primary_light onClick={() => onAction?.()}>
@@ -26,12 +34,13 @@ const TradingAppCardActions = ({ type, link_to, onAction, is_external, is_button
             return <TradeButton link_to={link_to} onAction={onAction} is_external={is_external} />;
         case 'dxtrade':
             return <TradeButton link_to={link_to} />;
-        case 'transfer_trade':
+        case 'multi-action':
             return (
-                <TransferTradeButtonGroup
+                <MultiActionButtonGroup
                     link_to={link_to}
                     onAction={onAction}
                     is_buttons_disabled={is_buttons_disabled}
+                    is_real={is_real}
                 />
             );
         case 'none':
diff --git a/packages/appstore/src/components/containers/trading-app-card.tsx b/packages/appstore/src/components/containers/trading-app-card.tsx
index 245d910a4ddc..fe526b25f1a6 100644
--- a/packages/appstore/src/components/containers/trading-app-card.tsx
+++ b/packages/appstore/src/components/containers/trading-app-card.tsx
@@ -13,7 +13,7 @@ import { ContentFlag } from '@deriv/shared';
 const TradingAppCard = ({
     name,
     icon,
-    type,
+    action_type,
     description,
     is_deriv_platform = false,
     onAction,
@@ -23,7 +23,7 @@ const TradingAppCard = ({
     mt5_acc_auth_status,
 }: Actions & BrandConfig & AvailableAccount & TDetailsOfEachMT5Loginid) => {
     const { traders_hub } = useStores();
-    const { is_eu_user, is_demo_low_risk, content_flag } = traders_hub;
+    const { is_eu_user, is_demo_low_risk, content_flag, is_real } = traders_hub;
 
     const low_risk_cr_non_eu = content_flag === ContentFlag.LOW_RISK_CR_NON_EU;
 
@@ -76,11 +76,12 @@ const TradingAppCard = ({
                 </div>
                 <div className='trading-app-card__actions'>
                     <TradingAppCardActions
-                        type={type}
+                        action_type={action_type}
                         link_to={link_to}
                         onAction={onAction}
                         is_external={is_external}
                         is_buttons_disabled={!!mt5_acc_auth_status}
+                        is_real={is_real}
                     />
                 </div>
             </div>
diff --git a/packages/appstore/src/components/modals/modal-manager.tsx b/packages/appstore/src/components/modals/modal-manager.tsx
index d9f39eff6853..e0c50983c255 100644
--- a/packages/appstore/src/components/modals/modal-manager.tsx
+++ b/packages/appstore/src/components/modals/modal-manager.tsx
@@ -26,7 +26,7 @@ type TCurrentList = DetailsOfEachMT5Loginid & {
 
 const ModalManager = () => {
     const store = useStores();
-    const { common, client, modules, traders_hub } = store;
+    const { common, client, modules, traders_hub, ui } = store;
     const { is_logged_in, is_eu, is_eu_country, has_active_real_account } = client;
     const { platform } = common;
     const {
@@ -37,7 +37,18 @@ const ModalManager = () => {
         toggleMT5TradeModal,
         getRealSyntheticAccountsExistingData,
         getRealFinancialAccountsExistingData,
+        current_account,
+        dxtrade_companies,
+        mt5_companies,
+        topUpVirtual,
     } = modules.cfd;
+    const {
+        is_top_up_virtual_open,
+        is_top_up_virtual_in_progress,
+        is_top_up_virtual_success,
+        closeTopUpModal,
+        closeSuccessTopUpModal,
+    } = ui;
     const { is_demo, is_account_transfer_modal_open, toggleAccountTransferModal } = traders_hub;
 
     const [password_manager, setPasswordManager] = React.useState<{
@@ -105,7 +116,19 @@ const ModalManager = () => {
             <CFDDbviOnBoarding context={store} />
             <CFDResetPasswordModal context={store} platform={platform} />
             <CFDServerErrorDialog context={store} />
-            <CFDTopUpDemoModal context={store} />
+            <CFDTopUpDemoModal
+                context={store}
+                dxtrade_companies={dxtrade_companies}
+                mt5_companies={mt5_companies}
+                current_account={current_account}
+                closeSuccessTopUpModal={closeSuccessTopUpModal}
+                closeTopUpModal={closeTopUpModal}
+                is_top_up_virtual_open={is_top_up_virtual_open}
+                is_top_up_virtual_in_progress={is_top_up_virtual_in_progress}
+                is_top_up_virtual_success={is_top_up_virtual_success}
+                platform={platform}
+                topUpVirtual={topUpVirtual}
+            />
             <MT5TradeModal
                 context={store}
                 current_list={current_list}
diff --git a/packages/appstore/src/components/multi-action-button-group/index.ts b/packages/appstore/src/components/multi-action-button-group/index.ts
new file mode 100644
index 000000000000..7b67e3fdad9d
--- /dev/null
+++ b/packages/appstore/src/components/multi-action-button-group/index.ts
@@ -0,0 +1,4 @@
+import MultiActionButtonGroup from './multi-action-button-group';
+import './multi-action-button-group.scss';
+
+export default MultiActionButtonGroup;
diff --git a/packages/appstore/src/components/transfer-trade-button-group/transfer-trade-button-group.scss b/packages/appstore/src/components/multi-action-button-group/multi-action-button-group.scss
similarity index 73%
rename from packages/appstore/src/components/transfer-trade-button-group/transfer-trade-button-group.scss
rename to packages/appstore/src/components/multi-action-button-group/multi-action-button-group.scss
index fc520ec5ec6e..3cbefe41df8d 100644
--- a/packages/appstore/src/components/transfer-trade-button-group/transfer-trade-button-group.scss
+++ b/packages/appstore/src/components/multi-action-button-group/multi-action-button-group.scss
@@ -1,4 +1,4 @@
-.transfer-trade-button-group {
+.multi-action-button-group {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
diff --git a/packages/appstore/src/components/multi-action-button-group/multi-action-button-group.tsx b/packages/appstore/src/components/multi-action-button-group/multi-action-button-group.tsx
new file mode 100644
index 000000000000..abbd206c5e8d
--- /dev/null
+++ b/packages/appstore/src/components/multi-action-button-group/multi-action-button-group.tsx
@@ -0,0 +1,34 @@
+import { Button } from '@deriv/components';
+import { localize } from '@deriv/translations';
+import { Actions } from 'Components/containers/trading-app-card-actions';
+import TradeButton from 'Components/trade-button';
+import React from 'react';
+
+/**
+ * Handles Transfer, Trade and top up. It uses the name attribute of the <button /> element to distinguish between transfer and top up
+ * @param { string } link_to // contains the URL for the trade button
+ * @param { onAction } // a callback function that handles the current action
+ * @param { boolean } // indicates whether the current account type is real or demo
+ * @returns {JSX.Element}
+ * */
+const MultiActionButtonGroup = ({
+    link_to,
+    onAction,
+    is_buttons_disabled,
+    is_real,
+}: Pick<Actions, 'link_to' | 'onAction' | 'is_buttons_disabled' | 'is_real'>) => {
+    return (
+        <div className='multi-action-button-group'>
+            <Button
+                secondary
+                name={`${is_real ? 'transfer-btn' : 'topup-btn'}`}
+                onClick={onAction}
+                is_disabled={is_buttons_disabled}
+            >
+                {is_real ? localize('Transfer') : localize('Top up')}
+            </Button>
+            <TradeButton link_to={link_to} onAction={onAction} is_buttons_disabled={is_buttons_disabled} />
+        </div>
+    );
+};
+export default MultiActionButtonGroup;
diff --git a/packages/appstore/src/components/options-multipliers-listing/index.tsx b/packages/appstore/src/components/options-multipliers-listing/index.tsx
index 943e67474119..e6935c17c7eb 100644
--- a/packages/appstore/src/components/options-multipliers-listing/index.tsx
+++ b/packages/appstore/src/components/options-multipliers-listing/index.tsx
@@ -82,7 +82,7 @@ const OptionsAndMultipliersListing = () => {
                         description={localize('Get a real Deriv account, start trading and manage your funds.')}
                         icon='Options'
                         availability='All'
-                        type='get'
+                        action_type='get'
                         onAction={() => {
                             if (no_MF_account) {
                                 ui.openRealAccountSignup('maltainvest');
@@ -99,7 +99,7 @@ const OptionsAndMultipliersListing = () => {
                     <TradingAppCard
                         key={`trading_app_card_${available_platform.name}`}
                         {...available_platform}
-                        type={is_demo || has_any_real_account ? 'trade' : 'none'}
+                        action_type={is_demo || has_any_real_account ? 'trade' : 'none'}
                         is_deriv_platform
                         has_divider={(!is_eu_user || is_demo) && getHasDivider(index, available_platforms.length, 3)}
                     />
diff --git a/packages/appstore/src/components/transfer-trade-button-group/index.ts b/packages/appstore/src/components/transfer-trade-button-group/index.ts
deleted file mode 100644
index a53f4cd41a6c..000000000000
--- a/packages/appstore/src/components/transfer-trade-button-group/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import TransferTradeButtonGroup from './transfer-trade-button-group';
-import './transfer-trade-button-group.scss';
-
-export default TransferTradeButtonGroup;
diff --git a/packages/appstore/src/components/transfer-trade-button-group/transfer-trade-button-group.tsx b/packages/appstore/src/components/transfer-trade-button-group/transfer-trade-button-group.tsx
deleted file mode 100644
index cc2d55ea8ab8..000000000000
--- a/packages/appstore/src/components/transfer-trade-button-group/transfer-trade-button-group.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Button } from '@deriv/components';
-import { localize } from '@deriv/translations';
-import { Actions } from 'Components/containers/trading-app-card-actions';
-import TradeButton from 'Components/trade-button';
-import React from 'react';
-
-const TransferTradeButtonGroup = ({
-    link_to,
-    onAction,
-    is_buttons_disabled,
-}: Pick<Actions, 'link_to' | 'onAction' | 'is_buttons_disabled'>) => {
-    return (
-        <div className='transfer-trade-button-group'>
-            <Button secondary name='transfer-btn' onClick={onAction} is_disabled={is_buttons_disabled}>
-                {localize('Transfer')}
-            </Button>
-            <TradeButton link_to={link_to} onAction={onAction} is_buttons_disabled={is_buttons_disabled} />
-        </div>
-    );
-};
-export default TransferTradeButtonGroup;
diff --git a/packages/core/src/Stores/traders-hub-store.js b/packages/core/src/Stores/traders-hub-store.js
index 2dcc6fd04a78..3aaea724fc96 100644
--- a/packages/core/src/Stores/traders-hub-store.js
+++ b/packages/core/src/Stores/traders-hub-store.js
@@ -93,6 +93,7 @@ export default class TradersHubStore extends BaseStore {
             toggleIsTourOpen: action.bound,
             toggleRegulatorsCompareModal: action.bound,
             updatePlatformBalance: action.bound,
+            showTopUpModal: action.bound,
         });
 
         reaction(
@@ -526,7 +527,7 @@ export default class TradersHubStore extends BaseStore {
                             platform: account.platform,
                             description: existing_account.display_login,
                             key: `trading_app_card_${existing_account.display_login}`,
-                            type: 'transfer_trade',
+                            action_type: 'multi-action',
                             availability: this.selected_region,
                             market_type: account.market_type,
                         },
@@ -541,7 +542,7 @@ export default class TradersHubStore extends BaseStore {
                         platform: account.platform,
                         description: account.description,
                         key: `trading_app_card_${account.name}`,
-                        type: 'get',
+                        action_type: 'get',
                         availability: this.selected_region,
                         market_type: account.market_type,
                     },
@@ -616,4 +617,14 @@ export default class TradersHubStore extends BaseStore {
         );
         return { balance: total_balance.balance, currency: base_currency };
     }
+    showTopUpModal(data) {
+        const { ui, modules } = this.root_store;
+        const { openTopUpModal } = ui;
+        const { setCurrentAccount } = modules.cfd;
+        setCurrentAccount(data, {
+            category: this.selected_account_type,
+            type: data.market_type,
+        });
+        openTopUpModal();
+    }
 }

From 56d4cdb5cdcee573d3694db8c52f2b143277e5cc Mon Sep 17 00:00:00 2001
From: Jim Daniels Wasswa <jim@deriv.com>
Date: Tue, 10 Jan 2023 14:55:46 +0800
Subject: [PATCH 2/2] chore: update trading-app-card styles

---
 .../containers/trading-app-card.scss          | 21 ++++++++++++++-----
 .../containers/trading-app-card.tsx           |  2 +-
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/packages/appstore/src/components/containers/trading-app-card.scss b/packages/appstore/src/components/containers/trading-app-card.scss
index 5a0a534903a2..aca5591ca48e 100644
--- a/packages/appstore/src/components/containers/trading-app-card.scss
+++ b/packages/appstore/src/components/containers/trading-app-card.scss
@@ -1,21 +1,32 @@
 .trading-app-card {
     display: inline-flex;
     align-items: center;
-    height: max-content;
+    height: 100%;
+
+    &__icon {
+        &--container {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+            padding: 0 0 2rem;
+        }
+    }
 
     &__container {
         display: inline-flex;
         justify-content: space-between;
-        align-items: flex-start;
+        align-items: center;
         width: 100%;
-        padding: 0 0 1rem;
+        height: 100%;
+        padding: 0 0 2rem;
         margin-left: 1.6rem;
     }
 
     &__details {
-        display: flex;
-        justify-content: center;
+        display: inline-flex;
         flex-direction: column;
+        justify-content: center;
         height: 100%;
         padding: 0 2rem 0 0;
         width: 100%;
diff --git a/packages/appstore/src/components/containers/trading-app-card.tsx b/packages/appstore/src/components/containers/trading-app-card.tsx
index fe526b25f1a6..331a29c589d2 100644
--- a/packages/appstore/src/components/containers/trading-app-card.tsx
+++ b/packages/appstore/src/components/containers/trading-app-card.tsx
@@ -36,7 +36,7 @@ const TradingAppCard = ({
 
     return (
         <div className='trading-app-card'>
-            <div>
+            <div className='trading-app-card__icon--container'>
                 <TradigPlatformIconProps icon={icon} size={48} />
             </div>
             <div className={classNames('trading-app-card__container', { 'trading-app-card--divider': has_divider })}>