From 9e9c504e2dd5dbce277f607be48c7ba57529519a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?P=C4=93teris=20Caune?= Date: Tue, 25 Sep 2018 13:12:21 +0300 Subject: [PATCH] Update plan names, nicer "Change Plan" form. --- hc/payments/models.py | 8 +- hc/payments/tests/test_pricing.py | 4 +- hc/payments/tests/test_set_plan.py | 6 +- static/css/billing.css | 75 ++++++++++++++++- static/js/billing.js | 70 +++++++++++++++ templates/accounts/billing.html | 131 +++++++++++++++++------------ templates/payments/pricing.html | 8 +- 7 files changed, 235 insertions(+), 67 deletions(-) diff --git a/hc/payments/models.py b/hc/payments/models.py index 91dd6b42..c1aa668d 100644 --- a/hc/payments/models.py +++ b/hc/payments/models.py @@ -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() diff --git a/hc/payments/tests/test_pricing.py b/hc/payments/tests/test_pricing.py index 1290565e..24728afa 100644 --- a/hc/payments/tests/test_pricing.py +++ b/hc/payments/tests/test_pricing.py @@ -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) diff --git a/hc/payments/tests/test_set_plan.py b/hc/payments/tests/test_set_plan.py index 3ebc7c55..9044609d 100644 --- a/hc/payments/tests/test_set_plan.py +++ b/hc/payments/tests/test_set_plan.py @@ -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() diff --git a/static/css/billing.css b/static/css/billing.css index b22290cf..d1816b1d 100644 --- a/static/css/billing.css +++ b/static/css/billing.css @@ -9,4 +9,77 @@ #billing-address-modal label { font-size: 13px; -} \ No newline at end of file +} + +@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; +} + + diff --git a/static/js/billing.js b/static/js/billing.js index 299826fc..c336186e 100644 --- a/static/js/billing.js +++ b/static/js/billing.js @@ -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(); + }); \ No newline at end of file diff --git a/templates/accounts/billing.html b/templates/accounts/billing.html index 279cb528..83da3d0e 100644 --- a/templates/accounts/billing.html +++ b/templates/accounts/billing.html @@ -188,68 +188,93 @@