Added explicit count of paid members to email confirmation modal

closes https://github.com/TryGhost/Ghost/issues/12112

- perform a paid members list query with a limit of 1 when the modal is displayed if the post is set to members only, then use the pagination meta data to get a total number of members
- display a spinner and disable the confirm button whilst the count query is in progress
- does not display any counts for users with the Editor role as they do not have permission to list members

ghost/admin/app/components/modal-confirm-email-send.hbs

@@ -4,12 +4,26 @@
     </header>
     <button class="close" title="Close" {{on "click" this.closeModal}}>{{svg-jar "close"}}<span class="hidden">Close</span></button>
 
-    <div class="modal-body">
+    <div class="modal-body" {{did-insert this.countPaidMembers}}>
-        <p>
+        {{#if this.countPaidMembersTask.isRunning}}
-            Your post will be delivered to
+             <div class="flex flex-column items-center">
-            <strong>{{this.deliveredToMessage}}</strong>
+                 <div class="gh-loading-spinner"></div>
-            and will be published on your site{{#if this.model.isScheduled}} at the scheduled time{{/if}}. Sound good?
+             </div>
-        </p>
+        {{else}}
+            <p>
+                Your post will be delivered to
+                <strong>
+                    {{#if this.model.paidOnly}}
+                        {{!-- TODO: remove editor fallback once editors can query member counts --}}
+                        {{if this.session.user.isEditor "all paid members" (gh-pluralize this.paidMemberCount "paid member")}}
+                    {{else}}
+                        {{!-- TODO: remove editor fallback once editors can query member counts --}}
+                        {{if this.session.user.isEditor "all members" (gh-pluralize this.model.memberCount "member")}}
+                    {{/if}}
+                </strong>
+                and will be published on your site{{#if this.model.isScheduled}} at the scheduled time{{/if}}. Sound good?
+            </p>
+        {{/if}}
     </div>
 
     <div class="modal-footer">
@@ -17,9 +31,10 @@
             <span>Cancel</span>
         </button>
         <GhTaskButton
+            @disabled={{this.countPaidMembersTask.isRunning}}
             @buttonText={{if this.model.isScheduled "Schedule" "Publish and send"}}
             @runningText={{if this.model.isScheduled "Scheduling..." "Publishing..."}}
-            @task={{this.confirmAndCheckError}}
+            @task={{this.confirmAndCheckErrorTask}}
             @class="gh-btn gh-btn-green gh-btn-icon"
             data-test-button="confirm-publish-and-email"
         />

ghost/admin/app/components/modal-confirm-email-send.js

@@ -1,31 +1,31 @@
 import ModalComponent from 'ghost-admin/components/modal-base';
-import {computed} from '@ember/object';
+import {action} from '@ember/object';
-import {ghPluralize} from 'ghost-admin/helpers/gh-pluralize';
 import {inject as service} from '@ember/service';
 import {task} from 'ember-concurrency';
 
 export default ModalComponent.extend({
     session: service(),
+    store: service(),
 
     errorMessage: null,
+    paidMemberCount: null,
 
     // Allowed actions
     confirm: () => {},
 
-    deliveredToMessage: computed('model.{paidOnly,memberCount}', function () {
+    countPaidMembers: action(function () {
-        const isEditor = this.get('session.user.isEditor');
+        // TODO: remove editor conditional once editors can query member counts
-        if (this.get('model.paidOnly')) {
+        if (this.model.paidOnly && !this.session.get('user.isEditor')) {
-            return 'all paid members';
+            this.countPaidMembersTask.perform();
         }
-
-        if (isEditor) {
-            return 'all members';
-        }
-
-        return ghPluralize(this.get('model.memberCount'), 'member');
     }),
 
-    confirmAndCheckError: task(function* () {
+    countPaidMembersTask: task(function* () {
+        const result = yield this.store.query('member', {filter: 'subscribed:true', paid: true, limit: 1, page: 1});
+        this.set('paidMemberCount', result.meta.pagination.total);
+    }),
+
+    confirmAndCheckErrorTask: task(function* () {
         try {
             yield this.confirm();
             this.closeModal();