468 lines
15 KiB
JavaScript
468 lines
15 KiB
JavaScript
/*
|
|
* This file is part of Linode Manager Classic.
|
|
*
|
|
* Linode Manager Classic is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU General Public License as published by
|
|
* the Free Software Foundation, either version 3 of the License, or
|
|
* (at your option) any later version.
|
|
*
|
|
* Linode Manager Classic is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU General Public License
|
|
* along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
|
|
*/
|
|
|
|
import { settings, elements, apiDelete, apiGet, apiPost, parseParams, setupHeader, timeString } from "/global.js";
|
|
|
|
(function()
|
|
{
|
|
// Element names specific to this page
|
|
elements.active = "active";
|
|
elements.address = "address";
|
|
elements.balance = "balance";
|
|
elements.balanceNegative = "balance-negative";
|
|
elements.balancePositive = "balance-positive";
|
|
elements.balanceStatus = "balance-status";
|
|
elements.billingActivity = "billing-activity";
|
|
elements.current = "current";
|
|
elements.defaultPrefix = "default-payment-";
|
|
elements.deletePrefix = "delete-payment-";
|
|
elements.email = "email";
|
|
elements.gdpr = "gdpr";
|
|
elements.gdprDate = "gdpr-date";
|
|
elements.info = "info";
|
|
elements.lmcRow = "lmc-tr1";
|
|
elements.lmcRowAlt = "lmc-tr2";
|
|
elements.lmcRowStandard = "lmc-tr3";
|
|
elements.managed = "managed";
|
|
elements.managedButton = "managed-button";
|
|
elements.pay = "pay";
|
|
elements.paymentMethods = "payment-methods";
|
|
elements.promotions = "promotions";
|
|
elements.promotionsTable = "promotions-table";
|
|
elements.uninvoiced = "uninvoiced";
|
|
elements.uninvoicedBalance = "uninvoiced-balance";
|
|
|
|
// Data received from API calls
|
|
var data = {};
|
|
data.account = {};
|
|
data.invoices = [];
|
|
data.numLinodes = 0;
|
|
data.paymentMethods = [];
|
|
data.payments = [];
|
|
|
|
// Static references to UI elements
|
|
var ui = {};
|
|
ui.active = {};
|
|
ui.address = {};
|
|
ui.balance = {};
|
|
ui.balanceStatus = {};
|
|
ui.billingActivity = {};
|
|
ui.current = {};
|
|
ui.email = {};
|
|
ui.gdpr = [];
|
|
ui.gdprDate = {};
|
|
ui.managed = {};
|
|
ui.managedButton = {};
|
|
ui.pay = {};
|
|
ui.paymentMethods = {};
|
|
ui.promotions = [];
|
|
ui.promotionsTable = {};
|
|
ui.uninvoiced = {};
|
|
ui.uninvoicedBalance = {};
|
|
|
|
// Temporary state
|
|
var state = {};
|
|
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)
|
|
{
|
|
var row = document.createElement("tr");
|
|
row.className = elements.lmcRowStandard;
|
|
|
|
var name = document.createElement("td");
|
|
name.innerHTML = promo.summary;
|
|
row.appendChild(name);
|
|
|
|
var details = document.createElement("td");
|
|
var line1 = document.createElement("span");
|
|
var expire = new Date(promo.expire_dt + "Z");
|
|
line1.innerHTML = "$" + promo.credit_remaining + " remaining. Exp: " + expire.toLocaleDateString();
|
|
var br = document.createElement("br");
|
|
var line2 = document.createElement("span");
|
|
line2.innerHTML = "($" + promo.this_month_credit_remaining + " remaining this month. Monthly cap: $" + promo.credit_monthly_cap + ")";
|
|
details.appendChild(line1);
|
|
details.appendChild(br);
|
|
details.appendChild(line2);
|
|
row.appendChild(details);
|
|
|
|
var description = document.createElement("td");
|
|
description.className = elements.info;
|
|
description.innerHTML = promo.description;
|
|
row.appendChild(description);
|
|
|
|
return row;
|
|
};
|
|
|
|
// Creates a row for the recent activity table
|
|
var createRecentRow = function(recent, alt)
|
|
{
|
|
var row = document.createElement("tr");
|
|
if (alt)
|
|
row.className = elements.lmcRowAlt;
|
|
else
|
|
row.className = elements.lmcRow;
|
|
|
|
var dateCell = document.createElement("td");
|
|
var date = document.createElement("span");
|
|
var recentDate = new Date(recent.date + "Z");
|
|
var now = new Date();
|
|
date.innerHTML = recentDate.toLocaleDateString();
|
|
var br = document.createElement("br");
|
|
var ago = document.createElement("span");
|
|
ago.className = elements.info;
|
|
ago.innerHTML = timeString(now - recentDate, true);
|
|
dateCell.appendChild(date);
|
|
dateCell.appendChild(br);
|
|
dateCell.appendChild(ago);
|
|
row.appendChild(dateCell);
|
|
|
|
if (recent.label) {
|
|
// Invoice stuff
|
|
var linkCell = document.createElement("td");
|
|
var link = document.createElement("a");
|
|
link.href = "/account/invoice?iid=" + recent.id;
|
|
link.innerHTML = recent.label;
|
|
linkCell.appendChild(link);
|
|
row.appendChild(linkCell);
|
|
|
|
var total = document.createElement("td");
|
|
if (recent.total < 0)
|
|
total.innerHTML = "($" + (-recent.total).toFixed(2) + ")";
|
|
else
|
|
total.innerHTML = "$" + recent.total.toFixed(2);
|
|
row.appendChild(total);
|
|
} else {
|
|
// Payment stuff
|
|
var thanks = document.createElement("td");
|
|
thanks.innerHTML = "Payment. Thank you";
|
|
row.appendChild(thanks);
|
|
|
|
var total = document.createElement("td");
|
|
if (total > 0)
|
|
total.innerHTML = "($" + recent.total.toFixed(2) + ")";
|
|
else
|
|
total.innerHTML = "$" + (-recent.total).toFixed(2);
|
|
row.appendChild(total);
|
|
}
|
|
|
|
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)
|
|
{
|
|
data.account = response;
|
|
|
|
// Contact info
|
|
var br = document.createElement("br");
|
|
if (data.account.company.length) {
|
|
var company = document.createElement("span");
|
|
company.innerHTML = data.account.company;
|
|
ui.address.appendChild(company);
|
|
ui.address.appendChild(br);
|
|
}
|
|
var name = document.createElement("span");
|
|
name.innerHTML = data.account.first_name + " " + data.account.last_name;
|
|
ui.address.appendChild(name);
|
|
ui.address.appendChild(br.cloneNode(true));
|
|
var address1 = document.createElement("span");
|
|
address1.innerHTML = data.account.address_1;
|
|
ui.address.appendChild(address1);
|
|
ui.address.appendChild(br.cloneNode(true));
|
|
if (data.account.address_2.length) {
|
|
var address2 = document.createElement("span");
|
|
address2.innerHTML = data.account.address_2;
|
|
ui.address.appendChild(address2);
|
|
ui.address.appendChild(br.cloneNode(true));
|
|
}
|
|
var address3 = document.createElement("span");
|
|
address3.innerHTML = data.account.city + ", " + data.account.state + " " + data.account.zip;
|
|
ui.address.appendChild(address3);
|
|
|
|
// Email
|
|
ui.email.innerHTML = data.account.email;
|
|
|
|
// Account balance
|
|
if (data.account.balance == 0) {
|
|
ui.balance.className = elements.balancePositive;
|
|
ui.current.innerHTML = "Your account is current.";
|
|
} else if (data.account.balance < 0) {
|
|
ui.balance.className = elements.balancePositive;
|
|
ui.balanceStatus.innerHTML = " credit";
|
|
ui.current.innerHTML = "This will be applied towards future invoices.";
|
|
data.account.balance = -data.account.balance;
|
|
} else {
|
|
ui.balance.className = elements.balanceNegative;
|
|
ui.balanceStatus.innerHTML = " due ";
|
|
ui.pay.href += "?amount=" + (-data.account.balance);
|
|
ui.pay.style.display = "initial";
|
|
ui.current.innerHTML = "Please pay now to avoid any service interruptions.";
|
|
}
|
|
ui.balance.innerHTML = "$" + data.account.balance.toFixed(2);
|
|
ui.uninvoicedBalance.innerHTML = "$" + data.account.balance_uninvoiced.toFixed(2);
|
|
if (data.account.balance_uninvoiced > 0)
|
|
ui.uninvoiced.style.display = "table-row";
|
|
|
|
// Promotions
|
|
if (data.account.active_promotions.length) {
|
|
for (var i = 0; i < ui.promotions.length; i++)
|
|
ui.promotions[i].style.display = "table-row-group";
|
|
}
|
|
for (var i = 0; i < data.account.active_promotions.length; i++)
|
|
ui.promotionsTable.appendChild(createPromoRow(data.account.active_promotions[i]));
|
|
|
|
var active = new Date(data.account.active_since + "Z");
|
|
ui.active.innerHTML = active.toLocaleDateString();
|
|
};
|
|
|
|
// Callback for invoices API call
|
|
var displayInvoices = function(response)
|
|
{
|
|
data.invoices = data.invoices.concat(response.data);
|
|
|
|
// Request the next page if there are more
|
|
if (response.page != response.pages) {
|
|
apiGet("/account/invoices?page=" + (response.page + 1), displayInvoices, null);
|
|
return;
|
|
}
|
|
|
|
state.haveInvoices = true;
|
|
if (state.havePayments)
|
|
displayRecent();
|
|
};
|
|
|
|
// Callback for linodes API call
|
|
var displayLinodes = function(response)
|
|
{
|
|
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("/account/payment-methods?page=" + (response.page + 1), displayMethods, null);
|
|
return;
|
|
}
|
|
|
|
for (var i = 0; i < data.paymentMethods.length; i++)
|
|
ui.paymentMethods.appendChild(createMethodRow(data.paymentMethods[i]));
|
|
};
|
|
|
|
// Callback for payments API call
|
|
var displayPayments = function(response)
|
|
{
|
|
data.payments = data.payments.concat(response.data);
|
|
|
|
// Request the next page if there are more
|
|
if (response.page != response.pages) {
|
|
apiGet("/account/payments?page=" + (response.page + 1), displayPayments, null);
|
|
return;
|
|
}
|
|
|
|
state.havePayments = true;
|
|
if (state.haveInvoices)
|
|
displayRecent();
|
|
};
|
|
|
|
// Populates table with recent invoices and payments
|
|
var displayRecent = function()
|
|
{
|
|
// Combine to single array and sort by date
|
|
var recent = data.invoices.concat(data.payments);
|
|
recent.sort(function(a, b)
|
|
{
|
|
var aDate = new Date(a.date + "Z");
|
|
var bDate = new Date(b.date + "Z");
|
|
return aDate - bDate;
|
|
});
|
|
|
|
// Insert items into table
|
|
for (var i = recent.length - 1, count = 0; i >= 0, count < 4; i--, count++)
|
|
ui.billingActivity.appendChild(createRecentRow(recent[i], ui.billingActivity.children.length % 2));
|
|
};
|
|
|
|
// Callback for account settings API call
|
|
var displaySettings = function(response)
|
|
{
|
|
// Show managed signup if not managed
|
|
if (!response.managed)
|
|
ui.managed.style.display = "table";
|
|
};
|
|
|
|
// Click handler for managed button
|
|
var handleManaged = function(event)
|
|
{
|
|
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.numLinodes * 100) + ". Are you sure?"))
|
|
return;
|
|
|
|
apiPost("/account/settings/managed-enable", {}, function(response)
|
|
{
|
|
location.reload();
|
|
});
|
|
};
|
|
|
|
// Initial setup
|
|
var setup = function()
|
|
{
|
|
// Parse URL parameters
|
|
data.params = parseParams();
|
|
|
|
setupHeader();
|
|
|
|
// Get element references
|
|
ui.active = document.getElementById(elements.active);
|
|
ui.address = document.getElementById(elements.address);
|
|
ui.balance = document.getElementById(elements.balance);
|
|
ui.balanceStatus = document.getElementById(elements.balanceStatus);
|
|
ui.billingActivity = document.getElementById(elements.billingActivity);
|
|
ui.current = document.getElementById(elements.current);
|
|
ui.email = document.getElementById(elements.email);
|
|
ui.gdpr = document.getElementsByClassName(elements.gdpr);
|
|
ui.gdprDate = document.getElementById(elements.gdprDate);
|
|
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);
|
|
ui.uninvoicedBalance = document.getElementById(elements.uninvoicedBalance);
|
|
|
|
// Register event handlers
|
|
ui.managedButton.addEventListener("click", handleManaged);
|
|
|
|
// Get data from API
|
|
apiGet("/account", displayAccount, null);
|
|
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);
|
|
};
|
|
|
|
// Attach onload handler
|
|
window.addEventListener("load", setup);
|
|
})();
|