sponsorship: Improve sponsorship page for sponsored realms.

corporate/views/billing_page.py

@@ -6,7 +6,7 @@ from django.shortcuts import render
 from django.urls import reverse
 
 from corporate.lib.stripe import RealmBillingSession, UpdatePlanRequest
-from corporate.models import CustomerPlan, get_customer_by_realm
+from corporate.models import CustomerPlan, get_current_plan_by_customer, get_customer_by_realm
 from zerver.decorator import require_billing_access, zulip_login_required
 from zerver.lib.request import REQ, has_request_variables
 from zerver.lib.response import json_success
@@ -47,6 +47,12 @@ def sponsorship_request(request: HttpRequest) -> HttpResponse:
     if user.realm.plan_type == user.realm.PLAN_TYPE_STANDARD_FREE:
         context["is_sponsored"] = True
 
+    if customer is not None:
+        plan = get_current_plan_by_customer(customer)
+        if plan is not None:
+            context["plan_name"] = plan.name
+            context["free_trial"] = plan.is_free_trial()
+
     add_sponsorship_info_to_context(context, user)
     return render(request, "corporate/sponsorship.html", context=context)
 

templates/corporate/sponsorship.html

@@ -7,13 +7,33 @@
 
 {% if is_sponsored %}
 
-<div class="flex full-page thanks-page sponsorship-status-page">
+<div class="register-account flex full-page sponsorship-status-page">
     <div class="center-block new-style">
+        <div class="alert alert-success sponsorship-page-success" id="sponsorship-status-success-message-top">
+            Zulip is sponsoring a free <a href="https://github.com/plans/">Zulip Cloud Standard</a> plan for this organization. 🎉
+        </div>
         <div class="pitch">
             <h1>Zulip Cloud billing for {{realm_name}}</h1>
         </div>
         <div class="white-box">
-            <p> Zulip is sponsoring free <a href="/plans/">Zulip Cloud Standard</a> hosting for this organization. 🎉 </p>
+            <div id="sponsorship-status-page-details">
+                <div class="input-box sponsorship-form-field no-validation">
+                    <label for="sponsored-org-current-plan" class="inline-block label-title">Your plan</label>
+                    <div id="sponsored-org-current-plan" class="not-editable-realm-field">
+                        {% if free_trial %}
+                        {{ plan_name }} <i>(free trial)</i>
+                        {% else %}
+                        {{ plan_name }}
+                        {% endif %}
+                    </div>
+                </div>
+            </div>
+        </div>
+        <hr />
+        <div class="support-link">
+            <p>
+                To make changes to your plan or view your billing history <a href="mailto:support@zulip.com">contact Zulip support</a>.
+            </p>
         </div>
     </div>
 </div>

web/styles/portico/billing.css

@@ -382,6 +382,11 @@ input[name="licenses"] {
         margin: -50px;
     }
 
+    .sponsorship-status-page {
+        transform: scale(0.8);
+        margin: -10px -50px -50px;
+    }
+
     #upgrade-page {
         transform: scale(0.8);
         margin: -50px 0;
@@ -396,6 +401,11 @@ input[name="licenses"] {
         margin: -150px -100px;
     }
 
+    .sponsorship-status-page {
+        transform: scale(0.6);
+        margin: -50px -150px -100px;
+    }
+
     #upgrade-page {
         transform: scale(0.6);
         margin: -150px 0;
@@ -406,9 +416,14 @@ input[name="licenses"] {
     width: 100%;
 }
 
-.billing-status-page,
+.billing-status-page {
+    font-weight: 400;
+}
+
 .sponsorship-status-page .white-box {
     font-weight: 400;
+    margin: 30px;
+    padding: 0;
 }
 
 .billing-status-page p:last-child,
@@ -524,11 +539,12 @@ input[name="licenses"] {
     padding-top: 0;
 }
 
-#upgrade-page-details .input-box.billing-page-field:first-child,
+#sponsorship-status-page-details .input-box.sponsorship-form-field:first-child,
 #billing-page-details .input-box.billing-page-field:first-child {
     margin-top: 10px;
 }
 
+.sponsorship-status-page .support-link,
 #billing-page .support-link {
     text-align: center;
 }
@@ -560,9 +576,11 @@ input[name="licenses"] {
     text-align: left;
 }
 
+#sponsorship-status-success-message-top,
 #billing-success-message-top {
     display: block;
     text-align: center;
+    font-weight: 400;
 }
 
 .upgrade-page-success {

web/styles/portico/portico_signin.css

@@ -482,6 +482,7 @@ html {
                 .alert-info,
                 .billing-page-success,
                 .upgrade-page-success,
+                .sponsorship-page-success,
                 #autopay-error
             ) {
             padding: 0;
@@ -925,6 +926,7 @@ button#register_auth_button_gitlab {
 #upgrade-page-details,
 #billing-page-details,
 #sponsorship-form,
+#sponsorship-status-page-details,
 #registration,
 #new-realm-creation {
     width: auto;