paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-06 06:53:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

billing: Make card change use create_ajax_request.

Browse Source
This commit is contained in:
Vishnu Ks
2018-12-26 11:35:47 +00:00
committed by Rishi Gupta
parent 41fbc699ad
commit 806fa1a834
3 changed files with 22 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
static/js/billing/billing.js
View File

@@ -70,25 +70,7 @@ $(function () {
image: '/static/images/logo/zulip-icon-128x128.png', image: '/static/images/logo/zulip-icon-128x128.png',
locale: 'auto', locale: 'auto',
token: function (stripe_token) { token: function (stripe_token) {
loading.make_indicator($('#updating_card_indicator'), create_ajax_request("/json/billing/sources/change", "cardchange", stripe_token = stripe_token);
{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);
},
});
}, },
}); });

16
static/styles/billing.scss
View File

@@ -175,7 +175,7 @@
display: none; display: none;
} }
#loading-section, #cardchange-loading,
#invoice-loading, #invoice-loading,
#autopay-loading { #autopay-loading {
display: none; display: none;
@@ -184,13 +184,14 @@
} }
#card-updated-message, #cardchange-success,
#invoice-success, #invoice-success,
#autopay-success { #autopay-success {
text-align: center; text-align: center;
display: none; display: none;
} }
#cardchange-error,
#invoice-error, #invoice-error,
#autopay-error { #autopay-error {
text-align: center; text-align: center;
@@ -218,24 +219,20 @@
stroke: hsl(0, 0%, 100%); stroke: hsl(0, 0%, 100%);
} }
#updating_card_indicator, #cardchange_loading_indicator,
#invoice_loading_indicator, #invoice_loading_indicator,
#autopay_loading_indicator { #autopay_loading_indicator {
margin: 10px auto; margin: 10px auto;
} }
#updating_card_indicator .loading_indicator_text { #cardchange_loading_indicator_box_container,
margin-left: -75px;
}
#updating_card_indicator_box_container,
#invoice_loading_indicator_box_container, #invoice_loading_indicator_box_container,
#autopay_loading_indicator_box_container { #autopay_loading_indicator_box_container {
position: absolute; position: absolute;
left: 50%; left: 50%;
} }
#updating_card_indicator_box, #cardchange_loading_indicator_box,
#invoice_loading_indicator_box, #invoice_loading_indicator_box,
#autopay_loading_indicator_box { #autopay_loading_indicator_box {
position: relative; position: relative;
@@ -247,6 +244,7 @@
border-radius: 6px; border-radius: 6px;
} }
#cardchange_loading_indicator .loading_indicator_text,
#invoice_loading_indicator .loading_indicator_text, #invoice_loading_indicator .loading_indicator_text,
#autopay_loading_indicator .loading_indicator_text { #autopay_loading_indicator .loading_indicator_text {
margin-left: -115px; margin-left: -115px;

25
templates/corporate/billing.html
View File

@@ -27,6 +27,7 @@
<li><a data-toggle="tab" href="#payment-method">Payment Method</a></li> <li><a data-toggle="tab" href="#payment-method">Payment Method</a></li>
</ul> </ul>
<input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
<div class="tab-content"> <div class="tab-content">
<div class="tab-pane active" id="overview"> <div class="tab-pane active" id="overview">
<p>Your current plan is <strong>{{ plan_name }}</strong>.</p> <p>Your current plan is <strong>{{ plan_name }}</strong>.</p>
@@ -37,16 +38,18 @@
</p> </p>
</div> </div>
<div class="tab-pane" id="payment-method" data-email="{{stripe_email}}" data-key="{{publishable_key}}"> <div class="tab-pane" id="payment-method" data-email="{{stripe_email}}" data-key="{{publishable_key}}">
<div id="payment-section"> <div id="cardchange-error" class="alert alert-danger"></div>
<p>Current payment method: <strong>{{ payment_method }}</strong></p> <div id="cardchange-input-section">
{% if charge_automatically %} <form id="cardchange-form">
<input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}"> <p>Current payment method: <strong>{{ payment_method }}</strong></p>
<button id="update-card-button" class="stripe-button-el"> {% if charge_automatically %}
<span id="update-card-button-span">Update card</span> <button id="update-card-button" class="stripe-button-el">
</button> <span id="update-card-button-span">Update card</span>
{% endif %} </button>
{% endif %}
</form>
</div> </div>
<div id="loading-section"> <div id="cardchange-loading">
<div class="zulip-loading-logo"> <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"> <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)"> <g transform="translate(-297.14285,-466.64792)">
@@ -55,9 +58,9 @@
</g> </g>
</svg> </svg>
</div> </div>
<div id="updating_card_indicator"></div> <div id="cardchange_loading_indicator"></div>
</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. Card updated. The page will now reload.
</div> </div>
</div> </div>