Refined disabled states and copy

ghost/admin/app/components/gh-post-settings-menu.js

@@ -559,6 +559,10 @@ export default Component.extend(SettingsMenuMixin, {
         return true;
     },
 
+    mailgunError: computed('settings.memberSubscriptionSettings', function () {
+        return !this.isMailgunConfigured();
+    }),
+
     sendTestEmail: task(function* () {
         try {
             const resourceId = this.post.id;
@@ -568,7 +572,7 @@ export default Component.extend(SettingsMenuMixin, {
                 return false;
             }
             if (!this.isMailgunConfigured()) {
-                this.set('sendTestEmailError', 'Please configure mailgun in settings');
+                this.set('sendTestEmailError', 'Please configure Mailgun in Labs → Members');
                 return false;
             }
             this.set('sendTestEmailError', '');

ghost/admin/app/components/gh-publishmenu-draft.js

@@ -16,16 +16,24 @@ export default Component.extend({
 
     'data-test-publishmenu-draft': true,
 
+    mailgunError: computed('settings.memberSubscriptionSettings', function() {
+        return !this.isMailgunConfigured();
+    }),
+
+    isMailgunConfigured: function() {
+        let subSettingsValue = this.get('settings.membersSubscriptionSettings');
+        let subscriptionSettings = subSettingsValue ? JSON.parse(subSettingsValue) : {};
+        if (Object.keys(subscriptionSettings).includes('mailgunApiKey')) {
+            return subscriptionSettings.mailgunApiKey && subscriptionSettings.mailgunDomain;
+        }
+        return false;
+    },
+
     disableEmailOption: computed('memberCount', 'settings.membersSubscriptionSettings', function () {
         if (!this.feature.members) {
             return true;
         }
-        let subSettingsValue = this.get('settings.membersSubscriptionSettings');
+        return !this.isMailgunConfigured() || this.membersCount === 0;
-        let subscriptionSettings = subSettingsValue ? JSON.parse(subSettingsValue) : {};
-        if (Object.keys(subscriptionSettings).includes('mailgunApiKey')) {
-            return !subscriptionSettings.mailgunApiKey || !subscriptionSettings.mailgunDomain || this.membersCount === 0;
-        }
-        return this.membersCount === 0;
     }),
 
     didInsertElement() {

ghost/admin/app/styles/components/settings-menu.css

@@ -311,9 +311,28 @@
 
 /* Email
 /* ---------------------------------------------------------- */
-.gh-preview-email-button span {
+.settings-menu-email-button span {
     padding: 4px 0;
     line-height: 1em;
     height: unset;
     margin-bottom: 4px;
 }
+
+.settings-menu-mailgun-warning {
+    border-radius: 5px;
+    padding: 8px 12px;
+    background: var(--yellow);
+    color: #fff;
+    font-size: 13px;
+    font-weight: 500;
+}
+
+.settings-menu-mailgun-warning a {
+    text-decoration: underline;
+    color: #fff;
+}
+
+.settings-menu-email .disabled button,
+.settings-menu-email .disabled input {
+    opacity: 0.5;
+}

ghost/admin/app/templates/components/gh-post-settings-menu.hbs

@@ -321,7 +321,10 @@
                             <div style="width:23px;"></div>
                         </div>
 
-                        <div class="settings-menu-content">
+                        <div class="settings-menu-content settings-menu-email">
+                            {{#if mailgunError}}
+                                <p class="settings-menu-mailgun-warning">You need to configure Mailgun in {{#link-to "settings.labs" data-test-nav="labs"}}Labs → Members settings{{/link-to}} to enable sending posts in email.</p>
+                            {{/if}}
                             <form {{action "discardEnter" on="submit"}}>
                                 {{#gh-form-group errors=post.errors hasValidated=post.hasValidated property="emailSubject"}}
                                     <label for="og-title">Subject</label>
@@ -341,7 +344,7 @@
                                 <div class="form-group">
                                     <div class="flex">
                                         <label class="nowrap flex-auto">Test email</label>
-                                        <button type="button" class="gh-btn gh-btn-link gh-preview-email-button" onclick={{action "toggleEmailPreview"}}
+                                        <button type="button" class="gh-btn gh-btn-link settings-menu-email-button" onclick={{action "toggleEmailPreview"}}
                                             data-test-button="toggle-email-preview">
                                             <span class="blue">
                                                 Preview in browser
@@ -349,7 +352,7 @@
                                         </button>
                                     </div>
 
-                                    <div>
+                                    <div class="{{if mailgunError "disabled"}}">
                                     {{gh-text-input
                                         class="post-setting-email-test"
                                         id="email-test"
@@ -358,6 +361,7 @@
                                         value=(readonly emailTestScratch)
                                         input=(action (mut emailTestScratch) value="target.value")
                                         stopEnterKeyDownPropagation=true
+                                        disabled=mailgunError
                                         data-test-field="email-test"}}
                                     {{#if sendTestEmailError}}
                                         <div class="error"><p class="response">{{sendTestEmailError}}</p></div>
@@ -367,6 +371,7 @@
                                         successText="Email sent"
                                         runningText="Sending..."
                                         class="gh-btn w-100 mt2 gh-btn-icon"
+                                        disabled=mailgunError
                                         data-test-send-test-mail=true
                                     }}
                                     </div>

ghost/admin/app/templates/components/gh-publishmenu-draft.hbs

@@ -24,7 +24,7 @@
             <div class="gh-publishmenu-radio-desc">Set automatic future publish date</div>
         </div>
     </div>
-    {{#if (and this.feature.labs.members (eq this.post.displayName "post"))}}
+    {{#if (and this.feature.labs.members (eq this.post.displayName "post") (not mailgunError))}}
         <div class="gh-publishmenu-radio">
             {{#if this.backgroundLoader.isRunning}}
                 <div class="gh-loading-spinner" style="zoom: 50%"></div>