Merge pull request #14 from woocommerce/add/add_email_note

Add support for email notes and different note layouts

api/admin-notes/add-note.php

@@ -9,11 +9,59 @@ register_woocommerce_admin_test_helper_rest_route(
 
 function admin_notes_add_note( $request ) {
 	$note = new Note();
+	$mock_note_data = get_mock_note_data();
+	$type = $request->get_param( 'type' );
+	$layout = $request->get_param( 'layout' );
 
 	$note->set_name( $request->get_param( 'name' ) );
 	$note->set_title( $request->get_param( 'title' ) );
+	$note->set_content( $mock_note_data[ 'content' ] );
+	$note->set_image( $mock_note_data[ $type ][ $layout ] );
+	$note->set_layout( $layout );
+	$note->set_type( $type );
+	possibly_add_action( $note );
 	
+	if ( 'email' === $type ) {
+		add_email_note_params( $note );
+	}
+
 	$note->save();
 
 	return true;
 }
+
+function add_email_note_params( $note ) {
+	$additional_data = array(
+		'role' => 'administrator',
+	);
+	$note->set_content_data( (object) $additional_data );
+}
+
+function possibly_add_action( $note ) {
+	if ( $note->get_type() === 'info' ) {
+		return;
+	}
+	$action_name = sprintf(
+		'test-action-%s',
+		$note->get_name()
+	);
+	$note->add_action( $action_name, 'Test action', wc_admin_url() );
+}
+
+function get_mock_note_data() {
+	$plugin_url = site_url() . '/wp-content/plugins/woocommerce-admin-test-helper/';
+	return array(
+		'content'   => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.',
+		'info'      => array(
+			'banner'    => $plugin_url . 'images/admin-notes/banner.jpg',
+			'thumbnail' => $plugin_url . 'images/admin-notes/thumbnail.jpg',
+			'plain'     => ''
+		),
+		'email'     => array(
+			'plain' => $plugin_url . 'images/admin-notes/woocommerce-logo-vector.png'
+		),
+		'update'    => array(
+			'plain' => ''
+		)
+	);
+}

src/admin-notes/add-note.js

@@ -4,12 +4,15 @@
 import { useState } from '@wordpress/element';
 import { Button } from '@wordpress/components';
 import apiFetch from '@wordpress/api-fetch';
+import { SelectControl } from '@wordpress/components';
 
 
 export const AddNote = () => {
 	const [ isAdding, setIsAdding ] = useState( false );
 	const [ hasAdded, setHasAdded ] = useState( false );
 	const [ errorMessage, setErrorMessage ] = useState( false );
+	const [ noteType, setNoteType ] = useState( 'info' );
+	const [ noteLayout, setNoteLayout ] = useState( 'plain' );
 
 	async function triggerAddNote() {
 		setIsAdding( true );
@@ -34,6 +37,8 @@ export const AddNote = () => {
 				method: 'POST',
 				data: {
 					name,
+					type: noteType,
+					layout: noteLayout,
 					title,
 				},
 			} );
@@ -46,20 +51,76 @@ export const AddNote = () => {
 		setIsAdding( false );
 	}
 
+	function onTypeChange( val ) {
+		setNoteType( val );
+		if ( val !== 'info' ) {
+			setNoteLayout( 'plain' );
+		}
+	}
+
+	function onLayoutChange( val ) {
+		setNoteLayout( val );
+	}
+
+	function getAddNoteDescription() {
+		switch ( noteType ){
+			case 'email':
+				return (
+					<>
+						This will add a new <strong>email</strong> note. Enable email insights{' '}
+						<a href="/wp-admin/admin.php?page=wc-settings&tab=email">
+							here
+						</a>{' '}
+						and run the cron to send the note by email.
+					</>);
+			default:
+				return (
+					<>
+						This will add a new note. Currently only the note name
+						and title will be used to create the note.
+					</>
+				);
+		}
+	}
+
 	return (
 		<>
 			<p><strong>Add a note</strong></p>
-			<p>
-				This will add a new note. Currently only the note name
-				and title will be used to create the note.
+			<div>
+				{ getAddNoteDescription() }
 				<br/>
-				<Button
-					onClick={ triggerAddNote }
-					disabled={ isAdding }
-					isPrimary
-				>
-					Add admin note
-				</Button>
+				<div className="woocommerce-admin-test-helper__add-notes">
+					<Button
+						onClick={ triggerAddNote }
+						disabled={ isAdding }
+						isPrimary
+					>
+						Add admin note
+					</Button>
+					<SelectControl
+						label="Type"
+						onChange={ onTypeChange }
+						labelPosition="side"
+						options={ [
+							{ label: 'Info', value: 'info' },
+							{ label: 'Update', value: 'update' },
+							{ label: 'Email', value: 'email' },
+						] }
+						value={ noteType }
+					/>
+					<SelectControl
+						label="Layout"
+						onChange={ onLayoutChange }
+						labelPosition="side"
+						options={ [
+							{ label: 'Plain', value: 'plain' },
+							{ label: 'Banner', value: 'banner' },
+							{ label: 'Thumbnail', value: 'thumbnail' },
+						] }
+						disabled={ noteType !== 'info' }
+						value={ noteLayout }
+					/>
+				</div>
 				<br/>
 				<span className="woocommerce-admin-test-helper__action-status">
 					{ isAdding && 'Adding, please wait' }
@@ -70,7 +131,7 @@ export const AddNote = () => {
 						</>
 					) }
 				</span>
-			</p>
+			</div>
 		</>
 	);
 };

src/index.scss

@@ -11,6 +11,15 @@
     font-family: monospace;
 }
 
+.woocommerce-admin-test-helper__add-notes {
+    width: 410px;
+    display: flex;
+    justify-content: space-between;
+    .components-base-control__field {
+        margin-bottom: 0;
+        padding-top: 3px;
+    }
+}
 
 #wc-admin-test-helper-options {
     div.search-box {