From 3d1e7daeaee143396aee96cf9417c3dcb665b84c Mon Sep 17 00:00:00 2001 From: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com> Date: Tue, 7 Feb 2023 15:01:03 +0800 Subject: [PATCH] Farzin/87456/Extract `is_onramp_tab_visible` method from cashier `OnRampStore` to reusable hook (#7475) * feat(core): :sparkles: add `is_crypto` method to `ClientStore` * feat(hooks): :sparkles: add `useOnrampVisible` hook * refactor(cashier): :recycle: replace `is_onramp_tab_visible` with `useOnrampVisible` * refactor(core): :recycle: replace `is_onramp_tab_visible` with `useOnrampVisible` * docs(cashier): :wastebasket: deprecated legacy `is_onramp_tab_visible` method --------- Co-authored-by: Farzin Mirzaie --- .../cashier/__tests__/cashier.spec.tsx | 23 ++----------------- .../src/containers/cashier/cashier.tsx | 11 +++++---- packages/cashier/src/stores/on-ramp-store.js | 1 + .../Layout/Header/toggle-menu-drawer.jsx | 7 +++--- packages/core/src/Stores/client-store.js | 6 +++++ packages/hooks/src/index.ts | 1 + packages/hooks/src/useOnrampVisible.ts | 11 +++++++++ packages/stores/types.ts | 1 + 8 files changed, 32 insertions(+), 29 deletions(-) create mode 100644 packages/hooks/src/useOnrampVisible.ts diff --git a/packages/cashier/src/containers/cashier/__tests__/cashier.spec.tsx b/packages/cashier/src/containers/cashier/__tests__/cashier.spec.tsx index bb6950fb2709..48ed92719727 100644 --- a/packages/cashier/src/containers/cashier/__tests__/cashier.spec.tsx +++ b/packages/cashier/src/containers/cashier/__tests__/cashier.spec.tsx @@ -83,9 +83,6 @@ describe('', () => { 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('', () => { 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('', () => { 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('', () => { 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('', () => { // 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('', () => { 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('', () => { 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('', () => { transaction_history: { is_crypto_transactions_visible: true, }, - onramp: { - is_onramp_tab_visible: true, - }, payment_agent_transfer: { is_payment_agent_transfer_visible: true, }, diff --git a/packages/cashier/src/containers/cashier/cashier.tsx b/packages/cashier/src/containers/cashier/cashier.tsx index ebc4fdfdecc4..a201ed3241a0 100644 --- a/packages/cashier/src/containers/cashier/cashier.tsx +++ b/packages/cashier/src/containers/cashier/cashier.tsx @@ -11,14 +11,15 @@ 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 { TRootStore, TRoute } from '../../types'; -import './cashier.scss'; -import { observer, useStore } from '@deriv/stores'; import { useCashierStore } from '../../stores/useCashierStores'; +import './cashier.scss'; type TCashierProps = RouteComponentProps & { routes: TRoute[]; @@ -49,7 +50,6 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier general_store, account_transfer, transaction_history, - onramp, payment_agent_transfer, payment_agent, account_prompt_dialog, @@ -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({ diff --git a/packages/cashier/src/stores/on-ramp-store.js b/packages/cashier/src/stores/on-ramp-store.js index 7fb7bf3b312d..9ced7a88160d 100644 --- a/packages/cashier/src/stores/on-ramp-store.js +++ b/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; diff --git a/packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx b/packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx index 36e401dee63c..a1b337d2d519 100644 --- a/packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx +++ b/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 ( diff --git a/packages/core/src/Stores/client-store.js b/packages/core/src/Stores/client-store.js index d549569ad811..dd68425c70cf 100644 --- a/packages/core/src/Stores/client-store.js +++ b/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); diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts index f186da6b191f..4417d0dd313a 100644 --- a/packages/hooks/src/index.ts +++ b/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'; diff --git a/packages/hooks/src/useOnrampVisible.ts b/packages/hooks/src/useOnrampVisible.ts new file mode 100644 index 000000000000..985ff0161894 --- /dev/null +++ b/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; diff --git a/packages/stores/types.ts b/packages/stores/types.ts index 2cddd4661ae7..1663a40b2c21 100644 --- a/packages/stores/types.ts +++ b/packages/stores/types.ts @@ -69,6 +69,7 @@ type TClientStore = { logout: () => Promise; should_allow_authentication: boolean; is_landing_company_loaded: boolean; + is_crypto: boolean; }; type TCommonStoreError = {