From bf700c5d98b96e7ba800797fed384372d1d05c5c Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Thu, 3 Jun 2021 18:02:32 +0200
Subject: [PATCH] Added product selector modal for complimentary sub

Developer experiment for multiple products.
- Added modal to choose a product for complimentary subscriptions.
---
 .../components/gh-member-settings-form-cp.hbs | 14 ++-
 .../app/components/modal-member-product.hbs   | 85 +++++++++++--------
 ghost/admin/app/styles/patterns/forms.css     | 56 ++++++++++++
 3 files changed, 117 insertions(+), 38 deletions(-)

diff --git a/ghost/admin/app/components/gh-member-settings-form-cp.hbs b/ghost/admin/app/components/gh-member-settings-form-cp.hbs
index bf8a341069..2927e0a715 100644
--- a/ghost/admin/app/components/gh-member-settings-form-cp.hbs
+++ b/ghost/admin/app/components/gh-member-settings-form-cp.hbs
@@ -116,9 +116,17 @@
                             {{#if this.isCreatingComplimentary}}
                                 <GhLoadingSpinner />
                             {{else}}
-                                <button type="button" class="gh-btn gh-btn-text green gh-btn-icon gh-btn-addproduct" {{action "addCompedSubscription"}}>
-                                    <span>{{svg-jar "add"}} Add complimentary subscription</span>
-                                </button>
+                                {{#if (enable-developer-experiments)}}
+                                    {{!-- {{if has multiple products!}} --}}
+                                    <button type="button" class="gh-btn gh-btn-text green gh-btn-icon gh-btn-addproduct" {{action (toggle "showMemberProductModal" this)}}>
+                                        <span>{{svg-jar "add"}} Add complimentary subscription</span>
+                                    </button>
+                                    {{!-- {{/if}} --}}
+                                {{else}}
+                                    <button type="button" class="gh-btn gh-btn-text green gh-btn-icon gh-btn-addproduct" {{action "addCompedSubscription"}}>
+                                        <span>{{svg-jar "add"}} Add complimentary subscription</span>
+                                    </button>
+                                {{/if}}
                             {{/if}}
                         {{/if}}
                     {{/unless}}
diff --git a/ghost/admin/app/components/modal-member-product.hbs b/ghost/admin/app/components/modal-member-product.hbs
index 699e46df6b..7f0c4c8b3d 100644
--- a/ghost/admin/app/components/modal-member-product.hbs
+++ b/ghost/admin/app/components/modal-member-product.hbs
@@ -1,38 +1,44 @@
-<button class="close" href title="Close" {{action "closeModal"}} {{action (optional this.noop) on="mouseDown"}}>
-    {{svg-jar "close"}}
-</button>
+<header class="modal-header" data-test-modal="delete-user">
+    <h1>Add subscription</h1>
+</header>
+<a class="close" href="" role="button" title="Close" {{action "closeModal"}}>{{svg-jar "close"}}<span class="hidden">Close</span></a>
 
 <form>
 <div class="modal-body">
-    <div class="gh-main-section-block">
-        <div class="gh-main-section-content gh-member-product-memberdetails">
-            <GhMemberAvatar
-                @member={{this.member}}
-                @sizeClass={{if this.member.name 'f-subheadline fw4 lh-zero tracked-1' 'f-headline fw4 lh-zero tracked-1'}}
-                @containerClass="w20 h20 mr4 gh-member-detail-avatar"
-            />
-            <h3>{{or this.member.name this.member.email}}</h3>
-            {{#if (and this.member.name this.member.email)}}
-                <p>
-                    {{this.member.email}}
-                </p>
-            {{/if}}
+    <p class="gh-member-addcomp-subhed">Select a product for <strong>{{or this.member.name this.member.email}}</strong>'s complimentary subscription.</p>
+    <div class="form-rich-radio">
+        <div class="gh-radio active">
+            <div class="gh-radio-content">
+                <div class="gh-radio-label">
+                    <div class="description">
+                        <h4>Bronze</h4>
+                        <p>Only the hottest marketing news</p>
+                    </div>
+                </div>
+            </div>
+            <div class="gh-radio-button"></div>
         </div>
-
-        <div class="gh-main-section-content grey gh-member-product-form-block">
-            <GhFormGroup>
-                <label for="price" class="fw6">Add subscription</label>
-                <span class="gh-select">
-                    <OneWaySelect
-                        @options={{this.prices}}
-                        @optionValuePath="id"
-                        @optionLabelPath="label"
-                        @update={{this.setPrice}}
-                    />
-                    {{svg-jar "arrow-down-small"}}
-                </span>
-                <p>You can only use zero value prices when adding a product manually. Use <a href="https://dashboard.stripe.com" target="_blank">Stripe Dashboard</a> to add product with non-zero prices.</p>
-            </GhFormGroup>
+        <div class="gh-radio">
+            <div class="gh-radio-content">
+                <div class="gh-radio-label">
+                    <div class="description">
+                        <h4>Silver</h4>
+                        <p>Extra weekly newsletter</p>
+                    </div>
+                </div>
+            </div>
+            <div class="gh-radio-button"></div>
+        </div>
+        <div class="gh-radio">
+            <div class="gh-radio-content">
+                <div class="gh-radio-label">
+                    <div class="description">
+                        <h4>Gold</h4>
+                        <p>All-in-one supporter pack!</p>
+                    </div>
+                </div>
+            </div>
+            <div class="gh-radio-button"></div>
         </div>
     </div>
 </div>
@@ -46,12 +52,21 @@
         {{action (optional this.noop) on="mouseDown"}}
         data-test-button="cancel-webhook"
     >
-        <span>{{if this.prices.length "Cancel" "OK"}}</span>
+        <span>Cancel</span>
     </button>
-    <GhTaskButton @buttonText="Add subscription"
+    <button
+        class="gh-btn gh-btn-green"
+        {{action "closeModal"}}
+        {{!-- disable mouseDown so it does not trigger focus-out validations --}}
+        {{action (optional this.noop) on="mouseDown"}}
+    >
+        <span>Add subscription</span>
+    </button>
+
+    {{!-- <GhTaskButton @buttonText="Add subscription"
         @successText={{this.successText}}
         @task={{this.addPriceTask}}
         @disabled={{this.cannotAddPrice}}
-        @class="gh-btn gh-btn-black gh-btn-icon gh-btn-add-memberproduct"
-        data-test-button="save-webhook" />
+        @class="gh-btn gh-btn-green gh-btn-icon gh-btn-add-memberproduct"
+        data-test-button="save-webhook" /> --}}
 </div>
\ No newline at end of file
diff --git a/ghost/admin/app/styles/patterns/forms.css b/ghost/admin/app/styles/patterns/forms.css
index 93b0da1719..88f4f848ee 100644
--- a/ghost/admin/app/styles/patterns/forms.css
+++ b/ghost/admin/app/styles/patterns/forms.css
@@ -757,6 +757,62 @@ textarea {
 }
 
 
+/* Email newsletter design settings
+/* -------------------------------------------------------- */
+.form-rich-radio .gh-radio {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: -1px 0 0;
+    padding: 0;
+}
+
+.form-rich-radio .gh-radio-content {
+    border: 1px solid var(--whitegrey);
+    margin: 0 -32px 0 0;
+}
+
+.form-rich-radio .gh-radio:first-of-type .gh-radio-content {
+    border-radius: 3px 3px 0 0;
+}
+
+.form-rich-radio .gh-radio:last-of-type .gh-radio-content {
+    border-radius: 0 0 3px 3px;
+}
+
+.form-rich-radio .active .gh-radio-content {
+    border: 1px solid transparent;
+    box-shadow: 0px 0px 0px 2px var(--green);
+    z-index: 9999;
+}
+
+.form-rich-radio .gh-radio-button {
+    margin-right: 12px;
+    opacity: 0;
+}
+
+.form-rich-radio .gh-radio-label {
+    padding: 12px 12px 12px 14px;
+    display: flex;
+    align-items: center;
+}
+
+.form-rich-radio .gh-radio-label .description h4 {
+    font-size: 1.4rem;
+    margin: 0;
+    padding: 0;
+    line-height: 1.4em;
+}
+
+.form-rich-radio .gh-radio-label .description p {
+    font-size: 1.25rem !important;
+    font-weight: 400;
+    line-height: 1.45em;
+    margin: 2px 0 0;
+    padding: 0;
+}
+
+
 /* FFF: Fucking Firefox Fixes
 /* ---------------------------------------------------------- */