Add mailpoet translations

[MAILPOET-2450]

assets/js/src/form_editor/components/block_settings.jsx

@@ -1,13 +1,10 @@
 import React from 'react';
 import {
   Panel,
-  PanelBody,
 } from '@wordpress/components';
 
 export default () => (
   <Panel>
-    <PanelBody title="Block Settings">
+    <p>TODO Block Settings</p>
-      <p>TODO Block Settings</p>
-    </PanelBody>
   </Panel>
 );

assets/js/src/form_editor/components/form_settings.jsx

@@ -3,21 +3,22 @@ import {
   Panel,
   PanelBody,
 } from '@wordpress/components';
+import MailPoet from 'mailpoet';
 
 export default () => (
   <>
     <Panel>
-      <PanelBody title="Settings">
+      <PanelBody title={MailPoet.I18n.t('formSettings')}>
         <p>TODO Basic Settings</p>
       </PanelBody>
     </Panel>
     <Panel>
-      <PanelBody title="From placement" initialOpen={false}>
+      <PanelBody title={MailPoet.I18n.t('formPlacement')} initialOpen={false}>
         <p>TODO Form placement</p>
       </PanelBody>
     </Panel>
     <Panel>
-      <PanelBody title="Custom CSS" initialOpen={false}>
+      <PanelBody title={MailPoet.I18n.t('customCss')} initialOpen={false}>
         <p>TODO Custom CSS</p>
       </PanelBody>
     </Panel>

assets/js/src/form_editor/components/form_title.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { useDispatch, useSelect } from '@wordpress/data';
 import classnames from 'classnames';
+import MailPoet from 'mailpoet';
 
 export default () => {
   const [isSelected, setIsSelected] = useState(false);
@@ -18,12 +19,12 @@ export default () => {
       <div className={titleClass}>
         <div>
           <label htmlFor="post-title" className="screen-reader-text">
-            Add form name
+            {MailPoet.I18n.t('addFormName')}
           </label>
           <textarea
             id="form-title"
             className="editor-post-title__input"
-            placeholder="Add form name"
+            placeholder={MailPoet.I18n.t('addFormName')}
             rows="1"
             style={{
               overflow: 'hidden',

assets/js/src/form_editor/components/header.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { IconButton, Button } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
+import MailPoet from 'mailpoet';
 
 export default () => {
   const sidebarOpened = useSelect(
@@ -30,7 +31,7 @@ export default () => {
         </Button>
         <IconButton
           icon="admin-generic"
-          label="Settings"
+          label={MailPoet.I18n.t('formSettings')}
           labelPosition="down"
           onClick={() => toggleSidebar(!sidebarOpened)}
           isToggled={sidebarOpened}

assets/js/src/form_editor/components/sidebar.jsx

@@ -3,6 +3,7 @@ import { IconButton } from '@wordpress/components';
 import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import PropTypes from 'prop-types';
+import MailPoet from 'mailpoet';
 import BlockSettings from './block_settings.jsx';
 import FormSettings from './form_settings.jsx';
 
@@ -41,7 +42,7 @@ export default () => {
               className={`edit-post-sidebar__panel-tab ${activeTab === 'form' ? 'is-active' : ''}`}
               type="button"
             >
-              Form
+              {MailPoet.I18n.t('form')}
             </button>
           </li>
           <li>

assets/js/src/form_editor/store/controls.jsx

@@ -1,5 +1,5 @@
 import { select, dispatch } from '@wordpress/data';
-import MailPoet from '../../mailpoet';
+import MailPoet from 'mailpoet';
 
 export default {
   SAVE_FORM() {
@@ -11,7 +11,7 @@ export default {
       data: formData,
     }).done(() => {
       dispatch('mailpoet-form-editor').saveFormDone();
-      dispatch('mailpoet-form-editor').addNotice('Form saved.', 'success', true, 'save-form');
+      dispatch('mailpoet-form-editor').addNotice(MailPoet.I18n.t('formSaved'), 'success', true, 'save-form');
     }).fail((response) => {
       let errorMessage = null;
       if (response.errors.length > 0) {

views/form/editor.html

@@ -17,5 +17,19 @@
   var mailpoet_form_data = <%= json_encode(form) %>;
   <% endautoescape %>
 </script>
+<% endblock %>
+
+<% block translations %>
+<%= localize({
+'addFormName': _x('Add form name', 'A placeholder for form name input'),
+'form': __('Form'),
+'formSettings': _x('Settings', 'A settings section heading'),
+'formPlacement': _x('Form Placement', 'A settings section heading'),
+'customCss': _x('Custom CSS', 'A settings section heading'),
+'formSaved': __('Form saved.'),
+}) %>
+<% endblock %>
+
+<% block after_javascript %>
 <%= javascript('form_editor.js')%>
 <% endblock %>