diff --git a/plugins/woocommerce-admin/client/header/activity-panel/index.js b/plugins/woocommerce-admin/client/header/activity-panel/index.js
index 25ccd4a0075..9b37c252261 100644
--- a/plugins/woocommerce-admin/client/header/activity-panel/index.js
+++ b/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: ,
- 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 ) );
diff --git a/plugins/woocommerce-admin/client/header/activity-panel/panels/inbox.js b/plugins/woocommerce-admin/client/header/activity-panel/panels/inbox.js
index 591e69bed89..10e2848f338 100644
--- a/plugins/woocommerce-admin/client/header/activity-panel/panels/inbox.js
+++ b/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={ }
- unread={ 'unread' === note.status }
+ unread={ ! lastRead || new Date( note.date_created_gmt ).getTime() > lastRead }
actions={ getButtonsFromActions( note.actions ) }
>
@@ -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 );
diff --git a/plugins/woocommerce-admin/client/wc-api/user/operations.js b/plugins/woocommerce-admin/client/wc-api/user/operations.js
index 0e4bb407ca0..bcd34b1b861 100644
--- a/plugins/woocommerce-admin/client/wc-api/user/operations.js
+++ b/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 ) ) {
diff --git a/plugins/woocommerce-admin/lib/admin.php b/plugins/woocommerce-admin/lib/admin.php
index b3239919b9b..3b39cdacba6 100644
--- a/plugins/woocommerce-admin/lib/admin.php
+++ b/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 );