[WALL-2643]: Wallets/Refactor ChangePassword Modal (#11510)

* chore: Refactor ChangePassword Modal
- replace ContentTemplate with existing WalletsActionScreen from component
- remove css accordingly
- remove ContentTemplate file

* chore: refactor even more:
- replace 3rd screen with SentEmailContent
- correct some of the spelling mistakes on WalletsActionScreen
- add css based on the changes for ChangePassword Modal

* chore: added index inside of ChangePasswordScreens

packages/wallets/src/components/SentEmailContent/SentEmailContent.tsx

@@ -18,8 +18,8 @@ const SentEmailContent: React.FC<TProps> = ({ platform }) => {
     return (
         <div className='wallets-sent-email-content'>
             <WalletsActionScreen
-                desciptionSize={deviceSize}
                 description={`Please click on the link in the email to change your ${title} password.`}
+                descriptionSize={deviceSize}
                 icon={<ChangePassword />}
                 renderButtons={() => (
                     <WalletButton size={deviceSize} text="Didn't receive the email?" variant='ghost' />

packages/wallets/src/components/WalletSuccess/WalletSuccess.tsx

@@ -13,8 +13,8 @@ const WalletSuccess: React.FC<TSuccessProps> = ({ description, renderButtons, re
     return (
         <div className='wallets-success'>
             <WalletsActionScreen
-                desciptionSize='sm'
                 description={description}
+                descriptionSize='sm'
                 icon={renderIcon()}
                 renderButtons={renderButtons}
                 title={title}

packages/wallets/src/components/WalletsActionScreen/WalletsActionScreen.tsx

@@ -4,8 +4,8 @@ import WalletText from '../Base/WalletText/WalletText';
 import './WalletsActionScreen.scss';
 
 type TProps = {
-    desciptionSize?: ComponentProps<typeof WalletText>['size'];
     description: ReactNode;
+    descriptionSize?: ComponentProps<typeof WalletText>['size'];
     icon?: ReactNode;
     renderButtons?: () =>
         | ReactElement<ComponentProps<'div'>>
@@ -21,8 +21,8 @@ type TProps = {
  * at the moment of writing this, there are already 3 different patterns use to display ex
  */
 const WalletsActionScreen: React.FC<PropsWithChildren<TProps>> = ({
-    desciptionSize = 'md',
     description,
+    descriptionSize = 'md',
     icon,
     renderButtons,
     title,
@@ -40,7 +40,7 @@ const WalletsActionScreen: React.FC<PropsWithChildren<TProps>> = ({
                 {isValidElement(description) ? (
                     description
                 ) : (
-                    <WalletText align='center' size={desciptionSize}>
+                    <WalletText align='center' size={descriptionSize}>
                         {description}
                     </WalletText>
                 )}

packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.scss

@@ -27,7 +27,6 @@
     }
 
     &__tab {
-        padding-top: 2.4rem;
         margin-bottom: 3.2rem;
         justify-self: center;
         width: 100%;
@@ -47,25 +46,14 @@
             }
         }
     }
-
-    &__content {
+    &__btn {
         display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 2.4rem;
-        width: 100%;
-        &__icon {
-            text-align: center;
-        }
-        &__text {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 0.8rem;
-        }
-        &__btn {
-            display: flex;
-            gap: 0.8rem;
+        gap: 0.8rem;
+    }
+
+    &__sent-email-wrapper {
+        .wallets-sent-email-content {
+            padding: unset;
         }
     }
 }

packages/wallets/src/features/cfd/screens/ChangePassword/ChangePassword.tsx

@@ -39,7 +39,7 @@ const ChangePassword = () => {
                             </button>
                         ))}
                     </div>
-                    <div className='wallets-change-password__content'>{tabs[activeTab].content}</div>
+                    <>{tabs[activeTab].content}</>
                 </div>
             </div>
         </ModalStepWrapper>

packages/wallets/src/features/cfd/screens/ChangePassword/MT5ChangePasswordScreens.tsx

@@ -1,63 +1,54 @@
 import React, { useState } from 'react';
-import { WalletButton, WalletText } from '../../../../components/Base';
+import { SentEmailContent, WalletButton, WalletsActionScreen, WalletText } from '../../../../components';
 import { useModal } from '../../../../components/ModalProvider';
-import EmailIcon from '../../../../public/images/change-password-email.svg';
 import MT5PasswordIcon from '../../../../public/images/ic-mt5-password.svg';
-import ContentTemplate from './ContentTemplate';
 
 const MT5ChangePasswordScreens = () => {
-    const [activeScreen, setActiveScreen] = useState(0);
+    type TChangePasswordScreenIndex = 'confirmationScreen' | 'emailVerification' | 'introScreen';
 
-    const handleClick = () => setActiveScreen(prev => prev + 1);
+    const [activeScreen, setActiveScreen] = useState<TChangePasswordScreenIndex>('introScreen');
+    const handleClick = (nextScreen: TChangePasswordScreenIndex) => setActiveScreen(nextScreen);
 
     const { hide } = useModal();
 
-    const ChangePasswordScreens = [
-        {
-            bodyText: (
-                <WalletText align='center' size='sm'>
-                    Use this password to log in to your Deriv MT5 accounts on the desktop, web, and mobile apps.
-                </WalletText>
-            ),
-            button: <WalletButton onClick={handleClick} size='lg' text='Change password' />,
-            headingText: 'Deriv MT5 password',
-            icon: <MT5PasswordIcon />,
-        },
-        {
+    const ChangePasswordScreens = {
+        confirmationScreen: {
             bodyText: (
                 <WalletText align='center' color='error' size='sm'>
                     This will change the password to all of your Deriv MT5 accounts.
                 </WalletText>
             ),
             button: (
-                <>
-                    {/* TODO: Double confirm with the designers or QA on the behavior of the Cancel button*/}
+                <div className='wallets-change-password__btn'>
                     <WalletButton onClick={() => hide()} size='lg' text='Cancel' variant='outlined' />
-                    {/* TODO: Append logic send email for password reset to Confirm Button */}
-                    <WalletButton onClick={handleClick} size='lg' text='Confirm' />
-                </>
+                    <WalletButton onClick={() => handleClick('emailVerification')} size='lg' text='Confirm' />
+                </div>
             ),
             headingText: 'Confirm to change your Deriv MT5 password',
             icon: <MT5PasswordIcon />,
         },
-        {
-            bodyText: (
-                <WalletText align='center' size='sm'>
-                    Please click on the link in the email to change your Deriv MT5 password.
-                </WalletText>
-            ),
-            button: <WalletButton onClick={() => hide()} size='lg' text='Didn’t receive the email?' variant='ghost' />, // TODO: Add logic send email password reset
-            headingText: 'We’ve sent you an email',
-            icon: <EmailIcon />,
+        introScreen: {
+            bodyText: 'Use this password to log in to your Deriv MT5 accounts on the desktop, web, and mobile apps.',
+            button: <WalletButton onClick={() => handleClick('confirmationScreen')} size='lg' text='Change password' />,
+            headingText: 'Deriv MT5 password',
+            icon: <MT5PasswordIcon />,
         },
-    ];
+    };
+
+    if (activeScreen === 'emailVerification')
+        return (
+            <div className='wallets-change-password__sent-email-wrapper'>
+                <SentEmailContent />
+            </div>
+        );
 
     return (
-        <ContentTemplate
-            bodyText={ChangePasswordScreens[activeScreen].bodyText}
-            button={ChangePasswordScreens[activeScreen].button}
-            headingText={ChangePasswordScreens[activeScreen].headingText}
+        <WalletsActionScreen
+            description={ChangePasswordScreens[activeScreen].bodyText}
+            descriptionSize='sm'
             icon={ChangePasswordScreens[activeScreen].icon}
+            renderButtons={() => ChangePasswordScreens[activeScreen].button}
+            title={ChangePasswordScreens[activeScreen].headingText}
         />
     );
 };