From 104a81d8c33c9924f29a508dd9dd6f3978c41821 Mon Sep 17 00:00:00 2001
From: Simon Backx <simon@ghost.org>
Date: Fri, 24 Mar 2023 10:30:41 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Added=20latests=20posts=20to=20news?=
 =?UTF-8?q?letters?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fixes https://github.com/TryGhost/Team/issues/2675

Co-authored-by: Sanne de Vries <sannedv@protonmail.com>
---
 .../modals/newsletters/edit/design.hbs        | 32 +++++++++++++-
 .../modals/newsletters/edit/preview.hbs       | 42 ++++++++++++++++---
 .../modals/newsletters/edit/preview.js        |  9 ++++
 ghost/email-service/lib/email-renderer.js     |  4 +-
 4 files changed, 78 insertions(+), 9 deletions(-)

diff --git a/ghost/admin/app/components/modals/newsletters/edit/design.hbs b/ghost/admin/app/components/modals/newsletters/edit/design.hbs
index fc25773993..a2676d1ef9 100644
--- a/ghost/admin/app/components/modals/newsletters/edit/design.hbs
+++ b/ghost/admin/app/components/modals/newsletters/edit/design.hbs
@@ -58,7 +58,7 @@
                         </GhFormGroup>
 
                         {{#if this.settings.icon}}
-                            <GhFormGroup class="gh-stack-item">
+                            <GhFormGroup class="gh-stack-item row">
                                 <label class="modal-fullsettings-title {{unless this.settings.icon "disabled"}}">Publication icon</label>
                                 <div class="for-switch small {{unless this.settings.icon "disabled"}}">
                                     <label class="switch" for="show-header">
@@ -225,6 +225,36 @@
                             </GhFormGroup>
                         {{/unless}}
 
+                        <GhFormGroup class="gh-stack-item row">
+                            <label for="latest-posts" class="modal-fullsettings-title" data-test-toggle="showLatestPosts">Share your latest posts</label>
+                            <div class="for-switch small">
+                                <div class="container">
+                                    <input
+                                        type="checkbox"
+                                        id="latest-posts"
+                                        checked={{@newsletter.showLatestPosts}}
+                                        {{on "change" (fn this.onCheckboxChange "showLatestPosts")}}
+                                    >
+                                    <button type="button" class="input-toggle-component" {{on "click" (fn this.toggleProperty "showLatestPosts")}}></button>
+                                </div>
+                            </div>
+                        </GhFormGroup>
+
+                        <GhFormGroup class="gh-stack-item row">
+                            <label for="capture-feedback" class="modal-fullsettings-title" data-test-toggle="showSubscriptionDetails">Show subscription details</label>
+                            <div class="for-switch small">
+                                <div class="container">
+                                    <input
+                                        type="checkbox"
+                                        id="capture-feedback"
+                                        checked={{@newsletter.showSubscriptionDetails}}
+                                        {{on "change" (fn this.onCheckboxChange "showSubscriptionDetails")}}
+                                    >
+                                    <button type="button" class="input-toggle-component" {{on "click" (fn this.toggleProperty "showSubscriptionDetails")}}></button>
+                                </div>
+                            </div>
+                        </GhFormGroup>
+
                         <GhFormGroup class="gh-stack-item">
                             <label class="modal-fullsettings-title">Email footer</label>
                             <KoenigBasicHtmlInput
diff --git a/ghost/admin/app/components/modals/newsletters/edit/preview.hbs b/ghost/admin/app/components/modals/newsletters/edit/preview.hbs
index 92741a4f0a..9337562f5e 100644
--- a/ghost/admin/app/components/modals/newsletters/edit/preview.hbs
+++ b/ghost/admin/app/components/modals/newsletters/edit/preview.hbs
@@ -13,7 +13,7 @@
                 </div>
             {{/if}}
             {{#if this.showHeader}}
-                <div class={{if this.showHeaderTitle "gh-members-emailpreview-header bordered" "gh-members-emailpreview-header"}}>
+                <div class={{if (or (not @newsletter.showPostTitleSection) this.showHeaderTitle) "gh-members-emailpreview-header bordered" "gh-members-emailpreview-header"}}>
                     {{#if (and this.settings.icon @newsletter.showHeaderIcon)}}
                         <img src={{this.settings.icon}} alt="" role="presentation" />
                     {{/if}}
@@ -36,7 +36,7 @@
                             {{/if}}
                         </p>
                         <p>
-                            <a href="javascript:" class="gh-members-emailpreview-view-online">View in browser</a>
+                            <a href="javascript:">View in browser</a>
                         </p>
                     </div>
                 </div>
@@ -45,15 +45,14 @@
                 <div class="gh-members-emailpreview-featureimage" style={{this.featureImageStyle}}></div>
                 <div class="gh-members-emailpreview-featureimage-caption">Feature image caption</div>
             {{/if}}
-            <div class="gh-members-emailpreview-content {{if (eq @newsletter.bodyFontCategory "sans_serif") "sans-serif"}}">
+            <div class="gh-members-emailpreview-content">
                 <p>This is what your content will look like when you send one of your posts as an email newsletter to your subscribers.</p>
                 <p>Over there on the left you’ll see some settings that allow you to customize the look and feel of this template to make it perfectly suited to your brand. Email templates are exceptionally finnicky to make, but we’ve spent a long time optimising this one to make it work beautifully across devices, email clients and content types.</p>
                 <p>So, you can trust that every email you send with Ghost will look great and work well. Just like the rest of your site.</p>
             </div>
 
             {{#if (or (and @newsletter.feedbackEnabled (feature "audienceFeedback")) this.showCommentCta)}}
-                <div class="gh-members-emailpreview-feedback gh-members-emailpreview-content">
-
+                <div class="gh-members-emailpreview-feedback">
                     <div class="gh-members-emailpreview-feedback-buttons-group">
                         {{#if (and @newsletter.feedbackEnabled (feature "audienceFeedback"))}}
                             <Modals::Newsletters::Components::FeedbackButton
@@ -74,6 +73,39 @@
                 </div>
             {{/if}}
 
+            {{#if @newsletter.showLatestPosts}}
+                <div class="gh-members-emailpreview-latest-posts">
+                    <h3 class="pb2">Keep reading</h3>
+                    <Modals::Newsletters::Components::LatestPost
+                        @imgPath="assets/img/latest-posts-1.png"
+                        @postTitle="The three latest posts published on your site"
+                        @postExcerpt="Posts sent as an email only will never be shown here." />
+                    <Modals::Newsletters::Components::LatestPost
+                        @imgPath="assets/img/latest-posts-2.png"
+                        @postTitle="Displayed at the bottom of each newsletter"
+                        @postExcerpt="Giving your readers one more place to discover your stories." />
+                    <Modals::Newsletters::Components::LatestPost
+                        @imgPath="assets/img/latest-posts-3.png"
+                        @postTitle="To keep your work front and center"
+                        @postExcerpt="Making sure that your audience stays engaged." />
+                </div>
+            {{/if}}
+
+            {{#if @newsletter.showSubscriptionDetails}}
+                <div class="gh-members-emailpreview-subscription-details">
+                    <h4 class="pb2">Subscription details</h4>
+                    <p class="pb4">You are receiving this because you are a <strong>paid subscriber</strong> to The Local Host. Your subscription will renew on {{this.renewDateString}}.</p>
+                    <div class="flex">
+                        <div class="flex-shrink-0">
+                            <p>Name: Jamie Larson</p>
+                            <p>Email: jamie@example.com</p>
+                            <p>Member since: {{this.todayString}}</p>
+                        </div>
+                        <a href="#" class="gh-members-emailpreview-subscription-link">Manage subscription &rarr;</a>
+                    </div>
+                </div>
+            {{/if}}
+
             <div class="gh-members-emailpreview-footer">
                 <div class="gh-members-emailpreview-footercontent">
                     {{html-safe @newsletter.footerContent}}
diff --git a/ghost/admin/app/components/modals/newsletters/edit/preview.js b/ghost/admin/app/components/modals/newsletters/edit/preview.js
index bd881b6cc8..a7172332b8 100644
--- a/ghost/admin/app/components/modals/newsletters/edit/preview.js
+++ b/ghost/admin/app/components/modals/newsletters/edit/preview.js
@@ -1,4 +1,5 @@
 import Component from '@glimmer/component';
+import moment from 'moment-timezone';
 import {htmlSafe} from '@ember/template';
 import {inject as service} from '@ember/service';
 
@@ -49,4 +50,12 @@ export default class EditNewsletterPreview extends Component {
     get featureImageStyle() {
         return htmlSafe(`background-image: url(${this.featureImageUrl})`);
     }
+
+    get renewDateString() {
+        return moment().add(1, 'year').format('DD MMM YYYY');
+    }
+
+    get todayString() {
+        return moment().format('DD MMM YYYY');
+    }
 }
diff --git a/ghost/email-service/lib/email-renderer.js b/ghost/email-service/lib/email-renderer.js
index 98bbfa1525..35881d977d 100644
--- a/ghost/email-service/lib/email-renderer.js
+++ b/ghost/email-service/lib/email-renderer.js
@@ -770,7 +770,7 @@ class EmailRenderer {
 
         const latestPosts = [];
         let latestPostsHasImages = false;
-        if (newsletter.get('show_latest_posts') && this.#labs.isSet('makingItRain')) {
+        if (newsletter.get('show_latest_posts')) {
             // Fetch last 3 published posts
             const {data} = await this.#models.Post.findPage({
                 filter: 'status:published+id:-' + post.id,
@@ -839,8 +839,6 @@ class EmailRenderer {
             latestPosts,
             latestPostsHasImages,
 
-            labs: this.#settingsCache.get('labs'),
-
             //CSS
             accentColor: accentColor, // default to #15212A
             adjustedAccentColor: adjustedAccentColor || '#3498db', // default to #3498db