Merge pull request #646 from gruntwork-io/apt-1373-recurly-checkout

[APT-1373] Switch from Chargebee to Recurly for checkout.

Author: josh-padnick

assets/css/global.scss

@@ -44,6 +44,9 @@ p + .btn {
     transform: translateY(-2px);
     box-shadow: 0 6px 9px rgba(0,0,0,.10), 0 2px 5px rgba(0,0,0,.07);
   }
+  max-width: 100%;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 .btn-link {
   box-shadow: none;
@@ -2319,11 +2322,14 @@ $play-button-height: 44px;
 }
 .checkout-panel-left {
   padding: 0px;
-  margin-right: 10px;
 
   @media (max-width: $screen-xs-max) {
     padding: 16px 8px;
   }
+
+  @media (min-width: $screen-sm-max) {
+    margin-right: 10px;
+  }
 }
 .checkout-panel-right {
   position: relative;

assets/css/pages/checkout.scss

@@ -19,8 +19,8 @@
 }
 
 .checkout-help-notification {
-  width: 103%;
-  margin-left: -.8em;
+  width: calc(100% + 30px);
+  margin-left: -15px;
 }
 
 #checkout-money-back {
@@ -36,15 +36,12 @@
 
     .sub-panel {
       background-color: #1D252F;
-      line-height: 1;
+      line-height: 1.4;
 
       .addon-amount {
         font-size: 25px;
         margin-top: 15px;
         font-weight: bold;
-        @media (max-width: $screen-sm-max) {
-          margin-top: 0px;
-        }
       }
       .addon-duration {
         margin-top: -25px;
@@ -81,20 +78,11 @@
   }
 }
 
-#checkout-btn-container {
-  @media (max-width: $screen-xs-max) {
-    height: 25px;
-  }
-  @media (min-width: $screen-sm-min) {
-    height: 52px;
-  }
-}
-
 #checkout-btn-container-beta {
   @media (max-width: $screen-xs-max) {
-    height: 41px;
+    margin: 0;
   }
   @media (min-width: $screen-sm-min) {
-    height: 52px;
+    margin: 1em 0;
   }
 }

assets/css/pages/pricing.scss

@@ -89,6 +89,12 @@
   margin-bottom: .6em;
 }
 
