Remove "Feeling Stuck" tooltip (#40397)
* Remove "Feeling Stuck" tooltip * Add changelog
This commit is contained in:
parent
2ed9eadaeb
commit
ec61afd387
|
@ -46,7 +46,6 @@ import { getUrlParams } from '~/utils';
|
||||||
import { useActiveSetupTasklist } from '~/task-lists';
|
import { useActiveSetupTasklist } from '~/task-lists';
|
||||||
import { getSegmentsFromPath } from '~/utils/url-helpers';
|
import { getSegmentsFromPath } from '~/utils/url-helpers';
|
||||||
import { FeedbackIcon } from '~/products/images/feedback-icon';
|
import { FeedbackIcon } from '~/products/images/feedback-icon';
|
||||||
import { ProductFeedbackTour } from '~/guided-tours/add-product-feedback-tour';
|
|
||||||
|
|
||||||
const HelpPanel = lazy( () =>
|
const HelpPanel = lazy( () =>
|
||||||
import( /* webpackChunkName: "activity-panels-help" */ './panels/help' )
|
import( /* webpackChunkName: "activity-panels-help" */ './panels/help' )
|
||||||
|
@ -482,9 +481,6 @@ export const ActivityPanel = ( { isEmbedded, query } ) => {
|
||||||
clearPanel={ () => clearPanel() }
|
clearPanel={ () => clearPanel() }
|
||||||
/>
|
/>
|
||||||
</Section>
|
</Section>
|
||||||
{ isAddProductPage() && (
|
|
||||||
<ProductFeedbackTour currentTab={ currentTab } />
|
|
||||||
) }
|
|
||||||
{ showHelpHighlightTooltip ? (
|
{ showHelpHighlightTooltip ? (
|
||||||
<HighlightTooltip
|
<HighlightTooltip
|
||||||
delay={ 1000 }
|
delay={ 1000 }
|
||||||
|
|
|
@ -1,114 +0,0 @@
|
||||||
/**
|
|
||||||
* External dependencies
|
|
||||||
*/
|
|
||||||
import { TourKit } from '@woocommerce/components';
|
|
||||||
import { __ } from '@wordpress/i18n';
|
|
||||||
import { OPTIONS_STORE_NAME } from '@woocommerce/data';
|
|
||||||
import { useState, useEffect, useRef } from '@wordpress/element';
|
|
||||||
import { useSelect, useDispatch } from '@wordpress/data';
|
|
||||||
|
|
||||||
const FEEDBACK_TOUR_OPTION = 'woocommerce_ces_product_feedback_shown';
|
|
||||||
const FEEDBACK_TIMEOUT_MS = 7 * 60 * 1000;
|
|
||||||
|
|
||||||
const useShowProductFeedbackTour = (): undefined | boolean => {
|
|
||||||
const { hasShownTour } = useSelect( ( select ) => {
|
|
||||||
const { getOption } = select( OPTIONS_STORE_NAME );
|
|
||||||
|
|
||||||
return {
|
|
||||||
hasShownTour: getOption( FEEDBACK_TOUR_OPTION ) as
|
|
||||||
| boolean
|
|
||||||
| undefined,
|
|
||||||
};
|
|
||||||
} );
|
|
||||||
|
|
||||||
return hasShownTour;
|
|
||||||
};
|
|
||||||
|
|
||||||
type ProductFeedbackTourProps = {
|
|
||||||
currentTab: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const ProductFeedbackTour: React.FC< ProductFeedbackTourProps > = ( {
|
|
||||||
currentTab,
|
|
||||||
} ) => {
|
|
||||||
const hasShownTour = useShowProductFeedbackTour();
|
|
||||||
const [ isTourVisible, setIsTourVisible ] = useState( false );
|
|
||||||
const tourTimeout = useRef< ReturnType< typeof setTimeout > | null >(
|
|
||||||
null
|
|
||||||
);
|
|
||||||
const { updateOptions } = useDispatch( OPTIONS_STORE_NAME );
|
|
||||||
|
|
||||||
const clearTourTimeout = () => {
|
|
||||||
clearTimeout( tourTimeout.current as ReturnType< typeof setTimeout > );
|
|
||||||
tourTimeout.current = null;
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect( () => {
|
|
||||||
if ( hasShownTour !== false ) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
tourTimeout.current = setTimeout( () => {
|
|
||||||
setIsTourVisible( true );
|
|
||||||
}, FEEDBACK_TIMEOUT_MS );
|
|
||||||
|
|
||||||
return () => clearTourTimeout();
|
|
||||||
}, [ hasShownTour ] );
|
|
||||||
|
|
||||||
useEffect( () => {
|
|
||||||
if ( ! isTourVisible ) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
updateOptions( {
|
|
||||||
[ FEEDBACK_TOUR_OPTION ]: true,
|
|
||||||
} );
|
|
||||||
}, [ isTourVisible ] );
|
|
||||||
|
|
||||||
if (
|
|
||||||
currentTab === 'feedback' &&
|
|
||||||
( isTourVisible || tourTimeout.current )
|
|
||||||
) {
|
|
||||||
setIsTourVisible( false );
|
|
||||||
clearTourTimeout();
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( ! isTourVisible ) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<TourKit
|
|
||||||
config={ {
|
|
||||||
steps: [
|
|
||||||
{
|
|
||||||
referenceElements: {
|
|
||||||
desktop: '#activity-panel-tab-feedback',
|
|
||||||
},
|
|
||||||
meta: {
|
|
||||||
name: 'product-feedback-tour-1',
|
|
||||||
heading: __( '🫣 Feeling stuck?', 'woocommerce' ),
|
|
||||||
descriptions: {
|
|
||||||
desktop: __(
|
|
||||||
"You have been working on this product for a few minutes now. Is there something you're struggling with? Share your feedback.",
|
|
||||||
'woocommerce'
|
|
||||||
),
|
|
||||||
},
|
|
||||||
primaryButton: {
|
|
||||||
isHidden: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
placement: 'bottom-start',
|
|
||||||
options: {
|
|
||||||
effects: {
|
|
||||||
liveResize: { mutation: true, resize: true },
|
|
||||||
},
|
|
||||||
},
|
|
||||||
closeHandler: () => {
|
|
||||||
setIsTourVisible( false );
|
|
||||||
},
|
|
||||||
} }
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
|
@ -0,0 +1,4 @@
|
||||||
|
Significance: minor
|
||||||
|
Type: dev
|
||||||
|
|
||||||
|
Remove "Feeling Stuck" tooltip #40397
|
Loading…
Reference in New Issue