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;