carol/ P2P: 2FA

packages/components/src/components/icon/icons.js

@@ -233,9 +233,13 @@ import './common/ic-edit.svg';
 import './common/ic-email-firewall.svg';
 import './common/ic-email-outline.svg';
 import './common/ic-email-sent-dashboard.svg';
+import './common/ic-email-sent-p2p.svg';
 import './common/ic-email-sent.svg';
 import './common/ic-email-spam.svg';
 import './common/ic-email-typo.svg';
+import './common/ic-email-verification-link-blocked.svg';
+import './common/ic-email-verification-link-invalid.svg';
+import './common/ic-email-verification-link-valid.svg';
 import './common/ic-email-verified.svg';
 import './common/ic-email.svg';
 import './common/ic-empty-folder.svg';

packages/components/stories/icon/icons.js

@@ -240,9 +240,13 @@ export const icons =
         'IcEmailFirewall',
         'IcEmailOutline',
         'IcEmailSentDashboard',
+        'IcEmailSentP2p',
         'IcEmailSent',
         'IcEmailSpam',
         'IcEmailTypo',
+        'IcEmailVerificationLinkBlocked',
+        'IcEmailVerificationLinkInvalid',
+        'IcEmailVerificationLinkValid',
         'IcEmailVerified',
         'IcEmail',
         'IcEmptyFolder',

packages/p2p/src/components/email-link-blocked-modal/email-link-blocked-modal.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Icon, Modal, Text } from '@deriv/components';
+import { Localize } from 'Components/i18next';
+
+const EmailLinkBlockedModal = ({
+    blocked_for_minutes,
+    is_email_link_blocked_modal_open,
+    setIsEmailLinkBlockedModalOpen,
+}) => {
+    return (
+        <Modal
+            has_close_icon
+            is_open={is_email_link_blocked_modal_open}
+            title=''
+            toggleModal={() => setIsEmailLinkBlockedModalOpen(false)}
+            width='440px'
+        >
+            <Modal.Body className='email-link-blocked-modal'>
+                <Icon icon='IcEmailVerificationLinkBlocked' size='128' />
+                <Text className='email-link-blocked-modal--text' color='prominent' size='s' weight='bold'>
+                    <Localize i18n_default_text='Too many failed attempts' />
+                </Text>
+                <Text align='center' color='prominent' size='s'>
+                    <Localize
+                        i18n_default_text='We have temporarily blocked your request after too many failed attempts. Please try again after {{blocked_for_minutes}} minutes.'
+                        values={{ blocked_for_minutes }}
+                    />
+                </Text>
+            </Modal.Body>
+        </Modal>
+    );
+};
+
+EmailLinkBlockedModal.propTypes = {
+    blocked_for_minutes: PropTypes.number,
+    is_email_link_blocked_modal_open: PropTypes.bool,
+    setIsEmailLinkBlockedModalOpen: PropTypes.func,
+};
+
+export default EmailLinkBlockedModal;

packages/p2p/src/components/email-link-blocked-modal/email-link-blocked-modal.scss

@@ -0,0 +1,9 @@
+.email-link-blocked-modal {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+
+    &--text {
+        margin: 2.4rem 0;
+    }
+}

packages/p2p/src/components/email-link-blocked-modal/index.js

@@ -0,0 +1,4 @@
+import EmailLinkBlockedModal from './email-link-blocked-modal.jsx';
+import './email-link-blocked-modal.scss';
+
+export default EmailLinkBlockedModal;

packages/p2p/src/components/email-link-verified-modal/email-link-verified-modal.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Icon, Modal, Text } from '@deriv/components';
+import { Localize } from 'Components/i18next';
+
+const EmailLinkVerifiedModal = ({
+    amount,
+    currency,
+    is_email_verified_modal_open,
+    onClickConfirm,
+    setIsEmailLinkVerifiedModalOpen,
+}) => {
+    return (
+        <Modal
+            has_close_icon
+            is_open={is_email_verified_modal_open}
+            title=''
+            toggleModal={() => setIsEmailLinkVerifiedModalOpen(false)}
+            width='440px'
+        >
+            <Modal.Body className='email-verified-modal'>
+                <Icon icon='IcEmailVerificationLinkValid' size='128' />
+                <Text className='email-verified-modal--text' color='prominent' size='s' weight='bold'>
+                    <Localize i18n_default_text="We've verified your order" />
+                </Text>
+                <Text align='center' color='prominent' size='s'>
+                    <Localize
+                        i18n_default_text="Please ensure you've received {{amount}} {{currency}} in your account and hit Confirm to complete the transaction."
+                        values={{ amount, currency }}
+                    />
+                </Text>
+            </Modal.Body>
+            <Modal.Footer className='email-verified-modal--footer'>
+                <Button large primary onClick={onClickConfirm}>
+                    <Localize i18n_default_text='Confirm' />
+                </Button>
+            </Modal.Footer>
+        </Modal>
+    );
+};
+
+EmailLinkVerifiedModal.propTypes = {
+    amount: PropTypes.number,
+    currency: PropTypes.string,
+    is_email_verified_modal_open: PropTypes.bool,
+    onClickConfirm: PropTypes.func,
+    setIsEmailLinkVerifiedModalOpen: PropTypes.func,
+};
+
+export default EmailLinkVerifiedModal;

packages/p2p/src/components/email-link-verified-modal/email-link-verified-modal.scss

@@ -0,0 +1,13 @@
+.email-verified-modal {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+
+    &--footer {
+        align-self: center;
+    }
+
+    &--text {
+        margin: 2.4rem 0;
+    }
+}

packages/p2p/src/components/email-link-verified-modal/index.js

