thisyahlen/chore: use ui library for tabs (#13182)

* chore: use ui library for tabs * chore: remove test stuff * fix: latest * chore: update logic * chore: komen
deriv-com · Jan 30, 2024 · 0be857a · 0be857a
1 parent 9ff800e
commit 0be857a
Show file tree

Hide file tree

Showing 8 changed files with 109 additions and 91 deletions.
diff --git a/packages/account-v2/package.json b/packages/account-v2/package.json
@@ -11,7 +11,7 @@
         "start": "rimraf dist && npm run test && npm run serve"
     },
     "dependencies": {
-        "@deriv-com/ui": "0.0.1-beta.8",
+        "@deriv-com/ui": "0.0.1-beta.9",
         "@deriv/api": "^1.0.0",
         "@deriv/library": "^1.0.0",
         "@deriv/quill-design": "^1.3.2",

diff --git a/packages/p2p-v2/package.json b/packages/p2p-v2/package.json
@@ -12,7 +12,7 @@
         "start": "rimraf dist && npm run test && npm run serve"
     },
     "dependencies": {
-        "@deriv-com/ui": "0.0.1-beta.8",
+        "@deriv-com/ui": "0.0.1-beta.9",
         "@deriv/api": "^1.0.0",
         "@deriv/integration": "^1.0.0",
         "@deriv/react-joyride": "^2.6.2",

diff --git a/packages/tradershub/package.json b/packages/tradershub/package.json
@@ -18,7 +18,7 @@
         "@deriv/library": "^1.0.0",
         "@deriv/quill-design": "^1.3.2",
         "@deriv/quill-icons": "^1.17.0",
-        "@deriv-com/ui": "0.0.1-beta.8",
+        "@deriv-com/ui": "0.0.1-beta.9",
         "@deriv/react-joyride": "^2.6.2",
         "@deriv/utils": "^1.0.0",
         "@tanstack/react-table": "^8.10.3",

diff --git a/packages/tradershub/src/App.tsx b/packages/tradershub/src/App.tsx
@@ -3,7 +3,7 @@ import { APIProvider } from '@deriv/api';
 import { Provider } from '@deriv/library';
 import { BreakpointProvider } from '@deriv/quill-design';
 import AppContent from './AppContent';
-import { ContentSwitcher, UIProvider } from './components';
+import { UIProvider } from './components';
 import './index.scss';
 
 const App = () => (
@@ -12,9 +12,7 @@ const App = () => (
             <BreakpointProvider>
                 <Provider.CFDProvider>
                     <Provider.ModalProvider>
-                        <ContentSwitcher>
-                            <AppContent />
-                        </ContentSwitcher>
+                        <AppContent />
                     </Provider.ModalProvider>
                 </Provider.CFDProvider>
             </BreakpointProvider>

diff --git a/packages/tradershub/src/components/RegulationSwitcher/RegulationSwitcherDesktop.tsx b/packages/tradershub/src/components/RegulationSwitcher/RegulationSwitcherDesktop.tsx
@@ -1,57 +1,18 @@
-import React, { useEffect } from 'react';
-import { useActiveTradingAccount, useAuthorize, useTradingAccountsList } from '@deriv/api';
+import React from 'react';
 import { Provider } from '@deriv/library';
-import { Button, qtJoin } from '@deriv/quill-design';
 import { LabelPairedCircleInfoMdRegularIcon } from '@deriv/quill-icons';
+import { Tab, Tabs } from '@deriv-com/ui/dist/components/Tabs';
 import { Text } from '@deriv-com/ui/dist/components/Text';
-import { Regulation } from '../../constants/constants';
-import useRegulationFlags from '../../hooks/useRegulationFlags';
+import { useRegulationSwitcher } from '../../hooks/useRegulationSwitcher';
 import { RegulationModal } from '../../modals';
 import { useUIContext } from '../UIProvider';
 
 const RegulationSwitcherDesktop = () => {
-    const { switchAccount } = useAuthorize();
-    const { data: tradingAccountsList } = useTradingAccountsList();
-    const { getUIState, setUIState } = useUIContext();
+    const { getUIState } = useUIContext();
     const { show } = Provider.useModal();
-
-    const regulation = getUIState('regulation');
-    const accountType = getUIState('accountType');
-    const { isEU, isHighRisk } = useRegulationFlags(regulation, accountType);
-
-    const realCRAccount = tradingAccountsList?.find(account => account.loginid.startsWith('CR'))?.loginid ?? '';
-
-    const realMFAccount = tradingAccountsList?.find(account => account.loginid.startsWith('MF'))?.loginid ?? '';
-
-    const { data: activeTrading } = useActiveTradingAccount();
-
-    const buttons = [{ label: Regulation.NonEU }, { label: Regulation.EU }];
-
+    const { buttons, handleButtonClick } = useRegulationSwitcher();
     const activeRegulation = getUIState('regulation');
 
-    const handleButtonClick = (label: string) => {
-        if (label === Regulation.NonEU) {
-            setUIState('regulation', Regulation.NonEU);
-            if (realCRAccount) {
-                switchAccount(realCRAccount);
-            }
-        } else {
-            setUIState('regulation', Regulation.EU);
-            if (realMFAccount) {
-                switchAccount(realMFAccount);
-            }
-        }
-    };
-
-    useEffect(() => {
-        if (activeTrading?.loginid.startsWith('CR') || isHighRisk) {
-            setUIState('regulation', Regulation.NonEU);
-        } else if (activeTrading?.loginid.startsWith('MF') || isEU) {
-            setUIState('regulation', Regulation.EU);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
     return (
         <div className='flex items-center gap-400'>
             <div className='flex items-center gap-400'>
@@ -61,22 +22,17 @@ const RegulationSwitcherDesktop = () => {
                     onClick={() => show(<RegulationModal />)}
                 />
             </div>
-            <div className='flex bg-system-light-secondary-background rounded-400 p-200 gap-200 w-[200px] h-2000'>
+            <Tabs
+                activeTab={activeRegulation}
+                className='flex rounded-300 p-200 w-[200px] h-2000'
+                key={activeRegulation}
+                onChange={index => handleButtonClick(buttons[index].label)}
+                variant='primary'
+            >
                 {buttons.map(button => (
-                    <Button
-                        className={qtJoin(
-                            'rounded-200',
-                            activeRegulation !== button.label && 'bg-transparent font-regular'
-                        )}
-                        colorStyle='white'
-                        fullWidth
-                        key={`tradershub-tab-${button.label}`}
-                        onClick={() => handleButtonClick(button.label)}
-                    >
-                        {button.label}
-                    </Button>
+                    <Tab className='rounded-200' key={button.label} title={button.label} />
                 ))}
-            </div>
+            </Tabs>
         </div>
     );
 };

diff --git a/packages/tradershub/src/components/RegulationSwitcher/RegulationSwitcherMobile.tsx b/packages/tradershub/src/components/RegulationSwitcher/RegulationSwitcherMobile.tsx
@@ -1,25 +1,33 @@
-// TODO: Add logic to switch between EU and non-EU
 import React from 'react';
 import { Provider } from '@deriv/library';
-import { Tab } from '@deriv/quill-design';
+import { Tab, Tabs } from '@deriv-com/ui/dist/components/Tabs';
+import { useRegulationSwitcher } from '../../hooks/useRegulationSwitcher';
 import { RegulationModal } from '../../modals';
 import InfoIcon from '../../public/images/ic-info-outline.svg';
+import { useUIContext } from '../UIProvider';
 
 const RegulationSwitcherMobile = () => {
     const { show } = Provider.useModal();
+    const { getUIState } = useUIContext();
 
-    const activeClassName =
-        'aria-selected:font-bold active:font-bold aria-selected:border-b-brand-coral active:border-b-brand-coral';
+    const { buttons, handleButtonClick } = useRegulationSwitcher();
+
+    const activeRegulation = getUIState('regulation');
 
     return (
         <div className='flex items-center gap-400'>
             <InfoIcon className='h-auto w-800' onClick={() => show(<RegulationModal />)} />
-            <Tab.Container size='sm'>
-                <Tab.List>
-                    <Tab.Trigger className={activeClassName}>Non - EU</Tab.Trigger>
-                    <Tab.Trigger className={activeClassName}>EU</Tab.Trigger>
-                </Tab.List>
-            </Tab.Container>
+            <Tabs
+                activeTab={activeRegulation}
+                className='flex rounded-300 p-200 w-[120px] h-2000'
+                key={activeRegulation}
+                onChange={index => handleButtonClick(buttons[index].label)}
+                variant='secondary'
+            >
+                {buttons.map(button => (
+                    <Tab className='rounded-200' key={button.label} title={button.label} />
+                ))}
+            </Tabs>
         </div>
     );
 };

diff --git a/packages/tradershub/src/hooks/useRegulationSwitcher.ts b/packages/tradershub/src/hooks/useRegulationSwitcher.ts
@@ -0,0 +1,60 @@
+import { useEffect } from 'react';
+import { useActiveTradingAccount, useAuthorize, useTradingAccountsList } from '@deriv/api';
+import { useUIContext } from '../components';
+import { Regulation } from '../constants/constants';
+import useRegulationFlags from './useRegulationFlags';
+
+/**
+ * @description This hook contains the logic that is used to switch between EU and non-EU accounts
+ * @returns  {buttons: {label: string}[], handleButtonClick: (label: string) => void}
+ * @example
+ * const { buttons, handleButtonClick } = useRegulationSwitcher();
+ */
+export const useRegulationSwitcher = () => {
+    const { switchAccount } = useAuthorize();
+    const { data: tradingAccountsList } = useTradingAccountsList();
+    const { getUIState, setUIState } = useUIContext();
+
+    const currentRegulation = getUIState('regulation');
+    const accountType = getUIState('accountType');
+    const { isEU, isHighRisk } = useRegulationFlags(currentRegulation, accountType);
+
+    const realCRAccount = tradingAccountsList?.find(account => account.loginid.startsWith('CR'))?.loginid ?? '';
+    const realMFAccount = tradingAccountsList?.find(account => account.loginid.startsWith('MF'))?.loginid ?? '';
+
+    const { data: activeTrading } = useActiveTradingAccount();
+
+    const buttons = [{ label: Regulation.NonEU }, { label: Regulation.EU }];
+
+    const handleButtonClick = (label: string) => {
+        if (label !== currentRegulation) {
+            if (label === Regulation.NonEU) {
+                setUIState('regulation', Regulation.NonEU);
+                if (realCRAccount) {
+                    switchAccount(realCRAccount);
+                }
+            } else {
+                setUIState('regulation', Regulation.EU);
+                if (realMFAccount) {
+                    switchAccount(realMFAccount);
+                }
+            }
+        }
+    };
+
+    useEffect(() => {
+        if (activeTrading?.loginid.startsWith('CR') || isHighRisk) {
+            setUIState('regulation', Regulation.NonEU);
+        } else if (activeTrading?.loginid.startsWith('MF') || isEU) {
+            setUIState('regulation', Regulation.EU);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return {
+        // Contains the array of buttons to be rendered in the switcher E.g. [{label: 'EU'}, {label: 'Non-EU'}]
+        buttons,
+        // Contains the function to be called when a button is clicked and to update the state E.g. (label: string) => void
+        handleButtonClick,
+    };
+};
diff --git a/packages/tradershub/src/routes/TradersHubRoute/TradersHubRoute.tsx b/packages/tradershub/src/routes/TradersHubRoute/TradersHubRoute.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { useIsDIELEnabled } from '@deriv/api';
 import { Heading, useBreakpoint } from '@deriv/quill-design';
+import { Tab, Tabs } from '@deriv-com/ui/dist/components/Tabs';
 import {
     CFDSection,
-    ContentSwitcher,
     DemoRealSwitcher,
     OptionsAndMultipliersSection,
     RegulationSwitcherDesktop,
@@ -25,6 +25,7 @@ const TradersHubRoute = () => {
     const { hasActiveDerivAccount } = useRegulationFlags(regulation, accountType);
 
     const isSwitcherVisible = isDIEL && isReal;
+    const isTotalAssetsVisible = hasActiveDerivAccount || isDemo;
 
     if (isMobile)
         return (
@@ -37,20 +38,15 @@ const TradersHubRoute = () => {
                     {isSwitcherVisible && <RegulationSwitcherMobile />}
                 </div>
                 <div />
-                <div className='grid place-content-center pb-1200'>
-                    <TotalAssets />
-                </div>
-                <ContentSwitcher>
-                    <ContentSwitcher.HeaderList list={['Options & Multipliers', 'CFDs']} />
-                    <ContentSwitcher.PanelContainer>
-                        <ContentSwitcher.Panel>
-                            <OptionsAndMultipliersSection />
-                        </ContentSwitcher.Panel>
-                        <ContentSwitcher.Panel>
-                            <CFDSection />
-                        </ContentSwitcher.Panel>
-                    </ContentSwitcher.PanelContainer>
-                </ContentSwitcher>
+                <div className='grid place-content-center pb-1200'>{isTotalAssetsVisible && <TotalAssets />}</div>
+                <Tabs className='w-full rounded-300 p-200'>
+                    <Tab className='rounded-200 py-300 px-400' title='Options & Multipliers'>
+                        <OptionsAndMultipliersSection />
+                    </Tab>
+                    <Tab className='rounded-200 py-300 px-400' title='CFDs'>
+                        <CFDSection />
+                    </Tab>
+                </Tabs>
             </div>
         );
 
@@ -62,7 +58,7 @@ const TradersHubRoute = () => {
                     <DemoRealSwitcher />
                 </div>
                 <div>{isSwitcherVisible && <RegulationSwitcherDesktop />}</div>
-                {(hasActiveDerivAccount || isDemo) && <TotalAssets />}
+                {isTotalAssetsVisible && <TotalAssets />}
             </div>
             <TradersHubContent />
         </div>