From a3d42be6b01319caa2c3f6d5a0cd0b90aab0bf5a Mon Sep 17 00:00:00 2001
From: Chi-Hsuan Huang <chihsuan.tw@gmail.com>
Date: Thu, 9 Jun 2022 17:30:06 +0800
Subject: [PATCH] Fix setup wizard click button loading state (#33358)

* Fix setup wizard usage button loading state

* Add e2e tests for usage button loading state
---
 ...72-setup-wizard-click-button-loading-state |  4 ++++
 packages/js/e2e-utils/src/components.js       |  6 +++++
 .../profile-wizard/steps/usage-modal.js       | 23 +++++++++++--------
 ...72-setup-wizard-click-button-loading-state |  4 ++++
 4 files changed, 28 insertions(+), 9 deletions(-)
 create mode 100644 packages/js/e2e-utils/changelog/fix-33172-setup-wizard-click-button-loading-state
 create mode 100644 plugins/woocommerce/changelog/fix-33172-setup-wizard-click-button-loading-state

diff --git a/packages/js/e2e-utils/changelog/fix-33172-setup-wizard-click-button-loading-state b/packages/js/e2e-utils/changelog/fix-33172-setup-wizard-click-button-loading-state
new file mode 100644
index 00000000000..5e3e2a946d2
--- /dev/null
+++ b/packages/js/e2e-utils/changelog/fix-33172-setup-wizard-click-button-loading-state
@@ -0,0 +1,4 @@
+Significance: patch
+Type: add
+
+Add tests to check usage button loading state
diff --git a/packages/js/e2e-utils/src/components.js b/packages/js/e2e-utils/src/components.js
index a2d5852fc63..02f795ddddb 100644
--- a/packages/js/e2e-utils/src/components.js
+++ b/packages/js/e2e-utils/src/components.js
@@ -129,6 +129,12 @@ const completeOnboardingWizard = async () => {
 		expect( continueButtons ).toHaveLength( 1 );
 
 		await continueButtons[ 0 ].click();
+		await expect( page ).toMatchElement(
+			'.woocommerce-usage-modal__actions button.is-secondary.is-busy'
+		);
+		await expect( page ).not.toMatchElement(
+			'.woocommerce-usage-modal__actions button.is-primary:disabled'
+		);
 	}
 	await page.waitForNavigation( { waitUntil: 'networkidle0' } );
 
diff --git a/plugins/woocommerce-admin/client/profile-wizard/steps/usage-modal.js b/plugins/woocommerce-admin/client/profile-wizard/steps/usage-modal.js
index 2af08a9728c..b6facf75395 100644
--- a/plugins/woocommerce-admin/client/profile-wizard/steps/usage-modal.js
+++ b/plugins/woocommerce-admin/client/profile-wizard/steps/usage-modal.js
@@ -17,6 +17,7 @@ class UsageModal extends Component {
 		this.state = {
 			isLoadingScripts: false,
 			isRequestStarted: false,
+			selectedAction: null,
 		};
 	}
 
@@ -131,7 +132,7 @@ class UsageModal extends Component {
 			acceptActionText = __( 'Yes, count me in!', 'woocommerce' ),
 		} = this.props;
 
-		const { isRequestStarted } = this.state;
+		const { isRequestStarted, selectedAction } = this.state;
 		const isBusy = isRequestStarted && isRequesting;
 
 		return (
@@ -148,19 +149,23 @@ class UsageModal extends Component {
 					<div className="woocommerce-usage-modal__actions">
 						<Button
 							isSecondary
-							isBusy={ isBusy }
-							onClick={ () =>
-								this.updateTracking( { allowTracking: false } )
-							}
+							isBusy={ isBusy && selectedAction === 'dismiss' }
+							disabled={ isBusy && selectedAction === 'accept' }
+							onClick={ () => {
+								this.setState( { selectedAction: 'dismiss' } );
+								this.updateTracking( { allowTracking: false } );
+							} }
 						>
 							{ dismissActionText }
 						</Button>
 						<Button
 							isPrimary
-							isBusy={ isBusy }
-							onClick={ () =>
-								this.updateTracking( { allowTracking: true } )
-							}
+							isBusy={ isBusy && selectedAction === 'accept' }
+							disabled={ isBusy && selectedAction === 'dismiss' }
+							onClick={ () => {
+								this.setState( { selectedAction: 'accept' } );
+								this.updateTracking( { allowTracking: true } );
+							} }
 						>
 							{ acceptActionText }
 						</Button>
diff --git a/plugins/woocommerce/changelog/fix-33172-setup-wizard-click-button-loading-state b/plugins/woocommerce/changelog/fix-33172-setup-wizard-click-button-loading-state
new file mode 100644
index 00000000000..f36efcd00f3
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-33172-setup-wizard-click-button-loading-state
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+fix setup wizard usage button loading state