diff --git a/packages/p2p/src/components/modal-manager/modals/my-ads-delete-error-modal/index.js b/packages/p2p/src/components/modal-manager/modals/my-ads-delete-error-modal/index.js
new file mode 100644
index 000000000000..380eb8e10b2a
--- /dev/null
+++ b/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;
diff --git a/packages/p2p/src/components/modal-manager/modals/my-ads-delete-error-modal/my-ads-delete-error-modal.jsx b/packages/p2p/src/components/modal-manager/modals/my-ads-delete-error-modal/my-ads-delete-error-modal.jsx
new file mode 100644
index 000000000000..4e8ee67260b3
--- /dev/null
+++ b/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 (
+
+ (
+
+
+
+ )}
+ width='440px'
+ >
+ {my_ads_store.delete_error_message}
+
+
+
+
+
+
+
+ );
+};
+
+export default observer(MyAdsDeleteErrorModal);
diff --git a/packages/p2p/src/components/modal-manager/modals/my-ads-delete-modal/index.js b/packages/p2p/src/components/modal-manager/modals/my-ads-delete-modal/index.js
new file mode 100644
index 000000000000..a7da0e82cd49
--- /dev/null
+++ b/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;
diff --git a/packages/p2p/src/components/modal-manager/modals/my-ads-delete-modal/my-ads-delete-modal.jsx b/packages/p2p/src/components/modal-manager/modals/my-ads-delete-modal/my-ads-delete-modal.jsx
new file mode 100644
index 000000000000..ef5a69f03d8b
--- /dev/null
+++ b/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 (
+
+ (
+
+
+
+ )}
+ width='440px'
+ >
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default observer(MyAdsDeleteModal);
diff --git a/packages/p2p/src/components/my-ads/my-ads-delete-modal.scss b/packages/p2p/src/components/modal-manager/modals/my-ads-delete-modal/my-ads-delete-modal.scss
similarity index 100%
rename from packages/p2p/src/components/my-ads/my-ads-delete-modal.scss
rename to packages/p2p/src/components/modal-manager/modals/my-ads-delete-modal/my-ads-delete-modal.scss
diff --git a/packages/p2p/src/components/my-ads/my-ads-delete-modal.jsx b/packages/p2p/src/components/my-ads/my-ads-delete-modal.jsx
deleted file mode 100644
index 1886133604cd..000000000000
--- a/packages/p2p/src/components/my-ads/my-ads-delete-modal.jsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Button, Modal, Text } from '@deriv/components';
-import { isDesktop, useIsMounted } from '@deriv/shared';
-import { observer } from 'mobx-react-lite';
-import { Localize } from 'Components/i18next';
-import { requestWS } from 'Utils/websocket';
-import { useStores } from 'Stores';
-import 'Components/my-ads/my-ads-delete-modal.scss';
-
-const MyAdsDeleteModal = () => {
- const { my_ads_store } = useStores();
- const isMounted = useIsMounted();
-
- const onClickCancel = () => {
- my_ads_store.setDeleteErrorMessage('');
- my_ads_store.setSelectedAdId('');
- my_ads_store.setIsDeleteModalOpen(false);
- };
-
- const onClickConfirm = () => {
- my_ads_store.setIsDeleteModalOpen(false);
- requestWS({ p2p_advert_update: 1, id: my_ads_store.selected_ad_id, delete: 1 }).then(response => {
- if (isMounted()) {
- if (response.error) {
- my_ads_store.setDeleteErrorMessage(response.error.message);
- my_ads_store.setIsDeleteErrorModalOpen(true);
- } 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);
- my_ads_store.setIsDeleteModalOpen(false);
- }
- }
- });
- };
-
- return (
-
- (
-
-
-
- )}
- width='440px'
- >
-
-
-
-
-
-
-
-
-
-
- (
-
-
-
- )}
- width='440px'
- >
- {my_ads_store.delete_error_message}
-
-
-
-
-
-
-
- );
-};
-
-MyAdsDeleteModal.propTypes = {
- is_delete_modal_open: PropTypes.bool,
- setIsDeleteModalOpen: PropTypes.func,
-};
-
-export default observer(MyAdsDeleteModal);
diff --git a/packages/p2p/src/components/my-ads/my-ads-table.jsx b/packages/p2p/src/components/my-ads/my-ads-table.jsx
index e24e4563ac17..157eb80d0b52 100644
--- a/packages/p2p/src/components/my-ads/my-ads-table.jsx
+++ b/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 = () => {
)}
-
+ 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'
diff --git a/packages/p2p/src/stores/my-ads-store.js b/packages/p2p/src/stores/my-ads-store.js
index 1e7142982b2c..7e08064920ec 100644
--- a/packages/p2p/src/stores/my-ads-store.js
+++ b/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;
}