diff --git a/static/styles/landing-page.scss b/static/styles/landing-page.scss index fc5c89c8d6..746466420f 100644 --- a/static/styles/landing-page.scss +++ b/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) { diff --git a/templates/zerver/billing_nav.html b/templates/zerver/billing_nav.html new file mode 100644 index 0000000000..26ab6f4d88 --- /dev/null +++ b/templates/zerver/billing_nav.html @@ -0,0 +1,13 @@ + diff --git a/templates/zilencer/billing.html b/templates/zilencer/billing.html index 2596b7ff10..bd61e9f44a 100644 --- a/templates/zilencer/billing.html +++ b/templates/zilencer/billing.html @@ -1,4 +1,4 @@ -{% extends "zerver/base.html" %} +{% extends "zerver/portico.html" %} {% block customhead %} @@ -6,33 +6,60 @@ {% endblock %} {% block content %} +
+ {% include 'zerver/billing_nav.html' %} + {{ render_bundle('translations') }} -
-

{{ _("Billing") }}

- {% if admin_access %} - Plan
- {{ plan_name }}
-
- You are paying for {{ seat_count }} users.
- Your plan will renew on {{ renewal_date }} for ${{ renewal_amount }}.
- {% 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 %} -
-
- Payment method: {{ payment_method }}.
-
- 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 %} +
+
+ +
+
+ +

{{ _("Billing") }}

+ {% if admin_access %} + + +
+
+

Your current plan is {{ plan_name }}

+

You are paying for {{ seat_count }} users.

+

Your plan will renew on {{ renewal_date }} for ${{ renewal_amount }}.

+ {% 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 %} +
+
+

Your current payment method is {{ payment_method }}.

+
+
+ +
+

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 %} +
+
{% endblock %} diff --git a/tools/linter_lib/custom_check.py b/tools/linter_lib/custom_check.py index a2a1c67946..061db0ac89 100644 --- a/tools/linter_lib/custom_check.py +++ b/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', diff --git a/zilencer/tests/test_stripe.py b/zilencer/tests/test_stripe.py index f2d35ff554..f4698d7217 100644 --- a/zilencer/tests/test_stripe.py +++ b/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)