Thisyahlen/trah 2642/eu screen deriv platform section (deriv-com#12871)

* chore: add eu condition content to deriv platform section in tradershub

* chore: add eu condition content to deriv platform section in tradershub

* chore: readd back

* chore: komen

packages/api/src/hooks/useIsEuRegion.ts

@@ -35,9 +35,21 @@ const useIsEuRegion = () => {
         return is_financial_maltainvest || is_eu_based_on_shortcodes || is_eu_based_on_residence;
     }, [landing_company]);
 
+    // New method to test, if this works will remove the legacy method above
+    const isEU = useMemo(() => {
+        if (!landing_company) return;
+
+        const { gaming_company, financial_company } = landing_company;
+
+        const isEuRegion = !gaming_company && financial_company?.shortcode === 'maltainvest';
+
+        return isEuRegion;
+    }, [landing_company]);
+
     return {
         /** A boolean flag indicating if the region is within the EU */
         data: isEuRegion,
+        isEU,
         /** Additional properties inherited from the useLandingCompany hook */
         ...rest,
     };

packages/tradershub/src/components/Loaders/CurrencySwitcherLoader/index.ts

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

packages/tradershub/src/components/Loaders/TitleDescriptionLoader/TitleDescriptionLoader.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const TitleDescriptionLoader = () => (
+    <div className='lg:flex lg:flex-col'>
+        <div className='grow space-y-500'>
+            <div className='animate-pulse bg-solid-slate-100 w-4000 h-1000 rounded-200' />
+            <div className='animate-pulse bg-solid-slate-100 w-[300px] h-800 rounded-200' />
+        </div>
+    </div>
+);
+
+export default TitleDescriptionLoader;

packages/tradershub/src/components/Loaders/TitleDescriptionLoader/index.ts

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

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

@@ -1 +1,3 @@
-export { default as CurrencySwitcherLoader } from './CurrencySwitcherLoader';
+export * from './CurrencySwitcherLoader';
+export * from './TitleDescriptionLoader';
+export * from './TradingAppCardLoader';

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

@@ -1,16 +1,26 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { useHistory } from 'react-router-dom';
-import { useActiveTradingAccount } from '@deriv/api';
+import { useActiveTradingAccount, useIsEuRegion } from '@deriv/api';
 import { Button, Text, useBreakpoint } from '@deriv/quill-design';
 import { optionsAndMultipliersContent } from '../../../constants/constants';
 import { getStaticUrl, getUrlBinaryBot, getUrlSmartTrader } from '../../../helpers/urls';
+import { TradingAppCardLoader } from '../../Loaders';
 import { TradingAccountCard } from '../../TradingAccountCard';
 
-type TShowButtonProps = Pick<typeof optionsAndMultipliersContent[number], 'isExternal' | 'redirect'>;
+type OptionsAndMultipliersContentItem = {
+    description: string;
+    icon: JSX.Element;
+    isExternal?: boolean;
+    redirect: string;
+    smallIcon: JSX.Element;
+    title: string;
+};
+
+type TShowButtonProps = Pick<OptionsAndMultipliersContentItem, 'isExternal' | 'redirect'>;
 
-type TLinkTitleProps = Pick<typeof optionsAndMultipliersContent[number], 'icon' | 'title'>;
+type TLinkTitleProps = Pick<OptionsAndMultipliersContentItem, 'icon' | 'title'>;
 
