Adrienne / Rate Change Modal

packages/p2p/src/components/advertiser-page/advertiser-page-row.jsx

@@ -7,9 +7,10 @@ import { useStores } from 'Stores';
 import { buy_sell } from 'Constants/buy-sell';
 import { localize, Localize } from 'Components/i18next';
 import { generateEffectiveRate } from 'Utils/format-value';
+import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
 import './advertiser-page.scss';
 
-const AdvertiserPageRow = ({ row: advert, showAdPopup }) => {
+const AdvertiserPageRow = ({ row: advert }) => {
     const { advertiser_page_store, buy_sell_store, floating_rate_store, general_store } = useStores();
     const { currency } = general_store.client;
     const {
@@ -22,6 +23,7 @@ const AdvertiserPageRow = ({ row: advert, showAdPopup }) => {
         rate_type,
         rate,
     } = advert;
+    const { showModal } = useModalManagerContext();
 
     const is_buy_advert = advertiser_page_store.counterparty_type === buy_sell.BUY;
     const is_my_advert = advertiser_page_store.advertiser_details_id === general_store.advertiser_id;
@@ -37,7 +39,9 @@ const AdvertiserPageRow = ({ row: advert, showAdPopup }) => {
 
     const showAdForm = () => {
         buy_sell_store.setSelectedAdState(advert);
-        showAdPopup(advert);
+        showModal({
+            key: 'BuySellModal',
+        });
     };
 
     if (isMobile()) {
@@ -138,7 +142,6 @@ AdvertiserPageRow.displayName = 'AdvertiserPageRow';
 AdvertiserPageRow.propTypes = {
     advert: PropTypes.object,
     row: PropTypes.object,
-    showAdPopup: PropTypes.func,
 };
 
 export default observer(AdvertiserPageRow);

packages/p2p/src/components/advertiser-page/advertiser-page.jsx

@@ -5,9 +5,6 @@ import { reaction } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { useStores } from 'Stores';
 import { Localize, localize } from 'Components/i18next';
-import { buy_sell } from 'Constants/buy-sell';
-import RateChangeModal from 'Components/buy-sell/rate-change-modal.jsx';
-import BuySellModal from 'Components/buy-sell/buy-sell-modal.jsx';
 import PageReturn from 'Components/page-return/page-return.jsx';
 import RecommendedBy from 'Components/recommended-by';
 import UserAvatar from 'Components/user/user-avatar/user-avatar.jsx';
@@ -86,7 +83,6 @@ const AdvertiserPage = () => {
                     !!advertiser_page_store.is_counterparty_advertiser_blocked && !is_my_advert,
             })}
         >
-            <RateChangeModal onMount={advertiser_page_store.setShowAdPopup} />
             <ErrorModal
                 error_message={general_store.block_unblock_user_error}
                 error_modal_title='Unable to block advertiser'
@@ -108,12 +104,6 @@ const AdvertiserPage = () => {
                 onCancel={advertiser_page_store.onCancel}
                 onSubmit={advertiser_page_store.onSubmit}
             />
-            <BuySellModal
-                selected_ad={advertiser_page_store.advert}
-                should_show_popup={advertiser_page_store.show_ad_popup}
-                setShouldShowPopup={advertiser_page_store.setShowAdPopup}
-                table_type={advertiser_page_store.counterparty_type === buy_sell.BUY ? buy_sell.BUY : buy_sell.SELL}
-            />
             <div className='advertiser-page__page-return-header'>
                 <PageReturn
                     className='buy-sell__advertiser-page-return'

packages/p2p/src/components/buy-sell/buy-sell-form.jsx

@@ -14,12 +14,14 @@ import PaymentMethodCard from '../my-profile/payment-methods/payment-method-card
 import { floatingPointValidator } from 'Utils/validations';
 import { countDecimalPlaces } from 'Utils/string';
 import { generateEffectiveRate, setDecimalPlaces, roundOffDecimal, removeTrailingZeros } from 'Utils/format-value';
+import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
 
 const BuySellForm = props => {
     const isMounted = useIsMounted();
     const { advertiser_page_store, buy_sell_store, floating_rate_store, general_store, my_profile_store } = useStores();
     const [selected_methods, setSelectedMethods] = React.useState([]);
     buy_sell_store.setFormProps(props);
+    const { showModal } = useModalManagerContext();
 
     const { setPageFooterParent } = props;
     const {
@@ -80,12 +82,22 @@ const BuySellForm = props => {
             }
 
             advertiser_page_store.setFormErrorMessage('');
-            buy_sell_store.setShowRateChangePopup(rate_type === ad_type.FLOAT);
+            const disposeRateChangeModal = reaction(
+                () => floating_rate_store.is_market_rate_changed,
+                is_market_rate_changed => {
+                    if (is_market_rate_changed && rate_type === ad_type.FLOAT) {
+                        showModal({
+                            key: 'RateChangeModal',
+                        });
+                    }
+                }
+            );
             buy_sell_store.setInitialReceiveAmount(calculated_rate);
 
             return () => {
                 buy_sell_store.payment_method_ids = [];
                 disposeReceiveAmountReaction();
+                disposeRateChangeModal();
             };
         },
         [] // eslint-disable-line react-hooks/exhaustive-deps