From 4dcc594193c8012485cb8b109df6f06e9ebc0587 Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Wed, 22 Sep 2021 13:10:59 +0200
Subject: [PATCH] Added static offers CTA to membership settings

---
 .../gh-membership-products-alpha.hbs          |  2 +-
 ghost/admin/app/styles/layouts/main.css       | 12 +++++
 ghost/admin/app/styles/layouts/products.css   | 45 ++++++++++++++++---
 .../app/templates/settings/membership.hbs     | 26 +++++++++++
 .../public/assets/icons/discount-bubble.svg   |  1 +
 5 files changed, 80 insertions(+), 6 deletions(-)
 create mode 100644 ghost/admin/public/assets/icons/discount-bubble.svg

diff --git a/ghost/admin/app/components/gh-membership-products-alpha.hbs b/ghost/admin/app/components/gh-membership-products-alpha.hbs
index ad8eeaee80..0ac9131674 100644
--- a/ghost/admin/app/components/gh-membership-products-alpha.hbs
+++ b/ghost/admin/app/components/gh-membership-products-alpha.hbs
@@ -1,7 +1,7 @@
 <label>Tiers</label>
 <div class="gh-product-cards">
 {{#each this.products as |product productIdx|}}
-    <div class="gh-product-card">
+    <div class="gh-main-content-card gh-product-card">
         <button class="gh-product-card-editbutton gh-btn gh-btn-text gh-btn-link green" {{action "openEditProduct" product}}>
             <span>Edit</span>
         </button>
diff --git a/ghost/admin/app/styles/layouts/main.css b/ghost/admin/app/styles/layouts/main.css
index cb09d197c6..bd4a9974bb 100644
--- a/ghost/admin/app/styles/layouts/main.css
+++ b/ghost/admin/app/styles/layouts/main.css
@@ -1285,6 +1285,18 @@
     }
 }
 
+.gh-main-content-card {
+    border-radius: 3px;
+    padding: 24px;
+    background: var(--main-bg-color);
+    margin-bottom: 12px;
+    box-shadow: 0 1px 4px -1px rgba(0,0,0,0.1);
+}
+
+.gh-main-content-card:last-of-type {
+    margin-bottom: 24px;
+}
+
 /* Canvas */
 .gh-canvas-title {
     display: flex;
diff --git a/ghost/admin/app/styles/layouts/products.css b/ghost/admin/app/styles/layouts/products.css
index d21076c0b4..e03bee71c9 100644
--- a/ghost/admin/app/styles/layouts/products.css
+++ b/ghost/admin/app/styles/layouts/products.css
@@ -20,11 +20,6 @@
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
-    border-radius: 3px;
-    padding: 24px;
-    background: var(--main-bg-color);
-    margin-bottom: 12px;
-    box-shadow: 0 1px 4px -1px rgba(0,0,0,0.1);
 }
 
 @media (max-width: 980px) {
@@ -625,4 +620,44 @@
 
 .gh-product-form-tierpreview .placeholder {
     opacity: 0.35;
+}
+
+/* Offers */
+.gh-offers-list-cta {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 4vw;
+}
+
+.gh-offers-list-cta h4 {
+    color: var(--darkgrey);
+    text-align: center;
+    font-weight: 600;
+    margin-bottom: 8px;
+} 
+
+.gh-offers-list-cta p {
+    max-width: 390px;
+    color: var(--midgrey);
+    text-align: center;
+    line-height: 1.45em;
+    margin: 0 0 20px;
+    padding: 0;
+}
+
+.gh-offers-list-cta .discount-bubble {
+    color: var(--lightgrey);
+    width: 72px;
+    height: 72px;
+    margin-bottom: 16px;
+}
+
+.gh-offers-list-cta .discount-bubble path,
+.gh-offers-list-cta .discount-bubble circle {
+    stroke-width: 0.8px;
+}
+
+.gh-offers-list-cta button {
+    min-width: 140px;
 }
\ No newline at end of file
diff --git a/ghost/admin/app/templates/settings/membership.hbs b/ghost/admin/app/templates/settings/membership.hbs
index c8935a6d67..ee40040c74 100644
--- a/ghost/admin/app/templates/settings/membership.hbs
+++ b/ghost/admin/app/templates/settings/membership.hbs
@@ -220,6 +220,32 @@
                         {{/liquid-if}}
                     </div>
                 </div>
+                <div class="gh-expandable-block">
+                    <div class="gh-expandable-header">
+                        <div>
+                            <h4 class="gh-expandable-title">Offers</h4>
+                            <p class="gh-expandable-description">Manage targeted discounts</p>
+                        </div>
+                        <button type="button" class="gh-btn" {{action (toggle "offersOpen" this)}}><span>{{if this.offersOpen "Close" "Expand"}}</span></button>
+                    </div>
+                    <div class="gh-expandable-content">
+                        {{#liquid-if this.offersOpen}}
+                        <div class="gh-setting-content-extended">
+                            <div class="gh-main-content-card gh-offers gh-offers-list-cta">
+                                {{svg-jar "discount-bubble" class="discount-bubble"}}
+                                <h4>Provide special offers to new signups</h4>
+                                <p>
+                                    Boost your subscriptions by creating targeted discounts to potential members. 
+                                    <a href="https://ghost.org/help/">Learn more</a>
+                                </p>
+                                <button type="button" class="gh-btn gh-btn-green gh-btn-icon">
+                                    <span>{{svg-jar "add"}} Add offer</span>
+                                </button>
+                            </div>
+                        </div>
+                        {{/liquid-if}}
+                    </div>
+                </div>
             </section>
         </div>
     </section>
diff --git a/ghost/admin/public/assets/icons/discount-bubble.svg b/ghost/admin/public/assets/icons/discount-bubble.svg
new file mode 100644
index 0000000000..3781845855
--- /dev/null
+++ b/ghost/admin/public/assets/icons/discount-bubble.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>discount-bubble</title><path class="a" d="M22.125,12a3.491,3.491,0,0,0-2.356-3.338,3.6,3.6,0,0,0-.61-4.087,3.286,3.286,0,0,0-3.941-.632,3.341,3.341,0,0,0-6.436,0,3.288,3.288,0,0,0-3.942.632,3.6,3.6,0,0,0-.609,4.087,3.542,3.542,0,0,0,0,6.675,3.6,3.6,0,0,0,.609,4.087,3.288,3.288,0,0,0,3.942.633,3.341,3.341,0,0,0,6.436,0,3.286,3.286,0,0,0,3.941-.633,3.6,3.6,0,0,0,.61-4.087A3.49,3.49,0,0,0,22.125,12Z"/><line class="a" x1="8.625" y1="15.75" x2="16.125" y2="8.25"/><circle class="a" cx="9.375" cy="9" r="1.5"/><circle class="a" cx="15.375" cy="15" r="1.5"/></svg>
\ No newline at end of file