feat: created MT5LicenceNumber component

deriv-com · Sep 23, 2024 · ba9a266 · ba9a266
1 parent 5711c04
commit ba9a266
Show file tree

Hide file tree

Showing 12 changed files with 82 additions and 75 deletions.
diff --git a/packages/api-v2/src/hooks/useSortedMT5Accounts.ts b/packages/api-v2/src/hooks/useSortedMT5Accounts.ts
@@ -55,35 +55,11 @@ const useSortedMT5Accounts = (regulation?: string) => {
     const filtered_data = useMemo(() => {
         if (!modified_data) return;
 
-        // console.log(modified_data.filter(account => account.is_default_jurisdiction === 'true'));
-        // console.log(
-        //     modified_data.filter(
-        //         account => 'client_kyc_status' in account && account.is_default_jurisdiction === 'true'
-        //     )
-        // );
-
-        const added_accounts = modified_data.filter(
-            account => account.is_added && account.is_default_jurisdiction === 'true'
-        );
+        const added_accounts = modified_data.filter(account => account.is_added);
         const non_added_accounts = modified_data.filter(
-            account => !account.is_added && account.is_default_jurisdiction === 'true'
+            account => !account.is_added && account.is_default_jurisdiction === 'true' && account.product !== 'stp'
         );
 
-        // const filtered_non_added_accounts = non_added_accounts.reduce((acc, account) => {
-        //     const { market_type, product } = account;
-        //     const key = product === 'zero_spread' ? `${market_type}_${product}` : market_type;
-
-        //     const existing_account = acc.find(acc_account =>
-        //         acc_account.product === 'zero_spread'
-        //             ? `${acc_account.market_type}_${acc_account.product}` === key
-        //             : acc_account.market_type === key
-        //     );
-
-        //     if (existing_account) return acc;
-
-        //     return [...acc, account];
-        // }, [] as typeof non_added_accounts);
-
         return [...added_accounts, ...non_added_accounts];
     }, [modified_data]);
 

diff --git a/packages/wallets/src/features/cfd/components/CFDPasswordModalTnc/CFDPasswordModalTnc.scss b/packages/wallets/src/features/cfd/components/CFDPasswordModalTnc/CFDPasswordModalTnc.scss
@@ -2,8 +2,4 @@
     display: flex;
     flex-direction: column;
     gap: 1.6rem;
-
-    @include mobile-or-tablet-screen {
-        margin-top: auto;
-    }
 }
diff --git a/packages/wallets/src/features/cfd/components/CFDPasswordModalTnc/CFDPasswordModalTnc.tsx b/packages/wallets/src/features/cfd/components/CFDPasswordModalTnc/CFDPasswordModalTnc.tsx
@@ -1,45 +1,32 @@
 import React from 'react';
 import { Localize } from '@deriv-com/translations';
-import { Checkbox, InlineMessage, Text, useDevice } from '@deriv-com/ui';
+import { Checkbox, Text, useDevice } from '@deriv-com/ui';
 import { WalletLink } from '../../../../components/Base';
 import { useModal } from '../../../../components/ModalProvider';
-import { THooks, TPlatforms } from '../../../../types';
-import { companyNamesAndUrls, getMarketTypeDetails, PlatformDetails } from '../../constants';
+import { companyNamesAndUrls } from '../../constants';
 import './CFDPasswordModalTnc.scss';
 
 export type TCFDPasswordModalTncProps = {
     checked: boolean;
     onChange: () => void;
-    platform: TPlatforms.All;
-    product?: THooks.AvailableMT5Accounts['product'];
 };
 
