Fix setup wizard free features checkbox re-check itself (https://github.com/woocommerce/woocommerce-admin/pull/8169)

* Fix setup wizard free features checkbox re-check itself

* Add changelog

plugins/woocommerce-admin/changelogs/fix-8163-setup-wizard-features-checkbox-recheck-itself

@@ -0,0 +1,4 @@
+Significance: patch
+Type: Fix
+
+Fix setup wizard free features checkbox re-check itself. #8169

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

@@ -191,21 +191,26 @@ export const ExtensionSection = ( {
 	);
 };
 
-export const createInstallExtensionOptions = ( extensions = [] ) => {
-	const defaultInstallExtensionOptions = { install_extensions: true };
-	return extensions.reduce( ( acc, curr ) => {
-		const plugins = curr.plugins.reduce(
-			( pluginAcc, { key, selected } ) => {
-				return { ...pluginAcc, [ key ]: selected ?? true };
-			},
-			{}
-		);
-
+export const createInstallExtensionOptions = ( {
+	installableExtensions,
+	prevInstallExtensionOptions,
+} ) => {
+	return installableExtensions.reduce( ( acc, curr ) => {
+		const plugins = curr.plugins.reduce( ( pluginAcc, plugin ) => {
+			// If the option exists in the previous state, use that so the option won't be reset.
+			if ( prevInstallExtensionOptions.hasOwnProperty( plugin.key ) ) {
+				return pluginAcc;
+			}
+			return {
+				...pluginAcc,
+				[ plugin.key ]: true,
+			};
+		}, {} );
 		return {
 			...acc,
 			...plugins,
 		};
-	}, defaultInstallExtensionOptions );
+	}, prevInstallExtensionOptions );
 };
 
 export const SelectiveExtensionsBundle = ( {
@@ -216,9 +221,9 @@ export const SelectiveExtensionsBundle = ( {
 	industry,
 } ) => {
 	const [ showExtensions, setShowExtensions ] = useState( false );
-	const [ installExtensionOptions, setInstallExtensionOptions ] = useState(
-		createInstallExtensionOptions()
-	);
+	const [ installExtensionOptions, setInstallExtensionOptions ] = useState( {
+		install_extensions: true,
+	} );
 	const {
 		freeExtensions: freeExtensionBundleByCategory,
 		isResolving,
@@ -263,11 +268,16 @@ export const SelectiveExtensionsBundle = ( {
 
 	useEffect( () => {
 		if ( ! isInstallingActivating ) {
-			setInstallExtensionOptions(
-				createInstallExtensionOptions( installableExtensions )
+			setInstallExtensionOptions( ( currInstallExtensionOptions ) =>
+				createInstallExtensionOptions( {
+					installableExtensions,
+					prevInstallExtensionOptions: currInstallExtensionOptions,
+				} )
 			);
 		}
-	}, [ installableExtensions, isInstallingActivating ] );
+		// Disable reason: This effect should only called when the installableExtensions are changed.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ installableExtensions ] );
 
 	const getCheckboxChangeHandler = ( key ) => {
 		return ( checked ) => {

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

@@ -103,34 +103,31 @@ describe( 'BusinessDetails', () => {
 
 	describe( 'createInstallExtensionOptions', () => {
 		test( 'selected by default', () => {
-			const extensions = [
+			const installableExtensions = [
 				{
 					plugins: [
 						{
 							key: 'visible-and-not-selected',
-							selected: false,
 							isVisible: () => true,
 						},
 						{
 							key: 'visible-and-selected',
-							selected: true,
 							isVisible: () => true,
 						},
 						{
 							key: 'this-should-not-show-at-all',
-							selected: true,
 							isVisible: () => false,
 						},
 					],
 				},
 			];
 
-			const values = createInstallExtensionOptions(
-				extensions,
-				'US',
-				'',
-				[]
-			);
+			const values = createInstallExtensionOptions( {
+				installableExtensions,
+				prevInstallExtensionOptions: {
+					'visible-and-not-selected': false,
+				},
+			} );
 
 			expect( values ).toEqual(
 				expect.objectContaining( {