Farzin/87456/Extract is_onramp_tab_visible method from cashier `OnR…

…ampStore` to reusable hook (deriv-com#7475)

* feat(core): ✨ add `is_crypto` method to `ClientStore`

* feat(hooks): ✨ add `useOnrampVisible` hook

* refactor(cashier): ♻️ replace `is_onramp_tab_visible` with `useOnrampVisible`

* refactor(core): ♻️ replace `is_onramp_tab_visible` with `useOnrampVisible`

* docs(cashier): 🗑️ deprecated legacy `is_onramp_tab_visible` method

---------

Co-authored-by: Farzin Mirzaie <farzin@deriv.com>

packages/cashier/src/containers/cashier/__tests__/cashier.spec.tsx

@@ -83,9 +83,6 @@ describe('<Cashier />', () => {
                     transaction_history: {
                         is_crypto_transactions_visible: false,
                     },
-                    onramp: {
-                        is_onramp_tab_visible: false,
-                    },
                     payment_agent_transfer: {
                         is_payment_agent_transfer_visible: false,
                     },
@@ -118,6 +115,8 @@ describe('<Cashier />', () => {
                 is_account_setting_loaded: true,
                 is_logged_in: true,
                 is_logging_in: true,
+                is_virtual: false,
+                is_crypto: true,
             },
             modules: {
                 cashier: {
@@ -140,9 +139,6 @@ describe('<Cashier />', () => {
                     transaction_history: {
                         is_crypto_transactions_visible: true,
                     },
-                    onramp: {
-                        is_onramp_tab_visible: true,
-                    },
                     payment_agent_transfer: {
                         is_payment_agent_transfer_visible: true,
                     },
@@ -206,9 +202,6 @@ describe('<Cashier />', () => {
                     transaction_history: {
                         is_crypto_transactions_visible: true,
                     },
-                    onramp: {
-                        is_onramp_tab_visible: true,
-                    },
                     payment_agent_transfer: {
                         is_payment_agent_transfer_visible: true,
                     },
@@ -267,9 +260,6 @@ describe('<Cashier />', () => {
     //                 transaction_history: {
     //                     is_crypto_transactions_visible: false,
     //                 },
-    //                 onramp: {
-    //                     is_onramp_tab_visible: true,
-    //                 },
     //                 payment_agent_transfer: {
     //                     is_payment_agent_transfer_visible: true,
     //                 },
@@ -328,9 +318,6 @@ describe('<Cashier />', () => {
                     transaction_history: {
                         is_crypto_transactions_visible: true,
                     },
-                    onramp: {
-                        is_onramp_tab_visible: true,
-                    },
                     payment_agent_transfer: {
                         is_payment_agent_transfer_visible: true,
                     },
@@ -388,9 +375,6 @@ describe('<Cashier />', () => {
                     transaction_history: {
                         is_crypto_transactions_visible: true,
                     },
-                    onramp: {
-                        is_onramp_tab_visible: true,
-                    },
                     payment_agent_transfer: {
                         is_payment_agent_transfer_visible: true,
                     },
@@ -447,9 +431,6 @@ describe('<Cashier />', () => {
                     transaction_history: {
                         is_crypto_transactions_visible: true,
                     },
-                    onramp: {
-                        is_onramp_tab_visible: true,
-                    },
                     payment_agent_transfer: {
                         is_payment_agent_transfer_visible: true,
                     },

packages/cashier/src/containers/cashier/cashier.tsx

@@ -11,22 +11,24 @@ import {
     VerticalTab,
     Loading,
 } from '@deriv/components';
+import { useOnrampVisible } from '@deriv/hooks';
 import { getSelectedRoute, getStaticUrl, isMobile, routes, WS } from '@deriv/shared';
+import { observer, useStore } from '@deriv/stores';
 import { localize } from '@deriv/translations';
 import AccountPromptDialog from '../../components/account-prompt-dialog';
 import ErrorDialog from '../../components/error-dialog';
-import { TCommonStore, TRoute, TUiStore } from '../../types';
+import { TRootStore, TRoute } from '../../types';
+import { useCashierStore } from '../../stores/useCashierStores';
 import './cashier.scss';
-import { observer, useStore } from '@deriv/stores';
 
 type TCashierProps = RouteComponentProps & {
     routes: TRoute[];
     tab_index: number;
     onMount: (should_remount?: boolean) => void;
     setAccountSwitchListener: () => void;
     setTabIndex: (index: number) => void;
-    routeBackInApp: TCommonStore['routeBackInApp'];
-    toggleCashier: TUiStore['toggleCashier'];
+    routeBackInApp: TRootStore['common']['routeBackInApp'];
+    toggleCashier: TRootStore['ui']['toggleCashier'];
     resetLastLocation: () => void;
     is_pre_appstore: boolean;
 };
@@ -42,18 +44,16 @@ type TCashierOptions = {
 };
 
 const Cashier = observer(({ history, location, routes: routes_config }: TCashierProps) => {
-    const { common, ui, client, modules } = useStore();
-    const { cashier } = modules;
+    const { common, ui, client } = useStore();
     const {
         withdraw,
         general_store,
         account_transfer,
         transaction_history,
-        onramp,
         payment_agent_transfer,
         payment_agent,
         account_prompt_dialog,
-    } = cashier;
+    } = useCashierStore();
     const { error } = withdraw;
     const {
         is_cashier_onboarding,
@@ -67,13 +67,14 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier
     } = general_store;
     const { is_account_transfer_visible } = account_transfer;
     const { is_crypto_transactions_visible } = transaction_history;
-    const { is_onramp_tab_visible } = onramp;
     const { is_payment_agent_transfer_visible } = payment_agent_transfer;
     const { is_payment_agent_visible } = payment_agent;
     const { resetLastLocation } = account_prompt_dialog;
     const { routeBackInApp, is_from_derivgo } = common;
     const { is_cashier_visible: is_visible, toggleCashier } = ui;
     const { is_account_setting_loaded, is_logged_in, is_logging_in, is_pre_appstore } = client;
+    const is_onramp_visible = useOnrampVisible();
+
     React.useEffect(() => {
         toggleCashier();
         // we still need to populate the tabs shown on cashier
@@ -103,7 +104,7 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier
                 (route.path !== routes.cashier_pa || is_payment_agent_visible) &&
                 (route.path !== routes.cashier_pa_transfer || is_payment_agent_transfer_visible) &&
                 (route.path !== routes.cashier_p2p || is_p2p_enabled) &&
-                (route.path !== routes.cashier_onramp || is_onramp_tab_visible) &&
+                (route.path !== routes.cashier_onramp || is_onramp_visible) &&
                 (route.path !== routes.cashier_acc_transfer || is_account_transfer_visible)
             ) {
                 options.push({
@@ -204,4 +205,4 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier
         </FadeWrapper>
     );
 });
-export default withRouter(Cashier);
+export default withRouter(Cashier);

packages/cashier/src/stores/on-ramp-store.js

@@ -60,6 +60,7 @@ export default class OnRampStore extends BaseStore {
         });
     }
 
+    /** @deprecated Use `useOnrampVisible` from `@deriv/hooks` package instead. */
     get is_onramp_tab_visible() {
         const { client } = this.root_store;
 

packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
 import { Div100vhContainer, Icon, MobileDrawer, ToggleSwitch, Text, Button } from '@deriv/components';
+import { useOnrampVisible } from '@deriv/hooks';
 import { routes, PlatformContext, getStaticUrl, whatsapp_url, ContentFlag } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
 import { localize, getAllowedLanguages, getLanguage } from '@deriv/translations';
@@ -124,13 +125,13 @@ const ToggleMenuDrawer = observer(({ platform_config }) => {
         setIsPreAppStore,
     } = client;
     const { cashier } = modules;
-    const { onramp, general_store, payment_agent_transfer, payment_agent, account_transfer } = cashier;
-    const { is_onramp_tab_visible } = onramp;
+    const { general_store, payment_agent_transfer, payment_agent, account_transfer } = cashier;
     const { is_p2p_enabled } = general_store;
     const { is_payment_agent_transfer_visible } = payment_agent_transfer;
     const { is_payment_agent_visible } = payment_agent;
     const { is_account_transfer_visible } = account_transfer;
     const { content_flag, should_show_exit_traders_modal, switchToCRAccount } = traders_hub;
+    const is_onramp_visible = useOnrampVisible();
 
     const liveChat = useLiveChat();
     const [is_open, setIsOpen] = React.useState(false);
@@ -254,7 +255,7 @@ const ToggleMenuDrawer = observer(({ platform_config }) => {
                             (route.path !== routes.cashier_pa || is_payment_agent_visible) &&
                             (route.path !== routes.cashier_pa_transfer || is_payment_agent_transfer_visible) &&
                             (route.path !== routes.cashier_p2p || is_p2p_enabled) &&
-                            (route.path !== routes.cashier_onramp || is_onramp_tab_visible) &&
+                            (route.path !== routes.cashier_onramp || is_onramp_visible) &&
                             (route.path !== routes.cashier_acc_transfer || is_account_transfer_visible)
                         ) {
                             return (

packages/core/src/Stores/client-store.js

@@ -21,6 +21,7 @@ import {
     setCurrencies,
     toMoment,
     urlForLanguage,
+    isCryptocurrency,
 } from '@deriv/shared';
 import { WS, requestLogout } from 'Services';
 import { action, computed, makeObservable, observable, reaction, runInAction, toJS, when } from 'mobx';
@@ -240,6 +241,7 @@ export default class ClientStore extends BaseStore {
             all_loginids: computed,
             account_title: computed,
             currency: computed,
+            is_crypto: computed,
             default_currency: computed,
             should_allow_authentication: computed,
             is_risky_client: computed,
@@ -672,6 +674,10 @@ export default class ClientStore extends BaseStore {
         return this.default_currency;
     }
 
+    get is_crypto() {
+        return isCryptocurrency(this.currency);
+    }
+
     get default_currency() {
         if (Object.keys(this.currencies_list).length > 0) {
             const keys = Object.keys(this.currencies_list);

packages/hooks/src/index.ts

@@ -5,3 +5,4 @@ export { default as useNeedFinancialAssessment } from './useNeedFinancialAssessm
 export { default as useRealSTPAccount } from './useRealSTPAccount';
 export { default as useNeedTNC } from './useNeedTNC';
 export { default as useDepositLocked } from './useDepositLocked';
+export { default as useOnrampVisible } from './useOnrampVisible';

packages/hooks/src/useOnrampVisible.ts

@@ -0,0 +1,11 @@
+import { useStore } from '@deriv/stores';
+
+const useOnrampVisible = () => {
+    const { client } = useStore();
+    const { is_virtual, is_crypto } = client;
+    const is_onramp_visible = !is_virtual && is_crypto;
+
+    return is_onramp_visible;
+};
+
+export default useOnrampVisible;

packages/stores/types.ts

@@ -69,6 +69,7 @@ type TClientStore = {
     logout: () => Promise<LogOutResponse>;
     should_allow_authentication: boolean;
     is_landing_company_loaded: boolean;
+    is_crypto: boolean;
 };
 
 type TCommonStoreError = {