[WALL] Sergei / wall 3020 / Reset investor password design change (bi…

…nary-com#12070)

* feat: implement design for reset investor password

* feat: move email screen outside of the tabs

* refactor: change empty tag to Fragment

* feat: implement review suggestions

* feat: implement review suggestions 2

packages/wallets/src/components/SentEmailContent/SentEmailContent.scss

@@ -13,7 +13,7 @@
         width: 100%;
     }
 
-    &__reasons {
+    &__resend {
         align-items: center;
         display: flex;
         flex-direction: column;

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

@@ -1,44 +1,23 @@
-import React, { useEffect, useState } from 'react';
+import React, { FC, Fragment, useEffect, useState } from 'react';
+import { Trans } from 'react-i18next';
 import { useCountdown } from 'usehooks-ts';
 import { useActiveWalletAccount, useSettings, useVerifyEmail } from '@deriv/api';
 import { PlatformDetails } from '../../features/cfd/constants';
 import useDevice from '../../hooks/useDevice';
 import ChangePassword from '../../public/images/change-password-email.svg';
-import EmailIcon from '../../public/images/ic-email.svg';
-import EmailFirewallIcon from '../../public/images/ic-email-firewall.svg';
-import EmailSpamIcon from '../../public/images/ic-email-spam.svg';
-import EmailTypoIcon from '../../public/images/ic-email-typo.svg';
 import { TPlatforms } from '../../types';
 import { platformPasswordResetRedirectLink } from '../../utils/cfd';
-import { WalletButton, WalletText } from '../Base';
+import { WalletButton } from '../Base';
 import { WalletsActionScreen } from '../WalletsActionScreen';
 import './SentEmailContent.scss';
 
 type TProps = {
     description?: string;
+    isInvestorPassword?: boolean;
     platform?: TPlatforms.All;
 };
 
-const REASONS = [
-    {
-        icon: EmailSpamIcon,
-        text: 'The email is in your spam folder (Sometimes things get lost there).',
-    },
-    {
-        icon: EmailIcon,
-        text: 'You accidentally gave us another email address (Usually a work or a personal one instead of the one you meant).',
-    },
-    {
-        icon: EmailTypoIcon,
-        text: 'The email address you entered had a mistake or typo (happens to the best of us).',
-    },
-    {
-        icon: EmailFirewallIcon,
-        text: 'We can’t deliver the email to this address (Usually because of firewalls or filtering).',
-    },
-];
-
-const SentEmailContent: React.FC<TProps> = ({ description, platform }) => {
+const SentEmailContent: FC<TProps> = ({ description, isInvestorPassword = false, platform }) => {
     const [shouldShowResendEmailReasons, setShouldShowResendEmailReasons] = useState(false);
     const [hasCountdownStarted, setHasCountdownStarted] = useState(false);
     const { data } = useSettings();
@@ -66,28 +45,34 @@ const SentEmailContent: React.FC<TProps> = ({ description, platform }) => {
                 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={emailLinkSize}
-                        variant='ghost'
-                    >
-                        Didn&apos;t receive the email?
-                    </WalletButton>
-                )}
+                renderButtons={() =>
+                    shouldShowResendEmailReasons && isInvestorPassword ? null : (
+                        <WalletButton
+                            onClick={() => {
+                                setShouldShowResendEmailReasons(true);
+                            }}
+                            size={emailLinkSize}
+                            variant='ghost'
+                        >
+                            <Trans defaults="Didn't receive the email?" />
+                        </WalletButton>
+                    )
+                }
                 title='We’ve sent you an email'
                 titleSize={titleSize}
             />
             {shouldShowResendEmailReasons && (
-                <div className='wallets-sent-email-content__reasons'>
-                    {REASONS.map(reason => (
-                        <div className='wallets-sent-email-content__reasons-item' key={`reason-${reason.text}`}>
-                            <reason.icon />
-                            <WalletText size='xs'>{reason.text}</WalletText>
+                <Fragment>
+                    {isInvestorPassword && (
+                        <div className='wallets-sent-email-content__resend'>
+                            <WalletsActionScreen
+                                description="Check your spam or junk folder. If it's not there, try resending the email."
+                                descriptionSize={descriptionSize}
+                                title="Didn't receive the email?"
+                                titleSize={titleSize}
+                            />
                         </div>
-                    ))}
+                    )}
                     <WalletButton
                         disabled={hasCountdownStarted}
                         onClick={() => {
@@ -113,7 +98,7 @@ const SentEmailContent: React.FC<TProps> = ({ description, platform }) => {
                     >
                         {hasCountdownStarted ? `Resend email in ${count}` : 'Resend email'}
                     </WalletButton>
-                </div>
+                </Fragment>
             )}
         </div>
     );

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

@@ -10,7 +10,8 @@ type TProps = {
     renderButtons?: () =>
         | ReactElement<ComponentProps<'div'>>
         | ReactElement<ComponentProps<typeof WalletButton>>
-        | ReactElement<ComponentProps<typeof WalletButtonGroup>>;
+        | ReactElement<ComponentProps<typeof WalletButtonGroup>>
+        | null;
     title?: string;
     titleSize?: ComponentProps<typeof WalletText>['size'];
 };

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

@@ -78,4 +78,12 @@
             gap: 1.6rem;
         }
     }
+
+    &__back-arrow {
+        display: flex;
+        align-items: center;
+        align-self: flex-start;
+        gap: 0.8rem;
+        cursor: pointer;
+    }
 }

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

@@ -1,8 +1,8 @@
 import React from 'react';
-import { ModalStepWrapper, Tab, Tabs } from '../../../../components/Base';
+import { ModalStepWrapper } from '../../../../components/Base';
 import { useModal } from '../../../../components/ModalProvider';
 import { PlatformDetails } from '../../constants';
-import MT5ChangeInvestorPasswordScreens from './InvestorPassword/MT5ChangeInvestorPasswordScreens';
+import MT5ChangePasswordScreens from './MT5ChangePasswordScreens';
 import TradingPlatformChangePasswordScreens from './TradingPlatformChangePasswordScreens';
 import './ChangePassword.scss';
 
@@ -20,14 +20,7 @@ const ChangePassword = () => {
                     {isDerivX ? (
                         <TradingPlatformChangePasswordScreens platform={platform} />
                     ) : (
-                        <Tabs wrapperClassName='wallets-change-password__tab'>
-                            <Tab title={`${title} Password`}>
-                                <TradingPlatformChangePasswordScreens platform={platform} />
-                            </Tab>
-                            <Tab title='Investor Password'>
-                                <MT5ChangeInvestorPasswordScreens />
-                            </Tab>
-                        </Tabs>
+                        <MT5ChangePasswordScreens />
                     )}
                 </div>
             </div>

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

@@ -11,6 +11,8 @@
         .wallets-sent-email-content {
             padding: unset;
             margin-top: 3.2rem;
+            width: 100%;
+            gap: 3.2rem;
 
             @include mobile {
                 margin-top: 4rem;

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

@@ -1,13 +1,16 @@
-import React, { useState } from 'react';
-import { SentEmailContent } from '../../../../../components';
+import React, { FC, useState } from 'react';
 import { useModal } from '../../../../../components/ModalProvider';
 import MT5ChangeInvestorPasswordInputsScreen from './MT5ChangeInvestorPasswordInputsScreen';
 import MT5ChangeInvestorPasswordSavedScreen from './MT5ChangeInvestorPasswordSavedScreen';
 import './MT5ChangeInvestorPasswordScreens.scss';
 
-type TChangeInvestorPasswordScreenIndex = 'emailVerification' | 'introScreen' | 'savedScreen';
+type TChangeInvestorPasswordScreenIndex = 'introScreen' | 'savedScreen';
 
-const MT5ChangeInvestorPasswordScreens = () => {
+type TProps = {
+    setShowEmailSentScreen?: (value: boolean) => void;
+};
+
+const MT5ChangeInvestorPasswordScreens: FC<TProps> = ({ setShowEmailSentScreen }) => {
     const [activeScreen, setActiveScreen] = useState<TChangeInvestorPasswordScreenIndex>('introScreen');
     const handleClick = (nextScreen: TChangeInvestorPasswordScreenIndex) => setActiveScreen(nextScreen);
     const { hide } = useModal();
@@ -19,18 +22,14 @@ const MT5ChangeInvestorPasswordScreens = () => {
                     <MT5ChangeInvestorPasswordSavedScreen setNextScreen={hide} />
                 </div>
             );
-        case 'emailVerification':
-            return (
-                <div className='wallets-change-investor-password-screens__sent-email-wrapper'>
-                    <SentEmailContent description='Please click on the link in the email to reset your password.' />
-                </div>
-            );
         case 'introScreen':
         default:
             return (
                 <div className='wallets-change-investor-password-screens__content'>
                     <MT5ChangeInvestorPasswordInputsScreen
-                        sendEmail={() => handleClick('emailVerification')}
+                        sendEmail={() => {
+                            setShowEmailSentScreen?.(true);
+                        }}
                         setNextScreen={() => handleClick('savedScreen')}
                     />
                 </div>

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

@@ -0,0 +1,57 @@
+import React, { Fragment, useState } from 'react';
+import { Trans } from 'react-i18next';
+import { SentEmailContent } from '../../../../components';
+import { Tab, Tabs, WalletText } from '../../../../components/Base';
+import IcBackArrow from '../../../../public/images/ic-back-arrow.svg';
+import { PlatformDetails } from '../../constants';
+import MT5ChangeInvestorPasswordScreens from './InvestorPassword/MT5ChangeInvestorPasswordScreens';
+import TradingPlatformChangePasswordScreens from './TradingPlatformChangePasswordScreens';
+
+const MT5ChangePasswordScreens = () => {
+    const [showSentEmailContentWithoutTabs, setShowSentEmailContentWithoutTabs] = useState(false);
+    const [tabNumber, setTabNumber] = useState(0);
+
+    const platform = PlatformDetails.mt5.platform;
+    const { title } = PlatformDetails[platform];
+
+    return showSentEmailContentWithoutTabs ? (
+        <Fragment>
+            <div
+                className='wallets-change-password__back-arrow'
+                onClick={() => {
+                    setShowSentEmailContentWithoutTabs(false);
+                    setTabNumber(1);
+                }}
+                onKeyDown={event => {
+                    if (event.key === 'Enter') {
+                        setShowSentEmailContentWithoutTabs(false);
+                        setTabNumber(1);
+                    }
+                }}
+            >
+                <IcBackArrow />
+                <WalletText weight='bold'>
+                    <Trans defaults='Back' />
+                </WalletText>
+            </div>
+
+            <div className='wallets-change-investor-password-screens__sent-email-wrapper'>
+                <SentEmailContent
+                    description='Please click on the link in the email to reset your password.'
+                    isInvestorPassword
+                />
+            </div>
+        </Fragment>
+    ) : (
+        <Tabs preSelectedTab={tabNumber} wrapperClassName='wallets-change-password__tab'>
+            <Tab title={`${title} Password`}>
+                <TradingPlatformChangePasswordScreens platform={platform} />
+            </Tab>
+            <Tab title='Investor Password'>
+                <MT5ChangeInvestorPasswordScreens setShowEmailSentScreen={setShowSentEmailContentWithoutTabs} />
+            </Tab>
+        </Tabs>
+    );
+};
+
+export default MT5ChangePasswordScreens;