refactor: emailLinkVerifiedModal (#7118)

binary-com · Dec 15, 2022 · e5626e5 · e5626e5
1 parent 93fff05
commit e5626e5
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 46 deletions.
diff --git a/...ified-modal/email-link-verified-modal.jsx → ...ified-modal/email-link-verified-modal.jsx b/...ified-modal/email-link-verified-modal.jsx → ...ified-modal/email-link-verified-modal.jsx
@@ -1,32 +1,30 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Button, Icon, Modal, Text } from '@deriv/components';
+import { formatMoney } from '@deriv/shared';
 import { Localize } from 'Components/i18next';
+import { useStores } from 'Stores';
+import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
+import { setDecimalPlaces, removeTrailingZeros, roundOffDecimal } from 'Utils/format-value';
+
+const EmailLinkVerifiedModal = () => {
+    const { hideModal, is_modal_open } = useModalManagerContext();
+    const { order_store } = useStores();
+    const { amount_display, is_buy_order_for_user, local_currency, rate } = order_store.order_information;
+    const amount = removeTrailingZeros(
+        formatMoney(local_currency, amount_display * roundOffDecimal(rate, setDecimalPlaces(rate, 6)), true)
+    );
 
-const EmailLinkVerifiedModal = ({
-    amount,
-    currency,
-    is_email_link_verified_modal_open,
-    onClickConfirm,
-    setIsEmailLinkVerifiedModalOpen,
-}) => {
     return (
-        <Modal
-            has_close_icon
-            is_open={is_email_link_verified_modal_open}
-            renderTitle={() => <></>}
-            toggleModal={() => setIsEmailLinkVerifiedModalOpen(false)}
-            width='440px'
-        >
+        <Modal has_close_icon is_open={is_modal_open} renderTitle={() => <></>} toggleModal={hideModal} 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 }}
+                        i18n_default_text="Please ensure you've received {{amount}} {{local_currency}} in your account and hit Confirm to complete the transaction."
+                        values={{ amount, local_currency }}
                     />
                 </Text>
             </Modal.Body>
@@ -35,8 +33,8 @@ const EmailLinkVerifiedModal = ({
                     large
                     primary
                     onClick={() => {
-                        setIsEmailLinkVerifiedModalOpen(false);
-                        onClickConfirm();
+                        hideModal();
+                        order_store.confirmOrder(is_buy_order_for_user);
                     }}
                 >
                     <Localize i18n_default_text='Confirm' />
@@ -46,12 +44,4 @@ const EmailLinkVerifiedModal = ({
     );
 };
 
-EmailLinkVerifiedModal.propTypes = {
-    amount: PropTypes.string,
-    currency: PropTypes.string,
-    is_email_link_verified_modal_open: PropTypes.bool,
-    onClickConfirm: PropTypes.func,
-    setIsEmailLinkVerifiedModalOpen: PropTypes.func,
-};
-
 export default EmailLinkVerifiedModal;
diff --git a/...fied-modal/email-link-verified-modal.scss → ...fied-modal/email-link-verified-modal.scss b/...fied-modal/email-link-verified-modal.scss → ...fied-modal/email-link-verified-modal.scss
diff --git a/...onents/email-link-verified-modal/index.js → ...modals/email-link-verified-modal/index.js b/...onents/email-link-verified-modal/index.js → ...modals/email-link-verified-modal/index.js
diff --git a/packages/p2p/src/components/order-details/order-details.jsx b/packages/p2p/src/components/order-details/order-details.jsx
@@ -23,7 +23,6 @@ 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';
 
 const OrderDetails = observer(() => {
@@ -168,13 +167,6 @@ const OrderDetails = observer(() => {
                         onClickResendEmailButton={() => order_store.confirmOrderRequest(id)}
                         setIsEmailVerificationModalOpen={order_store.setIsEmailVerificationModalOpen}
                     />
-                    <EmailLinkVerifiedModal
-                        amount={display_payment_amount}
-                        currency={local_currency}
-                        is_email_link_verified_modal_open={order_store.is_email_link_verified_modal_open}
-                        onClickConfirm={() => order_store.confirmOrder(is_buy_order_for_user)}
-                        setIsEmailLinkVerifiedModalOpen={order_store.setIsEmailLinkVerifiedModalOpen}
-                    />
                     <InvalidVerificationLinkModal
                         invalid_verification_link_error_message={order_store.verification_link_error_message}
                         is_invalid_verification_link_modal_open={order_store.is_invalid_verification_link_modal_open}

diff --git a/packages/p2p/src/constants/modals.js b/packages/p2p/src/constants/modals.js
@@ -1,6 +1,11 @@
 import React from 'react';
 
 export const modals = {
+    EmailLinkVerifiedModal: React.lazy(() =>
+        import(
+            /* webpackChunkName: "email-link-verified-modal" */ 'Components/modal-manager/modals/email-link-verified-modal'
+        )
+    ),
     MyAdsFloatingRateSwitchModal: React.lazy(() =>
         import(
             /* webpackChunkName: "my-ads-floating-rate-switch-modal" */ 'Components/modal-manager/modals/my-ads-floating-rate-switch-modal'

diff --git a/packages/p2p/src/stores/order-store.js b/packages/p2p/src/stores/order-store.js
@@ -16,7 +16,6 @@ export default class OrderStore {
             error_message: observable,
             has_more_items_to_load: observable,
             is_email_link_blocked_modal_open: observable,
-            is_email_link_verified_modal_open: observable,
             is_email_verification_modal_open: observable,
             is_invalid_verification_link_modal_open: observable,
             is_loading: observable,
@@ -55,7 +54,6 @@ export default class OrderStore {
             setErrorMessage: action.bound,
             setHasMoreItemsToLoad: action.bound,
             setIsEmailLinkBlockedModalOpen: action.bound,
-            setIsEmailLinkVerifiedModalOpen: action.bound,
             setIsEmailVerificationModalOpen: action.bound,
             setIsInvalidVerificationLinkModalOpen: action.bound,
             setIsLoading: action.bound,
@@ -98,7 +96,6 @@ export default class OrderStore {
     error_message = '';
     has_more_items_to_load = false;
     is_email_link_blocked_modal_open = false;
-    is_email_link_verified_modal_open = false;
     is_email_verification_modal_open = false;
     is_invalid_verification_link_modal_open = false;
     is_loading = false;
@@ -136,6 +133,8 @@ export default class OrderStore {
             p2p_order_confirm: 1,
             id,
         }).then(response => {
+            this.root_store.general_store.hideModal();
+
             if (response) {
                 if (response.error) {
                     if (response.error.code === api_error_codes.ORDER_EMAIL_VERIFICATION_REQUIRED) {
@@ -149,9 +148,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.setVerificationLinkErrorMessage(response.error.message);
                         const wait = setTimeout(() => this.setIsInvalidVerificationLinkModalOpen(true), 230);
                     } else if (response?.error.code === api_error_codes.EXCESSIVE_VERIFICATION_FAILURES) {
@@ -480,7 +476,10 @@ export default class OrderStore {
                 if (response) {
                     if (!response.error) {
                         clearTimeout(wait);
-                        const wait = setTimeout(() => this.setIsEmailLinkVerifiedModalOpen(true), 650);
+                        const wait = setTimeout(
+                            () => this.root_store.general_store.showModal({ key: 'EmailLinkVerifiedModal', props: {} }),
+                            650
+                        );
                     } else if (
                         response.error.code === api_error_codes.INVALID_VERIFICATION_TOKEN ||
                         response.error.code === api_error_codes.EXCESSIVE_VERIFICATION_REQUESTS
@@ -538,10 +537,6 @@ export default class OrderStore {
         this.is_email_link_blocked_modal_open = is_email_link_blocked_modal_open;
     }
 
-    setIsEmailLinkVerifiedModalOpen(is_email_link_verified_modal_open) {
-        this.is_email_link_verified_modal_open = is_email_link_verified_modal_open;
-    }
-
     setIsEmailVerificationModalOpen(is_email_verification_modal_open) {
         this.is_email_verification_modal_open = is_email_verification_modal_open;
     }