harmacist/healthchecks
1
0
Fork 0
forked from GithubBackups/healthchecks
Code Issues Pull Requests Projects Releases Wiki Activity

Update plan names, nicer "Change Plan" form.

Browse Source
This commit is contained in:
Pēteris Caune 2018-09-25 13:12:21 +03:00
parent 7cac2d91bc
commit 9e9c504e2d
No known key found for this signature in database
GPG Key ID: E28D7679E9A9EDE2
7 changed files with 233 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
hc/payments/models.py
View File

@ -149,13 +149,13 @@ class Subscription(models.Model):
self.subscription_id = result.subscription.id
self.plan_id = plan_id
if plan_id == "P20":
self.plan_name = "Standard ($20 / month)"
self.plan_name = "Business ($20 / month)"
elif plan_id == "Y192":
self.plan_name = "Standard ($192 / year)"
self.plan_name = "Business ($192 / year)"
elif plan_id == "P80":
self.plan_name = "Plus ($80 / month)"
self.plan_name = "Business Plus ($80 / month)"
elif plan_id == "Y768":
self.plan_name = "Plus ($768 / year)"
self.plan_name = "Business Plus ($768 / year)"
self.save()

4
hc/payments/tests/test_pricing.py
View File

@ -40,10 +40,10 @@ class PricingTestCase(BaseTestCase):
self.sub = Subscription(user=self.alice)
self.sub.subscription_id = "test-id"
self.sub.plan_id = "P20"
self.sub.plan_name = "Standard ($20 / month)"
self.sub.plan_name = "Business ($20 / month)"
self.sub.save()
self.client.login(username="alice@example.org", password="password")
r = self.client.get("/pricing/")
self.assertContains(r, "Standard ($20 / month)", status_code=200)
self.assertContains(r, "Business ($20 / month)", status_code=200)

6
hc/payments/tests/test_set_plan.py
View File

@ -32,7 +32,7 @@ class SetPlanTestCase(BaseTestCase):
sub = Subscription.objects.get(user=self.alice)
self.assertEqual(sub.subscription_id, "t-sub-id")
self.assertEqual(sub.plan_id, "P20")
self.assertEqual(sub.plan_name, "Standard ($20 / month)")
self.assertEqual(sub.plan_name, "Business ($20 / month)")
# User's profile should have a higher limits
self.profile.refresh_from_db()
@ -60,7 +60,7 @@ class SetPlanTestCase(BaseTestCase):
sub = Subscription.objects.get(user=self.alice)
self.assertEqual(sub.subscription_id, "t-sub-id")
self.assertEqual(sub.plan_id, "Y192")
self.assertEqual(sub.plan_name, "Standard ($192 / year)")
self.assertEqual(sub.plan_name, "Business ($192 / year)")
# User's profile should have a higher limits
self.profile.refresh_from_db()
@ -88,7 +88,7 @@ class SetPlanTestCase(BaseTestCase):
sub = Subscription.objects.get(user=self.alice)
self.assertEqual(sub.subscription_id, "t-sub-id")
self.assertEqual(sub.plan_id, "P80")
self.assertEqual(sub.plan_name, "Plus ($80 / month)")
self.assertEqual(sub.plan_name, "Business Plus ($80 / month)")
# User's profile should have a higher limits
self.profile.refresh_from_db()

75
static/css/billing.css
View File

@ -9,4 +9,77 @@
#billing-address-modal label {
font-size: 13px;
}
}
@media (min-width: 992px) {
#change-billing-plan-modal .modal-dialog {
width: 850px;
}
}
#change-billing-plan-modal .modal-header {
border-bottom: 0;
padding: 30px 30px 0 30px;
}
#change-billing-plan-modal .modal-body {
padding: 15px 30px;
}
#change-billing-plan-modal .plan {
border-color: #ddd;
padding: 24px;
position: relative;
cursor: pointer;
}
#change-billing-plan-modal .plan.selected {
border-color: #0091EA;
}
.plan .marker {
display: none;
}
.plan.selected .marker {
display: block;
position: absolute;
top: 0;
font-size: 10px;
padding: 2px 8px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
color: #fff;
background: #0091EA;
text-transform: uppercase;
}
#change-billing-plan-modal .plan h2 {
margin: 8px 0 16px 0;
}
#change-billing-plan-modal .plan h3 {
margin-bottom: 8px;
}
#change-billing-plan-modal .plan h3 small {
font-size: 18px;
color: #333;
}
#change-billing-plan-modal .plan ul {
list-style: none;
margin: 0;
padding: 0;
}
#change-billing-plan-modal .plan li {
margin: 0;
padding: 0;
}
#change-billing-plan-modal .text-warning {
margin-top: 20px;
}

