Add paste component

[MAILPOET-1808]

assets/js/src/subscribers/importExport/import/step_method_selection.jsx

@@ -9,9 +9,17 @@ import MethodMailChimp from './step_method_selection/method_mailchimp.jsx';
 function StepMethodSelection({
   navigate,
 }) {
-  const canGoNext = false;
+  const [canGoNext, setCanGoNext] = useState(false);
   const [method, setMethod] = useState(undefined);
 
+  const setInputValid = () => {
+    setCanGoNext(true);
+  };
+
+  const setInputInValid = () => {
+    setCanGoNext(false);
+  };
+
   const showNextButton = () => {
     if (method) {
       return (
@@ -33,17 +41,24 @@ function StepMethodSelection({
       />
       { method === 'paste-method'
         ? (
-          <MethodPaste />
+          <MethodPaste
+            setInputValid={setInputValid}
+            setInputInvalid={setInputInValid}
+          />
         ) : null
       }
       { method === 'csv-method'
         ? (
-          <MethodUpload />
+          <MethodUpload
+            setInputValid={setInputValid}
+          />
         ) : null
       }
       { method === 'mailchimp-method'
         ? (
-          <MethodMailChimp />
+          <MethodMailChimp
+            setInputValid={setInputValid}
+          />
         ) : null
       }
       {showNextButton()}

assets/js/src/subscribers/importExport/import/step_method_selection/method_mailchimp.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import MailPoet from 'mailpoet';
 
-const MethodMailChimp = () => {
+const MethodMailChimp = ({ setInputValid }) => {
   return (
     <div>
       MethodMailChimp
@@ -11,9 +11,11 @@ const MethodMailChimp = () => {
 };
 
 MethodMailChimp.propTypes = {
+  setInputValid: PropTypes.func,
 };
 
 MethodMailChimp.defaultProps = {
+  setInputValid: () => {},
 };
 
 export default MethodMailChimp;

assets/js/src/subscribers/importExport/import/step_method_selection/method_paste.jsx

@@ -1,19 +1,61 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import MailPoet from 'mailpoet';
+import ReactStringReplace from 'react-string-replace';
+
+const kbLink = 'http://docs.mailpoet.com/article/126-importing-subscribers-with-csv-files'
+
+const placeholder = 'Email, First Name, Last Name\njohn@doe.com, John, Doe\nmary@smith.com, Mary, Smith\njohnny@walker.com, Johnny, Walker';
+
+const MethodPaste = ({ setInputValid, setInputInvalid }) => {
+  const onChange = (e) => {
+    if (e.target.value) {
+      setInputValid();
+    } else {
+      setInputInvalid();
+    }
+  };
 
-const MethodPaste = () => {
   return (
     <div>
-      MethodPaste
+      <label htmlFor="paste_input">
+        <span>{MailPoet.I18n.t('pasteLabel')}</span>
+        <p className="description">
+          {ReactStringReplace(
+            MailPoet.I18n.t('pasteDescription'),
+            /\[link\](.*?)\[\/link\]/,
+            match => (
+              <a
+                href={`${kbLink}`}
+                key="kb-link"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                { match }
+              </a>
+            )
+          )}
+        </p>
+        <textarea
+          id="paste_input"
+          rows="15"
+          placeholder={placeholder}
+          className="regular-text code"
+          onChange={onChange}
+        />
+      </label>
     </div>
   );
 };
 
 MethodPaste.propTypes = {
+  setInputValid: PropTypes.func,
+  setInputInvalid: PropTypes.func,
 };
 
 MethodPaste.defaultProps = {
+  setInputValid: () => {},
+  setInputInvalid: () => {},
 };
 
 export default MethodPaste;

assets/js/src/subscribers/importExport/import/step_method_selection/method_upload.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import MailPoet from 'mailpoet';
 
-const MethodUpload = () => {
+const MethodUpload = ({ setInputValid }) => {
   return (
     <div>
       MethodUpload
@@ -11,9 +11,11 @@ const MethodUpload = () => {
 };
 
 MethodUpload.propTypes = {
+  setInputValid: PropTypes.func,
 };
 
 MethodUpload.defaultProps = {
+  setInputValid: () => {},
 };
 
 export default MethodUpload;

views/subscribers/importExport/import.html

@@ -97,6 +97,8 @@
 'methodPaste': __('Paste the data into a text box'),
 'methodUpload': __('Upload a file'),
 'methodMailChimp': __('Import from MailChimp'),
+'pasteLabel': __('Copy and paste your subscribers from Excel/Spreadsheets'),
+'pasteDescription': __('This file needs to be formatted in a CSV style (comma-separated-values.) Look at some [link]examples on our support site[/link].'),
 'methodSelectionHead': __('How would you like to import subscribers?')
 }) %>
 <% endblock %>

views/subscribers/importExport/import/step_method_selection.html

@@ -1,28 +1,5 @@
 <div id="step_method_selection" class="mailpoet_hidden method_selection_step">
   <div class="inside">
-    <!-- Paste -->
-    <div id="method_paste" class="mailpoet_hidden">
-      <table class="mailpoet_subscribers form-table">
-        <tbody>
-        <tr>
-          <th scope="row">
-            <label for="paste_input"> <%= __('Copy and paste your subscribers from Excel/Spreadsheets') %>
-              <p class="description">
-                <%= csvDescription|replaceLinkTags(csvKBLink, {'target' : '_blank'})|raw %>
-              </p>
-            </label>
-          </th>
-          <td>
-            <textarea id="paste_input" rows="15" data-placeholder="Email, First Name, Last Name\njohn@doe.com, John, Doe\nmary@smith.com, Mary, Smith\njohnny@walker.com, Johnny, Walker" class="regular-text code"></textarea>
-          </td>
-        </tr>
-        </tbody>
-      </table>
-      <div class="mailpoet_method_process">
-        <!-- Template data -->
-      </div>
-    </div>
-
     <!-- CSV file -->
     <div id="method_file" class="mailpoet_hidden">
       <table class="mailpoet_subscribers form-table">