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 );