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

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

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={ __(
+									label={
+										values.isAgreeMarketing
+											? __(
 													'Email address',
 													'woocommerce-admin'
-									) }
+											  )
-									required
+											: __(
+													'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>

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;
+}