Start a new submission

.pa11yci

@@ -5,7 +5,8 @@
     "http://localhost:8080/audit/new/step-2",
     "http://localhost:8080/audit/new/step-3",
     "http://localhost:8080/audit/submission",
-    "http://localhost:8080/audit/submission/awards/"
+    "http://localhost:8080/audit/submission/awards/",
+    "http://localhost:8080/submissions"
   ],
   "defaults": {
     "standard": "WCAG2AA",

cypress/e2e/display-submissions.cy.js

@@ -3,7 +3,7 @@ describe('Display my audit submissions', () => {
     cy.visit('/submissions');
   });
   describe('On correct page.', () => {
-    it('does not display the submissions table', () => {
+    it('should have expected h1', () => {
       cy.get('h1').should('have.text', 'My audit submissions');
     });
   });

cypress/e2e/start-new-submission.cy.js

@@ -0,0 +1,50 @@
+describe('Display my audit submissions', () => {
+  before(() => {
+    cy.visit('/submissions');
+  });
+  describe('On correct page.', () => {
+    it('should have correct title', () => {
+      cy.get('h1').should('have.text', 'My audit submissions');
+    });
+  });
+
+  describe('test Start new submission button', () => {
+    it('should be disbaled to start', () => {
+      cy.get('#start-submission').should('have.attr', 'disabled');
+    });
+    it('should be enabled when checkbox checked', () => {
+      cy.get('#check-start-new-submission').click({ force: true });
+      cy.get('#start-submission').should('not.have.attr', 'disabled');
+    });
+    it('should be disabled when checkbox unchecked', () => {
+      cy.get('#check-start-new-submission').click({ force: true });
+      cy.get('#start-submission').should('have.attr', 'disabled');
+    });
+    it('should navigate to first step in new submission process on click', () => {
+      cy.get('#check-start-new-submission').click({ force: true });
+      cy.get('#start-submission').click();
+      cy.get('h1').should('have.text', 'Create new audit');
+    });
+  });
+
+  describe('test terms and conditions modal trigger', () => {
+    before(() => {
+      cy.visit('/submissions');
+    });
+    it('should have the modal as hidden by default', () => {
+      cy.get('#modal-terms-conditions').should('have.class', 'is-hidden');
+    });
+    it('should unhide the modal and close it', () => {
+      cy.get('#terms-conditions-trigger').click();
+      cy.get('#modal-terms-conditions').should('not.have.class', 'is-hidden');
+      cy.get('#modal-terms-conditions .usa-modal__close').click();
+      cy.get('#modal-terms-conditions').should('have.class', 'is-hidden');
+    });
+    it('should navigate to first step in new submission process', () => {
+      cy.get('#terms-conditions-trigger').click();
+      cy.get('#modal-terms-conditions').should('not.have.class', 'is-hidden');
+      cy.get('#modal-terms-continue').click();
+      cy.get('h1').should('have.text', 'Create new audit');
+    });
+  });
+});

src/_includes/components/usa-modal.njk

@@ -15,14 +15,20 @@
       <div class="usa-modal__footer">
         <ul class="usa-button-group">
           <li class="usa-button-group__item">
-            <button type="button" class="usa-button {{ params.continueButton.class }}" id="{{ params.continueButton.id }}" data-close-modal>
+            <button 
+              type="button" 
+              class="usa-button {{ params.continueButton.class }}" 
+              id="{{ params.continueButton.id }}" 
+              data-close-modal
+            >
               {{ params.continueButton.text }} 
             </button>
           </li>
           <li class="usa-button-group__item">
-            <button
-              type="button"
-              class="usa-button usa-button--unstyled padding-105 text-center"
+            <button 
+              type="button" 
+              class="usa-button usa-button--unstyled padding-105 text-center" 
+              id="{{ params.backButtonId }}" 
               data-close-modal
             >
               {{ params.backButtonText }}

src/js/audit-submissions.js

@@ -1,18 +1,50 @@
 (function () {
   function init() {
+    const START_SUBMISSION_URL = '../audit/new/step-1/';
+    prepUEIModal();
+    prepTermsConditionsModal(START_SUBMISSION_URL);
+  }
+  function prepUEIModal() {
     const submissions_table = document.getElementById('audit-submissions');
     const uei_link = submissions_table.querySelector('th .usa-link');
     uei_link.setAttribute('href', '#modal-uei-info');
     uei_link.setAttribute('aria-controls', 'modal-uei-info');
     uei_link.setAttribute('data-open-modal', '');
-
-    const button_group = document.querySelector(
-      '#modal-uei-info .usa-button-group'
+    const modal_uei_second_button = document.querySelector(
+      '#modal-uei-info-cancel'
+    );
+    modal_uei_second_button.parentElement.remove();
+  }
+  function prepTermsConditionsModal(START_SUBMISSION_URL) {
+    const terms_form = document.querySelector('#start-new-submission');
+    terms_form.addEventListener('submit', (e) => {
+      e.preventDefault();
+    });
+    const terms_checkbox = terms_form.querySelector(
+      '#check-start-new-submission'
     );
-    const second_button = button_group.querySelectorAll(
-      '.usa-button-group__item'
-    )[1];
-    second_button.remove();
+    const terms_start_sub = terms_form.querySelector('#start-submission');
+    terms_checkbox.addEventListener('change', (e) => {
+      e.target.checked == true
+        ? (terms_start_sub.disabled = false)
+        : (terms_start_sub.disabled = true);
+    });
+    const terms_trigger = terms_form.querySelector('#terms-conditions-trigger');
+    terms_trigger.setAttribute('aria-controls', 'modal-terms-conditions');
+    terms_trigger.setAttribute('data-open-modal', '');
+    const button_accept = document.querySelector('#modal-terms-continue');
+    button_accept.addEventListener('click', () => {
+      terms_checkbox.checked = true;
+      triggerEvent(terms_checkbox, 'change');
+      window.location.href = START_SUBMISSION_URL;
+    });
+    terms_start_sub.addEventListener('click', () => {
+      window.location.href = START_SUBMISSION_URL;
+    });
+  }
+  function triggerEvent(element, eventName) {
+    var event = new Event(eventName);
+    element.dispatchEvent(event);
   }
   init();
 })();

src/submissions/index.njk

@@ -10,7 +10,23 @@ uei_modal:
     class: ,
     text: Close
   }
+  backButtonId: modal-uei-info-cancel
   description: <p>The Unique Entity Identifier (UEI) for an awardee or recipient is an alphanumeric code created in the System for Award Management (SAM.gov) that is used to uniquely identify specific commercial, nonprofit, or business entities registered to do business with the federal government.</p>
+
+terms_modal:
+  id: modal-terms-conditions
+  class: flex-justify-start
+  heading: Federal Audit Clearinghouse terms and conditions
+  continueButton: {
+    id: modal-terms-continue,
+    class: ,
+    text: Accept and start a new submission
+  }
+  backButtonText: Go back
+  description: <p>FAC.gov is a U.S. General Services Administration federal government service. This site collects required documentation from organizations that spend $750,000 or more in federal grant funds in a given year.</p>
+                <p>All use of FAC.gov will be monitored, recorded, and subject to audit by GSA staff and other federal government authorities. By using this system, you consent to your use being monitored and recorded.</p>
+                <p>Unauthorized use is prohibited, and individuals found performing unauthorized activities are subject to disciplinary action including criminal prosecution.</p>
+                <p>If you have questions about these conditions, please email <a class="usa-link" href="mailto:fac-support@gsa.gov">fac-support@gsa.gov</a>.</p>
 ---
 
 {%- extends "layout.njk" -%}
@@ -25,17 +41,48 @@ uei_modal:
         baseUrl: config.baseUrl
       })
     }}
