Add new selects to import form

Fixes:#2968
[MAILPOET-2957]

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

@@ -5,6 +5,8 @@ import PreviousNextStepButtons from './previous_next_step_buttons.jsx';
 import Warnings from './step_data_manipulation/warnings.jsx';
 import MatchTable from './step_data_manipulation/match_table.jsx';
 import SelectSegment from './step_data_manipulation/select_segment.jsx';
+import NewSubscribersStatus from './step_data_manipulation/new_subscribers_status.jsx';
+import ExistingSubscribersStatus from './step_data_manipulation/existing_subscribers_status.jsx';
 import UpdateExistingSubscribers from './step_data_manipulation/update_existing_subscribers.jsx';
 import doImport from './step_data_manipulation/do_import.jsx';
 
@@ -29,6 +31,8 @@ function StepDataManipulation({
 }) {
   const [selectedSegments, setSelectedSegments] = useState([]);
   const [updateExistingSubscribers, setUpdateExistingSubscribers] = useState(true);
+  const [newSubscribersStatus, setNewSubscribersStatus] = useState('subscribed');
+  const [existingSubscribersStatus, setExistingSubscribersStatus] = useState('dontUpdate');
   useEffect(
     () => {
       if (typeof (stepMethodSelectionData) === 'undefined') {
@@ -67,6 +71,14 @@ function StepDataManipulation({
         header={stepMethodSelectionData.header}
       />
       <SelectSegment setSelectedSegments={setSelectedSegments} />
+      <NewSubscribersStatus
+        newSubscribersStatus={newSubscribersStatus}
+        setNewSubscribersStatus={setNewSubscribersStatus}
+      />
+      <ExistingSubscribersStatus
+        existingSubscribersStatus={existingSubscribersStatus}
+        setExistingSubscribersStatus={setExistingSubscribersStatus}
+      />
       <UpdateExistingSubscribers
         setUpdateExistingSubscribers={setUpdateExistingSubscribers}
         updateExistingSubscribers={updateExistingSubscribers}

assets/js/src/subscribers/importExport/import/step_data_manipulation/existing_subscribers_status.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import MailPoet from 'mailpoet';
+import PropTypes from 'prop-types';
+
+function ExistingSubscribersStatus({ existingSubscribersStatus, setExistingSubscribersStatus }) {
+  function handleChange(event) {
+    setExistingSubscribersStatus(event.target.value);
+  }
+
+  return (
+    <div className="mailpoet_import_select_segment">
+      <div className="mailpoet_label_description">{MailPoet.I18n.t('existingSubscribersStatus')}</div>
+      <label htmlFor="existing_subscribers_status">
+        <select
+          id="existing_subscribers_status"
+          data-placeholder={MailPoet.I18n.t('select')}
+          name="existing_subscribers_status"
+          onChange={handleChange}
+          value={existingSubscribersStatus}
+        >
+          <option value="dont_update">{MailPoet.I18n.t('dontUpdate')}</option>
+          <option value="subscribed">{MailPoet.I18n.t('subscribed')}</option>
+          <option value="inactive">{MailPoet.I18n.t('inactive')}</option>
+          <option value="unsubscribed">{MailPoet.I18n.t('unsubscribed')}</option>
+        </select>
+      </label>
+    </div>
+  );
+}
+
+ExistingSubscribersStatus.propTypes = {
+  existingSubscribersStatus: PropTypes.string.isRequired,
+  setExistingSubscribersStatus: PropTypes.func.isRequired,
+};
+
+export default ExistingSubscribersStatus;

assets/js/src/subscribers/importExport/import/step_data_manipulation/new_subscribers_status.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import MailPoet from 'mailpoet';
+import PropTypes from 'prop-types';
+
+function NewSubscribersStatus({ newSubscribersStatus, setNewSubscribersStatus }) {
+  function handleChange(event) {
+    setNewSubscribersStatus(event.target.value);
+  }
+
+  return (
+    <div className="mailpoet_import_select_segment">
+      <div className="mailpoet_label_description">{MailPoet.I18n.t('newSubscribersStatus')}</div>
+      <label htmlFor="new_subscribers_status">
+        <select
+          id="new_subscribers_status"
+          data-placeholder={MailPoet.I18n.t('select')}
+          name="new_subscribers_status"
+          onChange={handleChange}
+          value={newSubscribersStatus}
+        >
+          <option value="subscribed">{MailPoet.I18n.t('subscribed')}</option>
+          <option value="inactive">{MailPoet.I18n.t('inactive')}</option>
+          <option value="unsubscribed">{MailPoet.I18n.t('unsubscribed')}</option>
+        </select>
+      </label>
+    </div>
+  );
+}
+
+NewSubscribersStatus.propTypes = {
+  newSubscribersStatus: PropTypes.string.isRequired,
+  setNewSubscribersStatus: PropTypes.func.isRequired,
+};
+
+export default NewSubscribersStatus;

views/subscribers/importExport/import.html

@@ -133,5 +133,11 @@
 'offerClearoutText3': __('We recommend cleaning your list with Clearout because the first 500 emails are free, it’s fast and it detects up to 50% of invalid addresses. It’s our support team’s favorite.'),
 'tryClearout': _x('Try clearout.io for free', 'CTA button label'),
 'clearoutGotIt': _x('Got it, I’ll proceed to import', 'Text in a link'),
+'subscribed': __('Subscribed'),
+'unsubscribed': __('Unsubscribed'),
+'inactive': __('Inactive'),
+'dontUpdate': __('Don\’t update'),
+'newSubscribersStatus': __('Set new subscribers\' status to'),
+'existingSubscribersStatus': __('Update existing subscribers\' status to'),
 }) %>
 <% endblock %>