Utilities 5

<div class="steps-01 steps-content-holder wrapper bg-color-ui-01">
  <div class="grid-container">
    <div class="grid-x">
      <div class="large-8 medium-10 small-12 cell main-steps-holder">
        <div class="spacer x-large"></div>
        <!-- steps indicator -->
        <ins-steps id="insStepsEl">
          <ins-step description="Step One">
          </ins-step>
          <ins-step description="Step Two">
          </ins-step>
          <ins-step description="Step Three">
          </ins-step>
        </ins-steps>
        <!-- /steps indicator -->

        <div id="steps-content-holder">
          <!-- step1 -->
          <form id="steps-01-step1-form">
            <div class="spacer xxxx-large"></div>
            <h2 class="spacer text-center">Account Details</h2>
            <div class="spacer small"></div>
            <div class="grid-x grid-padding-x gutter">
              <div class="cell large-6">
                <ins-input validate id="first-name" label="First Name*" data-test="" name="first-name" value=""
                  placeholder="First name" error-message="First Name is required">
                </ins-input>
              </div>
              <div class="cell large-6">
                <ins-input validate id="last-name" label="Last Name*" data-test="" name="last-name" value=""
                  placeholder="Last name" error-message="Last Name is required">
                </ins-input>
              </div>
            </div>
            <div class="grid-x grid-padding-x gutter">
              <div class="cell large-6">
                <ins-input validate id="email" field="email" label="Email*" data-test="" name="email" value=""
                  placeholder="Email" error-message="Please provide a valid email address">
                </ins-input>
              </div>
              <div class="cell large-6">
                <ins-input-tel id="phone-number-field" label="Phone Number" data-test="" phonenum-value=""
                  phonenum-placeholder="Phone Number" no-areacode>
                </ins-input-tel>
              </div>
            </div>
          </form>
          <!-- /step1 -->

          <!-- step2 -->
          <form id="steps-01-step2-form">
            <div class="spacer xxxx-large"></div>
            <h2 class="spacer text-center">Delivery Details</h2>
            <div class="spacer small"></div>
            <div class="grid-x grid-padding-x gutter">
              <div class="large-12 cell">
                <ins-input id="search-address" label="Search address" data-test="" name="search-address" value=""
                  placeholder="Search address" icon="icon-search">
                </ins-input>
              </div>
            </div>
            <div class="grid-x grid-padding-x gutter">
              <div class="large-6 cell">
                <ins-input validate id="address1" label="Address 1" data-test="" name="address1" value=""
                  placeholder="Address 1" error-message="Address 1 is required">
                </ins-input>
              </div>
              <div class="large-6 cell">
                <ins-input id="address2" label="Address 2" data-test="" name="address2" value=""
                  placeholder="Address 2">
                </ins-input>
              </div>
            </div>
            <div class="grid-x grid-padding-x gutter">
              <div class="large-6 cell">
                <ins-input id="address3" label="Address 3" data-test="" name="address3" value=""
                  placeholder="Address 3">
                </ins-input>
              </div>
              <div class="large-6 cell">
                <ins-input id="city" label="City" data-test="" name="city" value="" placeholder="City">
                </ins-input>
              </div>
            </div>
            <div class="grid-x grid-padding-x gutter">
              <div class="large-6 cell">
                <ins-input id="county-district" label="County District" data-test="" name="county-district" value=""
                  placeholder="County District">
                </ins-input>
              </div>
              <div class="large-6 cell">
                <ins-input id="district" label="District" data-test="" name="district" value="" placeholder="District">
                </ins-input>
              </div>
            </div>
            <div class="grid-x grid-padding-x gutter">
              <div class="large-6 cell">
                <ins-input validate id="suburb" label="Suburb" data-test="" name="suburb" value="" placeholder="Suburb"
                  error-message="Suburb is required">
                </ins-input>
              </div>
              <div class="large-6 cell">
                <ins-input validate id="state-region" label="State/Region" data-test="" name="state-region" value=""
                  placeholder="State/Region" error-message="State/Region is required">
                </ins-input>
              </div>
            </div>
            <div class="grid-x grid-padding-x gutter">
              <div class="large-6 cell">
                <ins-input validate id="country" label="Country" data-test="" name="state-region" value=""
                  placeholder="Country" error-message="Country is required">
                </ins-input>
              </div>
              <div class="large-6 cell">
                <ins-input id="country-code" label="Country Code" data-test="" name="country-code" value=""
                  placeholder="Country Code" field="number">
                </ins-input>
              </div>
            </div>
            <div class="grid-x grid-padding-x gutter">
              <div class="large-6 cell">
                <ins-input validate id="postal-code" label="Postal Code" data-test="" name="postal-code" value=""
                  placeholder="Postal Code" field="number" error-message="Postal Code is required">
                </ins-input>
              </div>
              <div class="large-6 cell"> </div>
            </div>
          </form>
          <!-- /step2 -->

          <!-- step3 -->
          <form id="steps-01-step3-form">
            <div class="spacer xxxx-large"></div>
            <h2 class="spacer text-center">Time and Date</h2>
            <div class="spacer small"></div>
            <div class="grid-x grid-padding-x gutter">
              <div class="cell large-6">
                <ins-date-time label="Delivery Date" mode="datepicker" icon="icon-calendar" placeholder="Delivery Date"
                  min-date="today">
                </ins-date-time>
              </div>
              <div class="cell large-6">
                <ins-date-time label="Delivery Time" mode="timepicker" icon="icon-clock" placeholder="Delivery Time">
                </ins-date-time>
              </div>
            </div>
          </form>
          <!-- /step3 -->
        </div>
        <div class="steps-button-holder">
          <div class="spacer xxx-small"></div>
          <ins-button label="Back" id="prevBtn" outlined disabled>
          </ins-button>

          <ins-button label="Next" solid id="nextBtn">
          </ins-button>
          <div class="spacer xxx-small"></div>
        </div>
      </div>
    </div>
  </div>
