Use template args for the contract start and end date

pointing to base.ini in the JS file resulted in the raw string content of base.ini to be in the JS bundle

atst/routes/task_orders/new.py

@@ -7,6 +7,7 @@ from flask import (
     current_app as app,
     jsonify,
 )
+from datetime import datetime
 
 from . import task_orders_bp
 from atst.domain.authz.decorator import user_can_access_decorator as user_can
@@ -22,6 +23,9 @@ def render_task_orders_edit(
 ):
     render_args = extra_args or {}
 
+    render_args["contract_start"] = app.config.get("CONTRACT_START_DATE")
+    render_args["contract_end"] = app.config.get("CONTRACT_END_DATE")
+
     if task_order_id:
         task_order = TaskOrders.get(task_order_id)
         portfolio_id = task_order.portfolio_id

js/components/clin_fields.js

@@ -12,12 +12,6 @@ const END_DATE = 'end_date'
 const POP = 'period_of_performance'
 const NUMBER = 'number'
 
-const fs = require('fs')
-const ini = require('ini')
-const config = ini.parse(fs.readFileSync('./config/base.ini', 'utf-8'))
-const CONTRACT_START_DATE = new Date(config.default.CONTRACT_START_DATE)
-const CONTRACT_END_DATE = new Date(config.default.CONTRACT_END_DATE)
-
 export default {
   name: 'clin-fields',
 
@@ -43,6 +37,14 @@ export default {
       type: String,
       default: null,
     },
+    contractStart: {
+      type: String,
+      required: true,
+    },
+    contractEnd: {
+      type: String,
+      required: true,
+    },
   },
 
   data: function() {
@@ -56,6 +58,8 @@ export default {
     const clinNumber = !!this.initialClinNumber
       ? this.initialClinNumber
       : undefined
+    const contractStartDate = new Date(this.contractStart)
+    const contractEndDate = new Date(this.contractEnd)
 
     return {
       clinIndex: this.initialClinIndex,
@@ -64,6 +68,8 @@ export default {
       popValid: popValidation,
       startDateValid: false,
       endDateValid: false,
+      contractStartDate: contractStartDate,
+      contractEndDate: contractEndDate,
       clinNumber: clinNumber,
       showClin: true,
       popErrors: [],
@@ -75,14 +81,14 @@ export default {
         {
           func: this.popStartsAfterContract,
           message: `PoP start date must be on or after ${format(
-            CONTRACT_START_DATE,
+            contractStartDate,
             'MMM D, YYYY'
           )}.`,
         },
         {
           func: this.popEndsBeforeContract,
           message: `PoP end date must be before or on ${format(
-            CONTRACT_END_DATE,
+            contractEndDate,
             'MMM D, YYYY'
           )}.`,
         },
@@ -128,14 +134,14 @@ export default {
 
     popStartsAfterContract: function() {
       if (this.startDateValid) {
-        return this.startDate >= CONTRACT_START_DATE
+        return this.startDate >= this.contractStartDate
       }
       return true
     },
 
     popEndsBeforeContract: function() {
       if (this.endDateValid) {
-        return this.endDate <= CONTRACT_END_DATE
+        return this.endDate <= this.contractEndDate
       }
       return true
     },

templates/task_orders/step_3.html

@@ -23,6 +23,8 @@
       v-bind:initial-clin-index='clinIndex'
       v-bind:initial-clin-type="'JEDI_CLIN_1'"
     {% endif %}
+    v-bind:contract-start="'{{ contract_start | string }}'"
+    v-bind:contract-end="'{{ contract_end | string }}'"
     inline-template>
     <div class="clin-card" v-if="showClin">
       <div class="card__title">
@@ -169,6 +171,7 @@
             {{ 'task_orders.form.pop' | translate }}
           </div>
         </div>
+        {% set contract_end_formatted = contract_end | dateFromString(formatter="%Y-%m-%d") | formattedDate(formatter="%B %d, %Y") %}
         {% if fields %}
           <div class="form-row">
             <div class="form-col">
@@ -178,7 +181,7 @@
           <div class="form-row">
             <div class="form-col">
               {% call DatePicker(fields.end_date, watch=True, optional=False) %}
-                {{ Alert(message="task_orders.form.pop_end_alert" | translate) }}
+                {{ Alert(message="task_orders.form.pop_end_alert" | translate({'end_date': contract_end_formatted})) }}
               {% endcall %}
             </div>
           </div>
@@ -255,7 +258,7 @@
                       {{ 'task_orders.form.pop_end' | translate }}
                     </div>
 
-                    {{ Alert(message="A CLIN's period of performance must end before September 14, 2022.") }}
+                    {{ Alert(message="task_orders.form.pop_end_alert" | translate({'end_date': contract_end_formatted})) }}
 
                     <p class='usa-input__help'>
                       {{ 'task_orders.form.pop_example' | translate }}

translations.yaml

@@ -385,7 +385,7 @@ task_orders:
     obligated_funds_label: Obligated Funds
     pop: Period of Performance
     pop_end: End Date
-    pop_end_alert: "A CLIN's period of performance must end before September 14, 2022."
+    pop_end_alert: "A CLIN's period of performance must end before {end_date}."
     pop_example: "For example: 07 04 1776"
     pop_start: Start Date
     review_button: Review task order