Add support for confirmation email in newsletter editor

MAILPOET-4649

mailpoet/assets/js/src/newsletter_editor/components/content.js

@@ -26,6 +26,9 @@ Module.NewsletterModel = SuperModel.extend({
   isAutomationEmail: function isAutomationEmail() {
     return this.get('type') === 'automation';
   },
+  isConfirmationEmailTemplate: function isConfirmationEmailTemplate() {
+    return this.get('type') === 'confirmation_email';
+  },
 });
 
 // Content block view and model handlers for different content types

mailpoet/assets/js/src/newsletter_editor/components/heading.js

@@ -17,6 +17,7 @@ Module.HeadingView = Marionette.View.extend({
       model: this.model.toJSON(),
       isWoocommerceTransactional: this.model.isWoocommerceTransactional(),
       isAutomationEmail: this.model.isAutomationEmail(),
+      isConfirmationEmailTemplate: this.model.isConfirmationEmailTemplate(),
     };
   },
   // eslint-disable-next-line func-names
@@ -41,29 +42,32 @@ Module.HeadingView = Marionette.View.extend({
 // eslint-disable-next-line func-names
 App.on('start', function (StartApp) {
   var model = StartApp.getNewsletter();
+
+  var subjectToolTip = document.getElementById('tooltip-designer-subject-line');
+  var preheaderToolTip = document.getElementById('tooltip-designer-preheader');
+
   StartApp._appView.showChildView(
     'headingRegion',
     new Module.HeadingView({ model: model }),
   );
   if (!model.isWoocommerceTransactional() && !model.isAutomationEmail()) {
-    MailPoet.helpTooltip.show(
+    if (subjectToolTip) {
-      document.getElementById('tooltip-designer-subject-line'),
+      MailPoet.helpTooltip.show(subjectToolTip, {
-      {
         tooltipId: 'tooltip-designer-subject-line-ti',
         tooltip: MailPoet.I18n.t('helpTooltipDesignerSubjectLine'),
         place: 'right',
-      },
+      });
-    );
+    }
-    MailPoet.helpTooltip.show(
+
-      document.getElementById('tooltip-designer-preheader'),
+    if (preheaderToolTip) {
-      {
+      MailPoet.helpTooltip.show(preheaderToolTip, {
         tooltipId: 'tooltip-designer-preheader-ti',
         tooltip:
           MailPoet.I18n.t('helpTooltipDesignerPreheader') +
           ' ' +
           MailPoet.I18n.t('helpTooltipDesignerPreheaderWarning'),
-      },
+      });
-    );
+    }
   }
 });
 

mailpoet/assets/js/src/newsletter_editor/components/save.js

@@ -106,6 +106,10 @@ Module.SaveView = Marionette.View.extend({
       woocommerceCustomizerEnabled: App.getConfig().get(
         'woocommerceCustomizerEnabled',
       ),
+      isConfirmationEmailTemplate: this.model.isConfirmationEmailTemplate(),
+      confirmationEmailCustomizerEnabled: App.getConfig().get(
+        'confirmationEmailCustomizerEnabled',
+      ),
     };
   },
   events: {
@@ -121,6 +125,9 @@ Module.SaveView = Marionette.View.extend({
     /* WooCommerce */
     'click .mailpoet_save_activate_wc_customizer_button':
       'activateWooCommerceCustomizer',
+    /* Confirmation email */
+    'click .mailpoet_save_activate_confirmation_email_customizer_button':
+      'activateConfirmationEmailCustomizer',
     /* Automation email */
     'click .mailpoet_save_go_to_automation': 'saveAndGoToAutomation',
     'click .mailpoet_show_preview': 'showPreview',
@@ -142,8 +149,15 @@ Module.SaveView = Marionette.View.extend({
     this.validateNewsletter(App.toJSON());
   },
   save: function () {
+    if (this.model.isConfirmationEmailTemplate()) {
+      if (!this.$('.mailpoet_save_button').hasClass('button-disabled')) {
         this.hideSaveOptions();
         App.getChannel().request('save');
+      }
+    } else {
+      this.hideSaveOptions();
+      App.getChannel().request('save');
+    }
   },
   beforeSave: function () {
     // TODO: Add a loading animation instead
@@ -364,6 +378,14 @@ Module.SaveView = Marionette.View.extend({
       return;
     }
 
+    if (
+      App.getConfig().get('validation.validateActivationLinkIsPresent') &&
+      body.indexOf('[activation_link]') < 0
+    ) {
+      this.showValidationError(MailPoet.I18n.t('activationLinkIsMissing'));
+      return;
+    }
+
     if (
       newsletter.get('type') === 're_engagement' &&
       body.indexOf('[link:subscription_re_engage_url]') < 0
@@ -404,10 +426,17 @@ Module.SaveView = Marionette.View.extend({
   showValidationError: function (message) {
     this.showError(message);
     this.$('.mailpoet_save_next').addClass('button-disabled');
+
+    if (this.model.isConfirmationEmailTemplate()) {
+      this.$('.mailpoet_save_button').addClass('button-disabled');
+    }
   },
   hideValidationError: function () {
     this.hideError();
     this.$('.mailpoet_save_next').removeClass('button-disabled');
+    if (this.model.isConfirmationEmailTemplate()) {
+      this.$('.mailpoet_save_button').removeClass('button-disabled');
+    }
   },
   activateWooCommerceCustomizer: function () {
     var $el = $('.mailpoet_save_woocommerce_customizer_disabled');
@@ -427,6 +456,24 @@ Module.SaveView = Marionette.View.extend({
         MailPoet.Notice.showApiErrorNotice(response, { scroll: true });
       });
   },
+  activateConfirmationEmailCustomizer: function () {
+    var $el = $('.mailpoet_save_confirmation_email_disabled');
+    return MailPoet.Ajax.post({
+      api_version: window.mailpoet_api_version,
+      endpoint: 'settings',
+      action: 'set',
+      data: {
+        'signup_confirmation.use_mailpoet_editor': 1,
+      },
+    })
+      .done(function () {
+        $el.addClass('mailpoet_hidden');
+        MailPoet.trackEvent('Editor > Confirmation email customizer enabled');
+      })
+      .fail(function (response) {
+        MailPoet.Notice.showApiErrorNotice(response, { scroll: true });
+      });
+  },
 });
 
 Module.autoSave = function () {
@@ -575,6 +622,18 @@ Module.NewsletterPreviewView = Marionette.View.extend({
       return false;
     }
 
+    // don't send preview if activation_link is missing
+    if (
+      App.getConfig().get('validation.validateActivationLinkIsPresent') &&
+      $('.mailpoet_save_button').hasClass('button-disabled')
+    ) {
+      MailPoet.Notice.error(MailPoet.I18n.t('activationLinkIsMissing'), {
+        positionAfter: $emailField,
+        scroll: true,
+      });
+      return false;
+    }
+
     this.model.set('previewSendingError', false);
     this.model.set('previewSendingSuccess', false);
     this.model.set('sendingPreview', true);

mailpoet/views/newsletter/templates/components/heading.hbs

@@ -12,6 +12,18 @@
   </div>
 {{else if isAutomationEmail}}
 
+{{else if isConfirmationEmailTemplate}}
+  <h3><%= _x('Edit template for Confirmation emails.', 'Name of user interface used to customize email template used for confirmation emails') %></h3>
+  <div class="mailpoet_form_field mailpoet_heading_form_field">
+    <input
+      type="text"
+      class="mailpoet_input mailpoet_input_title"
+      data-automation-id="newsletter_title"
+      value="{{ model.subject }}"
+      placeholder="<%= __('Click here to change the subject!') %>"
+    />
+    <span id="tooltip-designer-subject-line" class="tooltip-help-designer-subject-line"></span>
+  </div>
 {{else}}
 <div class="mailpoet_form_field mailpoet_heading_form_field">
   <input

mailpoet/views/newsletter/templates/components/save.hbs

@@ -20,6 +20,27 @@
 {{else if isAutomationEmail}}
     <input type="button" name="preview" class="button mailpoet_show_preview mailpoet_hidden" value="<%= __('Preview') %>" />
     <input type="button" name="save" value="<%= __('Save') %>" class="button button-primary mailpoet_save_go_to_automation mailpoet_hidden" />
+{{else if isConfirmationEmailTemplate}}
+  <div class="mailpoet_editor_confirmation_email_section">
+    <input type="button" name="preview" class="button mailpoet_show_preview" value="<%= __('Preview') %>" />
+    <div class="mailpoet_save_button_group">
+      <input type="button" name="save" value="<%= __('Save') %>" class="button button-primary mailpoet_save_button" />
+    </div>
+    <div class="clearfix"></div>
+    <div class="mailpoet_editor_messages_confirmation_email">
+      <div class="mailpoet_save_error"></div>
+      <div class="mailpoet_editor_last_saved">
+        &nbsp;
+        <span class="mailpoet_autosaved_message mailpoet_hidden"><%= __('Autosaved') %></span>
+        <span class="mailpoet_autosaved_at mailpoet_hidden"></span>
+      </div>
+    </div>
+    <div class="clearfix"></div>
+    <div class="mailpoet_save_confirmation_email_disabled{{#if confirmationEmailCustomizerEnabled}} mailpoet_hidden{{/if}}">
+      <div class="mailpoet_save_woocommerce_error"><%= __('The usage of this email template for your Confirmation emails is not yet activated.') %></div>
+      <input type="button" name="activate_confirmation_email_customizer" value="<%= __('Activate now') %>" class="button button-primary mailpoet_save_activate_confirmation_email_customizer_button" style="margin-top: 17px">
+    </div>
+  </div>
 {{else}}
     <input type="button" name="preview" class="button mailpoet_show_preview" value="<%= __('Preview') %>" />
     <input type="button" name="next" value="<%= __('Next') %>" class="button button-primary mailpoet_save_next" />

mailpoet/views/newsletter/templates/components/styles.hbs

@@ -58,4 +58,13 @@
         color: {{ woocommerce.brandingColor }};
       }
     {{/if}}
+    .mailpoet_editor_confirmation_email_section {
+      margin: 10px;
+    }
+    .mailpoet_editor_messages_confirmation_email {
+      font-size: 13px;
+      position: absolute;
+      right: 0;
+      top: 60%;
+    }
 </style>