diff --git a/api/admin-notes/add-note.php b/api/admin-notes/add-note.php
index a5b6ef5dcc4..ef693750289 100644
--- a/api/admin-notes/add-note.php
+++ b/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' => ''
+ )
+ );
+}
diff --git a/images/admin-notes/banner.jpg b/images/admin-notes/banner.jpg
new file mode 100644
index 00000000000..1959ae3e6d1
Binary files /dev/null and b/images/admin-notes/banner.jpg differ
diff --git a/images/admin-notes/thumbnail.jpg b/images/admin-notes/thumbnail.jpg
new file mode 100644
index 00000000000..f08bbc9f62d
Binary files /dev/null and b/images/admin-notes/thumbnail.jpg differ
diff --git a/images/admin-notes/woocommerce-logo-vector.png b/images/admin-notes/woocommerce-logo-vector.png
new file mode 100644
index 00000000000..d67c209ae99
Binary files /dev/null and b/images/admin-notes/woocommerce-logo-vector.png differ
diff --git a/src/admin-notes/add-note.js b/src/admin-notes/add-note.js
index cbdb5c8163c..24bed814cce 100644
--- a/src/admin-notes/add-note.js
+++ b/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 email note. Enable email insights{' '}
+
+ here
+ {' '}
+ 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 (
<>
Add a note
-
- This will add a new note. Currently only the note name
- and title will be used to create the note.
+
+ { getAddNoteDescription() }
-
+
+
+
+
+
{ isAdding && 'Adding, please wait' }
@@ -70,7 +131,7 @@ export const AddNote = () => {
) }
-
+