farrah/78921/refactor MyAdsDeleteModal

packages/p2p/src/components/modal-manager/modal-manager-context-provider.jsx

@@ -1,17 +1,19 @@
 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);
         setIsModalOpen(true);
     };
 
     const hideModal = () => {
-        setActiveModal(null);
+        setActiveModal({});
         setIsModalOpen(false);
     };
 
@@ -22,6 +24,9 @@ const ModalManagerContextProvider = props => {
         showModal,
     };
 
+    general_store.showModal = showModal;
+    general_store.hideModal = hideModal;
+
     return <ModalManagerContext.Provider value={state}>{props.children}</ModalManagerContext.Provider>;
 };
 

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 (
+            <React.Suspense fallback={null}>
+                <Modal {...props} />
+            </React.Suspense>
+        );
+
+    return null;
 };
 
 export default ModalManager;

packages/p2p/src/components/modal-manager/modals/my-ads-delete-error-modal/index.js

@@ -0,0 +1,3 @@
+import MyAdsDeleteErrorModal from './my-ads-delete-error-modal.jsx';
+
+export default MyAdsDeleteErrorModal;

packages/p2p/src/components/modal-manager/modals/my-ads-delete-error-modal/my-ads-delete-error-modal.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Button, Modal, Text } from '@deriv/components';
+import { isDesktop } from '@deriv/shared';
+import { observer } from 'mobx-react-lite';
+import { Localize } from 'Components/i18next';
+import { useStores } from 'Stores';
+import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
+
+const MyAdsDeleteErrorModal = () => {
+    const { my_ads_store } = useStores();
+    const { hideModal, is_modal_open } = useModalManagerContext();
+
+    return (
+        <React.Fragment>
+            <Modal
+                className='delete-modal'
+                has_close_icon={false}
+                is_open={is_modal_open}
+                renderTitle={() => (
+                    <Text color='prominent' line-height='m' size={isDesktop() ? 's' : 'xs'} weight='bold'>
+                        <Localize i18n_default_text='Do you want to delete this ad?' />
+                    </Text>
+                )}
+                width='440px'
+            >
+                <Modal.Body>{my_ads_store.delete_error_message}</Modal.Body>
+                <Modal.Footer>
+                    <Button.Group>
+                        <Button primary large onClick={() => hideModal()}>
+                            <Localize i18n_default_text='Ok' />
+                        </Button>
+                    </Button.Group>
+                </Modal.Footer>
+            </Modal>
+        </React.Fragment>
+    );
+};
+
+export default observer(MyAdsDeleteErrorModal);

packages/p2p/src/components/modal-manager/modals/my-ads-delete-modal/index.js

@@ -0,0 +1,4 @@
+import MyAdsDeleteModal from './my-ads-delete-modal.jsx';
+import './my-ads-delete-modal.scss';
+
+export default MyAdsDeleteModal;

packages/p2p/src/components/modal-manager/modals/my-ads-delete-modal/my-ads-delete-modal.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Button, Modal, Text } from '@deriv/components';
+import { isDesktop } from '@deriv/shared';
+import { observer } from 'mobx-react-lite';
+import { Localize } from 'Components/i18next';
+import { requestWS } from 'Utils/websocket';
+import { useStores } from 'Stores';
+import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
+
+const MyAdsDeleteModal = () => {
+    const { my_ads_store } = useStores();
+    const { hideModal, is_modal_open, showModal } = useModalManagerContext();
+
+    const onClickCancel = () => {
+        my_ads_store.setDeleteErrorMessage('');
+        my_ads_store.setSelectedAdId('');
+        hideModal();
+    };
+
+    const onClickConfirm = () => {
+        hideModal();
+        requestWS({ p2p_advert_update: 1, id: my_ads_store.selected_ad_id, delete: 1 }).then(response => {
+            if (response.error) {
+                my_ads_store.setDeleteErrorMessage(response.error.message);
+                showModal({ key: 'MyAdsDeleteErrorModal', props: {} });
+            } else {
+                // remove the deleted ad from the list of items
+                const updated_items = my_ads_store.adverts.filter(ad => ad.id !== response.p2p_advert_update.id);
+                my_ads_store.setAdverts(updated_items);
+            }
+        });
+    };
+
+    return (
+        <React.Fragment>
+            <Modal
+                className='delete-modal'
+                is_open={is_modal_open}
+                toggleModal={onClickCancel}
+                has_close_icon
+                renderTitle={() => (
+                    <Text color='prominent' line-height='m' size={isDesktop() ? 's' : 'xs'} weight='bold'>
+                        <Localize i18n_default_text='Do you want to delete this ad?' />
+                    </Text>
+                )}
+                width='440px'
+            >
+                <Modal.Body>
+                    <Localize i18n_default_text='You will NOT be able to restore it.' />
+                </Modal.Body>
+                <Modal.Footer>
+                    <Button.Group>
+                        <Button secondary type='button' onClick={onClickCancel} large>
+                            <Localize i18n_default_text='Cancel' />
+                        </Button>
+                        <Button primary large onClick={onClickConfirm}>
+                            <Localize i18n_default_text='Delete' />
+                        </Button>
+                    </Button.Group>
+                </Modal.Footer>
+            </Modal>
+        </React.Fragment>
+    );
+};
+
+export default observer(MyAdsDeleteModal);

