paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-04 14:03:30 +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',
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);
},
});

16
static/styles/billing.scss
View File

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

13
templates/corporate/billing.html
View File

@@ -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">
<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 %}
<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 %}
</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>