[P2PS] / Ameerul / P2PS-2970 Share My Ads - 'This ad is currently una…

…vailable' pop not showing (#15605)

* revert: changes to logic to handle showing shared advert

* fix: p2p_advert_info being called without id on first render, advert_info subscription updates

* fix: failing test cases

* fix: added back check for if ad is eligible

* chore: updated title content

packages/hooks/src/useP2PAdvertInfo.ts

@@ -9,7 +9,7 @@ const useP2PAdvertInfo = (id: string) => {
     const { subscribe, data, unsubscribe, ...rest } = useSubscription('p2p_advert_info');
 
     React.useEffect(() => {
-        subscribe({ payload: { id } });
+        if (id) subscribe({ payload: { id } });
 
         return () => unsubscribe();
     }, [subscribe]);

packages/p2p/src/pages/advertiser-page/__tests__/advertiser-page.spec.tsx

@@ -64,6 +64,7 @@ const mock_store: DeepPartial<ReturnType<typeof useStores>> = {
     buy_sell_store: {
         show_advertiser_page: true,
         hideAdvertiserPage: jest.fn(),
+        setSelectedAdState: jest.fn(),
         setShowAdvertiserPage: jest.fn(),
     },
     my_profile_store: {

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

@@ -70,6 +70,14 @@ const AdvertiserPageRow = ({ row: advert }) => {
         }
     };
 
+    React.useEffect(() => {
+        const disposeAdvertIntervalReaction = buy_sell_store.registerAdvertIntervalReaction();
+
+        return () => {
+            disposeAdvertIntervalReaction();
+        };
+    }, []);
+
     if (isMobile()) {
         return (
             <Table.Row className='advertiser-page-adverts__table-row'>

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

@@ -5,7 +5,7 @@ import { useP2PAdvertiserAdverts } from 'Hooks';
 import { useHistory, useLocation } from 'react-router-dom';
 import { DesktopWrapper, Loading, MobileWrapper, Text } from '@deriv/components';
 import { useP2PAdvertInfo } from '@deriv/hooks';
-import { daysSince, isEmptyObject, isMobile, routes } from '@deriv/shared';
+import { daysSince, isDesktop, isEmptyObject, isMobile, routes } from '@deriv/shared';
 import { observer } from '@deriv/stores';
 
 import { Localize, localize } from 'Components/i18next';
@@ -73,11 +73,11 @@ const AdvertiserPage = () => {
     // rating_average_decimal converts rating_average to 1 d.p number
     const rating_average_decimal = rating_average ? Number(rating_average).toFixed(1) : null;
 
-    const { data: p2p_advert_info } = useP2PAdvertInfo(counterparty_advert_id);
+    const { data: p2p_advert_info, isLoading, isSubscribed } = useP2PAdvertInfo(counterparty_advert_id);
 
     const showErrorModal = eligibility_status => {
         let error_message = localize("It's either deleted or no longer active.");
-        let error_modal_title = localize('This ad is unavailable');
+        let error_modal_title = localize('This ad is currently unavailable');
 
         if (eligibility_status?.length > 0) {
             error_modal_title = '';
@@ -101,8 +101,8 @@ const AdvertiserPage = () => {
 
     const setShowAdvertInfo = React.useCallback(
         () => {
-            if (p2p_advert_info) {
-                const { eligibility_status, is_active, is_buy, is_eligible, is_visible } = p2p_advert_info || {};
+            const { eligibility_status, is_active, is_buy, is_eligible, is_visible } = p2p_advert_info || {};
+            if (isSubscribed && p2p_advert_info) {
                 const advert_type = is_buy ? 1 : 0;
 
                 if (is_active && is_visible && is_eligible) {
@@ -113,16 +113,31 @@ const AdvertiserPage = () => {
                 } else {
                     showErrorModal(eligibility_status);
                 }
+            } else {
+                showErrorModal();
             }
         },
 
         // eslint-disable-next-line react-hooks/exhaustive-deps
-        [p2p_advert_info]
+        [isSubscribed, p2p_advert_info]
     );
 
     React.useEffect(() => {
-        if (is_advertiser && !is_barred && is_my_advert !== null && !is_my_advert) setShowAdvertInfo();
-    }, [counterparty_advert_id, setShowAdvertInfo, is_my_advert]);
+        if (is_advertiser && !is_barred && is_my_advert !== null && !is_my_advert) {
+            if (isLoading && isDesktop()) {
+                showModal({ key: 'LoadingModal' });
+            } else if (counterparty_advert_id) {
+                setShowAdvertInfo();
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [counterparty_advert_id, isLoading, setShowAdvertInfo, is_my_advert]);
+
+    // Update the selected advert state when the advert info is updated through subscription.
+    React.useEffect(() => {
+        if (p2p_advert_info) buy_sell_store.setSelectedAdState(p2p_advert_info);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [p2p_advert_info]);
 
     React.useEffect(() => {
         if (location.search || counterparty_advertiser_id) {
@@ -200,6 +215,7 @@ const AdvertiserPage = () => {
             disposeBlockUnblockUserErrorReaction();
             advertiser_page_store.onUnmount();
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [advertiser_details_name, counterparty_advertiser_info]);
 
     useRegisterModalProps({