Update plan names, nicer "Change Plan" form.

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

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="[email protected]", 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)

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

static/css/billing.css

@@ -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;
+}
+
+

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();
+
 });

templates/accounts/billing.html

@@ -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>
-
-                    <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>
-
-                    <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>
+                    <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>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>
+
+                                <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>
 
-                    <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>
+                    <div class="row">
+                        <div id="billing-periods" class="col-sm-6">
+                            <p>Billing Period</p>
 
-                    <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>
+                            <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="alert alert-warning">
+                    <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>

templates/payments/pricing.html

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