Merge pull request #133 from thisyahlen-deriv/thisyahlen/remove-compa…

…re-account-add-button chore: remove add button in compare accounts
deriv-com · Apr 29, 2024 · 7df5199 · 7df5199
2 parents aac40d7 + 54aafcd
commit 7df5199
Show file tree

Hide file tree

Showing 12 changed files with 33 additions and 167 deletions.
diff --git a/src/cfd/components/MT5PlatformsList/MT5PlatformsList.tsx b/src/cfd/components/MT5PlatformsList/MT5PlatformsList.tsx
@@ -18,7 +18,7 @@ export const MT5PlatformsList = () => {
     return (
         <CFDPlatformLayout title={PlatformDetails.mt5.title}>
             {!isAuthorized && <LoggedOutMT5AccountsList />}
-            {!isFetchedAfterMount && isAuthorized && (
+            {!isFetchedAfterMount && (
                 <div className='pt-8 lg:pt-18'>
                     <TradingAppCardLoader />
                 </div>

diff --git a/src/cfd/flows/CTrader/AddedCTraderAccountsList/AddedCTraderAccountsList.tsx b/src/cfd/flows/CTrader/AddedCTraderAccountsList/AddedCTraderAccountsList.tsx
@@ -5,6 +5,7 @@ import { Button, Text } from '@deriv-com/ui';
 import { URLUtils } from '@deriv-com/utils';
 
 import { IconComponent, TradingAccountCard } from '@/components';
+import { derivUrls } from '@/helpers';
 import { getCfdsAccountTitle } from '@/helpers/cfdsAccountHelpers';
 import { useActiveDerivTradingAccount, useCtraderAccountsList, useQueryParams } from '@/hooks';
 import { useCFDContext } from '@/providers';
@@ -43,7 +44,7 @@ export const AddedCTraderAccountsList = () => {
                         openModal('TopUpModal');
                     }
 
-                    // else transferModal;
+                    window.location.href = `${derivUrls.DERIV_APP_PRODUCTION}/cashier/account-transfer`;
                 }}
                 variant='outlined'
                 size='sm'

diff --git a/src/cfd/flows/MT5/AddedMT5AccountsList/AddedMT5AccountsList.tsx b/src/cfd/flows/MT5/AddedMT5AccountsList/AddedMT5AccountsList.tsx
@@ -2,7 +2,7 @@ import { CFDPlatforms, MarketType, MarketTypeDetails } from '@cfd/constants';
 import { Button, Text } from '@deriv-com/ui';
 
 import { TradingAccountCard } from '@/components';
-import { getCfdsAccountTitle } from '@/helpers';
+import { derivUrls, getCfdsAccountTitle } from '@/helpers';
 import { useActiveDerivTradingAccount, useQueryParams, useRegulationFlags } from '@/hooks';
 import { useCFDContext } from '@/providers';
 import { THooks } from '@/types';
@@ -35,7 +35,7 @@ export const AddedMT5AccountsList = ({ account }: { account: THooks.MT5AccountsL
                                 });
                                 openModal('TopUpModal');
                             }
-                            // else transferModal;
+                            window.location.href = `${derivUrls.DERIV_APP_PRODUCTION}/cashier/account-transfer`;
                         }}
                         variant='outlined'
                         size='sm'

diff --git a/src/cfd/flows/OtherCFDs/Dxtrade/AddedDxtradeAccountsList/AddedDxtradeAccountsList.tsx b/src/cfd/flows/OtherCFDs/Dxtrade/AddedDxtradeAccountsList/AddedDxtradeAccountsList.tsx
@@ -5,6 +5,7 @@ import { Button, Text } from '@deriv-com/ui';
 import { URLUtils } from '@deriv-com/utils';
 
 import { IconComponent, TradingAccountCard } from '@/components';
+import { derivUrls } from '@/helpers';
 import { getCfdsAccountTitle } from '@/helpers/cfdsAccountHelpers';
 import { useActiveDerivTradingAccount, useDxtradeAccountsList, useQueryParams } from '@/hooks';
 import { useCFDContext } from '@/providers';
@@ -42,7 +43,7 @@ export const AddedDxtradeAccountsList = () => {
                         });
                         openModal('TopUpModal');
                     }
-                    // else transferModal;
+                    window.location.href = `${derivUrls.DERIV_APP_PRODUCTION}/cashier/account-transfer`;
                 }}
                 variant='outlined'
                 size='sm'

