Add a component state canCESPromptOpen in ProductFeed

Reason to change:

There was a bug

- Success modal is displayed, CES prompt is not shown
- Open a new tab to the product feed page, CES prompt is shown
- Go back to the original tab and dismiss the success modal, the CES
	prmopt is shown, which is what we don't want.

To solve it, moving `removeCESPromptFlagFromLocal` from
`onNoticeDismissed` and `onModalShown` to only `onNoticeShown` is not
enough, as it leads to another problem:

- Success modal is displayed, CES prompt is not shown
- Open a new tab to the product feed page, CES prompt is shown
- Click `Give feedback` but the CES modal is not displayed

This is because we change to remove the CES flag from local storage when
the CES prompt is shown. When it happens the ProductFeed will re-render
and the CES prmopt will not be rendered because the flag was removed.
Then clicking `Give feedback` won't render the modal.

To solve this we add a component state `canCESPromptOpen` in ProductFeed
component, rather than check the local storage flag directly. Then we
add the logic to update the `canCESPromptOpen` state only when its value
is false.

Author: ianlin

js/src/components/customer-effort-score-prompt/index.js

@@ -54,20 +54,19 @@ const CustomerEffortScorePrompt = ( { eventContext, label } ) => {
 	};
 
 	const onNoticeShown = () => {
+		removeCESPromptFlagFromLocal();
 		recordEvent( 'gla_ces_snackbar_open', {
 			context: eventContext,
 		} );
 	};
 
 	const onNoticeDismissed = () => {
-		removeCESPromptFlagFromLocal();
 		recordEvent( 'gla_ces_snackbar_closed', {
 			context: eventContext,
 		} );
 	};
 
 	const onModalShown = () => {
-		removeCESPromptFlagFromLocal();
 		recordEvent( 'gla_ces_modal_open', {
 			context: eventContext,
 		} );

js/src/product-feed/index.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { useState, useEffect } from '@wordpress/element';
 import { getQuery } from '@woocommerce/navigation';
 
 /**
@@ -22,26 +23,35 @@ import isWCTracksEnabled from '.~/utils/isWCTracksEnabled';
 
 const ProductFeed = () => {
 	const { hasFinishedResolution, data } = useProductFeedPrefetch();
+	const [ canCESPromptOpen, setCESPromptOpen ] = useState( false );
 
 	// Show submission success guide modal by visiting the path with a specific query `guide=submission-success`.
 	// For example: `/wp-admin/admin.php?page=wc-admin&path=%2Fgoogle%2Fproduct-feed&guide=submission-success`.
 	const isSubmissionSuccessOpen =
 		getQuery()?.guide === GUIDE_NAMES.SUBMISSION_SUCCESS;
 
-	const canCESPromptOpen = localStorage.get(
-		LOCAL_STORAGE_KEYS.CAN_ONBOARDING_SETUP_CES_PROMPT_OPEN
-	);
-
 	const wcTracksEnabled = isWCTracksEnabled();
 
-	const shouldOpenCESPrompt =
-		! isSubmissionSuccessOpen && canCESPromptOpen && wcTracksEnabled;
+	useEffect( () => {
+		if ( ! canCESPromptOpen ) {
+			const canCESPromptOpenLocal = localStorage.get(
+				LOCAL_STORAGE_KEYS.CAN_ONBOARDING_SETUP_CES_PROMPT_OPEN
+			);
+
+			const canOpen =
+				! isSubmissionSuccessOpen &&
+				canCESPromptOpenLocal &&
+				wcTracksEnabled;
+
+			setCESPromptOpen( canOpen );
+		}
+	}, [ isSubmissionSuccessOpen, canCESPromptOpen, wcTracksEnabled ] );
 
 	return (
 		<>
 			<NavigationClassic />
 			{ isSubmissionSuccessOpen && <SubmissionSuccessGuide /> }
-			{ shouldOpenCESPrompt && (
+			{ canCESPromptOpen && (
 				<CustomerEffortScorePrompt
 					label={ __(
 						'How easy was it to set up Google Listings & Ads?',

js/src/product-feed/index.test.js

@@ -87,7 +87,7 @@ describe( 'ProductFeed', () => {
 			).not.toBeInTheDocument();
 		} );
 
-		describe( 'And both canCESPromptOpen and wcTracksEnabled are false', () => {
+		describe( 'And both canCESPromptOpenLocal and wcTracksEnabled are false', () => {
 			beforeAll( () => {
 				localStorage.get.mockImplementation( () => {
 					return false;
@@ -110,7 +110,7 @@ describe( 'ProductFeed', () => {
 			} );
 		} );
 
-		describe( 'And canCESPromptOpen is true but wcTracksEnabled is false', () => {
+		describe( 'And canCESPromptOpenLocal is true but wcTracksEnabled is false', () => {
 			beforeAll( () => {
 				localStorage.get.mockImplementation( () => {
 					return true;
@@ -133,7 +133,7 @@ describe( 'ProductFeed', () => {
 			} );
 		} );
 
-		describe( 'And wcTracksEnabled is true but canCESPromptOpen is false', () => {
+		describe( 'And wcTracksEnabled is true but canCESPromptOpenLocal is false', () => {
 			beforeAll( () => {
 				localStorage.get.mockImplementation( () => {
 					return false;
@@ -156,7 +156,7 @@ describe( 'ProductFeed', () => {
 			} );
 		} );
 
-		describe( 'And both canCESPromptOpen and wcTracksEnabled are true', () => {
+		describe( 'And both canCESPromptOpenLocal and wcTracksEnabled are true', () => {
 			beforeAll( () => {
 				localStorage.get.mockImplementation( () => {
 					return true;