From 2dde3f5fa47a528d06bc8717f361def70ecc636a Mon Sep 17 00:00:00 2001
From: Joshua T Flowers <joshuatf@gmail.com>
Date: Mon, 10 Jan 2022 14:18:19 -0500
Subject: [PATCH] Add custom error for store details email and allow continue
 (https://github.com/woocommerce/woocommerce-admin/pull/8110)

* Add custom error for store details email and allow continue

* Add changelog entry
---
 .../woocommerce-admin/changelogs/update-7923  |  4 +++
 .../steps/store-details/index.js              | 36 +++++++++++--------
 .../steps/store-details/style.scss            |  8 +++++
 3 files changed, 34 insertions(+), 14 deletions(-)
 create mode 100644 plugins/woocommerce-admin/changelogs/update-7923

diff --git a/plugins/woocommerce-admin/changelogs/update-7923 b/plugins/woocommerce-admin/changelogs/update-7923
new file mode 100644
index 00000000000..37efa219d4b
--- /dev/null
+++ b/plugins/woocommerce-admin/changelogs/update-7923
@@ -0,0 +1,4 @@
+Significance: minor
+Type: Update
+
+Add custom error for store details email and allow continue #8110
diff --git a/plugins/woocommerce-admin/client/profile-wizard/steps/store-details/index.js b/plugins/woocommerce-admin/client/profile-wizard/steps/store-details/index.js
index ac754bcd752..b57e43f0d92 100644
--- a/plugins/woocommerce-admin/client/profile-wizard/steps/store-details/index.js
+++ b/plugins/woocommerce-admin/client/profile-wizard/steps/store-details/index.js
@@ -200,15 +200,6 @@ class StoreDetails extends Component {
 	validateStoreDetails( values ) {
 		const errors = validateStoreAddress( values );
 
-		if (
-			values.isAgreeMarketing &&
-			( ! values.storeEmail || ! values.storeEmail.trim().length )
-		) {
-			errors.storeEmail = __(
-				'Please add an email address',
-				'woocommerce-admin'
-			);
-		}
 		if (
 			values.storeEmail &&
 			values.storeEmail.trim().length &&
@@ -342,14 +333,31 @@ class StoreDetails extends Component {
 								/>
 
 								<TextControl
-									label={ __(
-										'Email address',
-										'woocommerce-admin'
-									) }
-									required
+									label={
+										values.isAgreeMarketing
+											? __(
+													'Email address',
+													'woocommerce-admin'
+											  )
+											: __(
+													'Email address (Optional)',
+													'woocommerce-admin'
+											  )
+									}
+									required={ values.isAgreeMarketing }
 									autoComplete="email"
 									{ ...getInputProps( 'storeEmail' ) }
 								/>
+								{ values.isAgreeMarketing &&
+									( ! values.storeEmail ||
+										! values.storeEmail.trim().length ) && (
+										<div className="woocommerce-profile-wizard__store-details-error">
+											{ __(
+												'Please enter your email address to subscribe',
+												'woocommerce-admin'
+											) }
+										</div>
+									) }
 							</CardBody>
 
 							<CardFooter>
diff --git a/plugins/woocommerce-admin/client/profile-wizard/steps/store-details/style.scss b/plugins/woocommerce-admin/client/profile-wizard/steps/store-details/style.scss
index b9cf219f6c5..25a37823849 100644
--- a/plugins/woocommerce-admin/client/profile-wizard/steps/store-details/style.scss
+++ b/plugins/woocommerce-admin/client/profile-wizard/steps/store-details/style.scss
@@ -19,3 +19,11 @@
 		color: $studio-gray-20;
 	}
 }
+
+.woocommerce-profile-wizard__store-details-error {
+	margin-top: -$gap-small;
+	font-size: 12px;
+	font-style: normal;
+	color: #d63638;
+	padding-left: $gap-small;
+}