From 558e5e322e76014f9a0de4750fd73ce78f6172b8 Mon Sep 17 00:00:00 2001
From: Chi-Hsuan Huang <chihsuan.tw@gmail.com>
Date: Fri, 10 Jun 2022 10:35:11 +0800
Subject: [PATCH] Fix continue button is enabled when email is null in setup
 wizard (#33362)

* Fix continue button is enabled even when email is null in setup wizard

* Add changelog
---
 .../steps/store-details/index.js              | 20 ++++++------
 .../steps/store-details/test/index.js         | 31 +++++++++++++++++++
 ...tinue-button-is-enabled-when-email-is-null |  4 +++
 3 files changed, 45 insertions(+), 10 deletions(-)
 create mode 100644 plugins/woocommerce/changelog/fix-32588-continue-button-is-enabled-when-email-is-null

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 9e993b70c47..562ee13163b 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
@@ -231,6 +231,16 @@ export class StoreDetails extends Component {
 			errors.storeEmail = __( 'Invalid email address', 'woocommerce' );
 		}
 
+		if (
+			values.isAgreeMarketing &&
+			( ! values.storeEmail || ! values.storeEmail.trim().length )
+		) {
+			errors.storeEmail = __(
+				'Please enter your email address to subscribe',
+				'woocommerce'
+			);
+		}
+
 		return errors;
 	}
 
@@ -373,16 +383,6 @@ export class StoreDetails extends Component {
 									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'
-											) }
-										</div>
-									) }
 								<FlexItem>
 									<div className="woocommerce-profile-wizard__newsletter-signup">
 										<CheckboxControl
diff --git a/plugins/woocommerce-admin/client/profile-wizard/steps/store-details/test/index.js b/plugins/woocommerce-admin/client/profile-wizard/steps/store-details/test/index.js
index b6f12f05551..4f548d7661c 100644
--- a/plugins/woocommerce-admin/client/profile-wizard/steps/store-details/test/index.js
+++ b/plugins/woocommerce-admin/client/profile-wizard/steps/store-details/test/index.js
@@ -40,6 +40,37 @@ describe( 'StoreDetails', () => {
 		} );
 	} );
 	describe( 'Email validation test cases', () => {
+		test( 'should fail email validation and disable continue button when isAgreeMarketing is true and email is empty', async () => {
+			const container = render(
+				<StoreDetails
+					{ ...testProps }
+					initialValues={ {
+						addressLine1: 'address1',
+						addressLine2: 'address2',
+						city: 'city',
+						countryState: 'state',
+						postCode: '123',
+						isAgreeMarketing: true,
+						storeEmail: 'wordpress@example.com',
+					} }
+				/>
+			);
+			const emailInput = container.getByLabelText( 'Email address' );
+			await userEvent.clear( emailInput );
+			userEvent.tab();
+			expect(
+				container.queryByText(
+					'Please enter your email address to subscribe'
+				)
+			).toBeInTheDocument();
+
+			expect(
+				container.queryByRole( 'button', {
+					name: 'Continue',
+				} ).disabled
+			).toBe( true );
+		} );
+
 		// test cases taken from wordpress php is_email test cases
 		// https://github.com/WordPress/wordpress-develop/blob/2648a5f984b8abf06872151898e3a61d3458a628/tests/phpunit/tests/formatting/isEmail.php
 		test.each( [
diff --git a/plugins/woocommerce/changelog/fix-32588-continue-button-is-enabled-when-email-is-null b/plugins/woocommerce/changelog/fix-32588-continue-button-is-enabled-when-email-is-null
new file mode 100644
index 00000000000..6a0adf290b3
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-32588-continue-button-is-enabled-when-email-is-null
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix continue button is enabled even when email is null in setup wizard