Ghost/ghost/admin/app/components/modals/editor/confirm-publish.hbs
Kevin Ansfield 98b5506d64 🎨 Added confirmation dialog any time a post/page will be published
refs https://github.com/TryGhost/Team/issues/1169

Previously we were only showing a confirmation dialog if a publish action would trigger an email which was inconsistent and did not instil confidence when publishing.

- replaced old `modal-confirm-email-send` modal with the newer-style `modals/editor/confirm-publish` component
  - updated to handle standard publish in addition to email publish
  - updated copy
  - added "error" state when attempting to send email-only post to no members
- updated publish menu `save` task to open the confirm modal when going from `draft` to `published` or `scheduled`
  - underlying save with email polling moved to `_saveTask` so it can be re-used across `save` task (when not publishing) and when confirming from the modal
2021-12-07 00:18:24 +00:00

116 lines
5.3 KiB
Handlebars
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<div class="modal-content" data-test-modal="editor/confirm-publish">
{{#unless this.errorMessage}}
<header class="modal-header" data-test-state="confirm-publish">
<h1>Ready to go? Heres what happens next</h1>
</header>
<button class="close" title="Close" {{on "click" @close}}>{{svg-jar "close"}}<span class="hidden">Close</span></button>
<div class="modal-body" {{did-insert this.countRecipientsTask.perform}}>
{{#if (eq @data.post.displayName 'page')}}
<p>
Your page will be published {{if @data.isScheduled "at the scheduled time" "immediately"}}. Sound good?
</p>
{{else if this.isPublishOnly}}
<p>
Your post will be published {{if @data.isScheduled "at the scheduled time" "immediately"}}
and won't be sent as an email. Sound good?
</p>
{{else}}
{{#if this.countRecipientsTask.isRunning}}
<div class="flex flex-column items-center">
<div class="gh-loading-spinner"></div>
</div>
{{else}}
{{#if this.isEmailOnlyWithNoMembers}}
<p>
You're trying to {{if @data.isScheduled "schedule" "send"}} a post
as an email newsletter with <strong>0 members</strong> selected.
Choose a segment of your audience and try again!
</p>
{{else}}
<p>
Your post will be delivered to <strong>{{this.memberCountString}}</strong>
{{#if @data.emailOnly}}
but it will <strong>not</strong>
{{else}}
and will
{{/if}}
be published on your site{{#if @data.isScheduled}} at the scheduled time{{/if}}. Sound good?
</p>
{{/if}}
{{/if}}
{{/if}}
</div>
<div class="modal-footer">
{{#if this.isEmailOnlyWithNoMembers}}
<button type="button" class="gh-btn" {{on "click" @close}} data-test-button="cancel-email-with-no-members">
<span>Close</span>
</button>
{{else}}
<button {{on "click" @close}} class="gh-btn" data-test-button="cancel-publish-and-email">
<span>Cancel</span>
</button>
{{#if @data.isScheduled}}
<GhTaskButton
@disabled={{this.countRecipientsTask.isRunning}}
@buttonText="Schedule"
@runningText="Scheduling..."
@task={{this.confirmAndCheckErrorTask}}
@class="gh-btn gh-btn-black gh-btn-icon"
data-test-button="confirm-schedule"
/>
{{else}}
<GhTaskButton
@disabled={{this.countRecipientsTask.isRunning}}
@buttonText={{this.publishAndSendButtonText}}
@runningText={{if @data.emailOnly "Sending..." "Publishing..."}}
@task={{this.confirmAndCheckErrorTask}}
@class="gh-btn gh-btn-black gh-btn-icon"
data-test-button="confirm-publish"
/>
{{/if}}
{{/if}}
</div>
{{else}}
<header class="modal-header" data-test-state="failed-send">
<h1>Failed to send email</h1>
</header>
<button class="close" title="Close" {{on "click" @close}}>{{svg-jar "close"}}<span class="hidden">Close</span></button>
<div class="modal-body">
<p>Your post has been published but the email failed to send. Please verify your email settings if the error persists.</p>
<p class="mb0">
<button type="button" class="gh-btn gh-btn-text regular" {{on "click" this.toggleErrorDetails}} data-test-toggle-error>
{{#if this.errorDetailsOpen}}
{{svg-jar "arrow-down" class="nudge-top--2 w2 h2 fill-darkgrey mr1"}}
{{else}}
{{svg-jar "arrow-right" class="nudge-top--1 w2 h2 fill-darkgrey mr1"}}
{{/if}}
<span>Error details</span>
</button>
</p>
{{#liquid-if this.errorDetailsOpen}}
<p class="error gh-box gh-box-error mt3 mb3">
{{svg-jar "warning"}}
{{this.errorMessage}}
</p>
{{/liquid-if}}
</div>
<div class="modal-footer">
<button {{on "click" @close}} class="gh-btn" data-test-button="cancel-publish-and-email">
<span>Close</span>
</button>
<GhTaskButton
@buttonText="Retry email"
@runningText="Sending..."
@task={{this.retryEmailTask}}
@class="gh-btn gh-btn-red gh-btn-icon"
data-test-button="retry-email"
/>
</div>
{{/unless}}
</div>