From e87f468042c88b7c6650611f5ee031a06906f623 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Fri, 16 Sep 2022 13:14:48 +0100
Subject: [PATCH] Updated email newsletter tracking settings

Refs https://github.com/TryGhost/Team/issues/1914
---
 .../app/components/settings/newsletters.hbs   | 92 +++++++++++++------
 ghost/admin/app/styles/layouts/settings.css   | 30 ++++++
 2 files changed, 94 insertions(+), 28 deletions(-)

diff --git a/ghost/admin/app/components/settings/newsletters.hbs b/ghost/admin/app/components/settings/newsletters.hbs
index ef43962d0b..9524263a7f 100644
--- a/ghost/admin/app/components/settings/newsletters.hbs
+++ b/ghost/admin/app/components/settings/newsletters.hbs
@@ -141,44 +141,80 @@
                 </div>
             {{/unless}}
 
-            <div class="gh-expandable-block">
-                <div class="gh-expandable-header">
-                    <div>
-                        <h4 class="gh-expandable-title">Enable newsletter open-rate</h4>
-                        <p class="gh-expandable-description">Track how many members are reading your emails</p>
-                    </div>
-                    <div class="for-switch">
-                        <label class="switch" data-test-label="email-track-opens">
-                            <input
-                                id="email-track-opens"
-                                type="checkbox"
-                                checked={{this.settings.emailTrackOpens}}
-                                class="gh-input"
-                                {{on "change" this.toggleEmailTrackOpens}}
-                                data-test-checkbox="email-track-opens"
-                            >
-                            <span class="input-toggle-component mt1"></span>
-                        </label>
-                    </div>
-                </div>
-            </div>
-
             {{#if this.feature.emailClicks }}
+
                 <div class="gh-expandable-block">
                     <div class="gh-expandable-header">
                         <div>
-                            <h4 class="gh-expandable-title">Enable newsletter click tracking</h4>
-                            <p class="gh-expandable-description">Track how many members are clicking on links in your emails</p>
+                            <h4 class="gh-expandable-title">Newsletter tracking</h4>
+                            <p class="gh-expandable-description">Track how many members are opening emails and clicking links</p>
+                        </div>
+                        <button type="button" class="gh-btn" {{on "click" (toggle-action "newsletterTrackingOpen" this)}} data-test-toggle-membersemail>
+                            <span>{{if this.newsletterTrackingOpen "Close" "Expand"}}</span>
+                        </button>
+                    </div>
+                    <div class="gh-expandable-content">
+                        {{#liquid-if this.newsletterTrackingOpen}}
+                            <div class="mb6">
+                                <div class="gh-newsletter-tracking">
+                                    <div class="gh-newsletter-tracking-row">
+                                        <div>
+                                            <h4 class="gh-newsletter-tracking-title">Enable open-rate tracking</h4>
+                                        </div>
+                                        <div class="for-switch">
+                                            <label class="switch" data-test-label="email-track-opens">
+                                                <input
+                                                    id="email-track-opens"
+                                                    type="checkbox"
+                                                    checked={{this.settings.emailTrackOpens}}
+                                                    class="gh-input"
+                                                    {{on "change" this.toggleEmailTrackOpens}}
+                                                    data-test-checkbox="email-track-opens"
+                                                >
+                                                <span class="input-toggle-component mt1"></span>
+                                            </label>
+                                        </div>
+                                    </div>
+                                    <div class="gh-newsletter-tracking-row">
+                                        <div>
+                                            <h4 class="gh-newsletter-tracking-title">Enable newsletter click tracking</h4>
+                                        </div>
+                                        <div class="for-switch">
+                                            <label class="switch" data-test-label="email-track-opens">
+                                                <input
+                                                    id="email-track-clicks"
+                                                    type="checkbox"
+                                                    checked={{this.settings.emailTrackClicks}}
+                                                    class="gh-input"
+                                                    {{on "change" this.toggleEmailTrackClicks}}
+                                                    data-test-checkbox="email-track-clicks"
+                                                >
+                                                <span class="input-toggle-component mt1"></span>
+                                            </label>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        {{/liquid-if}}
+                    </div>
+                </div>
+
+            {{else}}
+                <div class="gh-expandable-block">
+                    <div class="gh-expandable-header">
+                        <div>
+                            <h4 class="gh-expandable-title">Enable newsletter open-rate</h4>
+                            <p class="gh-expandable-description">Track how many members are reading your emails</p>
                         </div>
                         <div class="for-switch">
                             <label class="switch" data-test-label="email-track-opens">
                                 <input
-                                    id="email-track-clicks"
+                                    id="email-track-opens"
                                     type="checkbox"
-                                    checked={{this.settings.emailTrackClicks}}
+                                    checked={{this.settings.emailTrackOpens}}
                                     class="gh-input"
-                                    {{on "change" this.toggleEmailTrackClicks}}
-                                    data-test-checkbox="email-track-clicks"
+                                    {{on "change" this.toggleEmailTrackOpens}}
+                                    data-test-checkbox="email-track-opens"
                                 >
                                 <span class="input-toggle-component mt1"></span>
                             </label>
diff --git a/ghost/admin/app/styles/layouts/settings.css b/ghost/admin/app/styles/layouts/settings.css
index e5dfe8dafd..5dd682def4 100644
--- a/ghost/admin/app/styles/layouts/settings.css
+++ b/ghost/admin/app/styles/layouts/settings.css
@@ -985,6 +985,36 @@
     padding-bottom: 12px;
 }
 
+.gh-newsletter-tracking {
+    padding: 16px 20px;
+    background: var(--main-bg-color);
+    box-shadow: 0 1px 4px -1px rgb(0 0 0 / 10%);
+    border-radius: 3px;
+}
+
+.gh-newsletter-tracking-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid var(--whitegrey);
+    padding: 16px 0;
+}
+
+.gh-newsletter-tracking-row:first-child {
+    padding-top: 0;
+}
+
+.gh-newsletter-tracking-row:last-child {
+    padding-bottom: 0;
+    border-bottom: none;
+}
+
+.gh-newsletter-tracking-title {
+    font-weight: 600;
+    font-size: 1.4rem;
+    margin-bottom: 0;
+}
+
 .gh-newsletter-card-container {
     margin-left: -24px;
     padding-left: 24px;