diff --git a/assets/css/src/components-form-editor/_template-selection.scss b/assets/css/src/components-form-editor/_template-selection.scss index b6dac64798..d558b20751 100644 --- a/assets/css/src/components-form-editor/_template-selection.scss +++ b/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; } diff --git a/assets/css/src/mailpoet-form-editor.scss b/assets/css/src/mailpoet-form-editor.scss index 3f0e26627a..32524da9d2 100644 --- a/assets/css/src/mailpoet-form-editor.scss +++ b/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'; diff --git a/assets/js/src/form_editor/templates/components/template_box.tsx b/assets/js/src/form_editor/templates/components/template_box.tsx new file mode 100644 index 0000000000..9e20e97b15 --- /dev/null +++ b/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) => ( +
+
+ {template.name} +
+
+ {template.name} +
+ +
+
+
+); + +export default TemplateBox; diff --git a/assets/js/src/form_editor/templates/selection.tsx b/assets/js/src/form_editor/templates/selection.tsx index e41165375a..8410add46f 100644 --- a/assets/js/src/form_editor/templates/selection.tsx +++ b/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} /> -
    - {templates[selectedCategory].map((template, index) => ( -
  1. - -
  2. - ))} -
+ {templates[selectedCategory].map((template, index) => ( + + ))} - ); }; diff --git a/assets/js/src/form_editor/templates/store/types.ts b/assets/js/src/form_editor/templates/store/types.ts index 17675c3632..d53f5a06e1 100644 --- a/assets/js/src/form_editor/templates/store/types.ts +++ b/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 = { diff --git a/tests/acceptance/CreateFormUsingTemplateCest.php b/tests/acceptance/CreateFormUsingTemplateCest.php index 28db58f328..d120cbd8d5 100644 --- a/tests/acceptance/CreateFormUsingTemplateCest.php +++ b/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'); diff --git a/views/form/template_selection.html b/views/form/template_selection.html index 1af50d6ff1..1f94145da7 100644 --- a/views/form/template_selection.html +++ b/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 %>