Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

billing: Style billing page. 

This adds styles to /billing.
This commit is contained in:
Max Nussenbaum 2018-06-29 10:51:36 -04:00 committed by Tim Abbott
parent 4af3b8bdda
commit 8fd900626d
5 changed files with 130 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
static/styles/landing-page.scss
View File

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

13
templates/zerver/billing_nav.html Normal file
View File

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

59
templates/zilencer/billing.html
View File

@ -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="portico-landing billing-upgrade-page">
<div class="hero small-hero"></div>
<div class="page-content">
<div class="main">
<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/>
<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 %}
You have ${{ prorated_charges }} in prorated charges that will be
added to your next bill.
<p>You have <strong>${{ prorated_charges }}</strong> in prorated charges that will be added to your next bill.</p>
{% elif prorated_credits %}
You have ${{ prorated_credits }} in prorated credits that will be
automatically applied to your next bill.
<p>You have <strong>${{ prorated_credits }}</strong> in prorated credits that will be automatically applied to your next bill.</p>
{% endif %}
<br/>
<br/>
Payment method: {{ payment_method }}.<br/>
<br/>
Contact support@zulipchat.com for billing history or to make changes to your subscription.
</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 %}
You must be an organization administrator or a billing administrator to view this page.
<p>
You must be an organization administrator or a
billing administrator to view this page.
</p>
{% endif %}
</div>
</div>
</div>
</div>
{% endblock %}

1
tools/linter_lib/custom_check.py
View File

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

6
zilencer/tests/test_stripe.py
View File

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