70
static/js/billing.js
View File

@ -43,4 +43,74 @@ $(function () {
$("#next-billing-date").text($("#nbd").val());
});
$("#billing-periods input").click(updateChangePlanForm);
$("#plan-hobbyist").click(function() {
$(".plan").removeClass("selected");
$("#plan-hobbyist").addClass("selected");
updateChangePlanForm();
});
$("#plan-business").click(function() {
$(".plan").removeClass("selected");
$("#plan-business").addClass("selected");
updateChangePlanForm();
});
$("#plan-business-plus").click(function() {
$(".plan").removeClass("selected");
$("#plan-business-plus").addClass("selected");
updateChangePlanForm();
});
function updateChangePlanForm() {
var planId = $("#old-plan-id").val();
// "Monthly" is selected: dispplay monthly prices
if ($("#billing-monthly").is(":checked")) {
var period = "monthly";
$("#business-price").text("$20");
$("#business-plus-price").text("$80");
}
// "Annual" is selected: dispplay annual prices
if ($("#billing-annual").is(":checked")) {
var period = "annual";
$("#business-price").text("$16");
$("#business-plus-price").text("$64");
}
// "Hobbyist" is selected, set planId
if ($("#plan-hobbyist").hasClass("selected")) {
planId = "";
}
// "Business" is selected, set planId
if ($("#plan-business").hasClass("selected")) {
planId = period == "monthly" ? "P20" : "Y192";
}
// "Business Plus" is selected, set planId
if ($("#plan-business-plus").hasClass("selected")) {
planId = period == "monthly" ? "P80" : "Y768";
}
$("#plan-id").val(planId);
if (planId == $("#old-plan-id").val()) {
$("#change-plan-btn")
.attr("disabled", "disabled")
.text("Change Billing Plan");
} else {
var caption = "Change Billing Plan";
if (planId) {
caption += " And Pay $" + planId.substr(1) + " Now";
}
$("#change-plan-btn").removeAttr("disabled").text(caption);
}
}
updateChangePlanForm();
});

127
templates/accounts/billing.html
View File

