Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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>
This commit is contained in:
Fernando Marichal 2023-12-07 12:40:12 -03:00 committed by GitHub
parent be79b9864e
commit defa590f32
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 34 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/js/product-editor/changelog/dev-39167_show_feedback_prompt_only_once Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: dev
Show feedback bar only once #41787

11
packages/js/product-editor/src/components/feedback-bar/feedback-bar.tsx
View File

@ -12,6 +12,7 @@ import {
createElement, createElement,
createInterpolateElement, createInterpolateElement,
Fragment, Fragment,
useState,
} from '@wordpress/element'; } from '@wordpress/element';
import { closeSmall } from '@wordpress/icons'; import { closeSmall } from '@wordpress/icons';
import { Pill } from '@woocommerce/components'; import { Pill } from '@woocommerce/components';
@ -30,9 +31,10 @@ export type FeedbackBarProps = {
}; };
export function FeedbackBar( { productType }: FeedbackBarProps ) { export function FeedbackBar( { productType }: FeedbackBarProps ) {
const { hideFeedbackBar, shouldShowFeedbackBar } = useFeedbackBar(); const { shouldShowFeedbackBar } = useFeedbackBar();
const { showCesModal, showProductMVPFeedbackModal } = const { showCesModal, showProductMVPFeedbackModal } =
useCustomerEffortScoreModal(); useCustomerEffortScoreModal();
const [ isFeedbackBarHidden, setIsFeedbackBarHidden ] = useState( false );
const getProductTracksProps = () => { const getProductTracksProps = () => {
const tracksProps = { const tracksProps = {
@ -175,6 +177,7 @@ export function FeedbackBar( { productType }: FeedbackBarProps ) {
type: 'snackbar', type: 'snackbar',
} }
); );
setIsFeedbackBarHidden( true );
}; };
const onTurnOffEditorClick = () => { const onTurnOffEditorClick = () => {
@ -182,7 +185,7 @@ export function FeedbackBar( { productType }: FeedbackBarProps ) {
...getProductTracksProps(), ...getProductTracksProps(),
} ); } );
hideFeedbackBar(); setIsFeedbackBarHidden( true );
showProductMVPFeedbackModal(); showProductMVPFeedbackModal();
}; };
@ -192,12 +195,12 @@ export function FeedbackBar( { productType }: FeedbackBarProps ) {
...getProductTracksProps(), ...getProductTracksProps(),
} ); } );
hideFeedbackBar(); setIsFeedbackBarHidden( true );
}; };
return ( return (
<> <>
{ shouldShowFeedbackBar && ( { shouldShowFeedbackBar && ! isFeedbackBarHidden && (
<div className="woocommerce-product-mvp-ces-footer"> <div className="woocommerce-product-mvp-ces-footer">
<Pill>Beta</Pill> <Pill>Beta</Pill>
<div className="woocommerce-product-mvp-ces-footer__message"> <div className="woocommerce-product-mvp-ces-footer__message">

46
packages/js/product-editor/src/hooks/use-feedback-bar/use-feedback-bar.ts
View File

@ -1,7 +1,8 @@
/** /**
* External dependencies * 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'; import { OPTIONS_STORE_NAME } from '@woocommerce/data';
/** /**
@ -11,26 +12,8 @@ import { PRODUCT_EDITOR_SHOW_FEEDBACK_BAR_OPTION_NAME } from '../../constants';
export const useFeedbackBar = () => { export const useFeedbackBar = () => {
const { updateOptions } = useDispatch( OPTIONS_STORE_NAME ); const { updateOptions } = useDispatch( OPTIONS_STORE_NAME );
const [ shouldShowFeedbackBar, setShouldShowFeedbackBar ] =
const { shouldShowFeedbackBar } = useSelect( ( select ) => { useState( false );
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 showFeedbackBar = () => { const showFeedbackBar = () => {
updateOptions( { updateOptions( {
@ -58,15 +41,32 @@ export const useFeedbackBar = () => {
} }
}; };
const hideFeedbackBar = () => { const showFeedbackBarOnce = () => {
updateOptions( { updateOptions( {
[ PRODUCT_EDITOR_SHOW_FEEDBACK_BAR_OPTION_NAME ]: 'no', [ 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 { return {
shouldShowFeedbackBar, shouldShowFeedbackBar,
maybeShowFeedbackBar, maybeShowFeedbackBar,
hideFeedbackBar,
}; };
}; };