Merge pull request #241 from dod-ccpo/financial-verification-validation-and-messaging

Financial verification validation and messaging

atst/forms/financial.py

@@ -101,46 +101,43 @@ class BaseFinancialForm(ValidatedForm):
     )
 
     uii_ids = NewlineListField(
-        "Unique Item Identifier (UII)s related to your application(s) if you already have them",
+        "Unique Item Identifier (UII)s related to your application(s) if you already have them.",
+        description="If you have more than one UII, place each one on a new line.",
         validators=[Required()],
     )
 
     pe_id = StringField(
-        "Program Element (PE) Number related to your request", validators=[Required()]
+        "Program Element Number",
+        description="PE numbers help the Department of Defense identify which offices' budgets are contributing towards this resource use. <br/><em>It should be 7 digits followed by 1-3 letters, and should have a zero as the first and third digits.</em>",
+        validators=[Required()],
     )
 
     treasury_code = StringField(
-        "Program Treasury Code", validators=[Required(), Regexp(TREASURY_CODE_REGEX)]
+        "Program Treasury Code",
+        description="Program Treasury Code (or Appropriations Code) identifies resource types. <br/> <em>It should be a four digit or six digit number, optionally prefixed by one or more zeros.</em>",
+        validators=[Required(), Regexp(TREASURY_CODE_REGEX)],
     )
 
     ba_code = StringField(
         "Program Budget Activity (BA) Code",
+        description="BA Code is used to identify the purposes, projects, or types of activities financed by the appropriation fund. <br/><em>It should be two digits, followed by a letter.</em>",
         validators=[Required(), Regexp(BA_CODE_REGEX)],
     )
 
-    fname_co = StringField("Contracting Officer First Name", validators=[Required()])
+    fname_co = StringField("KO First Name", validators=[Required()])
-    lname_co = StringField("Contracting Officer Last Name", validators=[Required()])
+    lname_co = StringField("KO Last Name", validators=[Required()])
 
-    email_co = EmailField("Contracting Officer Email", validators=[Required(), Email()])
+    email_co = EmailField("KO Email", validators=[Required(), Email()])
 
-    office_co = StringField("Contracting Officer Office", validators=[Required()])
+    office_co = StringField("KO Office", validators=[Required()])
 
-    fname_cor = StringField(
+    fname_cor = StringField("COR First Name", validators=[Required()])
-        "Contracting Officer Representative (COR) First Name", validators=[Required()]
-    )
 
-    lname_cor = StringField(
+    lname_cor = StringField("COR Last Name", validators=[Required()])
-        "Contracting Officer Representative (COR) Last Name", validators=[Required()]
-    )
 
-    email_cor = EmailField(
+    email_cor = EmailField("COR Email", validators=[Required(), Email()])
-        "Contracting Officer Representative (COR) Email",
-        validators=[Required(), Email()],
-    )
 
-    office_cor = StringField(
+    office_cor = StringField("COR Office", validators=[Required()])
-        "Contracting Officer Representative (COR) Office", validators=[Required()]
-    )
 
 
 class FinancialForm(BaseFinancialForm):

js/lib/input_validations.js

@@ -52,5 +52,31 @@ export default {
     match: /^\d{10}$/,
     unmask: [],
     validationError: 'Please enter a 10-digit DoD ID number'
+  },
+  peNumber: {
+    mask: val => {
+      if (val.length <= 7) return [/\d/,/\d/,/\d/,/\d/,/\d/,/\d/,/\d/,/[a-z,A-Z]/]
+      if (val.length === 8) return [/\d/,/\d/,/\d/,/\d/,/\d/,/\d/,/\d/,/[a-z,A-Z]/,/[a-z,A-Z]/]
+      return [/\d/,/\d/,/\d/,/\d/,/\d/,/\d/,/\d/,/[a-z,A-Z]/,/[a-z,A-Z]/,/[a-z,A-Z]/]
+    },
+    match: /(0\d)(0\d)(\d)(\d{2})([a-z,A-Z]{1,3})/,
+    unmask: ['_'],
+    validationError: 'Please enter a valid PE number. Note that it should be 7 digits followed by 1-3 letters, and should have a zero as the first and third digits.'
+  },
+  treasuryCode: {
+    mask: createNumberMask({ prefix: '', allowDecimal: false, allowLeadingZeroes: true, includeThousandsSeparator: false }),
+    match: /^0*([1-9]{4}|[1-9]{6})$/,
+    unmask: [],
+    validationError: 'Please enter a valid Program Treasury Code. Note that it should be a four digit or six digit number, optionally prefixed by one or more zeros.'
+  },
+  baCode: {
+    mask: val => {
+      if (val.length === 1) return [/\d/]
+      if (val.length === 2) return [/\d/, /\d/]
+      return [/\d/,/\d/,/[a-z,A-Z]/]
+    },
+    match: /[0-9]{2}\w?$/,
+    unmask: [],
+    validationError: 'Please enter a valid BA Code. Note that it should be two digits, followed by a letter.'
   }
 }

styles/components/_forms.scss

