Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Added members cancel subscription fields on members page (#1423)

Browse source 
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
This commit is contained in:
Naz Gargol 2019-12-12 20:00:57 +07:00 • committed by GitHub
parent c53e4f9cd7
commit 51ded01ed3
3 changed files with 51 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ghost/admin/app/components/gh-member-settings-form.js
View file

@ -27,6 +27,7 @@ export default Component.extend({
if (subscriptions && subscriptions.length > 0) { if (subscriptions && subscriptions.length > 0) {
return subscriptions.map((subscription) => { return subscriptions.map((subscription) => {
return { return {
id: subscription.id,
customer: subscription.customer, customer: subscription.customer,
name: subscription.name || '', name: subscription.name || '',
email: subscription.email || '', email: subscription.email || '',
@ -34,6 +35,7 @@ export default Component.extend({
startDate: subscription.start_date ? moment(subscription.start_date).format('MMM DD YYYY') : '-', startDate: subscription.start_date ? moment(subscription.start_date).format('MMM DD YYYY') : '-',
plan: subscription.plan, plan: subscription.plan,
dollarAmount: parseInt(subscription.plan.amount) ? (subscription.plan.amount / 100) : 0, 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') : '-' validUntil: subscription.current_period_end ? moment(subscription.current_period_end).format('MMM DD YYYY') : '-'
}; };
}).reverse(); }).reverse();

15
ghost/admin/app/styles/layouts/members.css
View file

@ -236,6 +236,21 @@ textarea.gh-member-details-textarea {
background: var(--midlightgrey-l1); 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 /* Import modal
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */

42
ghost/admin/app/templates/components/gh-member-settings-form.hbs
View file

@ -91,7 +91,7 @@
<section class="gh-member-stripe-info pa5 pb0 pt4 flex flex-column flex-row-ns items-start justify-between"> <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="flex items-start w-100">
<div class="w-50 flex-auto mr8"> <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"> <table class="gh-member-stripe-table">
<tr> <tr>
<td class="gh-member-stripe-label">Stripe customer ID</td> <td class="gh-member-stripe-label">Stripe customer ID</td>
@ -135,19 +135,45 @@
</div> </div>
<div class="w-50 flex-auto"> <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"> <table class="gh-member-stripe-table">
<tr> <tr>
<td class="gh-member-stripe-label">Plan</td> <td class="gh-member-stripe-label">Stripe subscription ID</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-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>
<tr> <tr>
<td class="gh-member-stripe-label">Current status</td> <td class="gh-member-stripe-label">Plan</td>
<td class="gh-member-stripe-data">{{subscription.status}}</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>
<tr> <tr>
<td class="gh-member-stripe-label">Next renewal date</td> <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> </tr>
</table> </table>
</div> </div>
@ -157,7 +183,7 @@
</div> </div>
{{else}} {{else}}
<div class="pa20 br4 shadow-1 bg-grouped-table mt2"> <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> </div>
{{/if}} {{/if}}
{{/if}} {{/if}}