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;