Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix setup wizard click button loading state (#33358) 

* Fix setup wizard usage button loading state

* Add e2e tests for usage button loading state
This commit is contained in:
Chi-Hsuan Huang 2022-06-09 17:30:06 +08:00 committed by GitHub
parent e80312eef0
commit a3d42be6b0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 28 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/js/e2e-utils/changelog/fix-33172-setup-wizard-click-button-loading-state Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: add
Add tests to check usage button loading state

6
packages/js/e2e-utils/src/components.js
View File

@ -129,6 +129,12 @@ const completeOnboardingWizard = async () => {
expect( continueButtons ).toHaveLength( 1 ); expect( continueButtons ).toHaveLength( 1 );
await continueButtons[ 0 ].click(); 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' } ); await page.waitForNavigation( { waitUntil: 'networkidle0' } );

23
plugins/woocommerce-admin/client/profile-wizard/steps/usage-modal.js
View File

@ -17,6 +17,7 @@ class UsageModal extends Component {
this.state = { this.state = {
isLoadingScripts: false, isLoadingScripts: false,
isRequestStarted: false, isRequestStarted: false,
selectedAction: null,
}; };
} }
@ -131,7 +132,7 @@ class UsageModal extends Component {
acceptActionText = __( 'Yes, count me in!', 'woocommerce' ), acceptActionText = __( 'Yes, count me in!', 'woocommerce' ),
} = this.props; } = this.props;
const { isRequestStarted } = this.state; const { isRequestStarted, selectedAction } = this.state;
const isBusy = isRequestStarted && isRequesting; const isBusy = isRequestStarted && isRequesting;
return ( return (
@ -148,19 +149,23 @@ class UsageModal extends Component {
<div className="woocommerce-usage-modal__actions"> <div className="woocommerce-usage-modal__actions">
<Button <Button
isSecondary isSecondary
isBusy={ isBusy } isBusy={ isBusy && selectedAction === 'dismiss' }
onClick={ () => disabled={ isBusy && selectedAction === 'accept' }
this.updateTracking( { allowTracking: false } ) onClick={ () => {
} this.setState( { selectedAction: 'dismiss' } );
this.updateTracking( { allowTracking: false } );
} }
> >
{ dismissActionText } { dismissActionText }
</Button> </Button>
<Button <Button
isPrimary isPrimary
isBusy={ isBusy } isBusy={ isBusy && selectedAction === 'accept' }
onClick={ () => disabled={ isBusy && selectedAction === 'dismiss' }
this.updateTracking( { allowTracking: true } ) onClick={ () => {
} this.setState( { selectedAction: 'accept' } );
this.updateTracking( { allowTracking: true } );
} }
> >
{ acceptActionText } { acceptActionText }
</Button> </Button>

4
plugins/woocommerce/changelog/fix-33172-setup-wizard-click-button-loading-state Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: fix
fix setup wizard usage button loading state