From a2ff7a34dbe6210359121aae9baf20c9b83bb5d4 Mon Sep 17 00:00:00 2001
From: Pavel Dohnal <pavel@mailpoet.com>
Date: Mon, 22 Jun 2020 14:20:49 +0200
Subject: [PATCH] Render list of templates

[MAILPOET-2987]
---
 .../js/src/form_editor/template_selection.tsx |  5 +++-
 .../src/form_editor/templates/selection.tsx   | 28 ++++++++++++++++++-
 views/form/template_selection.html            |  3 ++
 3 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/assets/js/src/form_editor/template_selection.tsx b/assets/js/src/form_editor/template_selection.tsx
index dc561ce116..0e7324a74b 100644
--- a/assets/js/src/form_editor/template_selection.tsx
+++ b/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>
 );
diff --git a/assets/js/src/form_editor/templates/selection.tsx b/assets/js/src/form_editor/templates/selection.tsx
index 033cb97cb4..9c945ff7cd 100644
--- a/assets/js/src/form_editor/templates/selection.tsx
+++ b/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>
 );
diff --git a/views/form/template_selection.html b/views/form/template_selection.html
index b91d962bb1..7b206b89ea 100644
--- a/views/form/template_selection.html
+++ b/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 %>