refactor: myAdsDeleteModal (#7024)

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 MyAdsRowRenderer from './my-ads-row-renderer.jsx';
 import QuickAddModal from './quick-add-modal.jsx';
 import AdExceedsDailyLimitModal from './ad-exceeds-daily-limit-modal.jsx';
@@ -142,7 +141,6 @@ const MyAdsTable = () => {
                         </Button>
                     </div>
                 )}
-                <MyAdsDeleteModal />
                 <Modal
                     className='p2p-my-ads__modal-error'
                     has_close_icon={false}

packages/p2p/src/constants/modals.js

@@ -1,6 +1,14 @@
 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'
+        )
+    ),
     EmailLinkVerifiedModal: React.lazy(() =>
         import(
             /* webpackChunkName: "email-link-verified-modal" */ 'Components/modal-manager/modals/email-link-verified-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;
@@ -68,8 +66,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,
@@ -121,8 +117,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;
     }