Send cookies with red bubble request so backend can check for dismissal cookies

Author: CodeyGuyDylan

projects/packages/my-jetpack/_inc/components/my-jetpack-screen/index.jsx

@@ -25,11 +25,10 @@ import {
 	REST_API_CHAT_AVAILABILITY_ENDPOINT,
 	QUERY_CHAT_AVAILABILITY_KEY,
 	QUERY_CHAT_AUTHENTICATION_KEY,
-	QUERY_RED_BUBBLE_ALERTS_KEY,
-	REST_API_RED_BUBBLE_ALERTS,
 } from '../../data/constants';
 import useEvaluationRecommendations from '../../data/evaluation-recommendations/use-evaluation-recommendations';
 import useUpdateHistoricallyActiveModules from '../../data/products/use-update-historically-active-modules';
+import useRedBubbleQuery from '../../data/use-red-bubble-query';
 import useSimpleQuery from '../../data/use-simple-query';
 import { getMyJetpackWindowInitialState } from '../../data/utils/get-my-jetpack-window-state';
 import onKeyDownCallback from '../../data/utils/onKeyDownCallback';
@@ -120,10 +119,7 @@ export default function MyJetpackScreen() {
 		data: redBubbleAlerts,
 		isLoading: isRedBubbleAlertsLoading,
 		isError: isRedBubbleAlertsError,
-	} = useSimpleQuery( {
-		name: QUERY_RED_BUBBLE_ALERTS_KEY,
-		query: { path: REST_API_RED_BUBBLE_ALERTS },
-	} );
+	} = useRedBubbleQuery();
 
 	const updateHistoricallyActiveModules = useUpdateHistoricallyActiveModules();
 

projects/packages/my-jetpack/_inc/data/use-red-bubble-query.ts

@@ -0,0 +1,26 @@
+import { QUERY_RED_BUBBLE_ALERTS_KEY, REST_API_RED_BUBBLE_ALERTS } from './constants';
+import useSimpleQuery from './use-simple-query';
+
+const useRedBubbleQuery = () => {
+	const dismissalCookies = document.cookie
+		.split( ';' )
+		.map( cookie => cookie.trim() )
+		.filter( cookie => cookie.includes( '_dismissed' ) );
+
+	const { data, isLoading, isError } = useSimpleQuery< RedBubbleAlerts >( {
+		name: QUERY_RED_BUBBLE_ALERTS_KEY,
+		query: {
+			path: REST_API_RED_BUBBLE_ALERTS,
+			method: 'POST',
+			data: { dismissal_cookies: dismissalCookies },
+		},
+	} );
+
+	return {
+		data,
+		isLoading,
+		isError,
+	};
+};
+
+export default useRedBubbleQuery;

projects/packages/my-jetpack/_inc/data/welcome-banner/use-welcome-banner.ts

@@ -4,20 +4,16 @@ import { useValueStore } from '../../context/value-store/valueStoreContext';
 import {
 	QUERY_DISMISS_WELCOME_BANNER_KEY,
 	REST_API_SITE_DISMISS_BANNER,
-	QUERY_RED_BUBBLE_ALERTS_KEY,
-	REST_API_RED_BUBBLE_ALERTS,
 } from '../../data/constants';
+import useRedBubbleQuery from '../use-red-bubble-query';
 import useSimpleMutation from '../use-simple-mutation';