@@ -21,11 +21,35 @@
   @include media($medium-screen) {
     @include grid-row;
     align-items: flex-start;
+    justify-content: flex-start;
 
     .form-col {
+      &.form-col--half {
+        flex-basis: 50%;
+      }
+
+      &.form-col--third {
+        flex-basis: 33.33%;
+      }
+
+      &.form-col--two-thirds {
+        flex-basis: 66.66%;
+      }
+
       .usa-input {
         margin-left: ($gap * 4);
         margin-right: ($gap * 4);
+
+        label {
+          .icon-validation {
+            left: auto;
+            right: -$gap * 3;
+          }
+        }
+
+        input {
+          max-width: none;
+        }
       }
 
       &:first-child {

styles/elements/_inputs.scss

@@ -93,14 +93,14 @@
     .icon-tooltip {
       padding: 0 $gap/2;
       cursor: default;
-      margin-left: $gap/2;
+      margin: 0 0 0 ($gap / 2);
     }
   }
 
   .usa-input__help {
-    @include h4;
+    @include h5;
     font-weight: normal;
-    padding: $gap/2 0;
+
     @include line-max;
 
     .icon-link {
@@ -115,7 +115,6 @@
     @include line-max;
     margin: 0;
     box-sizing: border-box;
-    max-width: 32em;
     resize: none;
 
     &::placeholder {
@@ -215,7 +214,9 @@
 
     &--integer,
     &--dollars,
-    &--gigabytes, {
+    &--gigabytes,
+    &--treasuryCode,
+    &--peNumber {
       input {
         max-width: 16em;
       }
@@ -225,7 +226,8 @@
     }
 
     &--date,
-    &--usPhone {
+    &--usPhone,
+    &--baCode {
       input {
         max-width: 10em;
       }

templates/requests/financial_verification.html

@@ -27,15 +27,6 @@
     ) }}
   {% endif %}
 
-  <div class="panel">
-
-    <div class="panel__heading">
-      <h1>Order #{{ request_id }}</h1>
-      <div class="subtitle" id="financial-verification"><h2>Financial Verification</h2></div>
-    </div>
-
-    <div class="panel__content">
-
   {% block form_action %}
     {% if extended %}
       <form method='POST' action="{{ url_for('requests.financial_verification', request_id=request_id, extended=True) }}" autocomplete="off" enctype="multipart/form-data">
@@ -55,8 +46,19 @@
       ) }}
     {% endif %}
 
+  <div class="panel">
+
+    <div class="panel__heading">
+      <h1>Order #{{ request_id }}</h1>
+      <div class="subtitle" id="financial-verification"><h2>Financial Verification</h2></div>
+    </div>
+
+    <div class="panel__content">
+
         <p>In order to get you access to the JEDI Cloud, we will need you to enter the details below that will help us verify and account for your Task Order.</p>
 
+        <hr />
+
         {% if extended %}
           <fieldset class="form__sub-fields form__sub-fields--warning">
             {{ OptionsInput(f.funding_type) }}
@@ -66,33 +68,33 @@
             </template>
 
             {{ TextInput(
-              f.clin_0001,placeholder="50,000",
+              f.clin_0001,
-              validation='integer'
+              validation='dollars'
             ) }}
 
             {{ TextInput(
-              f.clin_0003,placeholder="13,000",
+              f.clin_0003,
-              validation='integer'
+              validation='dollars'
             ) }}
 
             {{ TextInput(
-              f.clin_1001,placeholder="30,000",
+              f.clin_1001,
-              validation='integer'
+              validation='dollars'
             ) }}
 
             {{ TextInput(
-              f.clin_1003,placeholder="7,000",
+              f.clin_1003,
-              validation='integer'
+              validation='dollars'
             ) }}
 
             {{ TextInput(
-              f.clin_2001,placeholder="30,000",
+              f.clin_2001,
-              validation='integer'
+              validation='dollars'
             ) }}
 
             {{ TextInput(
-              f.clin_2003,placeholder="7,000",
+              f.clin_2003,
-              validation='integer'
+              validation='dollars'
             ) }}
 
             <div class="usa-input usa-input--validation--anything {% if f.task_order.errors %} usa-input--error {% endif %}">
@@ -114,54 +116,60 @@
 
         {{ TextInput(f.uii_ids,
           paragraph=True,
-          placeholder="e.g.: DI 0CVA5786950 \nUN1945326361234786950",
+          placeholder="examples: \nDI 0CVA5786950 \nUN1945326361234786950",
           tooltip="A Unique Item Identifer is a unique code that helps the Department of Defense track and report on where and how digital assets are stored. <br>Not all applications have an existing UII number assigned."
           ) }}
 
         {{ TextInput(f.pe_id,
-          placeholder="e.g.: 0302400A",
+          placeholder="e.g.: 0105688F",
-          tooltip="Program Element numbers helps the Department of Defense identify which offices\\' budgets are contributing towards this resource use."
+          validation="peNumber"
           ) }}
 
-        {{ TextInput(f.treasury_code,placeholder="e.g.: 00123456") }}
+        {{ TextInput(f.treasury_code,placeholder="e.g.: 00123456",validation="treasuryCode") }}
 
-        {{ TextInput(f.ba_code,placeholder="e.g.: 02A") }}
+        {{ TextInput(f.ba_code,placeholder="e.g.: 02A",validation="baCode") }}
+
+        <hr />
 
         <h3>Contracting Officer (KO) Information</h3>
-        {{ TextInput(f.fname_co,placeholder="Contracting Officer First Name") }}
 
-        {{ TextInput(f.lname_co,placeholder="Contracting Officer Last Name") }}
+        <div class='form-row'>
-
+          <div class='form-col form-col--half '>{{ TextInput(f.fname_co) }}</div>
-        {{ TextInput(
+          <div class='form-col form-col--half '>{{ TextInput(f.lname_co) }}</div>
-          f.email_co,validation='email',
+        </div>
-          placeholder="jane@mail.mil"
-          ) }}
-
-        {{ TextInput(
-          f.office_co,
-          placeholder="e.g.: WHS"
-          ) }}
 
+        <div class='form-row'>
+          <div class='form-col form-col--half'>{{ TextInput(f.email_co,validation='email', placeholder='e.g. jane@mail.mil') }}</div>
+          <div class='form-col form-col--half'>{{ TextInput(f.office_co,placeholder="e.g.: WHS") }}</div>
+        </div>
 
+        <hr />
 
         <h3>Contracting Officer Representative (COR) Information</h3>
-        {{ TextInput(f.fname_cor,placeholder="Contracting Officer Representative First Name") }}
+        <div class='form-row'>
+          <div class='form-col form-col--half '>{{ TextInput(f.fname_cor) }}</div>
+          <div class='form-col form-col--half '>{{ TextInput(f.lname_cor) }}</div>
+        </div>
 
-        {{ TextInput(f.lname_cor,placeholder="Contracting Officer Representative Last Name") }}
+        <div class='form-row'>
-
+          <div class='form-col form-col--half'>{{ TextInput(f.email_cor,validation='email', placeholder='e.g. jane@mail.mil') }}</div>
-        {{ TextInput(f.email_cor,validation='email',placeholder="jane@mail.mil") }}
+          <div class='form-col form-col--half'>{{ TextInput(f.office_cor,placeholder="e.g.: WHS") }}</div>
-
+        </div>
-        {{ TextInput(f.office_cor,placeholder="e.g.: WHS") }}
 
 
       {% endautoescape %}
+
+    </div>
+  </div>
+
   {% endblock form %}
   {% block next %}
+  <div class='action-group'>
     <input type='submit' class='usa-button usa-button-primary' value='Save & Continue' />
+  </div>
   {% endblock %}
   </form>
-    </div>
+
-  </div>
 </div>
 </financial>
 

templates/requests/screen-2.html

@@ -20,10 +20,15 @@
 
 <p>Please tell us more about you.</p>
 
-{{ TextInput(f.fname_request, placeholder='First Name') }}
+<div class='form-row'>
-{{ TextInput(f.lname_request, placeholder='Last Name') }}
+  <div class='form-col form-col--half'>{{ TextInput(f.fname_request) }}</div>
-{{ TextInput(f.email_request, placeholder='jane@mail.mil', validation='email') }}
+  <div class='form-col form-col--half'>{{ TextInput(f.lname_request) }}</div>
-{{ TextInput(f.phone_number, placeholder='e.g. (123) 456-7890', validation='usPhone') }}
+</div>
+
+<div class='form-row'>
+  <div class='form-col form-col--half'>{{ TextInput(f.email_request, placeholder='e.g. jane@mail.mil', validation='email') }}</div>
+  <div class='form-col form-col--half'>{{ TextInput(f.phone_number, placeholder='e.g. (123) 456-7890', validation='usPhone') }}</div>
+</div>
 
 <p>We want to collect the following information from you for security auditing and determining priviledged user access.</p>
 

templates/requests/screen-3.html

@@ -36,10 +36,17 @@
     {{ CheckboxInput(f.am_poc) }}
 
     <template v-if="!am_poc" v-cloak>
-      {{ TextInput(f.fname_poc,placeholder='First Name') }}
+
-      {{ TextInput(f.lname_poc,placeholder='Last Name') }}
+      <div class='form-row'>
-      {{ TextInput(f.email_poc,placeholder='jane@mail.mil', validation='email') }}
+        <div class='form-col form-col--half'>{{ TextInput(f.fname_poc) }}</div>
-      {{ TextInput(f.dodid_poc,placeholder='10-digit number on the back of the CAC', validation='dodId') }}
+        <div class='form-col form-col--half'>{{ TextInput(f.lname_poc) }}</div>
+      </div>
+
+      <div class='form-row'>
+        <div class='form-col form-col--half'>{{ TextInput(f.email_poc, validation='email', placeholder='e.g. jane@mail.mil') }}</div>
+        <div class='form-col form-col--half'>{{ TextInput(f.dodid_poc, validation='dodId', placeholder='10-digit number on back of CAC') }}</div>
+      </div>
+
     </template>
 
   </div>