Adding delayed spotlight to feedback button on current product page (#35865)

packages/js/components/changelog/add-35301-delayed-ces-prompt

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Adding isHidden option for primary button in TourKit component.

packages/js/components/src/tour-kit/components/step-navigation.tsx

@@ -25,7 +25,7 @@ const StepNavigation: React.FunctionComponent< Props > = ( {
 	const isFirstStep = currentStepIndex === 0;
 	const isLastStep = currentStepIndex === steps.length - 1;
 
-	const { primaryButton = { text: '', isDisabled: false } } =
+	const { primaryButton = { text: '', isDisabled: false, isHidden: false } } =
 		steps[ currentStepIndex ].meta;
 
 	const NextButton = (
@@ -80,6 +80,10 @@ const StepNavigation: React.FunctionComponent< Props > = ( {
 		);
 	};
 
+	if ( primaryButton.isHidden ) {
+		return null;
+	}
+
 	return (
 		<div className="woocommerce-tour-kit-step-navigation">
 			<div className="woocommerce-tour-kit-step-navigation__step">

packages/js/components/src/tour-kit/types.ts

@@ -22,6 +22,7 @@ export interface WooStep extends Step {
 			text?: string;
 			/** Disable the button or not. Default to False */
 			isDisabled?: boolean;
+			isHidden?: boolean;
 		};
 	};
 	/** Auto apply the focus state for the element. Default to null */

plugins/woocommerce-admin/client/activity-panel/activity-panel.js

@@ -49,6 +49,7 @@ import { LayoutContext } from '~/layout';
 import { getSegmentsFromPath } from '~/utils/url-helpers';
 import { FeedbackIcon } from '~/products/images/feedback-icon';
 import { STORE_KEY as CES_STORE_KEY } from '~/customer-effort-score-tracks/data/constants';
+import { ProductFeedbackTour } from '~/guided-tours/add-product-feedback-tour';
 
 const HelpPanel = lazy( () =>
 	import( /* webpackChunkName: "activity-panels-help" */ './panels/help' )
@@ -250,6 +251,16 @@ export const ActivityPanel = ( { isEmbedded, query } ) => {
 		);
 	};
 
+	const isAddProductPage = () => {
+		const urlParams = getUrlParams( window.location.search );
+
+		return (
+			isEmbedded &&
+			/post-new\.php$/.test( window.location.pathname ) &&
+			urlParams?.post_type === 'product'
+		);
+	};
+
 	const isPerformingSetupTask = () => {
 		return (
 			query.task &&
@@ -262,8 +273,6 @@ export const ActivityPanel = ( { isEmbedded, query } ) => {
 
 	// @todo Pull in dynamic unread status/count
 	const getTabs = () => {
-		const urlParams = getUrlParams( window.location.search );
-
 		const activity = {
 			name: 'activity',
 			title: __( 'Activity', 'woocommerce' ),
@@ -314,10 +323,7 @@ export const ActivityPanel = ( { isEmbedded, query } ) => {
 					}
 				);
 			},
-			visible:
-				isEmbedded &&
-				urlParams?.post_type === 'product' &&
-				! urlParams?.taxonomy,
+			visible: isAddProductPage(),
 		};
 
 		const setup = {
@@ -485,6 +491,9 @@ export const ActivityPanel = ( { isEmbedded, query } ) => {
 						clearPanel={ () => clearPanel() }
 					/>
 				</Section>
+				{ isAddProductPage() && (
+					<ProductFeedbackTour currentTab={ currentTab } />
+				) }
 				{ showHelpHighlightTooltip ? (
 					<HighlightTooltip
 						delay={ 1000 }

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

@@ -0,0 +1,114 @@
+/**
+ * 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 );
+				},
+			} }
+		/>
+	);
+};

plugins/woocommerce/changelog/add-35301-delayed-ces-prompt

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Adding delayed spotlight to feedback button on current product page.