diff --git a/src/cfd/screens/CFDCompareAccounts/CompareAccountsButton.tsx b/src/cfd/screens/CFDCompareAccounts/CompareAccountsButton.tsx
diff --git a/src/cfd/screens/CFDCompareAccounts/CompareAccountsCard.tsx b/src/cfd/screens/CFDCompareAccounts/CompareAccountsCard.tsx
@@ -5,7 +5,6 @@ import { THooks, TPlatforms } from '@/types';
 
 import { CFDPlatforms } from '../../constants';
 
-import CompareAccountsButton from './CompareAccountsButton';
 import CompareAccountsDescription from './CompareAccountsDescription';
 import CompareAccountsPlatformLabel from './CompareAccountsPlatformLabel';
 import CompareAccountsTitleIcon from './CompareAccountsTitleIcon';
@@ -18,7 +17,7 @@ type TCompareAccountsCard = {
     shortCode: THooks.AvailableMT5Accounts['shortcode'];
 };
 
-const CompareAccountsCard = ({ isAccountAdded, marketType, platform, shortCode }: TCompareAccountsCard) => {
+const CompareAccountsCard = ({ marketType, platform, shortCode }: TCompareAccountsCard) => {
     const { regulationFlags } = useRegulationFlags();
     const { isEU } = regulationFlags;
 
@@ -43,13 +42,6 @@ const CompareAccountsCard = ({ isAccountAdded, marketType, platform, shortCode }
                         </Text>
                     </div>
                 )}
-                <CompareAccountsButton
-                    isAccountAdded={isAccountAdded}
-                    //Removed for now as it is needed by Verification flow
-                    // marketType={marketType}
-                    platform={platform}
-                    shortCode={shortCode}
-                />
             </div>
         </div>
     );

