[trah]thisyahlen/2290/chore: add options and multipliers section for …

…tradershub v2 (#12467)

* chore: add options and multipliers section for tradershub v2

* chore: update quill version

* chore: add import for FC

packages/tradershub/package.json

@@ -15,7 +15,7 @@
     "dependencies": {
         "@deriv/api": "^1.0.0",
         "@deriv/integration": "^1.0.0",
-        "@deriv/quill-design": "^1.2.15",
+        "@deriv/quill-design": "^1.3.2",
         "@deriv/react-joyride": "^2.6.2",
         "@deriv/utils": "^1.0.0",
         "@tanstack/react-table": "^8.10.3",

packages/tradershub/src/App.tsx

@@ -11,7 +11,6 @@ const App: FC = () => (
             <BreakpointProvider>
                 <AppContent />
             </BreakpointProvider>
-            <AppContent />
         </ModalProvider>
     </APIProvider>
 );

packages/tradershub/src/components/OptionsAndMultiplersSection/OptionsAndMultiplersSection.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Heading, Text, useBreakpoint } from '@deriv/quill-design';
+import { OptionsAndMultipliersContent } from './OptionsAndMultipliersContent';
+
+const OptionsAndMultiplersSection = () => {
+    const { isMobile } = useBreakpoint();
+    return (
+        <div className='border-solid p-1200 rounded-1200 border-xs border-opacity-black-100 '>
+            <div className='flex-col w-full gap-1200'>
+                {!isMobile && <Heading.H4>Options & multipliers</Heading.H4>}
+                <Text size='sm'>
+                    Earn a range of payouts by correctly predicting market price movements with
+                    <a
+                        className='underline cursor-pointer text-solid-red-700 underline-offset-2 px-200'
+                        href='https://deriv.com/trade-types/options/digital-options/up-and-down/'
+                        key={0}
+                        rel='noopener noreferrer'
+                        target='_blank'
+                    >
+                        options
+                    </a>
+                    , or get the upside of CFDs without risking more than your initial stake with
+                    <a
+                        className='underline cursor-pointer text-solid-red-700 underline-offset-2 px-200'
+                        href='https://deriv.com/trade-types/multiplier/'
+                        key={1}
+                        rel='noopener noreferrer'
+                        target='_blank'
+                    >
+                        multipliers
+                    </a>
+                    .
+                </Text>
+
+                <OptionsAndMultipliersContent />
+            </div>
+        </div>
+    );
+};
+export default OptionsAndMultiplersSection;

packages/tradershub/src/components/OptionsAndMultiplersSection/OptionsAndMultipliersContent/OptionsAndMultipliersContent.tsx

@@ -0,0 +1,116 @@
+import React, { FC } from 'react';
+import { useHistory } from 'react-router-dom';
+import { useActiveTradingAccount } from '@deriv/api';
+import { Button, Text, useBreakpoint } from '@deriv/quill-design';
+import { optionsAndMultipliersContent } from '../../../constants/constants';
+import { getStaticUrl, getUrlBinaryBot, getUrlSmartTrader } from '../../../helpers/urls';
+import { TradingAccountCard } from '../../TradingAccountCard';
+
+type TShowButtonProps = Pick<typeof optionsAndMultipliersContent[number], 'isExternal' | 'redirect'>;
+
+type TLinkTitleProps = Pick<typeof optionsAndMultipliersContent[number], 'icon' | 'title'>;
+
+const LinkTitle: FC<TLinkTitleProps> = ({ icon, title }) => {
+    const handleClick = (
+        event:
+            | React.KeyboardEvent<HTMLButtonElement>
+            | React.MouseEvent<HTMLButtonElement, MouseEvent>
+            | React.MouseEvent<HTMLDivElement, MouseEvent>
+    ) => {
+        event.persist();
+        switch (title) {
+            case 'Deriv Trader':
+                window.open(getStaticUrl(`/dtrader`));
+                break;
+            case 'Deriv Bot':
+                window.open(getStaticUrl(`/dbot`));
+                break;
+            case 'SmartTrader':
+                window.open(getUrlSmartTrader());
+                break;
+            case 'Binary Bot':
+                window.open(getUrlBinaryBot());
+                break;
+            case 'Deriv GO':
+                window.open(getStaticUrl('/deriv-go'));
+                break;
+            default:
+                break;
+        }
+    };
+    return (
+        // Had to result to button instead of div because of sonarcloud
+        <button
+            className='cursor-pointer'
+            onClick={event => handleClick(event)}
+            onKeyDown={event => {
+                if (event.key === 'Enter') {
+                    handleClick(event);
+                }
+            }}
+        >
+            {icon}
+        </button>
+    );
+};
+
+const ShowOpenButton = ({ isExternal, redirect }: TShowButtonProps) => {
+    const history = useHistory();
+
+    const { data } = useActiveTradingAccount();
+    if (data?.loginid) {
+        return (
+            <Button
+                className='rounded-200'
+                onClick={() => {
+                    if (isExternal) {
+                        window.open(redirect, '_blank');
+                    } else {
+                        history.push(redirect);
+                    }
+                }}
+            >
+                Open
+            </Button>
+        );
+    }
+    return null;
+};
+
+const OptionsAndMultipliersContent = () => {
+    const { isMobile } = useBreakpoint();
+    const { data } = useActiveTradingAccount();
+
+    return (
+        <div className='grid w-full grid-cols-1 gap-200 lg:grid-cols-3 lg:gap-x-1200 lg:gap-y-200'>
+            {optionsAndMultipliersContent.map(account => {
+                const trailingComponent = () => (
+                    <ShowOpenButton isExternal={account.isExternal} redirect={account.redirect} />
+                );
+
+                const leadingComponent = () => (
+                    <LinkTitle icon={data?.loginid || !isMobile ? account.icon : account.smallIcon} title={title} />
+                );
+
+                const title = account.title;
+                return (
+                    <TradingAccountCard
+                        {...account}
+                        key={`trading-account-card-${account.title}`}
+                        leading={leadingComponent}
+                        trailing={trailingComponent}
+                    >
+                        <div className='flex flex-col flex-grow'>
+                            <Text bold size='sm'>
+                                {account.title}
+                            </Text>
+                            <Text size='xs'>{account.description}</Text>
+                        </div>
+                    </TradingAccountCard>
+                );
+            })}
+        </div>
+    );
+};
+
+export default OptionsAndMultipliersContent;

packages/tradershub/src/components/OptionsAndMultiplersSection/OptionsAndMultipliersContent/index.ts

@@ -0,0 +1 @@
+export { default as OptionsAndMultipliersContent } from './OptionsAndMultipliersContent';

packages/tradershub/src/components/OptionsAndMultiplersSection/index.ts

@@ -0,0 +1 @@
+export { default as OptionsAndMultiplersSection } from './OptionsAndMultiplersSection';

packages/tradershub/src/components/index.ts

@@ -3,4 +3,5 @@ export * from './Dialog';
 export * from './GetADerivAccountBanner';
 export * from './ModalProvider';
 export * from './ModalStepWrapper';
+export * from './OptionsAndMultiplersSection';
 export * from './TradingAccountCard';

packages/tradershub/src/routes/Router.tsx

@@ -4,10 +4,11 @@ import { TradersHubRoute } from './TradersHubRoute';
 
 const prefix = '/traders-hub';
 
-type TRoutes = `${typeof prefix}${'' | '/compare-account' | 'onboarding'}`;
+type TRoutes = `${typeof prefix}${'' | '/compare-account' | '/onboarding'}`;
 
 declare module 'react-router-dom' {
-    export function useHistory(): { push: (path: TRoutes) => void };
+    // Had to put string here cause of the difference in the type of the path we have throughout the app
+    export function useHistory(): { push: (path: TRoutes | string) => void }; // NOSONAR
 
     export function useRouteMatch(path: TRoutes): boolean;
 }

packages/tradershub/src/routes/TradersHubRoute/TradersHubRoute.tsx

@@ -1,80 +1,63 @@
 import React, { FC } from 'react';
 import { Button, Heading, Text } from '@deriv/quill-design';
+import { OptionsAndMultiplersSection } from '../../components';
 
-const TradersHubRoute: FC = () => (
-    <div className='flex flex-col gap-1200'>
-        {/* Header */}
-        <div className='flex align-start items-center justify-between gap-100'>
-            <Heading.H3>Trader&apos;s Hub</Heading.H3>
-            <div className='flex flex-col items-end justify-end'>
-                <Text size='sm'>Total assets</Text>
-                <Heading.H3 className='text-status-light-information'>10,000.00 USD</Heading.H3>
-            </div>
-        </div>
-        {/* Deriv Apps */}
-        <div className='p-1200 rounded-1200 border-xs border-solid border-opacity-black-100'>
-            <div className='pb-1200 lg:w-4/6'>
-                <Heading.H4>Options & multipliers</Heading.H4>
-                <Text size='sm'>
-                    Earn a range of payouts by correctly predicting market price movements with{' '}
-                    <a className='text-solid-coral-700 underline underline-offset-2 cursor-pointer'>options</a> or get
-                    the upside of CFDs without risking more than your initial stake with{' '}
-                    <a className='text-solid-coral-700 underline underline-offset-2 cursor-pointer'>multipliers</a>.
-                </Text>
-            </div>
-            <div className='grid grid-cols-1 gap-4 lg:grid-cols-3 lg:gap-x-1200 lg:gap-y-200'>
-                <div className='h-4000 rounded-300 bg-solid-slate-100' />
-                <div className='h-4000 rounded-300 bg-solid-slate-100' />
-                <div className='h-4000 rounded-300 bg-solid-slate-100' />
-                <div className='h-4000 rounded-300 bg-solid-slate-100' />
-                <div className='h-4000 rounded-300 bg-solid-slate-100' />
-                <div className='h-4000 rounded-300 bg-solid-slate-100' />
-            </div>
-        </div>
-        {/* CFD Apps */}
-        <div className='p-1200 rounded-1200 border-xs border-solid border-opacity-black-100'>
-            <div className='pb-1200'>
-                <div className='flex items-center gap-200'>
-                    <Heading.H4>CFDs</Heading.H4>
-                    <Button className='no-underline' colorStyle='coral' size='sm' variant='tertiary'>
-                        Compare Accounts
-                    </Button>
+const TradersHubRoute: FC = () => {
+    return (
+        <div className='flex flex-col gap-1200'>
+            <div className='flex items-center justify-between align-start gap-100'>
+                <Heading.H3>Trader&apos;s Hub</Heading.H3>
+                <div className='flex flex-col items-end justify-end'>
+                    <Text size='sm'>Total assets</Text>
+                    <Heading.H3 className='text-status-light-information'>10,000.00 USD</Heading.H3>
                 </div>
-                <Text size='sm'>
-                    Trade with leverage and tight spreads for better returns on trades.{' '}
-                    <a className='text-solid-coral-700 underline underline-offset-2 cursor-pointer'>Learn more</a>
-                </Text>
             </div>
-            <div className='flex flex-col gap-y-1200'>
-                <div>
-                    <Text bold className='pb-800' size='md'>
-                        Deriv MT5
-                    </Text>
-                    <div className='grid grid-cols-1 lg:grid-cols-3 gap-1200'>
-                        <div className='h-4000 rounded-300 bg-solid-slate-100' />
-                        <div className='h-4000 rounded-300 bg-solid-slate-100' />
-                        <div className='h-4000 rounded-300 bg-solid-slate-100' />
+            <OptionsAndMultiplersSection />
+
+            <div className='border-solid p-1200 rounded-1200 border-xs border-opacity-black-100'>
+                <div className='pb-1200'>
+                    <div className='flex items-center gap-200'>
+                        <Heading.H4>CFDs</Heading.H4>
+                        <Button className='no-underline' colorStyle='coral' size='sm' variant='tertiary'>
+                            Compare Accounts
+                        </Button>
                     </div>
-                </div>
-                <div>
-                    <Text bold className='pb-800' size='md'>
-                        Deriv cTrader
+                    <Text size='sm'>
+                        Trade with leverage and tight spreads for better returns on trades.{' '}
+                        <a className='underline cursor-pointer text-solid-coral-700 underline-offset-2'>Learn more</a>
                     </Text>
-                    <div className='grid grid-cols-1 lg:grid-cols-3 gap-1200'>
-                        <div className='h-4000 rounded-300 bg-solid-slate-100' />
-                    </div>
                 </div>
-                <div>
-                    <Text bold className='pb-800' size='md'>
-                        Other CFDs
-                    </Text>
-                    <div className='grid grid-cols-1 lg:grid-cols-3 gap-1200'>
-                        <div className='h-4000 rounded-300 bg-solid-slate-100' />
+                <div className='flex flex-col gap-y-1200'>
+                    <div>
+                        <Text bold className='pb-800' size='md'>
+                            Deriv MT5
+                        </Text>
+                        <div className='grid grid-cols-1 lg:grid-cols-3 gap-1200'>
+                            <div className='h-4000 rounded-300 bg-solid-slate-100' />
+                            <div className='h-4000 rounded-300 bg-solid-slate-100' />
+                            <div className='h-4000 rounded-300 bg-solid-slate-100' />
+                        </div>
+                    </div>
+                    <div>
+                        <Text bold className='pb-800' size='md'>
+                            Deriv cTrader
+                        </Text>
+                        <div className='grid grid-cols-1 lg:grid-cols-3 gap-1200'>
+                            <div className='h-4000 rounded-300 bg-solid-slate-100' />
+                        </div>
+                    </div>
+                    <div>
+                        <Text bold className='pb-800' size='md'>
+                            Other CFDs
+                        </Text>
+                        <div className='grid grid-cols-1 lg:grid-cols-3 gap-1200'>
+                            <div className='h-4000 rounded-300 bg-solid-slate-100' />
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
-    </div>
-);
+    );
+};
 
 export default TradersHubRoute;