chore: add Email Verification for users

packages/account/src/Sections/Profile/PhoneVerification/confirm-your-email.tsx

@@ -0,0 +1,65 @@
+import React, { useRef } from 'react';
+import PhoneVerificationCard from './phone-verification-card';
+import { CaptionText, Text } from '@deriv-com/quill-ui';
+import { Localize, localize } from '@deriv/translations';
+import { observer, useStore } from '@deriv/stores';
+import { Input } from '@deriv/components';
+
+const ConfirmYourEmail = observer(() => {
+    const [timer, setTimer] = React.useState(60);
+    const [startTimer, setStartTimer] = React.useState(false);
+
+    const { client } = useStore();
+    const { account_settings } = client;
+    const { email } = account_settings;
+
+    const resendCodeText = useRef('Resend code');
+
+    React.useEffect(() => {
+        let countdown: NodeJS.Timeout;
+        if (startTimer && timer > 0) {
+            countdown = setInterval(() => {
+                setTimer(prevTime => prevTime - 1);
+                resendCodeText.current = `Resend code in ${timer - 1}s`;
+            }, 1000);
+        } else {
+            setStartTimer(false);
+            resendCodeText.current = 'Resend code';
+        }
+
+        return () => clearInterval(countdown);
+    }, [timer, startTimer]);
+
+    const resendCode = () => {
+        setTimer(60);
+        setStartTimer(true);
+    };
+
+    return (
+        <PhoneVerificationCard is_small_card>
+            <Text bold>
+                <Localize i18n_default_text="Confirm it's you" />
+            </Text>
+            <div className='phone-verification__card--email-verification-content'>
+                <Text size='sm'>
+                    <Localize
+                        i18n_default_text="We've sent a verification code to <0>{{users_email}}</0>."
+                        values={{ users_email: email }}
+                        components={[<strong key={0} />]}
+                    />
+                </Text>
+                <Text size='sm'>
+                    <Localize i18n_default_text='Enter the code or click the link in the email to verify that the account belongs to you.' />
+                </Text>
+            </div>
+            <div className='phone-verification__card--email-verification-otp-container'>
+                <Input id='otp_code' type='text' name='otp_code' label={localize('OTP code')} data-lpignore='true' />
+                <CaptionText bold underlined onClick={resendCode}>
+                    <Localize i18n_default_text='{{resendCode}}' values={{ resendCode: resendCodeText.current }} />
+                </CaptionText>
+            </div>
+        </PhoneVerificationCard>
+    );
+});
+
+export default ConfirmYourEmail;

packages/account/src/Sections/Profile/PhoneVerification/phone-verification-card.tsx

@@ -1,7 +1,14 @@
+import classNames from 'classnames';
 import React from 'react';
 
-const PhoneVerificationCard = ({ children }: React.PropsWithChildren) => (
-    <div className='phone-verification__card'>{children}</div>
+type TPhoneVerificationCard = {
+    is_small_card?: boolean;
+};
+
+const PhoneVerificationCard = ({ children, is_small_card }: React.PropsWithChildren<TPhoneVerificationCard>) => (
+    <div className={classNames('phone-verification__card', { 'phone-verification__card--small-card': is_small_card })}>
+        {children}
+    </div>
 );
 
 export default PhoneVerificationCard;

packages/account/src/Sections/Profile/PhoneVerification/phone-verification-page.tsx

@@ -6,12 +6,15 @@ import { Localize } from '@deriv/translations';
 import ConfirmPhoneNumber from './confirm-phone-number';
 import { useHistory } from 'react-router';
 import { routes } from '@deriv/shared';
+import ConfirmYourEmail from './confirm-your-email';
 
 const PhoneVerificationPage = () => {
+    const [show_email_verification, should_show_email_verification] = React.useState(true);
     const history = useHistory();
     const handleBackButton = () => {
         history.push(routes.personal_details);
     };
+
     return (
         <div>
             <div className='phone-verification__redirect_button'>
@@ -25,7 +28,7 @@ const PhoneVerificationPage = () => {
                     <Localize i18n_default_text='Phone number verification' />
                 </Text>
             </div>
-            <ConfirmPhoneNumber />
+            {show_email_verification ? <ConfirmYourEmail /> : <ConfirmPhoneNumber />}
         </div>
     );
 };

packages/account/src/Sections/Profile/PhoneVerification/phone-verification.scss

@@ -28,6 +28,10 @@
         padding: 1.6rem;
         margin-top: 2.4rem;
 
+        &--small-card {
+            height: 40rem;
+        }
+
         .dc-input {
             width: 60%;
             margin-top: 2.4rem;
@@ -47,6 +51,23 @@
             }
         }
 
+        &--email-verification {
+            &-content {
+                width: 100%;
+                margin-top: 2.4rem;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+            }
+
+            &-otp-container {
+                width: 60%;
+                .dc-input {
+                    width: 100%;
+                }
+            }
+        }
+
         @include mobile {
             width: 100vw;
             border: none;