From 5326449316fe361bafc5e35530ffaf9bca647a79 Mon Sep 17 00:00:00 2001 From: Jasper Kang Date: Wed, 7 Jun 2023 19:04:01 +1200 Subject: [PATCH] Stats: Persist highlights setting notice status (#77867) * persist highlights setting notice status * add use mutation * add retry * use the correct notice id traffic_page_highlights_module_settings * add Status and Notice types * postponed_for needs to be a number --- .../stats/highlights-section/index.tsx | 21 ++++++++++- .../hooks/use-notice-visibility-mutation.ts | 36 +++++++++++++++++++ .../hooks/use-notice-visibility-query.ts | 29 +++++++++++++++ .../weekly-highlight-cards.tsx | 36 ++++++++----------- 4 files changed, 99 insertions(+), 23 deletions(-) create mode 100644 client/my-sites/stats/hooks/use-notice-visibility-mutation.ts create mode 100644 client/my-sites/stats/hooks/use-notice-visibility-query.ts diff --git a/client/my-sites/stats/highlights-section/index.tsx b/client/my-sites/stats/highlights-section/index.tsx index fcb257df5d88f4..e899343d2c5202 100644 --- a/client/my-sites/stats/highlights-section/index.tsx +++ b/client/my-sites/stats/highlights-section/index.tsx @@ -4,7 +4,9 @@ import { BETWEEN_PAST_EIGHT_AND_FIFTEEN_DAYS, BETWEEN_PAST_THIRTY_ONE_AND_SIXTY_DAYS, } from '@automattic/components'; -import { useEffect, useMemo } from 'react'; +import { useEffect, useMemo, useState } from 'react'; +import useNoticeVisibilityMutation from 'calypso/my-sites/stats/hooks/use-notice-visibility-mutation'; +import useNoticeVisibilityQuery from 'calypso/my-sites/stats/hooks/use-notice-visibility-query'; import { useDispatch, useSelector } from 'calypso/state'; import { requestHighlights } from 'calypso/state/stats/highlights/actions'; import { getHighlights } from 'calypso/state/stats/highlights/selectors'; @@ -55,6 +57,21 @@ export default function HighlightsSection( { }; }, [ highlights, currentPeriod ] ); + const { data: showSettingsTooltip, refetch: refetchNotices } = useNoticeVisibilityQuery( + siteId, + 'traffic_page_highlights_module_settings' + ); + const { mutateAsync: mutateNoticeVisbilityAsync } = useNoticeVisibilityMutation( + siteId, + 'traffic_page_highlights_module_settings' + ); + const [ settingsTooltipDismissed, setSettingsTooltipDismissed ] = useState( false ); + + const dismissSettingsTooltip = () => { + setSettingsTooltipDismissed( true ); + return mutateNoticeVisbilityAsync().finally( refetchNotices ); + }; + return ( null } onTogglePeriod={ onUpdatePeriod } currentPeriod={ currentPeriod } + showSettingsTooltip={ !! showSettingsTooltip && ! settingsTooltipDismissed } + onSettingsTooltipDismiss={ dismissSettingsTooltip } /> ); } diff --git a/client/my-sites/stats/hooks/use-notice-visibility-mutation.ts b/client/my-sites/stats/hooks/use-notice-visibility-mutation.ts new file mode 100644 index 00000000000000..947bbf54fbf762 --- /dev/null +++ b/client/my-sites/stats/hooks/use-notice-visibility-mutation.ts @@ -0,0 +1,36 @@ +import { useMutation } from '@tanstack/react-query'; +import wpcom from 'calypso/lib/wp'; +import { Notices } from './use-notice-visibility-query'; + +type Status = 'dismissed' | 'postponed'; + +export function dismissNotice( + siteId: number | null, + noticeId: keyof Notices, + status: Status, + postponedFor = 0 +): Promise< any > { + return wpcom.req.post( { + apiNamespace: 'wpcom/v2', + path: `/sites/${ siteId }/jetpack-stats-dashboard/notices`, + body: { + id: noticeId, + status: status, + postponed_for: postponedFor, + }, + } ); +} + +export default function useNoticeVisibilityMutation( + siteId: number | null, + noticeId: keyof Notices, + status: Status = 'dismissed', + postponedFor = 0 +) { + return useMutation( { + mutationKey: [ 'stats', 'notices-visibility', siteId, noticeId ], + mutationFn: () => dismissNotice( siteId, noticeId, status, postponedFor ), + retry: 1, + retryDelay: 3 * 1000, // 3 seconds + } ); +} diff --git a/client/my-sites/stats/hooks/use-notice-visibility-query.ts b/client/my-sites/stats/hooks/use-notice-visibility-query.ts new file mode 100644 index 00000000000000..0eec79bc06a3cc --- /dev/null +++ b/client/my-sites/stats/hooks/use-notice-visibility-query.ts @@ -0,0 +1,29 @@ +import { useQuery } from '@tanstack/react-query'; +import wpcom from 'calypso/lib/wp'; + +export type Notices = { + new_stats_feedback: boolean; + opt_in_new_stats: boolean; + opt_out_new_stats: boolean; + traffic_page_highlights_module_settings: boolean; + traffic_page_settings: boolean; +}; + +export function queryNotices( siteId: number | null ): Promise< Notices > { + return wpcom.req.get( { + method: 'GET', + apiNamespace: 'wpcom/v2', + path: `/sites/${ siteId }/jetpack-stats-dashboard/notices`, + } ); +} + +export default function useNoticeVisibilityQuery( siteId: number | null, noticeId: string ) { + return useQuery( { + queryKey: [ 'stats', 'notices-visibility', siteId ], + queryFn: () => queryNotices( siteId ), + select: ( payload: Record< string, boolean > ): boolean => !! payload?.[ noticeId ], + staleTime: 1000 * 60 * 1, // 1 minutes + retry: 1, + retryDelay: 3 * 1000, // 3 seconds + } ); +} diff --git a/packages/components/src/highlight-cards/weekly-highlight-cards.tsx b/packages/components/src/highlight-cards/weekly-highlight-cards.tsx index 5778b5c00f90b1..4440b4d667a0ac 100644 --- a/packages/components/src/highlight-cards/weekly-highlight-cards.tsx +++ b/packages/components/src/highlight-cards/weekly-highlight-cards.tsx @@ -38,11 +38,15 @@ type WeeklyHighlightCardsProps = { onClickVisitors: ( event: MouseEvent ) => void; onTogglePeriod: ( period: string ) => void; currentPeriod: string; + onSettingsTooltipDismiss: () => void; + showSettingsTooltip: boolean; }; type HighlightCardsSettingsProps = { onTogglePeriod: ( period: string ) => void; currentPeriod: string; + onTooltipDismiss: () => void; + showTooltip: boolean; }; export const PAST_SEVEN_DAYS = 'past_seven_days'; @@ -53,30 +57,20 @@ export const BETWEEN_PAST_THIRTY_ONE_AND_SIXTY_DAYS = 'between_past_thirty_one_a const HighlightCardsSettings = function ( { currentPeriod, onTogglePeriod, + onTooltipDismiss, + showTooltip = false, }: HighlightCardsSettingsProps ) { const translate = useTranslate(); - // @TODO: Fetch the state from API to determine whether showing the settings tooltip. - const showSettingsTooltip = - sessionStorage.getItem( 'jp-stats-hide-traffic-highlights-tooltip' ) === '1' ? false : true; - const settingsActionRef = useRef( null ); - const [ isSettingsTooltipVisible, setSettingsTooltipVisible ] = useState( showSettingsTooltip ); const [ isPopoverVisible, setPopoverVisible ] = useState( false ); - // @TODO: Update the state to the API endpoint when users dismiss the settings tooltip. - const dismissSettingsTooltip = useCallback( () => { - sessionStorage.setItem( 'jp-stats-hide-traffic-highlights-tooltip', '1' ); - setSettingsTooltipVisible( false ); - }, [] ); - - // @TODO: Set the popover to disappear when the users click outside of the popover. const togglePopoverMenu = useCallback( () => { - dismissSettingsTooltip(); + onTooltipDismiss(); setPopoverVisible( ( isVisible ) => { return ! isVisible; } ); - }, [ dismissSettingsTooltip ] ); + }, [ onTooltipDismiss ] ); return (
@@ -89,7 +83,7 @@ const HighlightCardsSettings = function ( { @@ -97,13 +91,7 @@ const HighlightCardsSettings = function ( {

{ translate( 'You can now tailor your site highlights by adjusting the time range.' ) }

- +
) }