From 93882a47ddc2e543e9523885fe6414e6d918099a Mon Sep 17 00:00:00 2001
From: Carol Sachdeva <carol@binary.com>
Date: Tue, 19 Jul 2022 15:21:35 +0800
Subject: [PATCH 1/8] add: icons

---
 .../icon/common/ic-email-verification-link-blocked.svg         | 1 +
 .../icon/common/ic-email-verification-link-invalid.svg         | 1 +
 .../icon/common/ic-email-verification-link-valid.svg           | 1 +
 packages/components/src/components/icon/icons.js               | 3 +++
 packages/components/stories/icon/icons.js                      | 3 +++
 5 files changed, 9 insertions(+)
 create mode 100644 packages/components/src/components/icon/common/ic-email-verification-link-blocked.svg
 create mode 100644 packages/components/src/components/icon/common/ic-email-verification-link-invalid.svg
 create mode 100644 packages/components/src/components/icon/common/ic-email-verification-link-valid.svg

diff --git a/packages/components/src/components/icon/common/ic-email-verification-link-blocked.svg b/packages/components/src/components/icon/common/ic-email-verification-link-blocked.svg
new file mode 100644
index 000000000000..6da1da0ce86a
--- /dev/null
+++ b/packages/components/src/components/icon/common/ic-email-verification-link-blocked.svg
@@ -0,0 +1 @@
+<svg width="129" height="128" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M13.5 44.626v14.087l37.62 31.59 6.565-5.582 6.565-5.583 6.46 5.831 6.46 5.831 38.33-32.752V45.063a1.982 1.982 0 0 0-.94-1.688L66.61 13.602a4.024 4.024 0 0 0-4.23 0L14.5 42.929c-.612.35-.992.995-1 1.697Z" fill="#BBCCCE"/><path d="M21.5 30.248v59.404h86V30.248a3.993 3.993 0 0 0-4-3.988h-78c-2.21 0-4 1.784-4 3.988Z" fill="#E1F4F3"/><path d="M13.5 49.197v61.815a3.994 3.994 0 0 0 4 3.988h93.969c2.209 0 4-1.785 4-3.988V49.197L77.282 82.003 67.1 72.926a3.877 3.877 0 0 0-5.3 0l-10.122 9.042L13.5 49.198Z" fill="#84ABAE"/><path fill-rule="evenodd" clip-rule="evenodd" d="m114.979 112.925-46.542-41.49-.006.004a5.873 5.873 0 0 0-7.968.007L14.01 112.96A4 4 0 0 0 17.5 115h.2l45.476-40.601.008-.008a1.884 1.884 0 0 1 2.572 0l.009.008L111.3 115h.169a3.998 3.998 0 0 0 3.51-2.075Z" fill="#E1F4F3"/><path fill-rule="evenodd" clip-rule="evenodd" d="M54.45 45.175c-3.175 0-5.775 2.6-5.775 5.775 0 3.175 2.6 5.775 5.775 5.775h7.95V60.9h-7.95c-5.475 0-9.95-4.475-9.95-9.95S48.975 41 54.45 41h7.95v4.175h-7.95ZM74.55 41H66.6v4.175h7.95c3.175 0 5.775 2.6 5.775 5.775 0 3.175-2.6 5.775-5.775 5.775H66.6V60.9h7.95c5.5 0 9.95-4.475 9.95-9.95S80.025 41 74.55 41Zm-.775 7.875H55.25v4.175h18.525v-4.175Z" fill="#85ACB0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M128.5 23c0-12.702-10.298-23-23-23s-23 10.298-23 23 10.298 23 23 23 23-10.298 23-23Z" fill="#FF444F" style="mix-blend-mode:multiply"/><path d="M115.212 9.046A16.92 16.92 0 0 0 105.5 6c-9.388 0-17 7.612-17 17 0 3.61 1.126 6.959 3.046 9.712l23.666-23.666ZM119.454 13.288 95.788 36.954A16.92 16.92 0 0 0 105.5 40c9.388 0 17-7.612 17-17a16.92 16.92 0 0 0-3.046-9.712Z" fill="#fff"/></g><defs><clipPath id="a"><path fill="#fff" transform="translate(.5)" d="M0 0h128v128H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/packages/components/src/components/icon/common/ic-email-verification-link-invalid.svg b/packages/components/src/components/icon/common/ic-email-verification-link-invalid.svg
new file mode 100644
index 000000000000..6edf85f052d5
--- /dev/null
+++ b/packages/components/src/components/icon/common/ic-email-verification-link-invalid.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M13 44.626v14.087l37.62 31.59 6.565-5.582 6.565-5.583 6.46 5.831 6.46 5.831L115 58.048V45.063a1.982 1.982 0 0 0-.94-1.688L66.11 13.602a4.024 4.024 0 0 0-4.23 0L14 42.929c-.612.35-.992.995-1 1.697Z" fill="#BBCCCE"/><path d="M21 30.248v59.404h86V30.248a3.993 3.993 0 0 0-4-3.988H25c-2.21 0-4 1.784-4 3.988Z" fill="#E1F4F3"/><path d="M13 49.197v61.815A3.994 3.994 0 0 0 17 115h93.969c2.209 0 4-1.785 4-3.988V49.197L76.782 82.003 66.6 72.926a3.877 3.877 0 0 0-5.3 0l-10.122 9.042L13 49.198Z" fill="#84ABAE"/><path fill-rule="evenodd" clip-rule="evenodd" d="m114.479 112.925-46.542-41.49-.006.004a5.873 5.873 0 0 0-7.968.007L13.51 112.96A4 4 0 0 0 17 115h.2l45.476-40.601.008-.008a1.884 1.884 0 0 1 2.572 0l.009.008L110.8 115h.169a3.998 3.998 0 0 0 3.51-2.075Z" fill="#E1F4F3"/><path fill-rule="evenodd" clip-rule="evenodd" d="M53.95 45.175c-3.175 0-5.775 2.6-5.775 5.775 0 3.175 2.6 5.775 5.775 5.775h7.95V60.9h-7.95c-5.475 0-9.95-4.475-9.95-9.95S48.475 41 53.95 41h7.95v4.175h-7.95ZM74.05 41H66.1v4.175h7.95c3.175 0 5.775 2.6 5.775 5.775 0 3.175-2.6 5.775-5.775 5.775H66.1V60.9h7.95c5.5 0 9.95-4.475 9.95-9.95S79.525 41 74.05 41Zm-.775 7.875H54.75v4.175h18.525v-4.175Z" fill="#85ACB0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M82 23c0 8.217 4.383 15.81 11.5 19.92a23.001 23.001 0 1 0 0-39.839A23.002 23.002 0 0 0 82 23Z" fill="#FF444F" style="mix-blend-mode:multiply"/><path fill-rule="evenodd" clip-rule="evenodd" d="M105.114 24.83h.001a1.543 1.543 0 0 0 1.026-.495c.315-.341.382-.783.408-.957l.005-.032.893-5.542c.035-.219.053-.44.053-.662V14.23c0-.707-.169-1.827-1.157-2.378a2.731 2.731 0 0 0-1.374-.352c-.53.005-.974.16-1.323.356-.981.552-1.146 1.665-1.146 2.366v2.914c0 .227.018.453.055.676l.91 5.535.005.032c.027.175.096.62.416.961.305.326.75.522 1.228.49ZM102.5 31.773v.454c0 .573.175 1.174.648 1.627.47.45 1.12.646 1.851.646.732 0 1.383-.196 1.853-.646.473-.454.648-1.054.648-1.627v-.454c0-.573-.175-1.174-.648-1.628-.471-.45-1.121-.645-1.853-.645-.731 0-1.381.195-1.851.646-.473.453-.648 1.054-.648 1.627Z" fill="#fff"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h128v128H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/packages/components/src/components/icon/common/ic-email-verification-link-valid.svg b/packages/components/src/components/icon/common/ic-email-verification-link-valid.svg
new file mode 100644
index 000000000000..c7f5bcb37d46
--- /dev/null
+++ b/packages/components/src/components/icon/common/ic-email-verification-link-valid.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M13 44.626v14.087l37.62 31.59 6.565-5.582 6.565-5.583 6.46 5.831 6.46 5.831L115 58.048V45.063a1.982 1.982 0 0 0-.94-1.688L66.11 13.602a4.024 4.024 0 0 0-4.23 0L14 42.929c-.612.35-.992.995-1 1.697Z" fill="#BBCCCE"/><path d="M21 30.248v59.404h86V30.248a3.993 3.993 0 0 0-4-3.988H25c-2.21 0-4 1.784-4 3.988Z" fill="#E1F4F3"/><path d="M13 49.197v61.815A3.994 3.994 0 0 0 17 115h93.969c2.209 0 4-1.785 4-3.988V49.197L76.782 82.003 66.6 72.926a3.877 3.877 0 0 0-5.3 0l-10.122 9.042L13 49.198Z" fill="#84ABAE"/><path fill-rule="evenodd" clip-rule="evenodd" d="m114.479 112.925-46.542-41.49-.006.004a5.873 5.873 0 0 0-7.968.007L13.51 112.96A4 4 0 0 0 17 115h.2l45.476-40.601.008-.008a1.884 1.884 0 0 1 2.572 0l.009.008L110.8 115h.169a3.998 3.998 0 0 0 3.51-2.075Z" fill="#E1F4F3"/><path fill-rule="evenodd" clip-rule="evenodd" d="M53.95 45.175c-3.175 0-5.775 2.6-5.775 5.775 0 3.175 2.6 5.775 5.775 5.775h7.95V60.9h-7.95c-5.475 0-9.95-4.475-9.95-9.95S48.475 41 53.95 41h7.95v4.175h-7.95ZM74.05 41H66.1v4.175h7.95c3.175 0 5.775 2.6 5.775 5.775 0 3.175-2.6 5.775-5.775 5.775H66.1V60.9h7.95c5.5 0 9.95-4.475 9.95-9.95S79.525 41 74.05 41Zm-.775 7.875H54.75v4.175h18.525v-4.175Z" fill="#85ACB0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M82 23c0 8.217 4.383 15.81 11.5 19.92a23.001 23.001 0 1 0 0-39.839A23.002 23.002 0 0 0 82 23Z" fill="#4BB4B3" style="mix-blend-mode:multiply"/><path fill-rule="evenodd" clip-rule="evenodd" d="M101.743 32.105 93.5 23.862l3.454-3.454 4.789 4.79 11.301-11.304 3.456 3.453-14.757 14.758Z" fill="#fff"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h128v128H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/packages/components/src/components/icon/icons.js b/packages/components/src/components/icon/icons.js
index 030c472ff96f..5f9888cc9777 100644
--- a/packages/components/src/components/icon/icons.js
+++ b/packages/components/src/components/icon/icons.js
@@ -236,6 +236,9 @@ import './common/ic-email-sent-dashboard.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';
diff --git a/packages/components/stories/icon/icons.js b/packages/components/stories/icon/icons.js
index 8822362e7c83..abf4f2c52dfe 100644
--- a/packages/components/stories/icon/icons.js
+++ b/packages/components/stories/icon/icons.js
@@ -243,6 +243,9 @@ export const icons =
         'IcEmailSent',
         'IcEmailSpam',
         'IcEmailTypo',
