farrah/78922/refactor AdExceedsDailyLimitModal

packages/p2p/src/components/my-ads/ad-exceeds-daily-limit-modal.jsx → packages/p2p/src/components/modal-manager/modals/ad-exceeds-daily-limit-modal/ad-exceeds-daily-limit-modal.jsx

@@ -3,14 +3,16 @@ import { Button, Modal, Text } from '@deriv/components';
 import { observer } from 'mobx-react-lite';
 import { localize, Localize } from 'Components/i18next';
 import { useStores } from 'Stores';
+import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
 
 const AdExceedsDailyLimitModal = () => {
     const { my_ads_store } = useStores();
+    const { hideModal, is_modal_open } = useModalManagerContext();
 
     return (
         <Modal
             className='p2p-my-ads__modal-error'
-            is_open={my_ads_store.is_ad_exceeds_daily_limit_modal_open}
+            is_open={is_modal_open}
             small
             has_close_icon={false}
             title={localize('Your ad exceeds the daily limit')}
@@ -37,13 +39,7 @@ const AdExceedsDailyLimitModal = () => {
                 </Text>
             </Modal.Body>
             <Modal.Footer>
-                <Button
-                    has_effect
-                    text={localize('Ok')}
-                    onClick={() => my_ads_store.setIsAdExceedsDailyLimitModalOpen(false)}
-                    primary
-                    large
-                />
+                <Button has_effect text={localize('Ok')} onClick={() => hideModal()} primary large />
             </Modal.Footer>
         </Modal>
     );

packages/p2p/src/components/modal-manager/modals/ad-exceeds-daily-limit-modal/index.js

@@ -0,0 +1,3 @@
+import AdExceedsDailyLimitModal from './ad-exceeds-daily-limit-modal.jsx';
+
+export default AdExceedsDailyLimitModal;

packages/p2p/src/components/my-ads/create-ad-form.jsx

@@ -53,9 +53,9 @@ const CreateAdForm = () => {
             JSON.stringify(should_not_show_auto_archive_message_again.current)
         );
         my_ads_store.setIsAdCreatedModalVisible(false);
-        if (my_ads_store.advert_details?.visibility_status?.includes('advertiser_daily_limit')) {
-            my_ads_store.setIsAdExceedsDailyLimitModalOpen(true);
-        }
+        if (my_ads_store.advert_details?.visibility_status?.includes('advertiser_daily_limit'))
+            general_store.showModal({ key: 'AdExceedsDailyLimitModal', props: {} });
+
         my_ads_store.setShowAdForm(false);
     };
 

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

@@ -12,7 +12,6 @@ import { useStores } from 'Stores';
 import { generateErrorDialogTitle } from 'Utils/adverts';
 import MyAdsRowRenderer from './my-ads-row-renderer.jsx';
 import QuickAddModal from './quick-add-modal.jsx';
-import AdExceedsDailyLimitModal from './ad-exceeds-daily-limit-modal.jsx';
 
 const getHeaders = offered_currency => [
     { text: localize('Ad ID') },
@@ -89,7 +88,6 @@ const MyAdsTable = () => {
                         />
                     </div>
                 )}
-                <AdExceedsDailyLimitModal />
                 <div className='p2p-my-ads__header'>
                     {isDesktop() && (
                         <Button

packages/p2p/src/constants/modals.js

@@ -1,19 +1,24 @@
 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(() =>
+    AdExceedsDailyLimitModal: React.lazy(() =>
         import(
-            /* webpackChunkName: "my-ads-delete-error-modal" */ 'Components/modal-manager/modals/my-ads-delete-error-modal'
+            /* webpackChunkName: "ad-exceeds-daily-limit-modal" */ 'Components/modal-manager/modals/ad-exceeds-daily-limit-modal'
         )
     ),
     EmailLinkVerifiedModal: React.lazy(() =>
         import(
             /* webpackChunkName: "email-link-verified-modal" */ 'Components/modal-manager/modals/email-link-verified-modal'
         )
     ),
+    MyAdsDeleteErrorModal: React.lazy(() =>
+        import(
+            /* webpackChunkName: "my-ads-delete-error-modal" */ 'Components/modal-manager/modals/my-ads-delete-error-modal'
+        )
+    ),
+    MyAdsDeleteModal: React.lazy(() =>
+        import(/* webpackChunkName: "my-ads-delete-modal" */ 'Components/modal-manager/modals/my-ads-delete-modal')
+    ),
     MyAdsFloatingRateSwitchModal: React.lazy(() =>
         import(
             /* webpackChunkName: "my-ads-floating-rate-switch-modal" */ 'Components/modal-manager/modals/my-ads-floating-rate-switch-modal'

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

@@ -23,7 +23,6 @@ export default class MyAdsStore extends BaseStore {
     error_message = '';
     has_more_items_to_load = false;
     is_ad_created_modal_visible = false;
-    is_ad_exceeds_daily_limit_modal_open = false;
     is_api_error_modal_visible = false;
     is_edit_ad_error_modal_visible = false;
     is_form_loading = false;
@@ -64,7 +63,6 @@ export default class MyAdsStore extends BaseStore {
             error_message: observable,
             has_more_items_to_load: observable,
             is_ad_created_modal_visible: observable,
-            is_ad_exceeds_daily_limit_modal_open: observable,
             is_api_error_modal_visible: observable,
             is_edit_ad_error_modal_visible: observable,
             is_form_loading: observable,
@@ -115,7 +113,6 @@ export default class MyAdsStore extends BaseStore {
             setErrorMessage: action.bound,
             setHasMoreItemsToLoad: action.bound,
             setIsAdCreatedModalVisible: action.bound,
-            setIsAdExceedsDailyLimitModalOpen: action.bound,
             setIsApiErrorModalVisible: action.bound,
             setIsEditAdErrorModalVisible: action.bound,
             setIsFormLoading: action.bound,
@@ -247,7 +244,7 @@ export default class MyAdsStore extends BaseStore {
                             this.setAdvertDetails(response.p2p_advert_create);
                         }
                         if (this.advert_details?.visibility_status?.includes('advertiser_daily_limit')) {
-                            this.setIsAdExceedsDailyLimitModalOpen(true);
+                            this.root_store.general_store.showModal({ key: 'AdExceedsDailyLimitModal', props: {} });
                         }
                         this.setShowAdForm(false);
                     }
@@ -533,10 +530,6 @@ export default class MyAdsStore extends BaseStore {
         this.is_ad_created_modal_visible = is_ad_created_modal_visible;
     }
 
-    setIsAdExceedsDailyLimitModalOpen(is_ad_exceeds_daily_limit_modal_open) {
-        this.is_ad_exceeds_daily_limit_modal_open = is_ad_exceeds_daily_limit_modal_open;
-    }
-
     setIsApiErrorModalVisible(is_api_error_modal_visible) {
         this.is_api_error_modal_visible = is_api_error_modal_visible;
     }