From defa590f3225bc2f88c134da8058e21ca182ff7a Mon Sep 17 00:00:00 2001
From: Fernando Marichal <fernando.marichal@automattic.com>
Date: Thu, 7 Dec 2023 12:40:12 -0300
Subject: [PATCH] Show feedback bar only once (#41787)

* Show feedback bar only once

* Add changelog

* Add isFeedbackBarHidden

* rename showFeedbackBarOnce

---------

Co-authored-by: Fernando Marichal <fernandomarichal@fernandos-mbp.lan>
---
 .../dev-39167_show_feedback_prompt_only_once  |  4 ++
 .../components/feedback-bar/feedback-bar.tsx  | 11 +++--
 .../use-feedback-bar/use-feedback-bar.ts      | 46 +++++++++----------
 3 files changed, 34 insertions(+), 27 deletions(-)
 create mode 100644 packages/js/product-editor/changelog/dev-39167_show_feedback_prompt_only_once

diff --git a/packages/js/product-editor/changelog/dev-39167_show_feedback_prompt_only_once b/packages/js/product-editor/changelog/dev-39167_show_feedback_prompt_only_once
new file mode 100644
index 00000000000..ac857c0c9a1
--- /dev/null
+++ b/packages/js/product-editor/changelog/dev-39167_show_feedback_prompt_only_once
@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Show feedback bar only once #41787
diff --git a/packages/js/product-editor/src/components/feedback-bar/feedback-bar.tsx b/packages/js/product-editor/src/components/feedback-bar/feedback-bar.tsx
index b0df0a092d6..3fd16aeb9e3 100644
--- a/packages/js/product-editor/src/components/feedback-bar/feedback-bar.tsx
+++ b/packages/js/product-editor/src/components/feedback-bar/feedback-bar.tsx
@@ -12,6 +12,7 @@ import {
 	createElement,
 	createInterpolateElement,
 	Fragment,
+	useState,
 } from '@wordpress/element';
 import { closeSmall } from '@wordpress/icons';
 import { Pill } from '@woocommerce/components';
@@ -30,9 +31,10 @@ export type FeedbackBarProps = {
 };
 
 export function FeedbackBar( { productType }: FeedbackBarProps ) {
-	const { hideFeedbackBar, shouldShowFeedbackBar } = useFeedbackBar();
+	const { shouldShowFeedbackBar } = useFeedbackBar();
 	const { showCesModal, showProductMVPFeedbackModal } =
 		useCustomerEffortScoreModal();
+	const [ isFeedbackBarHidden, setIsFeedbackBarHidden ] = useState( false );
 
 	const getProductTracksProps = () => {
 		const tracksProps = {
@@ -175,6 +177,7 @@ export function FeedbackBar( { productType }: FeedbackBarProps ) {
 				type: 'snackbar',
 			}
 		);
+		setIsFeedbackBarHidden( true );
 	};
 
 	const onTurnOffEditorClick = () => {
@@ -182,7 +185,7 @@ export function FeedbackBar( { productType }: FeedbackBarProps ) {
 			...getProductTracksProps(),
 		} );
 
-		hideFeedbackBar();
+		setIsFeedbackBarHidden( true );
 
 		showProductMVPFeedbackModal();
 	};
@@ -192,12 +195,12 @@ export function FeedbackBar( { productType }: FeedbackBarProps ) {
 			...getProductTracksProps(),
 		} );
 
-		hideFeedbackBar();
+		setIsFeedbackBarHidden( true );
 	};
 
 	return (
 		<>
-			{ shouldShowFeedbackBar && (
+			{ shouldShowFeedbackBar && ! isFeedbackBarHidden && (
 				<div className="woocommerce-product-mvp-ces-footer">
 					<Pill>Beta</Pill>
 					<div className="woocommerce-product-mvp-ces-footer__message">
diff --git a/packages/js/product-editor/src/hooks/use-feedback-bar/use-feedback-bar.ts b/packages/js/product-editor/src/hooks/use-feedback-bar/use-feedback-bar.ts
index 3048cc2af9d..e5b44fed321 100644
--- a/packages/js/product-editor/src/hooks/use-feedback-bar/use-feedback-bar.ts
+++ b/packages/js/product-editor/src/hooks/use-feedback-bar/use-feedback-bar.ts
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { resolveSelect, useDispatch, useSelect } from '@wordpress/data';
+import { resolveSelect, useDispatch } from '@wordpress/data';
+import { useEffect, useState, useCallback } from '@wordpress/element';
 import { OPTIONS_STORE_NAME } from '@woocommerce/data';
 
 /**
@@ -11,26 +12,8 @@ import { PRODUCT_EDITOR_SHOW_FEEDBACK_BAR_OPTION_NAME } from '../../constants';
 
 export const useFeedbackBar = () => {
 	const { updateOptions } = useDispatch( OPTIONS_STORE_NAME );
-
-	const { shouldShowFeedbackBar } = useSelect( ( select ) => {
-		const { getOption, hasFinishedResolution } =
-			select( OPTIONS_STORE_NAME );
-
-		const showFeedbackBarOption = getOption(
-			PRODUCT_EDITOR_SHOW_FEEDBACK_BAR_OPTION_NAME
-		) as string;
-
-		const resolving = ! hasFinishedResolution( 'getOption', [
-			PRODUCT_EDITOR_SHOW_FEEDBACK_BAR_OPTION_NAME,
-		] );
-
-		return {
-			shouldShowFeedbackBar:
-				! resolving &&
-				window.wcTracks?.isEnabled &&
-				showFeedbackBarOption === 'yes',
-		};
-	}, [] );
+	const [ shouldShowFeedbackBar, setShouldShowFeedbackBar ] =
+		useState( false );
 
 	const showFeedbackBar = () => {
 		updateOptions( {
@@ -58,15 +41,32 @@ export const useFeedbackBar = () => {
 		}
 	};
 
-	const hideFeedbackBar = () => {
+	const showFeedbackBarOnce = () => {
 		updateOptions( {
 			[ PRODUCT_EDITOR_SHOW_FEEDBACK_BAR_OPTION_NAME ]: 'no',
 		} );
+		setShouldShowFeedbackBar( true );
 	};
 
+	const fetchShowFeedbackBarOption = useCallback( () => {
+		return resolveSelect( OPTIONS_STORE_NAME )
+			.getOption< string >( PRODUCT_EDITOR_SHOW_FEEDBACK_BAR_OPTION_NAME )
+			.then( ( showFeedbackBarOption ) => {
+				if (
+					window.wcTracks?.isEnabled &&
+					showFeedbackBarOption === 'yes'
+				) {
+					showFeedbackBarOnce();
+				}
+			} );
+	}, [] );
+
+	useEffect( () => {
+		fetchShowFeedbackBarOption();
+	}, [] );
+
 	return {
 		shouldShowFeedbackBar,
 		maybeShowFeedbackBar,
-		hideFeedbackBar,
 	};
 };