18F/Paid-Leave-Prototype

View on GitHub
_pages/claims/new.html

Summary

Maintainability
Test Coverage
---
title: File a Claim
---

{% include head.html %}
<link href="{{site.baseurl}}/stylesheets/form.css" type="text/css" rel="stylesheet" />
<body class="no-js layout-claims layout-claims-new">
  <a class="a-skip-to-main" href="#main">Skip to main content</a>
  {% include site-header.html %}
  <main role="main" id="main">
    <div class="wrapper">
      <h1>File a claim</h1>
      <form id="claim" action="{{site.baseurl}}/claims/step-2/"></form>
      <div id="form-errors"></div>
      <aside>
        <h1>How it works</h1>
        <ol class="steps">
          <li>Fill out and submit this form.</li>
          <li>We’ll send you a code, which you’ll give to your healthcare provider. Using this code, your provider will share information relevant to your claim.</li>
          <li>We’ll process your application. The average claims-processing time is currently <span class="average-claim-time">18 days</span>.</li>
          <li>You’ll receive your benefits.</li>
        </ol>
        <p>More detailed information is available <a href="{{site.baseurl}}/claims/how-it-works/">here</a>. If you have any questions, don’t hesistate to <a href="{{site.baseurl}}/contact-us/">contact us</a>. You can also <a href="{{site.baseurl}}/eligibility/">read eligibility information</a>, <a href="{{site.baseurl}}/estimator/">estimate your benefits</a>, or <a href="{{site.baseurl}}/forms-and-publications/">request a paper form</a>.</p>
      </aside>
    </div>
  </main>
  {% include site-footer.html %}
</body>

<script type="text/javascript" src="{{site.baseurl}}/javascripts/lib/underscore.js"></script>
<script type="text/javascript" src="{{site.baseurl}}/javascripts/lib/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() {
      JSONForm.fieldTypes['title'] = {
        template: '<h2><%=node.value %></h2>'
      };
      JSONForm.fieldTypes['section-title'] = {
        template: '<h3><%=node.value %></h3>'
      };
      JSONForm.fieldTypes['instructions'] = {
        template: '<p class="instructions"><%=node.value%></p>'
      };
      $('#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('{{site.baseurl}}/claims/step-2/', values);
              window.location('{{site.baseurl}}/claims/step-2/');
            }
          }
      });

      $('.layout-claims-new form')
        .on("change", 'select[name="information.reason"]', function(){
          if ($(this).val() == "Manage a recently diagnosed medical condition.") {
            $('.dependent').hide();
            $($('h2')[3]).hide();
            $($('h3')[3]).hide();
          } else {
            $('.dependent').show();
            $($('h2')[3]).show();
            $($('h3')[3]).show();
          }
        })
        .on("change", 'input[name="payment.method"]', function(){
          var val = $('input[name="payment.method"]:checked').val();
          if (val == "direct deposit") {
            $('.direct_deposit').show();
          } else {
            $('.direct_deposit').hide();
          }
        })
        .on("change", 'input[name="claimant.address.street"], input[name="claimant.address.city"], input[name="claimant.address.state"], input[name="claimant.address.zip"]', function(){
          dependent_address_street = $('input[name="dependent.address.street"').val();
          dependent_address_city = $('input[name="dependent.address.city"').val();
          dependent_address_state = $('input[name="dependent.address.state"').val();
          dependent_address_zip = $('input[name="dependent.address.zip"').val();
          dependent_address = dependent_address_street && dependent_address_city && dependent_address_state && dependent_address_zip;

          if (dependent_address == "") {
            claimant_address_street = $('input[name="claimant.address.street"').val();
            claimant_address_city = $('input[name="claimant.address.city"').val();
            claimant_address_state = $('input[name="claimant.address.state"').val();
            claimant_address_zip = $('input[name="claimant.address.zip"').val();

            $('input[name="dependent.address.street"').val(claimant_address_street);
            $('input[name="dependent.address.city"').val(claimant_address_city);
            $('input[name="dependent.address.state"').val(claimant_address_state);
            $('input[name="dependent.address.zip"').val(claimant_address_zip);
          }
        });

      $('.layout-claims-new form input[value="prepaid debit card"]').click()


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

});

  </script>