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

<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 enter your city and store name and select your state from the dropdown below: </h1>

    <input class="sign-up-follow-up-input sign-up-follow-up-store-name" placeholder="Store Name"/>

    <input class="sign-up-follow-up-input sign-up-follow-up-city" placeholder="City"/>

    {% include "sign_up_follow_up_dropdown" %}
    {%- comment -%} <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"
    /> {%- endcomment -%}
    {%- comment -%} <h1 class="sign-up-follow-up-prompt">Please enter your store name below:</h1> {%- endcomment -%}

    <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: 1rem 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;
    padding-left: 28px;
  }

  .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: 1.75rem;
      margin: 2rem;
      margin-bottom: 1rem;
      max-width: 60%;
    }

    .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>
  let checkIfInputsExist = () => {
    window.setTimeout(function(){

      if(
        ($(".sign-up-follow-up-store-name")[0].value.length > 0) && $(".sign-up-follow-up-city")[0].value.length > 0 && $("#sign-up-state-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-store-name")[0].addEventListener('change', checkIfInputsExist);
  document.getElementsByClassName("sign-up-follow-up-city")[0].addEventListener('change', checkIfInputsExist);
  document.getElementById("sign-up-state-dropdown").addEventListener('change', checkIfInputsExist);

  let submitData = async () => {
    if(
      ($(".sign-up-follow-up-store-name")[0].value.length > 0) && $(".sign-up-follow-up-city")[0].value.length > 0 && $("#sign-up-state-dropdown")[0].value.length != 0
    ){

      function webhookCaller(){
        return new Promise(function(res, rej) {
          let xhr = new XMLHttpRequest();
          url = "https://webhooks.workato.com/webhooks/rest/4c162498-2fc6-4d3f-b5ea-6b98218b2c39/sign-up-follow-up";

          xhr.addEventListener("load", e => {
            window.location.replace('/app/waiting-room');
            //window.location.replace('/app');
          });
          xhr.open("POST", url, true);
          xhr.send(JSON.stringify({
            email: '{{ current_person.email }}',
            name: "{{ current_person.first_name }} {{ current_person.last_name }}",
            user_id: '{{ current_person.id }}',
            user_city: $(".sign-up-follow-up-city")[0].value,
            user_state: $("#sign-up-state-dropdown")[0].value,
            user_store_name: $(".sign-up-follow-up-store-name")[0].value
          }))
        })
      }

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

</script>