Added send test email button loading states

TryGhost · Nov 7, 2019 · c36c7a1 · c36c7a1
1 parent 2cde1ea
commit c36c7a1
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 18 deletions.
diff --git a/app/components/gh-post-settings-menu.js b/app/components/gh-post-settings-menu.js
@@ -413,18 +413,6 @@ export default Component.extend(SettingsMenuMixin, {
             });
         },
 
-        async sendTestEmail() {
-            const resourceId = this.post.id;
-            const testEmail = this.emailTestScratch;
-            const url = this.get('ghostPaths.url').api('/email_preview/posts', resourceId);
-            const data = {emails: [testEmail]};
-            const options = {
-                data,
-                dataType: 'json'
-            };
-            await this.ajax.post(url, options);
-        },
-
         setEmailSubject(emailSubject) {
             // Grab the post and current stored email subject
             let post = this.post;
@@ -560,6 +548,24 @@ export default Component.extend(SettingsMenuMixin, {
         this.set('_showThrobbers', true);
     }).restartable(),
 
+    sendTestEmail: task(function* () {
+        try {
+            const resourceId = this.post.id;
+            const testEmail = this.emailTestScratch;
+            const url = this.get('ghostPaths.url').api('/email_preview/posts', resourceId);
+            const data = {emails: [testEmail]};
+            const options = {
+                data,
+                dataType: 'json'
+            };
+            return yield this.ajax.post(url, options);
+        } catch (error) {
+            if (error) {
+                this.notifications.showAPIError(error, {key: 'send.previewEmail'});
+            }
+        }
+    }).drop(),
+
     showError(error) {
         // TODO: remove null check once ValidationEngine has been removed
         if (error) {

diff --git a/app/templates/components/gh-post-settings-menu.hbs b/app/templates/components/gh-post-settings-menu.hbs
@@ -359,12 +359,13 @@
                                         stopEnterKeyDownPropagation=true
                                         data-test-field="email-test"}}
 
-                                    <button type="button" class="gh-btn w-100 mt2"
-                                        onclick={{action "sendTestEmail"}} data-test-button="send-test-email">
-                                        <span>
-                                            Send Test Email
-                                        </span>
-                                    </button>
+                                    {{gh-task-button "Send Test Email"
+                                        task=sendTestEmail
+                                        successText="Sent"
+                                        runningText="Sending..."
+                                        class="gh-btn w-100 mt2 gh-btn-icon"
+                                        data-test-send-test-mail=true
+                                    }}
                                 </div>
                             </form>
                         </div>