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

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 (
 		<WeeklyHighlightCards
 			className="has-odyssey-stats-bg-color"
@@ -67,6 +84,8 @@ export default function HighlightsSection( {
 			onClickVisitors={ () => null }
 			onTogglePeriod={ onUpdatePeriod }
 			currentPeriod={ currentPeriod }
+			showSettingsTooltip={ !! showSettingsTooltip && ! settingsTooltipDismissed }
+			onSettingsTooltipDismiss={ dismissSettingsTooltip }
 		/>
 	);
 }

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
+	} );
+}

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
+	} );
+}

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 (
 		<div className="highlight-cards-heading__settings">
@@ -89,21 +83,15 @@ const HighlightCardsSettings = function ( {
 			</button>
 			<Popover
 				className="tooltip tooltip--darker highlight-card-tooltip highlight-card__settings-tooltip"
-				isVisible={ isSettingsTooltipVisible }
+				isVisible={ showTooltip }
 				position="bottom left"
 				context={ settingsActionRef.current }
 			>
 				<div className="highlight-card-tooltip-content">
 					<p>
 						{ translate( 'You can now tailor your site highlights by adjusting the time range.' ) }
 					</p>
-					<button
-						onClick={ () => {
-							dismissSettingsTooltip();
-						} }
-					>
-						{ translate( 'Got it' ) }
-					</button>
+					<button onClick={ onTooltipDismiss }>{ translate( 'Got it' ) }</button>
 				</div>
 			</Popover>
 			<Popover
@@ -145,6 +133,8 @@ export default function WeeklyHighlightCards( {
 	previousCounts,
 	showValueTooltip,
 	currentPeriod,
+	onSettingsTooltipDismiss,
+	showSettingsTooltip,
 }: WeeklyHighlightCardsProps ) {
 	const translate = useTranslate();
 
@@ -219,6 +209,8 @@ export default function WeeklyHighlightCards( {
 					<HighlightCardsSettings
 						currentPeriod={ currentPeriod }
 						onTogglePeriod={ onTogglePeriod }
+						onTooltipDismiss={ onSettingsTooltipDismiss }
+						showTooltip={ showSettingsTooltip }
 					/>
 				) }
 			</h3>