feat: add HFB Pro components in Inserter (#4454)

This PR adds all the available Header/Footer elements to appear in the pro-upsell and search to for better discoverability of the elements.

Author: HardeepAsrani

assets/apps/customizer-controls/src/builder/components/ComponentsPopover.tsx

@@ -80,6 +80,16 @@ const ComponentsPopover: React.FC<Props> = ({
 		});
 	};
 
+	const getFilteredUpsells = () => {
+		if (!searchQuery) {
+			return upsells;
+		}
+
+		return upsells.filter(({ name }) => {
+			return name.toLowerCase().includes(searchQuery);
+		});
+	};
+
 	const renderItem = (item: ItemInterface, idx: number) => {
 		if (!item.id) {
 			return null;
@@ -113,10 +123,15 @@ const ComponentsPopover: React.FC<Props> = ({
 	const renderItems = () => {
 		const themeItems = getSidebarItems();
 		const boosterItems = getSidebarItems(true);
+		const filteredUpsells = getFilteredUpsells();
 
 		let noComponents = null;
 
-		if (themeItems.length === 0 && boosterItems.length === 0) {
+		if (
+			themeItems.length === 0 &&
+			boosterItems.length === 0 &&
+			filteredUpsells.length === 0
+		) {
 			noComponents = (
 				<div className="no-components">
 					<span>
@@ -156,13 +171,13 @@ const ComponentsPopover: React.FC<Props> = ({
 						)}
 					</>
 				)}
-				{boosterItems.length < 1 && upsells.length > 0 && (
+				{boosterItems.length < 1 && filteredUpsells.length > 0 && (
 					<>
 						<h4>
 							{__('PRO', 'neve')} {__('Components', 'neve')}
 						</h4>
 						<div className="items-popover-list upsell-list">
-							{upsells.map(({ name, icon }, idx) => {
+							{filteredUpsells.map(({ name, icon }, idx) => {
 								return renderUpsell(idx, icon, name);
 							})}
 						</div>

header-footer-grid/Core/Builder/Footer.php

@@ -318,6 +318,18 @@ protected function get_upsell_components() {
 				'icon' => 'images-alt',
 				'name' => __( 'Payment icons', 'neve' ),
 			],
+			[
+				'icon' => 'nametag',
+				'name' => __( 'Copyright', 'neve' ),
+			],
+			[
+				'icon' => 'embed-generic',
+				'name' => __( 'Custom Layouts', 'neve' ),
+			],
+			[
+				'icon' => 'welcome-widgets-menus',
+				'name' => __( 'Widget Area', 'neve' ),
+			],
 			[
 				'icon' => 'share',
 				'name' => __( 'Social Icons', 'neve' ),

header-footer-grid/Core/Builder/Header.php

@@ -548,6 +548,14 @@ protected function get_upsell_components() {
 		}
 
 		return [
+			[
+				'icon' => 'code-standards',
+				'name' => __( 'Search Form', 'neve' ),
+			],
+			[
+				'icon' => 'email',
+				'name' => __( 'Contact', 'neve' ),
+			],
 			[
 				'icon' => 'welcome-write-blog',
 				'name' => __( 'HTML', 'neve' ) . ' 2',
@@ -556,10 +564,26 @@ protected function get_upsell_components() {
 				'icon' => 'embed-generic',
 				'name' => __( 'Custom Layouts', 'neve' ),
 			],
+			[
+				'icon' => 'minus',
+				'name' => __( 'Divider element', 'neve' ),
+			],
 			[
 				'icon' => 'share',
 				'name' => __( 'Social Icons', 'neve' ),
 			],
+			[
+				'icon' => 'menu',
+				'name' => __( 'Primary Menu', 'neve' ),
+			],
+			[
+				'icon' => 'admin-links',
+				'name' => __( 'Button', 'neve' ),
+			],
+			[
+				'icon' => 'welcome-widgets-menus',
+				'name' => __( 'Widget Area', 'neve' ),
+			],
 		];
 	}