diff --git a/packages/p2p/src/components/invalid-verification-link-modal/index.js b/packages/p2p/src/components/modal-manager/modals/invalid-verification-link-modal/index.js similarity index 100% rename from packages/p2p/src/components/invalid-verification-link-modal/index.js rename to packages/p2p/src/components/modal-manager/modals/invalid-verification-link-modal/index.js diff --git a/packages/p2p/src/components/invalid-verification-link-modal/invalid-verification-link-modal.jsx b/packages/p2p/src/components/modal-manager/modals/invalid-verification-link-modal/invalid-verification-link-modal.jsx similarity index 62% rename from packages/p2p/src/components/invalid-verification-link-modal/invalid-verification-link-modal.jsx rename to packages/p2p/src/components/modal-manager/modals/invalid-verification-link-modal/invalid-verification-link-modal.jsx index 640d18aef1a2..169cbac32ec6 100644 --- a/packages/p2p/src/components/invalid-verification-link-modal/invalid-verification-link-modal.jsx +++ b/packages/p2p/src/components/modal-manager/modals/invalid-verification-link-modal/invalid-verification-link-modal.jsx @@ -2,30 +2,27 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Button, Icon, Modal, Text } from '@deriv/components'; import { Localize } from 'Components/i18next'; +import { useStores } from 'Stores'; +import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context'; const InvalidVerificationLinkModal = ({ - invalid_verification_link_error_message, - is_invalid_verification_link_modal_open, - onClickGetNewLinkButton, - setIsInvalidVerificationLinkModalOpen, + error_message, + order_id, // TODO: Uncomment when time is available in BE response // verification_link_expiry_time, }) => { + const { order_store } = useStores(); + const { hideModal, is_modal_open } = useModalManagerContext(); + return ( - <>} - toggleModal={() => setIsInvalidVerificationLinkModalOpen(false)} - width='440px' - > + <>} toggleModal={hideModal} width='440px'> - {invalid_verification_link_error_message} + {error_message} @@ -33,8 +30,8 @@ const InvalidVerificationLinkModal = ({ large primary onClick={() => { - setIsInvalidVerificationLinkModalOpen(false); - onClickGetNewLinkButton(); + hideModal(); + order_store.confirmOrderRequest(order_id); }} > @@ -45,10 +42,8 @@ const InvalidVerificationLinkModal = ({ }; InvalidVerificationLinkModal.propTypes = { - invalid_verification_link_error_message: PropTypes.string, - is_invalid_verification_link_modal_open: PropTypes.bool, - onClickGetNewLinkButton: PropTypes.func, - setIsInvalidVerificationLinkModalOpen: PropTypes.func, + error_message: PropTypes.string, + order_id: PropTypes.string, // TODO: Uncomment when time is available in BE response // verification_link_expiry_time: PropTypes.number, }; diff --git a/packages/p2p/src/components/invalid-verification-link-modal/invalid-verification-link-modal.scss b/packages/p2p/src/components/modal-manager/modals/invalid-verification-link-modal/invalid-verification-link-modal.scss similarity index 100% rename from packages/p2p/src/components/invalid-verification-link-modal/invalid-verification-link-modal.scss rename to packages/p2p/src/components/modal-manager/modals/invalid-verification-link-modal/invalid-verification-link-modal.scss diff --git a/packages/p2p/src/components/order-details/order-details.jsx b/packages/p2p/src/components/order-details/order-details.jsx index 1e332e07aebb..b23236309db9 100644 --- a/packages/p2p/src/components/order-details/order-details.jsx +++ b/packages/p2p/src/components/order-details/order-details.jsx @@ -19,7 +19,6 @@ import MyProfileSeparatorContainer from '../my-profile/my-profile-separator-cont import { setDecimalPlaces, removeTrailingZeros, roundOffDecimal } from 'Utils/format-value'; import 'Components/order-details/order-details.scss'; import LoadingModal from '../loading-modal'; -import InvalidVerificationLinkModal from '../invalid-verification-link-modal'; import EmailLinkBlockedModal from '../email-link-blocked-modal'; import { getDateAfterHours } from 'Utils/date-time'; import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context'; @@ -167,12 +166,6 @@ const OrderDetails = observer(() => { )} {!is_buy_order_for_user && ( - order_store.confirmOrderRequest(id)} - /> import(/* webpackChunkName: "filter-modal" */ 'Components/modal-manager/modals/filter-modal') ), + InvalidVerificationLinkModal: React.lazy(() => + import( + /* webpackChunkName: "invalid-verification-link-modal" */ 'Components/modal-manager/modals/invalid-verification-link-modal' + ) + ), MyAdsDeleteModal: React.lazy(() => import(/* webpackChunkName: "my-ads-delete-modal" */ 'Components/modal-manager/modals/my-ads-delete-modal') ), diff --git a/packages/p2p/src/stores/order-store.js b/packages/p2p/src/stores/order-store.js index deb3dc0189c7..870a8cb26aab 100644 --- a/packages/p2p/src/stores/order-store.js +++ b/packages/p2p/src/stores/order-store.js @@ -53,7 +53,6 @@ export default class OrderStore { setErrorMessage: action.bound, setHasMoreItemsToLoad: action.bound, setIsEmailLinkBlockedModalOpen: action.bound, - setIsInvalidVerificationLinkModalOpen: action.bound, setIsLoading: action.bound, setIsLoadingModalOpen: action.bound, setIsRatingModalOpen: action.bound, @@ -140,15 +139,14 @@ export default class OrderStore { response?.error.code === api_error_codes.INVALID_VERIFICATION_TOKEN || response?.error.code === api_error_codes.EXCESSIVE_VERIFICATION_REQUESTS ) { - clearTimeout(wait); // TODO: remove this once refactoring of EmailLinkVerifiedModal is done this.root_store.general_store.hideModal(); this.setVerificationLinkErrorMessage(response.error.message); - const wait = setTimeout(() => this.setIsInvalidVerificationLinkModalOpen(true), 230); + this.root_store.general_store.showModal({ + key: 'InvalidVerificationLinkModal', + props: { error_message: response.error.message, order_id: id }, + }); } else if (response?.error.code === api_error_codes.EXCESSIVE_VERIFICATION_FAILURES) { - if (this.is_invalid_verification_link_modal_open) { - this.setIsInvalidVerificationLinkModalOpen(false); - } clearTimeout(wait); this.setVerificationLinkErrorMessage(response.error.message); const wait = setTimeout(() => this.setIsEmailLinkBlockedModalOpen(true), 230); @@ -466,10 +464,12 @@ export default class OrderStore { } verifyEmailVerificationCode(verification_action, verification_code) { + const order_id = this.order_id; + if (verification_action === 'p2p_order_confirm' && verification_code) { requestWS({ p2p_order_confirm: 1, - id: this.order_id, + id: order_id, verification_code, dry_run: 1, }).then(response => { @@ -485,13 +485,11 @@ export default class OrderStore { response.error.code === api_error_codes.INVALID_VERIFICATION_TOKEN || response.error.code === api_error_codes.EXCESSIVE_VERIFICATION_REQUESTS ) { - clearTimeout(wait); - this.setVerificationLinkErrorMessage(response.error.message); - const wait = setTimeout(() => this.setIsInvalidVerificationLinkModalOpen(true), 750); + this.root_store.general_store.showModal({ + key: 'InvalidVerificationLinkModal', + props: { error_message: response.error.message, order_id }, + }); } else if (response.error.code === api_error_codes.EXCESSIVE_VERIFICATION_FAILURES) { - if (this.is_invalid_verification_link_modal_open) { - this.setIsInvalidVerificationLinkModalOpen(false); - } clearTimeout(wait); this.setVerificationLinkErrorMessage(response.error.message); const wait = setTimeout(() => this.setIsEmailLinkBlockedModalOpen(true), 600); @@ -538,10 +536,6 @@ export default class OrderStore { this.is_email_link_blocked_modal_open = is_email_link_blocked_modal_open; } - setIsInvalidVerificationLinkModalOpen(is_invalid_verification_link_modal_open) { - this.is_invalid_verification_link_modal_open = is_invalid_verification_link_modal_open; - } - setIsLoading(is_loading) { this.is_loading = is_loading; }