forked from GithubBackups/healthchecks
Update plan names, nicer "Change Plan" form.
This commit is contained in:
parent
7cac2d91bc
commit
9e9c504e2d
@ -149,13 +149,13 @@ class Subscription(models.Model):
|
|||||||
self.subscription_id = result.subscription.id
|
self.subscription_id = result.subscription.id
|
||||||
self.plan_id = plan_id
|
self.plan_id = plan_id
|
||||||
if plan_id == "P20":
|
if plan_id == "P20":
|
||||||
self.plan_name = "Standard ($20 / month)"
|
self.plan_name = "Business ($20 / month)"
|
||||||
elif plan_id == "Y192":
|
elif plan_id == "Y192":
|
||||||
self.plan_name = "Standard ($192 / year)"
|
self.plan_name = "Business ($192 / year)"
|
||||||
elif plan_id == "P80":
|
elif plan_id == "P80":
|
||||||
self.plan_name = "Plus ($80 / month)"
|
self.plan_name = "Business Plus ($80 / month)"
|
||||||
elif plan_id == "Y768":
|
elif plan_id == "Y768":
|
||||||
self.plan_name = "Plus ($768 / year)"
|
self.plan_name = "Business Plus ($768 / year)"
|
||||||
|
|
||||||
self.save()
|
self.save()
|
||||||
|
|
||||||
|
@ -40,10 +40,10 @@ class PricingTestCase(BaseTestCase):
|
|||||||
self.sub = Subscription(user=self.alice)
|
self.sub = Subscription(user=self.alice)
|
||||||
self.sub.subscription_id = "test-id"
|
self.sub.subscription_id = "test-id"
|
||||||
self.sub.plan_id = "P20"
|
self.sub.plan_id = "P20"
|
||||||
self.sub.plan_name = "Standard ($20 / month)"
|
self.sub.plan_name = "Business ($20 / month)"
|
||||||
self.sub.save()
|
self.sub.save()
|
||||||
|
|
||||||
self.client.login(username="alice@example.org", password="password")
|
self.client.login(username="alice@example.org", password="password")
|
||||||
|
|
||||||
r = self.client.get("/pricing/")
|
r = self.client.get("/pricing/")
|
||||||
self.assertContains(r, "Standard ($20 / month)", status_code=200)
|
self.assertContains(r, "Business ($20 / month)", status_code=200)
|
||||||
|
@ -32,7 +32,7 @@ class SetPlanTestCase(BaseTestCase):
|
|||||||
sub = Subscription.objects.get(user=self.alice)
|
sub = Subscription.objects.get(user=self.alice)
|
||||||
self.assertEqual(sub.subscription_id, "t-sub-id")
|
self.assertEqual(sub.subscription_id, "t-sub-id")
|
||||||
self.assertEqual(sub.plan_id, "P20")
|
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
|
# User's profile should have a higher limits
|
||||||
self.profile.refresh_from_db()
|
self.profile.refresh_from_db()
|
||||||
@ -60,7 +60,7 @@ class SetPlanTestCase(BaseTestCase):
|
|||||||
sub = Subscription.objects.get(user=self.alice)
|
sub = Subscription.objects.get(user=self.alice)
|
||||||
self.assertEqual(sub.subscription_id, "t-sub-id")
|
self.assertEqual(sub.subscription_id, "t-sub-id")
|
||||||
self.assertEqual(sub.plan_id, "Y192")
|
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
|
# User's profile should have a higher limits
|
||||||
self.profile.refresh_from_db()
|
self.profile.refresh_from_db()
|
||||||
@ -88,7 +88,7 @@ class SetPlanTestCase(BaseTestCase):
|
|||||||
sub = Subscription.objects.get(user=self.alice)
|
sub = Subscription.objects.get(user=self.alice)
|
||||||
self.assertEqual(sub.subscription_id, "t-sub-id")
|
self.assertEqual(sub.subscription_id, "t-sub-id")
|
||||||
self.assertEqual(sub.plan_id, "P80")
|
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
|
# User's profile should have a higher limits
|
||||||
self.profile.refresh_from_db()
|
self.profile.refresh_from_db()
|
||||||
|
@ -10,3 +10,76 @@
|
|||||||
#billing-address-modal label {
|
#billing-address-modal label {
|
||||||
font-size: 13px;
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -43,4 +43,74 @@ $(function () {
|
|||||||
$("#next-billing-date").text($("#nbd").val());
|
$("#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();
|
||||||
|
|
||||||
});
|
});
|
@ -188,68 +188,93 @@
|
|||||||
<div id="change-billing-plan-modal" class="modal">
|
<div id="change-billing-plan-modal" class="modal">
|
||||||
<div class="modal-dialog">
|
<div class="modal-dialog">
|
||||||
{% if sub.payment_method_token and sub.address_id %}
|
{% 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 %}
|
{% 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-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<button type="button" class="close" data-dismiss="modal">×</button>
|
<button type="button" class="close" data-dismiss="modal">×</button>
|
||||||
<h4 class="remove-check-title">Change Billing Plan</h4>
|
<h4 class="remove-check-title">Change Billing Plan</h4>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<h2>Free <small>20 checks, 3 team members</small></h2>
|
<div class="row">
|
||||||
<label class="radio-container">
|
<div class="col-sm-4">
|
||||||
<input
|
<div id="plan-hobbyist" class="panel plan {% if sub.plan_id == "" %}selected{% endif %}">
|
||||||
type="radio"
|
<div class="marker">Selected Plan</div>
|
||||||
name="plan_id"
|
|
||||||
value=""
|
|
||||||
{% if sub.plan_id == "" %} checked {% endif %}>
|
|
||||||
<span class="radiomark"></span>
|
|
||||||
Enjoy free service.
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<h2>Standard <small>100 checks, 10 team members</small></h2>
|
<h2>Hobbyist</h2>
|
||||||
<label class="radio-container">
|
<ul>
|
||||||
<input
|
<li>Checks: 20</li>
|
||||||
type="radio"
|
<li>Team members: 3</li>
|
||||||
name="plan_id"
|
<li>Log entries: 100</li>
|
||||||
value="P20"
|
</ul>
|
||||||
{% if sub.plan_id == "P20" %} checked {% endif %}>
|
<h3>Free</h3>
|
||||||
<span class="radiomark"></span>
|
</div>
|
||||||
Monthly, $20 / month
|
</div>
|
||||||
</label>
|
<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>
|
||||||
|
|
||||||
|
<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>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>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div id="billing-periods" class="col-sm-6">
|
||||||
|
<p>Billing Period</p>
|
||||||
|
|
||||||
<label class="radio-container">
|
<label class="radio-container">
|
||||||
<input
|
<input
|
||||||
|
id="billing-monthly"
|
||||||
type="radio"
|
type="radio"
|
||||||
name="plan_id"
|
name="billing_period"
|
||||||
value="Y192"
|
value="monthly"
|
||||||
{% if sub.plan_id == "Y192" %} checked {% endif %}>
|
{% if sub.plan_id == "Y192" or sub.plan_id == "Y768" %}{% else %}checked{% endif %}>
|
||||||
<span class="radiomark"></span>
|
<span class="radiomark"></span>
|
||||||
Annual, $192 / year (20% off monthly)
|
Monthly
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<h2>Plus <small>1000 checks, unlimited team members</small></h2>
|
|
||||||
<label class="radio-container">
|
<label class="radio-container">
|
||||||
<input
|
<input
|
||||||
|
id="billing-annual"
|
||||||
type="radio"
|
type="radio"
|
||||||
name="plan_id"
|
name="billing_period"
|
||||||
value="P80"
|
value="annual"
|
||||||
{% if sub.plan_id == "P80" %} checked {% endif %}>
|
{% if sub.plan_id == "Y192" or sub.plan_id == "Y768" %} checked {% endif %}>
|
||||||
<span class="radiomark"></span>
|
<span class="radiomark"></span>
|
||||||
Monthly, $80/month
|
Annual, 20% off
|
||||||
</label>
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<label class="radio-container">
|
<div class="text-warning">
|
||||||
<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="alert alert-warning">
|
|
||||||
<strong>No proration.</strong> We currently do not
|
<strong>No proration.</strong> We currently do not
|
||||||
support proration when changing billing plans.
|
support proration when changing billing plans.
|
||||||
Changing the plan starts a new billing cycle
|
Changing the plan starts a new billing cycle
|
||||||
@ -260,7 +285,7 @@
|
|||||||
|
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
|
<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
|
Change Billing Plan
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
@ -27,7 +27,7 @@
|
|||||||
plan. Thank you for supporting {% site_name %}!
|
plan. Thank you for supporting {% site_name %}!
|
||||||
{% else %}
|
{% else %}
|
||||||
Your account is currently on the
|
Your account is currently on the
|
||||||
<strong>Free</strong> plan.
|
<strong>Hobbyist</strong> plan.
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
@ -75,7 +75,7 @@
|
|||||||
<div class="col-sm-4 text-center">
|
<div class="col-sm-4 text-center">
|
||||||
<div class="panel panel-default">
|
<div class="panel panel-default">
|
||||||
<div class="panel-body text-center free">
|
<div class="panel-body text-center free">
|
||||||
<h1>Free</h1>
|
<h1>Hobbyist</h1>
|
||||||
<h2>$0<span class="mo">/mo</span></h2>
|
<h2>$0<span class="mo">/mo</span></h2>
|
||||||
</div>
|
</div>
|
||||||
<ul class="list-group text-center">
|
<ul class="list-group text-center">
|
||||||
@ -98,7 +98,7 @@
|
|||||||
<div class="col-sm-4 text-center">
|
<div class="col-sm-4 text-center">
|
||||||
<div class="panel panel-default">
|
<div class="panel panel-default">
|
||||||
<div class="panel-body text-center">
|
<div class="panel-body text-center">
|
||||||
<h1>Standard</h1>
|
<h1>Business</h1>
|
||||||
<h2>
|
<h2>
|
||||||
<span id="s-price">$16</span><span class="mo">/mo</span>
|
<span id="s-price">$16</span><span class="mo">/mo</span>
|
||||||
</h2>
|
</h2>
|
||||||
@ -126,7 +126,7 @@
|
|||||||
<div class="col-sm-4 text-center">
|
<div class="col-sm-4 text-center">
|
||||||
<div class="panel panel-default">
|
<div class="panel panel-default">
|
||||||
<div class="panel-body text-center">
|
<div class="panel-body text-center">
|
||||||
<h1>Plus</h1>
|
<h1>Business Plus</h1>
|
||||||
<h2>
|
<h2>
|
||||||
<span id="p-price">$64</span><span class="mo">/mo</span>
|
<span id="p-price">$64</span><span class="mo">/mo</span>
|
||||||
</h2>
|
</h2>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user