From 806fa1a834c55cf9c7345a2a30806a7edb34b541 Mon Sep 17 00:00:00 2001
From: Vishnu Ks <yo@vishnuks.com>
Date: Wed, 26 Dec 2018 11:35:47 +0000
Subject: [PATCH] billing: Make card change use create_ajax_request.

---
 static/js/billing/billing.js     | 20 +-------------------
 static/styles/billing.scss       | 16 +++++++---------
 templates/corporate/billing.html | 25 ++++++++++++++-----------
 3 files changed, 22 insertions(+), 39 deletions(-)

diff --git a/static/js/billing/billing.js b/static/js/billing/billing.js
index f5db3dadc5..8fa7c6d55a 100644
--- a/static/js/billing/billing.js
+++ b/static/js/billing/billing.js
@@ -70,25 +70,7 @@ $(function () {
             image: '/static/images/logo/zulip-icon-128x128.png',
             locale: 'auto',
             token: function (stripe_token) {
-                loading.make_indicator($('#updating_card_indicator'),
-                                       {text: 'Updating card. Please wait ...', abs_positioned: true});
-                $("#payment-section").hide();
-                $("#loading-section").show();
-                $.post({
-                    url: "/json/billing/sources/change",
-                    data: {
-                        stripe_token: JSON.stringify(stripe_token.id),
-                    },
-                    success: function () {
-                        $("#loading-section").hide();
-                        $("#card-updated-message").show();
-                        location.reload();
-                    },
-                    error: function (xhr) {
-                        $("#loading-section").hide();
-                        $('#error-message-box').show().text(JSON.parse(xhr.responseText).msg);
-                    },
-                });
+                create_ajax_request("/json/billing/sources/change", "cardchange", stripe_token = stripe_token);
             },
         });
 
diff --git a/static/styles/billing.scss b/static/styles/billing.scss
index c5988bdd34..97138918bf 100644
--- a/static/styles/billing.scss
+++ b/static/styles/billing.scss
@@ -175,7 +175,7 @@
         display: none;
     }
 
-    #loading-section,
+    #cardchange-loading,
     #invoice-loading,
     #autopay-loading {
         display: none;
@@ -184,13 +184,14 @@
     }
 
 
-    #card-updated-message,
+    #cardchange-success,
     #invoice-success,
     #autopay-success {
         text-align: center;
         display: none;
     }
 
+    #cardchange-error,
     #invoice-error,
     #autopay-error {
         text-align: center;
@@ -218,24 +219,20 @@
         stroke: hsl(0, 0%, 100%);
     }
 
-    #updating_card_indicator,
+    #cardchange_loading_indicator,
     #invoice_loading_indicator,
     #autopay_loading_indicator {
         margin: 10px auto;
     }
 
-    #updating_card_indicator .loading_indicator_text {
-        margin-left: -75px;
-    }
-
-    #updating_card_indicator_box_container,
+    #cardchange_loading_indicator_box_container,
     #invoice_loading_indicator_box_container,
     #autopay_loading_indicator_box_container {
         position: absolute;
         left: 50%;
     }
 
-    #updating_card_indicator_box,
+    #cardchange_loading_indicator_box,
     #invoice_loading_indicator_box,
     #autopay_loading_indicator_box {
         position: relative;
@@ -247,6 +244,7 @@
         border-radius: 6px;
     }
 
+    #cardchange_loading_indicator .loading_indicator_text,
     #invoice_loading_indicator .loading_indicator_text,
     #autopay_loading_indicator .loading_indicator_text {
         margin-left: -115px;
diff --git a/templates/corporate/billing.html b/templates/corporate/billing.html
index 7ab3437965..682dcf1514 100644
--- a/templates/corporate/billing.html
+++ b/templates/corporate/billing.html
@@ -27,6 +27,7 @@
                     <li><a data-toggle="tab" href="#payment-method">Payment Method</a></li>
                 </ul>
 
+                <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
                 <div class="tab-content">
                     <div class="tab-pane active" id="overview">
                         <p>Your current plan is <strong>{{ plan_name }}</strong>.</p>
@@ -37,16 +38,18 @@
                         </p>
                     </div>
                     <div class="tab-pane" id="payment-method" data-email="{{stripe_email}}" data-key="{{publishable_key}}">
-                        <div id="payment-section">
-                            <p>Current payment method: <strong>{{ payment_method }}</strong></p>
-                            {% if charge_automatically %}
-                            <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
-                            <button id="update-card-button" class="stripe-button-el">
-                                <span id="update-card-button-span">Update card</span>
-                            </button>
-                            {% endif %}
+                        <div id="cardchange-error" class="alert alert-danger"></div>
+                        <div id="cardchange-input-section">
+                            <form id="cardchange-form">
+                                <p>Current payment method: <strong>{{ payment_method }}</strong></p>
+                                {% if charge_automatically %}
+                                <button id="update-card-button" class="stripe-button-el">
+                                    <span id="update-card-button-span">Update card</span>
+                                </button>
+                                {% endif %}
+                            </form>
                         </div>
-                        <div id="loading-section">
+                        <div id="cardchange-loading">
                             <div class="zulip-loading-logo">
                                 <svg 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)">
@@ -55,9 +58,9 @@
                                     </g>
                                 </svg>
                             </div>
-                            <div id="updating_card_indicator"></div>
+                            <div id="cardchange_loading_indicator"></div>
                         </div>
-                        <div id="card-updated-message" class="alert alert-success">
+                        <div id="cardchange-success" class="alert alert-success">
                             Card updated. The page will now reload.
                         </div>
                     </div>