Inbox panel on the home screen (https://github.com/woocommerce/woocommerce-admin/pull/4496)

* Homepage InboxPanel integration

# Conflicts:
#	client/homepage/layout.js
#	client/homepage/test/index.js

* InboxPanel refactor

This commit removes "context" prop and adds "isPanelEmpty" method to InboxPanel.

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

plugins/woocommerce-admin/client/header/activity-panel/panels/inbox/index.js

@@ -87,6 +87,7 @@ class InboxPanel extends Component {
 	render() {
 		const {
 			isError,
+			isPanelEmpty,
 			isRequesting,
 			isUndoRequesting,
 			isDismissAllUndoRequesting,
@@ -119,9 +120,16 @@ class InboxPanel extends Component {
 
 		const hasNotes = hasValidNotes( notes );
 
+		const isActivityHeaderVisible =
+			hasNotes || isRequesting || isUndoRequesting;
+
+		if ( isPanelEmpty ) {
+			isPanelEmpty( ! hasNotes && ! isActivityHeaderVisible );
+		}
+
 		return (
 			<Fragment>
-				{ ( hasNotes || isRequesting || isUndoRequesting ) && (
+				{ isActivityHeaderVisible && (
 					<ActivityHeader
 						title={ __( 'Inbox', 'woocommerce-admin' ) }
 						subtitle={ __(
@@ -134,16 +142,18 @@ class InboxPanel extends Component {
 						) }
 					/>
 				) }
-				{ ( isRequesting || isDismissAllUndoRequesting ) && (
+				<div className="woocommerce-homepage-notes-wrapper">
+					{ ( isRequesting || isDismissAllUndoRequesting ) && (
+						<Section>
+							<InboxNotePlaceholder className="banner message-is-unread" />
+						</Section>
+					) }
 					<Section>
-						<InboxNotePlaceholder className="banner message-is-unread" />
+						{ ! isRequesting &&
+							! isDismissAllUndoRequesting &&
+							this.renderNotes( hasNotes ) }
 					</Section>
-				) }
+				</div>
-				<Section>
-					{ ! isRequesting &&
-						! isDismissAllUndoRequesting &&
-						this.renderNotes( hasNotes ) }
-				</Section>
 			</Fragment>
 		);
 	}

plugins/woocommerce-admin/client/header/activity-panel/panels/inbox/style.scss

@@ -6,6 +6,29 @@
 	background: $core-grey-light-200;
 	border-radius: 2px;
 	@include font-size( 13 );
+	margin: 20px;
+	-ms-box-orient: horizontal;
+	&.banner {
+		-webkit-flex-direction: column;
+		flex-direction: column;
+		img {
+			width: 100%;
+			height: 120px;
+		}
+	}
+	&.thumbnail {
+		display: flex;
+		-webkit-flex-direction: row-reverse;
+		flex-direction: row-reverse;
+		img {
+			width: 128px;
+			height: 100%;
+		}
+	}
+
+	.woocommerce-homepage-column & {
+		margin: 20px 0;
+	}
 
 	&:not(.is-placeholder) {
 		border: 1px solid $light-gray-secondary;
@@ -152,34 +175,6 @@
 	}
 }
 
-
-.woocommerce-inbox-message {
-	margin: 20px;
-	-ms-box-orient: horizontal;
-	display: -webkit-box;
-	display: -moz-box;
-	display: -ms-flexbox;
-	&.banner {
-		-webkit-flex-direction: column;
-		flex-direction: column;
-		img {
-			width: 100%;
-			height: 120px;
-		}
-	}
-	&.thumbnail {
-		display: -moz-flex;
-		display: -webkit-flex;
-		display: flex;
-		-webkit-flex-direction: row-reverse;
-		flex-direction: row-reverse;
-		img {
-			width: 128px;
-			height: 100%;
-		}
-	}
-}
-
 .woocommerce-inbox-message__wrapper > div {
 	padding: $gap $gap-large;
 	.is-placeholder & {
@@ -197,3 +192,18 @@
 		}
 	}
 }
+
+.woocommerce-layout__inbox-panel-header {
+	.woocommerce-homepage-column & {
+		padding: 0 24px;
+	}
+}
+
+.woocommerce-homepage-notes-wrapper {
+	.is-inbox & {
+		height: calc(100% - 30px);
+		& > div {
+			overflow: auto;
+		}
+	}
+}

plugins/woocommerce-admin/client/homepage/layout.js

@@ -9,7 +9,6 @@ import {
 	useRef,
 	useEffect,
 } from '@wordpress/element';
-import { Button } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
 import classnames from 'classnames';
 import { get } from 'lodash';
@@ -24,6 +23,7 @@ import './style.scss';
 import { isOnboardingEnabled } from 'dashboard/utils';
 import withSelect from 'wc-api/with-select';
 import TaskListPlaceholder from '../task-list/placeholder';
+import InboxPanel from '../header/activity-panel/panels/inbox';
 
 const TaskList = lazy( () =>
 	import( /* webpackChunkName: "task-list" */ '../task-list' )
@@ -52,31 +52,30 @@ export const Layout = ( props ) => {
 		};
 	}, [] );
 
-	const { query, requestingTaskList, taskListComplete, taskListHidden } = props;
+	const {
+		isUndoRequesting,
+		query,
+		requestingTaskList,
+		taskListComplete,
+		taskListHidden,
+	} = props;
 	const isTaskListEnabled = taskListHidden === false && ! taskListComplete;
 	const isDashboardShown = ! isTaskListEnabled || ! query.task;
 
+	const isInboxPanelEmpty = ( isEmpty ) => {
+		setShowInbox( ! isEmpty );
+	};
+
+	if ( isUndoRequesting && ! showInbox ) {
+		setShowInbox( true );
+	}
+
 	const renderColumns = () => {
 		return (
 			<Fragment>
 				{ showInbox && (
 					<div className="woocommerce-homepage-column is-inbox">
-						<div className="temp-content">
+						<InboxPanel isPanelEmpty={ isInboxPanelEmpty } />
-							<Button
-								isPrimary
-								onClick={ () => {
-									setShowInbox( false );
-								} }
-							>
-								Dismiss All
-							</Button>
-						</div>
-						<div className="temp-content" />
-						<div className="temp-content" />
-						<div className="temp-content" />
-						<div className="temp-content" />
-						<div className="temp-content" />
-						<div className="temp-content" />
 					</div>
 				) }
 				<div
@@ -114,8 +113,7 @@ export const Layout = ( props ) => {
 		>
 			{ isDashboardShown
 				? renderColumns()
-				: isTaskListEnabled && renderTaskList()
+				: isTaskListEnabled && renderTaskList() }
-			}
 		</div>
 	);
 };
@@ -143,6 +141,7 @@ export default compose(
 	withSelect( ( select ) => {
 		const {
 			getOptions,
+			getUndoDismissRequesting,
 			isGetOptionsRequesting,
 		} = select( 'wc-api' );
 
@@ -151,14 +150,19 @@ export default compose(
 				'woocommerce_task_list_complete',
 				'woocommerce_task_list_hidden',
 			] );
-			
+			const { isUndoRequesting } = getUndoDismissRequesting();
 			return {
+				isUndoRequesting,
 				requestingTaskList: isGetOptionsRequesting( [
 					'woocommerce_task_list_complete',
 					'woocommerce_task_list_hidden',
 				] ),
-				taskListComplete: get( options, [ 'woocommerce_task_list_complete' ] ),
+				taskListComplete: get( options, [
-				taskListHidden: get( options, [ 'woocommerce_task_list_hidden' ] ) === 'yes',
+					'woocommerce_task_list_complete',
+				] ),
+				taskListHidden:
+					get( options, [ 'woocommerce_task_list_hidden' ] ) ===
+					'yes',
 			};
 		}
 

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

@@ -10,6 +10,9 @@ jest.mock( 'homepage/stats-overview', () => jest.fn().mockReturnValue( null ) );
 // We aren't testing the <TaskList /> component here.
 jest.mock( 'task-list', () => jest.fn().mockReturnValue( '[TaskList]' ) );
 
+// We aren't testing the <InboxPanel /> component here.
+jest.mock( 'header/activity-panel/panels/inbox', () => jest.fn().mockReturnValue( '[InboxPanel]' ) );
+
 describe( 'Homepage Layout', () => {
 	it( 'should show TaskList placeholder when loading', () => {
 		const { container } = render(