Collapse checkout to a single step/page (#776)

* Collapse checkout to a single step/page

* Remove leftover console.log statements

* Fix checkbox cart behavior

* Update README with Aperture instructions

* Update add-on descriptions

Author: brikis98

README.md

@@ -12,6 +12,7 @@ The fastest way to launch this site is to use [Docker](https://www.docker.com/).
 1. `git clone` this repo
 1. `docker-compose up`
 1. Go to `http://localhost:4000` to test
+1. If you are going to be testing the checkout flow, you must login to Aperture at: https://aperture.dogfood-stage.com/.
 
 The default Docker compose configuration supports hot-reloading of your local environment, meaning that as you edit files to change markup, text, images, etc, your local development server will pick up these changes and reload the latest version of the site for you. This makes it quick and convenient to develop on the site locally.
 
@@ -22,6 +23,7 @@ The default Docker compose configuration supports hot-reloading of your local en
 1. Just the first time: `bundle install`
 1. Start Jekyll server: `bundle exec jekyll serve --livereload`
 1. Go to `http://localhost:4000`
+1. If you are going to be testing the checkout flow, you must login to Aperture at: https://aperture.dogfood-stage.com/.
 
 ## Deploying
 

assets/css/pages/pricing.scss

@@ -110,3 +110,7 @@
     background-color: #06a2ff;
   }
 }
+
+#add-ons-table td {
+  padding: 0px 15px;
+}

assets/js/checkout.js

@@ -18,7 +18,7 @@ $(function () {
   // Note these are currently all Stripe TEST product Ids and need to be updated to
   // the live strip product IDs
 
-  const productToButtonNameMap = {
+  const productToCheckboxNameMap = {
     [products.AWS.stripeProductId]: products.AWS.key,
     [products.ProSupport.stripeProductId]: products.ProSupport.key,
     [products.RefArch.stripeProductId]: products.RefArch.key,
@@ -78,10 +78,10 @@ $(function () {
     if (rawCart) {
       const products = JSON.parse(rawCart);
       for (const product of products) {
-        const buttonName = productToButtonNameMap[product.productId];
+        const checkboxName = productToCheckboxNameMap[product.productId];
 
-        if (buttonName) {
-          $('.addon-button[name="' + buttonName + '"]').click();
+        if (checkboxName) {
+          $('.addon-checkbox[name="' + checkboxName + '"]').prop('checked', true).trigger("change");
         }
       }
     }
@@ -91,43 +91,20 @@ $(function () {
   }
 
   // Listen to Addon button clicks
-  $(".addon-button").on("click", function () {
+  $(".addon-checkbox").on("change", function () {
     var updateCheckoutOptions = {};
 
-    var actionType = $(this).data("addon-action-type");
     var productId = $(this).data("product-id");
+    var productKey = this.name;
 
-    // Process the add action and switch the addon button so user can clear their selection
-    function _handleAddAction(button) {
-      updateCheckoutOptions[button.name] = true;
-      $(button).text("Remove");
-      $(button).addClass("addon-remove-button");
-      $(button).data("addon-action-type", "Remove");
+    if (this.checked) {
+      updateCheckoutOptions[productKey] = true;
       _addToCart(productId);
-    }
-
-    // Process the remove action and switch the addon button so user can make a selection
-    function _handleRemoveAction(button) {
-      updateCheckoutOptions[button.name] = false;
-      $(button)
-        .text("Add to Subscription ")
-        .append(
-          "<i class='fa fa-angle-double-right fa-lg' aria-hidden='true'></i>"
-        );
-      $(button).removeClass("addon-remove-button");
-      $(button).data("addon-action-type", "Add");
+    } else {
+      updateCheckoutOptions[productKey] = false;
       _removeFromCart(productId);
     }
 
-    switch (actionType) {
-      case "Add":
-        _handleAddAction(this);
-        break;
-      case "Remove":
-        _handleRemoveAction(this);
-        break;
-      default: // Do nothing
-    }
     _updateCheckout(updateCheckoutOptions);
   });
 
@@ -158,70 +135,11 @@ $(function () {
   function _updateCheckout(newOptions) {
     checkoutOptions = Object.assign({}, checkoutOptions, newOptions);
 
-    _updateUI();
     _updatePrice();
   }
 
-  function _updateUI() {
-    var support = checkoutOptions.pro_support;
-    var refarch = checkoutOptions.setup_deployment;
-    var compliance = checkoutOptions.setup_compliance;
-
-    $(".grunty-sprite").attr("data-sprite", 0);
-    $("#subscription_type").val(checkoutOptions.subscription_type);
-
-    // updates addon switch
-    $("[data-switch]" + '[name="pro_support"]').prop("checked", support);
-    $("[data-switch]" + '[name="setup_deployment"]').prop("checked", refarch);
-    $("[data-switch]" + '[name="setup_compliance"]').prop(
-      "checked",
-      compliance
-    );
-
-    if (support) {
-      $(".grunty-sprite").attr("data-sprite", 2);
-      $("#subscription-addon-1").removeClass("check-list-disabled");
-    } else {
-      $("#subscription-addon-1").addClass("check-list-disabled");
-    }
-
-    if (refarch) {
-      $(".grunty-sprite").attr("data-sprite", 1);
-
-      $("#checkout-price-addon").show();
-      $("#checkout-price-addon--mobile").show().css("display", "block");
-      $(".checkout-price-view").addClass("move-up");
-
-      $("#subscription-addon-2").removeClass("check-list-disabled");
-    } else {
-      $("#checkout-price-addon").hide();
-      $("#checkout-price-addon--mobile").hide();
-      $(".checkout-price-view").removeClass("move-up");
-
-      $("#subscription-addon-2").addClass("check-list-disabled");
-    }
-
-    if (compliance) {
-      $("#subscription-addon-3").removeClass("check-list-disabled");
-
-      // Update Refarch texts to reflect CIS selection
-      $("#subscription-addon-3-text").text("CIS Reference Architecture");
-      $("#addon-text-refarch").text("CIS Reference Architecture");
-    } else {
-      $("#subscription-addon-3").addClass("check-list-disabled");
-
-      // Update Refarch texts to reflect CIS selection removal
-      $("#subscription-addon-3-text").text("Reference Architecture");
-      $("#addon-text-refarch").text("Reference Architecture");
-    }
-
-    if (support && refarch) {
-      $(".grunty-sprite").attr("data-sprite", 3);
-    }
-  }
-
   function _updatePrice() {
-    var monthlyTotal, dueNowTotal;
+    var monthlyTotal;
 
     switch (checkoutOptions.subscription_type) {
       case "standard":
@@ -244,18 +162,13 @@ $(function () {
       monthlyTotal += pricing.subscriptions.standard.cis_compliance_price.value;
     }
 
-    dueNowTotal = monthlyTotal;
-
     if (checkoutOptions.setup_deployment) {
-      dueNowTotal += 4950;
-      $("#due-monthly-block").show();
+      $('#js-one-time-total').show();
     } else {
-      // only show the monthly disclaimer when it differs from due now
-      $("#due-monthly-block").hide();
+      $("#js-one-time-total").hide();
     }
 
-    $("#due-now").text(dueNowTotal.toLocaleString());
-    $(".monthly-total").text(monthlyTotal.toLocaleString());
+    $("#js-monthly-total").text(monthlyTotal.toLocaleString());
   }
 
   _setDefaults();