Move CustomerEffortScorePrompt from product-feed/ to components/

And make it more general so it can be a shared component

Author: ianlin

js/src/product-feed/customer-effort-score-prompt/index.js renamed to js/src/components/customer-effort-score-prompt/index.js

@@ -4,16 +4,15 @@
 import { __ } from '@wordpress/i18n';
 import CustomerEffortScore from '@woocommerce/customer-effort-score';
 import { recordEvent } from '@woocommerce/tracks';
+import PropTypes from 'prop-types';
 
 /**
  * Internal dependencies
  */
 import { LOCAL_STORAGE_KEYS } from '.~/constants';
 import localStorage from '.~/utils/localStorage';
 
-const EVENT_CONTEXT = 'gla-setup';
-
-export default function CustomerEffortScorePrompt() {
+const CustomerEffortScorePrompt = ( { eventContext, label } ) => {
 	const removeCESPromptFlagFromLocal = () => {
 		localStorage.remove(
 			LOCAL_STORAGE_KEYS.CAN_ONBOARDING_SETUP_CES_PROMPT_OPEN
@@ -22,38 +21,35 @@ export default function CustomerEffortScorePrompt() {
 
 	const onNoticeShown = () => {
 		recordEvent( 'gla_ces_snackbar_open', {
-			context: EVENT_CONTEXT,
+			context: eventContext,
 		} );
 	};
 
 	const onNoticeDismissed = () => {
 		removeCESPromptFlagFromLocal();
 		recordEvent( 'gla_ces_snackbar_closed', {
-			context: EVENT_CONTEXT,
+			context: eventContext,
 		} );
 	};
 
 	const onModalShown = () => {
 		removeCESPromptFlagFromLocal();
 		recordEvent( 'gla_ces_modal_open', {
-			context: EVENT_CONTEXT,
+			context: eventContext,
 		} );
 	};
 
 	const recordScore = ( score, comments ) => {
 		recordEvent( 'gla_ces_feedback', {
-			context: EVENT_CONTEXT,
+			context: eventContext,
 			score,
 			comments: comments || '',
 		} );
 	};
 
 	return (
 		<CustomerEffortScore
-			label={ __(
-				'How easy was it to set up Google Listings & Ads?',
-				'google-listings-and-ads'
-			) }
+			label={ label }
 			recordScoreCallback={ recordScore }
 			onNoticeShownCallback={ onNoticeShown }
 			onNoticeDismissedCallback={ onNoticeDismissed }
@@ -72,4 +68,17 @@ export default function CustomerEffortScorePrompt() {
 			}
 		/>
 	);
-}
+};
+
+CustomerEffortScorePrompt.propTypes = {
+	/**
+	 * The text to be displayed on the CES prompt
+	 */
+	label: PropTypes.string.isRequired,
+	/**
+	 * Context property to be sent when calling recordEvent
+	 */
+	eventContext: PropTypes.string.isRequired,
+};
+
+export default CustomerEffortScorePrompt;

js/src/product-feed/index.js

@@ -11,7 +11,7 @@ import NavigationClassic from '.~/components/navigation-classic';
 import IssuesTableCard from './issues-table-card';
 import ProductFeedTableCard from './product-feed-table-card';
 import SubmissionSuccessGuide from './submission-success-guide';
-import CustomerEffortScorePrompt from './customer-effort-score-prompt';
+import CustomerEffortScorePrompt from '.~/components/customer-effort-score-prompt';
 import ProductStatistics from './product-statistics';
 import './index.scss';
 import useProductFeedPrefetch from './useProductFeedPrefetch';
@@ -41,7 +41,15 @@ const ProductFeed = () => {
 		<>
 			<NavigationClassic />
 			{ isSubmissionSuccessOpen && <SubmissionSuccessGuide /> }
-			{ shouldOpenCESPrompt && <CustomerEffortScorePrompt /> }
+			{ shouldOpenCESPrompt && (
+				<CustomerEffortScorePrompt
+					label={ __(
+						'How easy was it to set up Google Listings & Ads?',
+						'google-listings-and-ads'
+					) }
+					eventContext="gla-setup"
+				/>
+			) }
 			<div className="gla-product-feed">
 				{ ! hasFinishedResolution && <AppSpinner /> }
 				{ hasFinishedResolution &&