OBW: Fix free extensions list isn't updated after store location or industry is changed (https://github.com/woocommerce/woocommerce-admin/pull/8099)

* Rename variables and remove unnecessary select calls in selective-extensions-bundle

* Invalidate getFreeExtensions resolution whenever country or industry
changed

* Fix grammar

* Add changelogs

plugins/woocommerce-admin/changelogs/fix-8007-update-free-extensions-when-country-industry-changed

@@ -0,0 +1,4 @@
+Significance: patch
+Type: Fix
+
+Fix free extensions list isn't updated after store location or industry is changed. #8099

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

@@ -8,13 +8,9 @@ import { Link } from '@woocommerce/components';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { Icon, chevronDown, chevronUp } from '@wordpress/icons';
 import interpolateComponents from 'interpolate-components';
-import {
+import { pluginNames, ONBOARDING_STORE_NAME } from '@woocommerce/data';
-	pluginNames,
-	ONBOARDING_STORE_NAME,
-	SETTINGS_STORE_NAME,
-} from '@woocommerce/data';
 import { recordEvent } from '@woocommerce/tracks';
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -25,7 +21,7 @@ import sanitizeHTML from '~/lib/sanitize-html';
 import { setAllPropsToValue } from '~/lib/collections';
 import { getCountryCode } from '../../../../../../dashboard/utils';
 
-const ALLOWED_PLUGIN_LISTS = [ 'obw/basics', 'obw/grow' ];
+const ALLOWED_PLUGIN_CATEGORIES = [ 'obw/basics', 'obw/grow' ];
 
 const FreeBadge = () => {
 	return (
@@ -215,44 +211,45 @@ export const createInstallExtensionOptions = ( extensions = [] ) => {
 export const SelectiveExtensionsBundle = ( {
 	isInstallingActivating,
 	onSubmit,
+	country,
+	productTypes,
+	industry,
 } ) => {
 	const [ showExtensions, setShowExtensions ] = useState( false );
 	const [ installExtensionOptions, setInstallExtensionOptions ] = useState(
 		createInstallExtensionOptions()
 	);
-
 	const {
-		countryCode,
+		freeExtensions: freeExtensionBundleByCategory,
-		freeExtensions,
 		isResolving,
-		profileItems,
 	} = useSelect( ( select ) => {
-		const {
+		const { getFreeExtensions, hasFinishedResolution } = select(
-			getFreeExtensions,
+			ONBOARDING_STORE_NAME
-			getProfileItems,
+		);
-			hasFinishedResolution,
-		} = select( ONBOARDING_STORE_NAME );
-		const { getSettings } = select( SETTINGS_STORE_NAME );
-		const { general: settings = {} } = getSettings( 'general' );
-
 		return {
-			countryCode: getCountryCode( settings.woocommerce_default_country ),
 			freeExtensions: getFreeExtensions(),
 			isResolving: ! hasFinishedResolution( 'getFreeExtensions' ),
-			profileItems: getProfileItems(),
 		};
 	} );
 
+	const { invalidateResolutionForStoreSelector } = useDispatch(
+		ONBOARDING_STORE_NAME
+	);
+
+	useEffect( () => {
+		invalidateResolutionForStoreSelector( 'getFreeExtensions' );
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ country, industry ] );
+
 	const installableExtensions = useMemo( () => {
-		const { product_types: productTypes } = profileItems;
+		return freeExtensionBundleByCategory.filter( ( extensionBundle ) => {
-		return freeExtensions.filter( ( list ) => {
 			if (
 				window.wcAdminFeatures &&
 				window.wcAdminFeatures.subscriptions &&
-				countryCode === 'US'
+				getCountryCode( country ) === 'US'
 			) {
 				if ( productTypes.includes( 'subscriptions' ) ) {
-					list.plugins = list.plugins.filter(
+					extensionBundle.plugins = extensionBundle.plugins.filter(
 						( extension ) =>
 							extension.key !== 'woocommerce-payments' ||
 							( extension.key === 'woocommerce-payments' &&
@@ -260,9 +257,9 @@ export const SelectiveExtensionsBundle = ( {
 					);
 				}
 			}
-			return ALLOWED_PLUGIN_LISTS.includes( list.key );
+			return ALLOWED_PLUGIN_CATEGORIES.includes( extensionBundle.key );
 		} );
-	}, [ freeExtensions, profileItems, countryCode ] );
+	}, [ freeExtensionBundleByCategory, productTypes, country ] );
 
 	useEffect( () => {
 		if ( ! isInstallingActivating ) {

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

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { render } from '@testing-library/react';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import userEvent from '@testing-library/user-event';
 import { pluginNames } from '@woocommerce/data';
 
@@ -83,15 +83,19 @@ const freeExtensions = [
 	},
 ];
 
-const profileItems = { product_types: [] };
-
 describe( 'Selective extensions bundle', () => {
-	it( 'should list installable free extensions from obw/basics and obw/grow', () => {
+	beforeAll( () => {
 		useSelect.mockReturnValue( {
 			freeExtensions,
 			isResolving: false,
-			profileItems,
 		} );
+
+		useDispatch.mockReturnValue( {
+			invalidateResolutionForStoreSelector: () => {},
+		} );
+	} );
+
+	it( 'should list installable free extensions from obw/basics and obw/grow', () => {
 		const { getByText, queryByText } = render(
 			<SelectiveExtensionsBundle isInstallingActivating={ false } />
 		);
@@ -112,11 +116,6 @@ describe( 'Selective extensions bundle', () => {
 	} );
 
 	it( 'should list installable extensions when dropdown is clicked', () => {
-		useSelect.mockReturnValue( {
-			freeExtensions,
-			isResolving: false,
-			profileItems,
-		} );
 		const { getAllByRole, getByText, queryByText } = render(
 			<SelectiveExtensionsBundle isInstallingActivating={ false } />
 		);
@@ -149,7 +148,7 @@ describe( 'Selective extensions bundle', () => {
 			} );
 		} );
 
-		it( 'should render not title when no plugins', () => {
+		it( 'should not render title when no plugins', () => {
 			const title = 'This is title';
 			const { queryByText } = render(
 				<ExtensionSection