Hero Spark JavaScript OOP

herospark.js

heroSpark = {

  // URL da API Hero Spark
  urlApi: "https://core.myedools.com/funnels/85400/stages/316334/lead_stages/update_lead_status",


  // URL da API WordPress
  urlApiExternal: "https://SeuWordPress.com.br/wp-admin/admin-ajax.php",


  // Dados para enviar ao WordPress
  dataExternal: {
      demoId: 0,
      leadName: "",
      leadEmail: "",
      leadPhone: 0
  },


  /**
   * Um simples "hack" (aka POG) 
   * pra usar os dados na página seguinte
   * 
   * Minha página de agradecimento precisa 
   * receber dados da API existente no meu 
   * site então, isso é necessário
   **/
  setFrontEndData: function(){

    // definindo os dados para utilizar na pagina seguinte
    if( this.dataExternal.leadName != "" ){
      localStorage.setItem( "leadName", this.dataExternal.leadName );
    }

    if( this.dataExternal.leadEmail != "" ){
      localStorage.setItem( "leadEmail", this.dataExternal.leadEmail );
    }

    if( this.dataExternal.demoId != "" ){
      localStorage.setItem( "demoId", this.dataExternal.demoId );
    }

    if( this.dataExternal.demoUrl != "" ){
      localStorage.setItem( "demoId", this.dataExternal.demoUrl );
    }
  },



  // Definindo a captura do formulário
  setCaptureForm: function(){

    var forms = document.getElementsByTagName("form");

    Array.from(forms).forEach(form => {

      form.onsubmit = function (ev) {
        ev.preventDefault();

        var update_lead_url = heroSpark.urlApi + "?lead_action=capture";

        var body_params = {};

        var inputs = ev.target.getElementsByTagName("input");

        body_params["email"] = inputs.namedItem("email").value;

        if (inputs.namedItem("name"))
          body_params["name"] = inputs.namedItem("name").value;

        if (inputs.namedItem("phone"))
          body_params["phone"] = inputs.namedItem("phone").value;



        fetch(update_lead_url, {
          method: "POST",
          body: JSON.stringify(body_params),
          headers: {
            "Accept": "application/json",
            "Content-Type": "application/json"
          }
        }).then((resp) => {
          return resp.json();
        }).then((body) => {


            // hook
            heroSpark.dataExternal.demoId = 2036;
            heroSpark.dataExternal.leadEmail = body_params["email"];
            heroSpark.dataExternal.leadName = body_params["name"];
            heroSpark.dataExternal.leadPhone = body_params["phone"];
            heroSpark.setCaptureExternal();


            // JS herospark
            console.log(body);
            window.location = body.next_url;
        }).catch((error) => {
          console.error(error);
        });
      };
    });

  },



  // Definindo acao no CTA
  setCaptureOnClickCTAButton: function(){

    var runFunnelAction = function (action, redirect) {
      var window_url_string = window.location.href;
      var window_url        = new URL(window_url_string);
      var lead_id           = window_url.searchParams.get("lead_id") || window_url.searchParams.get("xcod");
      
      if (lead_id !== undefined && lead_id !== null) {
        if (lead_id.indexOf("/") >= 0)
          lead_id = lead_id.split("/")[2];

        var update_lead_url = heroSpark.urlApi + "?lead_action="+ action + "&lead_id=" + lead_id;
      } else {
        var update_lead_url = heroSpark.urlApi + "?lead_action=skip";
      }

      fetch(update_lead_url, {
        method: "POST",
          headers: {
            "Accept": "application/json",
            "Content-Type": "application/json"
          }
        }).then((resp) => {
          return resp.json();
        }).then((body) => {
          if (redirect) {
            window.location = body.next_url;
          } else {
            console.log(body);
          }
        }).catch((error) => {
          console.error(error);
        });
    };
      
    var buttons = document.querySelectorAll(".pages-cta-button");

    Array.from(buttons).forEach(button => {
        button.onclick = function (ev) {
          ev.preventDefault();
          runFunnelAction("capture", true);
        }
    });
    

  },



  // define a ação para comunicação externa
  setCaptureExternal: function(){

    //console.log( this.dataExternal );

    jQuery.ajax({
      url: this.urlApiExternal,
      crossDomain: true,
      dataType:'json',
      type: 'post',
      timeout: 60000,
      data:{
          action: "pdg_generate_demo_install", 
          demoId: this.dataExternal.demoId,
          email: this.dataExternal.leadEmail,
          nome: this.dataExternal.leadName,
          telefone: this.dataExternal.leadPhone,
      },
      success: function(data) {
          console.log( "success" );


          this.dataExternal.demoUrl = data.script;


          /**
           * grava as informações retornadas
           * para consulta na página seguinte
           **/
          this.setFrontEndData();


          // executa a acao do Hero Spark
          this.setCaptureForm();
          
      },
      done: function(data) {
          console.log( "done" );
          console.log( data );
      },
      fail: function(data) {
          console.log( "fail" );
          console.log( data );
      },
      error: function(data) {
          console.log( "error" );
          console.log( data );
          console.log( data.responseText );
      }
    });
  }
}


heroSpark.setCaptureForm();

// função sem dependência
heroSpark.setCaptureOnClickCTAButton();


jQuery(function(){
  jQuery("<div id='loader' style='display:none;'></div>").insertAfter("button:first");

  jQuery(document).on({
    ajaxStart: function() { jQuery("#loader").show(); },
    ajaxStop: function() { jQuery("#loader").hide(); }    
  });

});