Update copy, add totals box, style buttons

atst/forms/task_order.py

@@ -19,8 +19,8 @@ from atst.utils.localization import translate
 
 
 class CLINForm(FlaskForm):
-    jedi_clin_type = SelectField("Jedi CLIN type", choices=JEDI_CLIN_TYPES)
+    jedi_clin_type = SelectField("CLIN type", choices=JEDI_CLIN_TYPES)
-    number = StringField(validators=[Required()])
+    number = StringField(label="CLIN", validators=[Required()])
     start_date = DateField(
         translate("forms.task_order.start_date_label"),
         format="%m/%d/%Y",
@@ -31,7 +31,7 @@ class CLINForm(FlaskForm):
         format="%m/%d/%Y",
         validators=[Required()],
     )
-    obligated_amount = DecimalField()
+    obligated_amount = DecimalField(label="Funds obligated for cloud")
     loas = FieldList(StringField())
 
 
@@ -42,8 +42,7 @@ class UnclassifiedCLINForm(CLINForm):
 
 class TaskOrderForm(BaseForm):
     number = StringField(
-        translate("forms.task_order.number_label"),
+        label=translate("forms.task_order.number_description"),
-        description=translate("forms.task_order.number_description"),
         validators=[Required()],
     )
     pdf = FileField(

js/components/forms/to_form.js

@@ -2,6 +2,7 @@ import ClinFields from '../clin_fields'
 import DateSelector from '../date_selector'
 import FormMixin from '../../mixins/form'
 import optionsinput from '../options_input'
+import SemiCollapsibleText from '../semi_collapsible_text'
 import textinput from '../text_input'
 import uploadinput from '../upload_input'
 
@@ -14,6 +15,7 @@ export default {
     ClinFields,
     DateSelector,
     optionsinput,
+    SemiCollapsibleText,
     textinput,
     uploadinput,
   },

templates/components/text_input.html

@@ -14,7 +14,8 @@
   initial_value='',
   classes='',
   noMaxWidth=False,
-  optional=False) -%}
+  optional=False,
+  showLabel=True) -%}
 
   <textinput
     v-cloak
@@ -32,6 +33,7 @@
       class='{% if disabled %}input--disabled{% endif %} {{ classes }}'
       v-bind:class="['usa-input usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid, 'usa-input--validation--paragraph': paragraph, 'no-max-width': noMaxWidth }]">
 
+      {% if showLabel %}
         <label for={{field.name}}>
           <div class="usa-input__title">
             {{ label }}
@@ -50,6 +52,7 @@
           {% endif %}
 
         </label>
+      {% endif %}
 
       {% if paragraph %}
 

templates/components/totals_box.html

@@ -1,14 +1,19 @@
-{% macro TotalsBox(task_order) -%}
+{% macro TotalsBox(task_order=None, obligated_funds=0, contract_amount=0) -%}
 
   <div class="col totals-box">
+    {% if task_order %}
+      {% set obligated_funds = task_order.total_obligated_funds %}
+      {% set contract_amount = task_order.total_contract_amount %}
+    {% endif %}
+
     <div class="h4">Total obligated funds</div>
-    <div class="h3">{{ task_order.total_obligated_funds | dollars }}</div>
+    <div class="h3">{{ obligated_funds | dollars }}</div>
     <div>This is the funding allocated to cloud services. It may be 100% or a portion of the total task order budget.</div>
 
     <hr>
 
     <div class="h4">Total contract amount</div>
-    <div class="h3">{{ task_order.total_contract_amount | dollars }}</div>
+    <div class="h3">{{ contract_amount | dollars }}</div>
     <div>This is the value of all funds obligated for this contract, including -- but not limited to -- funds obligated for the cloud.</div>
 
   </div>

templates/task_orders/edit.html

@@ -6,17 +6,13 @@
 {% from 'components/save_button.html' import SaveButton %}
 {% from "components/sticky_cta.html" import StickyCTA %}
 {% from 'components/text_input.html' import TextInput %}
+{% from "components/totals_box.html" import TotalsBox %}
 {% from 'components/upload_input.html' import UploadInput %}
 
 {% macro LOAInput() %}
   <div v-for="loa in loas">
     <textinput :name="'clins-' + clinIndex + '-loas-' + loaIndex(loa)" inline-template>
       <div>
-        <label :for="name">
-          <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
-          <span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
-          <div class="usa-input__title">Line of Accounting</div>
-        </label>
 
         <masked-input
           v-on:input='onInput'
@@ -44,23 +40,32 @@
     </textinput>
   </div>
 
-  <button v-on:click="addLoa" type="button">
+  <button
-    Add another line of accounting
+    class="icon-link"
+    v-on:click="addLoa"
+    type="button">
+    {{ Icon('plus') }}
+    <span>Add another line of accounting</span>
   </button>
+
 {% endmacro %}
 
 {% macro CLINFields(fields, index) %}
+  {% if index != 0 %}
+    <hr>
+  {% endif %}
+
   <clin-fields
     v-bind:initial-clin-index='{{ index }}'
     v-bind:initial-loa-count="{{ fields.loas.data | length }}"
     inline-template>
     <div>
