From 3dee8e42c54178433769e7d963c250f568fa8ca4 Mon Sep 17 00:00:00 2001 From: Hamza Date: Mon, 20 Nov 2023 12:48:25 +0800 Subject: [PATCH 1/2] refactor: split files into respected folders and remove hard-coded variables --- .../Containers/cfd-password-manager-modal.tsx | 432 ------------------ .../cfd-password-manager-modal.tsx | 127 +++++ .../cfd-password-manager-tab-content.tsx | 194 ++++++++ .../cfd-password-reset.tsx | 86 ++++ .../countdown-component.tsx | 25 + .../cfd-password-modal/cfd-password-modal.tsx | 32 +- .../Containers/cfd-reset-password-modal.tsx | 6 +- .../Containers/trading-password-manager.tsx | 123 ----- .../change-password.tsx | 40 ++ .../password-reset.tsx | 57 +++ .../trading-password-manager.tsx | 38 ++ 11 files changed, 586 insertions(+), 574 deletions(-) delete mode 100644 packages/cfd/src/features/Containers/cfd-password-manager-modal.tsx create mode 100644 packages/cfd/src/features/Containers/cfd-password-manager-modal/cfd-password-manager-modal.tsx create mode 100644 packages/cfd/src/features/Containers/cfd-password-manager-modal/cfd-password-manager-tab-content.tsx create mode 100644 packages/cfd/src/features/Containers/cfd-password-manager-modal/cfd-password-reset.tsx create mode 100644 packages/cfd/src/features/Containers/cfd-password-manager-modal/countdown-component.tsx delete mode 100644 packages/cfd/src/features/Containers/trading-password-manager.tsx create mode 100644 packages/cfd/src/features/Containers/trading-password-manager/change-password.tsx create mode 100644 packages/cfd/src/features/Containers/trading-password-manager/password-reset.tsx create mode 100644 packages/cfd/src/features/Containers/trading-password-manager/trading-password-manager.tsx diff --git a/packages/cfd/src/features/Containers/cfd-password-manager-modal.tsx b/packages/cfd/src/features/Containers/cfd-password-manager-modal.tsx deleted file mode 100644 index 69ef40f97c2f..000000000000 --- a/packages/cfd/src/features/Containers/cfd-password-manager-modal.tsx +++ /dev/null @@ -1,432 +0,0 @@ -import React from 'react'; -import { - Icon, - Modal, - Tabs, - Button, - DesktopWrapper, - Div100vhContainer, - MobileWrapper, - MultiStep, - PageOverlay, - ThemedScrollbars, - UILoader, - Text, -} from '@deriv/components'; -import { localize, Localize } from '@deriv/translations'; -import { VerifyEmailResponse } from '@deriv/api-types'; -import { isMobile, validLength, validPassword, getErrorMessages, getCFDPlatformLabel } from '@deriv/shared'; -import { observer, useStore } from '@deriv/stores'; -import { useTradingPlatformInvestorPasswordChange, useTradingPlatformPasswordChange, useVerifyEmail } from '@deriv/api'; -import { FormikErrors } from 'formik'; -import TradingPasswordManager from '../../Containers/trading-password-manager'; -import InvestorPasswordManager from '../../Containers/investor-password-manager'; -import { - TCountdownComponent, - TCFDPasswordReset, - TCFDPasswordManagerTabContentWrapper, - TCFDPasswordManagerTabContent, - TCFDPasswordManagerModal, - TFormValues, - TPasswordManagerModalFormValues, -} from '../../Containers/props.types'; -import { CFD_PLATFORMS, QUERY_STATUS, PASSWORD_TYPE } from '../../Helpers/cfd-config'; - -// Temporary type because of build failing. Confirm with Accounts team -type TSendVerifyEmail = () => Promise; - -type TStatus = typeof QUERY_STATUS[keyof typeof QUERY_STATUS]; - -const CountdownComponent = ({ count_from = 60, onTimeout }: TCountdownComponent) => { - const [count, setCount] = React.useState(count_from); - - React.useEffect(() => { - let interval: ReturnType; - - if (count !== 0) { - interval = setTimeout(() => { - setCount(count - 1); - }, 1000); - } else { - onTimeout(); - } - - return () => { - clearTimeout(interval); - }; - - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [count]); - return {count}; -}; - -const CFDPasswordReset = ({ - sendVerifyEmail, - account_type, - account_group, - server, - password_type, -}: TCFDPasswordReset) => { - const [is_resend_verification_requested, setIsResendVerificationRequested] = React.useState(false); - const [is_resend_verification_sent, setIsResendVerificationSent] = React.useState(false); - - React.useEffect(() => { - localStorage.setItem('cfd_reset_password_intent', [server, account_group, account_type].join('.')); - localStorage.setItem('cfd_reset_password_type', password_type); - sendVerifyEmail(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - const onClickVerification = () => { - setIsResendVerificationRequested(true); - }; - - const resendVerification = () => { - sendVerifyEmail(); - setIsResendVerificationSent(true); - }; - - return ( -
- -

- -

