[WALL]/ Sergei / wall 2698 / create sketch of change investor passwor…

…d screens (#11684)

* feat: add scetch of MT5ChangeInvestorPasswordScreens component

* feat: change text size for emailSendContent

* feat: change WalletButton size

* feat: change some button styles

* feat: complete scetch of change investor password screens

packages/wallets/src/components/Base/WalletButton/WalletButton.scss

@@ -34,7 +34,7 @@ $size-map: (
 );
 
 .wallets-button {
-    display: inline-flex;
+    display: flex;
     justify-content: center;
     align-items: center;
     gap: 0.8rem;

packages/wallets/src/components/Base/WalletButton/WalletButton.tsx

@@ -81,7 +81,7 @@ const WalletButton: React.FC<WalletButtonProps> = ({
     };
 
     const buttonFontSizeMapper = {
-        lg: 'sm',
+        lg: 'md',
         md: 'sm',
         sm: 'xs',
     } as const;

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

@@ -14,6 +14,7 @@ import { WalletsActionScreen } from '../WalletsActionScreen';
 import './SentEmailContent.scss';
 
 type TProps = {
+    description?: string;
     platform?: TPlatforms.All;
 };
 
@@ -36,14 +37,16 @@ const REASONS = [
     },
 ];
 
-const SentEmailContent: React.FC<TProps> = ({ platform }) => {
+const SentEmailContent: React.FC<TProps> = ({ description, platform }) => {
     const [shouldShowResendEmailReasons, setShouldShowResendEmailReasons] = useState(false);
     const [hasCountdownStarted, setHasCountdownStarted] = useState(false);
     const { data } = useSettings();
     const { mutate: verifyEmail } = useVerifyEmail();
     const { isMobile } = useDevice();
     const title = PlatformDetails[platform || 'mt5'].title;
-    const deviceSize = isMobile ? 'lg' : 'md';
+    const titleSize = 'md';
+    const descriptionSize = 'sm';
+    const emailLinkSize = isMobile ? 'lg' : 'md';
     const [count, { resetCountdown, startCountdown }] = useCountdown({
         countStart: 60,
         intervalMs: 1000,
@@ -56,21 +59,21 @@ const SentEmailContent: React.FC<TProps> = ({ platform }) => {
     return (
         <div className='wallets-sent-email-content'>
             <WalletsActionScreen
-                description={`Please click on the link in the email to change your ${title} password.`}
-                descriptionSize={deviceSize}
+                description={description ?? `Please click on the link in the email to change your ${title} password.`}
+                descriptionSize={descriptionSize}
                 icon={<ChangePassword />}
                 renderButtons={() => (
                     <WalletButton
                         onClick={() => {
                             setShouldShowResendEmailReasons(true);
                         }}
-                        size={deviceSize}
+                        size={emailLinkSize}
                         text="Didn't receive the email?"
                         variant='ghost'
                     />
                 )}
                 title='We’ve sent you an email'
-                titleSize={deviceSize}
+                titleSize={titleSize}
             />
             {shouldShowResendEmailReasons && (
                 <div className='wallets-sent-email-content__reasons'>

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

@@ -49,4 +49,26 @@
             }
         }
     }
+
+    &__investor-password {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 2.4rem;
+
+        &-fields {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 1.6rem;
+            min-width: 32.8rem;
+        }
+
+        &-buttons {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 1.6rem;
+        }
+    }
 }

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ModalStepWrapper, Tab, Tabs } from '../../../../components/Base';
+import MT5ChangeInvestorPasswordScreens from './MT5ChangeInvestorPasswordScreens';
 import MT5ChangePasswordScreens from './MT5ChangePasswordScreens';
 import './ChangePassword.scss';
 
@@ -12,8 +13,7 @@ const ChangePassword = () => {
                         <MT5ChangePasswordScreens />
                     </Tab>
                     <Tab title='Investor Password'>
-                        {/* TODO: Add Investor Password */}
-                        <></>
+                        <MT5ChangeInvestorPasswordScreens />
                     </Tab>
                 </Tabs>
             </div>

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

@@ -0,0 +1,106 @@
+import React, { useState } from 'react';
+import {
+    SentEmailContent,
+    WalletButton,
+    WalletPasswordField,
+    WalletsActionScreen,
+    WalletText,
+} from '../../../../components';
+import { useModal } from '../../../../components/ModalProvider';
+import useDevice from '../../../../hooks/useDevice';
+import MT5PasswordUpdatedIcon from '../../../../public/images/ic-mt5-password-updated.svg';
+
+type TChangeInvestorPasswordScreenIndex = 'emailVerification' | 'introScreen' | 'savedScreen';
+
+const MT5ChangeInvestorPasswordScreens = () => {
+    const [currentInvestorPassword, setCurrentInvestorPassword] = useState('');
+    const [newInvestorPassword, setNewInvestorPassword] = useState('');
+
+    const [activeScreen, setActiveScreen] = useState<TChangeInvestorPasswordScreenIndex>('introScreen');
+    const handleClick = (nextScreen: TChangeInvestorPasswordScreenIndex) => setActiveScreen(nextScreen);
+
+    const { isMobile } = useDevice();
+    const { hide } = useModal();
+
+    const ChangeInvestorPasswordScreens = {
+        introScreen: {
+            bodyText: (
+                <>
+                    <WalletText size='sm'>
+                        Use this password to grant viewing access to another user. While they may view your trading
+                        account, they will not be able to trade or take any other actions.
+                    </WalletText>
+                    <WalletText size='sm'>
+                        If this is the first time you try to create a password, or you have forgotten your password,
+                        please reset it.
+                    </WalletText>
+                </>
+            ),
+            button: (
+                <div className='wallets-change-password__investor-password'>
+                    <div className='wallets-change-password__investor-password-fields'>
+                        <WalletPasswordField
+                            key='current_password'
+                            label={`Current investor password`}
+                            onChange={e => setCurrentInvestorPassword(e.target.value)}
+                            password={currentInvestorPassword}
+                        />
+                        <WalletPasswordField
+                            key='new_password'
+                            label={`New investor password`}
+                            onChange={e => setNewInvestorPassword(e.target.value)}
+                            password={newInvestorPassword}
+                        />
+                    </div>
+                    <div className='wallets-change-password__investor-password-buttons'>
+                        <WalletButton
+                            disabled={currentInvestorPassword.length < 8 || newInvestorPassword.length < 8}
+                            onClick={() => handleClick('savedScreen')}
+                            size={isMobile ? 'lg' : 'md'}
+                            text='Change investor password'
+                        />
+                        <WalletButton
+                            onClick={() => handleClick('emailVerification')}
+                            size={isMobile ? 'lg' : 'md'}
+                            text='Create or reset investor password'
+                            variant='ghost'
+                        />
+                    </div>
+                </div>
+            ),
+            headingText: undefined,
+            icon: undefined,
+        },
+        savedScreen: {
+            bodyText: (
+                <WalletText align='center' size='sm'>
+                    Your investor password has been changed.
+                </WalletText>
+            ),
+            button: <WalletButton onClick={() => hide()} size='lg' text='Okay' />,
+            headingText: 'Password saved',
+            icon: <MT5PasswordUpdatedIcon />,
+        },
+    };
+
+    if (activeScreen === 'emailVerification')
+        return (
+            <div className='wallets-change-password__sent-email-wrapper'>
+                <SentEmailContent description='Please click on the link in the email to reset your password.' />
+            </div>
+        );
+
+    return (
+        <div className='wallets-change-password__content'>
+            <WalletsActionScreen
+                description={ChangeInvestorPasswordScreens[activeScreen].bodyText}
+                descriptionSize='sm'
+                icon={ChangeInvestorPasswordScreens[activeScreen].icon}
+                renderButtons={() => ChangeInvestorPasswordScreens[activeScreen].button}
+                title={ChangeInvestorPasswordScreens[activeScreen].headingText}
+            />
+        </div>
+    );
+};
+
+export default MT5ChangeInvestorPasswordScreens;