Use API to save the template

[MAILPOET-2987]

assets/js/src/form_editor/templates/actions.ts

@@ -0,0 +1,20 @@
+import { select } from '@wordpress/data';
+
+// eslint-disable-next-line import/prefer-default-export
+export function* selectTemplate(templateId) {
+  const { res, success, error } = yield {
+    type: 'CALL_API',
+    endpoint: 'forms',
+    action: 'create',
+    data: {
+      'template-id': templateId,
+    },
+  };
+  if (!success) {
+    return { type: 'SELECT_TEMPLATE_ERROR', error };
+  }
+  const url = select('mailpoet-form-editor-templates').getFormEditorUrl();
+
+  window.location = url + res.data.id;
+  return {};
+}

assets/js/src/form_editor/templates/controls.ts

@@ -0,0 +1,5 @@
+import CALL_API from 'common/controls/call_api';
+
+export default {
+  CALL_API,
+};

assets/js/src/form_editor/templates/reducer.ts

@@ -1 +1,12 @@
-export default (defaultState: object) => (state = defaultState) => state;
+export const selectTemplateFailed = (state) => ({
+  ...state,
+  selectTemplateFailed: true,
+});
+
+export default (defaultState: object) => (state = defaultState, action) => {
+  switch (action.type) {
+    case 'SELECT_TEMPLATE_ERROR': return selectTemplateFailed(state);
+    default:
+      return state;
+  }
+};

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

@@ -1,7 +1,8 @@
 import React from 'react';
 import Heading from 'common/typography/heading/heading';
 import MailPoet from 'mailpoet';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { Button } from '@wordpress/components';
 
 import { TemplateType } from './types';
 
@@ -10,28 +11,34 @@ export default () => {
     (select) => select('mailpoet-form-editor-templates').getTemplates(),
     []
   );
-  const formEditorUrl: string = useSelect(
-    (select) => select('mailpoet-form-editor-templates').getFormEditorUrl(),
+  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
+        <li>
+          <Button
+            isLink
             data-automation-id="blank_template"
+            onClick={() => selectTemplate()}
           >
-          <a href={formEditorUrl}>
             {MailPoet.I18n.t('blankTemplate')}
-          </a>
+          </Button>
         </li>
         {templates.map((template, index) => (
-          <li
-            key={template.id}
+          <li key={template.id}>
+            <Button
+              isLink
+              onClick={() => selectTemplate(template.id)}
+              data-automation-id={`template_index_${index}`}
             >
-            <a href={`${formEditorUrl}${template.id}`} data-automation-id={`template_index_${index}`}>
               {template.name}
-            </a>
+            </Button>
           </li>
         ))}
       </ol>

assets/js/src/form_editor/templates/selectors.ts

@@ -7,4 +7,7 @@ export default {
   getFormEditorUrl(state): string {
     return state.formEditorUrl;
   },
+  getSelectTemplateFailed(state): boolean {
+    return state.selectTemplateFailed;
+  },
 };

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

@@ -5,15 +5,20 @@
 import { registerStore } from '@wordpress/data';
 import selectors from './selectors';
 import createReducer from './reducer';
+import * as actions from './actions';
+import controls from './controls';
 
 export default () => {
   const defaultState = {
     templates: (window as any).mailpoet_templates,
     formEditorUrl: (window as any).mailpoet_form_edit_url,
+    selectTemplateFailed: false,
   };
 
   const config = {
     selectors,
+    actions,
+    controls,
     reducer: createReducer(defaultState),
     resolvers: {},
   };

lib/API/JSON/v1/Forms.php

@@ -2,6 +2,7 @@
 
 namespace MailPoet\API\JSON\v1;
 
+use MailPoet\AdminPages\Pages\FormEditor;
 use MailPoet\API\JSON\Endpoint as APIEndpoint;
 use MailPoet\API\JSON\Error as APIError;
 use MailPoet\Config\AccessControl;
@@ -86,7 +87,14 @@ class Forms extends APIEndpoint {
     ]);
   }
 
-  public function create() {
+  public function create($data = []) {
+    if (isset($data['template-id']) && isset(FormEditor::TEMPLATES[$data['template-id']])) {
+      return $this->save(
+        $this->formFactory->createFormFromTemplate(
+          FormEditor::TEMPLATES[$data['template-id']]
+        )
+      );
+    }
     return $this->save($this->formFactory->createEmptyForm());
   }