Add WooCommerce list import scheduling

[MAILPOET-1732]

assets/js/src/wizard/steps/woo_commerce_import_list_step.jsx

@@ -1,13 +1,80 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import MailPoet from 'mailpoet';
+import ReactHtmlParser from 'react-html-parser';
 
-const WizardWooCommerceImportListStep = props => (
-  <div className="mailpoet_welcome_wizard_step_content mailpoet_welcome_wizard_centered_column">
-    <h1>{MailPoet.I18n.t('wooCommerceListImportTitle')}</h1>
-  </div>
-);
 
-WizardWooCommerceImportListStep.propTypes = {};
+class WizardWooCommerceImportListStep extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      importType: null,
+    };
+
+    this.handleOptionChange = this.handleOptionChange.bind(this);
+    this.submit = this.submit.bind(this);
+  }
+
+  handleOptionChange(event) {
+    this.setState({
+      importType: event.target.value,
+    });
+  }
+
+  submit(event) {
+    event.preventDefault();
+    if (!this.state.importType) return false;
+    this.props.submitForm(this.state.importType);
+    return false;
+  }
+
+  render() {
+    return (
+      <div className="mailpoet_welcome_wizard_step_content mailpoet_welcome_wizard_centered_column">
+        <h1>{MailPoet.I18n.t('wooCommerceListImportTitle')}</h1>
+        <p>{MailPoet.I18n.t('wooCommerceListImportInfo1')}</p>
+        <p>{MailPoet.I18n.t('wooCommerceListImportInfo2')}</p>
+        <p><b>{MailPoet.I18n.t('wooCommerceListImportInfo3')}</b></p>
+        <form onSubmit={this.submit} className="mailpoet_wizard_woocommerce_list">
+          <label htmlFor="import_type_subscribed">
+            <input
+              id="import_type_subscribed"
+              type="radio"
+              name="import_type"
+              checked={this.state.importType === 'subscribed'}
+              onChange={this.handleOptionChange}
+              value="subscribed"
+            />
+            {ReactHtmlParser(MailPoet.I18n.t('wooCommerceListImportCheckboxSubscribed'))}
+          </label>
+          <label htmlFor="import_type_unsubscribed">
+            <input
+              id="import_type_unsubscribed"
+              type="radio"
+              name="import_type"
+              checked={this.state.importType === 'unsubscribed'}
+              onChange={this.handleOptionChange}
+              value="unsubscribed"
+            />
+            {ReactHtmlParser(MailPoet.I18n.t('wooCommerceListImportCheckboxUnsubscribed'))}
+          </label>
+          <p>{MailPoet.I18n.t('wooCommerceListImportInfo4')}</p>
+          <input
+            className="button button-primary"
+            type="submit"
+            value={MailPoet.I18n.t('wooCommerceListImportSubmit')}
+            disabled={!this.state.importType || this.props.loading}
+          />
+        </form>
+      </div>
+    );
+  }
+}
+
+WizardWooCommerceImportListStep.propTypes = {
+  submitForm: PropTypes.func.isRequired,
+  loading: PropTypes.bool.isRequired,
+};
 
 export default WizardWooCommerceImportListStep;

assets/js/src/wizard/woocommerce_import_controller.jsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import MailPoet from 'mailpoet';
 import WooCommerceImportListStep from './steps/woo_commerce_import_list_step.jsx';
@@ -6,26 +5,42 @@ import WooCommerceImportListStep from './steps/woo_commerce_import_list_step.jsx
 class WooCommerceImportController extends React.Component {
   constructor(props) {
     super(props);
-
     this.state = {
       loading: false,
     };
     this.updateSettings = this.updateSettings.bind(this);
+    this.scheduleImport = this.scheduleImport.bind(this);
+    this.finishWizard = this.finishWizard.bind(this);
+    this.submit = this.submit.bind(this);
   }
 
-
   finishWizard() {
     this.setState({ loading: true });
     window.location = window.finish_wizard_url;
   }
 
   updateSettings(data) {
-    this.setState({ loading: true });
     return MailPoet.Ajax.post({
       api_version: window.mailpoet_api_version,
       endpoint: 'settings',
       action: 'set',
       data,
+    }).fail((response) => {
+      this.setState({ loading: false });
+      if (response.errors.length > 0) {
+        MailPoet.Notice.error(
+          response.errors.map(error => error.message),
+          { scroll: true }
+        );
+      }
+    });
+  }
+
+  scheduleImport() {
+    return MailPoet.Ajax.post({
+      api_version: window.mailpoet_api_version,
+      endpoint: 'importExport',
+      action: 'setupWooCommerceInitialImport',
     }).then(() => this.setState({ loading: false })).fail((response) => {
       this.setState({ loading: false });
       if (response.errors.length > 0) {
@@ -37,13 +52,22 @@ class WooCommerceImportController extends React.Component {
     });
   }
 
+  submit(importType) {
+    this.setState({ loading: true });
+    const settings = {
+      'woocommerce.import_screen_displayed': 1,
+      'mailpoet_subscribe_old_woocommerce_customers.enabled': importType === 'subscribed' ? 1 : 0,
+    };
+    this.updateSettings(settings).then(this.scheduleImport).then(this.finishWizard);
+  }
+
   render() {
     return (
       <div className="mailpoet_welcome_wizard_steps mailpoet_welcome_wizard_centered_column">
         <div className="mailpoet_welcome_wizard_header">
           <img src={window.mailpoet_logo_url} width="200" height="87" alt="MailPoet logo" />
         </div>
-        <WooCommerceImportListStep loading={this.state.loading} />
+        <WooCommerceImportListStep loading={this.state.loading} submitForm={this.submit} />
       </div>
     );
   }