Merge pull request #1839 from woocommerce/fix/ces

Compatibility between CES and WC7.3

js/src/components/customer-effort-score-prompt/index.js

@@ -37,6 +37,10 @@ import useEffectRemoveNotice from '.~/hooks/useEffectRemoveNotice';
  * A CustomerEffortScore wrapper that uses tracks to track the selected
  * customer effort score.
  *
+ * compatibility-code "WC >= 7.3"
+ * TODO: Remove temporary fix for WC 7.3 in which adding `secondQuestion` is required.
+ * See: https://github.com/woocommerce/google-listings-and-ads/issues/1836
+ *
  * @fires gla_ces_snackbar_open whenever the CES snackbar (notice) is open
  * @fires gla_ces_snackbar_closed whenever the CES snackbar (notice) is closed
  * @fires gla_ces_modal_open whenever the CES modal is open
@@ -45,9 +49,10 @@ import useEffectRemoveNotice from '.~/hooks/useEffectRemoveNotice';
  * @param {Object} props React component props.
  * @param {string} props.eventContext Context to be used in the CES wrapper events.
  * @param {string} props.label Text to be displayed in the CES notice and modal.
+ * @param {string} props.secondLabel Only WC >= 7.3. Text to be displayed for the second question in the modal.
  * @return {JSX.Element} Rendered element.
  */
-const CustomerEffortScorePrompt = ( { eventContext, label } ) => {
+const CustomerEffortScorePrompt = ( { eventContext, label, secondLabel } ) => {
 	// NOTE: Currently CES Prompts uses core/notices2 as a store key, this seems something temporal
 	// and probably will be needed to change back to core/notices.
 	// See: https://github.com/woocommerce/woocommerce/blob/6.6.0/packages/js/notices/src/store/index.js
@@ -78,7 +83,7 @@ const CustomerEffortScorePrompt = ( { eventContext, label } ) => {
 		} );
 	};
 
-	const recordScore = ( score, comments ) => {
+	const recordScore = ( score, score2, comments ) => {
 		recordEvent( 'gla_ces_feedback', {
 			context: eventContext,
 			score,
@@ -89,6 +94,9 @@ const CustomerEffortScorePrompt = ( { eventContext, label } ) => {
 	return (
 		<CustomerEffortScore
 			label={ label }
+			title={ label }
+			firstQuestion={ label }
+			secondQuestion={ secondLabel }
 			recordScoreCallback={ recordScore }
 			onNoticeShownCallback={ onNoticeShown }
 			onNoticeDismissedCallback={ onNoticeDismissed }

js/src/css/shared/_woocommerce-admin.scss

@@ -76,3 +76,8 @@
 		}
 	}
 }
+
+// compatibility-code "WC >= 7.3" -- adding margin in the first question label.
+.wp-admin .woocommerce-customer-effort-score__intro {
+	margin-bottom: 1em;
+}

js/src/dashboard/index.js

@@ -120,6 +120,10 @@ const Dashboard = () => {
 						'How easy was it to create a Google Ad campaign?',
 						'google-listings-and-ads'
 					) }
+					secondLabel={ __(
+						'How easy was it to understand the requirements for the Google Ad campaign creation?',
+						'google-listings-and-ads'
+					) }
 					eventContext={ GUIDE_NAMES.CAMPAIGN_CREATION_SUCCESS }
 				/>
 			) }

js/src/product-feed/index.js

@@ -57,6 +57,10 @@ const ProductFeed = () => {
 						'How easy was it to set up Google Listings & Ads?',
 						'google-listings-and-ads'
 					) }
+					secondLabel={ __(
+						'How easy was it to understand the requirements for the Google Listings & Ads setup?',
+						'google-listings-and-ads'
+					) }
 					eventContext={ GUIDE_NAMES.SUBMISSION_SUCCESS }
 				/>
 			) }