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()
    });
  }