KamaKAzii
5/23/2017 - 7:52 AM
wtf.js
// Partner pricing
var panelTemplateStr = "";
panelTemplateStr += "<li class='bp__price'>";
panelTemplateStr += "<h3 class='bp__name'></h3>";
panelTemplateStr += "<div class='bp__clients'></div>";
panelTemplateStr += "<div class='bp__value month'><span></span>";
panelTemplateStr += " <div class='bp__payment-frequency'>per month</div>";
panelTemplateStr += " <div class='bp__extra-users'>(+<span></span> per extra client)";
panelTemplateStr += " </div>";
panelTemplateStr += "</div>";
panelTemplateStr += "<div class='bp__value year'><span></span>";
panelTemplateStr += " <div class='bp__payment-frequency'>per month</div>";
panelTemplateStr += " <div class='bp__extra-users'>(+<span></span> per extra client)";
panelTemplateStr += " </div>";
panelTemplateStr += "</div>";
panelTemplateStr += "<a class='btn'></div>";
panelTemplateStr += "</li>";
if ($(".pricing.partners").length > 0) {
var commaFormat = function(n) { return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); }
var populatePricingMarkupFromPrices = function(prices, target, inclusive, yearly) {
$panels = $(".bp__prices." + target).empty();
$.each(prices, function(i, p) {
var $panel = $($.parseHTML(panelTemplateStr)[0]);
var $name = $panel.find(".bp__name");
var $clients = $panel.find(".bp__clients");
var $valueMonth = $panel.find(".bp__value.month > span");
var $valueYear = $panel.find(".bp__value.year > span");
var $paymentFrequency = $panel.find(".bp__payment-frequency");
var $extraUsers = $panel.find(".bp__extra-users");
var $extraUsersValue = $panel.find(".bp__extra-users > span");
var $btn = $panel.find(".btn");
$panel.addClass("bp__price").addClass(p.name.toLowerCase());
$name.html(p.name);
$clients.text(p.clientText);
if (yearly) { $(".bp__value.year").show(); $(".bp__value.month").hide(); }
else { $(".bp__value.year").hide(); $(".bp__value.month").show(); }
switch(p.name) {
case "Startup":
$valueMonth.text("Free");
$valueYear.text("Free");
$extraUsers.hide();
$paymentFrequency.hide();
$btn.text("Start now for free");
break;
case "contact-us":
$name.html("Need more?");
$clients.html("Get in contact<br>with us");
$extraUsers.hide();
$paymentFrequency.hide();
$btn.text("Contact us");
break;
default:
if (inclusive) {
$valueMonth.html("$" + commaFormat(p.valueMonth));
$valueYear.html("$" + commaFormat(p.valueYear));
}
// If gst exclusive, render with span for decimals as it's not a round number.
else {
var vm = p.valueMonth;
var vy = p.valueYear;
$valueMonth.empty().html($("<span>").html("$" + commaFormat(vm.substring(0, vm.length - 3))));
$valueMonth.append($("<span class='dec'>").html("." + vm.substring(vm.length - 2, vm.length)));
$valueYear.empty().html($("<span>").html("$" + commaFormat(vy.substring(0, vy.length - 3))));
$valueYear.append($("<span class='dec'>").html("." + vy.substring(vy.length - 2, vy.length)));
}
$extraUsersValue.text(parseFloat(p.extraPerClient).toFixed(2));
$btn.text("Register now");
}
$panels.append($panel);
});
};
var pricesFirstRow = [
{
name: "Startup",
clientText: "You + up to 4 clients",
valueMonth: 0,
valueYear: 0,
extraPerClient: 0
},
{
name: "Silver",
clientText: "5-10 clients",
valueMonth: 99,
valueYear: 89,
extraPerClient: 9.50
},
{
name: "Gold",
clientText: "11-40 clients",
valueMonth: 349,
valueYear: 299,
extraPerClient: 9.00
},
{
name: "Platinum",
clientText: "41-100 clients",
valueMonth: 799,
valueYear: 699,
extraPerClient: 8.50
}
];
var pricesSecondRow = [
{
name: "Professional",
clientText: "101-200 clients",
valueMonth: 1499,
valueYear: 1249,
extraPerClient: 8.00
},
{
name: "Enterprise",
clientText: "201-500 clients",
valueMonth: 3399,
valueYear: 2949,
extraPerClient: 7.50
},
{
name: "contact-us"
}
]
var inclusive = true
var yearly = true
var $periodToggle = $(".toggle.period");
var $periodToggleLabel = $(".toggle.period label");
var $gstToggle = $(".toggle.gst");
var $gstToggleLabel = $(".toggle.gst label");
populatePricingMarkupFromPrices(pricesFirstRow, "low-end", inclusive, yearly);
populatePricingMarkupFromPrices(pricesSecondRow, "high-end", inclusive, yearly);
$(".toggle.period").on("click", function() {
if (yearly) {
$periodToggle.removeClass("on");
$periodToggleLabel.html("Paying per <span>month</span>");
}
else {
$periodToggle.addClass("on");
$periodToggleLabel.html("Paying per <span>year</span>");
}
yearly = !yearly;
populatePricingMarkupFromPrices(pricesFirstRow, "low-end", inclusive, yearly);
populatePricingMarkupFromPrices(pricesSecondRow, "high-end", inclusive, yearly);
});
var convertGst = function(price, toGstInclusive, numberOfDec) {
result = 0;
if (toGstInclusive) {
result = (Math.round(price * 1.1 * 2) / 2).toFixed(numberOfDec);
}
else {
result = (Math.round(price / 1.1 * 2) / 2).toFixed(numberOfDec);
}
return result;
};
$(".toggle.gst").on("click", function() {
if (inclusive) {
$gstToggle.removeClass("on");
$.each(pricesFirstRow, function(i, p) {
p.valueMonth = convertGst(p.valueMonth, false, 2);
p.valueYear = convertGst(p.valueYear, false, 2);
p.extraPerClient = convertGst(p.extraPerClient, false, 2);
});
$.each(pricesSecondRow, function(i, p) {
p.valueMonth = convertGst(p.valueMonth, false, 2);
p.valueYear = convertGst(p.valueYear, false, 2);
p.extraPerClient = convertGst(p.extraPerClient, false, 2);
});
$gstToggleLabel.html("GST <span>exclusive</span>");
}
else {
$gstToggle.addClass("on");
$.each(pricesFirstRow, function(i, p) {
p.valueMonth = convertGst(p.valueMonth, true, 0);
p.valueYear = convertGst(p.valueYear, true, 0);
p.extraPerClient = convertGst(p.extraPerClient, true, 2);
});
$.each(pricesSecondRow, function(i, p) {
p.valueMonth = convertGst(p.valueMonth, true, 0);
p.valueYear = convertGst(p.valueYear, true, 0);
p.extraPerClient = convertGst(p.extraPerClient, true, 2);
});
$gstToggleLabel.html("GST <span>inclusive</span>");
}
inclusive = !inclusive;
populatePricingMarkupFromPrices(pricesFirstRow, "low-end", inclusive, yearly);
populatePricingMarkupFromPrices(pricesSecondRow, "high-end", inclusive, yearly);
});
var $needMoreLink = $(".bp__need-more-link");
var $pricesHighEnd = $(".bp__prices.high-end").hide();
$needMoreLink.on("click", function() {
$pricesHighEnd.fadeIn();
$(this).hide()
});
}