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 && (
Beta
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,
};
};