From 51ded01ed30e66e55e0aba820a1a009748fc8e09 Mon Sep 17 00:00:00 2001
From: Naz Gargol <nazargargol@gmail.com>
Date: Thu, 12 Dec 2019 20:00:57 +0700
Subject: [PATCH] Added members cancel subscription fields on members page
 (#1423)

refs https://github.com/TryGhost/Members/pull/107

- Added 'cancel at period end' logic to members subscription details
- Added stripe subscription link in subscriptions details
---
 .../app/components/gh-member-settings-form.js |  2 +
 ghost/admin/app/styles/layouts/members.css    | 15 +++++++
 .../components/gh-member-settings-form.hbs    | 42 +++++++++++++++----
 3 files changed, 51 insertions(+), 8 deletions(-)

diff --git a/ghost/admin/app/components/gh-member-settings-form.js b/ghost/admin/app/components/gh-member-settings-form.js
index ff63c652fd..0785f6d3c9 100644
--- a/ghost/admin/app/components/gh-member-settings-form.js
+++ b/ghost/admin/app/components/gh-member-settings-form.js
@@ -27,6 +27,7 @@ export default Component.extend({
         if (subscriptions && subscriptions.length > 0) {
             return subscriptions.map((subscription) => {
                 return {
+                    id: subscription.id,
                     customer: subscription.customer,
                     name: subscription.name || '',
                     email: subscription.email || '',
@@ -34,6 +35,7 @@ export default Component.extend({
                     startDate: subscription.start_date ? moment(subscription.start_date).format('MMM DD YYYY') : '-',
                     plan: subscription.plan,
                     dollarAmount: parseInt(subscription.plan.amount) ? (subscription.plan.amount / 100) : 0,
+                    cancelAtPeriodEnd: subscription.cancel_at_period_end,
                     validUntil: subscription.current_period_end ? moment(subscription.current_period_end).format('MMM DD YYYY') : '-'
                 };
             }).reverse();
diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css
index bbb8a9d17d..551c0fdd93 100644
--- a/ghost/admin/app/styles/layouts/members.css
+++ b/ghost/admin/app/styles/layouts/members.css
@@ -236,6 +236,21 @@ textarea.gh-member-details-textarea {
     background: var(--midlightgrey-l1);
 }
 
+.gh-member-cancels-on-label {
+    display: inline-block;
+    background: var(--lightgrey-d1);
+    border-radius: 4px;
+    padding: 1px 6px;
+    margin: -2px 0 -2px -6px;
+    color: var(--darkgrey);
+    font-size: 1.4rem;
+    font-weight: 500;
+}
+
+.gh-member-stripe-status {
+    text-transform: capitalize;
+}
+
 /* Import modal
 /* ---------------------------------------------------------- */
 
diff --git a/ghost/admin/app/templates/components/gh-member-settings-form.hbs b/ghost/admin/app/templates/components/gh-member-settings-form.hbs
index 8e8e75192e..d5e9c58308 100644
--- a/ghost/admin/app/templates/components/gh-member-settings-form.hbs
+++ b/ghost/admin/app/templates/components/gh-member-settings-form.hbs
@@ -91,7 +91,7 @@
                 <section class="gh-member-stripe-info pa5 pb0 pt4 flex flex-column flex-row-ns items-start justify-between">
                     <div class="flex items-start w-100">
                         <div class="w-50 flex-auto mr8">
-                            <h4 class="f8 fw6">Customer data</h4>
+                            <h4 class="f8 fw6">Customer</h4>
                             <table class="gh-member-stripe-table">
                                 <tr>
                                     <td class="gh-member-stripe-label">Stripe customer ID</td>
@@ -135,19 +135,45 @@
                         </div>
 
                         <div class="w-50 flex-auto">
-                            <h4 class="f8 fw6">Subscription data</h4>
+                            <h4 class="f8 fw6">Subscription</h4>
                             <table class="gh-member-stripe-table">
                                 <tr>
-                                    <td class="gh-member-stripe-label">Plan</td>
-                                    <td class="gh-member-stripe-data">{{subscription.plan.nickname}} <span class="midgrey">({{subscription.dollarAmount}} <span class="ttu">{{subscription.plan.currency}}</span>/{{subscription.plan.interval}})</span></td>
+                                    <td class="gh-member-stripe-label">Stripe subscription ID</td>
+                                    <td class="gh-member-stripe-data">
+                                        <a href="https://dashboard.stripe.com/subscriptions/{{subscription.id}}" target="_blank" rel="noopener"
+                                            data-tooltip="View on Stripe">
+                                            {{subscription.id}}
+                                        </a>
+                                    </td>
                                 </tr>
                                 <tr>
-                                    <td class="gh-member-stripe-label">Current status</td>
-                                    <td class="gh-member-stripe-data">{{subscription.status}}</td>
+                                    <td class="gh-member-stripe-label">Plan</td>
+                                    <td class="gh-member-stripe-data">
+                                        {{subscription.plan.nickname}} 
+                                        <span class="midgrey">({{subscription.dollarAmount}} 
+                                            <span class="ttu">{{subscription.plan.currency}}</span>/{{subscription.plan.interval}})
+                                        </span>
+                                    </td>
                                 </tr>
+                                <tr>
+                                    <td class="gh-member-stripe-label">Status</td>
+                                    <td class="gh-member-stripe-data">
+                                        {{#if subscription.cancelAtPeriodEnd}}
+                                            <span class="gh-member-cancels-on-label">Cancels on {{subscription.validUntil}}</span>
+                                        {{else}}
+                                            <span class="gh-member-stripe-status">{{subscription.status}}</span>
+                                        {{/if}}
+                                    </td>
+                                </tr>                                
                                 <tr>
                                     <td class="gh-member-stripe-label">Next renewal date</td>
-                                    <td class="gh-member-stripe-data">{{subscription.validUntil}}</td>
+                                    <td class="gh-member-stripe-data">
+                                        {{#if subscription.cancelAtPeriodEnd}}
+                                            No further renewal
+                                        {{else}}
+                                            {{subscription.validUntil}}
+                                        {{/if}}
+                                    </td>
                                 </tr>
                             </table>
                         </div>
@@ -157,7 +183,7 @@
         </div>
     {{else}}
         <div class="pa20 br4 shadow-1 bg-grouped-table mt2">
-            <p class="ma0 pa0 tc midgrey">Member doesn't have Stripe subscription</p>
+            <p class="ma0 pa0 tc midgrey">Member doesn't have an active Stripe subscription</p>
         </div>
     {{/if}}
 {{/if}}