Tooltips and updated FAQ in the pricing page.

hc/payments/views.py

@@ -1,4 +1,3 @@
-from django.conf import settings
 from django.contrib import messages
 from django.contrib.auth.decorators import login_required
 from django.http import Http404, HttpResponseBadRequest, JsonResponse
@@ -33,12 +32,7 @@ def pricing(request, code=None):
         # subscription object is not created just by viewing a page.
         sub = Subscription.objects.filter(user_id=request.user.id).first()
 
-    ctx = {
-        "page": "pricing",
-        "project": project,
-        "sub": sub,
-        "enable_whatsapp": settings.TWILIO_USE_WHATSAPP,
-    }
+    ctx = {"page": "pricing", "project": project, "sub": sub}
     return render(request, "payments/pricing.html", ctx)
 
 

static/css/pricing.css

@@ -56,6 +56,10 @@
     border-color: #22bc66;
 }
 
+.plan .list-group-item {
+    padding: 10px 8px;
+}
+
 .plan .list-group-item:last-child {
     border-bottom: 0;
 
@@ -100,3 +104,12 @@
     margin: 10px 0;
     color: #AAA;
 }
+
+.page-pricing span[data-help] {
+    border-bottom: 1px dashed #888;
+    cursor: help;
+}
+
+.page-pricing .tooltip-inner {
+    text-align: left;
+}

static/js/pricing.js

@@ -12,4 +12,11 @@ $(function () {
             $("#business-plus-price").text("$64");
         }
     });
+
+    $('[data-help]').tooltip({
+        html: true,
+        title: function() {
+            return $("#" + this.dataset.help).html();
+        }
+    });
 });

templates/payments/pricing.html

@@ -41,7 +41,7 @@
         {% else %}
         <div class="row">
             <div class="col-sm-12 text-center">
-                <h1>{% site_name %} Pricing Plans</h1>
+                <h1 id="pricing-tagline">Monitor 20 Cron Jobs for Free. Affordable Plans When You Need More.</h1>
             </div>
         </div>
         {% endif %}
@@ -70,7 +70,7 @@
         </div>
 
         <!-- Hobbyist -->
-        <div class="col-sm-3 text-center">
+        <div class="col-sm-6 col-md-3 text-center">
             <div class="panel panel-default plan hobbyist">
                 <div class="panel-body text-center">
                     <h1>Hobbyist</h1>
@@ -78,10 +78,16 @@
                 </div>
                 <ul class="list-group text-center">
                     <li class="list-group-item"><i class="fa fa-check"></i> 20 checks</li>
-                    <li class="list-group-item">3 team members</li>
-                    <li class="list-group-item">100 log entries per check</li>
+                    <li class="list-group-item">
+                        <span data-help="team-size-help">3 team members</span>
+                    </li>
+                    <li class="list-group-item">
+                        <span data-help="log-limit-help">100 log entries per check</span>
+                    </li>
                     <li class="list-group-item">API access</li>
-                    <li class="list-group-item">5 SMS {% if enable_whatsapp %}&amp; WhatsApp{% endif %} credits</li>
+                    <li class="list-group-item">
+                        <span data-help="sms-help">5 SMS &amp; WhatsApp credits</span>
+                    </li>
                     <li class="list-group-item">&nbsp;</li>
                 </ul>
 
@@ -94,7 +100,7 @@
         </div>
 
         <!-- Supporter -->
-        <div class="col-sm-3 text-center">
+        <div class="col-sm-6 col-md-3 text-center">
             <div class="panel panel-default plan supporter">
                 <div class="panel-body text-center free">
                     <h1>Supporter</h1>
@@ -105,10 +111,16 @@
                 </div>
                 <ul class="list-group text-center">
                     <li class="list-group-item"><i class="fa fa-check"></i> 20 checks</li>
-                    <li class="list-group-item">3 team members</li>
-                    <li class="list-group-item">1000 log entries per check</li>
+                    <li class="list-group-item">
+                        <span data-help="team-size-help">3 team members</span>
+                    </li>
+                    <li class="list-group-item">
+                        <span data-help="log-limit-help">1000 log entries per check</span>
+                    </li>
                     <li class="list-group-item">API access</li>
-                    <li class="list-group-item">5 SMS {% if enable_whatsapp %}&amp; WhatsApp{% endif %} credits</li>
+                    <li class="list-group-item">
+                        <span data-help="sms-help">5 SMS &amp; WhatsApp credits</span>
+                    </li>
                     <li class="list-group-item">Email support</li>
                 </ul>
 
@@ -123,7 +135,7 @@
         </div>
 
         <!-- Business -->
