submitOptin.js

submitOptin.js

# mutation createHtmlTag{
#   createHtmlTag(data:  {
#     title: "SUBMIT_OPTIN"
#     isGlobal: false
#     selector: "head"
#     position: APPEND_TO
#     html: "<script>function validateEmail(e){return new RegExp(\"[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,3}\",\"i\").test(e)}function validateUUID(e){return new RegExp(\"^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$\",\"i\").test(e)}function once(e){var a;if(\"function\"!=typeof e)return function(){};var t=2;return function(){return--t>0&&(a=e.apply(this,arguments)),t<=1&&(e=void 0),a}}var submitLink=null,nameInput=null,emailInput=null;$(document).ready(function(){submitLink=$(\"a[href=#submit-form]\"),nameInput=$(\"input[name=first_name]\"),emailInput=$(\"input[name=email]\"),submitLink.click(function(e){console.log(\"hello\"),e.preventDefault(),e.stopPropagation();var a=nameInput.val(),t=emailInput.val().replace(/s/g,\"\"),r=!1;if(\"\"==a?(nameInput.css({\"border-color\":\"#B91517\",\"border-width\":\"3px\"}),r=!0):nameInput.css({\"border-color\":\"\",\"border-width\":\"\"}),\"\"!=t&&validateEmail(t)?emailInput.css({\"border-color\":\"\",\"border-width\":\"\"}):(emailInput.css({\"border-color\":\"#B91517\",\"border-width\":\"3px\"}),r=!0),!r){for(var i=window.location.pathname.replace(\"/\",\"\"),n=i.split(\"/\")[1],o=spacetime?spacetime().timezone().name:\"America/Los_Angeles\",d=Array.from(new URLSearchParams(window.location.search).entries()),l={},c=d.pop();c;c=d.pop())l[c[0]]=c[1];var s={data:{email:t,name:a,timezone:o||\"America/Los_Angeles\",meta:l},where:{funnelId:validateUUID(n)?n:void 0,slug:validateUUID(n)?void 0:n}};$.ajax({type:\"POST\",url:\"/graphql\",data:JSON.stringify({query:\"mutation($data: VisitorCreateInput!, $where: FunnelIdOrSlugWhereInput!) { createVisitor( data: $data, where: $where ) { visitorId, redirectUrl } }\",variables:s}),success:function(e){if(!e||!e.data||!e.data.createVisitor)return nameInput.css({\"border-color\":\"#B91517\",\"border-width\":\"3px\"}),void emailInput.css({\"border-color\":\"#B91517\",\"border-width\":\"3px\"});var r=function(){var a=spacetime().add(90,\"day\").format(),t=new Date(a).toUTCString();document.cookie=\"F_VSTR=\"+e.data.createVisitor.visitorId+\"; path=/; expires=\"+t,window.location.href=e.data.createVisitor.redirectUrl};if(void 0!==window.dataLayer&&void 0!==window.google_tag_manager){var n=once(r);window.dataLayer.push({name:a,email:t,event:\"optin\",eventCallback:n,eventTimeout:2e3,pageName:i,timezone:o}),setTimeout(n,2e3)}else r()},contentType:\"application/json\",dataType:\"json\"})}})});</script>"
#   }) {
#     htmlTagId
#   }
# }



function validateEmail(email) {
  var re = new RegExp("[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,3}", "i");
  return re.test(email);
}

function validateUUID(uuid) {
  var re = new RegExp("^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$", "i" );
  return re.test(uuid);
}

function once(func) {
  var result;
  if (typeof func != 'function') {
      return function () {};
  }
  var n = 2;
  return function () {
      if (--n > 0) {
          result = func.apply(this, arguments);
      }
      if (n <= 1) {
          func = undefined;
      }
      return result;
  };
}

var submitLink = null;
var nameInput = null;
var emailInput = null;
​
$(document).ready(function () { // your page initialization code here // the DOM will be available here
  submitLink = $('a[href=#submit-form]');
  nameInput = $('input[name=first_name]');
  emailInput = $('input[name=email]');​
  submitLink.click(function (e) {
      e.preventDefault();
      e.stopPropagation();
      var name = nameInput.val();
      var rawEmail = emailInput.val();
      var spaceRegex = new RegExp("/\s", 'g');
      var email = rawEmail.replace(spaceRegex, '');
      var error = false;
      if (name == '') {
          nameInput.css({
              'border-color': '#B91517',
              'border-width': '3px'
          });
          error = true;
      } else {
          nameInput.css({
              'border-color': '',
              'border-width': ''
          });
      }
      if (email == '' || !validateEmail(email)) {
          emailInput.css({
              'border-color': '#B91517',
              'border-width': '3px'
          });
          error = true;
      } else {
          emailInput.css({
              'border-color': '',
              'border-width': ''
          });
      }
      if (!error) {
          var pageName = window.location.pathname.replace('/', '');
          var funnel = pageName.split('/')[1];

          var timezone = spacetime ? spacetime().timezone().name : 'America/Los_Angeles';
          var searchParams = Array.from(new URLSearchParams(window.location.search).entries());
          var searchParamsObject = {};
          for (var pair = searchParams.pop(); pair; pair = searchParams.pop()) {
              searchParamsObject[pair[0]] = pair[1];
          }
​
          var
              query = 'mutation($data: VisitorCreateInput!, $where: FunnelIdOrSlugWhereInput!) { createVisitor( data: $data, where: $where ) { visitorId, redirectUrl } }';
          var variables = {
              data: {
                  email: email,
                  name: name,
                  timezone: timezone || 'America/Los_Angeles',
                  meta: searchParamsObject
              },
              where: {
                  funnelId: validateUUID(funnel) ? funnel : undefined,
                  slug: validateUUID(funnel) ?
                      undefined : funnel
              }
          };
          $.ajax({
              type: 'POST',
              url: '/graphql',
              data: JSON.stringify({ query: query, variables: variables }),
              success: function (res) {
                if (!res || !res.data || !res.data.createVisitor) {
                    nameInput.css({
                        'border-color': '#B91517',
                        'border-width': '3px'
                    });
                    emailInput.css({
                        'border-color': '#B91517',
                        'border-width': '3px'
                    });
                    return;
                }
                var
                    cb = function () {
                        var formattedTime = spacetime().add(90, 'day').format();
                        var after90Days = new Date(formattedTime).toUTCString();
                        document.cookie = "F_VSTR=" + res.data.createVisitor.visitorId + "; path=/; expires=" + after90Days;
                        window.location.href = res.data.createVisitor.redirectUrl;
                    };
                if (typeof window.dataLayer != 'undefined' &&
                    typeof window.google_tag_manager != 'undefined') {
                    var callbackOnce = once(cb);​
                    window.dataLayer.push({
                        name: name,
                        email: email,
                        event: 'optin',
                        eventCallback: callbackOnce,
                        eventTimeout: 2000,
                        pageName: pageName,
                        timezone: timezone
                    });
                    setTimeout(callbackOnce, 2000);
                } else {
                    cb();
                }
            },
              contentType: "application/json",
              dataType: 'json'
          });
      }
  });
});