- - - - {!is_resend_verification_requested && ( - - )} - {is_resend_verification_requested && ( - <> - - - - - - - - - )} -
- ); -}; - -const CFDPasswordManagerTabContentWrapper = ({ multi_step_ref, steps }: TCFDPasswordManagerTabContentWrapper) => ( - -); - -const CFDPasswordManagerTabContent = ({ - toggleModal, - selected_login, - email, - setPasswordType, - multi_step_ref, - platform, - onChangeActiveTabIndex, - account_group, -}: TCFDPasswordManagerTabContent) => { - const { - mutateAsync: changePassword, - status: change_password_status, - error: change_password_error, - } = useTradingPlatformPasswordChange(); - const { - mutateAsync: changeInvestorPassword, - status: change_investor_password_status, - error: change_investor_password_error, - } = useTradingPlatformInvestorPasswordChange(); - const [active_tab_index, setActiveTabIndex] = React.useState(0); - const [error_message_investor, setErrorMessageInvestor] = React.useState(''); - const [is_submit_success_investor, setIsSubmitSuccessInvestor] = React.useState(false); - - // view height - margin top and bottom of modal - modal title - modal content margin top and bottom - table title - const container_height = 'calc(100vh - 84px - 5.6rem - 8.8rem - 4rem)'; - const validatePassword = (values: TFormValues) => { - const errors: FormikErrors = {}; - - if ( - !validLength(values.new_password, { - min: 8, - max: 25, - }) - ) { - errors.new_password = localize('You should enter {{min_number}}-{{max_number}} characters.', { - min_number: 8, - max_number: 25, - }); - } else if (!validPassword(values.new_password)) { - errors.new_password = getErrorMessages().password(); - } else if (values.new_password.toLowerCase() === email.toLowerCase()) { - errors.new_password = localize('Your password cannot be the same as your email address.'); - } - - if (!values.old_password && values.old_password !== undefined) { - errors.old_password = localize('This field is required'); - } - - return errors; - }; - const showError = (error_message: string) => { - setErrorMessageInvestor(error_message); - }; - - const hideError = () => { - setErrorMessageInvestor(''); - setIsSubmitSuccessInvestor(true); - }; - - const handlePasswordErrorMessages = React.useCallback((status: TStatus, error: Error) => { - if (status === QUERY_STATUS.ERROR && error) { - showError((error as unknown as Error)?.message); - } - if (status === QUERY_STATUS.SUCCESS) { - hideError(); - } - }, []); - - React.useEffect(() => { - handlePasswordErrorMessages(change_password_status, change_password_error as unknown as Error); - }, [change_password_error, change_password_status, handlePasswordErrorMessages]); - - React.useEffect(() => { - handlePasswordErrorMessages( - change_investor_password_status, - change_investor_password_error as unknown as Error - ); - }, [change_investor_password_error, change_investor_password_status, handlePasswordErrorMessages]); - - const onSubmit = React.useCallback( - async (values: TPasswordManagerModalFormValues) => { - if (!selected_login) { - return; - } - - if (values.password_type === PASSWORD_TYPE.INVESTOR) { - await changeInvestorPassword({ - account_id: selected_login, - old_password: values.old_password, - new_password: values.new_password, - platform: CFD_PLATFORMS.MT5, - }); - } else { - await changePassword({ - old_password: values.old_password, - new_password: values.new_password, - platform: CFD_PLATFORMS.MT5, - }); - } - }, - [changeInvestorPassword, changePassword, selected_login] - ); - - const updateAccountTabIndex = (index: number) => { - setActiveTabIndex(index); - onChangeActiveTabIndex(index); - setErrorMessageInvestor(''); - setIsSubmitSuccessInvestor(false); - }; - - const trading_password_manager = ( - - - - - - - - - - - - - ); - - if (platform === CFD_PLATFORMS.DXTRADE) return trading_password_manager; - - return ( - -
- {trading_password_manager} -
-
- - - - - - - - - - -
- - ); -}; - -const CFDPasswordManagerModal = observer( - ({ - is_visible, - platform, - selected_login, - toggleModal, - selected_account_type, - selected_account_group, - selected_server, - }: TCFDPasswordManagerModal) => { - const { client, ui } = useStore(); - - const { email } = client; - const { enableApp, disableApp } = ui; - - const { mutate } = useVerifyEmail(); - - const sendVerifyEmail = () => mutate({ verify_email: email, type: 'trading_platform_investor_password_reset' }); - - const multi_step_ref: React.MutableRefObject = React.useRef(); - const [index, setIndex] = React.useState(0); - - const [password_type, setPasswordType] = React.useState('main'); - - if (!selected_login) return null; - - const getTitle = () => { - return localize('Manage {{platform}} password', { - platform: getCFDPlatformLabel(platform), - }); - }; - - const getHeader = (i: number) => { - if (i === 0) { - return localize('Manage {{platform}} password', { - platform: getCFDPlatformLabel(platform), - }); - } - return localize('Manage password'); - }; - - const onChangeActiveTabIndex = (i: number) => { - setIndex(i); - }; - - const steps = [ - { - component: ( - - ), - }, - { - component: ( - - ), - }, - ]; - - return ( - }> - - - - - - - - - - - - ); - } -); - -export default CFDPasswordManagerModal; diff --git a/packages/cfd/src/features/Containers/cfd-password-manager-modal/cfd-password-manager-modal.tsx b/packages/cfd/src/features/Containers/cfd-password-manager-modal/cfd-password-manager-modal.tsx new file mode 100644 index 000000000000..8cc45fc9b2ef --- /dev/null +++ b/packages/cfd/src/features/Containers/cfd-password-manager-modal/cfd-password-manager-modal.tsx @@ -0,0 +1,127 @@ +import React from 'react'; +import { Modal, DesktopWrapper, MobileWrapper, MultiStep, PageOverlay, UILoader } from '@deriv/components'; +import { localize } from '@deriv/translations'; +import { VerifyEmailResponse } from '@deriv/api-types'; +import { getCFDPlatformLabel } from '@deriv/shared'; +import { observer, useStore } from '@deriv/stores'; +import { useVerifyEmail } from '@deriv/api'; +import { TCFDPasswordManagerTabContentWrapper, TCFDPasswordManagerModal } from '../../../Containers/props.types'; +import { QUERY_STATUS } from '../../../Helpers/cfd-config'; +import { CFDPasswordReset } from './cfd-password-reset'; +import { CFDPasswordManagerTabContent } from './cfd-password-manager-tab-content'; + +// Temporary type because of build failing. Confirm with Accounts team +type TSendVerifyEmail = () => Promise; + +export type TStatus = typeof QUERY_STATUS[keyof typeof QUERY_STATUS]; + +const CFDPasswordManagerTabContentWrapper = ({ multi_step_ref, steps }: TCFDPasswordManagerTabContentWrapper) => ( + +); + +const CFDPasswordManagerModal = observer( + ({ + is_visible, + platform, + selected_login, + toggleModal, + selected_account_type, + selected_account_group, + selected_server, + }: TCFDPasswordManagerModal) => { + const { client, ui } = useStore(); + + const { email } = client; + const { enableApp, disableApp } = ui; + + const { mutate } = useVerifyEmail(); + + const sendVerifyEmail = () => mutate({ verify_email: email, type: 'trading_platform_investor_password_reset' }); + + const multi_step_ref: React.MutableRefObject = React.useRef(); + const [index, setIndex] = React.useState(0); + + const [password_type, setPasswordType] = React.useState('main'); + + if (!selected_login) return null; + + const getTitle = () => { + return localize('Manage {{platform}} password', { + platform: getCFDPlatformLabel(platform), + }); + }; + + const getHeader = (i: number) => { + if (i === 0) { + return localize('Manage {{platform}} password', { + platform: getCFDPlatformLabel(platform), + }); + } + return localize('Manage password'); + }; + + const onChangeActiveTabIndex = (i: number) => { + setIndex(i); + }; + + const steps = [ + { + component: ( + + ), + }, + { + component: ( + + ), + }, + ]; + + return ( + }> + + + + + + + + + + + + ); + } +); + +export default CFDPasswordManagerModal; diff --git a/packages/cfd/src/features/Containers/cfd-password-manager-modal/cfd-password-manager-tab-content.tsx b/packages/cfd/src/features/Containers/cfd-password-manager-modal/cfd-password-manager-tab-content.tsx new file mode 100644 index 000000000000..185105e423a2 --- /dev/null +++ b/packages/cfd/src/features/Containers/cfd-password-manager-modal/cfd-password-manager-tab-content.tsx @@ -0,0 +1,194 @@ +import React from 'react'; +import { Tabs, DesktopWrapper, Div100vhContainer, MobileWrapper, ThemedScrollbars } from '@deriv/components'; +import { localize } from '@deriv/translations'; +import { isMobile, validLength, validPassword, getErrorMessages, getCFDPlatformLabel } from '@deriv/shared'; +import { useTradingPlatformInvestorPasswordChange, useTradingPlatformPasswordChange } from '@deriv/api'; +import { FormikErrors } from 'formik'; +import TradingPasswordManager from '../../../Containers/trading-password-manager'; +import InvestorPasswordManager from '../../../Containers/investor-password-manager'; +import { + TCFDPasswordManagerTabContent, + TFormValues, + TPasswordManagerModalFormValues, +} from '../../../Containers/props.types'; +import { CFD_PLATFORMS, QUERY_STATUS, PASSWORD_TYPE } from '../../../Helpers/cfd-config'; +import { TStatus } from './cfd-password-manager-modal'; + +export const CFDPasswordManagerTabContent = ({ + toggleModal, + selected_login, + email, + setPasswordType, + multi_step_ref, + platform, + onChangeActiveTabIndex, + account_group, +}: TCFDPasswordManagerTabContent) => { + const { + mutateAsync: changePassword, + status: change_password_status, + error: change_password_error, + } = useTradingPlatformPasswordChange(); + const { + mutateAsync: changeInvestorPassword, + status: change_investor_password_status, + error: change_investor_password_error, + } = useTradingPlatformInvestorPasswordChange(); + const [active_tab_index, setActiveTabIndex] = React.useState(0); + const [error_message_investor, setErrorMessageInvestor] = React.useState(''); + const [is_submit_success_investor, setIsSubmitSuccessInvestor] = React.useState(false); + + // view height - margin top and bottom of modal - modal title - modal content margin top and bottom - table title + const container_height = 'calc(100vh - 84px - 5.6rem - 8.8rem - 4rem)'; + const validatePassword = (values: TFormValues) => { + const errors: FormikErrors = {}; + + if ( + !validLength(values.new_password, { + min: 8, + max: 25, + }) + ) { + errors.new_password = localize('You should enter {{min_number}}-{{max_number}} characters.', { + min_number: 8, + max_number: 25, + }); + } else if (!validPassword(values.new_password)) { + errors.new_password = getErrorMessages().password(); + } else if (values.new_password.toLowerCase() === email.toLowerCase()) { + errors.new_password = localize('Your password cannot be the same as your email address.'); + } + + if (!values.old_password && values.old_password !== undefined) { + errors.old_password = localize('This field is required'); + } + + return errors; + }; + const showError = (error_message: string) => { + setErrorMessageInvestor(error_message); + }; + + const hideError = () => { + setErrorMessageInvestor(''); + setIsSubmitSuccessInvestor(true); + }; + + const handlePasswordErrorMessages = React.useCallback((status: TStatus, error: Error) => { + if (status === QUERY_STATUS.ERROR && error) { + showError((error as unknown as Error)?.message); + } + if (status === QUERY_STATUS.SUCCESS) { + hideError(); + } + }, []); + + React.useEffect(() => { + handlePasswordErrorMessages(change_password_status, change_password_error as unknown as Error); + }, [change_password_error, change_password_status, handlePasswordErrorMessages]); + + React.useEffect(() => { + handlePasswordErrorMessages( + change_investor_password_status, + change_investor_password_error as unknown as Error + ); + }, [change_investor_password_error, change_investor_password_status, handlePasswordErrorMessages]); + + const onSubmit = React.useCallback( + async (values: TPasswordManagerModalFormValues) => { + if (!selected_login) { + return; + } + + if (values.password_type === PASSWORD_TYPE.INVESTOR) { + await changeInvestorPassword({ + account_id: selected_login, + old_password: values.old_password, + new_password: values.new_password, + platform: CFD_PLATFORMS.MT5, + }); + } else { + await changePassword({ + old_password: values.old_password, + new_password: values.new_password, + platform: CFD_PLATFORMS.MT5, + }); + } + }, + [changeInvestorPassword, changePassword, selected_login] + ); + + const updateAccountTabIndex = (index: number) => { + setActiveTabIndex(index); + onChangeActiveTabIndex(index); + setErrorMessageInvestor(''); + setIsSubmitSuccessInvestor(false); + }; + + const trading_password_manager = ( + + + + + + + + + + + + + ); + + if (platform === CFD_PLATFORMS.DXTRADE) return trading_password_manager; + + return ( + +
+ {trading_password_manager} +
+
+ + + + + + + + + + +
+ + ); +}; diff --git a/packages/cfd/src/features/Containers/cfd-password-manager-modal/cfd-password-reset.tsx b/packages/cfd/src/features/Containers/cfd-password-manager-modal/cfd-password-reset.tsx new file mode 100644 index 000000000000..1e1a93e90b75 --- /dev/null +++ b/packages/cfd/src/features/Containers/cfd-password-manager-modal/cfd-password-reset.tsx @@ -0,0 +1,86 @@ +import React from 'react'; +import { Icon, Button, Text } from '@deriv/components'; +import { Localize } from '@deriv/translations'; +import { TCFDPasswordReset } from '../../../Containers/props.types'; +import { CountdownComponent } from './countdown-component'; + +export const CFDPasswordReset = ({ + sendVerifyEmail, + account_type, + account_group, + server, + password_type, +}: TCFDPasswordReset) => { + const [is_resend_verification_requested, setIsResendVerificationRequested] = React.useState(false); + const [is_resend_verification_sent, setIsResendVerificationSent] = React.useState(false); + + React.useEffect(() => { + localStorage.setItem('cfd_reset_password_intent', [server, account_group, account_type].join('.')); + localStorage.setItem('cfd_reset_password_type', password_type); + sendVerifyEmail(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + const onClickVerification = () => { + setIsResendVerificationRequested(true); + }; + + const resendVerification = () => { + sendVerifyEmail(); + setIsResendVerificationSent(true); + }; + + return ( +
+ +

+ +

+ + + + {!is_resend_verification_requested && ( + + )} + {is_resend_verification_requested && ( + <> + + + + + + + + + )} +
+ ); +}; diff --git a/packages/cfd/src/features/Containers/cfd-password-manager-modal/countdown-component.tsx b/packages/cfd/src/features/Containers/cfd-password-manager-modal/countdown-component.tsx new file mode 100644 index 000000000000..ebeaa4fb5d71 --- /dev/null +++ b/packages/cfd/src/features/Containers/cfd-password-manager-modal/countdown-component.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import { TCountdownComponent } from '../../../Containers/props.types'; + +export const CountdownComponent = ({ count_from = 60, onTimeout }: TCountdownComponent) => { + const [count, setCount] = React.useState(count_from); + + React.useEffect(() => { + let interval: ReturnType; + + if (count !== 0) { + interval = setTimeout(() => { + setCount(count - 1); + }, 1000); + } else { + onTimeout(); + } + + return () => { + clearTimeout(interval); + }; + + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [count]); + return {count}; +}; diff --git a/packages/cfd/src/features/Containers/cfd-password-modal/cfd-password-modal.tsx b/packages/cfd/src/features/Containers/cfd-password-modal/cfd-password-modal.tsx index 9328cd101f0f..f8a839811bc5 100644 --- a/packages/cfd/src/features/Containers/cfd-password-modal/cfd-password-modal.tsx +++ b/packages/cfd/src/features/Containers/cfd-password-modal/cfd-password-modal.tsx @@ -2,12 +2,6 @@ import React from 'react'; import { FormikErrors } from 'formik'; import { useHistory } from 'react-router'; import { SentEmailModal } from '@deriv/account'; -import { - getDxCompanies, - getMtCompanies, - TMtCompanies, - TDxCompanies, -} from '../../../Stores/Modules/CFD/Helpers/cfd-config'; import { MobileDialog, Modal } from '@deriv/components'; import { getAuthenticationStatusInfo, @@ -30,6 +24,12 @@ import { useTradingPlatformPasswordChange, useVerifyEmail, } from '@deriv/api'; +import { + getDxCompanies, + getMtCompanies, + TMtCompanies, + TDxCompanies, +} from '../../../Stores/Modules/CFD/Helpers/cfd-config'; import SuccessDialog from '../../../Components/success-dialog.jsx'; import '../../../sass/cfd.scss'; import './cfd-password-modal.scss'; @@ -39,7 +39,7 @@ import { PasswordModalHeader } from './password-modal-header'; import { CFDPasswordForm } from './cfd-password-form'; import { IconType } from './icon-type'; import { TCFDPasswordFormValues, TOnSubmitPassword } from './types'; -import { CFD_PLATFORMS, CATEGORY, JURISDICTION, MARKET_TYPE } from '../../../Helpers/cfd-config'; +import { CFD_PLATFORMS, CATEGORY, JURISDICTION, MARKET_TYPE, QUERY_STATUS } from '../../../Helpers/cfd-config'; type TReviewMsgForMT5 = { is_selected_mt5_verified: boolean; @@ -184,10 +184,10 @@ const CFDPasswordModal = observer(({ form_error, platform }: TCFDPasswordModalPr }, [jurisdiction_selected_shortcode, account_status]); React.useEffect(() => { - if (mt5_create_account_status === 'error' && mt5_create_account_error) { + if (mt5_create_account_status === QUERY_STATUS.ERROR && mt5_create_account_error) { setError(true, mt5_create_account_error as unknown as Error); } - if (mt5_create_account_status === 'success') { + if (mt5_create_account_status === QUERY_STATUS.SUCCESS) { setError(false); setCFDSuccessDialog(true); } @@ -195,10 +195,10 @@ const CFDPasswordModal = observer(({ form_error, platform }: TCFDPasswordModalPr }, [mt5_create_account_status, mt5_create_account_error]); React.useEffect(() => { - if (cfd_create_account_status === 'error' && mt5_create_account_error) { + if (cfd_create_account_status === QUERY_STATUS.ERROR && mt5_create_account_error) { setError(true, cfd_create_account_error as unknown as Error); } - if (cfd_create_account_status === 'success') { + if (cfd_create_account_status === QUERY_STATUS.SUCCESS) { setError(false); setCFDSuccessDialog(true); } @@ -288,7 +288,7 @@ const CFDPasswordModal = observer(({ form_error, platform }: TCFDPasswordModalPr : (accountType as unknown as TAccountType), address: settings?.address_line_1 || '', city: settings?.address_city || '', - company: 'svg', + company: JURISDICTION.SVG, country: settings?.country_code || '', email: settings?.email || '', leverage: availableMT5Accounts?.find(acc => acc.market_type === marketType)?.leverage || 500, @@ -302,10 +302,10 @@ const CFDPasswordModal = observer(({ form_error, platform }: TCFDPasswordModalPr }, }); - if (mt5_create_account_status === 'success') { + if (mt5_create_account_status === QUERY_STATUS.SUCCESS) { actions.setStatus({ success: true }); actions.setSubmitting(false); - } else if (mt5_create_account_status === 'error' && mt5_create_account_error) { + } else if (mt5_create_account_status === QUERY_STATUS.ERROR && mt5_create_account_error) { actions.resetForm({}); actions.setSubmitting(false); actions.setStatus({ success: false }); @@ -325,10 +325,10 @@ const CFDPasswordModal = observer(({ form_error, platform }: TCFDPasswordModalPr platform: platform as unknown as TCFDOtherPlatform, }, }); - if (cfd_create_account_status === 'success') { + if (cfd_create_account_status === QUERY_STATUS.SUCCESS) { actions.setStatus({ success: true }); actions.setSubmitting(false); - } else if (cfd_create_account_status === 'error' && cfd_create_account_error) { + } else if (cfd_create_account_status === QUERY_STATUS.ERROR && cfd_create_account_error) { actions.resetForm({}); actions.setSubmitting(false); actions.setStatus({ success: false }); diff --git a/packages/cfd/src/features/Containers/cfd-reset-password-modal.tsx b/packages/cfd/src/features/Containers/cfd-reset-password-modal.tsx index 7ffae85ff6a6..6a00c2f876b7 100644 --- a/packages/cfd/src/features/Containers/cfd-reset-password-modal.tsx +++ b/packages/cfd/src/features/Containers/cfd-reset-password-modal.tsx @@ -8,7 +8,7 @@ import { TResetPasswordIntent, TCFDResetPasswordModal, TError } from '../../Cont import { observer, useStore } from '@deriv/stores'; import { useTradingPlatformInvestorPasswordReset } from '@deriv/api'; import { useCfdStore } from '../../Stores/Modules/CFD/Helpers/useCfdStores'; -import { CFD_PLATFORMS } from '../../Helpers/cfd-config'; +import { CFD_PLATFORMS, QUERY_STATUS } from '../../Helpers/cfd-config'; const ResetPasswordIntent = ({ current_list, children, is_eu, ...props }: TResetPasswordIntent) => { const reset_password_intent = localStorage.getItem('cfd_reset_password_intent'); @@ -82,10 +82,10 @@ const CFDResetPasswordModal = observer(({ platform }: TCFDResetPasswordModal) => }; React.useEffect(() => { - if (status === 'error' && error) { + if (status === QUERY_STATUS.ERROR && error) { renderErrorBox(error as unknown as TError); } - if (status === 'success') { + if (status === QUERY_STATUS.SUCCESS) { setState({ ...state, is_finished: true, diff --git a/packages/cfd/src/features/Containers/trading-password-manager.tsx b/packages/cfd/src/features/Containers/trading-password-manager.tsx deleted file mode 100644 index 84cb3a9e1ea3..000000000000 --- a/packages/cfd/src/features/Containers/trading-password-manager.tsx +++ /dev/null @@ -1,123 +0,0 @@ -import React from 'react'; -import { Text, Button, Icon, MultiStep, SendEmailTemplate } from '@deriv/components'; -import { localize, Localize } from '@deriv/translations'; -import { getCFDPlatformLabel } from '@deriv/shared'; -import { useVerifyEmail } from '@deriv/api'; -import ChangePasswordConfirmation from '../../Containers/cfd-change-password-confirmation'; -import { TChangePassword, TPasswordResetAndTradingPasswordManager } from '../../Containers/props.types'; -import { CATEGORY, CFD_PLATFORMS } from '../../Helpers/cfd-config'; - -const ChangePassword = ({ platform, onConfirm }: TChangePassword) => ( -
- - - - - - {platform === CFD_PLATFORMS.MT5 ? ( - - ) : ( - - )} - - -
-); - -const PasswordReset = ({ email, platform, account_group }: TPasswordResetAndTradingPasswordManager) => { - const { mutate: verifyEmail } = useVerifyEmail(); - const onClickSendEmail = React.useCallback(() => { - let redirect_to = platform === CFD_PLATFORMS.MT5 ? 1 : 2; - - // if account type is real convert redirect_to from 1 or 2 to 10 or 20 - // and if account type is demo convert redirect_to from 1 or 2 to 11 or 21 - if (account_group === CATEGORY.REAL) { - redirect_to = Number(`${redirect_to}0`); - } else if (account_group === CATEGORY.DEMO) { - redirect_to = Number(`${redirect_to}1`); - } - - const password_reset_code = - platform === CFD_PLATFORMS.MT5 - ? 'trading_platform_mt5_password_reset' - : 'trading_platform_dxtrade_password_reset'; - - verifyEmail({ - verify_email: email, - type: password_reset_code, - url_parameters: { - redirect_to, - }, - }); - }, [platform, account_group, verifyEmail, email]); - - React.useEffect(() => { - onClickSendEmail(); - }, [onClickSendEmail]); - - return ( - - } - lbl_no_receive={localize("Didn't receive the email?")} - txt_resend={localize('Resend email')} - txt_resend_in={localize('Resend email in')} - onClickSendEmail={onClickSendEmail} - /> - ); -}; - -const TradingPasswordManager = ({ platform, email, account_group }: TPasswordResetAndTradingPasswordManager) => { - const multi_step_ref = React.useRef<{ goNextStep: () => void; goPrevStep: () => void }>(); - - const steps = [ - { - component: multi_step_ref.current?.goNextStep()} />, - }, - { - component: ( - multi_step_ref.current?.goNextStep()} - onCancel={() => multi_step_ref.current?.goPrevStep()} - /> - ), - }, - { - component: , - }, - ]; - - return ( -
- -
- ); -}; - -export default TradingPasswordManager; diff --git a/packages/cfd/src/features/Containers/trading-password-manager/change-password.tsx b/packages/cfd/src/features/Containers/trading-password-manager/change-password.tsx new file mode 100644 index 000000000000..94f904d08db2 --- /dev/null +++ b/packages/cfd/src/features/Containers/trading-password-manager/change-password.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { Text, Button, Icon } from '@deriv/components'; +import { Localize } from '@deriv/translations'; +import { getCFDPlatformLabel } from '@deriv/shared'; +import { TChangePassword } from '../../../Containers/props.types'; +import { CFD_PLATFORMS } from '../../../Helpers/cfd-config'; + +export const ChangePassword = ({ platform, onConfirm }: TChangePassword) => ( +
+ + + + + + {platform === CFD_PLATFORMS.MT5 ? ( + + ) : ( + + )} + + +
+); diff --git a/packages/cfd/src/features/Containers/trading-password-manager/password-reset.tsx b/packages/cfd/src/features/Containers/trading-password-manager/password-reset.tsx new file mode 100644 index 000000000000..26bf6e48c85b --- /dev/null +++ b/packages/cfd/src/features/Containers/trading-password-manager/password-reset.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { SendEmailTemplate } from '@deriv/components'; +import { localize, Localize } from '@deriv/translations'; +import { getCFDPlatformLabel } from '@deriv/shared'; +import { useVerifyEmail } from '@deriv/api'; +import { TPasswordResetAndTradingPasswordManager } from '../../../Containers/props.types'; +import { CATEGORY, CFD_PLATFORMS } from '../../../Helpers/cfd-config'; + +export const PasswordReset = ({ email, platform, account_group }: TPasswordResetAndTradingPasswordManager) => { + const { mutate: verifyEmail } = useVerifyEmail(); + const onClickSendEmail = React.useCallback(() => { + let redirect_to = platform === CFD_PLATFORMS.MT5 ? 1 : 2; + + // if account type is real convert redirect_to from 1 or 2 to 10 or 20 + // and if account type is demo convert redirect_to from 1 or 2 to 11 or 21 + if (account_group === CATEGORY.REAL) { + redirect_to = Number(`${redirect_to}0`); + } else if (account_group === CATEGORY.DEMO) { + redirect_to = Number(`${redirect_to}1`); + } + + const password_reset_code = + platform === CFD_PLATFORMS.MT5 + ? 'trading_platform_mt5_password_reset' + : 'trading_platform_dxtrade_password_reset'; + + verifyEmail({ + verify_email: email, + type: password_reset_code, + url_parameters: { + redirect_to, + }, + }); + }, [platform, account_group, verifyEmail, email]); + + React.useEffect(() => { + onClickSendEmail(); + }, [onClickSendEmail]); + + return ( + + } + lbl_no_receive={localize("Didn't receive the email?")} + txt_resend={localize('Resend email')} + txt_resend_in={localize('Resend email in')} + onClickSendEmail={onClickSendEmail} + /> + ); +}; diff --git a/packages/cfd/src/features/Containers/trading-password-manager/trading-password-manager.tsx b/packages/cfd/src/features/Containers/trading-password-manager/trading-password-manager.tsx new file mode 100644 index 000000000000..3ec3ad252a90 --- /dev/null +++ b/packages/cfd/src/features/Containers/trading-password-manager/trading-password-manager.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import { MultiStep } from '@deriv/components'; +import { localize } from '@deriv/translations'; +import ChangePasswordConfirmation from '../../../Containers/cfd-change-password-confirmation'; +import { TPasswordResetAndTradingPasswordManager } from '../../../Containers/props.types'; +import { ChangePassword } from './change-password'; +import { PasswordReset } from './password-reset'; + +const TradingPasswordManager = ({ platform, email, account_group }: TPasswordResetAndTradingPasswordManager) => { + const multi_step_ref = React.useRef<{ goNextStep: () => void; goPrevStep: () => void }>(); + + const steps = [ + { + component: multi_step_ref.current?.goNextStep()} />, + }, + { + component: ( + multi_step_ref.current?.goNextStep()} + onCancel={() => multi_step_ref.current?.goPrevStep()} + /> + ), + }, + { + component: , + }, + ]; + + return ( +
+ +
+ ); +}; + +export default TradingPasswordManager; From 579cd497a9a970ff491915dd241aa796df51e98c Mon Sep 17 00:00:00 2001 From: Hamza Date: Tue, 21 Nov 2023 12:09:39 +0800 Subject: [PATCH 2/2] refactor: used aliases and added new Helper Alias --- .../cfd-password-manager-modal.tsx | 4 ++-- .../cfd-password-manager-tab-content.tsx | 12 ++++-------- .../cfd-password-reset.tsx | 11 +++++------ .../countdown-component.tsx | 2 +- .../cfd-create-password-form.tsx | 4 ++-- .../cfd-password-modal/cfd-password-form.tsx | 6 +++--- .../cfd-password-modal/cfd-password-modal.tsx | 15 +++++---------- .../cfd-password-modal/create-password.tsx | 4 ++-- .../Containers/cfd-reset-password-modal.tsx | 8 ++++---- .../trading-password-manager/change-password.tsx | 4 ++-- .../trading-password-manager/password-reset.tsx | 4 ++-- .../trading-password-manager.tsx | 4 ++-- packages/cfd/tsconfig.json | 1 + 13 files changed, 35 insertions(+), 44 deletions(-) diff --git a/packages/cfd/src/features/Containers/cfd-password-manager-modal/cfd-password-manager-modal.tsx b/packages/cfd/src/features/Containers/cfd-password-manager-modal/cfd-password-manager-modal.tsx index 8cc45fc9b2ef..ed7d40f9cabe 100644 --- a/packages/cfd/src/features/Containers/cfd-password-manager-modal/cfd-password-manager-modal.tsx +++ b/packages/cfd/src/features/Containers/cfd-password-manager-modal/cfd-password-manager-modal.tsx @@ -5,8 +5,8 @@ import { VerifyEmailResponse } from '@deriv/api-types'; import { getCFDPlatformLabel } from '@deriv/shared'; import { observer, useStore } from '@deriv/stores'; import { useVerifyEmail } from '@deriv/api'; -import { TCFDPasswordManagerTabContentWrapper, TCFDPasswordManagerModal } from '../../../Containers/props.types'; -import { QUERY_STATUS } from '../../../Helpers/cfd-config'; +import { TCFDPasswordManagerTabContentWrapper, TCFDPasswordManagerModal } from 'Containers/props.types'; +import { QUERY_STATUS } from 'Helpers/cfd-config'; import { CFDPasswordReset } from './cfd-password-reset'; import { CFDPasswordManagerTabContent } from './cfd-password-manager-tab-content'; diff --git a/packages/cfd/src/features/Containers/cfd-password-manager-modal/cfd-password-manager-tab-content.tsx b/packages/cfd/src/features/Containers/cfd-password-manager-modal/cfd-password-manager-tab-content.tsx index 185105e423a2..211a3ab009cf 100644 --- a/packages/cfd/src/features/Containers/cfd-password-manager-modal/cfd-password-manager-tab-content.tsx +++ b/packages/cfd/src/features/Containers/cfd-password-manager-modal/cfd-password-manager-tab-content.tsx @@ -4,14 +4,10 @@ import { localize } from '@deriv/translations'; import { isMobile, validLength, validPassword, getErrorMessages, getCFDPlatformLabel } from '@deriv/shared'; import { useTradingPlatformInvestorPasswordChange, useTradingPlatformPasswordChange } from '@deriv/api'; import { FormikErrors } from 'formik'; -import TradingPasswordManager from '../../../Containers/trading-password-manager'; -import InvestorPasswordManager from '../../../Containers/investor-password-manager'; -import { - TCFDPasswordManagerTabContent, - TFormValues, - TPasswordManagerModalFormValues, -} from '../../../Containers/props.types'; -import { CFD_PLATFORMS, QUERY_STATUS, PASSWORD_TYPE } from '../../../Helpers/cfd-config'; +import TradingPasswordManager from 'Containers/trading-password-manager'; +import InvestorPasswordManager from 'Containers/investor-password-manager'; +import { TCFDPasswordManagerTabContent, TFormValues, TPasswordManagerModalFormValues } from 'Containers/props.types'; +import { CFD_PLATFORMS, QUERY_STATUS, PASSWORD_TYPE } from 'Helpers/cfd-config'; import { TStatus } from './cfd-password-manager-modal'; export const CFDPasswordManagerTabContent = ({ diff --git a/packages/cfd/src/features/Containers/cfd-password-manager-modal/cfd-password-reset.tsx b/packages/cfd/src/features/Containers/cfd-password-manager-modal/cfd-password-reset.tsx index 1e1a93e90b75..06aa6f1a74b2 100644 --- a/packages/cfd/src/features/Containers/cfd-password-manager-modal/cfd-password-reset.tsx +++ b/packages/cfd/src/features/Containers/cfd-password-manager-modal/cfd-password-reset.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Icon, Button, Text } from '@deriv/components'; import { Localize } from '@deriv/translations'; -import { TCFDPasswordReset } from '../../../Containers/props.types'; +import { TCFDPasswordReset } from 'Containers/props.types'; import { CountdownComponent } from './countdown-component'; export const CFDPasswordReset = ({ @@ -39,13 +39,12 @@ export const CFDPasswordReset = ({ - {!is_resend_verification_requested && ( + {!is_resend_verification_requested ? ( - )} - {is_resend_verification_requested && ( - <> + ) : ( + )} - + )} ); diff --git a/packages/cfd/src/features/Containers/cfd-password-manager-modal/countdown-component.tsx b/packages/cfd/src/features/Containers/cfd-password-manager-modal/countdown-component.tsx index ebeaa4fb5d71..bfa022ac423a 100644 --- a/packages/cfd/src/features/Containers/cfd-password-manager-modal/countdown-component.tsx +++ b/packages/cfd/src/features/Containers/cfd-password-manager-modal/countdown-component.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { TCountdownComponent } from '../../../Containers/props.types'; +import { TCountdownComponent } from 'Containers/props.types'; export const CountdownComponent = ({ count_from = 60, onTimeout }: TCountdownComponent) => { const [count, setCount] = React.useState(count_from); diff --git a/packages/cfd/src/features/Containers/cfd-password-modal/cfd-create-password-form.tsx b/packages/cfd/src/features/Containers/cfd-password-modal/cfd-create-password-form.tsx index 7346e234367d..b853429b1479 100644 --- a/packages/cfd/src/features/Containers/cfd-password-modal/cfd-create-password-form.tsx +++ b/packages/cfd/src/features/Containers/cfd-password-modal/cfd-create-password-form.tsx @@ -1,8 +1,8 @@ import React from 'react'; import { TCFDPasswordFormReusedProps, TCFDPasswordFormValues, TOnSubmitPassword } from './types'; -import ChangePasswordConfirmation from '../../../Containers/cfd-change-password-confirmation'; +import ChangePasswordConfirmation from 'Containers/cfd-change-password-confirmation'; import { CreatePassword } from './create-password'; -import { CFD_PLATFORMS } from '../../../Helpers/cfd-config'; +import { CFD_PLATFORMS } from 'Helpers/cfd-config'; import { FormikHelpers } from 'formik'; import { MultiStep } from '@deriv/components'; diff --git a/packages/cfd/src/features/Containers/cfd-password-modal/cfd-password-form.tsx b/packages/cfd/src/features/Containers/cfd-password-modal/cfd-password-form.tsx index 99e5eb1f9703..36909d84c6b0 100644 --- a/packages/cfd/src/features/Containers/cfd-password-modal/cfd-password-form.tsx +++ b/packages/cfd/src/features/Containers/cfd-password-modal/cfd-password-form.tsx @@ -1,7 +1,6 @@ import React from 'react'; -import { TCFDPasswordFormReusedProps, TCFDPasswordFormValues, TOnSubmitPassword } from './types'; -import { localize, Localize } from '@deriv/translations'; import { Formik, FormikErrors } from 'formik'; +import { localize, Localize } from '@deriv/translations'; import { isDesktop, isMobile, @@ -11,8 +10,9 @@ import { getLegalEntityName, } from '@deriv/shared'; import { Text, FormSubmitButton, PasswordInput } from '@deriv/components'; +import { TCFDPasswordFormReusedProps, TCFDPasswordFormValues, TOnSubmitPassword } from './types'; import { CFDCreatePasswordForm } from './cfd-create-password-form'; -import { CFD_PLATFORMS } from '../../../Helpers/cfd-config'; +import { CFD_PLATFORMS } from 'Helpers/cfd-config'; const getCancelButtonLabel = ({ should_set_trading_password, diff --git a/packages/cfd/src/features/Containers/cfd-password-modal/cfd-password-modal.tsx b/packages/cfd/src/features/Containers/cfd-password-modal/cfd-password-modal.tsx index f8a839811bc5..221b9dd45430 100644 --- a/packages/cfd/src/features/Containers/cfd-password-modal/cfd-password-modal.tsx +++ b/packages/cfd/src/features/Containers/cfd-password-modal/cfd-password-modal.tsx @@ -24,22 +24,17 @@ import { useTradingPlatformPasswordChange, useVerifyEmail, } from '@deriv/api'; -import { - getDxCompanies, - getMtCompanies, - TMtCompanies, - TDxCompanies, -} from '../../../Stores/Modules/CFD/Helpers/cfd-config'; -import SuccessDialog from '../../../Components/success-dialog.jsx'; -import '../../../sass/cfd.scss'; +import { getDxCompanies, getMtCompanies, TMtCompanies, TDxCompanies } from 'Stores/Modules/CFD/Helpers/cfd-config'; +import SuccessDialog from 'Components/success-dialog.jsx'; +import 'sass/cfd.scss'; import './cfd-password-modal.scss'; import { observer, useStore } from '@deriv/stores'; -import { useCfdStore } from '../../../Stores/Modules/CFD/Helpers/useCfdStores'; +import { useCfdStore } from 'Stores/Modules/CFD/Helpers/useCfdStores'; import { PasswordModalHeader } from './password-modal-header'; import { CFDPasswordForm } from './cfd-password-form'; import { IconType } from './icon-type'; import { TCFDPasswordFormValues, TOnSubmitPassword } from './types'; -import { CFD_PLATFORMS, CATEGORY, JURISDICTION, MARKET_TYPE, QUERY_STATUS } from '../../../Helpers/cfd-config'; +import { CFD_PLATFORMS, CATEGORY, JURISDICTION, MARKET_TYPE, QUERY_STATUS } from 'Helpers/cfd-config'; type TReviewMsgForMT5 = { is_selected_mt5_verified: boolean; diff --git a/packages/cfd/src/features/Containers/cfd-password-modal/create-password.tsx b/packages/cfd/src/features/Containers/cfd-password-modal/create-password.tsx index 378d1b2c3429..968d14182caa 100644 --- a/packages/cfd/src/features/Containers/cfd-password-modal/create-password.tsx +++ b/packages/cfd/src/features/Containers/cfd-password-modal/create-password.tsx @@ -1,10 +1,10 @@ import { Formik, FormikErrors } from 'formik'; import React from 'react'; -import { TCFDPasswordFormReusedProps, TCFDPasswordFormValues, TOnSubmitPassword } from './types'; import { Text, Icon, PasswordMeter, PasswordInput, FormSubmitButton } from '@deriv/components'; import { localize, Localize } from '@deriv/translations'; import { getCFDPlatformLabel, getErrorMessages } from '@deriv/shared'; -import { CFD_PLATFORMS } from '../../../Helpers/cfd-config'; +import { TCFDPasswordFormReusedProps, TCFDPasswordFormValues, TOnSubmitPassword } from './types'; +import { CFD_PLATFORMS } from 'Helpers/cfd-config'; type TCFDCreatePasswordProps = TCFDPasswordFormReusedProps & { password: string; diff --git a/packages/cfd/src/features/Containers/cfd-reset-password-modal.tsx b/packages/cfd/src/features/Containers/cfd-reset-password-modal.tsx index 6a00c2f876b7..528627fd22c8 100644 --- a/packages/cfd/src/features/Containers/cfd-reset-password-modal.tsx +++ b/packages/cfd/src/features/Containers/cfd-reset-password-modal.tsx @@ -3,12 +3,12 @@ import React from 'react'; import { Button, Icon, PasswordMeter, PasswordInput, FormSubmitButton, Loading, Modal, Text } from '@deriv/components'; import { validLength, validPassword, getErrorMessages, redirectToLogin } from '@deriv/shared'; import { localize, Localize, getLanguage } from '@deriv/translations'; -import { getMtCompanies, TMtCompanies } from '../../Stores/Modules/CFD/Helpers/cfd-config'; -import { TResetPasswordIntent, TCFDResetPasswordModal, TError } from '../../Containers/props.types'; import { observer, useStore } from '@deriv/stores'; import { useTradingPlatformInvestorPasswordReset } from '@deriv/api'; -import { useCfdStore } from '../../Stores/Modules/CFD/Helpers/useCfdStores'; -import { CFD_PLATFORMS, QUERY_STATUS } from '../../Helpers/cfd-config'; +import { getMtCompanies, TMtCompanies } from 'Stores/Modules/CFD/Helpers/cfd-config'; +import { useCfdStore } from 'Stores/Modules/CFD/Helpers/useCfdStores'; +import { TResetPasswordIntent, TCFDResetPasswordModal, TError } from 'Containers/props.types'; +import { CFD_PLATFORMS, QUERY_STATUS } from 'Helpers/cfd-config'; const ResetPasswordIntent = ({ current_list, children, is_eu, ...props }: TResetPasswordIntent) => { const reset_password_intent = localStorage.getItem('cfd_reset_password_intent'); diff --git a/packages/cfd/src/features/Containers/trading-password-manager/change-password.tsx b/packages/cfd/src/features/Containers/trading-password-manager/change-password.tsx index 94f904d08db2..715038935cbf 100644 --- a/packages/cfd/src/features/Containers/trading-password-manager/change-password.tsx +++ b/packages/cfd/src/features/Containers/trading-password-manager/change-password.tsx @@ -2,8 +2,8 @@ import React from 'react'; import { Text, Button, Icon } from '@deriv/components'; import { Localize } from '@deriv/translations'; import { getCFDPlatformLabel } from '@deriv/shared'; -import { TChangePassword } from '../../../Containers/props.types'; -import { CFD_PLATFORMS } from '../../../Helpers/cfd-config'; +import { TChangePassword } from 'Containers/props.types'; +import { CFD_PLATFORMS } from 'Helpers/cfd-config'; export const ChangePassword = ({ platform, onConfirm }: TChangePassword) => (
diff --git a/packages/cfd/src/features/Containers/trading-password-manager/password-reset.tsx b/packages/cfd/src/features/Containers/trading-password-manager/password-reset.tsx index 26bf6e48c85b..06e68c040196 100644 --- a/packages/cfd/src/features/Containers/trading-password-manager/password-reset.tsx +++ b/packages/cfd/src/features/Containers/trading-password-manager/password-reset.tsx @@ -3,8 +3,8 @@ import { SendEmailTemplate } from '@deriv/components'; import { localize, Localize } from '@deriv/translations'; import { getCFDPlatformLabel } from '@deriv/shared'; import { useVerifyEmail } from '@deriv/api'; -import { TPasswordResetAndTradingPasswordManager } from '../../../Containers/props.types'; -import { CATEGORY, CFD_PLATFORMS } from '../../../Helpers/cfd-config'; +import { TPasswordResetAndTradingPasswordManager } from 'Containers/props.types'; +import { CATEGORY, CFD_PLATFORMS } from 'Helpers/cfd-config'; export const PasswordReset = ({ email, platform, account_group }: TPasswordResetAndTradingPasswordManager) => { const { mutate: verifyEmail } = useVerifyEmail(); diff --git a/packages/cfd/src/features/Containers/trading-password-manager/trading-password-manager.tsx b/packages/cfd/src/features/Containers/trading-password-manager/trading-password-manager.tsx index 3ec3ad252a90..5b958c2c619e 100644 --- a/packages/cfd/src/features/Containers/trading-password-manager/trading-password-manager.tsx +++ b/packages/cfd/src/features/Containers/trading-password-manager/trading-password-manager.tsx @@ -1,8 +1,8 @@ import React from 'react'; import { MultiStep } from '@deriv/components'; import { localize } from '@deriv/translations'; -import ChangePasswordConfirmation from '../../../Containers/cfd-change-password-confirmation'; -import { TPasswordResetAndTradingPasswordManager } from '../../../Containers/props.types'; +import ChangePasswordConfirmation from 'Containers/cfd-change-password-confirmation'; +import { TPasswordResetAndTradingPasswordManager } from 'Containers/props.types'; import { ChangePassword } from './change-password'; import { PasswordReset } from './password-reset'; diff --git a/packages/cfd/tsconfig.json b/packages/cfd/tsconfig.json index 7e2de89e1576..d6ddb529af7d 100644 --- a/packages/cfd/tsconfig.json +++ b/packages/cfd/tsconfig.json @@ -7,6 +7,7 @@ "Constants/*": ["./src/Constants/*"], "Components/*": ["./src/Components/*"], "Containers/*": ["./src/Containers/*"], + "Helpers/*": ["./src/Helpers/*"], "Modules/*": ["./src/Modules/*"], "Sass/*": ["./src/sass/*"], "Stores/*": ["./src/Stores/*"],