woocommerce/plugins/woocommerce-admin/client/guided-tours/add-product-feedback-tour.tsx

115 lines
2.6 KiB
TypeScript
Raw Normal View History

/**
* 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 );
},
} }
/>
);
};