-
-    {{
-      component('usa-modal', {
-        id: uei_modal.id,
-        class: uei_modal.class,
-        heading: uei_modal.heading,
-        continueButton: uei_modal.continueButton,
-        description: uei_modal.description,
-        baseUrl: config.baseUrl
-      })
-    }}
   </div>
+  <div class="grid-container">
+    <form id="start-new-submission" class="usa-form usa-form--large">
+      <h2>Start a new submission</h2>
+      <p>Before you start a new submission, double check to make sure that you don't already have one in progress.</p>
+      <div class="usa-checkbox">
+        <input
+          id="check-start-new-submission"
+          class="usa-checkbox__input"
+          type="checkbox"
+        />
+        <label class="usa-checkbox__label" for="check-start-new-submission">
+          I agree to the above <button id="terms-conditions-trigger" class="usa-button usa-button--unstyled">terms and conditions</button>.
+          <abbr title="required" class="usa-hint usa-hint--required">*</abbr>
+        </label>
+      </div>
+      <div class="usa-button-group">
+        <button id="start-submission" class="usa-button" disabled>Start a new submission</button>
+      </div>
+    </form>
+  </div>
+  {{
+    component('usa-modal', {
+      id: uei_modal.id,
+      class: uei_modal.class,
+      heading: uei_modal.heading,
+      continueButton: uei_modal.continueButton,
+      backButtonId: uei_modal.backButtonId,
+      description: uei_modal.description,
+      baseUrl: config.baseUrl
+    })
+  }}
+  {{
+    component('usa-modal', {
+      id: terms_modal.id,
+      class: terms_modal.class,
+      heading: terms_modal.heading,
+      continueButton: terms_modal.continueButton,
+      backButtonText: terms_modal.backButtonText,
+      description: terms_modal.description,
+      baseUrl: config.baseUrl
+    })
+  }}
   <script src="{{ config.baseUrl }}assets/js/audit-submissions.js"></script>
 {%- endblock -%}