From d330d0a02eea3ce6e18b9561df5ff9f4a64b7a9d Mon Sep 17 00:00:00 2001
From: Dan Paun <dan.paun@automattic.com>
Date: Mon, 11 Mar 2024 18:30:46 +0200
Subject: [PATCH] set more descriptive names for the ratings

---
 client/overview/survey/index.tsx              | 130 +++++++++---------
 client/overview/survey/strings.tsx            |  10 +-
 client/overview/survey/types.ts               |   2 +-
 ...ass-wc-rest-payments-survey-controller.php |  10 +-
 4 files changed, 76 insertions(+), 76 deletions(-)

diff --git a/client/overview/survey/index.tsx b/client/overview/survey/index.tsx
index 1e4d1d313b8..2cb61076a72 100644
--- a/client/overview/survey/index.tsx
+++ b/client/overview/survey/index.tsx
@@ -32,14 +32,16 @@ const Survey = () => {
 		setSurveyAnswers,
 	} = useOverviewSurveyContext();
 
-	const currentRating = surveyAnswers.rating ?? 0;
-	const setReviewRating = function ( value: number ) {
+	const currentRating = surveyAnswers.rating ?? '';
+	const ratingWithComment = [ 'very-unhappy', 'unhappy', 'neutral' ];
+	const showComment = ratingWithComment.includes( currentRating );
+	const setReviewRating = function ( value: string ) {
 		const answers: OverviewSurveyFields = {
 			...surveyAnswers,
 			rating: value,
 		};
 		setSurveyAnswers( answers );
-		if ( value > 3 ) {
+		if ( ! ratingWithComment.includes( value ) ) {
 			setSurveySubmitted( answers );
 		}
 	};
@@ -60,43 +62,43 @@ const Survey = () => {
 								<div>
 									<Emoticons
 										disabled={ 'pending' === status }
-										rating="1"
+										rating="very-unhappy"
 										setReviewRating={ setReviewRating }
 										currentRating={ currentRating }
 									/>
 									<Emoticons
 										disabled={ 'pending' === status }
-										rating="2"
+										rating="unhappy"
 										setReviewRating={ setReviewRating }
 										currentRating={ currentRating }
 									/>
 									<Emoticons
 										disabled={ 'pending' === status }
-										rating="3"
+										rating="neutral"
 										setReviewRating={ setReviewRating }
 										currentRating={ currentRating }
 									/>
 									<Emoticons
 										disabled={ 'pending' === status }
-										rating="4"
+										rating="happy"
 										setReviewRating={ setReviewRating }
 										currentRating={ currentRating }
 									/>
 									<Emoticons
 										disabled={ 'pending' === status }
-										rating="5"
+										rating="very-happy"
 										setReviewRating={ setReviewRating }
 										currentRating={ currentRating }
 									/>
 								</div>
 							</div>
-							{ currentRating <= 3 && currentRating > 0 && (
+							{ showComment && (
 								<button
 									type="button"
 									className="components-button has-icon"
 									aria-label="Close dialog"
 									onClick={ () => {
-										setReviewRating( 0 );
+										setReviewRating( '' );
 									} }
 								>
 									<Icon
@@ -110,63 +112,61 @@ const Survey = () => {
 					</>
 				) }
 
-				{ ! surveySubmitted &&
-					currentRating <= 3 &&
-					currentRating > 0 && (
-						<>
-							<HorizontalRule />
-							<TextareaControl
-								className="ssr-text-field"
-								label={ __(
-									'Why do you feel that way? (optional)',
+				{ ! surveySubmitted && showComment && (
+					<>
+						<HorizontalRule />
+						<TextareaControl
+							className="ssr-text-field"
+							label={ __(
+								'Why do you feel that way? (optional)',
+								'woocommerce-payments'
+							) }
+							onChange={ ( text ) => {
+								setSurveyAnswers(
+									(
+										prev: OverviewSurveyFields
+									): OverviewSurveyFields => ( {
+										...prev,
+										comments: text,
+									} )
+								);
+							} }
+							value={ surveyAnswers.comments ?? '' }
+							readOnly={ 'pending' === status }
+						/>
+						<p className="survey-bottom-disclaimer">
+							{ sprintf(
+								/* translators: %s: WooPayments */
+								__(
+									'Your feedback will be only be shared with WooCommerce and treated pursuant to our privacy policy.',
 									'woocommerce-payments'
-								) }
-								onChange={ ( text ) => {
-									setSurveyAnswers(
-										(
-											prev: OverviewSurveyFields
-										): OverviewSurveyFields => ( {
-											...prev,
-											comments: text,
-										} )
-									);
+								),
+								'WooPayments'
+							) }
+						</p>
+						<div className="wcpay-confirmation-modal__footer">
+							<Button
+								variant={ 'secondary' }
+								disabled={ 'pending' === status }
+								onClick={ () => {
+									setReviewRating( '' );
 								} }
-								value={ surveyAnswers.comments ?? '' }
-								readOnly={ 'pending' === status }
-							/>
-							<p className="survey-bottom-disclaimer">
-								{ sprintf(
-									/* translators: %s: WooPayments */
-									__(
-										'Your feedback will be only be shared with WooCommerce and treated pursuant to our privacy policy.',
-										'woocommerce-payments'
-									),
-									'WooPayments'
-								) }
-							</p>
-							<div className="wcpay-confirmation-modal__footer">
-								<Button
-									variant={ 'secondary' }
-									disabled={ 'pending' === status }
-									onClick={ () => {
-										setReviewRating( 0 );
-									} }
-								>
-									{ __( 'Cancel', 'woocommerce-payments' ) }
-								</Button>
-								<Button
-									variant={ 'primary' }
-									isBusy={ 'pending' === status }
-									disabled={ 'pending' === status }
-									onClick={ () =>
-										setSurveySubmitted( surveyAnswers )
-									}
-								>
-									{ __( 'Send', 'woocommerce-payments' ) }
-								</Button>
-							</div>
-						</>
-					) }
+							>
+								{ __( 'Cancel', 'woocommerce-payments' ) }
+							</Button>
+							<Button
+								variant={ 'primary' }
+								isBusy={ 'pending' === status }
+								disabled={ 'pending' === status }
+								onClick={ () =>
+									setSurveySubmitted( surveyAnswers )
+								}
+							>
+								{ __( 'Send', 'woocommerce-payments' ) }
+							</Button>
+						</div>
+					</>
+				) }
 				{ surveySubmitted && (
 					<div className="survey_container">
 						<span>
diff --git a/client/overview/survey/strings.tsx b/client/overview/survey/strings.tsx
index e9f998a88db..4a8f2ae4ce8 100644
--- a/client/overview/survey/strings.tsx
+++ b/client/overview/survey/strings.tsx
@@ -1,7 +1,7 @@
 export default {
-	1: '&#128542;',
-	2: '&#129764;',
-	3: '&#128529;',
-	4: '&#128578;',
-	5: '&#128525;',
+	'very-unhappy': '&#128542;',
+	unhappy: '&#129764;',
+	neutral: '&#128529;',
+	happy: '&#128578;',
+	'very-happy': '&#128525;',
 };
diff --git a/client/overview/survey/types.ts b/client/overview/survey/types.ts
index 579204e5c8b..6c3e9a5584f 100644
--- a/client/overview/survey/types.ts
+++ b/client/overview/survey/types.ts
@@ -3,6 +3,6 @@
  */
 
 export type OverviewSurveyFields = {
-	rating?: number;
+	rating?: string;
 	comments?: string;
 };
diff --git a/includes/admin/class-wc-rest-payments-survey-controller.php b/includes/admin/class-wc-rest-payments-survey-controller.php
index 6d9510416d2..a1c74a440c9 100644
--- a/includes/admin/class-wc-rest-payments-survey-controller.php
+++ b/includes/admin/class-wc-rest-payments-survey-controller.php
@@ -60,11 +60,11 @@ public function register_routes() {
 						'items'             => [
 							'type' => 'string',
 							'enum' => [
-								'1',
-								'2',
-								'3',
-								'4',
-								'5',
+								'very-unhappy',
+								'unhappy',
+								'neutral',
+								'happy',
+								'very-happy',
 							],
 						],
 						'validate_callback' => 'rest_validate_request_arg',