-      <hr>
       {{ OptionsInput(fields.jedi_clin_type) }}
       {{ TextInput(fields.number) }}
 
+      <div>Line of accounting (43 characters)</div>
       {% for loa in fields.loas %}
-        {{ TextInput(loa) }}
+        {{ TextInput(loa, showLabel=False) }}
       {% endfor %}
 
       {{ LOAInput() }}
@@ -84,9 +89,9 @@
       </a>
     </span>
   {% endcall %}
-  <div class="col task-order-form">
-    {% include "fragments/flash.html" %}
   <to-form inline-template v-bind:initial-clin-count="{{ form.clins.data | length }}">
+    <div class="task-order-summary">
+      {% include "fragments/flash.html" %}
         {% if task_order_id %}
           {% set action = url_for("task_orders.update", portfolio_id=portfolio.id, task_order_id=task_order_id) %}
         {% else %}
@@ -95,23 +100,39 @@
         <form id="new-task-order" action='{{ action }}' method="POST" autocomplete="off" enctype="multipart/form-data">
           {{ form.csrf_token }}
 
-
+          <semi-collapsible-text inline-template>
-            <p>
+            <div>
+              <div v-bind:class="{ 'semi-collapsed' : !open }">
                 {{ "task_orders.new.form_help_text" | translate }}
-            </p>
+              </div>
+              <a v-on:click='toggle' v-show="!open" class="right more">More{{ Icon('caret_down') }}</a>
+              <a v-on:click='toggle' v-show="open" class="right more">Less{{ Icon('caret_up') }}</a>
+            </div>
+          </semi-collapsible-text>
+
           <hr>
+
+          <div class="h1">Add your task order</div>
           {{ TextInput(form.number, validation='taskOrderNumber') }}
+
+          <div class="h3">Add the summary of cloud funding</div>
+          <div>
+            Data must match with what is in your uploaded document.
+          </div>
+
           {% for clin in form.clins %}
             {{ CLINFields(clin, index=loop.index - 1) }}
           {% endfor %}
+
           <div v-for="clin in clins">
-              <hr>
+            <hr v-if="clinIndex !== 0">
             <clin-fields v-bind:initial-clin-index='clinIndex' inline-template>
               <div>
                 <div class="usa-input">
                   <fieldset data-ally-disabled="true" class="usa-input__choices">
                       <legend>
                         <div class="usa-input__title">
+                          CLIN type
                         </div>
                       </legend>
                       <select :id="'clins-' + clinIndex + '-jedi_clin_type'" :name="'clins-' + clinIndex + '-jedi_clin_type'">
@@ -128,7 +149,7 @@
                     <label :for="name">
                       <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
                       <span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
-                        <div class="usa-input__title"> Number </div>
+                      <div class="usa-input__title">CLIN</div>
                     </label>
 
                     <masked-input
@@ -156,6 +177,7 @@
                   </div>
                 </textinput>
 
+                <div>Line of accounting (43 characters)</div>
                 {{ LOAInput() }}
 
                 <date-selector :name-tag="'clins-' + clinIndex + '-start_date'" inline-template>
@@ -273,7 +295,7 @@
                     <label :for="name">
                       <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
                       <span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
-                        <div class="usa-input__title">Obligated Amount</div>
+                      <div class="usa-input__title">Funds obligated for cloud</div>
                     </label>
 
                     <masked-input
@@ -301,16 +323,28 @@
                     </template>
                   </div>
                 </textinput>
-
               </div>
             </clin-fields>
           </div>
 
-        <button v-on:click="addClin" type="button">
+        <button
-          Add CLIN
+          class="icon-link"
+          v-on:click="addClin"
+          type="button">
+          {{ Icon('plus') }}
+          <span>Add another CLIN or Sub-CLIN</span>
         </button>
-        {{ UploadInput(form.pdf) }}
+
-      </form>
+        <hr>
-    </to-form>
+        <div class="h3">Upload your supporting documentation</div>
+        <div>
+          Upload a single PDF containing all relevant information. {{ Icon('help')}}
         </div>
+        {{ UploadInput(form.pdf) }}
+
+      </form>
+      {{ TotalsBox(task_order=task_order) }}
+    </div>
+  </to-form>
+
 {% endblock %}

translations.yaml

@@ -302,7 +302,7 @@ forms:
       military: Military
       other: Other <em class='description'>(E.g. University or other partner)</em>
     dev_team_other_label: Development Team Other
-    end_date_label: End Date
+    end_date_label: End of period of performance (PoP)
     file_format_not_allowed: Only PDF or PNG files can be uploaded.
     first_step_title: Overview
     ko_invite_label: Invite contracting officer to Task Order Builder
@@ -330,7 +330,7 @@ forms:
     skip_invite_description: |
       <i>An invitation won't actually be sent until you click Done on the Review page. You can skip this for now and invite them later.</i>
     so_invite_label: Invite Security Officer to Task Order Builder
-    start_date_label: Start Date
+    start_date_label: Start of period of performance (PoP)
     team_experience:
       built_1: Built, migrated, or consulted on 1-2 applications
       built_3: Built, migrated, or consulted on 3-5 applications