Change the reviews empty state panels logic (https://github.com/woocommerce/woocommerce-admin/pull/8147)

* Add unapproved reviews check

* Add tests

* Add changelog

* Create a review e2e test

* Fix lint

* Rename some constants (https://github.com/woocommerce/woocommerce-admin/pull/8178)

* Renamed `countUnapprovedReviews`

* Renamed `lowStockProductsCount`

* Renamed `unreadOrdersCount`

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

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

plugins/woocommerce-admin/changelogs/add-8074

@@ -0,0 +1,4 @@
+Significance: minor
+Type: Add
+
+Change the reviews empty state panels logic #8147

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

@@ -34,10 +34,10 @@ export const ActivityPanel = () => {
 		const totalOrderCount = getAdminSetting( 'orderCount', 0 );
 		const orderStatuses = getOrderStatuses( select );
 		const reviewsEnabled = getAdminSetting( 'reviewsEnabled', 'no' );
-		const countUnreadOrders = getUnreadOrders( select, orderStatuses );
+		const unreadOrdersCount = getUnreadOrders( select, orderStatuses );
 		const manageStock = getAdminSetting( 'manageStock', 'no' );
-		const countLowStockProducts = getLowStockCount( select );
-		const countUnapprovedReviews = getUnapprovedReviews( select );
+		const lowStockProductsCount = getLowStockCount( select );
+		const unapprovedReviewsCount = getUnapprovedReviews( select );
 		const publishedProductCount = getAdminSetting(
 			'publishedProductCount',
 			0
@@ -45,9 +45,9 @@ export const ActivityPanel = () => {
 		const taskList = select( ONBOARDING_STORE_NAME ).getTaskList( 'setup' );
 
 		return {
-			countLowStockProducts,
-			countUnapprovedReviews,
-			countUnreadOrders,
+			lowStockProductsCount,
+			unapprovedReviewsCount,
+			unreadOrdersCount,
 			manageStock,
 			isTaskListHidden: taskList?.isHidden,
 			publishedProductCount,

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

@@ -209,7 +209,7 @@ function renderOrders( orders ) {
 	);
 }
 
-function OrdersPanel( { countUnreadOrders, orderStatuses } ) {
+function OrdersPanel( { unreadOrdersCount, orderStatuses } ) {
 	const actionableOrdersQuery = useMemo(
 		() => ( {
 			page: 1,
@@ -233,7 +233,7 @@ function OrdersPanel( { countUnreadOrders, orderStatuses } ) {
 			ITEMS_STORE_NAME
 		);
 
-		if ( ! orderStatuses.length && countUnreadOrders === 0 ) {
+		if ( ! orderStatuses.length && unreadOrdersCount === 0 ) {
 			return { isRequesting: false };
 		}
 
@@ -247,7 +247,7 @@ function OrdersPanel( { countUnreadOrders, orderStatuses } ) {
 
 		if (
 			isRequestingActionable ||
-			countUnreadOrders === null ||
+			unreadOrdersCount === null ||
 			orderItems === null
 		) {
 			return {
@@ -331,7 +331,7 @@ function OrdersPanel( { countUnreadOrders, orderStatuses } ) {
 OrdersPanel.propTypes = {
 	isError: PropTypes.bool,
 	isRequesting: PropTypes.bool,
-	countUnreadOrders: PropTypes.number,
+	unreadOrdersCount: PropTypes.number,
 	orders: PropTypes.array.isRequired,
 	orderStatuses: PropTypes.array,
 };

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

@@ -27,7 +27,7 @@ describe( 'OrdersPanel', () => {
 			isError: false,
 			isRequesting: false,
 		} );
-		render( <OrdersPanel orderStatuses={ [] } countUnreadOrders={ 0 } /> );
+		render( <OrdersPanel orderStatuses={ [] } unreadOrdersCount={ 0 } /> );
 		expect(
 			screen.queryByText( 'You’ve fulfilled all your orders' )
 		).toBeInTheDocument();

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

@@ -11,9 +11,9 @@ import StockPanel from './stock';
 import ReviewsPanel from './reviews';
 
 export function getAllPanels( {
-	countLowStockProducts,
-	countUnapprovedReviews,
-	countUnreadOrders,
+	lowStockProductsCount,
+	unapprovedReviewsCount,
+	unreadOrdersCount,
 	manageStock,
 	isTaskListHidden,
 	orderStatuses,
@@ -28,13 +28,13 @@ export function getAllPanels( {
 	return [
 		totalOrderCount > 0 && {
 			className: 'woocommerce-homescreen-card',
-			count: countUnreadOrders,
+			count: unreadOrdersCount,
 			collapsible: true,
 			id: 'orders-panel',
 			initialOpen: false,
 			panel: (
 				<OrdersPanel
-					countUnreadOrders={ countUnreadOrders }
+					unreadOrdersCount={ unreadOrdersCount }
 					orderStatuses={ orderStatuses }
 				/>
 			),
@@ -44,27 +44,28 @@ export function getAllPanels( {
 			publishedProductCount > 0 &&
 			manageStock === 'yes' && {
 				className: 'woocommerce-homescreen-card',
-				count: countLowStockProducts,
+				count: lowStockProductsCount,
 				id: 'stock-panel',
 				initialOpen: false,
-				collapsible: countLowStockProducts !== 0,
+				collapsible: lowStockProductsCount !== 0,
 				panel: (
 					<StockPanel
-						countLowStockProducts={ countLowStockProducts }
+						lowStockProductsCount={ lowStockProductsCount }
 					/>
 				),
 				title: __( 'Stock', 'woocommerce-admin' ),
 			},
 		publishedProductCount > 0 &&
+			unapprovedReviewsCount > 0 &&
 			reviewsEnabled === 'yes' && {
 				className: 'woocommerce-homescreen-card',
 				id: 'reviews-panel',
-				count: countUnapprovedReviews,
+				count: unapprovedReviewsCount,
 				initialOpen: false,
-				collapsible: countUnapprovedReviews !== 0,
+				collapsible: unapprovedReviewsCount !== 0,
 				panel: (
 					<ReviewsPanel
-						hasUnapprovedReviews={ countUnapprovedReviews > 0 }
+						hasUnapprovedReviews={ unapprovedReviewsCount > 0 }
 					/>
 				),
 				title: __( 'Reviews', 'woocommerce-admin' ),

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

@@ -81,7 +81,7 @@ export class StockPanel extends Component {
 
 	render() {
 		const {
-			countLowStockProducts,
+			lowStockProductsCount,
 			isError,
 			isRequesting,
 			products,
@@ -110,7 +110,7 @@ export class StockPanel extends Component {
 
 		// Show placeholders only for the first products fetch.
 		if ( isRequesting || ! products.length ) {
-			const numPlaceholders = Math.min( 5, countLowStockProducts ?? 1 );
+			const numPlaceholders = Math.min( 5, lowStockProductsCount ?? 1 );
 			const placeholders = Array.from(
 				new Array( numPlaceholders )
 			).map( ( v, idx ) => (
@@ -130,7 +130,7 @@ export class StockPanel extends Component {
 }
 
 StockPanel.propTypes = {
-	countLowStockProducts: PropTypes.number,
+	lowStockProductsCount: PropTypes.number,
 	products: PropTypes.array.isRequired,
 	isError: PropTypes.bool,
 	isRequesting: PropTypes.bool,

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

@@ -14,7 +14,7 @@ describe( 'StockPanel', () => {
 	it( 'should the correct number of placeholders', () => {
 		const { container } = render(
 			<StockPanel
-				countLowStockProducts={ 3 }
+				lowStockProductsCount={ 3 }
 				isError={ false }
 				isRequesting={ true }
 				products={ [] }
@@ -35,7 +35,7 @@ describe( 'StockPanel', () => {
 
 		const { getByRole } = render(
 			<StockPanel
-				countLowStockProducts={ 1 }
+				lowStockProductsCount={ 1 }
 				isError={ false }
 				isRequesting={ false }
 				products={ [

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

@@ -6,7 +6,7 @@ import { getAllPanels } from '../panels';
 describe( 'ActivityPanel', () => {
 	it( 'should exclude the orders and stock panels when there are no orders', () => {
 		const panels = getAllPanels( {
-			countUnreadOrders: 0,
+			unreadOrdersCount: 0,
 			orderStatuses: [],
 			totalOrderCount: 0,
 			publishedProductCount: 1,
@@ -28,7 +28,7 @@ describe( 'ActivityPanel', () => {
 
 	it( 'should exclude the reviews and stock panels when there are no published products', () => {
 		const panels = getAllPanels( {
-			countUnreadOrders: 0,
+			unreadOrdersCount: 0,
 			orderStatuses: [],
 			totalOrderCount: 1, // Yes, I realize this isn't "possible".
 			publishedProductCount: 0,
@@ -51,7 +51,7 @@ describe( 'ActivityPanel', () => {
 
 	it( 'should exclude any panel when the setup task list is visible', () => {
 		const panels = getAllPanels( {
-			countUnreadOrders: 0,
+			unreadOrdersCount: 0,
 			orderStatuses: [],
 			totalOrderCount: 1,
 			publishedProductCount: 0,
@@ -79,7 +79,7 @@ describe( 'ActivityPanel', () => {
 
 	it( 'should include the orders panel when there are orders', () => {
 		const panels = getAllPanels( {
-			countUnreadOrders: 1,
+			unreadOrdersCount: 1,
 			orderStatuses: [],
 			totalOrderCount: 10,
 			isTaskListHidden: 'yes',
@@ -94,7 +94,7 @@ describe( 'ActivityPanel', () => {
 
 	it( 'should include the stock panel when there are orders, products, and inventory management is enabled', () => {
 		const panels = getAllPanels( {
-			countUnreadOrders: 1,
+			unreadOrdersCount: 1,
 			orderStatuses: [],
 			totalOrderCount: 10,
 			publishedProductCount: 2,
@@ -109,13 +109,28 @@ describe( 'ActivityPanel', () => {
 		);
 	} );
 
-	it( 'should include the reviews panel when there are products and reviews are enabled', () => {
+	it( 'should exclude the reviews panel when there are no reviews', () => {
 		const panels = getAllPanels( {
 			publishedProductCount: 5,
 			reviewsEnabled: 'yes',
 			isTaskListHidden: 'yes',
 		} );
 
+		expect( panels ).toEqual(
+			expect.not.arrayContaining( [
+				expect.objectContaining( { id: 'reviews-panel' } ),
+			] )
+		);
+	} );
+
+	it( 'should include the reviews panel when they are enabled, there are products and reviews', () => {
+		const panels = getAllPanels( {
+			publishedProductCount: 5,
+			reviewsEnabled: 'yes',
+			isTaskListHidden: 'yes',
+			unapprovedReviewsCount: 3,
+		} );
+
 		expect( panels ).toEqual(
 			expect.arrayContaining( [
 				expect.objectContaining( { id: 'reviews-panel' } ),

plugins/woocommerce-admin/packages/admin-e2e-tests/src/specs/homescreen/activity-panel.ts

@@ -11,7 +11,7 @@ import { OnboardingWizard } from '../../pages/OnboardingWizard';
 import { WcHomescreen } from '../../pages/WcHomescreen';
 import { createOrder, removeAllOrders, unhideTaskList } from '../../fixtures';
 import { OrdersActivityPanel } from '../../elements/OrdersActivityPanel';
-import { waitForElementByText } from '../../utils/actions';
+import { addReviewToProduct, waitForElementByText } from '../../utils/actions';
 
 /* eslint-disable @typescript-eslint/no-var-requires */
 const { afterAll, beforeAll, describe, it } = require( '@jest/globals' );
@@ -65,10 +65,13 @@ const testAdminHomescreenActivityPanel = () => {
 		} );
 
 		it( 'should show Reviews panel when we have at-least one product', async () => {
-			await createSimpleProduct( simpleProductName, '9.99' );
-			await page.reload( {
-				waitUntil: [ 'networkidle0', 'domcontentloaded' ],
-			} );
+			const productId = await createSimpleProduct(
+				simpleProductName,
+				'9.99'
+			);
+			await addReviewToProduct( productId, simpleProductName );
+			await homeScreen.navigate();
+			await homeScreen.isDisplayed();
 			const activityPanels = await homeScreen.getActivityPanels();
 			expect( activityPanels ).toHaveLength( 1 );
 			expect( activityPanels ).toEqual(

plugins/woocommerce-admin/packages/admin-e2e-tests/src/utils/actions.ts

@@ -7,6 +7,7 @@ import { ElementHandle } from 'puppeteer';
  * Internal dependencies
  */
 import { NewOrder } from '../pages/NewOrder';
+import { Login } from '../pages/Login';
 
 /* eslint-disable @typescript-eslint/no-var-requires */
 const { expect } = require( '@jest/globals' );
@@ -185,6 +186,37 @@ const deactivateAndDeleteExtension = async ( extension: string ) => {
 	await deleteExtension?.click();
 };
 
+const addReviewToProduct = async ( productId: number, productName: string ) => {
+	// we need a guest user
+	const login = new Login( page );
+	await login.logout();
+
+	const baseUrl = config.get( 'url' );
+	const productUrl = `/?p=${ productId }`;
+	await page.goto( baseUrl + productUrl, {
+		waitUntil: 'networkidle0',
+		timeout: 10000,
+	} );
+	await waitForElementByText( 'h1', productName );
+
+	// Reviews tab
+	const reviewTab = await page.$( '#tab-title-reviews' );
+	await reviewTab?.click();
+	const fiveStars = await page.$( '.star-5' );
+	await fiveStars?.click();
+
+	// write a comment
+	await page.type( '#comment', 'My comment' );
+	await page.type( '#author', 'John Doe' );
+	await page.type( '#email', 'john.doe@john.doe' );
+
+	const submit = await page.$( '#submit' );
+	await submit?.click();
+	// the comment was published
+	await waitForElementByText( 'p', 'My comment' );
+	await login.login();
+};
+
 export {
 	uiUnblocked,
 	verifyPublishAndTrash,
@@ -196,4 +228,5 @@ export {
 	hasClass,
 	waitForTimeout,
 	deactivateAndDeleteExtension,
+	addReviewToProduct,
 };