[TRAH] shontzu/TRAH-3097/Change-dxtrade-password-modal (binary-com#14292

) * chore: init password policy component * refactor: refactor 1 * chore: todo: success modal * fix: successmodal and closeModal * fix: PR Test Workflow complains * chore: code reviews * chore: code review 2 * fix: dxtrade enter password modal props * chore: this komen Co-authored-by: thisyahlen <104053934+thisyahlen-deriv@users.noreply.github.com> * chore: this komen * chore: formatting, sorting, and moving passwordChecklist to constant file * chore: import Fragment from React * chore: code reviews - handleSubmit async functions improperly used - do not modify password regex use as it is from BE - early return statement * fix: dxtrade password modal * chore: komen * refactor: useQueryParams for password modals * fix: dxtrade create password modal icon * fix: mt5 account creation bug * fix: api calls that is dependent on another must async * style: disable Forgot Password button on loading state * chore: replace arrow func w callback func --------- Co-authored-by: thisyahlen <104053934+thisyahlen-deriv@users.noreply.github.com>
niloofar-deriv · Mar 29, 2024 · ea1da6b · ea1da6b
1 parent e389429
commit ea1da6b
Show file tree

Hide file tree

Showing 16 changed files with 86 additions and 111 deletions.
diff --git a/...cfd/flows/OtherCFDs/Dxtrade/AvailableDxtradeAccountsList/AvailableDxtradeAccountsList.tsx b/...cfd/flows/OtherCFDs/Dxtrade/AvailableDxtradeAccountsList/AvailableDxtradeAccountsList.tsx
@@ -39,10 +39,10 @@ const AvailableDxtradeAccountsList = () => {
     const title = getCfdsAccountTitle(PlatformDetails.dxtrade.title, activeTradingAccount?.is_virtual);
 
     const trailingButtonClick = () => {
-        setCfdState({ platform: PlatformDetails.dxtrade.platform });
         if (!hasActiveDerivAccount) {
             setIsDerivedAccountModalOpen(true);
         } else {
+            setCfdState({ platform: PlatformDetails.dxtrade.platform });
             openModal('DxtradePasswordModal');
         }
     };

diff --git a/...es/tradershub/src/features/cfd/modals/DxtradePasswordModal/DxtradeCreateAccountButton.tsx b/...es/tradershub/src/features/cfd/modals/DxtradePasswordModal/DxtradeCreateAccountButton.tsx
@@ -1,25 +1,29 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useQueryParams } from '@/hooks';
 import { Button } from '@deriv-com/ui';
 import useDxtradeAccountHandler from '../../../../hooks/useDxtradeAccountHandler';
