Render form teplates selection categories

[MAILPOET-2988]

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

@@ -1,47 +1,72 @@
-import React from 'react';
-import Heading from 'common/typography/heading/heading';
+import React, { useState } from 'react';
 import MailPoet from 'mailpoet';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { Button } from '@wordpress/components';
-
-import { TemplateType } from './store/types';
+import Categories from 'common/categories/categories';
+import Background from 'common/background/background';
+import { TemplateData } from './store/types';
 
 export default () => {
-  const templates: Array<TemplateType> = useSelect(
+  const [selectedCategory, setSelectedCategory] = useState('popup');
+
+  const categories = [
+    {
+      name: 'popup',
+      label: MailPoet.I18n.t('popupCategory'),
+    },
+    {
+      name: 'fixed_bar',
+      label: MailPoet.I18n.t('fixedBarCategory'),
+    },
+    {
+      name: 'below_posts',
+      label: MailPoet.I18n.t('belowPagesCategory'),
+    },
+    {
+      name: 'slide_in',
+      label: MailPoet.I18n.t('slideInCategory'),
+    },
+    {
+      name: 'others',
+      label: MailPoet.I18n.t('othersCategory'),
+    },
+  ];
+
+  const templates: TemplateData = useSelect(
     (select) => select('mailpoet-form-editor-templates').getTemplates(),
     []
   );
-  const selectTemplateFailed: boolean = useSelect(
-    (select) => select('mailpoet-form-editor-templates').getSelectTemplateFailed(),
-    []
-  );
+
+  // const selectTemplateFailed: boolean = useSelect(
+  //   (select) => select('mailpoet-form-editor-templates').getSelectTemplateFailed(),
+  //   []
+  // );
+
   const { selectTemplate } = useDispatch('mailpoet-form-editor-templates');
   return (
     <div className="template-selection" data-automation-id="template_selection_list">
-      <Heading level={1}>{MailPoet.I18n.t('heading')}</Heading>
-      {selectTemplateFailed && (<div className="mailpoet_error">Failed</div>)}
-      <ol>
-        <li>
-          <Button
-            isLink
-            data-automation-id="blank_template"
-            onClick={() => selectTemplate()}
-          >
-            {MailPoet.I18n.t('blankTemplate')}
-          </Button>
-        </li>
-        {templates.map((template, index) => (
-          <li key={template.id}>
-            <Button
-              isLink
-              onClick={() => selectTemplate(template.id)}
-              data-automation-id={`template_index_${index}`}
-            >
-              {template.name}
-            </Button>
-          </li>
-        ))}
-      </ol>
+      <Background color="#fff" />
+      <div className="mailpoet-templates">
+        <Categories
+          categories={categories}
+          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>
+          ))}
+        </ol>
+      </div>
+
     </div>
   );
 };

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

@@ -2,3 +2,7 @@ export type TemplateType = {
   id: string
   name: string
 };
+
+export type TemplateData = {
+  [formType: string]: Array<TemplateType>
+}

views/form/template_selection.html

@@ -32,6 +32,11 @@
 <%= localize({
   'heading': __('Select form template'),
   'blankTemplate': _x('Blank template', 'the first item in the templates selection list'),
+  'fixedBarCategory': _x('Fixed bar', 'This is a text on a widget that leads to settings for form placement - form type is fixed bar'),
+  'slideInCategory': _x('Slide–in', 'This is a text on a widget that leads to settings for form placement - form type is slide in'),
+  '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'),
 }) %>
 <% endblock %>