From 25c75f43ec1af909b9858f9e9aca9a7db2d61459 Mon Sep 17 00:00:00 2001 From: Farrah Mae Ochoa Date: Thu, 24 Nov 2022 17:29:49 +0400 Subject: [PATCH 1/3] refactor: invalid verification link modal --- .../modal-manager-context-provider.jsx | 9 ++++-- .../modal-manager/modal-manager.jsx | 13 ++++++++- .../invalid-verification-link-modal/index.js | 0 .../invalid-verification-link-modal.jsx | 29 +++++++------------ .../invalid-verification-link-modal.scss | 0 .../order-details/order-details.jsx | 7 ----- packages/p2p/src/constants/modals.js | 9 ++++++ packages/p2p/src/stores/order-store.js | 24 ++++++--------- packages/p2p/webpack.config.js | 5 +++- 9 files changed, 52 insertions(+), 44 deletions(-) rename packages/p2p/src/components/{ => modal-manager/modals}/invalid-verification-link-modal/index.js (100%) rename packages/p2p/src/components/{ => modal-manager/modals}/invalid-verification-link-modal/invalid-verification-link-modal.jsx (62%) rename packages/p2p/src/components/{ => modal-manager/modals}/invalid-verification-link-modal/invalid-verification-link-modal.scss (100%) create mode 100644 packages/p2p/src/constants/modals.js diff --git a/packages/p2p/src/components/modal-manager/modal-manager-context-provider.jsx b/packages/p2p/src/components/modal-manager/modal-manager-context-provider.jsx index 0fd9cbe12f04..8fb8fcd36e74 100644 --- a/packages/p2p/src/components/modal-manager/modal-manager-context-provider.jsx +++ b/packages/p2p/src/components/modal-manager/modal-manager-context-provider.jsx @@ -1,9 +1,11 @@ import React from 'react'; +import { useStores } from 'Stores'; import { ModalManagerContext } from './modal-manager-context'; const ModalManagerContextProvider = props => { - const [active_modal, setActiveModal] = React.useState(null); + const [active_modal, setActiveModal] = React.useState({}); const [is_modal_open, setIsModalOpen] = React.useState(false); + const { general_store } = useStores(); const showModal = modal => { setActiveModal(modal); @@ -11,7 +13,7 @@ const ModalManagerContextProvider = props => { }; const hideModal = () => { - setActiveModal(null); + setActiveModal({}); setIsModalOpen(false); }; @@ -22,6 +24,9 @@ const ModalManagerContextProvider = props => { showModal, }; + general_store.showModal = showModal; + general_store.hideModal = hideModal; + return {props.children}; }; diff --git a/packages/p2p/src/components/modal-manager/modal-manager.jsx b/packages/p2p/src/components/modal-manager/modal-manager.jsx index d6c72eb5fb26..80273b1a1034 100644 --- a/packages/p2p/src/components/modal-manager/modal-manager.jsx +++ b/packages/p2p/src/components/modal-manager/modal-manager.jsx @@ -1,9 +1,20 @@ +import React from 'react'; +import { modals } from 'Constants/modals'; import { useModalManagerContext } from './modal-manager-context'; const ModalManager = () => { const { modal } = useModalManagerContext(); + const { key, props } = modal; + const Modal = modals[key]; - return modal; + if (Modal) + return ( + + + + ); + + return null; }; export default ModalManager; 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..b3d5d7e6bd94 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,26 @@ 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, + 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} + {order_store.verification_link_error_message} @@ -33,8 +29,8 @@ const InvalidVerificationLinkModal = ({ large primary onClick={() => { - setIsInvalidVerificationLinkModalOpen(false); - onClickGetNewLinkButton(); + hideModal(); + order_store.confirmOrderRequest(order_id); }} > @@ -45,10 +41,7 @@ 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, + 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 0698f659c563..7e78360d66d6 100644 --- a/packages/p2p/src/components/order-details/order-details.jsx +++ b/packages/p2p/src/components/order-details/order-details.jsx @@ -21,7 +21,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 EmailLinkVerifiedModal from '../email-link-verified-modal'; import { getDateAfterHours } from 'Utils/date-time'; @@ -174,12 +173,6 @@ const OrderDetails = observer(() => { onClickConfirm={() => order_store.confirmOrder(is_buy_order_for_user)} setIsEmailLinkVerifiedModalOpen={order_store.setIsEmailLinkVerifiedModalOpen} /> - order_store.confirmOrderRequest(id)} - /> + import( + /* webpackChunkName: "invalid-verification-link-modal" */ 'Components/modal-manager/modals/invalid-verification-link-modal' + ) + ), +}; diff --git a/packages/p2p/src/stores/order-store.js b/packages/p2p/src/stores/order-store.js index 7dc7662d1ebc..7d63ce0a0e56 100644 --- a/packages/p2p/src/stores/order-store.js +++ b/packages/p2p/src/stores/order-store.js @@ -58,7 +58,6 @@ export default class OrderStore { setIsEmailLinkBlockedModalOpen: action.bound, setIsEmailLinkVerifiedModalOpen: action.bound, setIsEmailVerificationModalOpen: action.bound, - setIsInvalidVerificationLinkModalOpen: action.bound, setIsLoading: action.bound, setIsLoadingModalOpen: action.bound, setIsRatingModalOpen: action.bound, @@ -150,7 +149,7 @@ export default class OrderStore { response?.error.code === api_error_codes.INVALID_VERIFICATION_TOKEN || response?.error.code === api_error_codes.EXCESSIVE_VERIFICATION_REQUESTS ) { - clearTimeout(wait); + // clearTimeout(wait); if (this.is_email_verification_modal_open) { this.setIsEmailVerificationModalOpen(false); } @@ -158,11 +157,11 @@ export default class OrderStore { this.setIsEmailLinkVerifiedModalOpen(false); } this.setVerificationLinkErrorMessage(response.error.message); - const wait = setTimeout(() => this.setIsInvalidVerificationLinkModalOpen(true), 230); + this.root_store.general_store.showModal({ + key: 'InvalidVerificationLinkModal', + props: { 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); @@ -493,13 +492,12 @@ 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: { order_id: this.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); @@ -558,10 +556,6 @@ export default class OrderStore { this.is_email_verification_modal_open = is_email_verification_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; } diff --git a/packages/p2p/webpack.config.js b/packages/p2p/webpack.config.js index 66d9053761e7..f901d211ca7d 100644 --- a/packages/p2p/webpack.config.js +++ b/packages/p2p/webpack.config.js @@ -8,7 +8,9 @@ const path = require('path'); const is_release = process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'staging'; const is_publishing = process.env.NPM_PUBLISHING_MODE === '1'; -module.exports = function () { +module.exports = function (env) { + const base = env && env.base && env.base !== true ? `/${env.base}/` : '/'; + return { entry: { index: path.resolve(__dirname, 'src/components', 'app.jsx'), @@ -17,6 +19,7 @@ module.exports = function () { output: { chunkFilename: 'p2p/js/p2p.[name].[contenthash].js', path: path.resolve(__dirname, 'dist'), + publicPath: base, filename: 'p2p/js/[name].js', libraryExport: 'default', library: '@deriv/p2p', From 61f02b842ad847052010b176d59b94502b9f5ff3 Mon Sep 17 00:00:00 2001 From: Farrah Mae Ochoa Date: Fri, 25 Nov 2022 12:57:58 +0400 Subject: [PATCH 2/3] refactor: error message --- .../invalid-verification-link-modal.jsx | 4 +++- packages/p2p/src/stores/order-store.js | 11 +++++------ 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/p2p/src/components/modal-manager/modals/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 index b3d5d7e6bd94..169cbac32ec6 100644 --- a/packages/p2p/src/components/modal-manager/modals/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 @@ -6,6 +6,7 @@ import { useStores } from 'Stores'; import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context'; const InvalidVerificationLinkModal = ({ + error_message, order_id, // TODO: Uncomment when time is available in BE response // verification_link_expiry_time, @@ -21,7 +22,7 @@ const InvalidVerificationLinkModal = ({ - {order_store.verification_link_error_message} + {error_message} @@ -41,6 +42,7 @@ const InvalidVerificationLinkModal = ({ }; InvalidVerificationLinkModal.propTypes = { + 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/stores/order-store.js b/packages/p2p/src/stores/order-store.js index c61d70c522f9..d4d09c4a355a 100644 --- a/packages/p2p/src/stores/order-store.js +++ b/packages/p2p/src/stores/order-store.js @@ -144,17 +144,15 @@ export default class OrderStore { response?.error.code === api_error_codes.INVALID_VERIFICATION_TOKEN || response?.error.code === api_error_codes.EXCESSIVE_VERIFICATION_REQUESTS ) { - // clearTimeout(wait); if (this.is_email_verification_modal_open) { this.setIsEmailVerificationModalOpen(false); } if (this.is_email_link_verified_modal_open) { this.setIsEmailLinkVerifiedModalOpen(false); } - this.setVerificationLinkErrorMessage(response.error.message); this.root_store.general_store.showModal({ key: 'InvalidVerificationLinkModal', - props: { order_id: id }, + props: { error_message: response.error.message, order_id: id }, }); } else if (response?.error.code === api_error_codes.EXCESSIVE_VERIFICATION_FAILURES) { clearTimeout(wait); @@ -468,10 +466,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 => { @@ -484,10 +484,9 @@ export default class OrderStore { response.error.code === api_error_codes.INVALID_VERIFICATION_TOKEN || response.error.code === api_error_codes.EXCESSIVE_VERIFICATION_REQUESTS ) { - this.setVerificationLinkErrorMessage(response.error.message); this.root_store.general_store.showModal({ key: 'InvalidVerificationLinkModal', - props: { order_id: this.order_id }, + props: { error_message: response.error.message, order_id }, }); } else if (response.error.code === api_error_codes.EXCESSIVE_VERIFICATION_FAILURES) { clearTimeout(wait); From e3f3b14220e37e7b19b6b0876a23db6693c02dcf Mon Sep 17 00:00:00 2001 From: adrienne-deriv <103016120+adrienne-deriv@users.noreply.github.com> Date: Fri, 23 Dec 2022 14:34:21 +0800 Subject: [PATCH 3/3] chore: fixed merge conflicts --- packages/p2p/src/stores/order-store.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/p2p/src/stores/order-store.js b/packages/p2p/src/stores/order-store.js index bd2d85793027..6e87bf289055 100644 --- a/packages/p2p/src/stores/order-store.js +++ b/packages/p2p/src/stores/order-store.js @@ -146,9 +146,6 @@ export default class OrderStore { if (this.is_email_verification_modal_open) { this.setIsEmailVerificationModalOpen(false); } - if (this.is_email_link_verified_modal_open) { - this.setIsEmailLinkVerifiedModalOpen(false); - } this.root_store.general_store.showModal({ key: 'InvalidVerificationLinkModal', props: { error_message: response.error.message, order_id: id },