Add reply-to field to wizard

[MAILPOET-1573]

assets/js/src/welcome_wizard/steps/sender_step.jsx

@@ -43,6 +43,18 @@ const WelcomeWizardSenderStep = props => (
           onChange={e => props.update_sender({ address: e.target.value })}
         />
       </label>
+      <label htmlFor="replyToAddress">
+        {MailPoet.I18n.t('replyToAddress')}:
+        <input
+          name="replyToAddress"
+          type="text"
+          placeholder="john@doe.com"
+          value={props.reply_to ? props.reply_to.address : ''}
+          data-parsley-required
+          data-parsley-type="email"
+          onChange={e => props.update_reply_to({ address: e.target.value })}
+        />
+      </label>
       <SenderEmailAddressWarning emailAddress={props.sender.address} />
       <input className="button button-primary" type="submit" value={MailPoet.I18n.t('next')} />
       <a onClick={props.finish} href="#finish" className="sender_form_small">{MailPoet.I18n.t('noThanksSkip')}</a>
@@ -55,14 +67,19 @@ WelcomeWizardSenderStep.propTypes = {
   loading: PropTypes.bool.isRequired,
   update_sender: PropTypes.func.isRequired,
   submit_sender: PropTypes.func.isRequired,
+  update_reply_to: PropTypes.func.isRequired,
   sender: PropTypes.shape({
     name: PropTypes.string,
     address: PropTypes.string,
   }),
+  reply_to: PropTypes.shape({
+    address: PropTypes.string,
+  }),
 };
 
 WelcomeWizardSenderStep.defaultProps = {
   sender: null,
+  reply_to: null,
 };
 
 export default WelcomeWizardSenderStep;

assets/js/src/welcome_wizard/steps_controller.jsx

@@ -17,12 +17,14 @@ class WelcomeWizardStepsController extends React.Component {
       shouldSetSender: !window.is_mp2_migration_complete,
       loading: false,
       sender: window.sender_data,
+      replyTo: window.reply_to_data,
     };
 
     this.finishWizard = this.finishWizard.bind(this);
     this.updateSettings = this.updateSettings.bind(this);
     this.activateTracking = this.activateTracking.bind(this);
     this.updateSender = this.updateSender.bind(this);
+    this.updateReplyTo = this.updateReplyTo.bind(this);
     this.submitSender = this.submitSender.bind(this);
     this.showWooCommerceStepOrFinish = this.showWooCommerceStepOrFinish.bind(this);
     this.componentDidUpdate();
@@ -79,8 +81,17 @@ class WelcomeWizardStepsController extends React.Component {
     });
   }
 
+  updateReplyTo(data) {
+    this.setState({
+      replyTo: Object.assign({}, this.state.replyTo, data),
+    });
+  }
+
   submitSender() {
-    this.updateSettings({ sender: this.state.sender }).then(() => (this.props.history.push('/steps/2')));
+    this.updateSettings({
+      sender: this.state.sender,
+      reply_to: this.state.replyTo,
+    }).then(() => (this.props.history.push('/steps/2')));
   }
 
   render() {
@@ -96,9 +107,11 @@ class WelcomeWizardStepsController extends React.Component {
           <WelcomeWizardSenderStep
             update_sender={this.updateSender}
             submit_sender={this.submitSender}
+            update_reply_to={this.updateReplyTo}
             finish={this.finishWizard}
             loading={this.state.loading}
             sender={this.state.sender}
+            reply_to={this.state.replyTo}
           /> : null
         }