Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Added free/paid toggle to email preview modal

Browse source 
refs https://github.com/TryGhost/Team/issues/927

- the `email-cta` card can be segmented so only free or paid members can see the content, it should be possible for authors to preview what that will look like in either case
This commit is contained in:
Kevin Ansfield 2021-07-27 16:31:26 +01:00
parent a7bb783d33
commit 23a1f63d24
2 changed files with 29 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
ghost/admin/app/components/modal-post-preview/email.hbs
View file

@ -10,7 +10,14 @@
</div>
</div>
<div class="gh-post-preview-email-footer">
{{#if (feature "emailCardSegments")}}
<div class="gh-btn-group mr3">
<button type="button" class="gh-btn {{if (eq this.memberSegment "status:free") "gh-btn-group-selected"}}" {{on "click" (fn this.changeMemberSegment "status:free")}}><span>free member</span></button>
<button type="button" class="gh-btn {{if (eq this.memberSegment "status:-free") "gh-btn-group-selected"}}" {{on "click" (fn this.changeMemberSegment "status:-free")}}><span>paid member</span></button>
</div>
{{else}}
<span class="mr3 nowrap fw6 f8 darkgrey">Send a test newsletter</span>
{{/if}}
<div class="gh-post-preview-email-input {{if this.sendPreviewEmailError "error"}}">
<Input
@ -25,9 +32,10 @@
<div class="error fixed nowrap f8 lh-heading"><span class="response" id="sendError">{{this.sendPreviewEmailError}}</span></div>
{{/if}}
</div>
<GhTaskButton
@task={{this.sendPreviewEmailTask}}
@buttonText="Send"
@buttonText={{if (feature "emailCardSegments") "Send test email" "Send"}}
@successText="Sent"
@runningText="Sending..."
@class="gh-btn gh-btn-green gh-btn-icon gh-post-preview-email-trigger"

23
ghost/admin/app/components/modal-post-preview/email.js
View file

@ -28,6 +28,7 @@ export default class ModalPostPreviewEmailComponent extends Component {
@tracked html = '';
@tracked subject = '';
@tracked memberSegment = 'status:free';
@tracked previewEmailAddress = this.session.user.email;
@tracked sendPreviewEmailError = '';
@ -38,6 +39,8 @@ export default class ModalPostPreviewEmailComponent extends Component {
@action
async renderEmailPreview(iframe) {
this._previewIframe = iframe;
await this._fetchEmailData();
// avoid timing issues when _fetchEmailData didn't perform any async ops
await timeout(100);
@ -49,6 +52,15 @@ export default class ModalPostPreviewEmailComponent extends Component {
}
}
@action
changeMemberSegment(segment) {
this.memberSegment = segment;
if (this._previewIframe) {
this.renderEmailPreview(this._previewIframe);
}
}
@task({drop: true})
*sendPreviewEmailTask() {
try {
@ -66,7 +78,7 @@ export default class ModalPostPreviewEmailComponent extends Component {
this.sendPreviewEmailError = '';
const url = this.ghostPaths.url.api('/email_preview/posts', resourceId);
const data = {emails: [testEmail]};
const data = {emails: [testEmail], memberSegment: this.memberSegment};
const options = {
data,
dataType: 'json'
@ -91,13 +103,15 @@ export default class ModalPostPreviewEmailComponent extends Component {
}
async _fetchEmailData() {
let {html, subject} = this;
let {html, subject, memberSegment} = this;
let {post} = this.args;
if (html && subject) {
if (html && subject && memberSegment === this._lastMemberSegment) {
return {html, subject};
}
this._lastMemberSegment = memberSegment;
// model is an email
if (post.html && post.subject) {
html = post.html;
@ -109,6 +123,9 @@ export default class ModalPostPreviewEmailComponent extends Component {
// model is a post, fetch email preview
} else {
let url = this.ghostPaths.url.api('/email_preview/posts', post.id);
if (this.feature.emailCardSegments) {
url = `${url}?memberSegment=${encodeURIComponent(this.memberSegment)}`;
}
let response = await this.ajax.request(url);
let [emailPreview] = response.email_previews;
html = emailPreview.html;