From 23a1f63d24d7f66341619ca4d972ee379b7a6e84 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Tue, 27 Jul 2021 16:31:26 +0100
Subject: [PATCH] Added free/paid toggle to email preview modal

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
---
 .../components/modal-post-preview/email.hbs   | 10 +++++++-
 .../components/modal-post-preview/email.js    | 23 ++++++++++++++++---
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/ghost/admin/app/components/modal-post-preview/email.hbs b/ghost/admin/app/components/modal-post-preview/email.hbs
index 77969c8307..0f650036e6 100644
--- a/ghost/admin/app/components/modal-post-preview/email.hbs
+++ b/ghost/admin/app/components/modal-post-preview/email.hbs
@@ -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"
diff --git a/ghost/admin/app/components/modal-post-preview/email.js b/ghost/admin/app/components/modal-post-preview/email.js
index c3f2429738..1e9fbd040e 100644
--- a/ghost/admin/app/components/modal-post-preview/email.js
+++ b/ghost/admin/app/components/modal-post-preview/email.js
@@ -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;