Skip to content

Commit

Permalink
Added ability to cancel subscription from member's account page (#23)
Browse files Browse the repository at this point in the history 
refs TryGhost/Ghost#11434

- Adds {{cancel_link}} use to the `account.hbs` page which allows to cancel or continue member's subscription.
- Adds some subscription specific data on the account page to give more context to the member.
  • Loading branch information
@naz
naz committed Dec 12, 2019
1 parent b29fe6b commit 4ca9576
Show file tree
Hide file tree
Showing 5 changed files with 156 additions and 11 deletions.
2 changes: 1 addition & 1 deletion assets/built/screen.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion assets/built/screen.css.map
View file

Large diffs are not rendered by default.

100 changes: 97 additions & 3 deletions assets/css/screen.css
View file
Expand Up @@ -3156,20 +3156,108 @@ form[data-members-form].error .message-error {
flex-direction: column;
align-items: center;
padding: 5vw;
z-index: 1;
}

.subscriber-box {
width: 100%;
max-width: 560px;
margin: 0 auto;
}

.subscriber-box-title {
font-size: 3.4rem;
}

.subscriber-box p {
line-height: 1.5em;
}

.subscription {
padding: 20px 0 40px;
border-top: 1px solid color(var(--lightgrey) l(+10%));
}

.subscription-expiration-warning {
color: var(--red);
}

.subscriber-details {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
}

.subscriber-detail {
flex: 1 0 50%;
display: flex;
flex-direction: column;
padding: 0 20px 0 0;
margin: 0 0 30px;
}

.subscriber-detail-label {
font-size: 1.3rem;
font-weight: 700;
text-transform: uppercase;
}

.gh-subscription-cancel {
display: inline-block;
height: 44px;
padding: 0 1.8rem;
border: 0;
border-radius: 5px;
cursor: pointer;
font-size: 1.5rem;
font-weight: 600;
line-height: 42px;
text-align: center;
text-decoration: none;
white-space: nowrap;
color: var(--blue);
background-color: transparent;
box-shadow: inset 0 0 0 1px var(--blue);
appearance: none;
transition: 0.4s ease;
}

.gh-subscription-cancel:hover {
text-decoration: none;
color: color(var(--blue) l(-15%));
box-shadow: inset 0 0 0 1px color(var(--blue) l(-10%));
transition: 0.2s ease;
}

.gh-subscription-cancel[data-members-continue-subscription] {
color: #fff;
background-color: var(--blue);
box-shadow: none;
}

.gh-subscription-cancel[data-members-continue-subscription]:hover {
background-color: color(var(--blue) l(-10%));
}

.gh-error-subscription-cancel {
display: block;
margin-top: 10px;
font-size: 1.5rem;
color: var(--red);
}

.account-box {
width: 100%;
max-width: 500px;
max-width: 560px;
margin: 0 auto;
}

.account-box-title {
font-size: 3rem;
font-size: 3.4rem;
}

.header-cta {
margin-left: 15px;
margin-left: 20px;
}

.post-card-header-tags {
Expand Down Expand Up @@ -3240,6 +3328,12 @@ form[data-members-form].error .message-error {
box-shadow: none !important;
}

@media (max-width: 600px) {
.subscriber-details {
flex-direction: column;
}
}


/* 13. Dark Mode
/* ---------------------------------------------------------- */
Expand Down
59 changes: 55 additions & 4 deletions members/account.hbs
View file
Expand Up @@ -9,9 +9,60 @@
{{#if @member.paid}}

{{!-- Logged in, paying member: Show account info --}}
<div class="account-box">
<h2 class="account-box-title">Nice, you're a subscriber!</h2>
<p>Hey! <strong>{{@member.email}}</strong> has an active {{@site.title}} account with access to all areas. You're all set, but if you need any help, get in touch with us and we'd be happy to help.</p>
<div class="subscriber-box">
<h1 class="subscriber-box-title">Your account</h1>

{{#foreach @member.subscriptions}}
<div class="subscription">
{{#if cancel_at_period_end}}
<p>
<strong class="subscription-expiration-warning">Your subscription will expire on {{date current_period_end format="DD MMM YYYY"}}.</strong> If you change your mind in the mean time you can turn auto-renew back on to continue your subscription.
</p>
{{else}}
<p>
Hey! You have an active {{@site.title}} account with access to all areas. Get in touch if have any problems or need some help getting things updated, and thanks for subscribing.
</p>
{{/if}}
<div class="subscriber-details">
<div class="subscriber-detail">
<label class="subscriber-detail-label">Email address</label>
<span class="subscriber-detail-content">{{@member.email}}</span>
</div>

<div class="subscriber-detail">
<label class="subscriber-detail-label">Your plan</label>
<span class="subscriber-detail-content">$<span class="plan-price">0</span>/{{plan.interval}}</span>
</div>

<div class="subscriber-detail">
<label class="subscriber-detail-label">Card</label>
<span class="subscriber-detail-content">**** **** **** {{default_payment_card_last4}}</span>
</div>

<div class="subscriber-detail">
<label class="subscriber-detail-label">
{{#if cancel_at_period_end}}
Expires
{{else}}
Next bill date
{{/if}}
</label>
<span class="subscriber-detail-content">{{date current_period_end format="DD MMM YYYY"}}</span>
</div>

{{#contentFor "scripts"}}
<script>
$(document).ready(function () {
var planAmount = {{ plan.amount }} / 100;
$(".plan-price").html(planAmount);
});
</script>
{{/contentFor}}
</div>

{{cancel_link}}
</div>
{{/foreach}}
</div>

{{else if @member}}
Expand All @@ -35,4 +86,4 @@
{{/if}}

</div>
</main>
</main>
4 changes: 2 additions & 2 deletions members/signup.hbs
View file
Expand Up @@ -30,7 +30,7 @@
<li>Support independent publishing</li>
<li>Simple, secure card payment</li>
</ul>
<a class="button primary fit" href="javascript:void(0)" data-members-plan="Monthly">Choose this plan</a>
<a class="button primary fit" href="javascript:" data-members-plan="Monthly">Choose this plan</a>
</div>
</div>
<div class="checkout-plan">
Expand All @@ -46,7 +46,7 @@
<li>Simple, secure card payment</li>
<li>One easy payment instead of 12!</li>
</ul>
<a class="button primary fit" href="javascript:void(0)" data-members-plan="Yearly">Choose this plan</a>
<a class="button primary fit" href="javascript:" data-members-plan="Yearly">Choose this plan</a>
</div>
</div>
</div>
Expand Down

0 comments on commit 4ca9576

Please sign in to comment.