+        'IcEmailVerificationLinkBlocked',
+        'IcEmailVerificationLinkInvalid',
+        'IcEmailVerificationLinkValid',
         'IcEmailVerified',
         'IcEmail',
         'IcEmptyFolder',

From a5f98bc8882ad151c176fa2229306e1585aea137 Mon Sep 17 00:00:00 2001
From: Carol Sachdeva <carol@binary.com>
Date: Tue, 19 Jul 2022 15:48:25 +0800
Subject: [PATCH 2/8] add: one more icon

---
 .../components/src/components/icon/common/ic-email-sent-p2p.svg  | 1 +
 packages/components/src/components/icon/icons.js                 | 1 +
 packages/components/stories/icon/icons.js                        | 1 +
 3 files changed, 3 insertions(+)
 create mode 100644 packages/components/src/components/icon/common/ic-email-sent-p2p.svg

diff --git a/packages/components/src/components/icon/common/ic-email-sent-p2p.svg b/packages/components/src/components/icon/common/ic-email-sent-p2p.svg
new file mode 100644
index 000000000000..ac6603322838
--- /dev/null
+++ b/packages/components/src/components/icon/common/ic-email-sent-p2p.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 44.626v14.087l37.62 31.59 6.565-5.582 6.565-5.583 6.46 5.831 6.46 5.831L115 58.048V45.063a1.982 1.982 0 0 0-.94-1.688L66.11 13.602a4.024 4.024 0 0 0-4.23 0L14 42.929c-.612.35-.992.995-1 1.697Z" fill="#BBCCCE"/><path d="M21 30.248v59.404h86V30.248a3.993 3.993 0 0 0-4-3.988H25c-2.21 0-4 1.784-4 3.988Z" fill="#E1F4F3"/><path d="M74.043 70.26h-9.644C52.791 70.26 46 62.97 46 52.39c0-10.58 7.062-18.13 18.4-18.13 10.56 0 17.6 6.344 17.6 16.213.029 6.908-3.322 11.018-8.551 11.018-3.3 0-5.552-1.65-5.735-4.075h-.227c-.431 2.437-2.715 4.163-5.28 3.99-4.04 0-7.07-3.08-7.07-8.98s3.03-8.981 7.07-8.981c2.207-.078 4.174 1.329 4.73 3.383h.227v-3.024h5.133v11.667c0 1.41.734 2.17 2.017 2.17 2.068 0 3.49-2.114 3.49-6.506v-1.22c0-7.415-5.558-11.877-13.36-11.877-8.625 0-14.132 5.64-14.132 13.527v1.65c-.044 7.895 5.463 13.21 14.088 13.21h9.643v3.835Zm-6.886-15.508v-5.047c0-1.347-1.467-2.348-3.073-2.348a3.56 3.56 0 0 0-2.627.99 3.278 3.278 0 0 0-1.003 2.535v2.946a3.27 3.27 0 0 0 1 2.538 3.553 3.553 0 0 0 2.63.987c1.555.07 3.073-1.318 3.073-2.623v.022Z" fill="#84ABAE"/><path d="M13 49.197v61.815A3.994 3.994 0 0 0 17 115h93.969c2.209 0 4-1.785 4-3.988V49.197L76.782 82.003 66.6 72.926a3.877 3.877 0 0 0-5.3 0l-10.122 9.042L13 49.198Z" fill="#84ABAE"/><path fill-rule="evenodd" clip-rule="evenodd" d="m114.479 112.925-46.542-41.49-.006.004a5.873 5.873 0 0 0-7.968.007L13.51 112.96A4 4 0 0 0 17 115h.2l45.476-40.601.008-.008a1.884 1.884 0 0 1 2.572 0l.009.008L110.8 115h.169a3.998 3.998 0 0 0 3.51-2.075Z" fill="#E1F4F3"/></svg>
\ No newline at end of file
diff --git a/packages/components/src/components/icon/icons.js b/packages/components/src/components/icon/icons.js
index 5f9888cc9777..34640f14674f 100644
--- a/packages/components/src/components/icon/icons.js
+++ b/packages/components/src/components/icon/icons.js
@@ -233,6 +233,7 @@ 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';
diff --git a/packages/components/stories/icon/icons.js b/packages/components/stories/icon/icons.js
index abf4f2c52dfe..5d11c880b8e2 100644
--- a/packages/components/stories/icon/icons.js
+++ b/packages/components/stories/icon/icons.js
@@ -240,6 +240,7 @@ export const icons =
         'IcEmailFirewall',
         'IcEmailOutline',
         'IcEmailSentDashboard',