diff --git a/src/cfd/screens/CFDCompareAccounts/CompareAccountsDescription.tsx b/src/cfd/screens/CFDCompareAccounts/CompareAccountsDescription.tsx
@@ -33,7 +33,7 @@ const CompareAccountsDescription = ({ marketType, shortCode }: TCompareAccountsD
     } = getJurisdictionDescription(marketTypeShortCode ?? '');
 
     return (
-        <div className='flex flex-col items-center gap-5 px-16 pt-16 lg:px-0'>
+        <div className='flex flex-col items-center gap-5 p-16 lg:px-0'>
             <Text as='p' className='text-default lg:text-xl' weight='bold'>
                 {'Up to'} {leverage}
             </Text>

diff --git a/src/cfd/screens/CFDCompareAccounts/CompareAccountsHeader.tsx b/src/cfd/screens/CFDCompareAccounts/CompareAccountsHeader.tsx
@@ -1,4 +1,4 @@
-import { Link, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 import { LabelPairedArrowLeftMdFillIcon, LabelPairedXmarkLgRegularIcon } from '@deriv/quill-icons';
 import { Text } from '@deriv-com/ui';
@@ -18,17 +18,15 @@ const CompareAccountsHeader = () => {
     const headerTitle = isEU ? `Deriv MT5 CFDs ${accountType} account` : `Compare CFDs ${demoSuffix}accounts`;
 
     return (
-        <div className='sticky flex items-center border-solid z-[999] border-b-1 py-0 px-16 top-0 h-50 border-system-light-secondary-background'>
+        <div className='sticky flex items-center border-solid z-40 border-b-1 py-0 px-16 top-0 h-50 border-system-light-secondary-background'>
             <div className='flex justify-start lg:justify-center w-full items-center'>
                 <div className='absolute left-30 lg:block d-none'>
-                    <div className='flex items-center gap-8'>
+                    <div className='flex items-center gap-8 cursor-pointer' onClick={() => navigate('/')}>
                         <LabelPairedArrowLeftMdFillIcon />
-                        <Link to='/'>
-                            <Text weight='bold'>Trader&apos;s Hub</Text>
-                        </Link>
+                        <Text weight='bold'>Trader&apos;s Hub</Text>
                     </div>
                 </div>
-                <Text size='xl' weight='bold'>
+                <Text className='text-lg lg:text-xl' weight='bold'>
                     {headerTitle}
                 </Text>
                 <div className='absolute right-30 block lg:d-none'>

diff --git a/src/cfd/screens/CFDCompareAccounts/CompareAccountsScreen.tsx b/src/cfd/screens/CFDCompareAccounts/CompareAccountsScreen.tsx
@@ -13,7 +13,7 @@ const CompareAccountsScreen = () => {
     const { mt5Accounts } = compareAccounts;
 
     return (
-        <div className='m-0 overflow-x-auto lg:w-full lg:h-full'>
+        <div className='mt-10 overflow-x-auto lg:w-full lg:h-full'>
             <CompareAccountsHeader />
             <div className='flex justify-center lg:my-0 lg:mx-auto max-w-[1232px] px-10 py-16 lg:py-24'>
                 <CompareAccountsCarousel>

diff --git a/src/cfd/screens/CFDCompareAccounts/InstrumentsLabelHighlighted.tsx b/src/cfd/screens/CFDCompareAccounts/InstrumentsLabelHighlighted.tsx
@@ -1,4 +1,4 @@
-import { useActiveDerivTradingAccount, useRegulationFlags } from '@/hooks';
+import { useRegulationFlags } from '@/hooks';
 import { THooks, TPlatforms } from '@/types';
 
 import { getHighlightedIconLabel } from './CompareAccountsConfig';
@@ -11,15 +11,13 @@ type TInstrumentsLabelHighlighted = {
 };
 
 const InstrumentsLabelHighlighted = ({ marketType, platform, shortCode }: TInstrumentsLabelHighlighted) => {
-    const { data: activeDerivTrading } = useActiveDerivTradingAccount();
     const { regulationFlags } = useRegulationFlags();
     const { isEU: isEuRegion } = regulationFlags;
-    const isDemo = activeDerivTrading?.is_virtual;
     const iconData = [...getHighlightedIconLabel(platform, isEuRegion, marketType, shortCode)];
 
     return (
         <div
-            className={`flex flex-col px-14 lg:px-18 gap-4 ${isDemo ? 'pt-16' : 'pt-20'}`}
+            className='flex flex-col px-14 lg:px-18 gap-4 py-16'
             data-testid='dt_compare_cfd_account_outline__container'
         >
             {iconData.map(item => (

diff --git a/src/components/Clipboard/Clipboard.tsx b/src/components/Clipboard/Clipboard.tsx
@@ -47,13 +47,15 @@ export const Clipboard = ({ textCopy, tooltip }: TClipboardProps) => {
 
     return (
         <Tooltip
-            message={isCopied ? 'Copied!' : 'Copy'}
+            message={isHovered && isCopied ? 'Copied!' : 'Copy'}
             position={tooltip ?? 'bottom'}
-            triggerAction={isHovered && isDesktop ? 'hover' : 'click'}
+            triggerAction={isDesktop ? 'hover' : 'click'}
         >
-            <Button color='white' onClick={onClick} size='sm' variant='ghost'>
-                {isCopied ? <CheckmarkCircle /> : <ClipboardIcon />}
-            </Button>
+            <div ref={hoverRef}>
+                <Button color='white' onClick={onClick} size='sm' variant='ghost'>
+                    {isCopied ? <CheckmarkCircle /> : <ClipboardIcon />}
+                </Button>
+            </div>
         </Tooltip>
     );
 };
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -2,6 +2,8 @@ import { useAuthData } from '@deriv-com/api-hooks';
 import { Button } from '@deriv-com/ui';
 import { URLUtils } from '@deriv-com/utils';
 
+import { derivUrls } from '@/helpers';
+
 import { IconComponent } from '..';
 
 export const Header = () => {
@@ -11,13 +13,15 @@ export const Header = () => {
     return (
         <header className='border-solid border-b-1 border-b-system-light-hover-background flex px-20 sticky top-0 bg-system-light-primary-background z-50'>
             <div className='flex justify-between items-center w-full'>
-                <IconComponent
-                    icon='Deriv'
+                <a
                     onClick={() => {
-                        window.location.href = '/';
+                        window.location.href = derivUrls.DERIV_COM_PRODUCTION;
                     }}
-                    className='cursor-pointer'
-                />
+                    target='_blank'
+                    rel='noopener noreferrer'
+                >
+                    <IconComponent icon='Deriv' className='cursor-pointer' />
+                </a>
                 {!(isAuthorized || activeLoginid) ? (
                     <div className='flex gap-6'>
                         <Button