From 893289eac91eaae2182bda09f8e352669a9ec46b Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Wed, 5 May 2021 13:40:09 +0200
Subject: [PATCH] Member detail screen refinements

- removed Stripe section and added View on Stripe link to member main info block
- fixed dropdown UI bugs in Product list
---
 .../components/gh-member-settings-form-cp.hbs | 31 ++++++--
 ghost/admin/app/styles/layouts/members.css    | 73 ++-----------------
 2 files changed, 31 insertions(+), 73 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 50db81002e..31bc34a028 100644
--- a/ghost/admin/app/components/gh-member-settings-form-cp.hbs
+++ b/ghost/admin/app/components/gh-member-settings-form-cp.hbs
@@ -99,10 +99,27 @@
                             </div>
                         </div>
                     </GhFormGroup>
+
+                    {{#if (and this.canShowStripeInfo this.customer)}}
+                    <div class="gh-member-stripe-info">
+                        <h4 class="gh-setting-title m">Stripe customer</h4>
+                        <p class="gh-setting-desc">
+                            {{#if this.customer.email}}
+                                {{this.customer.email}}
+                            {{else}}
+                                <span class="midgrey-l2">No email</span>
+                            {{/if}}
+                            &ndash;
+                            <a href="https://dashboard.stripe.com/customers/{{customer.id}}" target="_blank" rel="noopener">
+                                View on Stripe
+                            </a>
+                        </p>
+                    </div>
+                    {{/if}}
                 </div>
             </div>
 
-            {{#if this.canShowStripeInfo}}
+            {{!-- {{#if this.canShowStripeInfo}}
                 {{#if this.customer}}
                     <h4 class="gh-main-section-header small bn">Stripe info</h4>
                     <div class="gh-main-section-content grey">
@@ -141,13 +158,11 @@
                             </div>
                         </section>
                         <div>
-                            <a href="https://dashboard.stripe.com/customers/{{customer.id}}" class="gh-cp-table-link" target="_blank" rel="noopener">
-                                View on Stripe
-                            </a>
+                            
                         </div>
                     </div>
                 {{/if}}
-            {{/if}}
+            {{/if}} --}}
 
             <h4 class="gh-main-section-header small bn">Products</h4>
 
@@ -202,12 +217,12 @@
                                     </li>
                                     <li>
                                     {{#if sub.cancel_at_period_end}}
-                                        <button class="gh-btn gh-btn-link gh-btn-text green" {{action "continueSubscription" sub.id}}>
+                                        <button {{action "continueSubscription" sub.id}}>
                                             <span>Continue subscription</span>
                                         </button>
                                     {{else}}
-                                        <button class="gh-btn gh-btn-link gh-btn-text red" {{action "cancelSubscription" sub.id}}>
-                                            <span>Cancel subscription</span>
+                                        <button {{action "cancelSubscription" sub.id}}>
+                                            <span class="red">Cancel subscription</span>
                                         </button>
                                     {{/if}}
                                     </li>
diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css
index 4399e40070..b2c0493d1f 100644
--- a/ghost/admin/app/styles/layouts/members.css
+++ b/ghost/admin/app/styles/layouts/members.css
@@ -554,11 +554,13 @@ textarea.gh-member-details-textarea {
 }
 
 .gh-member-stripe-info {
-    border-bottom: 1px solid var(--whitegrey);
+    margin-top: 24px;
 }
 
-.gh-member-stripe-info:last-of-type {
-    border-bottom: none;
+.gh-member-stripe-info p {
+    font-size: 1.25rem;
+    font-weight: 400;
+    margin: 4px 0 0;
 }
 
 .gh-member-stripe-table {
@@ -1598,75 +1600,16 @@ p.gh-members-import-errordetail:first-of-type {
     color: var(--red);
 }
 
-.gh-cp-memberproduct-showmore {
-    line-height: 1;
-    margin-top: 5px;
-}
-
-.gh-cp-memberproduct-showmore label {
-    display: inline-block;
-    font-size: 1.3rem;
-    font-weight: 400;
-    line-height: 1.5em;
-    color: var(--middarkgrey);
-    margin: 4px 0 2px;
-    cursor: pointer;
-}
-
-.gh-cp-memberproduct-showmore label:hover {
-    color: var(--darkgrey);
-}
-
 .gh-cp-memberproduct-pricelabel {
     font-weight: 600;
 }
 
-.gh-cp-memberproduct-showmore label span.archived {
+.gh-memberproduct-subscription span.archived {
     background: var(--lightgrey-l2);
     color: var(--midgrey);
     font-size: 1.2rem;
 }
 
-.gh-cp-memberproduct-showmore label svg {
-    width: 9px;
-    height: 9px;
-    margin-right: 2px;
-}
-
-.gh-cp-memberproduct-showmore label svg path {
-    fill: var(--midgrey);
-}
-
-.gh-cp-memberproduct-showmore .details {
-    display: none;
-    flex-direction: column;
-    font-size: 1.3rem;
-    line-height: 1.7em;
-    color: var(--middarkgrey);
-    margin: 2px 0 16px 15px;
-}
-
-.gh-cp-memberproduct-showmore .details .actions {
-    display: flex;
-    margin-top: 3px;
-}
-
-.gh-cp-memberproduct-showmore .details .actions button span {
-    font-size: 1.3rem;
-}
-
-.gh-cp-memberproduct-showmore input[type=checkbox] {
-    display: none;
-}
-
-.gh-cp-memberproduct-showmore input[type=checkbox]:checked ~ .details {
-    display: flex;
-}
-
-.gh-cp-memberproduct-showmore input[type=checkbox]:checked ~ label svg {
-    transform: rotate(90deg);
-}
-
 .gh-memberproduct-archived .gh-memberproduct-name {
     opacity: 0.5;
 }
@@ -1728,10 +1671,10 @@ p.gh-members-import-errordetail:first-of-type {
     right: 0;
 }
 
-.gh-memberproduct-subscription .action-menu .gh-btn span {
+.gh-memberproduct-subscription .action-menu > .gh-btn span {
     height: 28px;
 }
 
-.gh-memberproduct-subscription .action-menu .gh-btn svg {
+.gh-memberproduct-subscription .action-menu > .gh-btn svg {
     margin: 0;
 }
\ No newline at end of file