-const CFDPasswordModalTnc = ({ checked, onChange, platform, product }: TCFDPasswordModalTncProps) => {
+const CFDPasswordModalTnc = ({ checked, onChange }: TCFDPasswordModalTncProps) => {
     const { isDesktop } = useDevice();
     const { getModalState } = useModal();
     const selectedJurisdiction = getModalState('selectedJurisdiction');
     const selectedCompany = companyNamesAndUrls[selectedJurisdiction as keyof typeof companyNamesAndUrls];
-    const platformTitle = PlatformDetails[platform].title;
-    const productTitle = getMarketTypeDetails(product).all.title;
 
     return (
         <div className='wallets-cfd-modal-tnc'>
-            <InlineMessage iconPosition='top' variant='info'>
-                <Text data-testid='dt_wallets_tnc_inline_message' size={isDesktop ? '2xs' : 'xs'}>
-                    <Localize
-                        i18n_default_text='You are adding your {{platformTitle}} {{productTitle}} account under {{company}}, regulated by the British Virgin Islands Financial Services Commission (licence no. SIBA/L/18/1114).'
-                        values={{ company: selectedCompany.name, platformTitle, productTitle }}
-                    />
-                </Text>
-            </InlineMessage>
             <Checkbox
                 checked={checked}
                 data-testid='dt_wallets_tnc_checkbox'
                 label={
                     <Text size={isDesktop ? 'xs' : 'sm'}>
                         <Localize
                             components={[<WalletLink key={0} staticUrl={selectedCompany.tncUrl} variant='bold' />]}
-                            i18n_default_text='I confirm and accept {{company}}’s <0>terms and conditions</0>'
+                            i18n_default_text="I confirm and accept {{company}}'s <0>terms and conditions</0>"
                             values={{
                                 company: selectedCompany.name,
                             }}

diff --git a/.../wallets/src/features/cfd/flows/MT5/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx b/.../wallets/src/features/cfd/flows/MT5/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx
@@ -10,7 +10,7 @@ import { ClientVerificationModal, MT5PasswordModal, TradingPlatformStatusModal }
 import './AvailableMT5AccountsList.scss';
 
 type TProps = {
-    account: THooks.AvailableMT5Accounts;
+    account: THooks.SortedMT5Accounts;
 };
 
 const AvailableMT5AccountsList: React.FC<TProps> = ({ account }) => {
@@ -37,6 +37,7 @@ const AvailableMT5AccountsList: React.FC<TProps> = ({ account }) => {
                 } else {
                     show(
                         <MT5PasswordModal
+                            account={account}
                             isVirtual={activeWallet?.is_virtual}
                             marketType={account?.market_type || 'synthetic'}
                             platform={account.platform}

diff --git a/packages/wallets/src/features/cfd/modals/ClientVerificationModal/ClientVerificationModal.tsx b/packages/wallets/src/features/cfd/modals/ClientVerificationModal/ClientVerificationModal.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { DerivLightUploadPoiIcon } from '@deriv/quill-icons';
-import { Localize } from '@deriv-com/translations';
+import { Localize, useTranslations } from '@deriv-com/translations';
 import { Text, useDevice } from '@deriv-com/ui';
 import { ModalStepWrapper } from '../../../../components';
 import { THooks } from '../../../../types';
@@ -9,12 +9,16 @@ import { DocumentsList } from './components';
 import './ClientVerificationModal.scss';
 
 type TClientVerificationModal = {
-    account: THooks.AvailableMT5Accounts;
+    account: THooks.SortedMT5Accounts;
 };
 
-const getDescriptionText = (account: THooks.AvailableMT5Accounts) => {
+const getDescriptionText = (account: THooks.SortedMT5Accounts) => {
     const { title } = getMarketTypeDetails(account.product)[account.market_type || MARKET_TYPE.ALL];
 
+    if (account.is_added) {
+        return <Localize i18n_default_text='Your account needs verification.' />;
+    }
+
     return (
         <Localize
             i18n_default_text={
@@ -23,16 +27,15 @@ const getDescriptionText = (account: THooks.AvailableMT5Accounts) => {
             values={{ accountName: `MT5 ${title}` }}
         />
     );
-
-    return <Localize i18n_default_text='Your account needs verification.' />;
 };
 
 const ClientVerificationModal: React.FC<TClientVerificationModal> = ({ account }) => {
+    const { localize } = useTranslations();
     const { isMobile } = useDevice();
     const description = getDescriptionText(account);
 
     return (
-        <ModalStepWrapper title='Default service'>
+        <ModalStepWrapper title={account.is_added ? localize('Create account') : localize('Verify account')}>
             <div className='wallets-client-verification-modal'>
                 <DerivLightUploadPoiIcon height={128} width={128} />
                 <Text align='center' size={isMobile ? 'md' : 'sm'}>

diff --git a/...rc/features/cfd/modals/ClientVerificationModal/components/DocumentsList/DocumentsList.tsx b/...rc/features/cfd/modals/ClientVerificationModal/components/DocumentsList/DocumentsList.tsx
@@ -5,7 +5,7 @@ import { DocumentTile } from './components';
 import './DocumentsList.scss';
 
 type TDocumentsListProps = {
-    statuses: THooks.AvailableMT5Accounts['client_kyc_status'];
+    statuses: THooks.SortedMT5Accounts['client_kyc_status'];
 };
 
 type TStatuses = 'expired' | 'none' | 'pending' | 'rejected' | 'suspected' | 'verified';
@@ -38,7 +38,7 @@ const DocumentsList: React.FC<TDocumentsListProps> = ({ statuses }) => {
                     title='Proof of address'
                 />
             )}
-            {'valid_tin' in statuses && (
+            {'valid_tin' in statuses && !statuses.valid_tin && (
                 <DocumentTile onClick={() => history.push('/account/personal-details')} title='Personal Details' />
             )}
         </div>

diff --git a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx
@@ -17,14 +17,15 @@ import { useModal } from '../../../../components/ModalProvider';
 import { THooks, TMarketTypes, TPlatforms } from '../../../../types';
 import { platformPasswordResetRedirectLink } from '../../../../utils/cfd';
 import { validPassword, validPasswordMT5 } from '../../../../utils/password-validation';
-import { CFD_PLATFORMS, JURISDICTION, MARKET_TYPE, PlatformDetails, PRODUCT } from '../../constants';
+import { CFD_PLATFORMS, JURISDICTION, MARKET_TYPE, PlatformDetails } from '../../constants';
 import { CreatePassword, CreatePasswordMT5, EnterPassword, MT5ResetPasswordModal } from '../../screens';
 import MT5AccountAdded from '../MT5AccountAdded/MT5AccountAdded';
 import { PasswordLimitExceededModal } from '../PasswordLimitExceededModal';
 import { MT5PasswordModalFooter, SuccessModalFooter } from './MT5PasswordModalFooters';
 import './MT5PasswordModal.scss';
 
 type TProps = {
+    account: THooks.SortedMT5Accounts;
     isVirtual?: boolean;
     marketType: TMarketTypes.SortedMT5Accounts;
     platform: TPlatforms.All;
@@ -36,8 +37,8 @@ export type TPlatformPasswordChange = {
     newPassword: string;
 };
 
-const MT5PasswordModal: React.FC<TProps> = ({ isVirtual, marketType, platform, product }) => {
-    const [isTncChecked, setIsTncChecked] = useState(!(product === PRODUCT.ZEROSPREAD && !isVirtual));
+const MT5PasswordModal: React.FC<TProps> = ({ account, isVirtual, marketType, platform, product }) => {
+    const [isTncChecked, setIsTncChecked] = useState(false);
     const {
         data: createMT5AccountData,
         error: createMT5AccountError,
@@ -259,6 +260,7 @@ const MT5PasswordModal: React.FC<TProps> = ({ isVirtual, marketType, platform, p
         if (isMT5PasswordNotSet && platform === CFD_PLATFORMS.MT5)
             return (
                 <CreatePasswordMT5
+                    account={account}
                     isLoading={tradingPlatformPasswordChangeLoading || createMT5AccountLoading}
                     isTncChecked={isTncChecked}
                     isVirtual={isVirtual}
@@ -303,24 +305,24 @@ const MT5PasswordModal: React.FC<TProps> = ({ isVirtual, marketType, platform, p
         );
     }, [
         isMT5PasswordNotSet,
+        platform,
         tradingPlatformPasswordChangeLoading,
         createMT5AccountLoading,
-        isTncChecked,
         onSubmit,
         password,
         mt5Platform,
-        updateMT5Password,
-        tradingPasswordChangeError,
-        platform,
+        account,
+        isTncChecked,
         isVirtual,
         product,
-        activeWalletData?.is_virtual,
+        updateMT5Password,
+        tradingPasswordChangeError,
         onSubmitPasswordChange,
+        activeWalletData?.is_virtual,
         marketType,
         localize,
         createMT5AccountError?.error?.code,
         sendEmailVerification,
-        setIsTncChecked,
     ]);
 
     if (emailVerificationStatus === 'error') {

diff --git a/packages/wallets/src/features/cfd/screens/CreatePasswordMT5/CreatePasswordMT5.tsx b/packages/wallets/src/features/cfd/screens/CreatePasswordMT5/CreatePasswordMT5.tsx
@@ -6,10 +6,12 @@ import { WalletPasswordFieldLazy } from '../../../../components/Base';
 import { THooks, TPlatforms } from '../../../../types';
 import { validPassword, validPasswordMT5 } from '../../../../utils/password-validation';
 import { CFDPasswordModalTnc } from '../../components/CFDPasswordModalTnc';
-import { CFD_PLATFORMS, PlatformDetails, PRODUCT } from '../../constants';
+import { CFD_PLATFORMS, PlatformDetails } from '../../constants';
+import { MT5LicenceMessage } from '../components';
 import './CreatePasswordMT5.scss';
 
 type TProps = {
+    account: THooks.SortedMT5Accounts;
     isLoading?: boolean;
     isTncChecked: boolean;
     isVirtual?: boolean;
@@ -22,6 +24,7 @@ type TProps = {
 };
 
 const CreatePasswordMT5: React.FC<TProps> = ({
+    account,
     isLoading,
     isTncChecked,
     isVirtual,
@@ -30,7 +33,6 @@ const CreatePasswordMT5: React.FC<TProps> = ({
     onTncChange,
     password,
     platform,
-    product,
 }) => {
     const { isDesktop } = useDevice();
     const { title } = PlatformDetails[platform as keyof typeof PlatformDetails];
@@ -60,14 +62,8 @@ const CreatePasswordMT5: React.FC<TProps> = ({
                     onChange={onPasswordChange}
                     password={password}
                 />
-                {product === PRODUCT.ZEROSPREAD && !isVirtual && (
-                    <CFDPasswordModalTnc
-                        checked={isTncChecked}
-                        onChange={onTncChange}
-                        platform={platform}
-                        product={product}
-                    />
-                )}
+                <MT5LicenceMessage account={account} />
+                {!isVirtual && <CFDPasswordModalTnc checked={isTncChecked} onChange={onTncChange} />}
             </div>
 
             {isDesktop && (

diff --git a/...ages/wallets/src/features/cfd/screens/components/MT5LicenceMessage/MT5LicenceMessage.scss b/...ages/wallets/src/features/cfd/screens/components/MT5LicenceMessage/MT5LicenceMessage.scss
@@ -0,0 +1,5 @@
+.wallets-mt5-licence-message {
+    @include mobile-or-tablet-screen {
+        margin-top: auto;
+    }
+}
diff --git a/packages/wallets/src/features/cfd/screens/components/MT5LicenceMessage/MT5LicenceMessage.tsx b/packages/wallets/src/features/cfd/screens/components/MT5LicenceMessage/MT5LicenceMessage.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { LabelPairedTriangleExclamationMdBoldIcon } from '@deriv/quill-icons';
+import { Localize } from '@deriv-com/translations';
+import { InlineMessage, Text, useDevice } from '@deriv-com/ui';
+import { THooks } from '../../../../../types';
+import { getMarketTypeDetails, MARKET_TYPE } from '../../../constants';
+import './MT5LicenceMessage.scss';
+
+type TMT5LicenseMessageProps = {
+    account: THooks.SortedMT5Accounts;
+};
+
+const MT5LicenseMessage: React.FC<TMT5LicenseMessageProps> = ({ account }) => {
+    const { isDesktop } = useDevice();
+
+    return (
+        <InlineMessage
+            className='wallets-mt5-licence-message'
+            icon={<LabelPairedTriangleExclamationMdBoldIcon />}
+            iconPosition='top'
+            variant='info'
+        >
+            <Text align='start' size={isDesktop ? '2xs' : 'xs'}>
+                <Localize
+                    i18n_default_text='You are adding your {{accountName}} account under {{companyName}}, regulated by the {{regulatoryAuthority}}{{licenceNumber}}.'
+                    values={{
+                        accountName: getMarketTypeDetails(account.product)[account.market_type || MARKET_TYPE.ALL]
+                            .title,
+                        companyName: account.name,
+                        licenceNumber: account.licence_number ? ` (licence no. ${account.licence_number})` : '',
+                        regulatoryAuthority: account.regulatory_authority,
+                    }}
+                />
+            </Text>
+        </InlineMessage>
+    );
+};
+
+export default MT5LicenseMessage;
diff --git a/packages/wallets/src/features/cfd/screens/components/MT5LicenceMessage/index.ts b/packages/wallets/src/features/cfd/screens/components/MT5LicenceMessage/index.ts
@@ -0,0 +1 @@
+export { default as MT5LicenceMessage } from './MT5LicenceMessage';
diff --git a/packages/wallets/src/features/cfd/screens/components/index.ts b/packages/wallets/src/features/cfd/screens/components/index.ts
@@ -0,0 +1 @@
+export * from './MT5LicenceMessage';