From d2456947bdc54549f9adb1105b0645093e080bc8 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Mon, 10 Aug 2020 12:27:16 +0100
Subject: [PATCH] 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
---
 app/components/modal-confirm-email-send.hbs | 29 ++++++++++++++++-----
 app/components/modal-confirm-email-send.js  | 26 +++++++++---------
 2 files changed, 35 insertions(+), 20 deletions(-)

diff --git a/app/components/modal-confirm-email-send.hbs b/app/components/modal-confirm-email-send.hbs
index 3e45c44ae..59fecf3ef 100644
--- a/app/components/modal-confirm-email-send.hbs
+++ b/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">
-        <p>
-            Your post will be delivered to
-            <strong>{{this.deliveredToMessage}}</strong>
-            and will be published on your site{{#if this.model.isScheduled}} at the scheduled time{{/if}}. Sound good?
-        </p>
+    <div class="modal-body" {{did-insert this.countPaidMembers}}>
+        {{#if this.countPaidMembersTask.isRunning}}
+             <div class="flex flex-column items-center">
+                 <div class="gh-loading-spinner"></div>
+             </div>
+        {{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"
         />
diff --git a/app/components/modal-confirm-email-send.js b/app/components/modal-confirm-email-send.js
index 54bbe493c..cc178d60c 100644
--- a/app/components/modal-confirm-email-send.js
+++ b/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 {ghPluralize} from 'ghost-admin/helpers/gh-pluralize';
+import {action} from '@ember/object';
 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 () {
-        const isEditor = this.get('session.user.isEditor');
-        if (this.get('model.paidOnly')) {
-            return 'all paid members';
+    countPaidMembers: action(function () {
+        // TODO: remove editor conditional once editors can query member counts
+        if (this.model.paidOnly && !this.session.get('user.isEditor')) {
+            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();