Use translations and make errors look pretty

atst/forms/task_order.py

@@ -67,19 +67,25 @@ class CLINForm(FlaskForm):
             and self.start_date.data > self.end_date.data
         ):
             self.start_date.errors.append(
-                translate("forms.task_order.start_date_error")
+                translate("forms.task_order.pop_errors.date_order")
             )
             valid = False
 
         if self.start_date.data and self.start_date.data <= CONTRACT_START_DATE:
             self.start_date.errors.append(
-                "PoP start date must be on or after {}.".format(CONTRACT_START_DATE)
+                translate(
+                    "forms.task_order.pop_errors.start",
+                    {"date": CONTRACT_START_DATE.strftime("%b %d, %Y")},
+                )
             )
             valid = False
 
         if self.end_date.data and self.end_date.data >= CONTRACT_END_DATE:
             self.end_date.errors.append(
-                "PoP end date must be before or on {}.".format(CONTRACT_END_DATE)
+                translate(
+                    "forms.task_order.pop_errors.end",
+                    {"date": CONTRACT_END_DATE.strftime("%b %d, %Y")},
+                )
             )
             valid = False
 

js/components/clin_fields.js

@@ -1,4 +1,5 @@
 import * as R from 'ramda'
+import moment from 'moment'
 
 import DateSelector from './date_selector'
 import { emitEvent } from '../lib/emitters'
@@ -70,11 +71,15 @@ export default {
         },
         {
           func: this.popStartsAfterContract,
-          message: `PoP start date must be on or after ${CONTRACT_START_DATE}.`,
+          message: `PoP start date must be on or after ${moment(
+            CONTRACT_START_DATE
+          ).format('MMM D, YYYY')}.`,
         },
         {
           func: this.popEndsBeforeContract,
-          message: `PoP end date must be before or on ${CONTRACT_END_DATE}.`,
+          message: `PoP end date must be before or on ${moment(
+            CONTRACT_END_DATE
+          ).format('MMM D, YYYY')}.`,
         },
       ],
     }

package.json

@@ -18,6 +18,7 @@
     "azure-storage": "^2.10.3",
     "babel-polyfill": "^6.26.0",
     "date-fns": "^1.29.0",
+    "moment": "^2.24.0",
     "ramda": "^0.25.0",
     "stickybits": "^3.6.6",
     "svg-innerhtml": "^1.1.0",

templates/task_orders/step_3.html

@@ -314,8 +314,8 @@
           </div>
         {% endif %}
         <div class="form-row">
-          <div class="usa-input-error-message form-has-errors" v-for="error in popErrors" :key="error">
+          <div class="usa-input-error-message form-has-errors">
-            <div v-html='error'></div>
+            <p v-for="error in popErrors" :key="error" v-html='error'></p>
           </div>
         </div>
       </div>

tests/forms/test_task_order.py

@@ -24,7 +24,10 @@ def test_clin_form_start_date_before_end_date():
     )
     clin_form = CLINForm(obj=invalid_clin)
     assert not clin_form.validate()
-    assert translate("forms.task_order.start_date_error") in clin_form.start_date.errors
+    assert (
+        translate("forms.task_order.pop_errors.date_order")
+        in clin_form.start_date.errors
+    )
     valid_start = datetime.date(2020, 1, 1)
     valid_end = datetime.date(2020, 12, 12)
     valid_clin = factories.CLINFactory.create(
@@ -50,10 +53,16 @@ def test_clin_form_pop_dates_within_contract_dates():
     clin_form = CLINForm(obj=invalid_clin)
     assert not clin_form.validate()
     assert (
-        "PoP start date must be on or after {}.".format(CONTRACT_START_DATE)
+        translate(
+            "forms.task_order.pop_errors.start",
+            {"date": CONTRACT_START_DATE.strftime("%b %d, %Y")},
+        )
     ) in clin_form.start_date.errors
     assert (
-        "PoP end date must be before or on {}.".format(CONTRACT_END_DATE)
+        translate(
+            "forms.task_order.pop_errors.end",
+            {"date": CONTRACT_END_DATE.strftime("%b %d, %Y")},
+        )
     ) in clin_form.end_date.errors
 
     valid_start = CONTRACT_START_DATE + relativedelta(months=1)

translations.yaml

@@ -197,9 +197,12 @@ forms:
       not_sure: 'Not sure, unsure if planning to develop natively in the cloud'
       not_sure_help: Not sure? Talk to your technical lead about where and how they plan on developing your application.
     number_description: Task order number (13 digits)
+    pop_errors:
+      date_order: PoP start date must be before end date.
+      end: PoP end date must be before or on {date}.
+      start: PoP start date must be on or after {date}.
     scope_description: 'What do you plan to do on the cloud? Some examples might include migrating an existing application or creating a prototype. You don’t need to include a detailed plan of execution, but should list key requirements. This section will be reviewed by your contracting officer, but won’t be sent to the CCPO. <p>Not sure how to describe your scope? <a href="#">Read some examples</a> to get some inspiration.</p>'
     scope_label: Cloud project scope
-    start_date_error: PoP start date must be before end date.
     team_experience:
       built_1: Built, migrated, or consulted on 1-2 applications
       built_3: Built, migrated, or consulted on 3-5 applications