Added static modal for TK reminders (#19203)

Refs https://github.com/TryGhost/Product/issues/4218
- Moving the TK confirmation step into a small modal as a more
lightweight solution

---------

Co-authored-by: Kevin Ansfield <kevin@lookingsideways.co.uk>

ghost/admin/app/components/editor/modals/publish-flow.hbs

@@ -51,12 +51,6 @@
                 @postCount={{this.postCount}}
                 @close={{@close}}
             />
-        {{else if this.isConfirmingTks}}
-            <Editor::Modals::PublishFlow::TkReminder
-                @tkCount={{@data.tkCount}}
-                @close={{@close}}
-                @confirm={{this.confirmTks}}
-            />
         {{else}}
             <Editor::Modals::PublishFlow::Options
                 @publishOptions={{@data.publishOptions}}

ghost/admin/app/components/editor/modals/publish-flow.js

@@ -18,12 +18,6 @@ export default class PublishModalComponent extends Component {
     @tracked isComplete = false;
     @tracked postCount = null;
 
-    @tracked hasConfirmedTks = false;
-
-    get isConfirmingTks() {
-        return this.args.data.tkCount > 0 && !this.hasConfirmedTks;
-    }
-
     get recipientType() {
         const filter = this.args.data.publishOptions.recipientFilter;
 
@@ -46,11 +40,6 @@ export default class PublishModalComponent extends Component {
         return 'specific';
     }
 
-    @action
-    confirmTks() {
-        this.hasConfirmedTks = true;
-    }
-
     @action
     toggleConfirm() {
         this.isConfirming = !this.isConfirming;

ghost/admin/app/components/editor/modals/publish-flow/tk-reminder.hbs

@@ -1,23 +0,0 @@
-<div class="gh-publish-title">
-    <div>Forget something?</div>
-</div>
-<p class="gh-publish-confirmation">
-    Looks like you've got some unfinished business. There {{if (eq @tkCount 1) "is" "are" }} <strong>{{gh-pluralize @tkCount "TK reminder"}}</strong> left in your post.
-</p>
-
-<div class="gh-publish-cta">
-    <button
-        type="button"
-        class="gh-btn gh-btn-black gh-btn-large"
-        {{on "click" @close}}
-    >
-        <span>&larr; Back to editor</span>
-    </button>
-    <button
-        type="button"
-        class="gh-btn gh-btn-link gh-btn-large gh-publish-cta-secondary"
-        {{on "click" @confirm}}
-    >
-        Continue to publish
-    </button>
-</div>

ghost/admin/app/components/editor/modals/tk-reminder.hbs

@@ -0,0 +1,18 @@
+<div class="modal-content gh-tk-reminder" data-test-modal="tk-reminder">
+    <header class="modal-header">
+        <h1>Forget something?</h1>
+    </header>
+    <button type="button" class="close" title="Close" {{on "click" @close}}>{{svg-jar "close"}}<span class="hidden">Close</span></button>
+
+    <div class="modal-body">
+        <p>
+            Looks like you've got some unfinished business.
+            There {{if (eq @data.tkCount 1) "is" "are" }} <strong>{{gh-pluralize @data.tkCount "TK reminder"}}</strong> left in your post.
+        </p>
+    </div>
+
+    <div class="modal-footer">
+        <button type="button" class="gh-btn" {{on "click" (fn @close true)}}><span>Continue to publish</span></button>
+        <button type="button" class="gh-btn gh-btn-black" {{on "click" @close}}><span>Back to editor</span></button>
+    </div>
+</div>

ghost/admin/app/components/editor/publish-management.js

@@ -3,6 +3,7 @@ import EmailFailedError from 'ghost-admin/errors/email-failed-error';
 import PreviewModal from './modals/preview';
 import PublishFlowModal from './modals/publish-flow';
 import PublishOptionsResource from 'ghost-admin/helpers/publish-options';
+import TkReminderModal from './modals/tk-reminder';
 import UpdateFlowModal from './modals/update-flow';
 import envConfig from 'ghost-admin/config/environment';
 import {action} from '@ember/object';
@@ -45,6 +46,16 @@ export default class PublishManagement extends Component {
 
         const isValid = await this._validatePost();
 
+        if (this.args.tkCount > 0) {
+            const ignoreTks = await this.modals.open(TkReminderModal, {
+                tkCount: this.args.tkCount
+            });
+
+            if (ignoreTks !== true) {
+                return;
+            }
+        }
+
         if (isValid && !this.publishFlowModal || this.publishFlowModal?.isClosing) {
             this.publishOptions.resetPastScheduledAt();
 
@@ -52,8 +63,7 @@ export default class PublishManagement extends Component {
                 publishOptions: this.publishOptions,
                 saveTask: this.publishTask,
                 togglePreviewPublish: this.togglePreviewPublish,
-                skipAnimation,
-                tkCount: this.args.tkCount
+                skipAnimation
             });
 
             const result = await this.publishFlowModal;

ghost/admin/app/styles/layouts/editor.css

@@ -1059,6 +1059,10 @@ figure {
     padding-right: 8px; /* extra padding used for dynamic positioning with js */
 }
 
+.gh-tk-reminder .modal-body p strong {
+    white-space: nowrap;
+}
+
 /* Labs
 /* ---------------------------------------------------------- */