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 @@ + \ No newline at end of file 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 @@ + \ 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 @@ + \ 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 @@ + \ 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..34640f14674f 100644 --- a/packages/components/src/components/icon/icons.js +++ b/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'; diff --git a/packages/components/stories/icon/icons.js b/packages/components/stories/icon/icons.js index 8822362e7c83..5d11c880b8e2 100644 --- a/packages/components/stories/icon/icons.js +++ b/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', 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..a16c7bc8ce21 --- /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, + is_email_link_blocked_modal_open, + setIsEmailLinkBlockedModalOpen, +}) => { + return ( + setIsEmailLinkBlockedModalOpen(false)} + width='440px' + > + + + + + + + + + + + ); +}; + +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..975c829f0532 --- /dev/null +++ b/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; + } +} 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 new file mode 100644 index 000000000000..98ae87c08935 --- /dev/null +++ b/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 ( + setIsEmailLinkVerifiedModalOpen(false)} + width='440px' + > + + + + + + + + + + + + + + ); +}; + +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..e5b0c2fbb694 --- /dev/null +++ b/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; + } +} 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; 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..15667ccc0490 --- /dev/null +++ b/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 ( + + + + ); + } + + return ( + setIsEmailVerificationModalOpen(false)} + width='440px' + > + + + + ]} + values={{ email_address }} + /> + + + + + setShouldShowReasonsIfNoEmail(true)} + size='xs' + weight='bold' + > + + + {should_show_reasons_if_no_email && ( + +
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+ + )} + + {should_show_resend_email_button && ( + + + + )} + + ); +}; + +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..3338036b5a80 --- /dev/null +++ b/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; + } +} 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; 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..77fafcfa0b46 --- /dev/null +++ b/packages/p2p/src/components/invalid-verification-link-modal/invalid-verification-link-modal.jsx @@ -0,0 +1,48 @@ +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 ( + setIsInvalidVerificationLinkModalOpen(false)} + width='440px' + > + + + + + + + + + + + + + + ); +}; + +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..887366940e0f --- /dev/null +++ b/packages/p2p/src/components/invalid-verification-link-modal/invalid-verification-link-modal.scss @@ -0,0 +1,13 @@ +.invalid-verification-link-modal { + align-items: center; + display: flex; + flex-direction: column; + + &--footer { + align-self: center; + } + + &--text { + margin: 2.4rem 0; + } +}