[CFDS] [Refactoring] Hamza / Remove the hard-coded variables and replace them with config file

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<VerifyEmailResponse>;
+
+export type TStatus = typeof QUERY_STATUS[keyof typeof QUERY_STATUS];
+
+const CFDPasswordManagerTabContentWrapper = ({ multi_step_ref, steps }: TCFDPasswordManagerTabContentWrapper) => (
+    <MultiStep ref={multi_step_ref} steps={steps} className='cfd-password-manager' lbl_previous={localize('Back')} />
+);
+
+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<undefined> = React.useRef();
+        const [index, setIndex] = React.useState<number>(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: (
+                    <CFDPasswordManagerTabContent
+                        email={email}
+                        selected_login={selected_login}
+                        toggleModal={toggleModal}
+                        setPasswordType={setPasswordType}
+                        multi_step_ref={multi_step_ref}
+                        platform={platform}
+                        onChangeActiveTabIndex={onChangeActiveTabIndex}
+                        account_group={selected_account_group}
+                    />
+                ),
+            },
+            {
+                component: (
+                    <CFDPasswordReset
+                        server={selected_server}
+                        sendVerifyEmail={sendVerifyEmail as unknown as TSendVerifyEmail}
+                        account_type={selected_account_type}
+                        account_group={selected_account_group}
+                        password_type={password_type}
+                    />
+                ),
+            },
+        ];
+
+        return (
+            <React.Suspense fallback={<UILoader />}>
+                <DesktopWrapper>
+                    <Modal
+                        className='cfd-password-manager__modal'
+                        disableApp={disableApp}
+                        enableApp={enableApp}
+                        is_open={is_visible}
+                        title={getTitle()}
+                        toggleModal={toggleModal}
+                        height='688px'
+                        width='904px'
+                        should_header_stick_body={false}
+                    >
+                        <CFDPasswordManagerTabContentWrapper steps={steps} multi_step_ref={multi_step_ref} />
+                    </Modal>
+                </DesktopWrapper>
+                <MobileWrapper>
+                    <PageOverlay
+                        is_open={is_visible}
+                        portal_id='deriv_app'
+                        header={getHeader(index)}
+                        onClickClose={toggleModal}
+                    >
+                        <CFDPasswordManagerTabContentWrapper steps={steps} multi_step_ref={multi_step_ref} />
+                    </PageOverlay>
+                </MobileWrapper>
+            </React.Suspense>
+        );
+    }
+);
+
+export default CFDPasswordManagerModal;

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<number>(0);
+    const [error_message_investor, setErrorMessageInvestor] = React.useState<string>('');
+    const [is_submit_success_investor, setIsSubmitSuccessInvestor] = React.useState<boolean>(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<TFormValues> = {};
+
+        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 = (
+        <React.Fragment>
+            <DesktopWrapper>
+                <ThemedScrollbars height={container_height} is_bypassed={isMobile()} autohide={false}>
+                    <TradingPasswordManager
+                        toggleModal={toggleModal}
+                        platform={platform}
+                        email={email}
+                        account_group={account_group}
+                    />
+                </ThemedScrollbars>
+            </DesktopWrapper>
+            <MobileWrapper>
+                <Div100vhContainer className='cfd-password-manager__scroll-wrapper' height_offset='120px'>
+                    <TradingPasswordManager
+                        toggleModal={toggleModal}
+                        platform={platform}
+                        email={email}
+                        account_group={account_group}
+                    />
+                </Div100vhContainer>
+            </MobileWrapper>
+        </React.Fragment>
+    );
+
+    if (platform === CFD_PLATFORMS.DXTRADE) return trading_password_manager;
+
+    return (
+        <Tabs active_index={active_tab_index} onTabItemClick={updateAccountTabIndex} top>
+            <div
+                label={localize('{{platform}} password', {
+                    platform: getCFDPlatformLabel(platform),
+                })}
+            >
+                {trading_password_manager}
+            </div>
+            <div label={localize('Investor password')}>
+                <DesktopWrapper>
+                    <ThemedScrollbars height={container_height}>
+                        <InvestorPasswordManager
+                            is_submit_success_investor={is_submit_success_investor}
+                            toggleModal={toggleModal}
+                            error_message_investor={error_message_investor}
+                            validatePassword={validatePassword}
+                            onSubmit={onSubmit}
+                            setPasswordType={setPasswordType}
+                            multi_step_ref={multi_step_ref}
+                        />
+                    </ThemedScrollbars>
+                </DesktopWrapper>
+                <MobileWrapper>
+                    <Div100vhContainer className='cfd-password-manager__scroll-wrapper' height_offset='120px'>
+                        <InvestorPasswordManager
+                            is_submit_success_investor={is_submit_success_investor}
+                            toggleModal={toggleModal}
+                            error_message_investor={error_message_investor}
+                            validatePassword={validatePassword}
+                            onSubmit={onSubmit}
+                            setPasswordType={setPasswordType}
+                            multi_step_ref={multi_step_ref}
+                        />
+                    </Div100vhContainer>
+                </MobileWrapper>
+            </div>
+        </Tabs>
+    );
+};