chore: update edge cases (#13150)

packages/tradershub/src/components/CFDSection/CFDHeading/CFDHeading.tsx

@@ -2,11 +2,23 @@ import React, { Fragment } from 'react';
 import { useHistory } from 'react-router-dom';
 import { useIsEuRegion } from '@deriv/api';
 import { Button, Heading, qtMerge, Text, useBreakpoint } from '@deriv/quill-design';
+import useRegulationFlags from '../../../hooks/useRegulationFlags';
 import { TitleDescriptionLoader } from '../../Loaders';
 import { StaticLink } from '../../StaticLink';
+import { useUIContext } from '../../UIProvider';
 
 const CompareAccountsButton = ({ className }: { className?: string }) => {
     const history = useHistory();
+    const { getUIState } = useUIContext();
+
+    const accountType = getUIState('accountType');
+
+    const regulation = getUIState('regulation');
+
+    const { isEU } = useRegulationFlags(regulation, accountType);
+
+    const title = isEU ? 'Account information' : 'Compare Accounts';
+
     return (
         <Button
             className={qtMerge('no-underline', className)}
@@ -15,7 +27,7 @@ const CompareAccountsButton = ({ className }: { className?: string }) => {
             size='sm'
             variant='tertiary'
         >
-            Compare Accounts
+            {title}
         </Button>
     );
 };

packages/tradershub/src/components/GetDerivAccount/GetDerivAccount.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Options from '../../public/images/options.svg';
+import { TradingAccountCard, TradingAccountCardContent, TradingAccountCardLightButton } from '../TradingAccountCard';
+
+const GetDerivAccount = () => {
+    const title = 'Deriv account';
+
+    const description = 'Get a real Deriv account, start trading and manage your funds.';
+
+    return (
+        <div className='grid grid-cols-1 gap-200 lg:grid-cols-3 lg:gap-x-1200 lg:gap-y-200'>
+            <TradingAccountCard leading={() => <Options />} trailing={() => <TradingAccountCardLightButton />}>
+                <TradingAccountCardContent title={title}>{description}</TradingAccountCardContent>
+            </TradingAccountCard>
+        </div>
+    );
+};
+
+export default GetDerivAccount;

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

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

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

@@ -69,24 +69,30 @@ const LinkTitle = ({ icon, title }: TLinkTitleProps) => {
 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 { getUIState } = useUIContext();
+
+    const accountType = getUIState('accountType');
+
+    const regulation = getUIState('regulation');
+
+    const { noRealCRNonEUAccount, noRealMFEUAccount } = useRegulationFlags(regulation, accountType);
+
+    if (noRealCRNonEUAccount || noRealMFEUAccount) return null;
+
+    return (
+        <Button
+            className='rounded-200'
+            onClick={() => {
+                if (isExternal) {
+                    window.open(redirect, '_blank');
+                } else {
+                    history.push(redirect);
+                }
+            }}
+        >
+            Open
+        </Button>
+    );
 };
 
 /**

packages/tradershub/src/components/OptionsAndMultipliersSection/OptionsAndMultipliersSection.tsx

@@ -1,4 +1,7 @@
 import React from 'react';
+import useRegulationFlags from '../../hooks/useRegulationFlags';
+import { GetDerivAccount } from '../GetDerivAccount';
+import { useUIContext } from '../UIProvider';
 import { OptionsAndMultipliersContent } from './OptionsAndMultipliersContent';
 import { OptionsAndMultipliersHeading } from './OptionsAndMultipliersHeading';
 
@@ -7,10 +10,15 @@ import { OptionsAndMultipliersHeading } from './OptionsAndMultipliersHeading';
  * @returns {React.ElementType} The `OptionsAndMultipliersSection` component.
  */
 const OptionsAndMultipliersSection = () => {
+    const { getUIState } = useUIContext();
+    const regulation = getUIState('regulation');
+    const accountType = getUIState('accountType');
+    const { isSuccess, noRealCRNonEUAccount, noRealMFEUAccount } = useRegulationFlags(regulation, accountType);
     return (
         <div className='overflow-y-scroll pt-800 lg:border-solid lg:p-1200 lg:rounded-1200 lg:border-xs lg:border-opacity-black-100 '>
             <div className='flex-col justify-between w-full gap-1200 '>
                 <OptionsAndMultipliersHeading />
+                {(noRealCRNonEUAccount || noRealMFEUAccount) && isSuccess && <GetDerivAccount />}
                 <OptionsAndMultipliersContent />
             </div>
         </div>

packages/tradershub/src/features/cfd/constants.tsx

@@ -70,13 +70,13 @@ export const Category = {
 export const MarketTypeDetails = (isEU?: boolean): TMarketTypeDetails => ({
     all: {
         description:
-            'Trade swap-free CFDs on MT5 with synthetics, forex, stocks, stock indices, cryptocurrencies and ETFs',
+            'Trade swap-free CFDs on MT5 with forex, stocks, stock indices, commodities, cryptocurrencies, ETFs and synthetic indices.',
         icon: <SwapFreeMT5Icon />,
         title: 'Swap-Free',
     },
     financial: {
         description: isEU
-            ? 'This MFSA-regulated account offers CFDs on derived and financial instruments'
+            ? 'This MFSA-regulated account offers CFDs on derived and financial instruments.'
             : 'This account offers CFDs on financial instruments.',
         icon: isEU ? <FinancialEUMT5Icon /> : <FinancialMT5Icon />,
         title: isEU ? 'CFDs' : 'Financial',