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; }