gistfile1.js

define([
  "jquery",
  "backstretch",
  "plugins/hero",
  "plugins/panel",
  "validate",
  "additional-validation",
  "creditcard-validator"
], function($, Backstretch, Hero, Panel, validate, additionalValidation, creditCardValidator){


  /**
   * The constructor of our template, mostly just initing some values
   */
  var CheckoutTemplate = function(){

    // Init'ing some values for our top selection criteria
    this.locationName = false;
    this.distributionType = false;

    // has the intial scroll happened after we went through that form?
    this.hasPerformedInitialScroll = false;

    // caching some vars
    this.$loader = $(".submit-button-container").find("span");

  };



  /**
   * Getting the ball rolling and initing a few different things
   * @return {void}
   */
  CheckoutTemplate.prototype.init = function(){

    var self = this;

    // init heros
    var hero = new Hero();
    hero.init();

    //init panel
    var panel = new Panel(".crustomers-container");
    panel.init();

    // init various dropdowns
    $(".hidden-dropdown").on({
      change: function(){
        var val = $(this).val();
        var text = $("option[value='"+val+"']").html();
        $(this).parent().find(".select-text").empty().html(text);
      }
    });

    // init our Distribution and Delviery form stuff
    this.initLocationAndDelivery();

    // init card icon toggling
    $('#payment_card_no').validateCreditCard(function(result){

      $(".cc.is-active").removeClass("is-active");

      if(result.card_type !== null){
        self.activateCardIcon(result.card_type);
      }
    });

    // init the actual form
    this.initForm();

  };


  /**
   * the toggling of our credit card stuff
   * @param  {string} cardType The card that was matched
   * @return {void}
   */
  CheckoutTemplate.prototype.activateCardIcon = function(cardType){

    switch(cardType.name){
      case "visa":
        $(".cc.visa").addClass("is-active");
      break;
      case "mastercard":
        $(".cc.mastercard").addClass("is-active");
      break;
      case "discover":
        $(".cc.discover").addClass("is-active");
      break;
      case "amex":
        $(".cc.amex").addClass("is-active");
      break;
      default:
      break;
    }

  }

  CheckoutTemplate.prototype.initForm = function(){

    var self = this;

    // Hide shipping address fields
    if( $(".address-secondary").is(':checked')) {
      $(".delivery-form").hide();
    }



    // Toggle shippping address
    $(".address-secondary").click(function() {
      if( $(this).is(':checked')) {
          $(".delivery-form").hide();
      } else {
          $(".delivery-form").show();
      }
    });




    // Getting Stripe Script
    console.log(window.environment);

    $.getScript('https://js.stripe.com/v2/', function() {
      if(window.environment === "production"){
        Stripe.setPublishableKey("pk_live_uWE4IhljgsTvB15vabn8HHUu");
      }else{
        Stripe.setPublishableKey("pk_test_nsrjxpFtdvynGlEMZYMCrRES");
      }
    });



    // Our huge form validation
    $("#store-checkout-form").validate({

      debug: true,

      submitHandler: function(form){

        if(!self.formSubmitted){
          self.disableForm();
          self.createStripeToken(form);
        }

        return false;

      },

      errorPlacement: function(error, element) {

        error.insertAfter(element);

      },

      rules: {

        billing_name: {
          required: true
        },

        order_email: {
          required: true,
          email: true
        },

        billing_address1: {
          required: true
        },

        billing_address2: {
          required: false
        },

        billing_city: {
          required: true
        },

        billing_state: {
          required: true
        },

        billing_postcode: {
          required: true,
          zipcodeUS: true
        },

        shipping_name: {
          required: function(){
            $("#shipping_same_as_billing").is(":checked");
          }
        },

        shipping_address1: {
          required: function(){
            $("#shipping_same_as_billing").is(":checked");
          }
        },

        shipping_address2: {
          required: function(){
            return false;
          }
        },

        shipping_city: {
          required: function(){
            $("#shipping_same_as_billing").is(":checked");
          }
        },

        shipping_state: {
          required: function(){
            $("#shipping_same_as_billing").is(":checked");
          }
        },

        shipping_postcode: {
          required: function(){
            $("#shipping_same_as_billing").is(":checked");
          },
          zipcodeUS: true
        },

        payment_name: {
          required: true
        },

        payment_card_no: {
          required: true,
          creditcard: true
        },

        payment_exp_month: {
          required: true,
          number: true
        },

        payment_exp_year: {
          required: true,
          number: true
        },

        payment_card_csc: {
          required: true,
          number: true
        }

      }

    });

  };


  /**
   * Init'ing the top form item animations
   * @return {void} [description]
   */
  CheckoutTemplate.prototype.initLocationAndDelivery = function(){

    var self = this;

    $(".pickup-delivery-button").on({
      click: function(){
        if($(this).attr("id").indexOf("pickup") > -1){
          self.setDistribution("pickup");
        }else{
          self.setDistribution("delivery");
        }

        $(".pickup-delivery-row-container").toggleClass("showing-location");
      }
    });

    $(".location-button").on({
      click: function(){

        var $el = $(this);

        if($el.hasClass("is-active")){
          return;
        }

        $(".location-button").removeClass("is-active");
        $el.addClass("is-active");

        if($el.attr("id").indexOf("wrigleyville") > -1){
          self.setLocation("wrigleyville");
        }else{
          self.setLocation("six corners");
        }

      }
    });

    $("#back-to-delivery-method").on({
      click: function(){
        $(".pickup-delivery-row-container").toggleClass("showing-location");
      }
    })

  };



  /**
   * Creating our stripe token for processing
   * @param  {htmlObj} form form html el
   * @return {void}
   */
  CheckoutTemplate.prototype.createStripeToken = function(form){

    var self = this;

    var fields = {};
    var fieldsArr = $(form).serializeArray();
    $.each(fieldsArr, function(i, field){
      fields[field["name"]] = field["value"];
    });

    Stripe.createToken({
      name: fields["payment_name"],
      number: fields["payment_card_no"],
      cvc: fields["payment_card_csc"],
      exp_month: fields["payment_exp_month"],
      exp_year: fields["payment_exp_year"]
    }, function(status, response){

      if(!response.error){

        // prep for submission, and submit
        self.hideErrorMessage();
        self.clearPaymentInputNames();
        $("#payment_token").val(response["id"]);

        console.log(response);
        form.submit();

      }else{

        // alert user of error
        self.showErrorMessage(response.error.message);
        self.enableForm();

      }

    });

  };


  /**
   * Clearing out payment fields before we submit the form, so we don't submit them
   * in the form
   * @return {void}
   */
  CheckoutTemplate.prototype.clearPaymentInputNames = function(){

    $("#payment_name").attr("name", "");
    $("#payment_card_no").attr("name", "");
    $("#payment_card_csc").attr("name", "");
    $("#payment_exp_year").attr("name", "");
    $("#payment_exp_month").attr("name", "");

  };


  /**
   * Showing a payment error message -- returned from stripe when creating a token
   * @param  {message} message The message to be shown
   * @return {void}
   */
  CheckoutTemplate.prototype.showErrorMessage = function(message){
    $(".form-error-message").show();
    $(".form-error-message").find("p").html(message);
  };


  /**
   * Hiding the form's big error message up top
   */
  CheckoutTemplate.prototype.hideErrorMessage = function(){
    $(".form-error-message").hide();
  };


  /**
   * Setting the type of distribution we are using
   * @param {string} type
   */
  CheckoutTemplate.prototype.setDistribution = function(type){
    this.distributionType = type;
    $("#location-input").val(type);
    this.setCaption();
  };


  /**
   * Setting our location
   * @param {string} locationName
   */
  CheckoutTemplate.prototype.setLocation = function(locationName){

    this.locationName = locationName;
    $("#location-input").val(locationName);

    this.setCaption();

    if(this.hasPerformedInitialScroll === false){
      this.hasPerformedInitialScroll = true;

      var top = $(".payment-title").offset().top - 50;

      $("html, body").animate({ scrollTop: top });
    }

  };


  /**
   * Disabling the form after a user has submitted
   * @return {void}
   */
  CheckoutTemplate.prototype.disableForm = function(){

    this.$loader.show();
    this.formSubmitted = true;

  };


  /**
   * Enabling the form
   * @return {void}
   */
  CheckoutTemplate.prototype.enableForm = function(){

    this.$loader.hide();
    this.formSubmitted = false;

  };


  /**
   * Setting the Distribution and Loation caption above the order review section
   * of the payment form
   */
  CheckoutTemplate.prototype.setCaption = function(){

    var caption = "";

    if(this.distributionType === "delivery"){
      caption += "I'm having my order delivered ";
    }else{
      caption += "I'm picking up my order ";
    }

    if(this.locationName){
      if(this.locationName.toLowerCase() === "wrigleyville"){
        caption += "from Dimo's Wrigleyville."
      }else if(this.locationName.toLowerCase() === "six corners"){
        caption += "from Dimo's Six Corners."
      }
    }

    $(".delivery-caption").html(caption);

  };

  return CheckoutTemplate;

});