diff --git a/packages/account/src/Sections/Profile/PhoneVerification/confirm-your-email.tsx b/packages/account/src/Sections/Profile/PhoneVerification/confirm-your-email.tsx
new file mode 100644
index 000000000000..e6a7ac663ce6
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+ ]}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+});
+
+export default ConfirmYourEmail;
diff --git a/packages/account/src/Sections/Profile/PhoneVerification/phone-verification-card.tsx b/packages/account/src/Sections/Profile/PhoneVerification/phone-verification-card.tsx
index f0fd1928d6f6..dc5cc1fd2fb8 100644
--- a/packages/account/src/Sections/Profile/PhoneVerification/phone-verification-card.tsx
+++ b/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) => (
-
{children}
+type TPhoneVerificationCard = {
+ is_small_card?: boolean;
+};
+
+const PhoneVerificationCard = ({ children, is_small_card }: React.PropsWithChildren) => (
+
+ {children}
+
);
export default PhoneVerificationCard;
diff --git a/packages/account/src/Sections/Profile/PhoneVerification/phone-verification-page.tsx b/packages/account/src/Sections/Profile/PhoneVerification/phone-verification-page.tsx
index 2c953a1289d8..5fad6d82de57 100644
--- a/packages/account/src/Sections/Profile/PhoneVerification/phone-verification-page.tsx
+++ b/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 (
@@ -25,7 +28,7 @@ const PhoneVerificationPage = () => {
-
+ {show_email_verification ?
:
}
);
};
diff --git a/packages/account/src/Sections/Profile/PhoneVerification/phone-verification.scss b/packages/account/src/Sections/Profile/PhoneVerification/phone-verification.scss
index 84a0e7874667..ab0be61e85d2 100644
--- a/packages/account/src/Sections/Profile/PhoneVerification/phone-verification.scss
+++ b/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;