From 23801934cd48e9a55ffda393bca85b83e033481d Mon Sep 17 00:00:00 2001 From: thisyahlen <104053934+thisyahlen-deriv@users.noreply.github.com> Date: Fri, 19 Jan 2024 16:14:56 +0800 Subject: [PATCH] thisyahlen/chore: update regulation edge cases if one of regulations does not have an account (#13046) * chore: update regulation edge cases if one of regulations does not have an account * fix: demo real swither bug * chore: komen --- packages/tradershub/src/AppContent.tsx | 2 +- .../src/components/CFDSection/CFDSection.tsx | 27 ++++-- .../CurrencySwitcher/CurrencySwitcher.tsx | 11 +++ .../DemoRealSwitcher/DemoRealSwitcher.tsx | 26 +++--- .../src/components/Modal/ModalHeader.tsx | 2 +- .../RegulationSwitcherDesktop.tsx | 11 ++- .../src/components/UIProvider/UIProvider.tsx | 11 ++- .../src/hooks/useRegulationFlags.ts | 82 +++++++++++++------ .../TradersHubRoute/TradersHubRoute.tsx | 19 +++-- 9 files changed, 133 insertions(+), 58 deletions(-) diff --git a/packages/tradershub/src/AppContent.tsx b/packages/tradershub/src/AppContent.tsx index 0ae6ced74d95..990cfc818788 100644 --- a/packages/tradershub/src/AppContent.tsx +++ b/packages/tradershub/src/AppContent.tsx @@ -10,7 +10,7 @@ const AppContent = () => { return (
-
+
diff --git a/packages/tradershub/src/components/CFDSection/CFDSection.tsx b/packages/tradershub/src/components/CFDSection/CFDSection.tsx index e33bcc5616c7..7cc75bff3e4e 100644 --- a/packages/tradershub/src/components/CFDSection/CFDSection.tsx +++ b/packages/tradershub/src/components/CFDSection/CFDSection.tsx @@ -1,12 +1,27 @@ import React from 'react'; +import useRegulationFlags from '../../hooks/useRegulationFlags'; +import { GetADerivAccountBanner } from '../GetADerivAccountBanner'; +import { useUIContext } from '../UIProvider'; import { CFDContent } from './CFDContent'; import { CFDHeading } from './CFDHeading'; -const CFDSection = () => ( -
- - -
-); +const CFDSection = () => { + const { getUIState } = useUIContext(); + const regulation = getUIState('regulation'); + const accountType = getUIState('accountType'); + const { isSuccess, noRealCRNonEUAccount, noRealMFEUAccount } = useRegulationFlags(regulation, accountType); + + return ( +
+ + {(noRealCRNonEUAccount || noRealMFEUAccount) && isSuccess && ( +
+ +
+ )} + +
+ ); +}; export default CFDSection; diff --git a/packages/tradershub/src/components/CurrencySwitcher/CurrencySwitcher.tsx b/packages/tradershub/src/components/CurrencySwitcher/CurrencySwitcher.tsx index c2b11e78abe1..3ecfacc194ea 100644 --- a/packages/tradershub/src/components/CurrencySwitcher/CurrencySwitcher.tsx +++ b/packages/tradershub/src/components/CurrencySwitcher/CurrencySwitcher.tsx @@ -5,10 +5,12 @@ import { Provider } from '@deriv/library'; import { Button, Text } from '@deriv/quill-design'; import { StandaloneChevronDownBoldIcon } from '@deriv/quill-icons'; import { IconToCurrencyMapper } from '../../constants/constants'; +import useRegulationFlags from '../../hooks/useRegulationFlags'; import { THooks } from '../../types'; import { CurrencySwitcherLoader } from '../Loaders'; import { Modal } from '../Modal'; import { TradingAccountsList } from '../TradingAccountsList'; +import { useUIContext } from '../UIProvider'; type AccountActionButtonProps = { balance: THooks.ActiveTradingAccount['balance']; @@ -47,9 +49,18 @@ const CurrencySwitcher = () => { const { data: activeAccount, isSuccess } = useActiveTradingAccount(); const isDemo = activeAccount?.is_virtual; const { show } = Provider.useModal(); + const { getUIState } = useUIContext(); + + const accountType = getUIState('accountType'); + + const regulation = getUIState('regulation'); + + const { noRealCRNonEUAccount, noRealMFEUAccount } = useRegulationFlags(regulation, accountType); const iconCurrency = isDemo ? 'virtual' : activeAccount?.currency ?? 'virtual'; + if (noRealCRNonEUAccount || noRealMFEUAccount) return null; + if (!isSuccess) return ; return ( diff --git a/packages/tradershub/src/components/DemoRealSwitcher/DemoRealSwitcher.tsx b/packages/tradershub/src/components/DemoRealSwitcher/DemoRealSwitcher.tsx index 28c30803543e..8bccec302fa9 100644 --- a/packages/tradershub/src/components/DemoRealSwitcher/DemoRealSwitcher.tsx +++ b/packages/tradershub/src/components/DemoRealSwitcher/DemoRealSwitcher.tsx @@ -3,6 +3,7 @@ import { useOnClickOutside } from 'usehooks-ts'; import { useActiveTradingAccount, useAuthorize, useTradingAccountsList } from '@deriv/api'; import { Button, qtMerge, Text } from '@deriv/quill-design'; import { LabelPairedChevronDownSmRegularIcon } from '@deriv/quill-icons'; +import { useUIContext } from '../UIProvider'; type TAccount = { label: string; @@ -19,19 +20,25 @@ const DemoRealSwitcher = () => { const { data: activeTradingAccount } = useActiveTradingAccount(); const { switchAccount } = useAuthorize(); const [isDropdownOpen, setIsDropdownOpen] = useState(false); - const [selected, setSelected] = useState(accountTypes[0]); - const { label, value } = selected; + const activeAccountType = activeTradingAccount?.is_virtual ? 'demo' : 'real'; + const activeType = accountTypes.find(account => account.value === activeAccountType); + const [selected, setSelected] = useState(activeType); + const { label, value } = selected || {}; + const { setUIState } = useUIContext(); const ref = useRef(null); useOnClickOutside(ref, () => setIsDropdownOpen(false)); + const firstRealLoginId = tradingAccountsList?.find(acc => !acc.is_virtual)?.loginid; + + const demoLoginId = tradingAccountsList?.find(acc => acc.is_virtual)?.loginid; + useEffect(() => { - const activeAccountType = activeTradingAccount?.is_virtual ? 'demo' : 'real'; - const activeAccount = accountTypes.find(account => account.value === activeAccountType); - if (activeAccount) { - setSelected(activeAccount); + if (activeType) { + setSelected(activeType); + setUIState('accountType', activeAccountType); } - }, [activeTradingAccount]); + }, [activeAccountType, activeType, setUIState]); useEffect(() => { setIsDropdownOpen(false); @@ -41,12 +48,9 @@ const DemoRealSwitcher = () => { setIsDropdownOpen(prevState => !prevState); }, []); - const firstRealLoginId = tradingAccountsList?.find(acc => !acc.is_virtual)?.loginid; - - const demoLoginId = tradingAccountsList?.find(acc => acc.is_virtual)?.loginid; - const selectAccount = (account: TAccount) => { setSelected(account); + setUIState('accountType', account.value); const loginId = account.value === 'demo' ? demoLoginId : firstRealLoginId; if (loginId) { diff --git a/packages/tradershub/src/components/Modal/ModalHeader.tsx b/packages/tradershub/src/components/Modal/ModalHeader.tsx index 7838be71623b..3cdc07b30c3f 100644 --- a/packages/tradershub/src/components/Modal/ModalHeader.tsx +++ b/packages/tradershub/src/components/Modal/ModalHeader.tsx @@ -30,7 +30,7 @@ const ModalHeader = ({ className, hideCloseButton = false, title, titleClassName className )} > - {title && {title}} + {title && {title}} {!hideCloseButton && }
); diff --git a/packages/tradershub/src/components/RegulationSwitcher/RegulationSwitcherDesktop.tsx b/packages/tradershub/src/components/RegulationSwitcher/RegulationSwitcherDesktop.tsx index 36a87a6130e2..c61e6513c3c3 100644 --- a/packages/tradershub/src/components/RegulationSwitcher/RegulationSwitcherDesktop.tsx +++ b/packages/tradershub/src/components/RegulationSwitcher/RegulationSwitcherDesktop.tsx @@ -1,15 +1,20 @@ import React, { useEffect } from 'react'; -import { useActiveTradingAccount, useAuthorize, useTradingAccountsList } from '@deriv/api'; +import { useActiveTradingAccount, useAuthorize, useIsDIELEnabled, useTradingAccountsList } from '@deriv/api'; import { Button, qtJoin } from '@deriv/quill-design'; import { LabelPairedCircleInfoMdRegularIcon } from '@deriv/quill-icons'; import { Text } from '@deriv-com/ui/dist/components/Text'; import { Regulation } from '../../constants/constants'; +import useRegulationFlags from '../../hooks/useRegulationFlags'; import { useUIContext } from '../UIProvider'; const RegulationSwitcherDesktop = () => { const { switchAccount } = useAuthorize(); const { data: tradingAccountsList } = useTradingAccountsList(); const { getUIState, setUIState } = useUIContext(); + const { data: isDIEL } = useIsDIELEnabled(); + const regulation = getUIState('regulation'); + const accountType = getUIState('accountType'); + const { isEU, isHighRisk } = useRegulationFlags(regulation, accountType); const realCRAccount = tradingAccountsList?.find(account => account.loginid.startsWith('CR'))?.loginid ?? ''; @@ -36,9 +41,9 @@ const RegulationSwitcherDesktop = () => { }; useEffect(() => { - if (activeTrading?.loginid.startsWith('CR')) { + if (activeTrading?.loginid.startsWith('CR') || isDIEL || isHighRisk) { setUIState('regulation', Regulation.NonEU); - } else if (activeTrading?.loginid.startsWith('MF')) { + } else if (activeTrading?.loginid.startsWith('MF') || isEU) { setUIState('regulation', Regulation.EU); } // eslint-disable-next-line react-hooks/exhaustive-deps diff --git a/packages/tradershub/src/components/UIProvider/UIProvider.tsx b/packages/tradershub/src/components/UIProvider/UIProvider.tsx index 377dc3447bbd..f051242af851 100644 --- a/packages/tradershub/src/components/UIProvider/UIProvider.tsx +++ b/packages/tradershub/src/components/UIProvider/UIProvider.tsx @@ -33,11 +33,14 @@ export const UIProvider = ({ children }: { children: React.ReactNode }) => { [uiState] ); - const updateUIState = (key: T, value: TUIState[T]) => { - setUIState(prevState => ({ ...prevState, [key]: value })); - }; + const updateUIState = useCallback( + (key: T, value: TUIState[T]) => { + setUIState(prevState => ({ ...prevState, [key]: value })); + }, + [setUIState] + ); - const providerValue = useMemo(() => ({ getUIState, setUIState: updateUIState }), [getUIState]); + const providerValue = useMemo(() => ({ getUIState, setUIState: updateUIState }), [getUIState, updateUIState]); return {children}; }; diff --git a/packages/tradershub/src/hooks/useRegulationFlags.ts b/packages/tradershub/src/hooks/useRegulationFlags.ts index 6044e6724fc1..52535debc813 100644 --- a/packages/tradershub/src/hooks/useRegulationFlags.ts +++ b/packages/tradershub/src/hooks/useRegulationFlags.ts @@ -1,4 +1,5 @@ -import { useActiveTradingAccount, useIsEuRegion, useTradingAccountsList } from '@deriv/api'; +import { useMemo } from 'react'; +import { useActiveTradingAccount, useIsEuRegion, useLandingCompany, useTradingAccountsList } from '@deriv/api'; import { Regulation } from '../constants/constants'; /** @@ -6,32 +7,61 @@ import { Regulation } from '../constants/constants'; * @param regulation 'EU' | 'Non-EU' * @returns { isDemo: boolean, isEU: boolean, isEUReal: boolean, isNonEU: boolean, isNonEUReal: boolean } */ -const useRegulationFlags = (regulation?: string) => { +const useRegulationFlags = (regulation?: string, accountType?: string) => { const { isEUCountry } = useIsEuRegion(); - const { data: activeTradingAccount } = useActiveTradingAccount(); - const { data: tradingAccountsList } = useTradingAccountsList(); - - const isEURegulation = regulation === Regulation.EU; - const isNonEURegulation = regulation === Regulation.NonEU; - - const isEU = isEUCountry || isEURegulation; - const isNonEU = !isEUCountry || isNonEURegulation; - const isDemo = activeTradingAccount?.is_virtual ?? false; - - const isEUReal = isEU && !isDemo; - const isNonEUReal = isNonEU && !isDemo; - - const noRealCRNonEU = isNonEU && !tradingAccountsList?.find(account => account.broker === 'CR'); - const noRealMFEU = isEU && !tradingAccountsList?.find(account => account.broker === 'MF'); - - return { - isEU, - isEUReal, - isNonEU, - isNonEUReal, - noRealCRNonEU, - noRealMFEU, - }; + const { data: activeTradingAccount, isSuccess: activeTradingAccountSuccess } = useActiveTradingAccount(); + const { data: tradingAccountsList, isSuccess: tradingAccountListSuccess } = useTradingAccountsList(); + const { data: landingCompany, isSuccess: landingCompanySuccess } = useLandingCompany(); + + return useMemo(() => { + const isHighRisk = + landingCompany?.financial_company?.shortcode === 'svg' && + landingCompany?.gaming_company?.shortcode === 'svg'; + + const isEURegulation = regulation === Regulation.EU; + const isNonEURegulation = regulation === Regulation.NonEU; + + const isEU = isEUCountry || isEURegulation; + const isNonEU = !isEUCountry || isNonEURegulation; + + const isRealAccount = !activeTradingAccount?.is_virtual || accountType === 'real'; + + const isEURealAccount = isEU && isRealAccount; + const isNonEURealAccount = isNonEU && isRealAccount; + + const noRealCRNonEUAccount = + isNonEU && !tradingAccountsList?.find(account => account.broker === 'CR') && isRealAccount; + + const noRealMFEUAccount = + isEU && !tradingAccountsList?.find(account => account.broker === 'MF') && isRealAccount; + + const hasActiveDerivAccount = !(noRealCRNonEUAccount || noRealMFEUAccount); + + const isSuccess = activeTradingAccountSuccess && tradingAccountListSuccess && landingCompanySuccess; + + return { + hasActiveDerivAccount, + isEU, + isEURealAccount, + isHighRisk, + isNonEU, + isNonEURealAccount, + isSuccess, + noRealCRNonEUAccount, + noRealMFEUAccount, + }; + }, [ + landingCompany?.financial_company?.shortcode, + landingCompany?.gaming_company?.shortcode, + regulation, + isEUCountry, + activeTradingAccount?.is_virtual, + accountType, + tradingAccountsList, + activeTradingAccountSuccess, + tradingAccountListSuccess, + landingCompanySuccess, + ]); }; export default useRegulationFlags; diff --git a/packages/tradershub/src/routes/TradersHubRoute/TradersHubRoute.tsx b/packages/tradershub/src/routes/TradersHubRoute/TradersHubRoute.tsx index c1de56a14c9b..06dd39f62faa 100644 --- a/packages/tradershub/src/routes/TradersHubRoute/TradersHubRoute.tsx +++ b/packages/tradershub/src/routes/TradersHubRoute/TradersHubRoute.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { useActiveTradingAccount, useIsDIELEnabled } from '@deriv/api'; +import { useIsDIELEnabled } from '@deriv/api'; import { Heading, useBreakpoint } from '@deriv/quill-design'; import { CFDSection, @@ -10,14 +10,21 @@ import { RegulationSwitcherMobile, TotalAssets, TradersHubContent, + useUIContext, } from '../../components'; +import useRegulationFlags from '../../hooks/useRegulationFlags'; const TradersHubRoute = () => { const { isMobile } = useBreakpoint(); const { data: isDIEL } = useIsDIELEnabled(); - const { data: activeTradingAccount } = useActiveTradingAccount(); + const { getUIState } = useUIContext(); + const accountType = getUIState('accountType'); + const regulation = getUIState('regulation'); + const isReal = accountType === 'real'; + const isDemo = accountType === 'demo'; + const { hasActiveDerivAccount } = useRegulationFlags(regulation, accountType); - const isSwitcherVisible = isDIEL && !activeTradingAccount?.is_virtual; + const isSwitcherVisible = isDIEL && isReal; if (isMobile) return ( @@ -49,13 +56,13 @@ const TradersHubRoute = () => { return (
-
+
Trader's Hub
- {isSwitcherVisible && } - +
{isSwitcherVisible && }
+ {(hasActiveDerivAccount || isDemo) && }