From 94644cd2016f64742043944b01489387c67348e1 Mon Sep 17 00:00:00 2001 From: Ameerul Hady <103412909+ameerul-deriv@users.noreply.github.com> Date: Mon, 24 Jun 2024 14:56:02 +0800 Subject: [PATCH] [P2PS] / Ameerul / P2PS-2970 Share My Ads - 'This ad is currently unavailable' 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 | 2 +- .../__tests__/advertiser-page.spec.tsx | 1 + .../advertiser-page/advertiser-page-row.jsx | 8 +++++ .../pages/advertiser-page/advertiser-page.jsx | 32 ++++++++++++++----- 4 files changed, 34 insertions(+), 9 deletions(-) diff --git a/packages/hooks/src/useP2PAdvertInfo.ts b/packages/hooks/src/useP2PAdvertInfo.ts index a793d3bf359d..7c0f18e6b4c1 100644 --- a/packages/hooks/src/useP2PAdvertInfo.ts +++ b/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]); diff --git a/packages/p2p/src/pages/advertiser-page/__tests__/advertiser-page.spec.tsx b/packages/p2p/src/pages/advertiser-page/__tests__/advertiser-page.spec.tsx index 1e79245ce618..aa0092bff703 100644 --- a/packages/p2p/src/pages/advertiser-page/__tests__/advertiser-page.spec.tsx +++ b/packages/p2p/src/pages/advertiser-page/__tests__/advertiser-page.spec.tsx @@ -64,6 +64,7 @@ const mock_store: DeepPartial> = { buy_sell_store: { show_advertiser_page: true, hideAdvertiserPage: jest.fn(), + setSelectedAdState: jest.fn(), setShowAdvertiserPage: jest.fn(), }, my_profile_store: { diff --git a/packages/p2p/src/pages/advertiser-page/advertiser-page-row.jsx b/packages/p2p/src/pages/advertiser-page/advertiser-page-row.jsx index 10570de25291..ed1b6b0c7589 100644 --- a/packages/p2p/src/pages/advertiser-page/advertiser-page-row.jsx +++ b/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 ( diff --git a/packages/p2p/src/pages/advertiser-page/advertiser-page.jsx b/packages/p2p/src/pages/advertiser-page/advertiser-page.jsx index cfc99a1d4420..0e04d5ed9627 100755 --- a/packages/p2p/src/pages/advertiser-page/advertiser-page.jsx +++ b/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({