Add template boxes for form templates

[MAILPOET-2988]

assets/css/src/components-form-editor/_template-selection.scss

@@ -1,3 +1,22 @@
-.template-selection {
-  margin: $grid-gap-large;
+.mailpoet-templates {
+  display: grid;
+  grid-gap: 16px;
+  grid-template-columns: repeat(auto-fill, 468px);
+  justify-content: center;
+  padding-top: 32px;
+
+  .mailpoet-categories {
+    grid-column: 1 / -1;
+    justify-content: center;
+  }
+}
+
+.mailpoet-template-thumbnail {
+  height: 306px;
+  padding: 4px 4px 0;
+}
+
+.mailpoet-form-template {
+  height: 375px;
+  width: 468px;
 }

assets/css/src/mailpoet-form-editor.scss

@@ -28,6 +28,7 @@
 // Components
 // Actual UI components.
 
+@import './components-plugin/newsletter-templates';
 @import './components-form-editor/custom-field';
 @import './components-form-editor/form-title';
 @import './components-form-editor/header';

assets/js/src/form_editor/templates/components/template_box.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import MailPoet from 'mailpoet';
+import Heading from 'common/typography/heading/heading';
+import Button from 'common/button/button';
+import { TemplateType } from 'form_editor/templates/store/types';
+
+type Props = {
+  template: TemplateType,
+  onSelect: (id: string) => any,
+}
+const TemplateBox = ({ template, onSelect }: Props) => (
+  <div className="mailpoet-template mailpoet-form-template" data-automation-id="select_template_box">
+    <div className="mailpoet-template-thumbnail">
+      <img src={template.thumbnail} alt={template.name} />
+    </div>
+    <div className="mailpoet-template-info">
+      <Heading level={5} title={template.name}>{template.name}</Heading>
+      <div>
+        <Button dimension="small" automationId={`select_template_${template.id}`} onClick={() => onSelect(template.id)}>
+          {MailPoet.I18n.t('select')}
+        </Button>
+      </div>
+    </div>
+  </div>
+);
+
+export default TemplateBox;

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

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
 import MailPoet from 'mailpoet';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { Button } from '@wordpress/components';
 import Categories from 'common/categories/categories';
 import Background from 'common/background/background';
 import { TemplateData } from './store/types';
+import TemplateBox from './components/template_box';
 
 export default () => {
   const [selectedCategory, setSelectedCategory] = useState('popup');
@@ -52,21 +52,14 @@ export default () => {
           active={selectedCategory}
           onSelect={setSelectedCategory}
         />
-        <ol>
         {templates[selectedCategory].map((template, index) => (
-            <li key={template.id}>
-              <Button
-                isLink
-                onClick={() => selectTemplate(template.id)}
-                data-automation-id={`template_index_${index}`}
-              >
-                {template.name}
-              </Button>
-            </li>
+          <TemplateBox
+            key={template.id}
+            onSelect={selectTemplate}
+            template={template}
+          />
         ))}
-        </ol>
       </div>
-
     </div>
   );
 };

assets/js/src/form_editor/templates/store/types.ts

@@ -1,6 +1,7 @@
 export type TemplateType = {
   id: string
   name: string
+  thumbnail: string,
 };
 
 export type TemplateData = {

tests/acceptance/CreateFormUsingTemplateCest.php

@@ -23,29 +23,9 @@ class CreateFormUsingTemplateCest {
     $i->click('[data-automation-id="create_new_form"]');
 
     $i->waitForElement('[data-automation-id="template_selection_list"]');
-    $i->click('[data-automation-id="template_index_0"]');
+    $i->click('[data-automation-id="select_template_template_1_popup"]');
 
-    $i->waitForElement('[data-automation-id="form_title_input"]');
-    $i->selectOptionInSelect2($segmentName);
-    $i->click('[data-automation-id="form_save_button"]');
-    $i->waitForText('Form saved', 10, '.automation-dismissible-notices');
-  }
-
-  public function createFormUsingBlankTemplate(\AcceptanceTester $i) {
-    $segmentFactory = new Segment();
-    $segmentName = 'Fancy List';
-    $segmentFactory->withName($segmentName)->create();
-
-    $i->wantTo('Create a new form');
-    $i->login();
-    $i->amOnMailPoetPage('Forms');
-    $i->click('[data-automation-id="create_new_form"]');
-
-    $i->waitForElement('[data-automation-id="template_selection_list"]');
-    $i->waitForElement('[data-automation-id="blank_template"]');
-    $i->click('[data-automation-id="blank_template"]');
-
-    $i->waitForElement('[data-automation-id="form_title_input"]');
+    $i->waitForElement('[data-automation-id="form_title_input"]', 20);
     $i->selectOptionInSelect2($segmentName);
     $i->click('[data-automation-id="form_save_button"]');
     $i->waitForText('Form saved', 10, '.automation-dismissible-notices');

views/form/template_selection.html

@@ -37,6 +37,7 @@
   'popupCategory': _x('Pop up', 'This is a text on a widget that leads to settings for form placement - form type is pop up, it will be displayed on page in a small modal window'),
   'belowPagesCategory': _x('Below pages', 'This is a text on a widget that leads to settings for form placement'),
   'othersCategory': _x('Others (widget)', 'Placement of the form using theme widget'),
+  'select': _x('Select', 'Verb'),
 }) %>
 <% endblock %>