Making business details sticky in OBW (https://github.com/woocommerce/woocommerce-admin/pull/7426)

plugins/woocommerce-admin/TESTING-INSTRUCTIONS.md

@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+### Making business details sticky in OBW #7426
+
+1. Start out with a fresh store
+2. Start the on-boarding wizard and move through to the "Business details" step
+3. Fill out items, and then hit Continue to move to the "Free features" tab
+4. Then, before hitting Continue again, click the "Business details" tab above to move back to that step
+5. Confirm that the previously selected values are still correct
+
 ### Match stock status value in CSV download to the table #7284
 
 1. Clone this branch and run npm start
@@ -12,6 +20,7 @@
 6. Open the downloaded file and confirm the status values match the table.
 
 ### Fix end date for last periods #6584
+
 1. Update your system clock to March 2021
 2. Create a completed order on 29th February 2020
 3. Go to Analytics > Revenue
@@ -23,6 +32,7 @@
 9. Observe that the end date is the same as the selected quarter and subtract 1 year
 10. In the date range filter, select "Last Year" preset and compare to "Previous Year"
 11. Observe that the end date is the same as the selected year and subtract 1 year
+
 ## 2.5.0
 
 ### Fix WC Home crash when the Analytics is disabled #7339
@@ -87,25 +97,26 @@ Please make sure to test it on Safari as well.
 1. Go to the OBW and look at the Free features tab
 1. Observe no Facebook extension in the list
 
-###  "Terms of service" link disappears from "Set up Tax" screen #7269
+### "Terms of service" link disappears from "Set up Tax" screen #7269
 
 1. Go to OBW setup wizard.
 2. Uncheck the "WooCommerce shipping" and "WooCommerce Tax" options at Free features step.
 3. Complete the OBW setup.
 4. Go to WooCommerce->Home.
 5. Click on "Set up Tax" option on Task list.
-6. TOS should not blink. 
+6. TOS should not blink.
 
 ### Use saved values if available when switching tabs #7226
 
 1. Start onboarding wizard and continue to step 4.
 2. Enter selections for business details and choose "Continue"
 3. Select the tab "Business details" to go back
-4. Confirm that the previously selected values are shown. 
+4. Confirm that the previously selected values are shown.
 
 ### Change the emailed report file name #7178
 
 **Confirm the default behaviour remains the same**
+
 1. Create a new store and install the [WP Mail Logging by MailPoet plugin](https://wordpress.org/plugins/wp-mail-logging/)
 2. Go to Analytics -> Revenue and change the date range to last month
 3. Click the download button and make sure you see the "Your revenue report will be emailed to you" notification
@@ -113,13 +124,17 @@ Please make sure to test it on Safari as well.
 5. Go to Tools -> WP Mail Log and check the latest email. The URL linked to the "Download your Revenue report" should work as usual. The URL will be something like `filename=wc-revenue-report-export-16236128226138`
 
 **Confirm the new filter is working**
+
 1. Add this code to the `woocommerce-admin.php` file
+
 ```php
 add_filter( 'woocommerce_admin_export_id', function ($export_id) {
 	return 'different_export_id';
 } );
 ```
+
 2. Repeat the same steps from above. The filename in the link now should be `different_export_id`.
+
 ### Payment gateway suggestions feature
 
 1. Navigate to the homescreen via WooCommerce -> Home
@@ -176,13 +191,11 @@ Individual payment gateway plugins dictate the settings and connection flow. For
 4. In Chrome, open the console "Network" tab and right-click on the `get-params` request and select "Block request URL"
 5. Refresh the page and note that the manual settings flow is shown
 
-
 ##### Klarna
 
 1. Set your store country to one of the following: `SE, FI, NO`
 2. Don't select CBD as an industry during onboarding
 
-
 ##### Mollie
 
 1. Set your store country to one of the following: `FR, DE, GB, AT, CH, ES, IT, PL, FI, NL, BE`
@@ -205,7 +218,6 @@ Individual payment gateway plugins dictate the settings and connection flow. For
 1. Make sure "Enable" is shown and clicking this enables the gateway
 2. Make sure the "Manage" button is shown after enabling the gateway
 
-
 ##### Direct bank transfer
 
 1. Make sure "Set up" is shown next to the gateway

plugins/woocommerce-admin/changelogs/fix-6718

@@ -0,0 +1,4 @@
+Significance: patch
+Type: Fix
+
+Making Business Details sticky in onboarding wizard

plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/index.js

@@ -76,17 +76,8 @@ class BusinessDetails extends Component {
 			createNotice,
 			goToNextStep,
 			installAndActivatePlugins,
-			updateProfileItems,
 		} = this.props;
 
-		const {
-			other_platform: otherPlatform,
-			other_platform_name: otherPlatformName,
-			product_count: productCount,
-			revenue,
-			selling_venues: sellingVenues,
-		} = this.state.savedValues;
-
 		const businessExtensions = filterBusinessExtensions(
 			extensionInstallationOptions
 		);
@@ -104,24 +95,9 @@ class BusinessDetails extends Component {
 				extensionInstallationOptions[ 'woocommerce-payments' ],
 		} );
 
-		const updates = {
-			other_platform: otherPlatform,
-			other_platform_name:
-				otherPlatform === 'other' ? otherPlatformName : '',
-			product_count: productCount,
-			revenue,
-			selling_venues: sellingVenues,
-			business_extensions: businessExtensions,
-		};
-
-		// Remove possible empty values like `revenue` and `other_platform`.
-		Object.keys( updates ).forEach(
-			( key ) => updates[ key ] === '' && delete updates[ key ]
-		);
-
 		const promises = [
-			updateProfileItems( updates ).catch( () => {
-				throw new Error();
+			this.persistProfileItems( {
+				business_extensions: businessExtensions,
 			} ),
 		];
 
@@ -153,6 +129,53 @@ class BusinessDetails extends Component {
 			} );
 	}
 
+	async persistProfileItems( additions = {} ) {
+		const { updateProfileItems, createNotice } = this.props;
+
+		const {
+			other_platform: otherPlatform,
+			other_platform_name: otherPlatformName,
+			product_count: productCount,
+			revenue,
+			selling_venues: sellingVenues,
+		} = this.state.savedValues;
+
+		const updates = {
+			other_platform: otherPlatform,
+			other_platform_name:
+				otherPlatform === 'other' ? otherPlatformName : '',
+			product_count: productCount,
+			revenue,
+			selling_venues: sellingVenues,
+			...additions,
+		};
+
+		// Remove possible empty values like `revenue` and `other_platform`.
+		const finalUpdates = Object.entries( updates ).reduce(
+			( acc, [ key, val ] ) => {
+				if ( val !== '' ) {
+					return {
+						...acc,
+						[ key ]: val,
+					};
+				}
+
+				return acc;
+			},
+			{}
+		);
+
+		return updateProfileItems( finalUpdates ).catch( () => {
+			createNotice(
+				'error',
+				__(
+					'There was a problem updating your business details',
+					'woocommerce-admin'
+				)
+			);
+		} );
+	}
+
 	validate( values ) {
 		const errors = {};
 
@@ -372,7 +395,10 @@ class BusinessDetails extends Component {
 								<CardFooter isBorderless justify="center">
 									<Button
 										isPrimary
-										onClick={ handleSubmit }
+										onClick={ async () => {
+											await handleSubmit();
+											this.persistProfileItems();
+										} }
 										disabled={ ! isValidForm }
 										isBusy={ isInstallingActivating }
 									>
@@ -388,7 +414,10 @@ class BusinessDetails extends Component {
 									</Button>
 									{ hasInstallActivateError && (
 										<Button
-											onClick={ () => goToNextStep() }
+											onClick={ () => {
+												this.persistProfileItems();
+												goToNextStep();
+											} }
 										>
 											{ __(
 												'Continue without installing',