-const LinkTitle: FC<TLinkTitleProps> = ({ icon, title }) => {
+const LinkTitle = ({ icon, title }: TLinkTitleProps) => {
     const handleClick = (
         event:
             | React.KeyboardEvent<HTMLButtonElement>
@@ -84,10 +94,24 @@ const ShowOpenButton = ({ isExternal, redirect }: TShowButtonProps) => {
 const OptionsAndMultipliersContent = () => {
     const { isMobile } = useBreakpoint();
     const { data } = useActiveTradingAccount();
+    const { isEU, isSuccess } = useIsEuRegion();
+
+    const getoptionsAndMultipliersContent = optionsAndMultipliersContent(isEU || false);
+
+    const filteredContent = isEU
+        ? getoptionsAndMultipliersContent.filter(account => account.title === 'Deriv Trader')
+        : getoptionsAndMultipliersContent;
+
+    if (!isSuccess)
+        return (
+            <div className='pt-2000'>
+                <TradingAppCardLoader />
+            </div>
+        );
 
     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 => {
+            {filteredContent.map(account => {
                 const trailingComponent = () => (
                     <ShowOpenButton isExternal={account.isExternal} redirect={account.redirect} />
                 );

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

@@ -0,0 +1,57 @@
+import React, { useMemo } from 'react';
+import { useIsEuRegion } from '@deriv/api';
+import { Heading, Text, useBreakpoint } from '@deriv/quill-design';
+import { CurrencySwitcher } from '../../CurrencySwitcher';
+import { TitleDescriptionLoader } from '../../Loaders';
+import { StaticLink } from '../../StaticLink';
+
+/**
+ *  `OptionsAndMultipliersHeading` is a component that renders the heading title and currency switcher.
+ * @returns {React.ElementType} The `OptionsAndMultipliersHeading` component.
+ */
+const OptionsAndMultipliersHeading = () => {
+    const { isMobile } = useBreakpoint();
+    const { isEU, isSuccess } = useIsEuRegion();
+
+    const title = isEU ? 'Multipliers' : 'Options & multipliers';
+
+    const description = useMemo(() => {
+        if (isEU) {
+            return (
+                <Text className='space-y-50' size='sm'>
+                    Get the upside of CFDs without risking more than your initial stake with
+                    <StaticLink size='md' staticUrl='/trade-types/multiplier/'>
+                        multipliers
+                    </StaticLink>
+                    .
+                </Text>
+            );
+        }
+        return (
+            <Text className='space-y-50' size='sm'>
+                Earn a range of payouts by correctly predicting market price movements with
+                <StaticLink size='md' staticUrl='/trade-types/options/digital-options/up-and-down/'>
+                    options
+                </StaticLink>
+                , or get the upside of CFDs without risking more than your initial stake with
+                <StaticLink size='md' staticUrl='/trade-types/multiplier/'>
+                    multipliers
+                </StaticLink>
+                .
+            </Text>
+        );
+    }, [isEU]);
+
+    if (!isSuccess) return <TitleDescriptionLoader />;
+
+    return (
+        <div className='flex flex-col items-start justify-between lg:flex-row gap-800 lg:gap-2400'>
+            <div className='lg:flex lg:flex-col gap-100'>
+                {!isMobile && <Heading.H4>{title}</Heading.H4>}
+                {description}
+            </div>
+            <CurrencySwitcher />
+        </div>
+    );
+};
+export default OptionsAndMultipliersHeading;

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

@@ -1,15 +1,15 @@
 import React from 'react';
-import { OptionsAndMultipliersHeading } from './OptionsAndMultiplersHeading';
 import { OptionsAndMultipliersContent } from './OptionsAndMultipliersContent';
+import { OptionsAndMultipliersHeading } from './OptionsAndMultipliersHeading';
 
 /**
  * `OptionsAndMultipliersSection` is a component that renders the deriv platforms and currency switcher.
  * @returns {React.ElementType} The `OptionsAndMultipliersSection` component.
  */
 const OptionsAndMultipliersSection = () => {
     return (
-        <div className='pt-800 overflow-y-scroll lg:border-solid lg:p-1200 lg:rounded-1200 lg:border-xs lg:border-opacity-black-100 '>
-            <div className='flex-col w-full gap-1200 '>
+        <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 />
                 <OptionsAndMultipliersContent />
             </div>

packages/tradershub/src/constants/constants.tsx

@@ -24,9 +24,9 @@ type IconToCurrencyMapperType = {
     };
 };
 
-export const optionsAndMultipliersContent = [
+export const optionsAndMultipliersContent = (isEU: boolean) => [
     {
-        description: 'Options and multipliers trading platform.',
+        description: isEU ? 'Multipliers trading platform.' : 'Options and multipliers trading platform.',
         icon: <IcAppstoreDerivTrader />,
         redirect: '/',
         smallIcon: <IcAppstoreDerivTrader height='3.2rem' width='3.2rem' />,

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

@@ -35,7 +35,7 @@ const TradersHubRoute = () => {
     return (
         <div className='flex flex-col gap-1200'>
             <div className='flex items-center justify-between align-start gap-100'>
-                <div className='flex flex-row gap-600'>
+                <div className='flex items-center gap-600'>
                     <Heading.H3 className='font-sans'>Trader&apos;s Hub</Heading.H3>
                     <DemoRealSwitcher />
                 </div>