Gainsight/Custom_Templates/customer_templates/Mizuno Golf/sign-up-follow-up.html.liquid

{% assign groupValidator = false %}
{% for group in current_person.groups %}
  {% if group %}
    {% assign groupValidator = true %}
  {% endif %}
{% endfor %}

{% if current_person.signed_in? %}
  {% if groupValidator == true %}
    <script>
      if (window.location.pathname != '/app/dashboard'){
        window.location.replace('/app/dashboard');
      }
    </script>
  {% endif %}
{% endif %}

<div class="sign-up-follow-up-container" onload="">
  <div class="sign-up-follow-up-content">

    <img
      alt="{{ current_school.name }}"
      class="sign-up-follow-up-image sign-up-school-logo"
      src="{{ current_school.logo_url }}"
    />
    <h1 class="sign-up-follow-up-prompt">Please select the Territory Manager that is responsible for your Mizuno Golf account below: </h1>

    {% include "sign-up-follow-up-dropdown" %}

    <img
      alt="sign-up-pga-logo"
      class="sign-up-follow-up-image"
      src="https://s3.amazonaws.com/static.northpass.com/Mizuno+Golf/Mizuno_follow_up_image.png"
    />
    <h1 class="sign-up-follow-up-prompt">Upon completion of Mizuno Product and Fitting Knowledge Courses, PGA Members are eligible to receive PDR credits.  If you are a PGA Member, please enter your member number below:</h1>


    <input class="sign-up-follow-up-input" placeholder="PGA Member Number"/>
    <button class="sign-up-follow-up-button" onclick="submitData()">Submit</button>
  </div>
</div>

<style>
  .sign-up-follow-up-container{
    align-items: center;;
    background: #F7F7F7;
    display: flex;
    flex-direction: row;
    min-height: 100%;
    min-width: 100%;
  }

  .sign-up-follow-up-content{
    align-items: center;
    display: flex;
    flex-direction: column;
    margin: 3rem 0;
    text-align: center;
    width: 100%;
  }

  .sign-up-follow-up-image{
    max-width: 50%;
  }

  .sign-up-follow-up-prompt{
    color: #001588;
    font-size: 1.5rem;
    margin: 1.5rem;
  }

  .sign-up-dropdown,
  .sign-up-follow-up-input{
    margin-top: 1.1rem;
    text-align: center;
    width: 50%;
  }

  .sign-up-dropdown{
    height: 55px;
  }

  .sign-up-follow-up-input{
    height: 30px;
  }

  .sign-up-follow-up-button{
    border: 1px solid black;
    border-radius: 5px;
    height: 30px;
    margin-top: 10px;
    width: 90px;
  }

  @media screen and (min-width: 768px){
    .sign-up-school-logo{
      width: 400px;
    }

    .sign-up-follow-up-image{
      max-width: 575px;
    }

    .sign-up-follow-up-prompt{
      font-size: 2rem;
      margin: 3.5rem;
      margin-bottom: 1.5rem;
    }

    .sign-up-dropdown,
    .sign-up-follow-up-input{
      width: 40%;
    }
  }

  @media screen and (min-width: 1440px){
    .sign-up-follow-up-prompt{
      font-size: 2.25rem;
      margin: 3.5rem 10rem;
      margin-bottom: 1.5rem;
    }
  }
</style>

<script>
/* INPUT AND SUBMIT VALIDATORS */
  let digits = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
  let onlyDigits;

  let checkIfInputsExist = () => {
    window.setTimeout(function(){
      let validationStr = $(".sign-up-follow-up-input")[0].value.split("");
      onlyDigits = true;

      for(let i = 0; i < validationStr.length; i++){
        if(digits.indexOf(validationStr[i]) < 0){
          onlyDigits = false;
        }
      }

      if(
        (($(".sign-up-follow-up-input")[0].value.length >= 8 && $(".sign-up-follow-up-input")[0].value.length <= 9 && onlyDigits == true)
        || $(".sign-up-follow-up-input")[0].value.length == 0)
        && $("#sign-up-group-dropdown")[0].value.length != 0
      ){
        $(".sign-up-follow-up-button").css("background-color","#001588");
        $(".sign-up-follow-up-button").css("color","#FFFFFF");
        $(".sign-up-follow-up-button").css("cursor","pointer");
        $(".sign-up-follow-up-button").css("pointer-events","auto");
      } else {
        $(".sign-up-follow-up-button").css("background-color","#6F7277");
        $(".sign-up-follow-up-button").css("color","#000000");
        $(".sign-up-follow-up-button").css("cursor","initial");
        $(".sign-up-follow-up-button").css("pointer-events","none");
      }
    }, 500)
  }
  document.addEventListener('keydown', checkIfInputsExist);
  document.getElementsByClassName("sign-up-follow-up-input")[0].addEventListener('change', checkIfInputsExist);
  document.getElementById("sign-up-group-dropdown").addEventListener('change', checkIfInputsExist);

  let submitData = async () => {
      if(
        (($(".sign-up-follow-up-input")[0].value.length >= 8 && $(".sign-up-follow-up-input")[0].value.length <= 9 && onlyDigits == true)
        || $(".sign-up-follow-up-input")[0].value.length == 0)
        && $("#sign-up-group-dropdown")[0].value.length != 0
      ){

      function webhookCaller(){
        return new Promise(function(res, rej) {
          let xhr = new XMLHttpRequest();
          url = "https://www.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/pga-id-submit";

          xhr.addEventListener("load", e => {
            window.location.replace('/app/waiting-room');
          });

          xhr.open("POST", url, true);
          if($(".sign-up-follow-up-input")[0].value.length == 0){
            xhr.send(JSON.stringify({
              email: '{{ current_person.email }}',
              name: "{{ current_person.first_name }} {{ current_person.last_name }}",
              user_id: '{{ current_person.id }}',
              user_group: $("#sign-up-group-dropdown")[0].value
            }))
          } else {
            xhr.send(JSON.stringify({
              email: '{{ current_person.email }}',
              name: "{{ current_person.first_name }} {{ current_person.last_name }}",
              pga_id: $(".sign-up-follow-up-input")[0].value,
              user_id: '{{ current_person.id }}',
              user_group: $("#sign-up-group-dropdown")[0].value
            }))
          }
        })
      }

      try {
        await webhookCaller()
        .then((res) => {
          window.location.replace('/app/dashboard')
        })
      } catch(err) {
        console.log(err)
      }
    }
  }

</script>