Activity Panel: Persist read status for inbox notes (https://github.com/woocommerce/woocommerce-admin/pull/1823)

* Add last read user data for inbox

* Check last read time against inbox note to determine read status

* Set last read in unmount to make component stateless

* Compare latest note time against last read time in activity panel

* Fix error checking and per_page limit

* Use component mount time for last read time in inbox

* Compare unread against note GMT time

* Add missing trailing comma

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

@@ -92,13 +92,13 @@ class ActivityPanel extends Component {
 
 	// @todo Pull in dynamic unread status/count
 	getTabs() {
-		const { unreadOrders } = this.props;
+		const { unreadNotes, unreadOrders } = this.props;
 		return [
 			{
 				name: 'inbox',
 				title: __( 'Inbox', 'woocommerce-admin' ),
 				icon: <Gridicon icon="mail" />,
-				unread: true,
+				unread: unreadNotes,
 			},
 			{
 				name: 'orders',
@@ -260,14 +260,36 @@ class ActivityPanel extends Component {
 }
 
 export default withSelect( select => {
-	const { getReportItems, getReportItemsError, isReportItemsRequesting } = select( 'wc-api' );
+	const {
+		getCurrentUserData,
+		getNotes,
+		getNotesError,
+		getReportItems,
+		getReportItemsError,
+		isGetNotesRequesting,
+		isReportItemsRequesting,
+	} = select( 'wc-api' );
 	const orderStatuses = wcSettings.wcAdminSettings.woocommerce_actionable_order_statuses || [
 		'processing',
 		'on-hold',
 	];
+	const userData = getCurrentUserData();
+
+	const notesQuery = {
+		page: 1,
+		per_page: 1,
+	};
+
+	const latestNote = getNotes( notesQuery );
+	const unreadNotes =
+		! Boolean( getNotesError( notesQuery ) ) &&
+		! isGetNotesRequesting( notesQuery ) &&
+		latestNote[ 0 ] &&
+		new Date( latestNote[ 0 ].date_created_gmt ).getTime() >
+			userData.activity_panel_inbox_last_read;
 
 	if ( ! orderStatuses.length ) {
-		return { unreadOrders: false };
+		return { unreadNotes, unreadOrders: false };
 	}
 
 	const ordersQuery = {
@@ -290,5 +312,5 @@ export default withSelect( select => {
 		}
 	}
 
-	return { unreadOrders };
+	return { unreadNotes, unreadOrders };
 } )( clickOutside( ActivityPanel ) );

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

@@ -7,7 +7,7 @@ import { Button } from '@wordpress/components';
 import { Component, Fragment } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import Gridicon from 'gridicons';
-import withSelect from 'wc-api/with-select';
+import { withDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -17,10 +17,23 @@ import ActivityHeader from '../activity-header';
 import { EmptyContent, Section } from '@woocommerce/components';
 import sanitizeHTML from 'lib/sanitize-html';
 import { QUERY_DEFAULTS } from 'wc-api/constants';
+import withSelect from 'wc-api/with-select';
 
 class InboxPanel extends Component {
+	constructor( props ) {
+		super( props );
+		this.mountTime = Date.now();
+	}
+
+	componentWillUnmount() {
+		const userDataFields = {
+			[ 'activity_panel_inbox_last_read' ]: this.mountTime,
+		};
+		this.props.updateCurrentUserData( userDataFields );
+	}
+
 	render() {
-		const { isError, isRequesting, notes } = this.props;
+		const { isError, isRequesting, lastRead, notes } = this.props;
 
 		if ( isError ) {
 			const title = __(
@@ -77,7 +90,7 @@ class InboxPanel extends Component {
 								title={ note.title }
 								date={ note.date_created }
 								icon={ <Gridicon icon={ note.icon } size={ 48 } /> }
-								unread={ 'unread' === note.status }
+								unread={ ! lastRead || new Date( note.date_created_gmt ).getTime() > lastRead }
 								actions={ getButtonsFromActions( note.actions ) }
 							>
 								<span dangerouslySetInnerHTML={ sanitizeHTML( note.content ) } />
@@ -92,7 +105,10 @@ class InboxPanel extends Component {
 
 export default compose(
 	withSelect( select => {
-		const { getNotes, getNotesError, isGetNotesRequesting } = select( 'wc-api' );
+		const { getCurrentUserData, getNotes, getNotesError, isGetNotesRequesting } = select(
+			'wc-api'
+		);
+		const userData = getCurrentUserData();
 		const inboxQuery = {
 			page: 1,
 			per_page: QUERY_DEFAULTS.pageSize,
@@ -103,6 +119,13 @@ export default compose(
 		const isError = Boolean( getNotesError( inboxQuery ) );
 		const isRequesting = isGetNotesRequesting( inboxQuery );
 
-		return { notes, isError, isRequesting };
+		return { notes, isError, isRequesting, lastRead: userData.activity_panel_inbox_last_read };
+	} ),
+	withDispatch( dispatch => {
+		const { updateCurrentUserData } = dispatch( 'wc-api' );
+
+		return {
+			updateCurrentUserData,
+		};
 	} )
 )( InboxPanel );

plugins/woocommerce-admin/client/wc-api/user/operations.js

@@ -46,6 +46,7 @@ function updateCurrentUserData( resourceNames, data, fetch ) {
 		'dashboard_chart_interval',
 		'dashboard_leaderboards',
 		'dashboard_leaderboard_rows',
+		'activity_panel_inbox_last_read',
 	];
 
 	if ( resourceNames.includes( resourceName ) ) {

plugins/woocommerce-admin/lib/admin.php

@@ -447,6 +447,7 @@ function wc_admin_get_user_data_fields() {
 		'dashboard_chart_interval',
 		'dashboard_leaderboards',
 		'dashboard_leaderboard_rows',
+		'activity_panel_inbox_last_read',
 	);
 
 	return apply_filters( 'wc_admin_get_user_data_fields', $user_data_fields );