@ -188,68 +188,93 @@
<div id="change-billing-plan-modal" class="modal">
<div class="modal-dialog">
{% if sub.payment_method_token and sub.address_id %}
<form method="post" class="form-horizontal" action="{% url 'hc-set-plan' %}">
<form method="post" class="form-horizontal" autocomplete="off" action="{% url 'hc-set-plan' %}">
{% csrf_token %}
<input type="hidden" id="old-plan-id" value="{{ sub.plan_id }}">
<input type="hidden" id="plan-id" name="plan_id" value="{{ sub.plan_id }}">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="remove-check-title">Change Billing Plan</h4>
</div>
<div class="modal-body">
<h2>Free <small>20 checks, 3 team members</small></h2>
<label class="radio-container">
<input
type="radio"
name="plan_id"
value=""
{% if sub.plan_id == "" %} checked {% endif %}>
<span class="radiomark"></span>
Enjoy free service.
</label>
<div class="row">
<div class="col-sm-4">
<div id="plan-hobbyist" class="panel plan {% if sub.plan_id == "" %}selected{% endif %}">
<div class="marker">Selected Plan</div>
<h2>Standard <small>100 checks, 10 team members</small></h2>
<label class="radio-container">
<input
type="radio"
name="plan_id"
value="P20"
{% if sub.plan_id == "P20" %} checked {% endif %}>
<span class="radiomark"></span>
Monthly, $20 / month
</label>
<h2>Hobbyist</h2>
<ul>
<li>Checks: 20</li>
<li>Team members: 3</li>
<li>Log entries: 100</li>
</ul>
<h3>Free</h3>
</div>
</div>
<div class="col-sm-4">
<div id="plan-business" class="panel plan {% if sub.plan_id == "P20" or sub.plan_id == "Y192" %}selected{% endif %}">
<div class="marker">Selected Plan</div>
<label class="radio-container">
<input
type="radio"
name="plan_id"
value="Y192"
{% if sub.plan_id == "Y192" %} checked {% endif %}>
<span class="radiomark"></span>
Annual, $192 / year (20% off monthly)
</label>
<h2>Business</h2>
<ul>
<li>Checks: 100</li>
<li>Team members: 10</li>
<li>Log entries: 1000</li>
</ul>
<h3>
<span id="business-price"></span>
<small>/ month</small>
</h3>
</div>
</div>
<div class="col-sm-4">
<div id="plan-business-plus" class="panel plan {% if sub.plan_id == "P80" or sub.plan_id == "Y768" %}selected{% endif %}">
<div class="marker">Selected Plan</div>
<h2>Plus <small>1000 checks, unlimited team members</small></h2>
<label class="radio-container">
<input
type="radio"
name="plan_id"
value="P80"
{% if sub.plan_id == "P80" %} checked {% endif %}>
<span class="radiomark"></span>
Monthly, $80/month
</label>
<h2>Business Plus</h2>
<ul>
<li>Checks: 1000</li>
<li>Team members: Unlimited</li>
<li>Log entries: 1000</li>
</ul>
<h3>
<span id="business-plus-price"></span>
<small>/ month</small>
</h3>
</div>
</div>
</div>
<label class="radio-container">
<input
type="radio"
name="plan_id"
value="Y768"
{% if sub.plan_id == "Y768" %} checked {% endif %}>
<span class="radiomark"></span>
Annual, $768/year (20% off monthly)
</label>
<div class="row">
<div id="billing-periods" class="col-sm-6">
<p>Billing Period</p>
<div class="alert alert-warning">
<label class="radio-container">
<input
id="billing-monthly"
type="radio"
name="billing_period"
value="monthly"
{% if sub.plan_id == "Y192" or sub.plan_id == "Y768" %}{% else %}checked{% endif %}>
<span class="radiomark"></span>
Monthly
</label>
<label class="radio-container">
<input
id="billing-annual"
type="radio"
name="billing_period"
value="annual"
{% if sub.plan_id == "Y192" or sub.plan_id == "Y768" %} checked {% endif %}>
<span class="radiomark"></span>
Annual, 20% off
</label>
</div>
</div>
<div class="text-warning">
<strong>No proration.</strong> We currently do not
support proration when changing billing plans.
Changing the plan starts a new billing cycle
@ -260,7 +285,7 @@
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">
<button id="change-plan-btn" type="submit" class="btn btn-primary" disabled="disabled">
Change Billing Plan
</button>
</div>

8
templates/payments/pricing.html
View File

@ -27,7 +27,7 @@
plan. Thank you for supporting {% site_name %}!
{% else %}
Your account is currently on the
<strong>Free</strong> plan.
<strong>Hobbyist</strong> plan.
{% endif %}
</p>
<p>
@ -75,7 +75,7 @@
<div class="col-sm-4 text-center">
<div class="panel panel-default">
<div class="panel-body text-center free">
<h1>Free</h1>
<h1>Hobbyist</h1>
<h2>$0<span class="mo">/mo</span></h2>
</div>
<ul class="list-group text-center">
@ -98,7 +98,7 @@
<div class="col-sm-4 text-center">
<div class="panel panel-default">
<div class="panel-body text-center">
<h1>Standard</h1>
<h1>Business</h1>
<h2>
<span id="s-price">$16</span><span class="mo">/mo</span>
</h2>
@ -126,7 +126,7 @@
<div class="col-sm-4 text-center">
<div class="panel panel-default">
<div class="panel-body text-center">
<h1>Plus</h1>
<h1>Business Plus</h1>
<h2>
<span id="p-price">$64</span><span class="mo">/mo</span>
</h2>