+        'IcEmailSentP2p',
         'IcEmailSent',
         'IcEmailSpam',
         'IcEmailTypo',

From c7187ec8e3782de4a632fa691424d3df794c6aff Mon Sep 17 00:00:00 2001
From: Carol Sachdeva <carol@binary.com>
Date: Wed, 10 Aug 2022 22:02:05 +0800
Subject: [PATCH 3/8] add email verification modal

---
 .../email-verification-modal.jsx              | 108 ++++++++++++++++++
 .../email-verification-modal.scss             |  26 +++++
 .../email-verification-modal/index.js         |   4 +
 3 files changed, 138 insertions(+)
 create mode 100644 packages/p2p/src/components/email-verification-modal/email-verification-modal.jsx
 create mode 100644 packages/p2p/src/components/email-verification-modal/email-verification-modal.scss
 create mode 100644 packages/p2p/src/components/email-verification-modal/index.js

diff --git a/packages/p2p/src/components/email-verification-modal/email-verification-modal.jsx b/packages/p2p/src/components/email-verification-modal/email-verification-modal.jsx
new file mode 100644
index 000000000000..0a9ba6446c2b
--- /dev/null
+++ b/packages/p2p/src/components/email-verification-modal/email-verification-modal.jsx
@@ -0,0 +1,108 @@
+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}
+            toggleModal={() => setIsEmailVerificationModalOpen(false)}
+            width='440px'
+        >
+            <Modal.Body className='email-verification-modal'>
+                <Icon icon='IcEmailSentP2p' size='128' />
+                <Text 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;
diff --git a/packages/p2p/src/components/email-verification-modal/email-verification-modal.scss b/packages/p2p/src/components/email-verification-modal/email-verification-modal.scss
new file mode 100644
index 000000000000..25dd32372ff3
--- /dev/null
+++ b/packages/p2p/src/components/email-verification-modal/email-verification-modal.scss
@@ -0,0 +1,26 @@
+.email-verification-modal {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+
+    &--email_text {
+        margin: 2.4rem 0;
+        text-align: center;
+    }
+
+    &--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;
+    }
+}
diff --git a/packages/p2p/src/components/email-verification-modal/index.js b/packages/p2p/src/components/email-verification-modal/index.js
new file mode 100644
index 000000000000..6101a5043db1
--- /dev/null
+++ b/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;

