Adding the feedback button on activity panel for the classic product page (#35810)

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

@@ -9,7 +9,7 @@ import {
 	useMemo,
 	useEffect,
 } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { uniqueId, find } from 'lodash';
 import { Icon, help as helpIcon, external } from '@wordpress/icons';
 import { H, Section } from '@woocommerce/components';
@@ -43,9 +43,12 @@ import {
 import { getUnapprovedReviews } from '../homescreen/activity-panel/reviews/utils';
 import { ABBREVIATED_NOTIFICATION_SLOT_NAME } from './panels/inbox/abbreviated-notifications-panel';
 import { getAdminSetting } from '~/utils/admin-settings';
+import { getUrlParams } from '~/utils';
 import { useActiveSetupTasklist } from '~/tasks';
 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';
 
 const HelpPanel = lazy( () =>
 	import( /* webpackChunkName: "activity-panels-help" */ './panels/help' )
@@ -202,6 +205,9 @@ export const ActivityPanel = ( { isEmbedded, query } ) => {
 			),
 		};
 	} );
+
+	const { showCesModal } = useDispatch( CES_STORE_KEY );
+
 	const { currentUserCan } = useUser();
 
 	const togglePanel = ( { name: tabName }, isTabOpen ) => {
@@ -237,7 +243,7 @@ export const ActivityPanel = ( { isEmbedded, query } ) => {
 		return query.page === 'wc-admin' && ! query.path;
 	};
 
-	const isProductPage = () => {
+	const isProductScreen = () => {
 		const [ firstPathSegment ] = getSegmentsFromPath( query.path );
 		return (
 			firstPathSegment === 'add-product' || firstPathSegment === 'product'
@@ -256,6 +262,8 @@ 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' ),
@@ -264,7 +272,52 @@ export const ActivityPanel = ( { isEmbedded, query } ) => {
 			visible:
 				( isEmbedded || ! isHomescreen() ) &&
 				! isPerformingSetupTask() &&
-				! isProductPage(),
+				! isProductScreen(),
+		};
+
+		const feedback = {
+			name: 'feedback',
+			title: __( 'Feedback', 'woocommerce' ),
+			icon: <FeedbackIcon />,
+			onClick: () => {
+				setCurrentTab( 'feedback' );
+				setIsPanelOpen( true );
+				showCesModal(
+					{
+						action: 'product_feedback',
+						title: __(
+							"How's your experience with the product editor?",
+							'woocommerce'
+						),
+						firstQuestion: __(
+							'The product editing screen is easy to use',
+							'woocommerce'
+						),
+						secondQuestion: __(
+							"The product editing screen's functionality meets my needs",
+							'woocommerce'
+						),
+					},
+					{
+						onRecordScore: () => {
+							setCurrentTab( '' );
+							setIsPanelOpen( false );
+						},
+						onCloseModal: () => {
+							setCurrentTab( '' );
+							setIsPanelOpen( false );
+						},
+					},
+					{
+						type: 'snackbar',
+						icon: <span>🌟</span>,
+					}
+				);
+			},
+			visible:
+				isEmbedded &&
+				urlParams?.post_type === 'product' &&
+				! urlParams?.taxonomy,
 		};
 
 		const setup = {
@@ -284,7 +337,7 @@ export const ActivityPanel = ( { isEmbedded, query } ) => {
 				! setupTaskListComplete &&
 				! setupTaskListHidden &&
 				! isHomescreen() &&
-				! isProductPage(),
+				! isProductScreen(),
 		};
 
 		const help = {
@@ -337,6 +390,7 @@ export const ActivityPanel = ( { isEmbedded, query } ) => {
 
 		return [
 			activity,
+			feedback,
 			setup,
 			previewSite,
 			previewStore,

plugins/woocommerce-admin/client/customer-effort-score-tracks/customer-effort-score-modal-container.tsx

@@ -74,15 +74,18 @@ export const CustomerEffortScoreModalContainer: React.FC = () => {
 
 	return (
 		<CustomerFeedbackModal
-			title={ visibleCESModalData.label }
-			description={ visibleCESModalData.description }
+			title={ visibleCESModalData.title }
 			firstQuestion={ visibleCESModalData.firstQuestion }
 			secondQuestion={ visibleCESModalData.secondQuestion }
 			recordScoreCallback={ ( ...args ) => {
 				recordScore( ...args );
 				hideCesModal();
+				visibleCESModalData.props?.onRecordScore?.();
+			} }
+			onCloseModal={ () => {
+				visibleCESModalData.props?.onCloseModal?.();
+				hideCesModal();
 			} }
-			onCloseModal={ () => hideCesModal() }
 		/>
 	);
 };

plugins/woocommerce-admin/client/customer-effort-score-tracks/data/reducer.js

@@ -25,7 +25,7 @@ const reducer = ( state = DEFAULT_STATE, action ) => {
 		case TYPES.SHOW_CES_MODAL:
 			const cesModalData = {
 				action: action.surveyProps.action,
-				label: action.surveyProps.label,
+				title: action.surveyProps.title,
 				onSubmitLabel: action.onSubmitLabel,
 				firstQuestion: action.surveyProps.firstQuestion,
 				secondQuestion: action.surveyProps.secondQuestion,

plugins/woocommerce-admin/client/customer-effort-score-tracks/product-mvp-ces-footer.tsx

@@ -67,7 +67,7 @@ export const ProductMVPCESFooter: React.FC = () => {
 		showCesModal(
 			{
 				action: cesAction,
-				label: __(
+				title: __(
 					"How's your experience with the product editor?",
 					'woocommerce'
 				),

plugins/woocommerce-admin/client/products/images/feedback-icon.tsx

@@ -4,14 +4,13 @@ export const FeedbackIcon = () => {
 			width="16"
 			height="17"
 			viewBox="0 0 16 17"
-			fill="none"
 			xmlns="http://www.w3.org/2000/svg"
 		>
 			<path
 				fillRule="evenodd"
 				clipRule="evenodd"
 				d="M2.68822 12.625L1.5 13.8145L1.5 1.5L14.5 1.5L14.5 12.625L2.68822 12.625ZM3.31 14.125L15 14.125C15.5523 14.125 16 13.6773 16 13.125L16 1C16 0.447717 15.5523 0 15 0H1C0.447717 0 0 0.447716 0 1V15.5247C0 15.8173 0.161234 16.086 0.419354 16.2237C0.727111 16.3878 1.10601 16.3313 1.35252 16.0845L3.31 14.125ZM12 5.99997H4V4.49997H12V5.99997ZM4 9.99997H9V8.49997H4V9.99997Z"
-				fill="#1E1E1E"
+				fill="currentColor"
 			/>
 		</svg>
 	);

plugins/woocommerce-admin/client/products/product-more-menu.tsx

@@ -38,11 +38,10 @@ export const ProductMoreMenu = () => {
 					<>
 						<MenuItem
 							onClick={ () => {
-								// @todo This should open the CES modal.
 								showCesModal(
 									{
 										action: 'new_product',
-										label: __(
+										title: __(
 											"How's your experience with the product editor?",
 											'woocommerce'
 										),

plugins/woocommerce/changelog/add-35806-classic-product-feedback

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Adding feedback button to activity bar on classic product page.