Add functionality to refresh mss key status in preview modal

[MAILPOET-4633]

mailpoet/assets/js/src/common/index.ts

@@ -11,3 +11,4 @@ export * from './listings';
 export * from './error_boundary';
 export * from './functions';
 export * from './utils';
+export * from './thumbnail';

mailpoet/assets/js/src/common/utils.ts

@@ -1,4 +1,3 @@
 export const getLinkRegex = () => /\[link\](.*?)\[\/link\]/g;
 export const isTruthy = (value: string | number | boolean) =>
   [1, '1', true, 'true'].includes(value);
-

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

@@ -6,7 +6,7 @@ import Marionette from 'backbone.marionette';
 import $ from 'jquery';
 import Blob from 'blob';
 import FileSaver from 'file-saver';
-import * as Thumbnail from 'common/thumbnail.ts';
+import { isTruthy, fromNewsletter } from 'common';
 import _ from 'underscore';
 import SuperModel from 'backbone.supermodel/build/backbone.supermodel';
 
@@ -99,7 +99,7 @@ Module.save = function () {
 };
 
 Module.saveTemplate = function (options) {
-  return Thumbnail.fromNewsletter(App.toJSON()).then(function (thumbnail) {
+  return fromNewsletter(App.toJSON()).then(function (thumbnail) {
     var data = _.extend(options || {}, {
       thumbnail_data: thumbnail,
       body: JSON.stringify(App.getBody()),
@@ -116,7 +116,7 @@ Module.saveTemplate = function (options) {
 };
 
 Module.exportTemplate = function (options) {
-  return Thumbnail.fromNewsletter(App.toJSON()).then(function (thumbnail) {
+  return fromNewsletter(App.toJSON()).then(function (thumbnail) {
     var data = _.extend(options || {}, {
       thumbnail_data: thumbnail,
       body: App.getBody(),
@@ -573,6 +573,9 @@ Module.NewsletterPreviewModel = SuperModel.extend({
     previewSendingError: false,
     previewSendingSuccess: false,
     sendingPreview: false,
+    mssPendingApproval: window.mailpoet_mss_key_pending_approval,
+    mssKeyPendingApprovalRefreshMessage: true,
+    awaitingKeyCheck: false,
   },
 });
 
@@ -588,6 +591,7 @@ Module.NewsletterPreviewView = Marionette.View.extend({
     return {
       'change .mailpoet_browser_preview_type': 'changeBrowserPreviewType',
       'click #mailpoet_send_preview': 'sendPreview',
+      'click #refresh-mss-key-status': 'refreshMssKeyStatus',
     };
   },
   initialize: function (options) {
@@ -606,7 +610,11 @@ Module.NewsletterPreviewView = Marionette.View.extend({
         this.$('#mailpoet_preview_to_email').val() || window.currentUserEmail,
       previewSendingError: this.model.get('previewSendingError'),
       sendingPreview: this.model.get('sendingPreview'),
-      mssKeyPendingApproval: window.mailpoet_mss_key_pending_approval,
+      mssKeyPendingApproval: this.model.get('mssPendingApproval'),
+      mssKeyPendingApprovalRefreshMessage: this.model.get(
+        'mssKeyPendingApprovalRefreshMessage',
+      ),
+      awaitingKeyCheck: this.model.get('awaitingKeyCheck'),
     };
   },
   changeBrowserPreviewType: function (event) {
@@ -712,11 +720,11 @@ Module.NewsletterPreviewView = Marionette.View.extend({
                 )}</p>
                 <p>
                   <a
-                    href=${MailPoet.MailPoetComUrlFactory.getFreePlanUrl({
+                    href='${MailPoet.MailPoetComUrlFactory.getFreePlanUrl({
                       utm_campaign: 'sending-error',
-                    })}
+                    })}'
-                    target="_blank"
+                    target='_blank'
-                    rel="noopener noreferrer"
+                    rel='noopener noreferrer'
                   >
                     ${MailPoet.I18n.t(
                       'newsletterPreviewErrorSignUpForSendingService',
@@ -744,6 +752,31 @@ Module.NewsletterPreviewView = Marionette.View.extend({
       });
     return undefined;
   },
+  refreshMssKeyStatus: function () {
+    this.model.set('awaitingKeyCheck', true);
+
+    return MailPoet.Ajax.post({
+      api_version: window.mailpoet_api_version,
+      endpoint: 'services',
+      action: 'checkMSSKey',
+      data: {
+        key: window.mailpoet_api_key,
+      },
+    })
+      .done((response) => {
+        this.model.set('awaitingKeyCheck', false);
+        if (response.data && response.data.result.code === 200) {
+          this.model.set(
+            'mssPendingApproval',
+            !isTruthy(response.data.result.data.is_approved),
+          );
+          this.model.set('mssKeyPendingApprovalRefreshMessage', false);
+        }
+      })
+      .fail(() => {
+        this.model.set('awaitingKeyCheck', false);
+      });
+  },
 });
 
 App.on('before:start', function (BeforeStartApp) {

mailpoet/tests/javascript_newsletter_editor/newsletter_editor/components/save.spec.js

@@ -278,7 +278,7 @@ describe('Save', function () {
             },
           },
           'newsletter_editor/App': { App },
-          'common/thumbnail.ts': {
+          common: {
             fromNewsletter: function () {
               return promiseMock;
             },

mailpoet/views/newsletter/editor.html

@@ -374,6 +374,7 @@
   var mailpoet_email_editor_tutorial_seen  = '<%= editor_tutorial_seen %>';
   var mailpoet_email_editor_tutorial_url = '<%= cdn_url('newsletter-editor/editor-drag-demo.20190226-1505.mp4') %>';
   var mailpoet_installed_at = '<%= settings.installed_at %>';
+  var mailpoet_api_key = '<%= settings.mta.mailpoet_api_key %>';
 </script>
 
 <% endblock %>

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

@@ -57,8 +57,11 @@
     </form>
 
     {{#if mssKeyPendingApproval }}
-      <div class="mailpoet_error">
+      <div class="mailpoet_error pendindig_approval_error{{#if awaitingKeyCheck}} with-spinner{{/if}}">
         <%= __('You’ll soon be able to send once our team reviews your account. In the meantime, you can send previews to [link]your authorized emails[/link].')|replaceLinkTags('https://account.mailpoet.com/authorization', {'target': '_blank', 'rel': 'noopener noreferrer'})|raw %>
+        {{#if mssKeyPendingApprovalRefreshMessage }}
+        <%= __('If you have already received approval email, click [link]here[/link] to update the status.')|replaceLinkTags('#', {'id': 'refresh-mss-key-status'})|raw %>
+        {{/if}}
       </div>
     {{/if}}
   </div>