From 86446e4c8650bfea5070019977101697b14a493a Mon Sep 17 00:00:00 2001
From: Simon Backx <simon@ghost.org>
Date: Fri, 17 Mar 2023 08:50:42 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Added=20option=20to=20remove=20post?=
 =?UTF-8?q?=20title=20from=20newsletters?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Adds a new option to hide the post title section from newsletters.

Co-authored-by: Sanne de Vries <sannedv@protonmail.com>
---
 .../modals/newsletters/edit/design.hbs        | 74 ++++++++++++++-----
 .../modals/newsletters/edit/preview.hbs       | 47 ++++++++----
 .../modals/newsletters/edit/preview.js        |  5 ++
 3 files changed, 91 insertions(+), 35 deletions(-)

diff --git a/ghost/admin/app/components/modals/newsletters/edit/design.hbs b/ghost/admin/app/components/modals/newsletters/edit/design.hbs
index 31ada99ffb..2790b5453e 100644
--- a/ghost/admin/app/components/modals/newsletters/edit/design.hbs
+++ b/ghost/admin/app/components/modals/newsletters/edit/design.hbs
@@ -1,4 +1,4 @@
-<fieldset class="modal-fullsettings-form-labs">
+<fieldset class="modal-fullsettings-form-labs email-design">
     <h4 class="modal-fullsettings-section-title">Design</h4>
 
     <div class="modal-fullsettings-section-labs">