</div>

.steps-01 #steps-01-step2-form,
.steps-01 #steps-01-step3-form {
  display: none;
}

.steps-01 #nextBtn {
  float: right;
}

.steps-01 ins-button button.blue.outlined:hover {
  color: var(--color-main, #116EC3);
}

.steps-01 .ins-form-field-wrap.is-invalid .ins-form-error {
  color: var(--color-error, #FF3366);
  font-family: var(--font-family-03, sans-serif);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
}

.steps-01 .main-steps-holder {
  margin-left: auto;
  margin-right: auto;
}

let insStepsEl = document.getElementById("insStepsEl");
  let prevBtn = document.getElementById("prevBtn");
  let nextBtn = document.getElementById("nextBtn");

  let activeStep = "steps-01-step1-form";

  // Use async await when calling APIs if you are expecting a return from the API
  prevBtn.addEventListener('insClick', async () => {
    nextBtn.disabled = false;
    let track = await insStepsEl.prev();
    if (track.start) prevBtn.disabled = true;

    setActiveStep(track.currentStep.description);
  });

  nextBtn.addEventListener('insClick', async () => {
    prevBtn.disabled = false;
    // console.log("validate:", activeStep);
    validateCurrentStep(activeStep);
  });

  async function goToNextStep() {
    let track = await insStepsEl.next();
    if (track.end) nextBtn.disabled = true;
    setActiveStep(track.currentStep.description);
  }

  function setActiveStep(currentStep) {
    switch (currentStep) {
      case 'Step One':
        activeStep = "steps-01-step1-form"
        break;
      case 'Step Two':
        activeStep = "steps-01-step2-form"
        break;
      case 'Step Three':
        activeStep = "steps-01-step3-form"
        break;
      default:
        activeStep = "steps-01-step1-form"
    }

    var displayedStep = "#" + activeStep;

    $(displayedStep).show();
    $('#steps-content-holder > form').not(displayedStep).hide();
  }

  function validateCurrentStep(formID) {
    var currentForm = document.getElementById(formID);
    validateForm();

    async function validateForm() {
      if (await WebBlocks.validation.validateForm(currentForm)) {
        goToNextStep();
      } else {
        return false;
      }
    }
  }