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, }; };