From ba9a266fbeacd831e21e502609db2e9f6fe01d75 Mon Sep 17 00:00:00 2001 From: Aum Bhatt Date: Mon, 23 Sep 2024 15:09:31 +0400 Subject: [PATCH] feat: created MT5LicenceNumber component --- .../api-v2/src/hooks/useSortedMT5Accounts.ts | 28 +------------ .../CFDPasswordModalTnc.scss | 4 -- .../CFDPasswordModalTnc.tsx | 21 ++-------- .../AvailableMT5AccountsList.tsx | 3 +- .../ClientVerificationModal.tsx | 15 ++++--- .../DocumentsList/DocumentsList.tsx | 4 +- .../MT5PasswordModal/MT5PasswordModal.tsx | 20 +++++----- .../CreatePasswordMT5/CreatePasswordMT5.tsx | 16 +++----- .../MT5LicenceMessage/MT5LicenceMessage.scss | 5 +++ .../MT5LicenceMessage/MT5LicenceMessage.tsx | 39 +++++++++++++++++++ .../components/MT5LicenceMessage/index.ts | 1 + .../features/cfd/screens/components/index.ts | 1 + 12 files changed, 82 insertions(+), 75 deletions(-) create mode 100644 packages/wallets/src/features/cfd/screens/components/MT5LicenceMessage/MT5LicenceMessage.scss create mode 100644 packages/wallets/src/features/cfd/screens/components/MT5LicenceMessage/MT5LicenceMessage.tsx create mode 100644 packages/wallets/src/features/cfd/screens/components/MT5LicenceMessage/index.ts create mode 100644 packages/wallets/src/features/cfd/screens/components/index.ts diff --git a/packages/api-v2/src/hooks/useSortedMT5Accounts.ts b/packages/api-v2/src/hooks/useSortedMT5Accounts.ts index 06a290e345c6..16b85b379a66 100644 --- 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 index 5f1047baca7e..e5df447cf404 100644 --- 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 index 8a6dde304087..781aac5536ad 100644 --- a/packages/wallets/src/features/cfd/components/CFDPasswordModalTnc/CFDPasswordModalTnc.tsx +++ b/packages/wallets/src/features/cfd/components/CFDPasswordModalTnc/CFDPasswordModalTnc.tsx @@ -1,37 +1,24 @@ 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 (
- - - - - ]} - i18n_default_text='I confirm and accept {{company}}’s <0>terms and conditions' + i18n_default_text="I confirm and accept {{company}}'s <0>terms and conditions" values={{ company: selectedCompany.name, }} diff --git a/packages/wallets/src/features/cfd/flows/MT5/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx b/packages/wallets/src/features/cfd/flows/MT5/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx index 8f0a96a8a272..f540f9f29255 100644 --- a/packages/wallets/src/features/cfd/flows/MT5/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx +++ b/packages/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 = ({ account }) => { @@ -37,6 +37,7 @@ const AvailableMT5AccountsList: React.FC = ({ account }) => { } else { show( { +const getDescriptionText = (account: THooks.SortedMT5Accounts) => { const { title } = getMarketTypeDetails(account.product)[account.market_type || MARKET_TYPE.ALL]; + if (account.is_added) { + return ; + } + return ( { values={{ accountName: `MT5 ${title}` }} /> ); - - return ; }; const ClientVerificationModal: React.FC = ({ account }) => { + const { localize } = useTranslations(); const { isMobile } = useDevice(); const description = getDescriptionText(account); return ( - +
diff --git a/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/DocumentsList.tsx b/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/DocumentsList.tsx index e2e63b31a7dd..f0eb6591def6 100644 --- a/packages/wallets/src/features/cfd/modals/ClientVerificationModal/components/DocumentsList/DocumentsList.tsx +++ b/packages/wallets/src/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 = ({ statuses }) => { title='Proof of address' /> )} - {'valid_tin' in statuses && ( + {'valid_tin' in statuses && !statuses.valid_tin && ( history.push('/account/personal-details')} title='Personal Details' /> )}
diff --git a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx index d0339d1ac0b6..b447e5381e58 100644 --- a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx +++ b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx @@ -17,7 +17,7 @@ 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'; @@ -25,6 +25,7 @@ import { MT5PasswordModalFooter, SuccessModalFooter } from './MT5PasswordModalFo 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 = ({ isVirtual, marketType, platform, product }) => { - const [isTncChecked, setIsTncChecked] = useState(!(product === PRODUCT.ZEROSPREAD && !isVirtual)); +const MT5PasswordModal: React.FC = ({ account, isVirtual, marketType, platform, product }) => { + const [isTncChecked, setIsTncChecked] = useState(false); const { data: createMT5AccountData, error: createMT5AccountError, @@ -259,6 +260,7 @@ const MT5PasswordModal: React.FC = ({ isVirtual, marketType, platform, p if (isMT5PasswordNotSet && platform === CFD_PLATFORMS.MT5) return ( = ({ 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 index e7249e414fbf..ac2f882b20ff 100644 --- 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 = ({ + account, isLoading, isTncChecked, isVirtual, @@ -30,7 +33,6 @@ const CreatePasswordMT5: React.FC = ({ onTncChange, password, platform, - product, }) => { const { isDesktop } = useDevice(); const { title } = PlatformDetails[platform as keyof typeof PlatformDetails]; @@ -60,14 +62,8 @@ const CreatePasswordMT5: React.FC = ({ onChange={onPasswordChange} password={password} /> - {product === PRODUCT.ZEROSPREAD && !isVirtual && ( - - )} + + {!isVirtual && }
{isDesktop && ( diff --git a/packages/wallets/src/features/cfd/screens/components/MT5LicenceMessage/MT5LicenceMessage.scss b/packages/wallets/src/features/cfd/screens/components/MT5LicenceMessage/MT5LicenceMessage.scss new file mode 100644 index 000000000000..10eefbe6dcd5 --- /dev/null +++ b/packages/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 new file mode 100644 index 000000000000..09eb2be3f86c --- /dev/null +++ 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 = ({ account }) => { + const { isDesktop } = useDevice(); + + return ( + } + iconPosition='top' + variant='info' + > + + + + + ); +}; + +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 new file mode 100644 index 000000000000..c939c664e13b --- /dev/null +++ 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 new file mode 100644 index 000000000000..fb8a87bc7e28 --- /dev/null +++ b/packages/wallets/src/features/cfd/screens/components/index.ts @@ -0,0 +1 @@ +export * from './MT5LicenceMessage';