Gainsight/Custom_Templates/customer_templates/Pipedrive - UserLearn/welcome.html.liquid

{% comment %} Page for SSO school to setup first name {% endcomment %}

{% if current_person.signed_in? == false or current_person.first_name %}
  <script>
    window.location.replace('/app')
  </script>
{% else %}
  <main class="np-main np-account">
    <div class="np-flex np-flex-center width-limit">
      <form class="np-form" method="post" id="name-form" novalidate>
        <div class="np-card">
          <div class="container">
            <h2 class="account-form-title">
              <span class="lang-en">Please fill out your name</span>
              <span class="lang-de"></span>
              <span class="lang-es"></span>
              <span class="lang-fr"></span>
              <span class="lang-br"></span>
            </h2>
            <div class="row">
              <div class="col-xs-12 np-account-form">
                <div class="np-form-field">
                  <label class="account-label" for="first-name">
                    <span class="lang-en">First name</span>
                    <span class="lang-de"></span>
                    <span class="lang-es"></span>
                    <span class="lang-fr"></span>
                    <span class="lang-br"></span> *
                  </label>
                  <input class="np-input" id="first-name" autocomplete="off">
                </div>
                <div class="np-form-field">
                  <label class="account-label" for="last-name">
                    <span class="lang-en">Last name</span>
                    <span class="lang-de"></span>
                    <span class="lang-es"></span>
                    <span class="lang-fr"></span>
                    <span class="lang-br"></span> *
                  </label>
                  <input class="np-input" id="last-name" autocomplete="off">
                </div>
                <button type="submit" class="np-button np-button-big np-button-large-font np-form-action">
                  <span class="lang-en">Save</span>
                  <span class="lang-de"></span>
                  <span class="lang-es"></span>
                  <span class="lang-fr"></span>
                  <span class="lang-br"></span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
  </main>
  
  <style>
    .np-account {
      background: #F7F7FE;
      padding-top: 40px;
      padding-bottom: 40px;
      height: 100%;
    }
    .np-account .np-card {
      max-width: unset;
      width: 100%;
    }
    .np-account-form {
      margin-bottom: 80px;
    }
    .account-form-title {
      color: var(--green);
      margin-bottom: 40px;
    }
    .np-account .np-card-container {
      box-shadow: none;
      background: none;
    }
    .np-input {
      background: #FFF;
      border-radius: 0;
      border: 1px solid #E1E1FF;
      margin-top: 5px;
    }
    .np-form-field {
      margin-bottom: 20px !important;
    }
    .np-account .np-form-action {
      margin: 20px 0 0;
    }
    .avatar-text > h4 {
      margin-bottom: 20px;
    }
    button:disabled, button:hover:disabled {
      background: #FFE7E6;
      color: gray;
      cursor: default;
    }
    @media only screen and (min-width: 768px) {
      .np-account {
        padding-top: 80px;
        padding-bottom: 80px;
      }
      .np-account-form {
        margin-bottom: 0;
      }
    }
  </style>
  
  <script>
    const form = document.getElementById('name-form');
    
    form.addEventListener('input', () => {
      const firstName = document.querySelector('#first-name').value;
      const lastName = document.querySelector('#last-name').value;
      const button = document.querySelector('button');
      button.disabled = !(firstName.length > 0 && lastName.length > 0);
    });
    
    addEventListener('DOMContentLoaded', () => {
      let defaultLastName = "{{ current_person.last_name }}";
      let splitName = defaultLastName.split(' ');
      if (splitName.length >= 2) {
        document.querySelector('#last-name').setAttribute('value', splitName.pop());
        document.querySelector('#first-name').setAttribute('value', splitName.join(' '));
      }
      else {
        document.querySelector('#first-name').setAttribute('value', splitName[0]);
        document.querySelector('button').disabled = true;
      }
    })
    
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      const firstName = document.getElementById('first-name').value;
      const lastName = document.getElementById('last-name').value;
      const xhr = new XMLHttpRequest();
      xhr.open('POST', 'https://www.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/pipedrive-sso-setup-first-and-last-name');
      xhr.setRequestHeader('Content-Type', 'application/json');
      xhr.send(JSON.stringify({
        "first-name": firstName,
        "last-name": lastName,
        "user-uuid": "{{ current_person.id }}"
      }));
      xhr.addEventListener('load', () => {
        window.sessionStorage.setItem('nameSetup', firstName);
        window.location.replace('/app');
      });
    });
  </script>
{% endif %}