18F/Paid-Leave-Prototype

View on GitHub
_pages/claims/verify-2.html

Summary

Maintainability
Test Coverage
---
title: Healthcare Provider Verification
---

{% include head.html %}
<link href="{{site.baseurl}}/stylesheets/form.css" type="text/css" rel="stylesheet" />
<body class="no-js layout-claims layout-claims-verify-2">
  <a class="a-skip-to-main" href="#main">Skip to main content</a>
  {% include site-header.html %}
  <main role="main" id="main" class="page">
    <div class="wrapper">
      <h1>Healthcare provider verification</h1>
      <p>[Claimant name] has asked you to contribute information relevant to their forthcoming claim for paid family medical leave benefits. Please enter additional information to help us verify [patient name]’s claim.</p>
      <form action="{{ site.baseurl }}/claims/verify-3/">
        <fieldset class="fieldset fieldset-physician">
          <legend>Physician</legend>
          <fieldset class="fieldset fieldset-name">
            <legend>Name</legend>
            <div class="field field-name-first">
              <label>
                <span class="label-text">First</span>
                <input type="text" name="">
              </label>
            </div>
            <div class="field field-name-middle">
              <label>
                <span class="label-text">Middle</span>
                <input type="text" name="">
              </label>
            </div>
            <div class="field field-name-last">
              <label>
                <span class="label-text">Last</span>
                <input type="text" name="">
              </label>
            </div>
          </fieldset>
          <fieldset class="fieldset fieldset-mailing-address">
            <legend>Mailing address</legend>
            <div class="field field-street">
              <label>
                <span class="label-text">Street address</span>
                <input type="text">
              </label>
            </div>
            <div class="field field-city-state-zip">
              <div class="field field-city">
                <label>
                  <span class="label-text">City</span>
                  <input type="text">
                </label>
              </div>
              <div class="field field-state field-select">
                <label>
                  <span class="label-text">State</span>
                  <select>
                    <option value="AL">Alabama</option>
                    <option value="AK">Alaska</option>
                    <option value="AZ">Arizona</option>
                    <option value="AR">Arkansas</option>
                    <option value="CA">California</option>
                    <option value="CO">Colorado</option>
                    <option value="CT">Connecticut</option>
                    <option value="DE">Delaware</option>
                    <option value="DC">District of Columbia</option>
                    <option value="FL">Florida</option>
                    <option value="GA">Georgia</option>
                    <option value="HI">Hawaii</option>
                    <option value="ID">Idaho</option>
                    <option value="IL">Illinois</option>
                    <option value="IN">Indiana</option>
                    <option value="IA">Iowa</option>
                    <option value="KS">Kansas</option>
                    <option value="KY">Kentucky</option>
                    <option value="LA">Louisiana</option>
                    <option value="ME">Maine</option>
                    <option value="MD">Maryland</option>
                    <option value="MA">Massachusetts</option>
                    <option value="MI">Michigan</option>
                    <option value="MN">Minnesota</option>
                    <option value="MS">Mississippi</option>
                    <option value="MO">Missouri</option>
                    <option value="MT">Montana</option>
                    <option value="NE">Nebraska</option>
                    <option value="NV">Nevada</option>
                    <option value="NH">New Hampshire</option>
                    <option value="NJ">New Jersey</option>
                    <option value="NM">New Mexico</option>
                    <option value="NY">New York</option>
                    <option value="NC">North Carolina</option>
                    <option value="ND">North Dakota</option>
                    <option value="OH">Ohio</option>
                    <option value="OK">Oklahoma</option>
                    <option value="OR">Oregon</option>
                    <option value="PA">Pennsylvania</option>
                    <option value="RI">Rhode Island</option>
                    <option value="SC">South Carolina</option>
                    <option value="SD">South Dakota</option>
                    <option value="TN">Tennessee</option>
                    <option value="TX">Texas</option>
                    <option value="UT">Utah</option>
                    <option value="VT">Vermont</option>
                    <option value="VA">Virginia</option>
                    <option value="WA">Washington</option>
                    <option value="WV">West Virginia</option>
                    <option value="WI">Wisconsin</option>
                    <option value="WY">Wyoming</option>
                  </select>                    
                </label>
              </div>
              <div class="field field-zip">
                <label>
                  <span class="label-text">Zip code</span>
                  <input type="text">
                </label>
              </div>
            </div>
            <div class="field field-select">
              <label>
                <span class="label-text">Country</span>
                <select>
                  <option>United States</option>
                  <option>Others</option> 
                </select>  
              </label>
            </div>
          </fieldset>
          <div class="field field-phone-number">
            <label>
              <span class="label-text">Phone number</span>
              <input type="text">
            </label>
          </div>
          <div class="field field-type">
            <label>
              <span class="label-text">Type or speciality (if any)</span>
              <input type="text">
            </label>
          </div>
          <fieldset class="fieldset fieldset-license">
            <legend>License</legend>
            <div class="field field-license-number">
              <label>
                <span class="label-text">License number</span>
                <input type="text">
              </label>
            </div>
            <div class="field field-license-number">
              <label>
                <span class="label-text">State or country where licensed</span>
                <input type="text">
              </label>
            </div>
          </fieldset>
        </fieldset>
        <fieldset class="fieldset fieldset-patient">
            <legend>Patient</legend>
            <div class="field field-diagnosis">
              <label>
                <span class="label-text">Diagnosis or statement of symptoms</span>
                <textarea></textarea>
              </label>
            </div>
          </fieldset>
          <div class="field field-primary-icd">
            <label>
              <span class="label-text">Primary ICD code</span>
              <input type="text">
            </label>
          </div>
          <div class="field field-secondary-icd">
            <label>
              <span class="label-text">Secondary ICD code</span>
              <input type="text">
            </label>
          </div>
          <div class="field field-date">
            <label>
              <span class="label-text">First date care needed</span>
              <input type="date">
            </label>
          </div>
          <div class="field field-date">
            <label>
              <span class="label-text">Date you expect recovery</span>
              <input type="date">
            </label>
          </div>
          <div class="field field-date">
            <label>
              <span class="label-text">Date patient will no longer require care by [Claimant name] (if applicable)</span>
              <input type="date">
            </label>
          </div>
          <div class="field field-number">
            <label>
              <span class="label-text">Approximately how many hours per day will patient require claimant?</span>
              <input type="number" max="24">
            </label>
          </div>

          <div class="field field-checkbox">
            <label>
              <input type="checkbox" name="">
              <span class="label-text">
                 I certify under penalty of perjury that this patient has a serious health condition and requires a care provider. I have performed a physical examination and/or treated the patient. I am authorized to certify a patient disability or serious health condition pursuant to [state] unemployment insurance code section 2708.</a>
              </span>
            </label>
          </div>
        </fieldset>

        <button>Submit</button>
      </form>
    </div>
  </main>
  {% include site-footer.html %}
</body>

<script type="text/javascript" src="{{site.baseurl}}/javascripts/underscore.js"></script>
<script type="text/javascript" src="{{site.baseurl}}/javascripts/jsonform.js"></script>
<script>

$( document ).ready(function() {

  // Get the JSON Schema and form definitions
  var json_form = $.get("{{site.baseurl}}/javascripts/form.json");
  var json_schema = $.get("{{site.baseurl}}/javascripts/schema.json");

  // When the schema and form are available, render the form
  $.when(json_schema, json_form).done(function() {

      $('#claim').jsonForm({
          "schema": json_schema.responseJSON,
          "form": json_form.responseJSON,
          onSubmit: function (errors, values) {
            if (errors) {
              $('.form-errors').html('<p>Please fix the below errors.</p>');
            }
            else {
              // Set this to a valid endpoint to receive the JSON form contents.
              $.post('https://example.gov/', values);
            }
          }
      });

  }).fail(function() {
    console.log('JSON schema could not be retrieved');
  });

});

  </script>