-import { validPassword } from '../../../../utils/password';
 
 type TCreateAccountButtonProps = {
     buttonText: string;
     password: string;
 };
 
 const DxtradeCreateAccountButton = ({ buttonText, password }: TCreateAccountButtonProps) => {
-    const { createDxtradeAccountLoading: isLoading, handleSubmit } = useDxtradeAccountHandler();
-    const isDisabled = !password || isLoading || !validPassword(password);
+    const { createDxtradeAccountLoading, createOtherCFDAccountSuccess, status, handleSubmit } =
+        useDxtradeAccountHandler();
+
+    const { openModal } = useQueryParams();
+
+    const isDisabled = !password || createDxtradeAccountLoading;
+
+    useEffect(() => {
+        if (status === 'success' || createOtherCFDAccountSuccess) {
+            openModal('DxtradeSuccessModal');
+        }
+    }, [openModal, status, createOtherCFDAccountSuccess]);
 
     return (
-        <Button
-            disabled={isDisabled}
-            isFullWidth
-            isLoading={isLoading}
-            onClick={() => handleSubmit(password)}
-            size='lg'
-        >
+        <Button disabled={isDisabled} isLoading={createDxtradeAccountLoading} onClick={() => handleSubmit(password)}>
             {buttonText}
         </Button>
     );

diff --git a/packages/tradershub/src/features/cfd/modals/DxtradePasswordModal/DxtradePasswordInput.tsx b/packages/tradershub/src/features/cfd/modals/DxtradePasswordModal/DxtradePasswordInput.tsx
diff --git a/packages/tradershub/src/features/cfd/modals/DxtradePasswordModal/DxtradePasswordModal.tsx b/packages/tradershub/src/features/cfd/modals/DxtradePasswordModal/DxtradePasswordModal.tsx
@@ -1,29 +1,21 @@
 import React, { useState } from 'react';
 import { useQueryParams } from '@/hooks';
-import { Modal, useDevice } from '@deriv-com/ui';
-import DxtradePasswordFooter from './DxtradePasswordFooter';
-import DxtradePasswordInput from './DxtradePasswordInput';
+import { useAccountStatus } from '@deriv/api-v2';
+import { Modal } from '@deriv-com/ui';
+import { CreatePassword, EnterPassword } from '../../screens';
 
 const DxtradePasswordModal = () => {
-    const { isDesktop } = useDevice();
     const [password, setPassword] = useState('');
-    const { isModalOpen, closeModal } = useQueryParams();
+    const { data: accountStatus } = useAccountStatus();
+    const { closeModal, isModalOpen } = useQueryParams();
+
+    const isDxtradePasswordNotSet = accountStatus?.is_dxtrade_password_not_set;
+
+    const PasswordComponent = isDxtradePasswordNotSet ? CreatePassword : EnterPassword;
 
     return (
-        <Modal
-            className='w-screen h-screen lg:w-auto lg:h-auto bg-system-light-primary-background '
-            isOpen={isModalOpen('DxtradePasswordModal')}
-            onRequestClose={closeModal}
-        >
-            <Modal.Header hideBorder={isDesktop} onRequestClose={closeModal} />
-            <Modal.Body className='pb-24'>
-                <DxtradePasswordInput password={password} setPassword={setPassword} />
-            </Modal.Body>
-            {!isDesktop && (
-                <Modal.Footer>
-                    <DxtradePasswordFooter password={password} />
-                </Modal.Footer>
-            )}
+        <Modal ariaHideApp={false} isOpen={isModalOpen('DxtradePasswordModal')} onRequestClose={closeModal}>
+            <PasswordComponent onPasswordChange={e => setPassword(e.target.value)} password={password} />
         </Modal>
     );
 };

diff --git a/...radePasswordModal/DxtradeSuccessModal.tsx → ...s/DxtradePasswordModal/DxtradeSuccess.tsx b/...radePasswordModal/DxtradeSuccessModal.tsx → ...s/DxtradePasswordModal/DxtradeSuccess.tsx
@@ -4,7 +4,7 @@ import { Category, PlatformDetails } from '../../constants';
 import { CFDSuccess } from '../../screens';
 import SuccessButtonGroup from '../ButtonGroups/SuccessButtonGroup';
 
-const DxtradeSuccessModal = () => {
+const DxtradeSuccess = () => {
     const { data: activeTrading } = useActiveTradingAccount();
     const isDemo = activeTrading?.is_virtual;
 
@@ -21,4 +21,4 @@ const DxtradeSuccessModal = () => {
     );
 };
 
-export default DxtradeSuccessModal;
+export default DxtradeSuccess;
diff --git a/packages/tradershub/src/features/cfd/modals/JurisdictionModal/JurisdictionModal.tsx b/packages/tradershub/src/features/cfd/modals/JurisdictionModal/JurisdictionModal.tsx
@@ -37,16 +37,21 @@ const JurisdictionModal = () => {
         setCfdState({ selectedJurisdiction });
     }, [selectedJurisdiction, setCfdState]);
 
+    const closeHandler = () => {
+        closeModal();
+        setCfdState({ selectedJurisdiction: '' });
+    };
+
     return (
         <DynamicLeverageContext.Provider value={value}>
             <Modal
                 ariaHideApp={false}
                 className='w-screen h-screen lg:w-auto lg:h-auto bg-system-light-primary-background '
                 isOpen={isModalOpen('JurisdictionModal')}
-                onRequestClose={closeModal}
+                onRequestClose={closeHandler}
             >
                 {!isDynamicLeverageVisible ? (
-                    <Modal.Header onRequestClose={closeModal}>
+                    <Modal.Header onRequestClose={closeHandler}>
                         <Text weight='bold'>{jurisdictionTitle}</Text>
                     </Modal.Header>
                 ) : (

diff --git a/packages/tradershub/src/features/cfd/modals/MT5PasswordModal/MT5ChangePassword.tsx b/packages/tradershub/src/features/cfd/modals/MT5PasswordModal/MT5ChangePassword.tsx
@@ -20,7 +20,8 @@ const MT5ChangePassword = () => {
             new_password: newPassword,
             old_password: currentPassword,
             platform: CFDPlatforms.MT5,
-        }).then(() => createMT5Account(newPassword));
+        });
+        createMT5Account(newPassword);
     };
 
     useEffect(() => {
@@ -57,7 +58,7 @@ const MT5ChangePassword = () => {
                 </ol>
             </Modal.Body>
             <Modal.Footer>
-                <Button color='black' isLoading={tradingPlatformPasswordChangeLoading} variant='outlined'>
+                <Button color='black' disabled={tradingPlatformPasswordChangeLoading} variant='outlined'>
                     Forgot password
                 </Button>
                 <Button

diff --git a/packages/tradershub/src/features/cfd/modals/MT5PasswordModal/MT5CreateAccountButton.tsx b/packages/tradershub/src/features/cfd/modals/MT5PasswordModal/MT5CreateAccountButton.tsx
@@ -23,8 +23,7 @@ const MT5CreateAccountButton = ({ buttonText, password }: TCreateAccountButtonPr
 
     useEffect(() => {
         if (doesNotMeetPasswordPolicy) {
-            openModal('MT5ChangePasswordModal');
-            return;
+            return openModal('MT5ChangePasswordModal');
         }
 
         if (createMT5AccountStatus === 'success') {

diff --git a/packages/tradershub/src/features/cfd/screens/CreatePassword/CreatePassword.tsx b/packages/tradershub/src/features/cfd/screens/CreatePassword/CreatePassword.tsx
@@ -1,9 +1,10 @@
-import React, { ChangeEvent, Fragment } from 'react';
+import React, { ChangeEvent } from 'react';
+import DxtradePasswordIcon from '@/assets/svgs/ic-derivx-password-updated.svg';
 import MT5PasswordIcon from '@/assets/svgs/ic-mt5-password.svg';
 import { useCFDContext } from '@/providers';
-import { Category, CFDPlatforms, PlatformDetails } from '@cfd/constants';
-import { useActiveTradingAccount } from '@deriv/api-v2';
+import { CFDPlatforms, PlatformDetails } from '@cfd/constants';
 import { Modal, PasswordInput, Text } from '@deriv-com/ui';
+import DxtradePasswordFooter from '../../modals/DxtradePasswordModal/DxtradePasswordFooter';
 import MT5PasswordFooter from '../../modals/MT5PasswordModal/MT5PasswordFooter';
 
 type TCreatePasswordProps = {
@@ -17,34 +18,32 @@ type TCreatePasswordProps = {
  * @param password
  */
 const CreatePassword = ({ onPasswordChange, password }: TCreatePasswordProps) => {
-    const { data: activeTrading } = useActiveTradingAccount();
     const { cfdState } = useCFDContext();
 
-    const isDemo = activeTrading?.is_virtual;
     const { platform = CFDPlatforms.MT5 } = cfdState;
     const { title } = PlatformDetails[platform];
 
     return (
-        <Fragment>
-            <Modal.Header>
-                <Text weight='bold'>{`Create a ${isDemo ? Category.DEMO : Category.REAL} ${
-                    PlatformDetails.mt5.title
-                } account`}</Text>
-            </Modal.Header>
-            <Modal.Body>
-                <div className='hidden lg:block'>
-                    <MT5PasswordIcon />
+        <React.Fragment>
+            <Modal.Body className='lg:pt-24 lg:px-24 lg:space-y-16'>
+                <div className='justify-center w-full lg:flex d-none lg:gap-8'>
+                    {platform === CFDPlatforms.MT5 ? <MT5PasswordIcon /> : <DxtradePasswordIcon />}
                 </div>
+
                 <div className='flex flex-col items-center justify-center text-center lg:gap-8'>
                     <Text weight='bold'>Create a {title} password</Text>
                     <Text size='sm'>You can use this password for all your {title} accounts.</Text>
                 </div>
                 <PasswordInput isFullWidth label={`${title} password`} onChange={onPasswordChange} value={password} />
             </Modal.Body>
-            <Modal.Footer>
-                <MT5PasswordFooter password={password} />
+            <Modal.Footer className='flex justify-center' hideBorder>
+                {platform === CFDPlatforms.DXTRADE ? (
+                    <DxtradePasswordFooter password={password} />
+                ) : (
+                    <MT5PasswordFooter password={password} />
+                )}
             </Modal.Footer>
-        </Fragment>
+        </React.Fragment>
     );
 };
 

diff --git a/packages/tradershub/src/features/cfd/screens/EnterPassword/EnterPassword.tsx b/packages/tradershub/src/features/cfd/screens/EnterPassword/EnterPassword.tsx
@@ -4,6 +4,7 @@ import { useCFDContext } from '@/providers';
 import { Category, CFDPlatforms, MarketType, MarketTypeDetails, PlatformDetails } from '@cfd/constants';
 import { useActiveTradingAccount } from '@deriv/api-v2';
 import { Modal, PasswordInput, Text } from '@deriv-com/ui';
+import DxtradePasswordFooter from '../../modals/DxtradePasswordModal/DxtradePasswordFooter';
 import MT5PasswordFooter from '../../modals/MT5PasswordModal/MT5PasswordFooter';
 
 type TEnterPasswordProps = {
@@ -53,7 +54,11 @@ const EnterPassword = ({ onPasswordChange, password }: TEnterPasswordProps) => {
                 </div>
             </Modal.Body>
             <Modal.Footer>
-                <MT5PasswordFooter password={password} />
+                {platform === CFDPlatforms.MT5 ? (
+                    <MT5PasswordFooter password={password} />
+                ) : (
+                    <DxtradePasswordFooter password={password} />
+                )}
             </Modal.Footer>
         </Fragment>
     );

diff --git a/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionScreen.tsx b/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionScreen.tsx
@@ -31,10 +31,6 @@ const JurisdictionScreen = ({ setIsCheckBoxChecked }: TJurisdictionScreenProps)
         [marketType, mt5AccountsList]
     );
 
-    useEffect(() => {
-        return () => setCfdState({ selectedJurisdiction: '' });
-    }, [setCfdState, setIsCheckBoxChecked]);
-
     useEffect(() => {
         setIsCheckBoxChecked(false);
     }, [selectedJurisdiction, setIsCheckBoxChecked]);

diff --git a/packages/tradershub/src/hooks/useMT5AccountHandler.ts b/packages/tradershub/src/hooks/useMT5AccountHandler.ts
@@ -39,23 +39,21 @@ const useMT5AccountHandler = () => {
 
     // in order to create account, we need to set a password through trading_platform_password_change endpoint first
     // then only mt5_create_account can be called, otherwise it will response an error for password required
-    const handleSubmit = (password: string) => {
+    const handleSubmit = async (password: string) => {
         if (isMT5PasswordNotSet) {
-            tradingPasswordChange({
+            await tradingPasswordChange({
                 new_password: password,
                 platform: CFDPlatforms.MT5,
             });
         }
 
-        createPassword(password);
+        await createPassword(password);
     };
 
     const createPassword = (password: string) =>
         createMT5Account({
             payload: {
                 account_type: categoryAccountType,
-                address: settings?.address_line_1 ?? '',
-                city: settings?.address_city ?? '',
                 company: selectedJurisdiction,
                 country: settings?.country_code ?? '',
                 email: settings?.email ?? '',
@@ -75,9 +73,6 @@ const useMT5AccountHandler = () => {
                           })),
                 ...(marketType === MarketType.ALL && { sub_account_category: 'swap_free' }),
                 name: settings?.first_name ?? '',
-                phone: settings?.phone ?? '',
-                state: settings?.address_state ?? '',
-                zipCode: settings?.address_postcode ?? '',
             },
         });
 

diff --git a/packages/tradershub/src/hooks/useQueryParams.ts b/packages/tradershub/src/hooks/useQueryParams.ts
@@ -8,6 +8,7 @@ type ModalId =
     | 'CTraderSuccessModal'
     | 'DummyComponentModal'
     | 'DxtradePasswordModal'
+    | 'DxtradeSuccessModal'
     | 'GetADerivAccountDialog'
     | 'JurisdictionModal'
     | 'MT5AccountTypeModal'

diff --git a/packages/tradershub/src/modals/DxtradeSuccessModal/DxtradeSuccessModal.tsx b/packages/tradershub/src/modals/DxtradeSuccessModal/DxtradeSuccessModal.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import DxtradeSuccess from '@/features/cfd/modals/DxtradePasswordModal/DxtradeSuccess';
+import { useQueryParams } from '@/hooks';
+import { Modal } from '@deriv-com/ui';
+
+const MT5SuccessModal = () => {
+    const { isModalOpen, closeModal } = useQueryParams();
+    return (
+        <Modal ariaHideApp={false} isOpen={isModalOpen('DxtradeSuccessModal')} onRequestClose={closeModal}>
+            <Modal.Body>
+                <DxtradeSuccess />
+            </Modal.Body>
+        </Modal>
+    );
+};
+
+export default MT5SuccessModal;
diff --git a/packages/tradershub/src/modals/DxtradeSuccessModal/index.ts b/packages/tradershub/src/modals/DxtradeSuccessModal/index.ts
@@ -0,0 +1 @@
+export { default as DxtradeSuccessModal } from './DxtradeSuccessModal';
diff --git a/packages/tradershub/src/modals/Modals.tsx b/packages/tradershub/src/modals/Modals.tsx
@@ -13,6 +13,7 @@ import { RealAccountCreation, Signup } from '@/flows';
 import { AccountSelector } from './AccountSelector';
 import { AddOrManageAccount } from './AddOrManageAccount';
 import { DummyComponentModal } from './DummyComponentModal';
+import { DxtradeSuccessModal } from './DxtradeSuccessModal';
 import { MT5ChangePasswordModal } from './MT5ChangePasswordModal';
 import { MT5SuccessModal } from './MT5SuccessModal';
 import { RegulationModal } from './RegulationModal';
@@ -38,6 +39,7 @@ const Modals = () => {
             <RegulationModal />
             <CTraderSuccessModal />
             <MT5SuccessModal />
+            <DxtradeSuccessModal />
             <MT5PasswordModal />
             <MT5ChangePasswordModal />
             <Signup />