Adrienne / Error modal (#7283)

* saved draft * refactor: added error modal * chore: reverted old changes modals folder
binary-com · Jan 9, 2023 · 5a11270 · 5a11270
1 parent 10186ef
commit 5a11270
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 26 deletions.
diff --git a/packages/p2p/src/components/advertiser-page/advertiser-page.jsx b/packages/p2p/src/components/advertiser-page/advertiser-page.jsx
@@ -18,13 +18,14 @@ import AdvertiserPageDropdownMenu from './advertiser-page-dropdown-menu.jsx';
 import TradeBadge from '../trade-badge/trade-badge.jsx';
 import BlockUserOverlay from './block-user/block-user-overlay';
 import BlockUserModal from 'Components/block-user/block-user-modal';
-import ErrorModal from 'Components/error-modal/error-modal';
 import classNames from 'classnames';
 import { OnlineStatusIcon, OnlineStatusLabel } from 'Components/online-status';
+import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
 import './advertiser-page.scss';
 
 const AdvertiserPage = () => {
     const { general_store, advertiser_page_store, buy_sell_store } = useStores();
+    const { showModal } = useModalManagerContext();
 
     const is_my_advert = advertiser_page_store.advertiser_details_id === general_store.advertiser_id;
     // Use general_store.advertiser_info since resubscribing to the same id from advertiser page returns error
@@ -49,7 +50,6 @@ const AdvertiserPage = () => {
     // rating_average_decimal converts rating_average to 1 d.p number
     const rating_average_decimal = rating_average ? Number(rating_average).toFixed(1) : null;
     const joined_since = daysSince(created_time);
-    const [is_error_modal_open, setIsErrorModalOpen] = React.useState(false);
 
     React.useEffect(() => {
         advertiser_page_store.onMount();
@@ -59,7 +59,21 @@ const AdvertiserPage = () => {
             () => [advertiser_page_store.active_index, general_store.block_unblock_user_error],
             () => {
                 advertiser_page_store.onTabChange();
-                if (general_store.block_unblock_user_error) setIsErrorModalOpen(true);
+                if (general_store.block_unblock_user_error)
+                    showModal({
+                        key: 'ErrorModal',
+                        props: {
+                            error_message: general_store.block_unblock_user_error,
+                            error_modal_title: 'Unable to block advertiser',
+                            has_close_icon: false,
+                            setIsErrorModalOpen: is_open => {
+                                if (!is_open) buy_sell_store.hideAdvertiserPage();
+                                advertiser_page_store.onCancel();
+                                general_store.setBlockUnblockUserError('');
+                            },
+                            width: isMobile() ? '90rem' : '40rem',
+                        },
+                    });
             },
             { fireImmediately: true }
         );
@@ -87,18 +101,6 @@ const AdvertiserPage = () => {
             })}
         >
             <RateChangeModal onMount={advertiser_page_store.setShowAdPopup} />
-            <ErrorModal
-                error_message={general_store.block_unblock_user_error}
-                error_modal_title='Unable to block advertiser'
-                has_close_icon={false}
-                is_error_modal_open={is_error_modal_open}
-                setIsErrorModalOpen={is_open => {
-                    if (!is_open) buy_sell_store.hideAdvertiserPage();
-                    advertiser_page_store.onCancel();
-                    general_store.setBlockUnblockUserError('');
-                }}
-                width={isMobile() ? '90rem' : '40rem'}
-            />
             <BlockUserModal
                 advertiser_name={name}
                 is_advertiser_blocked={!!advertiser_page_store.is_counterparty_advertiser_blocked && !is_my_advert}

diff --git a/...rc/components/error-modal/error-modal.jsx → ...anager/modals/error-modal/error-modal.jsx b/...rc/components/error-modal/error-modal.jsx → ...anager/modals/error-modal/error-modal.jsx
@@ -3,21 +3,16 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react-lite';
 import { Button, Modal } from '@deriv/components';
 import { Localize } from 'Components/i18next';
-import './error-modal.scss';
+import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
+
+const ErrorModal = ({ error_message, error_modal_title, has_close_icon, setIsErrorModalOpen, width }) => {
+    const { is_modal_open } = useModalManagerContext();
 
-const ErrorModal = ({
-    error_message,
-    error_modal_title,
-    has_close_icon,
-    is_error_modal_open,
-    setIsErrorModalOpen,
-    width,
-}) => {
     return (
         <Modal
             className='error-modal'
             has_close_icon={has_close_icon}
-            is_open={is_error_modal_open}
+            is_open={is_modal_open}
             title={error_modal_title}
             width={width}
         >
@@ -35,7 +30,6 @@ ErrorModal.propTypes = {
     error_message: PropTypes.string,
     error_modal_title: PropTypes.string,
     has_close_icon: PropTypes.bool,
-    is_error_modal_open: PropTypes.bool,
     setIsErrorModalOpen: PropTypes.func,
     width: PropTypes.string,
 };

diff --git a/...c/components/error-modal/error-modal.scss → ...nager/modals/error-modal/error-modal.scss b/...c/components/error-modal/error-modal.scss → ...nager/modals/error-modal/error-modal.scss
diff --git a/...s/p2p/src/components/error-modal/index.js → ...modal-manager/modals/error-modal/index.js b/...s/p2p/src/components/error-modal/index.js → ...modal-manager/modals/error-modal/index.js
@@ -1,3 +1,4 @@
 import ErrorModal from './error-modal.jsx';
+import './error-modal.scss';
 
 export default ErrorModal;
diff --git a/packages/p2p/src/constants/modals.js b/packages/p2p/src/constants/modals.js
@@ -50,6 +50,9 @@ export const modals = {
             /* webpackChunkName: "email-verification-modal" */ 'Components/modal-manager/modals/email-verification-modal'
         )
     ),
+    ErrorModal: React.lazy(() =>
+        import(/* webpackChunkName: "error-modal" */ 'Components/modal-manager/modals/error-modal')
+    ),
     FilterModal: React.lazy(() =>
         import(/* webpackChunkName: "filter-modal" */ 'Components/modal-manager/modals/filter-modal')
     ),