@@ -11,7 +11,7 @@
             {{#liquid-if isOpen}}
                 <div class="modal-fullsettings-tab-expanded">
                     <div class="gh-stack">
-                        <GhFormGroup class="gh-stack-item gh-setting">
+                        <GhFormGroup class="gh-stack-item">
                             <GhUploader
                                 @extensions={{this.imageExtensions}}
                                 @paramsHash={{hash purpose="image"}}
@@ -58,7 +58,7 @@
                         </GhFormGroup>
 
                         {{#if this.settings.icon}}
-                            <GhFormGroup class="gh-stack-item gh-setting">
+                            <GhFormGroup class="gh-stack-item">
                                 <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">
@@ -76,7 +76,7 @@
                             </GhFormGroup>
                         {{/if}}
 
-                        <GhFormGroup class="gh-stack-item gh-setting">
+                        <GhFormGroup class="gh-stack-item row">
                             <label class="modal-fullsettings-title">Publication title</label>
                             <div class="for-switch small">
                                 <label class="switch" for="show-title" data-test-toggle="showHeaderTitle">
@@ -91,7 +91,7 @@
                                 </label>
                             </div>
                         </GhFormGroup>
-                        <GhFormGroup class="gh-stack-item gh-setting">
+                        <GhFormGroup class="gh-stack-item row">
                             <label class="modal-fullsettings-title">Newsletter name</label>
                             <div class="for-switch small">
                                 <label class="switch" for="show-header-name" data-test-toggle="showHeaderName">
@@ -119,22 +119,39 @@
             {{#liquid-if isOpen}}
                 <div class="modal-fullsettings-tab-expanded">
                     <div class="gh-stack">
-                        <GhFormGroup class="gh-stack-item">
-                            <label class="modal-fullsettings-title">Post title style</label>
-                            <div class="gh-email-design-typography-wrapper header">
-                                <div class="modal-fullsettings-radiogroup gh-email-design-typography" data-test-input="titleFontCategory">
-                                    <GhFontSelector
-                                        @selected={{@newsletter.titleFontCategory}}
-                                        @onChange={{fn this.changeSetting "titleFontCategory"}}
-                                    />
-                                </div>
-                                <div class="gh-btn-group icons" id="newsletter-title-alignment">
-                                    <button type="button" class="gh-btn gh-btn-icon {{if (eq @newsletter.titleAlignment "left") "gh-btn-group-selected"}}" {{on "click" (fn this.changeSetting "titleAlignment" "left")}}><span>{{svg-jar "align-left"}}</span></button>
-                                    <button type="button" class="gh-btn gh-btn-icon {{if (eq @newsletter.titleAlignment "center") "gh-btn-group-selected"}}" {{on "click" (fn this.changeSetting "titleAlignment" "center")}}><span>{{svg-jar "align-center"}}</span></button>
-                                </div>
+                        <GhFormGroup class="gh-stack-item row">
+                            <label class="modal-fullsettings-title">Post title</label>
+                            <div class="for-switch small">
+                                <label class="switch" for="show-post-title">
+                                    <input
+                                        type="checkbox"
+                                        checked={{@newsletter.showPostTitleSection}}
+                                        id="show-post-title"
+                                        name="show-post-title"
+                                        {{on "click" (fn this.toggleSetting "showPostTitleSection")}}
+                                    >
+                                    <span class="input-toggle-component"></span>
+                                </label>
                             </div>
                         </GhFormGroup>
-                        <GhFormGroup class="gh-stack-item gh-setting gh-setting-first">
+
+                        {{#if @newsletter.showPostTitleSection}}
+                            <GhFormGroup class="gh-stack-item">
+                                <div class="gh-email-design-typography-wrapper header">
+                                    <div class="modal-fullsettings-radiogroup gh-email-design-typography" data-test-input="titleFontCategory">
+                                        <GhFontSelector
+                                            @selected={{@newsletter.titleFontCategory}}
+                                            @onChange={{fn this.changeSetting "titleFontCategory"}}
+                                        />
+                                    </div>
+                                    <div class="gh-btn-group icons" id="newsletter-title-alignment">
+                                        <button type="button" class="gh-btn gh-btn-icon {{if (eq @newsletter.titleAlignment "left") "gh-btn-group-selected"}}" {{on "click" (fn this.changeSetting "titleAlignment" "left")}}><span>{{svg-jar "align-left"}}</span></button>
+                                        <button type="button" class="gh-btn gh-btn-icon {{if (eq @newsletter.titleAlignment "center") "gh-btn-group-selected"}}" {{on "click" (fn this.changeSetting "titleAlignment" "center")}}><span>{{svg-jar "align-center"}}</span></button>
+                                    </div>
+                                </div>
+                            </GhFormGroup>
+                        {{/if}}
+                        <GhFormGroup class="gh-stack-item row">
                             <label class="modal-fullsettings-title">Feature image</label>
                             <div class="for-switch small">
                                 <label class="switch" for="show-feature-image">
@@ -175,7 +192,7 @@
                     <div class="gh-stack">
 
                         {{#if (feature "audienceFeedback")}}
-                            <GhFormGroup class="gh-stack-item gh-setting">
+                            <GhFormGroup class="gh-stack-item row">
                                 <label for="capture-feedback" class="modal-fullsettings-title" data-test-toggle="feedbackEnabled">Ask your readers for feedback</label>
                                 <div class="for-switch small">
                                     <div class="container">
@@ -191,6 +208,23 @@
                             </GhFormGroup>
                         {{/if}}
 
+                        {{#unless (eq this.settings.commentsEnabled 'off') }}
+                            <GhFormGroup class="gh-stack-item row">
+                                <label for="comments-link" class="modal-fullsettings-title" data-test-toggle="showCommentCta">Add a link to your comments</label>
+                                <div class="for-switch small">
+                                    <div class="container">
+                                        <input
+                                            type="checkbox"
+                                            id="comments-link"
+                                            checked={{@newsletter.showCommentCta}}
+                                            {{on "change" (fn this.onCheckboxChange "showCommentCta")}}
+                                        >
+                                        <button type="button" class="input-toggle-component" {{on "click" (fn this.toggleProperty "showCommentCta")}}></button>
+                                    </div>
+                                </div>
+                            </GhFormGroup>
+                        {{/unless}}
+
                         <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 03059fc078..abab2aff79 100644
--- a/ghost/admin/app/components/modals/newsletters/edit/preview.hbs
+++ b/ghost/admin/app/components/modals/newsletters/edit/preview.hbs
@@ -1,4 +1,4 @@
-<div class="gh-members-emailpreview">
+<div class="gh-members-emailpreview gh-members-emailpreview-labs">
     <div class="gh-members-emailpreview-container">
         <div class="gh-members-emailpreview-faux">
             <p>
@@ -25,12 +25,22 @@
                     {{/if}}
                 </div>
             {{/if}}
-            <div class="gh-members-emailpreview-title {{if (eq @newsletter.titleAlignment "left") "gh-members-emailpreview-title-left"}}">
-                <h2 class="{{if (eq @newsletter.titleFontCategory "serif") "serif"}}">Your email newsletter</h2>
-                <p>
-                    <span>By {{or this.session.user.name this.session.user.email}} – {{moment-format (moment-site-tz) "D MMM YYYY"}} – </span> <a href="javascript:">View online →</a>
-                </p>
-            </div>
+            {{#if @newsletter.showPostTitleSection}}
+                <div class="gh-members-emailpreview-title {{if (eq @newsletter.titleAlignment "left") "gh-members-emailpreview-title-left"}}">
+                    <h2 class="{{if (eq @newsletter.titleFontCategory "serif") "serif"}}">Your email newsletter</h2>
+                    <div class="gh-members-emailpreview-meta {{if (eq @newsletter.titleAlignment "center") "center-aligned"}}">
+                        <p>By {{or this.session.user.name this.session.user.email}}
+                            <span>{{moment-format (moment-site-tz) "D MMM YYYY"}}</span>
+                            {{#if this.showCommentCta}}
+                                <span><a href="javascript:" class="gh-members-emailpreview-comment-link"> {{svg-jar "comment"}}</a></span>
+                            {{/if}}
+                        </p>
+                        <p>
+                            <a href="javascript:">View in browser</a>
+                        </p>
+                    </div>
+                </div>
+            {{/if}}
             {{#if @newsletter.showFeatureImage}}
                 <div class="gh-members-emailpreview-featureimage" style={{this.featureImageStyle}}></div>
                 <div class="gh-members-emailpreview-featureimage-caption">Feature image caption</div>
@@ -41,18 +51,25 @@
                 <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 (and @newsletter.feedbackEnabled (feature "audienceFeedback"))}}
+            {{#if (or (and @newsletter.feedbackEnabled (feature "audienceFeedback")) this.showCommentCta)}}
                 <div class="gh-members-emailpreview-feedback gh-members-emailpreview-content">
-                    <h4 class="gh-members-emailpreview-feedback-title">Give feedback on this post</h4>
 
                     <div class="gh-members-emailpreview-feedback-buttons-group">
-                        <Modals::Newsletters::Components::FeedbackButton
-                            @text="More like this"
-                            @icon="thumbs-up" />
+                        {{#if (and @newsletter.feedbackEnabled (feature "audienceFeedback"))}}
+                            <Modals::Newsletters::Components::FeedbackButton
+                                @text="More like this"
+                                @icon="thumbs-up" />
 
-                        <Modals::Newsletters::Components::FeedbackButton
-                            @text="Less like this"
-                            @icon="thumbs-down" />
+                            <Modals::Newsletters::Components::FeedbackButton
+                                @text="Less like this"
+                                @icon="thumbs-down" />
+                        {{/if}}
+
+                        {{#if this.showCommentCta}}
+                            <Modals::Newsletters::Components::FeedbackButton
+                                @text="Comment"
+                                @icon="comment" />
+                        {{/if}}
                     </div>
                 </div>
             {{/if}}
diff --git a/ghost/admin/app/components/modals/newsletters/edit/preview.js b/ghost/admin/app/components/modals/newsletters/edit/preview.js
index 0b17177773..bd881b6cc8 100644
--- a/ghost/admin/app/components/modals/newsletters/edit/preview.js
+++ b/ghost/admin/app/components/modals/newsletters/edit/preview.js
@@ -6,6 +6,7 @@ export default class EditNewsletterPreview extends Component {
     @service ghostPaths;
     @service session;
     @service settings;
+    @service membersUtils;
 
     get showHeader() {
         return (this.args.newsletter.showHeaderIcon && this.settings.icon)
@@ -16,6 +17,10 @@ export default class EditNewsletterPreview extends Component {
         return this.headerTitle || this.headerSubtitle;
     }
 
+    get showCommentCta() {
+        return this.args.newsletter.showCommentCta && this.settings.commentsEnabled !== 'off';
+    }
+
     get headerTitle() {
         if (this.args.newsletter.showHeaderTitle) {
             return this.settings.title;