From 4a32b6fd29fc789ea00aba53915efb006696ee8b Mon Sep 17 00:00:00 2001
From: Carol Sachdeva <carol@binary.com>
Date: Wed, 10 Aug 2022 22:25:56 +0800
Subject: [PATCH 4/8] add invalid verification link modal

---
 .../invalid-verification-link-modal/index.js  |  4 ++
 .../invalid-verification-link-modal.jsx       | 47 +++++++++++++++++++
 .../invalid-verification-link-modal.scss      | 17 +++++++
 3 files changed, 68 insertions(+)
 create mode 100644 packages/p2p/src/components/invalid-verification-link-modal/index.js
 create mode 100644 packages/p2p/src/components/invalid-verification-link-modal/invalid-verification-link-modal.jsx
 create mode 100644 packages/p2p/src/components/invalid-verification-link-modal/invalid-verification-link-modal.scss

diff --git a/packages/p2p/src/components/invalid-verification-link-modal/index.js b/packages/p2p/src/components/invalid-verification-link-modal/index.js
new file mode 100644
index 000000000000..bf5d817dfe0e
--- /dev/null
+++ b/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;
diff --git a/packages/p2p/src/components/invalid-verification-link-modal/invalid-verification-link-modal.jsx b/packages/p2p/src/components/invalid-verification-link-modal/invalid-verification-link-modal.jsx
new file mode 100644
index 000000000000..541ea48bb12d
--- /dev/null
+++ b/packages/p2p/src/components/invalid-verification-link-modal/invalid-verification-link-modal.jsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Icon, Modal, Text } from '@deriv/components';
+import { Localize } from 'Components/i18next';
+
+const InvalidVerificationLinkModal = ({
+    is_invalid_verification_link_modal_open,
+    onClickGetNewLinkButton,
+    setIsInvalidVerificationLinkModalOpen,
+    verification_link_expiry_time,
+}) => {
+    return (
+        <Modal
+            has_close_icon
+            is_open={is_invalid_verification_link_modal_open}
+            toggleModal={() => setIsInvalidVerificationLinkModalOpen(false)}
+            width='440px'
+        >
+            <Modal.Body className='invalid-verification-link-modal'>
+                <Icon icon='IcEmailVerificationLinkInvalid' size='128' />
+                <Text className='invalid-verification-link-modal--text' color='prominent' size='s' weight='bold'>
+                    <Localize i18n_default_text='Invalid verification link' />
+                </Text>
+                <Text className='invalid-verification-link-modal--verification_text' color='prominent' size='s'>
+                    <Localize
+                        i18n_default_text='The verification link becomes invalid after {{verification_link_expiry_time}} minutes. Hit the button below to request a new one.'
+                        values={{ verification_link_expiry_time }}
+                    />
+                </Text>
+            </Modal.Body>
+            <Modal.Footer className='invalid-verification-link-modal--footer'>
+                <Button large primary onClick={onClickGetNewLinkButton}>
+                    <Localize i18n_default_text='Get new link' />
+                </Button>
+            </Modal.Footer>
+        </Modal>
+    );
+};
+
+InvalidVerificationLinkModal.propTypes = {
+    is_invalid_verification_link_modal_open: PropTypes.bool,
+    onClickGetNewLinkButton: PropTypes.func,
+    setIsInvalidVerificationLinkModalOpen: PropTypes.func,
+    verification_link_expiry_time: PropTypes.number,
+};
+
+export default InvalidVerificationLinkModal;
diff --git a/packages/p2p/src/components/invalid-verification-link-modal/invalid-verification-link-modal.scss b/packages/p2p/src/components/invalid-verification-link-modal/invalid-verification-link-modal.scss
new file mode 100644
index 000000000000..a2003de3d7dd
--- /dev/null
+++ b/packages/p2p/src/components/invalid-verification-link-modal/invalid-verification-link-modal.scss
@@ -0,0 +1,17 @@
+.invalid-verification-link-modal {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+
+    &--footer {
+        align-self: center;
+    }
+
+    &--text {
+        margin: 2.4rem 0;
+    }
+
+    &--verification_text {
+        text-align: center;
+    }
+}

