Added confirmation step to new publish flow

refs https://github.com/TryGhost/Team/issues/1542

- added `willPublish` and `willEmail` convenience getters to `PublishOptions`
- added confirmation step that is switched to when clicking the Continue button in the publish flow
- separated options and confirmation steps into discrete components used by the `publish-flow` modal

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

@@ -6,70 +6,19 @@
     </header>
 
     <div class="gh-publish-settings-container">
-        <div class="gh-publish-title"><span>Another masterpiece.</span> Ready to share it with the world?</div>
+        {{#if this.isConfirming}}
-        <div class="gh-publish-settings">
+            <EditorLabs::Modals::PublishFlow::Confirm
-            <div class="gh-publish-setting">
-                <div class="gh-publish-setting-title">
-                    {{svg-jar "send-email"}}
-                    {{#if @data.publishOptions.emailUnavailable}}
-                        <span>Publish on site</span>
-                    {{else}}
-                        <button type="button" class="gh-publish-setting-trigger" {{on "click" (fn this.toggleSection "publishType")}}>
-                            <span>{{@data.publishOptions.selectedPublishTypeOption.display}}</span>
-                        </button>
-                    {{/if}}
-                </div>
-                {{#liquid-if (eq this.openSection "publishType")}}
-                    <div class="gh-publish-setting-form">
-                        <EditorLabs::PublishOptions::PublishType
                 @publishOptions={{@data.publishOptions}}
+                @confirm={{noop}}
+                @cancel={{this.toggleConfirm}}
+                @close={{@close}}
             />
-                    </div>
-                {{/liquid-if}}
-            </div>
-
-            {{#if (not-eq @data.publishOptions.publishType "publish")}}
-                <div class="gh-publish-setting">
-                    <div class="gh-publish-setting-title">
-                        {{svg-jar "member"}}
-                        <div class="gh-publish-setting-trigger">
-                            {{#let (members-count-fetcher query=(hash filter=@data.publishOptions.recipientFilter)) as |countFetcher|}}
-                                {{countFetcher.count}}
-                            {{/let}}
-                            {{#unless @data.publishOptions.onlyDefaultNewsletter}}
-                                <span>{{@data.publishOptions.newsletter.name}}</span>
-                            {{/unless}}
-                            subscribers
-                        </div>
-                    </div>
-                </div>
-            {{/if}}
-
-            <div class="gh-publish-setting">
-                <div class="gh-publish-setting-title">
-                    {{svg-jar "clock"}}
-                    <button type="button" class="gh-publish-setting-trigger" {{on "click" (fn this.toggleSection "publishAt")}}>
-                        <span>
-                            {{#if @data.publishOptions.isScheduled}}
-                                {{capitalize (gh-format-post-time @data.publishOptions.scheduledAtUTC draft=true)}}
         {{else}}
-                                Right now
+            <EditorLabs::Modals::PublishFlow::Options
-                            {{/if}}
-                        </span>
-                    </button>
-                </div>
-                {{#liquid-if (eq this.openSection "publishAt")}}
-                    <EditorLabs::PublishOptions::PublishAt
                 @publishOptions={{@data.publishOptions}}
+                @confirm={{this.toggleConfirm}}
+                @close={{@close}}
             />
-                {{/liquid-if}}
+        {{/if}}
-            </div>
-
-        </div>
-
-        <div class="gh-publish-cta">
-            <button type="button" class="gh-btn gh-btn-black gh-btn-large" {{on "click" (noop)}}><span>Continue &rarr;</span></button>
-            <button type="button" class="gh-btn gh-btn-link gh-btn-large" {{on "click" @close}}><span>Back to edit</span></button>
-        </div>
     </div>
 </div>

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

@@ -9,14 +9,11 @@ export default class PublishModalComponent extends Component {
         ignoreBackdropClick: true
     };
 
-    @tracked openSection = null;
+    @tracked isConfirming = false;
 
     @action
-    toggleSection(section) {
+    toggleConfirm() {
-        if (section === this.openSection) {
+        // TODO: validate?
-            this.openSection = null;
+        this.isConfirming = !this.isConfirming;
-        } else {
-            this.openSection = section;
-        }
     }
 }

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

@@ -0,0 +1,46 @@
+<div class="gh-publish-title">
+    Ready to go?<br>
+    Here's what happens next.
+</div>
+
+<p>
+    {{#if @publishOptions.isScheduled}}
+        {{#let (moment-site-tz @publishOptions.scheduledAtUTC) as |scheduledAt|}}
+            On
+            <strong>
+                {{moment-format scheduledAt "D MMM YYYY"}}
+                at
+                {{moment-format scheduledAt "HH:mm"}}
+            </strong>
+        {{/let}}
+    {{else}}
+        Your
+    {{/if}}
+
+    {{@publishOptions.post.displayName}}
+
+    {{#if @publishOptions.willEmail}}
+        will be delivered to
+
+        {{#let (members-count-fetcher query=(hash filter=@publishOptions.recipientFilter)) as |countFetcher|}}
+            <strong>{{pluralize countFetcher.count "member"}}</strong>
+        {{/let}}
+
+        {{#if @publishOptions.willPublish}}
+            and
+        {{else}}
+            and will <strong>not</strong> be published on your site.
+        {{/if}}
+    {{/if}}
+
+    {{#if @publishOptions.willPublish}}
+        will be published on your site.
+    {{/if}}
+
+    Sound good?
+</p>
+
+<div class="gh-publish-cta">
+    <button type="button" class="gh-btn gh-btn-green gh-btn-large" {{on "click" @confirm}}><span>{{@publishOptions.selectedPublishTypeOption.confirmButton}}</span></button>
+    <button type="button" class="gh-btn gh-btn-link gh-btn-large" {{on "click" @cancel}}><span>Back to publish settings</span></button>
+</div>

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

@@ -0,0 +1,65 @@
+<div class="gh-publish-title"><span>Another masterpiece.</span> Ready to share it with the world?</div>
+<div class="gh-publish-settings">
+    <div class="gh-publish-setting">
+        <div class="gh-publish-setting-title">
+            {{svg-jar "send-email"}}
+            {{#if @publishOptions.emailUnavailable}}
+                <span>Publish on site</span>
+            {{else}}
+                <button type="button" class="gh-publish-setting-trigger" {{on "click" (fn this.toggleSection "publishType")}}>
+                    <span>{{@publishOptions.selectedPublishTypeOption.display}}</span>
+                </button>
+            {{/if}}
+        </div>
+        {{#liquid-if (eq this.openSection "publishType")}}
+            <div class="gh-publish-setting-form">
+                <EditorLabs::PublishOptions::PublishType
+                    @publishOptions={{@publishOptions}}
+                />
+            </div>
+        {{/liquid-if}}
+    </div>
+
+    {{#if (not-eq @publishOptions.publishType "publish")}}
+        <div class="gh-publish-setting">
+            <div class="gh-publish-setting-title">
+                {{svg-jar "member"}}
+                <div class="gh-publish-setting-trigger">
+                    {{#let (members-count-fetcher query=(hash filter=@publishOptions.recipientFilter)) as |countFetcher|}}
+                        {{countFetcher.count}}
+                    {{/let}}
+                    {{#unless @publishOptions.onlyDefaultNewsletter}}
+                        <span>{{@publishOptions.newsletter.name}}</span>
+                    {{/unless}}
+                    subscribers
+                </div>
+            </div>
+        </div>
+    {{/if}}
+
+    <div class="gh-publish-setting">
+        <div class="gh-publish-setting-title">
+            {{svg-jar "clock"}}
+            <button type="button" class="gh-publish-setting-trigger" {{on "click" (fn this.toggleSection "publishAt")}}>
+                <span>
+                    {{#if @publishOptions.isScheduled}}
+                        {{capitalize (gh-format-post-time @publishOptions.scheduledAtUTC draft=true)}}
+                    {{else}}
+                        Right now
+                    {{/if}}
+                </span>
+            </button>
+        </div>
+        {{#liquid-if (eq this.openSection "publishAt")}}
+            <EditorLabs::PublishOptions::PublishAt
+                @publishOptions={{@publishOptions}}
+            />
+        {{/liquid-if}}
+    </div>
+
+</div>
+
+<div class="gh-publish-cta">
+    <button type="button" class="gh-btn gh-btn-black gh-btn-large" {{on "click" @confirm}}><span>Continue &rarr;</span></button>
+    <button type="button" class="gh-btn gh-btn-link gh-btn-large" {{on "click" @close}}><span>Back to edit</span></button>
+</div>

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

@@ -0,0 +1,16 @@
+import Component from '@glimmer/component';
+import {action} from '@ember/object';
+import {tracked} from '@glimmer/tracking';
+
+export default class PublishFlowOptions extends Component {
+    @tracked openSection = null;
+
+    @action
+    toggleSection(section) {
+        if (section === this.openSection) {
+            this.openSection = null;
+        } else {
+            this.openSection = section;
+        }
+    }
+}

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

@@ -22,6 +22,14 @@ export class PublishOptions {
         return this.setupTask.isRunning;
     }
 
+    get willEmail() {
+        return this.publishType !== 'publish';
+    }
+
+    get willPublish() {
+        return this.publishType !== 'send';
+    }
+
     // publish date ------------------------------------------------------------
 
     @tracked isScheduled = false;
@@ -70,15 +78,18 @@ export class PublishOptions {
             value: 'publish+send',
             label: 'Publish and email',
             display: 'Publish and email',
+            confirmButton: 'Publish and send',
             disabled: this.emailDisabled
         }, {
             value: 'publish',
             label: 'Publish only',
-            display: 'Publish on site'
+            display: 'Publish on site',
+            confirmButton: 'Publish'
         }, {
             value: 'send',
             label: 'Email only',
             display: 'Send email',
+            confirmButton: 'Send',
             disabled: this.emailDisabled
         }];
     }
@@ -180,6 +191,8 @@ export class PublishOptions {
 
         yield Promise.all([countTotalMembers, fetchNewsletters]);
     }
+
+    // saving ------------------------------------------------------------------
 }
 
 // This component exists for the duration of the editor screen being open.