Hide Inventory and Reviews panels if store setup task list is visible (https://github.com/woocommerce/woocommerce-admin/pull/6182)

* Fixed reviews and inventory panels visibility

This commit fixes the reviews and inventory panels visibility when setup task list is enabled

* Fixed tests

* Fixed control and small refactor

* Fixed useSelect

* Fixed multiple useSelect

Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com>

plugins/woocommerce-admin/client/homescreen/activity-panel/index.js

@@ -11,6 +11,7 @@ import {
 	__experimentalText as Text,
 } from '@wordpress/components';
 import { getSetting } from '@woocommerce/wc-admin-settings';
+import { OPTIONS_STORE_NAME } from '@woocommerce/data';
 
 /**
  * Internal dependencies
@@ -34,16 +35,18 @@ export const ActivityPanel = () => {
 		const countLowStockProducts = getLowStockCount( select );
 		const countUnapprovedReviews = getUnapprovedReviews( select );
 		const publishedProductCount = getSetting( 'publishedProductCount', 0 );
-
+		const { getOption } = select( OPTIONS_STORE_NAME );
+		const isTaskListHidden = getOption( 'woocommerce_task_list_hidden' );
 		return {
 			countLowStockProducts,
-			countUnreadOrders,
-			manageStock,
-			orderStatuses,
-			totalOrderCount,
-			reviewsEnabled,
 			countUnapprovedReviews,
+			countUnreadOrders,
+			isTaskListHidden,
+			manageStock,
 			publishedProductCount,
+			reviewsEnabled,
+			totalOrderCount,
+			orderStatuses,
 		};
 	} );
 

plugins/woocommerce-admin/client/homescreen/activity-panel/panels.js

@@ -14,6 +14,7 @@ export function getAllPanels( {
 	countLowStockProducts,
 	countUnapprovedReviews,
 	countUnreadOrders,
+	isTaskListHidden,
 	manageStock,
 	orderStatuses,
 	publishedProductCount,
@@ -37,6 +38,7 @@ export function getAllPanels( {
 		},
 		totalOrderCount > 0 &&
 			publishedProductCount > 0 &&
+			isTaskListHidden === 'yes' &&
 			manageStock === 'yes' && {
 				className: 'woocommerce-homescreen-card',
 				count: countLowStockProducts,
@@ -51,6 +53,7 @@ export function getAllPanels( {
 				title: __( 'Stock', 'woocommerce-admin' ),
 			},
 		publishedProductCount > 0 &&
+			isTaskListHidden === 'yes' &&
 			reviewsEnabled === 'yes' && {
 				className: 'woocommerce-homescreen-card',
 				id: 'reviews-panel',

plugins/woocommerce-admin/client/homescreen/activity-panel/test/panels.js

@@ -33,6 +33,30 @@ describe( 'ActivityPanel', () => {
 			publishedProductCount: 0,
 			manageStock: 'yes',
 			reviewsEnabled: 'yes',
+			isTaskListHidden: 'yes',
+		} );
+
+		expect( panels ).toEqual(
+			expect.not.arrayContaining( [
+				expect.objectContaining( { id: 'reviews-panel' } ),
+			] )
+		);
+		expect( panels ).toEqual(
+			expect.not.arrayContaining( [
+				expect.objectContaining( { id: 'stock-panel' } ),
+			] )
+		);
+	} );
+
+	it( 'should exclude the reviews and stock panels when the setup task list is visible', () => {
+		const panels = getAllPanels( {
+			countUnreadOrders: 0,
+			orderStatuses: [],
+			totalOrderCount: 1, // Yes, I realize this isn't "possible".
+			publishedProductCount: 0,
+			manageStock: 'yes',
+			reviewsEnabled: 'yes',
+			isTaskListHidden: 'no',
 		} );
 
 		expect( panels ).toEqual(
@@ -68,6 +92,7 @@ describe( 'ActivityPanel', () => {
 			totalOrderCount: 10,
 			publishedProductCount: 2,
 			manageStock: 'yes',
+			isTaskListHidden: 'yes',
 		} );
 
 		expect( panels ).toEqual(
@@ -81,6 +106,7 @@ describe( 'ActivityPanel', () => {
 		const panels = getAllPanels( {
 			publishedProductCount: 5,
 			reviewsEnabled: 'yes',
+			isTaskListHidden: 'yes',
 		} );
 
 		expect( panels ).toEqual(

plugins/woocommerce-admin/client/homescreen/test/index.js

@@ -25,6 +25,11 @@ jest.mock( '@woocommerce/data', () => ( {
 	useUserPreferences: jest.fn().mockReturnValue( {} ),
 } ) );
 
+// We aren't testing the <ActivityPanel /> component here.
+jest.mock( '../activity-panel', () => ( {
+	ActivityPanel: jest.fn().mockReturnValue( '[ActivityPanel]' ),
+} ) );
+
 describe( 'Homescreen Layout', () => {
 	it( 'should show TaskList placeholder when loading', () => {
 		const { container } = render(
@@ -42,7 +47,7 @@ describe( 'Homescreen Layout', () => {
 		expect( placeholder ).not.toBeNull();
 	} );
 
-	it( 'should show TaskList inline', async () => {
+	it( 'should show TaskList inline', () => {
 		const { container } = render(
 			<Layout
 				requestingTaskList={ false }
@@ -59,11 +64,11 @@ describe( 'Homescreen Layout', () => {
 		expect( columns ).not.toBeNull();
 
 		// Expect that the <TaskList /> is there too.
-		const taskList = await screen.findByText( '[TaskList]' );
+		const taskList = screen.queryByText( '[TaskList]' );
 		expect( taskList ).toBeDefined();
 	} );
 
-	it( 'should render TaskList alone when on task', async () => {
+	it( 'should render TaskList alone when on task', () => {
 		const { container } = render(
 			<Layout
 				requestingTaskList={ false }
@@ -82,7 +87,7 @@ describe( 'Homescreen Layout', () => {
 		expect( columns ).toBeNull();
 
 		// Expect that the <TaskList /> is there though.
-		const taskList = await screen.findByText( '[TaskList]' );
+		const taskList = screen.queryByText( '[TaskList]' );
 		expect( taskList ).toBeDefined();
 	} );