packages/p2p/src/components/my-ads/my-ads-table.jsx

@@ -10,7 +10,6 @@ import { TableError } from 'Components/table/table-error.jsx';
 import { ad_type } from 'Constants/floating-rate';
 import { useStores } from 'Stores';
 import { generateErrorDialogTitle } from 'Utils/adverts';
-import MyAdsDeleteModal from './my-ads-delete-modal.jsx';
 import MyAdsFloatingRateSwitchModal from './my-ads-floating-rate-switch-modal.jsx';
 import MyAdsRowRenderer from './my-ads-row-renderer.jsx';
 import QuickAddModal from './quick-add-modal.jsx';
@@ -143,7 +142,6 @@ const MyAdsTable = () => {
                         </Button>
                     </div>
                 )}
-                <MyAdsDeleteModal />
                 <MyAdsFloatingRateSwitchModal />
                 <Modal
                     className='p2p-my-ads__modal-error'

packages/p2p/src/constants/modals.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+export const modals = {
+    MyAdsDeleteModal: React.lazy(() =>
+        import(/* webpackChunkName: "my-ads-delete-modal" */ 'Components/modal-manager/modals/my-ads-delete-modal')
+    ),
+    MyAdsDeleteErrorModal: React.lazy(() =>
+        import(
+            /* webpackChunkName: "my-ads-delete-error-modal" */ 'Components/modal-manager/modals/my-ads-delete-error-modal'
+        )
+    ),
+};

packages/p2p/src/stores/my-ads-store.js

@@ -25,8 +25,6 @@ export default class MyAdsStore extends BaseStore {
     is_ad_created_modal_visible = false;
     is_ad_exceeds_daily_limit_modal_open = false;
     is_api_error_modal_visible = false;
-    is_delete_error_modal_open = false;
-    is_delete_modal_open = false;
     is_edit_ad_error_modal_visible = false;
     is_form_loading = false;
     is_quick_add_error_modal_open = false;
@@ -69,8 +67,6 @@ export default class MyAdsStore extends BaseStore {
             is_ad_created_modal_visible: observable,
             is_ad_exceeds_daily_limit_modal_open: observable,
             is_api_error_modal_visible: observable,
-            is_delete_error_modal_open: observable,
-            is_delete_modal_open: observable,
             is_edit_ad_error_modal_visible: observable,
             is_form_loading: observable,
             is_quick_add_error_modal_open: observable,
@@ -123,8 +119,6 @@ export default class MyAdsStore extends BaseStore {
             setIsAdCreatedModalVisible: action.bound,
             setIsAdExceedsDailyLimitModalOpen: action.bound,
             setIsApiErrorModalVisible: action.bound,
-            setIsDeleteErrorModalOpen: action.bound,
-            setIsDeleteModalOpen: action.bound,
             setIsEditAdErrorModalVisible: action.bound,
             setIsFormLoading: action.bound,
             setIsLoading: action.bound,
@@ -312,7 +306,9 @@ export default class MyAdsStore extends BaseStore {
     }
 
     onClickDelete(id) {
-        if (!this.root_store.general_store.is_barred) {
+        const { general_store } = this.root_store;
+
+        if (!general_store.is_barred) {
             requestWS({ p2p_advert_info: 1, id }).then(response => {
                 if (!response?.error) {
                     const { p2p_advert_info } = response;
@@ -325,9 +321,12 @@ export default class MyAdsStore extends BaseStore {
                                 'You have open orders for this ad. Complete all open orders before deleting this ad.'
                             )
                         );
-                        this.setIsDeleteErrorModalOpen(true);
+                        general_store.showModal({
+                            key: 'MyAdsDeleteErrorModal',
+                            props: {},
+                        });
                     } else {
-                        this.setIsDeleteModalOpen(true);
+                        general_store.showModal({ key: 'MyAdsDeleteModal', props: {} });
                     }
                 }
             });
@@ -542,14 +541,6 @@ export default class MyAdsStore extends BaseStore {
         this.is_api_error_modal_visible = is_api_error_modal_visible;
     }
 
-    setIsDeleteErrorModalOpen(is_delete_error_modal_open) {
-        this.is_delete_error_modal_open = is_delete_error_modal_open;
-    }
-
-    setIsDeleteModalOpen(is_delete_modal_open) {
-        this.is_delete_modal_open = is_delete_modal_open;
-    }
-
     setIsEditAdErrorModalVisible(is_edit_ad_error_modal_visible) {
         this.is_edit_ad_error_modal_visible = is_edit_ad_error_modal_visible;
     }

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',