billing: Style billing page.

This adds styles to /billing.

static/styles/landing-page.scss

@@ -3036,6 +3036,61 @@ nav ul li.active::after {
     background-color: #3ca08d;
 }
 
+// Billing & Upgrade
+.billing-upgrade-page {
+    font-family: Source Sans Pro, Helvetica, Arial, sans-serif;
+    background: #fafafa;
+    height: 100vh;
+
+    .hero {
+        background: #69b190;
+        color: #69b190;
+        position: absolute;
+        top: 0;
+        width: 100%;
+    }
+
+    .small-hero {
+        padding: 120px 50px 0;
+    }
+
+    .main {
+        width: 800px;
+        max-width: 90%;
+        margin: 0 auto;
+    }
+
+    h1 {
+        margin: 30px 0;
+        font-weight: bold;
+    }
+
+    .nav {
+        margin-bottom: 0;
+    }
+
+    .nav-tabs {
+        border-bottom: 0;
+        font-size: 1.2em;
+        a {
+            font-weight: bold;
+        }
+    }
+
+    .tab-content {
+        border: 1px solid #ddd;
+        border-bottom-left-radius: 4px;
+        border-bottom-right-radius: 4px;
+        padding: 20px;
+        background: #fefefe;
+        font-size: 1.1em;
+    }
+
+    .support-link {
+        margin: 10px 20px;
+    }
+}
+
 @keyframes box-shadow-pulse {
     0% {
         box-shadow: 0px 0px 0px rgba(106, 201, 185, 0);
@@ -3648,6 +3703,13 @@ nav ul li.active::after {
         padding: 0px 20px;
     }
 
+    .billing-upgrade-page {
+        .nav-tabs,
+        .tab-content {
+            font-size: 1em;
+        }
+    }
+
 }
 
 @media (max-width: 686px) {

templates/zerver/billing_nav.html

@@ -0,0 +1,13 @@
+<nav class="portico-header">
+    <div class="content">
+        <a class="brand logo" href="{{ root_domain_uri }}">
+            <svg class="brand-logo" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 40 40" version="1.1">
+                <g transform="translate(-297.14285,-466.64792)">
+                    <circle cx="317.14285" cy="486.64792" r="19.030317" style="fill:#fff;stroke-width:1.93936479;stroke:transparent"></circle>
+                    <path d="m309.24286 477.14791 14.2 0 1.6 3.9-11.2 11.9 9.6 0 1.6 3.2-14.2 0-1.6-3.9 11.2-11.9-9.6 0z" style="fill:#52c2af;stroke:#52c2af"></path>
+                </g>
+            </svg>
+            <span>Zulip</span>
+        </a>
+    </div>
+</nav>

templates/zilencer/billing.html

@@ -1,4 +1,4 @@
-{% extends "zerver/base.html" %}
+{% extends "zerver/portico.html" %}
 
 {% block customhead %}
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -6,33 +6,60 @@
 {% endblock %}
 
 {% block content %}
+
 <div class="app portico-page">
 
+    {% include 'zerver/billing_nav.html' %}
+
     {{ render_bundle('translations') }}
 
-    <div class="page-content">
-        <h1>{{ _("Billing") }}</h1>
-        {% if admin_access %}
-            Plan<br/>
-            {{ plan_name }}<br/>
-            <br/>
-            You are paying for {{ seat_count }} users.<br/>
-            Your plan will renew on {{ renewal_date }} for ${{ renewal_amount }}.<br/>
-            {% if prorated_charges %}
-            You have ${{ prorated_charges }} in prorated charges that will be
-            added to your next bill.
-            {% elif prorated_credits %}
-            You have ${{ prorated_credits }} in prorated credits that will be
-            automatically applied to your next bill.
-            {% endif %}
-            <br/>
-            <br/>
-            Payment method: {{ payment_method }}.<br/>
-            <br/>
-            Contact support@zulipchat.com for billing history or to make changes to your subscription.
-        {% else %}
-            You must be an organization administrator or a billing administrator to view this page.
-        {% endif %}
+    <div class="portico-landing billing-upgrade-page">
+        <div class="hero small-hero"></div>
+
+        <div class="page-content">
+            <div class="main">
+
+                <h1>{{ _("Billing") }}</h1>
+                {% if admin_access %}
+                <ul class="nav nav-tabs" id="billing-tabs">
+                    <li class="active"><a href="#overview">Overview</a></li>
+                    <li><a href="#payment-method">Payment Method</a></li>
+                </ul>
+
+                <div class="tab-content">
+                    <div class="tab-pane active" id="overview">
+                        <p>Your current plan is <strong>{{ plan_name }}</strong></p>
+                        <p>You are paying for <strong>{{ seat_count }} users</strong>.</p>
+                        <p>Your plan will renew on <strong>{{ renewal_date }}</strong> for <strong>${{ renewal_amount }}</strong>.</p>
+                        {% if prorated_charges %}
+                        <p>You have <strong>${{ prorated_charges }}</strong> in prorated charges that will be added to your next bill.</p>
+                        {% elif prorated_credits %}
+                        <p>You have <strong>${{ prorated_credits }}</strong> in prorated credits that will be automatically applied to your next bill.</p>
+                        {% endif %}
+                    </div>
+                    <div class="tab-pane" id="payment-method">
+                        <p>Your current payment method is <strong>{{ payment_method }}</strong>.</p>
+                    </div>
+                </div>
+
+                <div class="support-link">
+                    <p>Contact <a href="mailto:support@zulipchat.com">support@zulipchat.com</a> for billing history or to make changes to your subscription.</p>
+                </div>
+
+                <script>
+                $('#billing-tabs a').click(function (e) {
+                    e.preventDefault();
+                    $(this).tab('show');
+                })
+                </script>
+                {% else %}
+                <p>
+                    You must be an organization administrator or a
+                    billing administrator to view this page.
+                </p>
+                {% endif %}
+            </div>
+        </div>
     </div>
 </div>
 {% endblock %}

tools/linter_lib/custom_check.py

@@ -694,6 +694,7 @@ def build_custom_checkers(by_lang):
 
              # Inline styling for an svg; could be moved to CSS files?
              'templates/zerver/landing_nav.html',
+             'templates/zerver/billing_nav.html',
              'templates/zerver/app/home.html',
              'templates/zerver/features.html',
              'templates/zerver/portico-header.html',

zilencer/tests/test_stripe.py

@@ -150,11 +150,11 @@ class StripeTest(ZulipTestCase):
                                        'plan': Plan.CLOUD_ANNUAL})
         # Check that the non-admin hamlet can still access /billing
         response = self.client_get("/billing/")
-        self.assert_in_success_response(["Contact support@zulipchat.com for billing"], response)
+        self.assert_in_success_response(["for billing history or to make changes"], response)
         # Check admins can access billing, even though they are not the billing_user
         self.login(self.example_email('iago'))
         response = self.client_get("/billing/")
-        self.assert_in_success_response(["Contact support@zulipchat.com for billing"], response)
+        self.assert_in_success_response(["for billing history or to make changes"], response)
         # Check that non-admin, non-billing_user does not have access
         self.login(self.example_email("cordelia"))
         response = self.client_get("/billing/")
@@ -214,7 +214,7 @@ class StripeTest(ZulipTestCase):
             realm=self.realm, stripe_customer_id=self.stripe_customer_id, billing_user=self.user)
         response = self.client_get("/billing/")
         self.assert_not_in_success_response(['We can also bill by invoice'], response)
-        for substring in ['Your plan will renew on', 'for $%s.00' % (80 * self.quantity,),
+        for substring in ['Your plan will renew on', '$%s.00' % (80 * self.quantity,),
                           'Card ending in 4242']:
             self.assert_in_response(substring, response)