Trigger a note action on button click.

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

@@ -49,18 +49,23 @@ class InboxPanel extends Component {
 	}
 
 	renderNotes() {
-		const { lastRead, notes } = this.props;
+		const { lastRead, notes, triggerNoteAction } = this.props;
 
 		if ( 0 === Object.keys( notes ).length ) {
 			return this.renderEmptyCard();
 		}
 
-		const getButtonsFromActions = actions => {
+		const getButtonsFromActions = note => {
-			if ( ! actions ) {
+			if ( ! note.actions ) {
 				return [];
 			}
-			return actions.map( action => (
+			return note.actions.map( action => (
-				<Button isDefault href={ action.url || undefined }>
+				<Button
+					isDefault
+					isPrimary={ action.primary }
+					href={ action.url || undefined }
+					onClick={ () => triggerNoteAction( note.id, action.id ) }
+				>
 					{ action.label }
 				</Button>
 			) );
@@ -80,7 +85,7 @@ class InboxPanel extends Component {
 					! note.date_created_gmt ||
 					new Date( note.date_created_gmt + 'Z' ).getTime() > lastRead
 				}
-				actions={ getButtonsFromActions( note.actions ) }
+				actions={ getButtonsFromActions( note ) }
 			>
 				<span dangerouslySetInnerHTML={ sanitizeHTML( note.content ) } />
 			</ActivityCard>
@@ -154,10 +159,11 @@ export default compose(
 		return { notes, isError, isRequesting, lastRead: userData.activity_panel_inbox_last_read };
 	} ),
 	withDispatch( dispatch => {
-		const { updateCurrentUserData } = dispatch( 'wc-api' );
+		const { updateCurrentUserData, triggerNoteAction } = dispatch( 'wc-api' );
 
 		return {
 			updateCurrentUserData,
+			triggerNoteAction,
 		};
 	} )
 )( InboxPanel );

plugins/woocommerce-admin/client/layout/store-alerts/index.js

@@ -8,7 +8,6 @@ import { IconButton, Button, Dashicon, Dropdown, NavigableMenu } from '@wordpres
 import classnames from 'classnames';
 import interpolateComponents from 'interpolate-components';
 import { compose } from '@wordpress/compose';
-import { noop } from 'lodash';
 import { withDispatch } from '@wordpress/data';
 import moment from 'moment';
 
@@ -64,18 +63,15 @@ class StoreAlerts extends Component {
 	}
 
 	renderActions( alert ) {
-		const { updateNote } = this.props;
+		const { triggerNoteAction, updateNote } = this.props;
 		const actions = alert.actions.map( action => {
-			const markStatus = () => {
-				updateNote( alert.id, { status: action.status } );
-			};
 			return (
 				<Button
 					key={ action.name }
 					isDefault
 					isPrimary={ action.primary }
 					href={ action.url || undefined }
-					onClick={ '' === action.status ? noop : markStatus }
+					onClick={ () => triggerNoteAction( alert.id, action.id ) }
 				>
 					{ action.label }
 				</Button>
@@ -257,8 +253,10 @@ export default compose(
 		};
 	} ),
 	withDispatch( dispatch => {
-		const { updateNote } = dispatch( 'wc-api' );
+		const { triggerNoteAction, updateNote } = dispatch( 'wc-api' );
+
 		return {
+			triggerNoteAction,
 			updateNote,
 		};
 	} )

plugins/woocommerce-admin/client/wc-api/notes/mutations.js

@@ -5,6 +5,12 @@ const updateNote = operations => ( noteId, noteFields ) => {
 	operations.update( [ resourceKey ], { [ resourceKey ]: { noteId, ...noteFields } } );
 };
 
+const triggerNoteAction = operations => ( noteId, actionId ) => {
+	const resourceKey = 'note-action';
+	operations.update( [ resourceKey ], { [ resourceKey ]: { noteId, actionId } } );
+};
+
 export default {
 	updateNote,
+	triggerNoteAction,
 };

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

@@ -20,7 +20,10 @@ function read( resourceNames, fetch = apiFetch ) {
 }
 
 function update( resourceNames, data, fetch = apiFetch ) {
-	return [ ...updateNote( resourceNames, data, fetch ) ];
+	return [
+		...updateNote( resourceNames, data, fetch ),
+		...triggerAction( resourceNames, data, fetch ),
+	];
 }
 
 function readNoteQueries( resourceNames, fetch ) {
@@ -93,7 +96,26 @@ function updateNote( resourceNames, data, fetch ) {
 	return [];
 }
 
+function triggerAction( resourceNames, data, fetch ) {
+	const resourceName = 'note-action';
+	if ( resourceNames.includes( resourceName ) ) {
+		const { noteId, actionId } = data[ resourceName ];
+		const url = `${ NAMESPACE }/admin/notes/${ noteId }/action/${ actionId }`;
+		return [
+			fetch( { path: url, method: 'POST' } )
+				.then( note => {
+					return { [ 'note:' + noteId ]: { data: note } };
+				} )
+				.catch( error => {
+					return { [ 'note:' + noteId ]: { error } };
+				} ),
+		];
+	}
+	return [];
+}
+
 export default {
 	read,
 	update,
+	triggerAction,
 };