tqt
/
Ghost-Admin
mirror of https://github.com/TryGhost/Ghost-Admin.git
1
0
Fork 0
Code Issues Releases Wiki Activity

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
This commit is contained in:
Naz Gargol 2019-12-12 20:00:57 +07:00 committed by GitHub
parent 47abee280b
commit cf3bbeffe5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 51 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/gh-member-settings-form.js
View File

@ -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();

15
app/styles/layouts/members.css
View File

@ -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
/* ---------------------------------------------------------- */

42
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">
<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}}