Switch to new payment method endpoints
This commit is contained in:
+119
-39
@@ -15,7 +15,7 @@
|
||||
* along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import { settings, elements, apiGet, apiPost, parseParams, setupHeader, timeString } from "/global.js";
|
||||
import { settings, elements, apiDelete, apiGet, apiPost, parseParams, setupHeader, timeString } from "/global.js";
|
||||
|
||||
(function()
|
||||
{
|
||||
@@ -27,10 +27,9 @@ import { settings, elements, apiGet, apiPost, parseParams, setupHeader, timeStri
|
||||
elements.balancePositive = "balance-positive";
|
||||
elements.balanceStatus = "balance-status";
|
||||
elements.billingActivity = "billing-activity";
|
||||
elements.ccNumber = "cc-number";
|
||||
elements.ccDuration = "cc-duration";
|
||||
elements.ccExpire = "cc-expire";
|
||||
elements.current = "current";
|
||||
elements.defaultPrefix = "default-payment-";
|
||||
elements.deletePrefix = "delete-payment-";
|
||||
elements.email = "email";
|
||||
elements.gdpr = "gdpr";
|
||||
elements.gdprDate = "gdpr-date";
|
||||
@@ -41,6 +40,7 @@ import { settings, elements, apiGet, apiPost, parseParams, setupHeader, timeStri
|
||||
elements.managed = "managed";
|
||||
elements.managedButton = "managed-button";
|
||||
elements.pay = "pay";
|
||||
elements.paymentMethods = "payment-methods";
|
||||
elements.promotions = "promotions";
|
||||
elements.promotionsTable = "promotions-table";
|
||||
elements.uninvoiced = "uninvoiced";
|
||||
@@ -50,7 +50,8 @@ import { settings, elements, apiGet, apiPost, parseParams, setupHeader, timeStri
|
||||
var data = {};
|
||||
data.account = {};
|
||||
data.invoices = [];
|
||||
data.linodes = [];
|
||||
data.numLinodes = 0;
|
||||
data.paymentMethods = [];
|
||||
data.payments = [];
|
||||
|
||||
// Static references to UI elements
|
||||
@@ -60,9 +61,6 @@ import { settings, elements, apiGet, apiPost, parseParams, setupHeader, timeStri
|
||||
ui.balance = {};
|
||||
ui.balanceStatus = {};
|
||||
ui.billingActivity = {};
|
||||
ui.ccNumber = {};
|
||||
ui.ccDuration = {};
|
||||
ui.ccExpire = {};
|
||||
ui.current = {};
|
||||
ui.email = {};
|
||||
ui.gdpr = [];
|
||||
@@ -70,6 +68,7 @@ import { settings, elements, apiGet, apiPost, parseParams, setupHeader, timeStri
|
||||
ui.managed = {};
|
||||
ui.managedButton = {};
|
||||
ui.pay = {};
|
||||
ui.paymentMethods = {};
|
||||
ui.promotions = [];
|
||||
ui.promotionsTable = {};
|
||||
ui.uninvoiced = {};
|
||||
@@ -80,6 +79,78 @@ import { settings, elements, apiGet, apiPost, parseParams, setupHeader, timeStri
|
||||
state.haveInvoices = false;
|
||||
state.havePayments = false;
|
||||
|
||||
// Creates a row for the payment methods table
|
||||
var createMethodRow = function(method)
|
||||
{
|
||||
var typeNames = {
|
||||
"credit_card": "Credit Card",
|
||||
"google_pay": "Google Pay",
|
||||
"paypal": "PayPal"
|
||||
};
|
||||
|
||||
var row = document.createElement("tr");
|
||||
row.className = elements.lmcRowStandard;
|
||||
|
||||
var type = document.createElement("td");
|
||||
if (typeNames[method.type])
|
||||
type.innerHTML = typeNames[method.type];
|
||||
else
|
||||
type.innerHTML = method.type;
|
||||
row.appendChild(type);
|
||||
|
||||
var details = document.createElement("td");
|
||||
if (method.type == "credit_card" || method.type == "google_pay") {
|
||||
var ccInfo = document.createElement("span");
|
||||
ccInfo.innerHTML = method.data.card_type + " xxxxxxxxxxxx" + method.data.last_four + " Exp: " + method.data.expiry;
|
||||
var br = document.createElement("br");
|
||||
details.appendChild(ccInfo);
|
||||
details.appendChild(br);
|
||||
var monthYear = method.data.expiry.split("/");
|
||||
var expireDate = new Date(parseInt(monthYear[1]), parseInt(monthYear[0]), 0);
|
||||
var now = new Date();
|
||||
if (expireDate - now > 0) {
|
||||
var duration = document.createElement("span");
|
||||
duration.innerHTML = "Expires " + timeString(now - expireDate, true);
|
||||
details.appendChild(duration);
|
||||
} else {
|
||||
var expired = document.createElement("strong");
|
||||
expired.innerHTML = "Expired!";
|
||||
details.appendChild(expired);
|
||||
}
|
||||
} else if (method.type == "paypal") {
|
||||
var email = document.createElement("span");
|
||||
email.innerHTML = method.data.email;
|
||||
details.appendChild(email);
|
||||
}
|
||||
row.appendChild(details);
|
||||
|
||||
var options = document.createElement("td");
|
||||
if (method.is_default) {
|
||||
var defaultMsg = document.createElement("strong");
|
||||
defaultMsg.innerHTML = "This is the default payment method";
|
||||
options.appendChild(defaultMsg);
|
||||
} else {
|
||||
var defaultLink = document.createElement("a");
|
||||
defaultLink.id = elements.defaultPrefix + method.id;
|
||||
defaultLink.href = "#";
|
||||
defaultLink.innerHTML = "Make default";
|
||||
defaultLink.addEventListener("click", defaultMethod);
|
||||
var separator = document.createElement("span");
|
||||
separator.innerHTML = " | ";
|
||||
var deleteLink = document.createElement("a");
|
||||
deleteLink.id = elements.deletePrefix + method.id;
|
||||
deleteLink.href = "#";
|
||||
deleteLink.innerHTML = "Delete";
|
||||
deleteLink.addEventListener("click", deleteMethod);
|
||||
options.appendChild(defaultLink);
|
||||
options.appendChild(separator);
|
||||
options.appendChild(deleteLink);
|
||||
}
|
||||
row.appendChild(options);
|
||||
|
||||
return row;
|
||||
};
|
||||
|
||||
// Creates a row for the promotion table
|
||||
var createPromoRow = function(promo)
|
||||
{
|
||||
@@ -165,6 +236,32 @@ import { settings, elements, apiGet, apiPost, parseParams, setupHeader, timeStri
|
||||
return row;
|
||||
};
|
||||
|
||||
// Handler for making a payment method default
|
||||
var defaultMethod = function(event)
|
||||
{
|
||||
var id = event.currentTarget.id.slice(elements.defaultPrefix.length);
|
||||
if (!confirm("Make this the default payment method?"))
|
||||
return;
|
||||
|
||||
apiPost("/account/payment-methods/" + id + "/make-default", {}, function(response)
|
||||
{
|
||||
location.reload();
|
||||
});
|
||||
};
|
||||
|
||||
// Handler for deleting a payment method
|
||||
var deleteMethod = function(event)
|
||||
{
|
||||
var id = event.currentTarget.id.slice(elements.deletePrefix.length);
|
||||
if (!confirm("Delete this payment method?"))
|
||||
return;
|
||||
|
||||
apiDelete("/account/payment-methods/" + id, function(response)
|
||||
{
|
||||
location.reload();
|
||||
});
|
||||
};
|
||||
|
||||
// Callback for account details API call
|
||||
var displayAccount = function(response)
|
||||
{
|
||||
@@ -199,30 +296,6 @@ import { settings, elements, apiGet, apiPost, parseParams, setupHeader, timeStri
|
||||
// Email
|
||||
ui.email.innerHTML = data.account.email;
|
||||
|
||||
// CC info
|
||||
ui.ccNumber.innerHTML = data.account.credit_card.last_four;
|
||||
var expired = document.createElement("span");
|
||||
var strong = document.createElement("strong");
|
||||
strong.innerHTML = "Expired!";
|
||||
var dash = document.createElement("span");
|
||||
dash.innerHTML = " - ";
|
||||
var updateLink = document.createElement("a");
|
||||
updateLink.href = "/account/creditcard";
|
||||
updateLink.innerHTML = "update credit card";
|
||||
expired.appendChild(strong);
|
||||
expired.appendChild(dash);
|
||||
expired.appendChild(updateLink);
|
||||
if (data.account.credit_card.expiry) {
|
||||
ui.ccExpire.innerHTML = data.account.credit_card.expiry;
|
||||
var monthYear = data.account.credit_card.expiry.split("/");
|
||||
var expireDate = new Date(parseInt(monthYear[1]), parseInt(monthYear[0]), 0);
|
||||
var now = new Date();
|
||||
if (expireDate - now > 0)
|
||||
ui.ccDuration.innerHTML = "Expires " + timeString(now - expireDate, true);
|
||||
else
|
||||
ui.ccDuration.appendChild(expired);
|
||||
}
|
||||
|
||||
// Account balance
|
||||
if (data.account.balance == 0) {
|
||||
ui.balance.className = elements.balancePositive;
|
||||
@@ -275,15 +348,23 @@ import { settings, elements, apiGet, apiPost, parseParams, setupHeader, timeStri
|
||||
// Callback for linodes API call
|
||||
var displayLinodes = function(response)
|
||||
{
|
||||
data.linodes = data.linodes.concat(response.data);
|
||||
data.numLinodes = response.results;
|
||||
ui.managedButton.disabled = false;
|
||||
};
|
||||
|
||||
// Callback for payment methods API call
|
||||
var displayMethods = function(response)
|
||||
{
|
||||
data.paymentMethods = data.paymentMethods.concat(response.data);
|
||||
|
||||
// Request the next page if there are more
|
||||
if (response.page != response.pages) {
|
||||
apiGet("/linode/instances?page=" + (response.page + 1), displayLinodes, null);
|
||||
apiGet("/account/payment-methods?page=" + (response.page + 1), displayMethods, null);
|
||||
return;
|
||||
}
|
||||
|
||||
ui.managedButton.disabled = false;
|
||||
for (var i = 0; i < data.paymentMethods.length; i++)
|
||||
ui.paymentMethods.appendChild(createMethodRow(data.paymentMethods[i]));
|
||||
};
|
||||
|
||||
// Callback for payments API call
|
||||
@@ -333,7 +414,7 @@ import { settings, elements, apiGet, apiPost, parseParams, setupHeader, timeStri
|
||||
if (event.currentTarget.disabled)
|
||||
return;
|
||||
|
||||
if (!confirm("Linode Managed costs an additional $100/mo per Linode. This will increase your projected monthly bill by $" + (data.linodes.length * 100) + ". Are you sure?"))
|
||||
if (!confirm("Linode Managed costs an additional $100/mo per Linode. This will increase your projected monthly bill by $" + (data.numLinodes * 100) + ". Are you sure?"))
|
||||
return;
|
||||
|
||||
apiPost("/account/settings/managed-enable", {}, function(response)
|
||||
@@ -356,9 +437,6 @@ import { settings, elements, apiGet, apiPost, parseParams, setupHeader, timeStri
|
||||
ui.balance = document.getElementById(elements.balance);
|
||||
ui.balanceStatus = document.getElementById(elements.balanceStatus);
|
||||
ui.billingActivity = document.getElementById(elements.billingActivity);
|
||||
ui.ccNumber = document.getElementById(elements.ccNumber);
|
||||
ui.ccDuration = document.getElementById(elements.ccDuration);
|
||||
ui.ccExpire = document.getElementById(elements.ccExpire);
|
||||
ui.current = document.getElementById(elements.current);
|
||||
ui.email = document.getElementById(elements.email);
|
||||
ui.gdpr = document.getElementsByClassName(elements.gdpr);
|
||||
@@ -366,6 +444,7 @@ import { settings, elements, apiGet, apiPost, parseParams, setupHeader, timeStri
|
||||
ui.managed = document.getElementById(elements.managed);
|
||||
ui.managedButton = document.getElementById(elements.managedButton);
|
||||
ui.pay = document.getElementById(elements.pay);
|
||||
ui.paymentMethods = document.getElementById(elements.paymentMethods);
|
||||
ui.promotions = document.getElementsByClassName(elements.promotions);
|
||||
ui.promotionsTable = document.getElementById(elements.promotionsTable);
|
||||
ui.uninvoiced = document.getElementById(elements.uninvoiced);
|
||||
@@ -379,6 +458,7 @@ import { settings, elements, apiGet, apiPost, parseParams, setupHeader, timeStri
|
||||
apiGet("/account/settings", displaySettings, null);
|
||||
apiGet("/account/invoices", displayInvoices, null);
|
||||
apiGet("/account/payments", displayPayments, null);
|
||||
apiGet("/account/payment-methods", displayMethods, null);
|
||||
apiGet("/linode/instances", displayLinodes, null);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user