diff --git a/plugins/woocommerce-admin/changelogs/fix-8006-hide-header-if-no-plugin b/plugins/woocommerce-admin/changelogs/fix-8006-hide-header-if-no-plugin
new file mode 100644
index 00000000000..c5a282c53fb
--- /dev/null
+++ b/plugins/woocommerce-admin/changelogs/fix-8006-hide-header-if-no-plugin
@@ -0,0 +1,4 @@
+Significance: patch
+Type: Fix
+
+Hide the extensions header when no available plugins in the category. #8089
diff --git a/plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/selective-extensions-bundle/index.js b/plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/selective-extensions-bundle/index.js
index ce1247d64c2..064d4d60c8e 100644
--- a/plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/selective-extensions-bundle/index.js
+++ b/plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/selective-extensions-bundle/index.js
@@ -159,8 +159,44 @@ const BundleExtensionCheckbox = ( { onChange, description, isChecked } ) => {
);
};
-const baseValues = { install_extensions: true };
-export const createInitialValues = ( extensions ) => {
+export const ExtensionSection = ( {
+ isResolving,
+ title,
+ extensions,
+ installExtensionOptions,
+ onCheckboxChange,
+} ) => {
+ if ( isResolving ) {
+ return (
+
+
+
+ );
+ }
+
+ if ( extensions.length === 0 ) {
+ return null;
+ }
+
+ return (
+
+
+ { title }
+
+ { extensions.map( ( { description, key } ) => (
+
+ ) ) }
+
+ );
+};
+
+export const createInstallExtensionOptions = ( extensions = [] ) => {
+ const defaultInstallExtensionOptions = { install_extensions: true };
return extensions.reduce( ( acc, curr ) => {
const plugins = curr.plugins.reduce(
( pluginAcc, { key, selected } ) => {
@@ -173,7 +209,7 @@ export const createInitialValues = ( extensions ) => {
...acc,
...plugins,
};
- }, baseValues );
+ }, defaultInstallExtensionOptions );
};
export const SelectiveExtensionsBundle = ( {
@@ -181,7 +217,9 @@ export const SelectiveExtensionsBundle = ( {
onSubmit,
} ) => {
const [ showExtensions, setShowExtensions ] = useState( false );
- const [ values, setValues ] = useState( baseValues );
+ const [ installExtensionOptions, setInstallExtensionOptions ] = useState(
+ createInstallExtensionOptions()
+ );
const {
countryCode,
@@ -224,19 +262,20 @@ export const SelectiveExtensionsBundle = ( {
}
return ALLOWED_PLUGIN_LISTS.includes( list.key );
} );
- }, [ freeExtensions, profileItems ] );
+ }, [ freeExtensions, profileItems, countryCode ] );
useEffect( () => {
if ( ! isInstallingActivating ) {
- const initialValues = createInitialValues( installableExtensions );
- setValues( initialValues );
+ setInstallExtensionOptions(
+ createInstallExtensionOptions( installableExtensions )
+ );
}
- }, [ installableExtensions ] );
+ }, [ installableExtensions, isInstallingActivating ] );
const getCheckboxChangeHandler = ( key ) => {
return ( checked ) => {
const newState = {
- ...values,
+ ...installExtensionOptions,
[ key ]: checked,
};
@@ -246,13 +285,13 @@ export const SelectiveExtensionsBundle = ( {
if ( allExtensionsDisabled ) {
// If all the extensions are disabled then disable the "Install Extensions" checkbox too
- setValues( {
+ setInstallExtensionOptions( {
...newState,
install_extensions: false,
} );
} else {
- setValues( {
- ...values,
+ setInstallExtensionOptions( {
+ ...installExtensionOptions,
[ key ]: checked,
install_extensions: true,
} );
@@ -269,10 +308,15 @@ export const SelectiveExtensionsBundle = ( {
{
- setValues(
- setAllPropsToValue( values, checked )
+ setInstallExtensionOptions(
+ setAllPropsToValue(
+ installExtensionOptions,
+ checked
+ )
);
} }
/>
@@ -308,41 +352,25 @@ export const SelectiveExtensionsBundle = ( {
{ showExtensions &&
installableExtensions.map(
- ( { plugins, key: sectionKey, title } ) => (
-
- { isResolving ? (
-
- ) : (
- <>
-
- { title }
-
- { plugins.map(
- ( { description, key } ) => (
-
- )
- ) }
- >
- ) }
-
+ ( { plugins, key, title } ) => (
+
)
) }
{ renderBusinessExtensionHelpText(
- values,
+ installExtensionOptions,
isInstallingActivating
) }
diff --git a/plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/selective-extensions-bundle/test/index.js b/plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/selective-extensions-bundle/test/index.js
index b3795181a94..fcf58fe38d7 100644
--- a/plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/selective-extensions-bundle/test/index.js
+++ b/plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/selective-extensions-bundle/test/index.js
@@ -9,7 +9,7 @@ import { pluginNames } from '@woocommerce/data';
/**
* Internal dependencies
*/
-import { SelectiveExtensionsBundle } from '../';
+import { SelectiveExtensionsBundle, ExtensionSection } from '../';
jest.mock( '../../app-illustration', () => ( {
AppIllustration: jest.fn().mockReturnValue( '[illustration]' ),
@@ -129,4 +129,39 @@ describe( 'Selective extensions bundle', () => {
expect( queryByText( 'Google Description' ) ).toBeInTheDocument();
expect( queryByText( 'Random Description' ) ).not.toBeInTheDocument();
} );
+
+ describe( '', () => {
+ it( 'should render title and extensions', () => {
+ const title = 'This is title';
+ const { queryByText } = render(
+ {} }
+ />
+ );
+
+ expect( queryByText( title ) ).toBeInTheDocument();
+ freeExtensions[ 0 ].plugins.forEach( ( { description } ) => {
+ expect( queryByText( description ) ).toBeInTheDocument();
+ } );
+ } );
+
+ it( 'should render not title when no plugins', () => {
+ const title = 'This is title';
+ const { queryByText } = render(
+ {} }
+ />
+ );
+
+ expect( queryByText( title ) ).not.toBeInTheDocument();
+ } );
+ } );
} );
diff --git a/plugins/woocommerce-admin/client/profile-wizard/steps/business-details/test/index.js b/plugins/woocommerce-admin/client/profile-wizard/steps/business-details/test/index.js
index 7b4798df4a1..f494eb414da 100644
--- a/plugins/woocommerce-admin/client/profile-wizard/steps/business-details/test/index.js
+++ b/plugins/woocommerce-admin/client/profile-wizard/steps/business-details/test/index.js
@@ -5,7 +5,7 @@ import {
filterBusinessExtensions,
prepareExtensionTrackingData,
} from '../flows/selective-bundle';
-import { createInitialValues } from '../flows/selective-bundle/selective-extensions-bundle';
+import { createInstallExtensionOptions } from '../flows/selective-bundle/selective-extensions-bundle';
describe( 'BusinessDetails', () => {
test( 'filtering extensions', () => {
@@ -101,7 +101,7 @@ describe( 'BusinessDetails', () => {
} );
} );
- describe( 'createInitialValues', () => {
+ describe( 'createInstallExtensionOptions', () => {
test( 'selected by default', () => {
const extensions = [
{
@@ -125,7 +125,12 @@ describe( 'BusinessDetails', () => {
},
];
- const values = createInitialValues( extensions, 'US', '', [] );
+ const values = createInstallExtensionOptions(
+ extensions,
+ 'US',
+ '',
+ []
+ );
expect( values ).toEqual(
expect.objectContaining( {