Fix industry tab not clickable after going back (https://github.com/woocommerce/woocommerce-admin/pull/8469)

* Fix industry tab not clickable after going back

* Add changelog

* Add e2e test for testing industry tab going back

* Add changelog

* Add navigate to fix the test

plugins/woocommerce-admin/changelogs/fix-8440-industry-tab-not-clicable

@@ -0,0 +1,4 @@
+Significance: patch
+Type: Fix
+
+Fix industry tab not clickable after going back. #8469

plugins/woocommerce-admin/client/profile-wizard/header.js

@@ -18,6 +18,7 @@ export default class ProfileWizardHeader extends Component {
 			showUnsavedChangesModal: false,
 		};
 		this.lastClickedStepKey = null;
+		this.onStepClick = this.onStepClick.bind( this );
 	}
 
 	shouldWarnForUnsavedChanges( step ) {
@@ -71,29 +72,30 @@ export default class ProfileWizardHeader extends Component {
 			( step ) => step.key === currentStep
 		);
 
-		visibleSteps.map( ( step, index ) => {
+		visibleSteps.forEach( ( step, index ) => {
 			const previousStep = visibleSteps[ index - 1 ];
+			step.isComplete = step.isComplete || index < currentStepIndex;
 
-			if ( index < currentStepIndex ) {
-				step.isComplete = true;
-			}
+			const canClickStepLabel =
+				! previousStep || previousStep.isComplete || step.isComplete;
 
-			if ( ! previousStep || previousStep.isComplete ) {
-				step.onClick = ( key ) => {
-					if ( this.shouldWarnForUnsavedChanges( currentStep ) ) {
-						this.setState( { showUnsavedChangesModal: true } );
-						this.lastClickedStepKey = key;
-					} else {
-						updateQueryString( { step: key } );
-					}
-				};
+			if ( canClickStepLabel ) {
+				step.onClick = this.onStepClick;
 			}
-			return step;
 		} );
-
 		return <Stepper steps={ visibleSteps } currentStep={ currentStep } />;
 	}
 
+	onStepClick( key ) {
+		const { currentStep } = this.props;
+		if ( this.shouldWarnForUnsavedChanges( currentStep ) ) {
+			this.setState( { showUnsavedChangesModal: true } );
+			this.lastClickedStepKey = key;
+		} else {
+			updateQueryString( { step: key } );
+		}
+	}
+
 	render() {
 		const currentStep = this.findCurrentStep();
 

plugins/woocommerce-admin/packages/admin-e2e-tests/CHANGELOG.md

@@ -14,6 +14,8 @@
 
 -   Update all js packages with minor/patch version changes. #8392
 
+-   Add E2E test for checking onboarding tab clickable after going back. #8469
+
 # 0.1.2
 
 -   Add Customers to analytics pages tested #7573

plugins/woocommerce-admin/packages/admin-e2e-tests/src/specs/activate-and-setup/complete-onboarding-wizard.ts

@@ -66,6 +66,17 @@ const testAdminOnboardingWizard = () => {
 			await profileWizard.continue();
 		} );
 
+		it( 'can click industry tab after going back', async () => {
+			await profileWizard.navigate();
+			await profileWizard.goToOBWStep( 'Store Details' );
+			await profileWizard.storeDetails.isDisplayed();
+
+			await profileWizard.goToOBWStep( 'Industry' );
+			await profileWizard.industry.isDisplayed();
+
+			await profileWizard.continue();
+		} );
+
 		it( 'can complete the product types section', async () => {
 			await profileWizard.productTypes.isDisplayed( 7 );