From 91c86c53d88da980a84b5d3fb9ba6dfed9f6dde4 Mon Sep 17 00:00:00 2001
From: Carol Sachdeva <carol@binary.com>
Date: Wed, 10 Aug 2022 22:50:43 +0800
Subject: [PATCH 5/8] add email verified

---
 .../email-link-verified-modal.jsx             | 49 +++++++++++++++++++
 .../email-link-verified-modal.scss            | 17 +++++++
 .../email-link-verified-modal/index.js        |  4 ++
 3 files changed, 70 insertions(+)
 create mode 100644 packages/p2p/src/components/email-link-verified-modal/email-link-verified-modal.jsx
 create mode 100644 packages/p2p/src/components/email-link-verified-modal/email-link-verified-modal.scss
 create mode 100644 packages/p2p/src/components/email-link-verified-modal/index.js

diff --git a/packages/p2p/src/components/email-link-verified-modal/email-link-verified-modal.jsx b/packages/p2p/src/components/email-link-verified-modal/email-link-verified-modal.jsx
new file mode 100644
index 000000000000..347c0b4fb72a
--- /dev/null
+++ b/packages/p2p/src/components/email-link-verified-modal/email-link-verified-modal.jsx
@@ -0,0 +1,49 @@
+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}
+            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 className='email-verified-modal--confirmation_text' 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;
diff --git a/packages/p2p/src/components/email-link-verified-modal/email-link-verified-modal.scss b/packages/p2p/src/components/email-link-verified-modal/email-link-verified-modal.scss
new file mode 100644
index 000000000000..118b45673909
--- /dev/null
+++ b/packages/p2p/src/components/email-link-verified-modal/email-link-verified-modal.scss
@@ -0,0 +1,17 @@
+.email-verified-modal {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+
+    &--confirmation_text {
+        text-align: center;
+    }
+
+    &--footer {
+        align-self: center;
+    }
+
+    &--text {
+        margin: 2.4rem 0;
+    }
+}
diff --git a/packages/p2p/src/components/email-link-verified-modal/index.js b/packages/p2p/src/components/email-link-verified-modal/index.js
new file mode 100644
index 000000000000..35446e1c3a44
--- /dev/null
+++ b/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;