-        <div class="col-sm-3 text-center">
+        <div class="col-sm-6 col-md-3 text-center">
             <div class="panel panel-default plan business">
                 <div class="panel-body text-center">
                     <h1>Business</h1>
@@ -135,10 +147,16 @@
 
                 <ul class="list-group text-center">
                     <li class="list-group-item">100 checks</li>
-                    <li class="list-group-item">10 team members</li>
-                    <li class="list-group-item">1000 log entries per check</li>
+                    <li class="list-group-item">
+                        <span data-help="team-size-help">10 team members</span>
+                    </li>
+                    <li class="list-group-item">
+                        <span data-help="log-limit-help">1000 log entries per check</span>
+                    </li>
                     <li class="list-group-item">API access</li>
-                    <li class="list-group-item">50 SMS {% if enable_whatsapp %}&amp; WhatsApp{% endif %} credits</li>
+                    <li class="list-group-item">
+                        <span data-help="sms-help">50 SMS &amp; WhatsApp credits</span>
+                    </li>
                     <li class="list-group-item">Email support</li>
                 </ul>
 
@@ -153,7 +171,7 @@
         </div>
 
         <!-- Business Plus -->
-        <div class="col-sm-3 text-center">
+        <div class="col-sm-6 col-md-3 text-center">
             <div class="panel panel-default plan business-plus">
                 <div class="panel-body text-center">
                     <h1>Business Plus</h1>
@@ -165,10 +183,16 @@
 
                 <ul class="list-group text-center">
                     <li class="list-group-item">1000 checks</li>
-                    <li class="list-group-item">Unlimited team members</li>
-                    <li class="list-group-item">1000 log entries per check</li>
+                    <li class="list-group-item">
+                        <span data-help="team-size-help">Unlimited team members</span>
+                    </li>
+                    <li class="list-group-item">
+                        <span data-help="log-limit-help">1000 log entries per check</span>
+                    </li>
                     <li class="list-group-item">API access</li>
-                    <li class="list-group-item">500 SMS {% if enable_whatsapp %}&amp; WhatsApp{% endif %} credits</li>
+                    <li class="list-group-item">
+                        <span data-help="sms-help">500 SMS &amp; WhatsApp credits</span>
+                    </li>
                     <li class="list-group-item">Priority email support</li>
                 </ul>
 
@@ -191,7 +215,7 @@
                 <h1>Billing Questions</h1>
                 <h2>What payment methods do you accept?</h2>
                 <p>
-                    We accept Visa, Master Card and PayPal.
+                    We accept Visa, Master Card, American Express and PayPal.
                 </p>
 
                 <h2>Will my credit card data be safe?</h2>
@@ -217,7 +241,17 @@
             </div>
             <div class="col-sm-6">
                 <h1>Premium Features</h1>
+                <h2>What's the difference between "Hobbyist" and "Supporter" plans?</h2>
+
+                <p>
+                    Both plans are similar. The "Supporter" plan is offered
+                    in case "Hobbyist" fits your usage but you wish
+                    to support {% site_name %} financially.
+                </p>
+
+
                 <h2>What's "3 / 10 / Unlimited Team Members"?</h2>
+
                 <p>
                     Invite your colleagues
                     to your account so they can access your checks,
@@ -225,10 +259,6 @@
                     is <strong>more convenient and more secure</strong>
                     than sharing a single login and password.
                 </p>
-                <p>
-                    Each plan has a specific team size limit. When you reach
-                    the limit, you cannot invite more team members.
-                </p>
 
                 <h2>What is the "log entries per check" number?</h2>
                 <p>
@@ -239,8 +269,8 @@
                 <p>
                     There is a per-check limit of how many log entries are
                     kept. When this limit is reached, the oldest log entries
-                    are culled. You can increase the limit by upgrading to
-                    paid plans.
+                    start getting removed to make room for new ones.
+                    You can increase the limit by upgrading to paid plans.
                 </p>
 
                 <h2>When is 100 log entries per check sufficient?</h2>
@@ -259,6 +289,24 @@
     </div>
 </section>
 
+<div id="team-size-help" class="hidden">
+    Invite your colleagues to your projects so they can access your checks, logs,
+    and configured integrations. A higher limit lets you invite more people.
+</div>
+
+<div id="log-limit-help" class="hidden">
+    The maximum number of log entries {% site_name %} will store for each check.
+    When the limit is reached, the oldest log entries start getting removed to make
+    room for new ones.
+</div>
+
+<div id="sms-help" class="hidden">
+    <p>The maximum number of SMS &amp; WhatsApp notifications per month.</p>
+
+    <p>The limit is applied to the combined number of sent SMS and
+    WhatsApp notifications. </p>
+</div>
+
 {% if not request.user.is_authenticated %}
 {% include "front/signup_modal.html" %}
 {% endif %}