-import useSimpleQuery from '../use-simple-query';
+
 const useWelcomeBanner = () => {
 	const {
 		data: redBubbleAlerts,
 		isLoading: isRedBubbleAlertsLoading,
 		isError: isRedBubbleAlertsError,
-	} = useSimpleQuery( {
-		name: QUERY_RED_BUBBLE_ALERTS_KEY,
-		query: { path: REST_API_RED_BUBBLE_ALERTS },
-	} );
+	} = useRedBubbleQuery();
 
 	const redBubbleAlertKeys = useMemo( () => {
 		if ( isRedBubbleAlertsError || isRedBubbleAlertsLoading ) {

projects/packages/my-jetpack/_inc/hooks/use-notification-watcher/index.ts

@@ -1,5 +1,4 @@
-import { QUERY_RED_BUBBLE_ALERTS_KEY, REST_API_RED_BUBBLE_ALERTS } from '../../data/constants';
-import useSimpleQuery from '../../data/use-simple-query';
+import useRedBubbleQuery from '../../data/use-red-bubble-query';
 import useBackupNeedsAttentionNotice from './use-backup-needs-attention-notice';
 import useBadInstallNotice from './use-bad-install-notice';
 import useConnectionErrorsNotice from './use-connection-errors-notice';
@@ -9,10 +8,7 @@ import useProtectThreatsDetectedNotice from './use-protect-threats-detected-noti
 import useSiteConnectionNotice from './use-site-connection-notice';
 
 const useNotificationWatcher = () => {
-	const { data: redBubbleAlerts, isLoading } = useSimpleQuery< RedBubbleAlerts >( {
-		name: QUERY_RED_BUBBLE_ALERTS_KEY,
-		query: { path: REST_API_RED_BUBBLE_ALERTS },
-	} );
+	const { isLoading, data: redBubbleAlerts } = useRedBubbleQuery();
 
 	usePaidPlanNeedsPluginInstallActivationNotice( redBubbleAlerts, isLoading );
 	useProtectThreatsDetectedNotice( redBubbleAlerts, isLoading );

projects/packages/my-jetpack/_inc/hooks/use-notification-watcher/use-backup-needs-attention-notice.tsx

@@ -5,8 +5,7 @@ import { useContext, useEffect, useCallback } from 'react';
 import { NOTICE_PRIORITY_HIGH } from '../../context/constants';
 import { NoticeContext } from '../../context/notices/noticeContext';
 import { applyTimezone } from '../../utils/apply-timezone';
-import checkForCookie from '../../utils/cookies/check-for-cookie';
-import createCookie from '../../utils/cookies/create-cookie';
+import createCookie from '../../utils/create-cookie';
 import preventWidows from '../../utils/prevent-widows';
 import useAnalytics from '../use-analytics';
 import { useGetReadableFailedBackupReason } from './use-get-readable-failed-backup-reason';
@@ -108,7 +107,7 @@ const useBackupNeedsAttentionNotice: NoticeHookType = ( redBubbleAlerts, isLoadi
 			priority: NOTICE_PRIORITY_HIGH,
 		};
 
-		if ( ! isLoading && ! checkForCookie( 'backup_failure_dismissed' ) ) {
+		if ( ! isLoading ) {
 			setNotice( {
 				title: noticeTitle,
 				message: noticeMessage,

projects/packages/my-jetpack/_inc/hooks/use-notification-watcher/use-expiring-plans-notice.tsx

@@ -2,8 +2,7 @@ import { __ } from '@wordpress/i18n';
 import { useContext, useEffect, useCallback, useMemo } from 'react';
 import { NOTICE_PRIORITY_MEDIUM } from '../../context/constants';
 import { NoticeContext } from '../../context/notices/noticeContext';
-import checkForCookie from '../../utils/cookies/check-for-cookie';
-import createCookie from '../../utils/cookies/create-cookie';
+import createCookie from '../../utils/create-cookie';
 import useAnalytics from '../use-analytics';
 import { useGetExpiringNoticeContent } from './use-get-expiring-notice-content';
 import type { NoticeHookType } from './types';
@@ -114,7 +113,7 @@ const useExpiringPlansNotice: NoticeHookType = ( redBubbleAlerts, isLoading ) =>
 			priority: NOTICE_PRIORITY_MEDIUM,
 		};
 
-		if ( ! isLoading && ! checkForCookie( `${ cookieKey }_dismissed` ) ) {
+		if ( ! isLoading ) {
 			setNotice( {
 				title: noticeTitle,
 				message: noticeMessage,

projects/packages/my-jetpack/_inc/hooks/use-notification-watcher/use-get-readable-failed-backup-reason.tsx

@@ -1,7 +1,6 @@
 import { __, sprintf } from '@wordpress/i18n';
 import { useMemo, type ReactElement } from 'react';
-import { QUERY_RED_BUBBLE_ALERTS_KEY, REST_API_RED_BUBBLE_ALERTS } from '../../data/constants';
-import useSimpleQuery from '../../data/use-simple-query';
+import useRedBubbleQuery from '../../data/use-red-bubble-query';
 
 export type ReasonContent = {
 	reasonContent: {
@@ -17,11 +16,7 @@ export type ReasonContent = {
  * @return {ReasonContent} An object containing each tooltip's title and text content.
  */
 export function useGetReadableFailedBackupReason(): ReasonContent {
-	const { data: redBubbleAlerts, isLoading: isRedBubbleAlertsLoading } =
-		useSimpleQuery< RedBubbleAlerts >( {
-			name: QUERY_RED_BUBBLE_ALERTS_KEY,
-			query: { path: REST_API_RED_BUBBLE_ALERTS },
-		} );
+	const { data: redBubbleAlerts, isLoading: isRedBubbleAlertsLoading } = useRedBubbleQuery();
 
 	const { backup_failure: backupFailure } = redBubbleAlerts || {};
 	const {

projects/packages/my-jetpack/_inc/hooks/use-notification-watcher/use-paid-plan-needs-plugin-install-activation-notice.tsx

@@ -10,8 +10,7 @@ import useInstallPlugins from '../../data/products/use-install-plugins';
 import useSimpleQuery from '../../data/use-simple-query';
 import { getMyJetpackWindowInitialState } from '../../data/utils/get-my-jetpack-window-state';
 import useMyJetpackConnection from '../../hooks/use-my-jetpack-connection';
-import checkForCookie from '../../utils/cookies/check-for-cookie';
-import createCookie from '../../utils/cookies/create-cookie';
+import createCookie from '../../utils/create-cookie';
 import useAnalytics from '../use-analytics';
 import { useGetPaidPlanNeedsPluginsContent } from './get-paid-plan-needs-plugins-content';
 import type { NoticeHookType } from './types';
@@ -289,7 +288,7 @@ const usePaidPlanNeedsPluginInstallActivationNotice: NoticeHookType = (
 			priority: NOTICE_PRIORITY_MEDIUM + ( isInstallingOrActivating ? 1 : 0 ),
 		};
 
-		if ( ! isLoading && ! checkForCookie( `${ planSlug }--plugins_needing_installed_dismissed` ) ) {
+		if ( ! isLoading ) {
 			setNotice( {
 				title: noticeTitle,
 				message: noticeContent,

projects/packages/my-jetpack/_inc/hooks/use-notification-watcher/use-protect-threats-detected-notice.tsx

@@ -4,8 +4,7 @@ import { useContext, useEffect, useCallback } from 'react';
 import { NOTICE_PRIORITY_MEDIUM } from '../../context/constants';
 import { NoticeContext } from '../../context/notices/noticeContext';
 import useProduct from '../../data/products/use-product';
-import checkForCookie from '../../utils/cookies/check-for-cookie';
-import createCookie from '../../utils/cookies/create-cookie';
+import createCookie from '../../utils/create-cookie';
 import preventWidows from '../../utils/prevent-widows';
 import useAnalytics from '../use-analytics';
 import type { NoticeHookType } from './types';
@@ -115,7 +114,7 @@ const useProtectThreatsDetectedNotice: NoticeHookType = ( redBubbleAlerts, isLoa
 			priority: NOTICE_PRIORITY_MEDIUM,
 		};
 
-		if ( ! isLoading && ! checkForCookie( 'protect_threats_detected_dismissed' ) ) {
+		if ( ! isLoading ) {
 			setNotice( {
 				title: noticeTitle,
 				message: noticeMessage,

projects/packages/my-jetpack/_inc/utils/cookies/check-for-cookie.ts

@@ -10,6 +10,7 @@
 use Automattic\Jetpack\Connection\Manager as Connection_Manager;
 use Jetpack_Options;
 use WP_Error;
+use WP_REST_Request;
 use WP_REST_Response;
 
 /**
@@ -30,9 +31,22 @@ public static function register_rest_endpoints() {
 			'my-jetpack/v1',
 			'red-bubble-notifications',
 			array(
-				'methods'             => \WP_REST_Server::READABLE,
+				'methods'             => \WP_REST_Server::CREATABLE,
 				'callback'            => __CLASS__ . '::rest_api_get_red_bubble_alerts',
 				'permission_callback' => __CLASS__ . '::permissions_callback',
+				'args'                => array(
+					'dismissal_cookies' => array(
+						'type'              => 'array',
+						'description'       => 'Array of dismissal cookies to set for the red bubble notifications.',
+						'required'          => false,
+						'items'             => array(
+							'type' => 'string',
+						),
+						'sanitize_callback' => function ( $param ) {
+							return array_map( 'sanitize_text_field', $param );
+						},
+					),
+				),
 			)
 		);
 	}
@@ -357,13 +371,30 @@ public static function get_red_bubble_alerts( bool $bypass_cache = false ) {
 	/**
 	 * Get the red bubble alerts, bypassing cache when called via the REST API
 	 *
+	 * @param WP_REST_Request $request The REST API request object.
+	 *
 	 * @return WP_Error|WP_REST_Response
 	 */
-	public static function rest_api_get_red_bubble_alerts() {
+	public static function rest_api_get_red_bubble_alerts( $request ) {
 		// Initialize products to ensure all products data is available during REST API call.
 		Products::initialize_products();
 		add_filter( 'my_jetpack_red_bubble_notification_slugs', array( __CLASS__, 'add_red_bubble_alerts' ) );
 
+		$cookies = $request->get_param( 'dismissal_cookies' );
+
+		// Update $_COOKIE superglobal with the provided cookies
+		if ( ! empty( $cookies ) && is_array( $cookies ) ) {
+			foreach ( $cookies as $cookie_string ) {
+				// Parse cookie string in format "name=value"
+				$parts = explode( '=', $cookie_string, 2 );
+				if ( count( $parts ) === 2 ) {
+					$name             = trim( $parts[0] );
+					$value            = trim( $parts[1] );
+					$_COOKIE[ $name ] = $value;
+				}
+			}
+		}
+
 		$red_bubble_alerts = self::get_red_bubble_alerts( true );
 		return rest_ensure_response( $red_bubble_alerts );
 	}