Render list of templates

[MAILPOET-2987]

assets/js/src/form_editor/template_selection.tsx

@@ -9,7 +9,10 @@ const App = () => (
   <GlobalContext.Provider value={useGlobalContextValue(window)}>
     <>
       <Notices />
-      <Selection />
+      <Selection
+        templates={(window as any).mailpoet_templates}
+        formEditorUrl={(window as any).mailpoet_form_edit_url}
+      />
     </>
   </GlobalContext.Provider>
 );

assets/js/src/form_editor/templates/selection.tsx

@@ -2,8 +2,34 @@ import React from 'react';
 import Heading from 'common/typography/heading/heading';
 import MailPoet from 'mailpoet';
 
-export default () => (
+type Template = {
+  id: string
+  name: string
+};
+
+type Props = {
+  templates: Array<Template>
+  formEditorUrl: string
+};
+
+export default ({ formEditorUrl, templates }: Props) => (
   <div className="template-selection">
     <Heading level={1}>{MailPoet.I18n.t('heading')}</Heading>
+    <ol>
+      <li>
+        <a href={formEditorUrl}>
+          {MailPoet.I18n.t('blankTemplate')}
+        </a>
+      </li>
+      {templates.map((template) => (
+        <li
+          key={template.id}
+        >
+          <a href={`${formEditorUrl}${template.id}`}>
+            {template.name}
+          </a>
+        </li>
+      ))}
+    </ol>
   </div>
 );

views/form/template_selection.html

@@ -20,6 +20,8 @@
 <script>
   <% autoescape 'js' %>
   var mailpoet_templates = <%= json_encode(templates) %>;
+  var mailpoet_form_edit_url =
+    "<%= admin_url('admin.php?page=mailpoet-form-editor&action=create&template-id=') %>";
   <% endautoescape %>
 </script>
 
@@ -29,6 +31,7 @@
 <% block translations %>
 <%= localize({
   'heading': __('Select form template'),
+  'blankTemplate': _x('Blank template', 'the first item in the templates selection list'),
 }) %>
 <% endblock %>