+@media (max-width: $screen-xs-max) {
+  .need-help-button {
+    margin: 2em;
+  }
+}
+
 .pricing-steps {
   display: flex;
   align-items: center;

assets/js/checkout.js

@@ -135,26 +135,32 @@ $(function () {
   function _updateCheckout(newOptions) {
     checkoutOptions = Object.assign({}, checkoutOptions, newOptions);
 
-    var enable_pro_support = checkoutOptions.pro_support;
-    var setup_deployment = checkoutOptions.setup_deployment;
-    var setup_compliance = checkoutOptions.setup_compliance;
+    _updateUI();
+    _updatePrice();
+    _updateCheckoutLink();
+  }
+
+  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', enable_pro_support);
-    $('[data-switch]' + '[name="setup_deployment"]').prop('checked', setup_deployment);
-    $('[data-switch]' + '[name="setup_compliance"]').prop('checked', setup_compliance);
+    $('[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 (enable_pro_support) {
+    if (support) {
       $('.grunty-sprite').attr('data-sprite', 2);
       $('#subscription-addon-1').removeClass('check-list-disabled');
     } else {
       $('#subscription-addon-1').addClass('check-list-disabled');
     }
 
-    if (setup_deployment) {
+    if (refarch) {
       $('.grunty-sprite').attr('data-sprite', 1);
 
       $('#checkout-price-addon').show();
@@ -170,7 +176,7 @@ $(function () {
       $('#subscription-addon-2').addClass('check-list-disabled');
     }
 
-    if (setup_compliance) {
+    if (compliance) {
       $('#subscription-addon-3').removeClass('check-list-disabled');
 
       // Update Refarch texts to reflect CIS selection
@@ -184,109 +190,92 @@ $(function () {
       $('#addon-text-refarch').text('Reference Architecture');
     }
 
-    if (checkoutOptions.pro_support && checkoutOptions.setup_deployment) {
+    if (support && refarch) {
       $('.grunty-sprite').attr('data-sprite', 3);
     }
-
-    _calculatePrice();
   }
 
-  function _calculatePrice() {
-    var total, subtotal, subscriptionTotal;
+  function _updatePrice() {
+    var monthlyTotal, dueNowTotal;
 
     switch (checkoutOptions.subscription_type) {
       case 'aws':
-        total = subtotal = pricing.subscriptions.aws.price.value;
+        monthlyTotal = pricing.subscriptions.aws.price.value;
         break;
       case 'gcp':
-        total = subtotal = pricing.subscriptions.gcp.price.value;
+        monthlyTotal = pricing.subscriptions.gcp.price.value;
         break;
       default: // do nothing
     }
 
     if (checkoutOptions.pro_support) {
       switch (checkoutOptions.subscription_type) {
         case 'aws':
-          total += subtotal = pricing.subscriptions.aws.pro_support_price.value;
+          monthlyTotal += pricing.subscriptions.aws.pro_support_price.value;
           break;
         case 'gcp':
-          total += subtotal = pricing.subscriptions.gcp.pro_support_price.value;
+          monthlyTotal += pricing.subscriptions.gcp.pro_support_price.value;
           break;
         default: // do nothing
       }
     }
 
+    // CIS Compliance is only on AWS for now
+    if (checkoutOptions.setup_compliance) {
+      monthlyTotal += pricing.subscriptions.aws.cis_compliance_price.value;
+    }
+
+    dueNowTotal = monthlyTotal;
+
     // Only AWS supports the Ref Arch
     if (checkoutOptions.setup_deployment) {
-      subscriptionTotal = subtotal;
-      //subtotal += 4950;
+      dueNowTotal += 4950;
+      $('#due-monthly-block').show();
+    } else {
+      // only show the monthly disclaimer when it differs from due now
+      $('#due-monthly-block').hide();
     }
 
-    // CIS Compliance is only on AWS for now
-    if (checkoutOptions.setup_compliance) {
-      total += subtotal = pricing.subscriptions.aws.cis_compliance_price.value;
+    $('#due-now').text(dueNowTotal.toLocaleString());
+    $('.monthly-total').text(monthlyTotal.toLocaleString());
+  }
+
+  // Update the Recurly checkout link URL
+  function _updateCheckoutLink() {
+    const type = checkoutOptions.subscription_type;
+    const support = checkoutOptions.pro_support;
+    const refarch = checkoutOptions.setup_deployment;
+    const compliance = checkoutOptions.setup_compliance;
+
+    var href = "https://gruntwork.recurly.com/subscribe/" + type + "-monthly?";
+
+    // We'll want to pass users when we switch from using the Recurly hosted payment
+    // page to our own, at which point we can re-enable the users add-on.
+
+    const addOns = { /*"users": 20*/ };
+    if (support) {
+      addOns["pro-support"] = 1;
+    }
+    if (refarch) {
+      addOns["ref-arch"] = 1;
+    }
+    if (compliance) {
+      addOns["cis-aws-foundations"] = 1;
     }
 
-    $('#subscription-price').text(total.toLocaleString());
-    $('#subscription-subtotal').text(subtotal.toLocaleString());
+    const params = {
+      theme: "modern",
+      add_on_code: Object.keys(addOns).toString(),
+      add_on_quantity: Object.values(addOns).toString(),
+    };
 
-    _deferCheckout(checkoutOptions.subscription_type,
-      checkoutOptions.pro_support,
-      checkoutOptions.setup_deployment,
-      checkoutOptions.setup_compliance);
-  }
+    sep = "";
+    for (const key in params) {
+      href += sep + key + "=" + params[key];
+      sep = "&";
+    }
 
-  // Prevents spamming Chargebee registerAgain on every change
-  function _deferCheckout(type, support, setup, compliance) {
-    var cbInstance;
-    if (typeof timeout !== 'undefined') clearTimeout(timeout);
-    $checkout.attr('disabled', true).text('Please wait...');
-
-    timeout = setTimeout(function () {
-      $checkout.attr('disabled', false).text('Checkout');
-      clearTimeout(timeout);
-      //_updateAttrs();
-      Chargebee.registerAgain();
-      cbInstance = Chargebee.getInstance();
-
-      function htmlEncode(value) {
-        if (value) {
-          return jQuery('<div />').text(value).html();
-        } else {
-          return '';
-        }
-      }
-      cbInstance.setCheckoutCallbacks(function (cart, product) {
-        var subscriptionDetails = ("Subscription type: " + type);
-        if (support) {
-          subscriptionDetails += " • Professional Support";
-        }
-        if (setup) {
-          subscriptionDetails += " • Reference Architecture";
-        }
-        if (compliance) {
-          subscriptionDetails += " • CIS";
-        }
-        //console.log(subscriptionDetails);
-        // you can define a custom callbacks based on cart object
-        var customer = {
-          cf_subscription_details: subscriptionDetails,
-          cf_website_version: "v1-static"
-        };
-
-        cart.setCustomer(customer);
-
-        return {
-          close: function () {
-            // Required to remove overflow set by the modal
-            // Same as: https://lodash.com/docs/4.17.10#debounce
-            setTimeout(function () {
-              $body.removeAttr('style');
-            }, 0);
-          }
-        }
-      });
-    }, 1250);
+    $("#recurly-checkout-btn").attr("href", href);
   }
 
   _updateCheckout();

pages/checkout/_checkout.html

@@ -11,7 +11,7 @@
           <span
             class="large-price visible-xs-inline large-price--mobile"
             style="white-space: nowrap;"
-            ><span>$</span><strong id="subscription-subtotal"></strong></span
+            ><span>$</span><strong class="monthly-total"></strong></span
           ><span
             class="small text-muted visible-xs-inline"
             style="white-space: nowrap;"
@@ -27,7 +27,7 @@
           >
           <div class="visible-sm-block visible-md-block visible-lg-block">
             <span class="large-price"
-              ><span>$</span><strong id="subscription-price"></strong></span
+              ><span>$</span><strong class="monthly-total"></strong></span
             >&nbsp; / month
             <p
               class="text-center"
@@ -151,23 +151,19 @@ <h5 class="margin-top-none text-center no-anchor">
         Annual Contract. Billed monthly.
       </p>
       <div id="checkout-btn-container-beta">
-        <p
+        <div
           class="small text-white text-bold margin-top-none text-center"
-          id="deposit-due"
           style="margin-bottom: 0"
         >
-          Deposit Due<span class="hide-on-tiny"> Today</span>: $500
-        </p>
+          <div>
+            Due<span class="hide-on-tiny"> Today</span>: $<span id="due-now">500</span>
+          </div>
+          <div id="due-monthly-block" class="hidden-xs text-muted">
+            Then just $<span class="monthly-total"></span><span class="small" style="white-space: nowrap;">&nbsp;/ month</span>
+          </div>
+        </div>
       </div>
-      <button
-        id="checkout-btn"
-        type="button"
-        class="btn btn-info btn-block btn-checkout"
-        data-cb-type="checkout"
-        data-cb-plan-id="chargebee-subscription"
-      >
-        Checkout
-      </button>
+      <a id="recurly-checkout-btn" class="btn btn-info btn-block btn-checkout" href="https://gruntwork.recurly.com/subscribe/aws-monthly?theme=modern">Checkout</a>
       <p>
         <a
           id="checkout-contact-btn"