From 4eb9063a064d33709c7bb47df5996e627536ec5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <albarin@users.noreply.github.com>
Date: Thu, 21 Mar 2024 18:30:40 +0100
Subject: [PATCH] [CYS] Update the `Share feedback` survey design (#45802)

* Update the CYS feedback survey design

* Add changefile(s) from automation for the following project(s): woocommerce

* Fix typo

---------

Co-authored-by: github-actions <github-actions@github.com>
---
 .../customize-store/transitional/style.scss   |  40 +++-
 .../transitional/survey-form/index.tsx        | 217 +++++++++---------
 .../changelog/45802-update-cys-survey-design  |   4 +
 3 files changed, 145 insertions(+), 116 deletions(-)
 create mode 100644 plugins/woocommerce/changelog/45802-update-cys-survey-design

diff --git a/plugins/woocommerce-admin/client/customize-store/transitional/style.scss b/plugins/woocommerce-admin/client/customize-store/transitional/style.scss
index e0c1049448a4..705dbf0019ec 100644
--- a/plugins/woocommerce-admin/client/customize-store/transitional/style.scss
+++ b/plugins/woocommerce-admin/client/customize-store/transitional/style.scss
@@ -133,9 +133,10 @@
 .woocommerce-ai-survey-modal {
 	max-height: 100%;
 	max-width: 620px;
+	color: var(--gutenberg-gray-900, #1e1e1e);
 
 	.components-modal__header {
-		padding: 32px 32px 24px 32px;
+		padding: 32px 32px 8px 32px;
 
 		.components-modal__header-heading {
 			font-size: 20px;
@@ -146,14 +147,30 @@
 	}
 
 	.components-modal__content {
-		padding-top: 0;
-		padding-bottom: 16px;
+		padding: 0 0 16px;
+	}
+
+
+	hr {
+		margin-top: 24px;
+		margin-bottom: 16px;
+		color: var(--gutenberg-gray-100, #f0f0f0);
+		border-bottom: 0;
 	}
 }
 
 .woocommerce-ai-survey-form {
+	.content {
+		padding-left: 32px;
+		padding-right: 32px;
+
+		hr {
+			margin: 20px 0;
+		}
+	}
+
 	.woocommerce-ai-survey-form__description {
-		margin: 0 0 12px;
+		margin: 0 0 24px;
 		font-size: 13px;
 		font-style: normal;
 		font-weight: 400;
@@ -193,14 +210,13 @@
 		}
 	}
 
-	hr {
-		color: var(--gutenberg-gray-100, #f0f0f0);
-		margin: 20px 0;
-	}
+	.components-checkbox-control__input-container {
+		margin-right: 16px;
 
-	.components-checkbox-control__input {
-		border: 1px solid $gray-600;
-		border-radius: 2px;
+		.components-checkbox-control__input {
+			border: 1px solid $gray-600;
+			border-radius: 2px;
+		}
 	}
 
 	.components-checkbox-control:last-child {
@@ -211,6 +227,8 @@
 		display: flex;
 		justify-content: flex-end;
 		gap: 12px;
+		padding-left: 32px;
+		padding-right: 32px;
 
 		.components-button {
 			padding: 8px 16px;
diff --git a/plugins/woocommerce-admin/client/customize-store/transitional/survey-form/index.tsx b/plugins/woocommerce-admin/client/customize-store/transitional/survey-form/index.tsx
index 724e4cf095f7..5213a2554bd8 100644
--- a/plugins/woocommerce-admin/client/customize-store/transitional/survey-form/index.tsx
+++ b/plugins/woocommerce-admin/client/customize-store/transitional/survey-form/index.tsx
@@ -113,118 +113,125 @@ export const SurveyForm = ( {
 	return (
 		<>
 			<div className="woocommerce-ai-survey-form">
-				<p className="woocommerce-ai-survey-form__description">
-					{ __(
-						'Our goal is to make sure you have all the right tools to start customizing your store. We’d love to know if we hit our mark and how we can improve.',
-						'woocommerce'
-					) }
-				</p>
-
-				<h4>
-					{ __(
-						'On a scale of 1 = difficult to 5 = very easy, how would you rate the overall experience?',
-						'woocommerce'
-					) }
-					<span>*</span>
-				</h4>
-				<StarRating value={ rating } onChange={ setRating } />
-
-				<hr />
-
-				<h4>
-					{ showAISurvey
-						? __(
-								'What motivated you to choose the “Design with AI” option?',
-								'woocommerce'
-						  )
-						: __(
-								'What motivated you to choose the "Design your own theme" option?',
-								'woocommerce'
-						  ) }
-					<span>*</span>
-				</h4>
-				<CheckboxControl
-					label={
-						showAISurvey
+				<div className="content">
+					<p className="woocommerce-ai-survey-form__description">
+						{ __(
+							'Our goal is to make sure you have all the right tools to start customizing your store. We’d love to know if we hit our mark and how we can improve.',
+							'woocommerce'
+						) }
+					</p>
+
+					<h4>
+						{ __(
+							'On a scale of 1 = difficult to 5 = very easy, how would you rate the overall experience?',
+							'woocommerce'
+						) }
+						<span>*</span>
+					</h4>
+					<StarRating value={ rating } onChange={ setRating } />
+
+					<hr />
+
+					<h4>
+						{ showAISurvey
 							? __(
-									'I wanted to see how AI could help me streamline the process.',
+									'What motivated you to choose the “Design with AI” option?',
 									'woocommerce'
 							  )
 							: __(
-									'I wanted to design my own theme.',
+									'What motivated you to choose the "Design your own theme" option?',
+									'woocommerce'
+							  ) }
+						<span>*</span>
+					</h4>
+					<CheckboxControl
+						label={
+							showAISurvey
+								? __(
+										'I wanted to see how AI could help me streamline the process.',
+										'woocommerce'
+								  )
+								: __(
+										'I wanted to design my own theme.',
+										'woocommerce'
+								  )
+						}
+						checked={ isStreamlineChecked }
+						onChange={ setStreamlineChecked }
+					/>
+					<CheckboxControl
+						label={ __(
+							"I didn't like any of the available themes.",
+							'woocommerce'
+						) }
+						checked={ isDislikeThemesChecked }
+						onChange={ setDislikeChecked }
+					/>
+					<CheckboxControl
+						label={ __(
+							"I didn't find a theme that matched my needs.",
+							'woocommerce'
+						) }
+						checked={ isThemeNoMatchChecked }
+						onChange={ setThemeNoMatchChecked }
+					/>
+					<CheckboxControl
+						label={ __( 'Other.', 'woocommerce' ) }
+						checked={ isOtherChecked }
+						onChange={ setOtherChecked }
+					/>
+
+					<hr />
+
+					<h4>
+						{ __(
+							'Did you find anything confusing, irrelevant, or not useful?',
+							'woocommerce'
+						) }
+					</h4>
+					<TextareaControl
+						value={ feedbackText }
+						onChange={ setFeedbackText }
+					/>
+
+					<hr />
+
+					<h4>
+						{ showAISurvey
+							? __(
+									'Feel free to spill the beans here. All suggestions, feedback, or comments about the AI-generated store experience are welcome.',
 									'woocommerce'
 							  )
-					}
-					checked={ isStreamlineChecked }
-					onChange={ setStreamlineChecked }
-				/>
-				<CheckboxControl
-					label={ __(
-						"I didn't like any of the available themes.",
-						'woocommerce'
-					) }
-					checked={ isDislikeThemesChecked }
-					onChange={ setDislikeChecked }
-				/>
-				<CheckboxControl
-					label={ __(
-						"I didn't find a theme that matched my needs.",
-						'woocommerce'
-					) }
-					checked={ isThemeNoMatchChecked }
-					onChange={ setThemeNoMatchChecked }
-				/>
-				<CheckboxControl
-					label={ __( 'Other.', 'woocommerce' ) }
-					checked={ isOtherChecked }
-					onChange={ setOtherChecked }
-				/>
-
-				<hr />
-
-				<h4>
-					{ __(
-						'Did you find anything confusing, irrelevant, or not useful?',
-						'woocommerce'
-					) }
-				</h4>
-				<TextareaControl
-					value={ feedbackText }
-					onChange={ setFeedbackText }
-				/>
-
-				<h4>
-					{ showAISurvey
-						? __(
-								'Feel free to spill the beans here. All suggestions, feedback, or comments about the AI-generated store experience are welcome.',
-								'woocommerce'
-						  )
-						: __(
-								'Feel free to spill the beans here. All suggestions, feedback, or comments about the "Design your own theme" experience are welcome.',
-								'woocommerce'
-						  ) }
-				</h4>
-				<TextareaControl
-					value={ spillBeansText }
-					onChange={ setSpillBeansText }
-				/>
-
-				<div className="buttons">
-					<Button
-						className="is-spinner"
-						variant="tertiary"
-						onClick={ closeFunction }
-					>
-						{ __( 'Cancel', 'woocommerce' ) }
-					</Button>
+							: __(
+									'Feel free to spill the beans here. All suggestions, feedback, or comments about the "Design your own theme" experience are welcome.',
+									'woocommerce'
+							  ) }
+					</h4>
+					<TextareaControl
+						value={ spillBeansText }
+						onChange={ setSpillBeansText }
+					/>
+				</div>
 
-					<Button
-						variant="primary"
-						onClick={ sendData }
-						disabled={ disableSendButton }
-					>
-						{ __( 'Send', 'woocommerce' ) }
-					</Button>
+				<div>
+					<hr />
+					<div className="buttons">
+						<Button
+							className="is-spinner"
+							variant="tertiary"
+							onClick={ closeFunction }
+						>
+							{ __( 'Cancel', 'woocommerce' ) }
+						</Button>
+
+						<Button
+							variant="primary"
+							onClick={ sendData }
+							disabled={ disableSendButton }
+						>
+							{ __( 'Send', 'woocommerce' ) }
+						</Button>
+					</div>
 				</div>
 			</div>
 		</>
diff --git a/plugins/woocommerce/changelog/45802-update-cys-survey-design b/plugins/woocommerce/changelog/45802-update-cys-survey-design
new file mode 100644
index 000000000000..bf7f73413ff1
--- /dev/null
+++ b/plugins/woocommerce/changelog/45802-update-cys-survey-design
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+CYS - Update the "Share feedback" survey design
\ No newline at end of file