Add empty woo commerce import list page

[MAILPOET-1732]

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

@@ -0,0 +1,13 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import MailPoet from 'mailpoet';
+
+const WizardWooCommerceImportListStep = props => (
+  <div className="mailpoet_welcome_wizard_step_content mailpoet_welcome_wizard_centered_column">
+    <h1>{MailPoet.I18n.t('wooCommerceListImportTitle')}</h1>
+  </div>
+);
+
+WizardWooCommerceImportListStep.propTypes = {};
+
+export default WizardWooCommerceImportListStep;

assets/js/src/wizard/wizard.jsx

@@ -2,15 +2,18 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Route, HashRouter, Redirect } from 'react-router-dom';
 import WelcomeWizardStepsController from './welcome_wizard_controller.jsx';
+import WooCommerceImportController from './woocommerce_import_controller.jsx';
 
 const container = document.getElementById('mailpoet_wizard_container');
 
 if (container) {
+  const basePath = window.location.search.includes('woocommerce-list-import') ? '/import' : '/steps/1';
   ReactDOM.render((
     <HashRouter>
       <div>
-        <Route exact path="/" render={() => <Redirect to="/steps/1" />} />
+        <Route exact path="/" render={() => <Redirect to={basePath} />} />
         <Route path="/steps/:step" component={WelcomeWizardStepsController} />
+        <Route path="/import" component={WooCommerceImportController} />
       </div>
     </HashRouter>
   ), container);

assets/js/src/wizard/woocommerce_import_controller.jsx

@@ -0,0 +1,54 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import MailPoet from 'mailpoet';
+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);
+  }
+
+
+  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,
+    }).then(() => this.setState({ loading: false })).fail((response) => {
+      this.setState({ loading: false });
+      if (response.errors.length > 0) {
+        MailPoet.Notice.error(
+          response.errors.map(error => error.message),
+          { scroll: true }
+        );
+      }
+    });
+  }
+
+  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} />
+      </div>
+    );
+  }
+}
+
+WooCommerceImportController.propTypes = {};
+
+export default WooCommerceImportController;