Ask for permissions step

[MAILPOET-1856]

assets/js/src/wizard/revenue_tracking_permission.jsx

@@ -1,12 +1,46 @@
-import React from 'react';
+import React, { useState } from 'react';
+import MailPoet from 'mailpoet';
+import RevenueTrackingPermissionStep from './steps/revenue_tracking_permission_step.jsx';
 
 function RevenueTrackingPermission() {
+  const [loading, setLoading] = useState(false);
+
+  const handleApiError = (response) => {
+    setLoading(false);
+    let errorMessage = MailPoet.I18n.t('unknownError');
+    if (response && response.errors && response.errors.length > 0) {
+      errorMessage = response.errors.map(error => error.message);
+    }
+    MailPoet.Notice.error(errorMessage, { scroll: true });
+  };
+
+  const updateSettings = (data) => {
+    return MailPoet.Ajax.post({
+      api_version: window.mailpoet_api_version,
+      endpoint: 'settings',
+      action: 'set',
+      data,
+    }).fail(handleApiError);
+  };
+
+  const finishWizard = () => {
+    window.location = window.finish_wizard_url;
+  };
+
+  const submit = (allowed) => {
+    setLoading(true);
+    const settings = {
+      accept_cookie_revenue_tracking: allowed ? 1 : 0,
+    };
+    updateSettings(settings).then(finishWizard);
+  };
+
   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"/>
+        <img src={window.mailpoet_logo_url} width="200" height="87" alt="MailPoet logo" />
       </div>
-      <h1>This is the page</h1>
+      <RevenueTrackingPermissionStep loading={loading} submitForm={submit} />
     </div>
   );
 }

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

@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import MailPoet from 'mailpoet';
+import PropTypes from 'prop-types';
+
+function RevenueTrackingPermissionStep({ submitForm, loading }) {
+  const [allowed, setAllowed] = useState('true');
+
+  const submit = (event) => {
+    event.preventDefault();
+    if (allowed === undefined) return false;
+    submitForm(allowed === 'true');
+    return false;
+  };
+
+  return (
+    <div
+      className="
+        mailpoet_welcome_wizard_step_content
+        mailpoet_welcome_wizard_step_revenue_tracking
+        mailpoet_welcome_wizard_centered_column
+      "
+    >
+      <p>{MailPoet.I18n.t('revenueTrackingInfo1')}</p>
+      <p>{MailPoet.I18n.t('revenueTrackingInfo2')}</p>
+      <form onSubmit={submit} className="mailpoet_wizard_woocommerce_list">
+        <label htmlFor="tracking_allowed">
+          <input
+            id="tracking_allowed"
+            type="radio"
+            name="import_type"
+            checked={allowed === 'true'}
+            onChange={e => setAllowed(e.target.value)}
+            value="true"
+          />
+          {MailPoet.I18n.t('revenueTrackingAllow')}
+        </label>
+        <label htmlFor="tracking_not_allowed">
+          <input
+            id="tracking_not_allowed"
+            type="radio"
+            name="import_type"
+            checked={allowed === 'false'}
+            onChange={e => setAllowed(e.target.value)}
+            value="false"
+          />
+          {MailPoet.I18n.t('revenueTrackingDontAllow')}
+        </label>
+        <input
+          className="button button-primary"
+          type="submit"
+          value={MailPoet.I18n.t('revenueTrackingSubmit')}
+          disabled={loading}
+        />
+      </form>
+    </div>
+  );
+}
+
+RevenueTrackingPermissionStep.propTypes = {
+  submitForm: PropTypes.func.isRequired,
+  loading: PropTypes.bool.isRequired,
+};
+
+export default RevenueTrackingPermissionStep;

assets/js/src/wizard/wizard.jsx

@@ -17,10 +17,10 @@ if (container) {
   ReactDOM.render((
     <HashRouter>
       <div>
-        <Route exact path="/" render={() => <Redirect to={basePath} />} />
         <Route path="/steps/:step" component={WelcomeWizardStepsController} />
         <Route path="/import" component={WooCommerceImportController} />
         <Route path="/revenue-tracking-permission" component={RevenueTrackingPermissionController} />
+        <Route render={() => <Redirect to={basePath} />} />
       </div>
     </HashRouter>
   ), container);