Disable the continue button while requests are being made (https://github.com/woocommerce/woocommerce-admin/pull/5704)

* Disable the continue button while requests are being made

* Use isUpdatingProfileItems method name for all

* Add disabled attr for the choose buttons

plugins/woocommerce-admin/client/profile-wizard/steps/benefits/index.js

@@ -198,7 +198,7 @@ class Benefits extends Component {
 		const {
 			activePlugins,
 			isInstallingActivating,
-			isRequesting,
+			isUpdatingProfileItems,
 		} = this.props;
 
 		const pluginNamesString = this.pluginsToInstall
@@ -238,15 +238,15 @@ class Benefits extends Component {
 					<Button
 						isPrimary
 						isBusy={ isInstallAction }
-						disabled={ isRequesting || isInstallAction }
+						disabled={ isUpdatingProfileItems || isInstallAction }
 						onClick={ this.startPluginInstall }
 					>
 						{ __( 'Yes please!', 'woocommerce-admin' ) }
 					</Button>
 					<Button
 						isSecondary
-						isBusy={ isRequesting && ! isInstallAction }
-						disabled={ isRequesting || isInstallAction }
+						isBusy={ isUpdatingProfileItems && ! isInstallAction }
+						disabled={ isUpdatingProfileItems || isInstallAction }
 						className="woocommerce-profile-wizard__skip"
 						onClick={ this.skipPluginInstall }
 					>
@@ -307,7 +307,9 @@ export default compose(
 				getOnboardingError( 'updateProfileItems' )
 			),
 			profileItems: getProfileItems(),
-			isRequesting: isOnboardingRequesting( 'updateProfileItems' ),
+			isUpdatingProfileItems: isOnboardingRequesting(
+				'updateProfileItems'
+			),
 			isInstallingActivating:
 				isPluginsRequesting( 'installPlugins' ) ||
 				isPluginsRequesting( 'activatePlugins' ) ||

plugins/woocommerce-admin/client/profile-wizard/steps/business-details.js

@@ -658,6 +658,7 @@ class BusinessDetails extends Component {
 			goToNextStep,
 			isInstallingActivating,
 			hasInstallActivateError,
+			isUpdatingProfileItems,
 		} = this.props;
 		const { formatAmount } = this.context;
 		const productCountOptions = [
@@ -920,7 +921,11 @@ class BusinessDetails extends Component {
 										<Button
 											isPrimary
 											onClick={ handleSubmit }
-											disabled={ ! isValidForm }
+											disabled={
+												! isValidForm ||
+												isUpdatingProfileItems ||
+												isInstallingActivating
+											}
 											isBusy={ isInstallingActivating }
 										>
 											{ ! hasInstallActivateError
@@ -960,10 +965,16 @@ BusinessDetails.contextType = CurrencyContext;
 
 export default compose(
 	withSelect( ( select ) => {
-		const { getSettings, getSettingsError } = select( SETTINGS_STORE_NAME );
-		const { getProfileItems, getOnboardingError } = select(
-			ONBOARDING_STORE_NAME
-		);
+		const {
+			getSettings,
+			getSettingsError,
+			isUpdateSettingsRequesting,
+		} = select( SETTINGS_STORE_NAME );
+		const {
+			getProfileItems,
+			getOnboardingError,
+			isOnboardingRequesting,
+		} = select( ONBOARDING_STORE_NAME );
 		const { getPluginsError, isPluginsRequesting } = select(
 			PLUGINS_STORE_NAME
 		);
@@ -977,6 +988,9 @@ export default compose(
 			profileItems: getProfileItems(),
 			isSettingsError: Boolean( getSettingsError( 'general' ) ),
 			settings,
+			isUpdatingProfileItems:
+				isOnboardingRequesting( 'updateProfileItems' ) ||
+				isUpdateSettingsRequesting( 'general' ),
 			isInstallingActivating:
 				isPluginsRequesting( 'installPlugins' ) ||
 				isPluginsRequesting( 'activatePlugins' ) ||

plugins/woocommerce-admin/client/profile-wizard/steps/industry.js

@@ -158,7 +158,7 @@ class Industry extends Component {
 	render() {
 		const { industries } = onboarding;
 		const { error, selected, textInputListContent } = this.state;
-		const { locationSettings } = this.props;
+		const { locationSettings, isProfileItemsRequesting } = this.props;
 		const region = getCurrencyRegion(
 			locationSettings.woocommerce_default_country
 		);
@@ -239,7 +239,9 @@ class Industry extends Component {
 						<Button
 							isPrimary
 							onClick={ this.onContinue }
-							disabled={ ! selected.length }
+							disabled={
+								! selected.length || isProfileItemsRequesting
+							}
 						>
 							{ __( 'Continue', 'woocommerce-admin' ) }
 						</Button>
@@ -252,9 +254,11 @@ class Industry extends Component {
 
 export default compose(
 	withSelect( ( select ) => {
-		const { getProfileItems, getOnboardingError } = select(
-			ONBOARDING_STORE_NAME
-		);
+		const {
+			getProfileItems,
+			getOnboardingError,
+			isOnboardingRequesting,
+		} = select( ONBOARDING_STORE_NAME );
 		const { getSettings } = select( SETTINGS_STORE_NAME );
 		const { general: locationSettings = {} } = getSettings( 'general' );
 
@@ -262,6 +266,9 @@ export default compose(
 			isError: Boolean( getOnboardingError( 'updateProfileItems' ) ),
 			profileItems: getProfileItems(),
 			locationSettings,
+			isProfileItemsRequesting: isOnboardingRequesting(
+				'updateProfileItems'
+			),
 		};
 	} ),
 	withDispatch( ( dispatch ) => {

plugins/woocommerce-admin/client/profile-wizard/steps/product-types/index.js

@@ -102,6 +102,7 @@ export class ProductTypes extends Component {
 	render() {
 		const { productTypes = {} } = getSetting( 'onboarding', {} );
 		const { error, isMonthlyPricing, selected } = this.state;
+		const { isProfileItemsRequesting } = this.props;
 
 		return (
 			<div className="woocommerce-profile-wizard__product-types">
@@ -157,7 +158,10 @@ export class ProductTypes extends Component {
 							<Button
 								isPrimary
 								onClick={ this.onContinue }
-								disabled={ ! selected.length }
+								disabled={
+									! selected.length ||
+									isProfileItemsRequesting
+								}
 							>
 								{ __( 'Continue', 'woocommerce-admin' ) }
 							</Button>
@@ -198,13 +202,18 @@ export class ProductTypes extends Component {
 
 export default compose(
 	withSelect( ( select ) => {
-		const { getProfileItems, getOnboardingError } = select(
-			ONBOARDING_STORE_NAME
-		);
+		const {
+			getProfileItems,
+			getOnboardingError,
+			isOnboardingRequesting,
+		} = select( ONBOARDING_STORE_NAME );
 
 		return {
 			isError: Boolean( getOnboardingError( 'updateProfileItems' ) ),
 			profileItems: getProfileItems(),
+			isProfileItemsRequesting: isOnboardingRequesting(
+				'updateProfileItems'
+			),
 		};
 	} ),
 	withDispatch( ( dispatch ) => {

plugins/woocommerce-admin/client/profile-wizard/steps/store-details/index.js

@@ -172,7 +172,7 @@ class StoreDetails extends Component {
 			isStoreDetailsPopoverVisible,
 			isSkipSetupPopoverVisible,
 		} = this.state;
-		const { skipProfiler } = this.props;
+		const { skipProfiler, isUpdatingProfileItems } = this.props;
 
 		/* eslint-disable @wordpress/i18n-no-collapsible-whitespace */
 		const skipSetupText = __(
@@ -290,7 +290,10 @@ class StoreDetails extends Component {
 										<Button
 											isPrimary
 											onClick={ handleSubmit }
-											disabled={ ! isValidForm }
+											disabled={
+												! isValidForm ||
+												isUpdatingProfileItems
+											}
 										>
 											{ __(
 												'Continue',
@@ -357,10 +360,16 @@ StoreDetails.contextType = CurrencyContext;
 
 export default compose(
 	withSelect( ( select ) => {
-		const { getSettings, getSettingsError } = select( SETTINGS_STORE_NAME );
-		const { getOnboardingError, getProfileItems } = select(
-			ONBOARDING_STORE_NAME
-		);
+		const {
+			getSettings,
+			getSettingsError,
+			isUpdateSettingsRequesting,
+		} = select( SETTINGS_STORE_NAME );
+		const {
+			getOnboardingError,
+			getProfileItems,
+			isOnboardingRequesting,
+		} = select( ONBOARDING_STORE_NAME );
 
 		const profileItems = getProfileItems();
 		const isProfileItemsError = Boolean(
@@ -369,11 +378,14 @@ export default compose(
 
 		const { general: settings = {} } = getSettings( 'general' );
 		const isSettingsError = Boolean( getSettingsError( 'general' ) );
-
+		const isUpdatingProfileItems =
+			isOnboardingRequesting( 'updateProfileItems' ) ||
+			isUpdateSettingsRequesting( 'general' );
 		return {
 			isProfileItemsError,
 			isSettingsError,
 			profileItems,
+			isUpdatingProfileItems,
 			settings,
 		};
 	} ),

plugins/woocommerce-admin/client/profile-wizard/steps/theme/index.js

@@ -229,6 +229,7 @@ class Theme extends Component {
 								isPrimary
 								onClick={ () => this.onChoose( theme, 'card' ) }
 								isBusy={ chosen === slug }
+								disabled={ chosen === slug }
 							>
 								{ __(
 									'Continue with my active theme',
@@ -240,6 +241,7 @@ class Theme extends Component {
 								isSecondary
 								onClick={ () => this.onChoose( theme, 'card' ) }
 								isBusy={ chosen === slug }
+								disabled={ chosen === slug }
 							>
 								{ __( 'Choose', 'woocommerce-admin' ) }
 							</Button>