@@ -0,0 +1,4 @@
+import EmailLinkVerifiedModal from './email-link-verified-modal.jsx';
+import './email-link-verified-modal.scss';
+
+export default EmailLinkVerifiedModal;

packages/p2p/src/components/email-verification-modal/email-verification-modal.jsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Icon, Loading, Modal, Text } from '@deriv/components';
+import { Localize } from 'Components/i18next';
+
+const EmailVerificationModal = ({
+    email_address,
+    is_email_verification_modal_open,
+    is_verifying = false,
+    onClickResendEmailButton,
+    remaining_time,
+    setIsEmailVerificationModalOpen,
+    should_show_resend_email_button = false,
+    verification_link_expiry_time,
+}) => {
+    const [should_show_reasons_if_no_email, setShouldShowReasonsIfNoEmail] = React.useState(false);
+
+    if (is_verifying) {
+        return (
+            <Modal has_close_icon={false} small width='440px'>
+                <Loading is_fullscreen={false} />
+            </Modal>
+        );
+    }
+
+    return (
+        <Modal
+            has_close_icon
+            is_open={is_email_verification_modal_open}
+            title=''
+            toggleModal={() => setIsEmailVerificationModalOpen(false)}
+            width='440px'
+        >
+            <Modal.Body className='email-verification-modal'>
+                <Icon icon='IcEmailSentP2p' size='128' />
+                <Text
+                    align='center'
+                    className='email-verification-modal--email_text'
+                    color='prominent'
+                    size='s'
+                    weight='bold'
+                >
+                    <Localize
+                        i18n_default_text="We've sent you an email at {{email_address}}.<0 />Please click the verification link in the email to verify your order."
+                        components={[<br key={0} />]}
+                        values={{ email_address }}
+                    />
+                </Text>
+                <Text color='prominent' size='s'>
+                    <Localize
+                        i18n_default_text='The verification link expires in {{verification_link_expiry_time}} minutes'
+                        values={{ verification_link_expiry_time }}
+                    />
+                </Text>
+                <Text
+                    className='email-verification-modal--receive_email_text'
+                    color='loss-danger'
+                    onClick={() => setShouldShowReasonsIfNoEmail(true)}
+                    size='xs'
+                    weight='bold'
+                >
+                    <Localize i18n_default_text="Didn't receive the email?" />
+                </Text>
+                {should_show_reasons_if_no_email && (
+                    <React.Fragment>
+                        <div className='email-verification-modal--reason'>
+                            <Icon icon='IcEmailSpam' size={36} />
+                            <Text className='email-verification-modal--reason__text' color='prominent' size='xxs'>
+                                <Localize i18n_default_text='The email is in your spam folder (sometimes things get lost there).' />
+                            </Text>
+                        </div>
+                        <div className='email-verification-modal--reason'>
+                            <Icon icon='IcEmail' size={36} />
+                            <Text className='email-verification-modal--reason__text' color='prominent' size='xxs'>
+                                <Localize i18n_default_text='You accidentally gave us another email address (usually a work or a personal one instead of the one you meant).' />
+                            </Text>
+                        </div>
+                        <div className='email-verification-modal--reason'>
+                            <Icon icon='IcEmailTypo' size={36} />
+                            <Text className='email-verification-modal--reason__text' color='prominent' size='xxs'>
+                                <Localize i18n_default_text='The email address you entered had a mistake or typo (happens to the best of us).' />
+                            </Text>
+                        </div>
+                        <div className='email-verification-modal--reason'>
+                            <Icon icon='IcEmailFirewall' size={36} />
+                            <Text className='email-verification-modal--reason__text' color='prominent' size='xxs'>
+                                <Localize i18n_default_text='We can’t deliver the email to this address (usually because of firewalls or filtering).' />
+                            </Text>
+                        </div>
+                    </React.Fragment>
+                )}
+            </Modal.Body>
+            {should_show_resend_email_button && (
+                <Modal.Footer>
+                    <Button large primary onClick={onClickResendEmailButton}>
+                        <Localize i18n_default_text='Resend email {{remaining_time}}' values={{ remaining_time }} />
+                    </Button>
+                </Modal.Footer>
+            )}
+        </Modal>
+    );
+};
+
+EmailVerificationModal.propTypes = {
+    email_address: PropTypes.string,
+    is_email_verification_modal_open: PropTypes.bool,
+    is_verifying: PropTypes.bool,
+    onClickResendEmailButton: PropTypes.func,
+    remaining_time: PropTypes.string,
+    setIsEmailVerificationModalOpen: PropTypes.func,
+    should_show_resend_email_button: PropTypes.bool,
+    verification_link_expiry_time: PropTypes.number,
+};
+
+export default EmailVerificationModal;

packages/p2p/src/components/email-verification-modal/email-verification-modal.scss

@@ -0,0 +1,25 @@
+.email-verification-modal {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+
+    &--email_text {
+        margin: 2.4rem 0;
+    }
+
+    &--reason {
+        display: flex;
+        flex-direction: row;
+        gap: 1.6rem;
+        margin: 2.4rem 0;
+
+        &__text {
+            max-width: 34rem;
+        }
+    }
+
+    &--receive_email_text {
+        cursor: pointer;
+        margin: 3rem 0 0.6rem;
+    }
+}

packages/p2p/src/components/email-verification-modal/index.js

@@ -0,0 +1,4 @@
+import EmailVerificationModal from './email-verification-modal.jsx';
+import './email-verification-modal.scss';
+
+export default EmailVerificationModal;

packages/p2p/src/components/invalid-verification-link-modal/index.js

@@ -0,0 +1,4 @@
+import InvalidVerificationLinkModal from './invalid-verification-link-modal.jsx';
+import './invalid-verification-link-modal.scss';
+
+export default InvalidVerificationLinkModal;