From c551d7f0af8fcb89162900eb5dddaa2c0b24a4a4 Mon Sep 17 00:00:00 2001
From: Carol Sachdeva <carol@binary.com>
Date: Wed, 10 Aug 2022 23:36:46 +0800
Subject: [PATCH 6/8] add email blocked modal

---
 .../email-link-blocked-modal.jsx              | 41 +++++++++++++++++++
 .../email-link-blocked-modal.scss             | 13 ++++++
 .../email-link-blocked-modal/index.js         |  4 ++
 .../email-link-verified-modal.jsx             |  1 +
 .../email-verification-modal.jsx              |  1 +
 .../invalid-verification-link-modal.jsx       |  1 +
 6 files changed, 61 insertions(+)
 create mode 100644 packages/p2p/src/components/email-link-blocked-modal/email-link-blocked-modal.jsx
 create mode 100644 packages/p2p/src/components/email-link-blocked-modal/email-link-blocked-modal.scss
 create mode 100644 packages/p2p/src/components/email-link-blocked-modal/index.js

diff --git a/packages/p2p/src/components/email-link-blocked-modal/email-link-blocked-modal.jsx b/packages/p2p/src/components/email-link-blocked-modal/email-link-blocked-modal.jsx
new file mode 100644
index 000000000000..a3517c7beda1
--- /dev/null
+++ b/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 = 30,
+    is_email_link_blocked_modal_open = true,
+    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 className='email-link-blocked-modal--blocked_text' 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;
diff --git a/packages/p2p/src/components/email-link-blocked-modal/email-link-blocked-modal.scss b/packages/p2p/src/components/email-link-blocked-modal/email-link-blocked-modal.scss
new file mode 100644
index 000000000000..693b23f6adf8
--- /dev/null
+++ b/packages/p2p/src/components/email-link-blocked-modal/email-link-blocked-modal.scss
@@ -0,0 +1,13 @@
+.email-link-blocked-modal {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+
+    &--blocked_text {
+        text-align: center;
+    }
+
+    &--text {
+        margin: 2.4rem 0;
+    }
+}
diff --git a/packages/p2p/src/components/email-link-blocked-modal/index.js b/packages/p2p/src/components/email-link-blocked-modal/index.js
new file mode 100644
index 000000000000..356741ec4cc6
--- /dev/null
+++ b/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;
diff --git a/packages/p2p/src/components/email-link-verified-modal/email-link-verified-modal.jsx b/packages/p2p/src/components/email-link-verified-modal/email-link-verified-modal.jsx
index 347c0b4fb72a..54b0e4cfb19e 100644
--- a/packages/p2p/src/components/email-link-verified-modal/email-link-verified-modal.jsx
+++ b/packages/p2p/src/components/email-link-verified-modal/email-link-verified-modal.jsx
@@ -14,6 +14,7 @@ const EmailLinkVerifiedModal = ({
         <Modal
             has_close_icon
             is_open={is_email_verified_modal_open}
+            title=''
             toggleModal={() => setIsEmailLinkVerifiedModalOpen(false)}
             width='440px'
         >
diff --git a/packages/p2p/src/components/email-verification-modal/email-verification-modal.jsx b/packages/p2p/src/components/email-verification-modal/email-verification-modal.jsx
index 0a9ba6446c2b..194ebf20235d 100644
--- a/packages/p2p/src/components/email-verification-modal/email-verification-modal.jsx
+++ b/packages/p2p/src/components/email-verification-modal/email-verification-modal.jsx
@@ -27,6 +27,7 @@ const EmailVerificationModal = ({
         <Modal
             has_close_icon
             is_open={is_email_verification_modal_open}
+            title=''
             toggleModal={() => setIsEmailVerificationModalOpen(false)}
             width='440px'
         >
diff --git a/packages/p2p/src/components/invalid-verification-link-modal/invalid-verification-link-modal.jsx b/packages/p2p/src/components/invalid-verification-link-modal/invalid-verification-link-modal.jsx
index 541ea48bb12d..88978358ef13 100644
--- a/packages/p2p/src/components/invalid-verification-link-modal/invalid-verification-link-modal.jsx
+++ b/packages/p2p/src/components/invalid-verification-link-modal/invalid-verification-link-modal.jsx
@@ -13,6 +13,7 @@ const InvalidVerificationLinkModal = ({
         <Modal
             has_close_icon
             is_open={is_invalid_verification_link_modal_open}
+            title=''
             toggleModal={() => setIsInvalidVerificationLinkModalOpen(false)}
             width='440px'
         >

From 368e044328923449ccf17836a53483880473758b Mon Sep 17 00:00:00 2001
From: Carol Sachdeva <carol@binary.com>
Date: Wed, 10 Aug 2022 23:37:30 +0800
Subject: [PATCH 7/8] add email blocked modal

---
 .../email-link-blocked-modal/email-link-blocked-modal.jsx   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/p2p/src/components/email-link-blocked-modal/email-link-blocked-modal.jsx b/packages/p2p/src/components/email-link-blocked-modal/email-link-blocked-modal.jsx
index a3517c7beda1..ca2baa015879 100644
--- a/packages/p2p/src/components/email-link-blocked-modal/email-link-blocked-modal.jsx
+++ b/packages/p2p/src/components/email-link-blocked-modal/email-link-blocked-modal.jsx
@@ -4,9 +4,9 @@ import { Icon, Modal, Text } from '@deriv/components';
 import { Localize } from 'Components/i18next';
 
 const EmailLinkBlockedModal = ({
-    blocked_for_minutes = 30,
-    is_email_link_blocked_modal_open = true,
-    setIsEmailLinkBlockedModalOpen = () => {},
+    blocked_for_minutes,
+    is_email_link_blocked_modal_open,
+    setIsEmailLinkBlockedModalOpen,
 }) => {
     return (
         <Modal

From 5a4b734333945abba71501351b2a5f85e68a41c6 Mon Sep 17 00:00:00 2001
From: Carol Sachdeva <carol@binary.com>
Date: Fri, 12 Aug 2022 14:52:21 +0800
Subject: [PATCH 8/8] use align prop instead

---
 .../email-link-blocked-modal/email-link-blocked-modal.jsx | 2 +-
 .../email-link-blocked-modal.scss                         | 4 ----
 .../email-link-verified-modal.jsx                         | 2 +-
 .../email-link-verified-modal.scss                        | 4 ----
 .../email-verification-modal/email-verification-modal.jsx | 8 +++++++-
 .../email-verification-modal.scss                         | 1 -
 .../invalid-verification-link-modal.jsx                   | 2 +-
 .../invalid-verification-link-modal.scss                  | 4 ----
 8 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/packages/p2p/src/components/email-link-blocked-modal/email-link-blocked-modal.jsx b/packages/p2p/src/components/email-link-blocked-modal/email-link-blocked-modal.jsx
index ca2baa015879..a16c7bc8ce21 100644
--- a/packages/p2p/src/components/email-link-blocked-modal/email-link-blocked-modal.jsx
+++ b/packages/p2p/src/components/email-link-blocked-modal/email-link-blocked-modal.jsx
@@ -21,7 +21,7 @@ const EmailLinkBlockedModal = ({
                 <Text className='email-link-blocked-modal--text' color='prominent' size='s' weight='bold'>
                     <Localize i18n_default_text='Too many failed attempts' />
                 </Text>
-                <Text className='email-link-blocked-modal--blocked_text' color='prominent' size='s'>
+                <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 }}
diff --git a/packages/p2p/src/components/email-link-blocked-modal/email-link-blocked-modal.scss b/packages/p2p/src/components/email-link-blocked-modal/email-link-blocked-modal.scss
index 693b23f6adf8..975c829f0532 100644
--- a/packages/p2p/src/components/email-link-blocked-modal/email-link-blocked-modal.scss
+++ b/packages/p2p/src/components/email-link-blocked-modal/email-link-blocked-modal.scss
@@ -3,10 +3,6 @@
     display: flex;
     flex-direction: column;
 
-    &--blocked_text {
-        text-align: center;
-    }
-
     &--text {
         margin: 2.4rem 0;
     }
diff --git a/packages/p2p/src/components/email-link-verified-modal/email-link-verified-modal.jsx b/packages/p2p/src/components/email-link-verified-modal/email-link-verified-modal.jsx
index 54b0e4cfb19e..98ae87c08935 100644
--- a/packages/p2p/src/components/email-link-verified-modal/email-link-verified-modal.jsx
+++ b/packages/p2p/src/components/email-link-verified-modal/email-link-verified-modal.jsx
@@ -23,7 +23,7 @@ const EmailLinkVerifiedModal = ({
                 <Text className='email-verified-modal--text' color='prominent' size='s' weight='bold'>
                     <Localize i18n_default_text="We've verified your order" />
                 </Text>
-                <Text className='email-verified-modal--confirmation_text' color='prominent' size='s'>
+                <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 }}
diff --git a/packages/p2p/src/components/email-link-verified-modal/email-link-verified-modal.scss b/packages/p2p/src/components/email-link-verified-modal/email-link-verified-modal.scss
index 118b45673909..e5b0c2fbb694 100644
--- a/packages/p2p/src/components/email-link-verified-modal/email-link-verified-modal.scss
+++ b/packages/p2p/src/components/email-link-verified-modal/email-link-verified-modal.scss
@@ -3,10 +3,6 @@
     display: flex;
     flex-direction: column;
 
-    &--confirmation_text {
-        text-align: center;
-    }
-
     &--footer {
         align-self: center;
     }
diff --git a/packages/p2p/src/components/email-verification-modal/email-verification-modal.jsx b/packages/p2p/src/components/email-verification-modal/email-verification-modal.jsx
index 194ebf20235d..15667ccc0490 100644
--- a/packages/p2p/src/components/email-verification-modal/email-verification-modal.jsx
+++ b/packages/p2p/src/components/email-verification-modal/email-verification-modal.jsx
@@ -33,7 +33,13 @@ const EmailVerificationModal = ({
         >
             <Modal.Body className='email-verification-modal'>
                 <Icon icon='IcEmailSentP2p' size='128' />
-                <Text className='email-verification-modal--email_text' color='prominent' size='s' weight='bold'>
+                <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} />]}
diff --git a/packages/p2p/src/components/email-verification-modal/email-verification-modal.scss b/packages/p2p/src/components/email-verification-modal/email-verification-modal.scss
index 25dd32372ff3..3338036b5a80 100644
--- a/packages/p2p/src/components/email-verification-modal/email-verification-modal.scss
+++ b/packages/p2p/src/components/email-verification-modal/email-verification-modal.scss
@@ -5,7 +5,6 @@
 
     &--email_text {
         margin: 2.4rem 0;
-        text-align: center;
     }
 
     &--reason {
diff --git a/packages/p2p/src/components/invalid-verification-link-modal/invalid-verification-link-modal.jsx b/packages/p2p/src/components/invalid-verification-link-modal/invalid-verification-link-modal.jsx
index 88978358ef13..77fafcfa0b46 100644
--- a/packages/p2p/src/components/invalid-verification-link-modal/invalid-verification-link-modal.jsx
+++ b/packages/p2p/src/components/invalid-verification-link-modal/invalid-verification-link-modal.jsx
@@ -22,7 +22,7 @@ const InvalidVerificationLinkModal = ({
                 <Text className='invalid-verification-link-modal--text' color='prominent' size='s' weight='bold'>
                     <Localize i18n_default_text='Invalid verification link' />
                 </Text>
-                <Text className='invalid-verification-link-modal--verification_text' color='prominent' size='s'>
+                <Text align='center' color='prominent' size='s'>
                     <Localize
                         i18n_default_text='The verification link becomes invalid after {{verification_link_expiry_time}} minutes. Hit the button below to request a new one.'
                         values={{ verification_link_expiry_time }}
diff --git a/packages/p2p/src/components/invalid-verification-link-modal/invalid-verification-link-modal.scss b/packages/p2p/src/components/invalid-verification-link-modal/invalid-verification-link-modal.scss
index a2003de3d7dd..887366940e0f 100644
--- a/packages/p2p/src/components/invalid-verification-link-modal/invalid-verification-link-modal.scss
+++ b/packages/p2p/src/components/invalid-verification-link-modal/invalid-verification-link-modal.scss
@@ -10,8 +10,4 @@
     &--text {
         margin: 2.4rem 0;
     }
-
-    &--verification_text {
-        text-align: center;
-    }
 }