Change TO fragment to a macro to make it reusable in the builder and view page, final tweaks to review and view pages

templates/task_orders/builder_base.html

@@ -9,7 +9,7 @@
       {{ form.csrf_token }}
 
       {{ StickyCTA(
-        text='task_orders.form.sticky_header_text' | translate,
+        text=sticky_cta_text,
         context=('task_orders.form.sticky_header_context' | translate({"step": step}) )) }}
 
       {% call Modal(name='cancel', dismissable=True) %}

templates/task_orders/fragments/task_order_view.html

@@ -2,86 +2,90 @@
 {% from "components/semi_collapsible_text.html" import SemiCollapsibleText %}
 {% from "components/tooltip.html" import Tooltip %}
 
+{% macro TaskOrderView(task_order, portfolio, builder_mode=False) %}
+  {% set obligated_funds = task_order.total_obligated_funds %}
+  {% set contract_amount = task_order.total_contract_amount %}
+  {% set expended_funds = task_order.invoiced_funds %}
 
-{% set obligated_funds = task_order.total_obligated_funds %}
-{% set contract_amount = task_order.total_contract_amount %}
-{% set expended_funds = task_order.invoiced_funds %}
-
-<div>
-  <section class="row">
-    <div class='col col--grow reporting-summary-item'>
-      <h4 class="reporting-summary-item__header">
-        <span class="reporting-summary-item__header-text">Total obligated funds</span>
-        {{ Tooltip(("task_orders.review.tooltip.obligated_funds" | translate), title="", classes="reporting-summary-item__header-icon") }}
-      </h4>
-      <p class="reporting-summary-item__value--large">
-        {{ obligated_funds | dollars }}
-      </p>
-    </div>
-    <div class='col col--grow reporting-summary-item'>
-      <h4 class="reporting-summary-item__header">
-        <span class="reporting-summary-item__header-text">Total Task Order value</span>
-        {{ Tooltip(("task_orders.review.tooltip.total_value" | translate), title="", classes="reporting-summary-item__header-icon") }}
-      </h4>
-      {% set earliest_pop_start_date, latest_pop_end_date = portfolio.funding_duration %}
-      {% if earliest_pop_start_date and latest_pop_end_date  %}
+  <div>
+    <section class="row">
+      <div class='col col--grow reporting-summary-item'>
+        <h4 class="reporting-summary-item__header">
+          <span class="reporting-summary-item__header-text">Total obligated funds</span>
+          {{ Tooltip(("task_orders.review.tooltip.obligated_funds" | translate), title="", classes="reporting-summary-item__header-icon") }}
+        </h4>
         <p class="reporting-summary-item__value--large">
-          {{ contract_amount | dollars }}
+          {{ obligated_funds | dollars }}
         </p>
-      {% else %}
-        <p class="reporting-summary-item__value--large"> - </p>
-      {% endif %}
-    </div>
-    <div class='col col--grow reporting-summary-item'>
-      <h4 class="reporting-summary-item__header">
-        <span class="reporting-summary-item__header-text">Total expended funds</span>
-        {{ Tooltip(("task_orders.review.tooltip.expended_funds" | translate), title="", classes="reporting-summary-item__header-icon") }}
-      </h4>
-      <p class="reporting-summary-item__value--large">
-        {{ expended_funds | dollars }}
-      </p>
-    </div>
-  </section>
-  <hr>
-  <section>
-    <h4>Documents</h4>
-    <div class="panel panel__content">
-      <a href="{{ pdf_download_url }}">
-        {{ task_order.pdf.filename }}
-        {{ Icon('link', classes="icon--primary icon--medium") }}
-      </a>
-    </div>
-  </section>
-  <hr>
-  <section>
-    <h4>CLIN summary</h4>
-    <table class="fixed-table-wrapper atat-table">
-      <thead>
-        <tr>
-          <th>{{ "task_orders.review.clins.number" | translate }}</th>
-          <th>{{ "task_orders.review.clins.type" | translate }}</th>
-          <th>{{ "task_orders.review.clins.idiq_clin_description" | translate }}</th>
-          <th>{{ "task_orders.review.clins.pop" | translate }}</th>
-          <th class="task-order__amount">{{ "task_orders.review.clins.total_amount" | translate }}</th>
-          <th class="task-order__amount">{{ "task_orders.review.clins.obligated" | translate }}</th>
-        </tr>
-      </thead>
+      </div>
+      <div class='col col--grow reporting-summary-item'>
+        <h4 class="reporting-summary-item__header">
+          <span class="reporting-summary-item__header-text">Total Task Order value</span>
+          {{ Tooltip(("task_orders.review.tooltip.total_value" | translate), title="", classes="reporting-summary-item__header-icon") }}
+        </h4>
+        {% set earliest_pop_start_date, latest_pop_end_date = portfolio.funding_duration %}
+        {% if earliest_pop_start_date and latest_pop_end_date  %}
+          <p class="reporting-summary-item__value--large">
+            {{ contract_amount | dollars }}
+          </p>
+        {% else %}
+          <p class="reporting-summary-item__value--large"> - </p>
+        {% endif %}
+      </div>
+      <div class='col col--grow reporting-summary-item'>
+        <h4 class="reporting-summary-item__header">
+          <span class="reporting-summary-item__header-text">Total expended funds</span>
+          {{ Tooltip(("task_orders.review.tooltip.expended_funds" | translate), title="", classes="reporting-summary-item__header-icon") }}
+        </h4>
+        <p class="reporting-summary-item__value--large">
+          {{ expended_funds | dollars }}
+        </p>
+      </div>
+    </section>
+    <hr>
+    <section>
+      <h4>Documents</h4>
+      <div class="panel panel__content">
+        {% if builder_mode %}
+          {{ Icon('ok', classes="icon--green icon--medium") }}
+        {% endif %}
+        <a href="{{ pdf_download_url }}">
+          {{ task_order.pdf.filename }}
+          {{ Icon('link', classes="icon--primary icon--medium") }}
+        </a>
+      </div>
+    </section>
+    <hr>
+    <section>
+      <h4>CLIN summary</h4>
+      <table class="fixed-table-wrapper atat-table">
+        <thead>
+          <tr>
+            <th>{{ "task_orders.review.clins.number" | translate }}</th>
+            <th>{{ "task_orders.review.clins.type" | translate }}</th>
+            <th>{{ "task_orders.review.clins.idiq_clin_description" | translate }}</th>
+            <th>{{ "task_orders.review.clins.pop" | translate }}</th>
+            <th class="task-order__amount">{{ "task_orders.review.clins.total_amount" | translate }}</th>
+            <th class="task-order__amount">{{ "task_orders.review.clins.obligated" | translate }}</th>
+          </tr>
+        </thead>
 
-      <tbody>
-        {% for clin in task_order.sorted_clins %}
-        <tr>
-          <td>{{ clin.number }}</td>
-          <td>{{ clin.type }}</td>
-          <td>{{ "{}".format(clin.jedi_clin_type) | translate}}</td>
-          <td>
-           {{ clin.start_date | formattedDate }} -  {{ clin.end_date | formattedDate }}
-          </td>
-          {# TODO: Swap in total CLIN amount #}
-          <td class="task-order__amount">{{ clin.total_amount | dollars }}</td>
-          <td class="task-order__amount">{{ clin.obligated_amount | dollars }}</td>
-        </tr>
-        {% endfor %}
-      </tbody>
-    </table>
-  </section>
-</div>
+        <tbody>
+          {% for clin in task_order.sorted_clins %}
+          <tr>
+            <td>{{ clin.number }}</td>
+            <td>{{ clin.type }}</td>
+            <td>{{ "{}".format(clin.jedi_clin_type) | translate}}</td>
+            <td>
+             {{ clin.start_date | formattedDate }} -  {{ clin.end_date | formattedDate }}
+            </td>
+            {# TODO: Swap in total CLIN amount #}
+            <td class="task-order__amount">{{ clin.total_amount | dollars }}</td>
+            <td class="task-order__amount">{{ clin.obligated_amount | dollars }}</td>
+          </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </section>
+  </div>
+{% endmacro %}

templates/task_orders/step_1.html

@@ -12,6 +12,7 @@
 
 {% set next_button_text = "Next: Add TO Number" %}
 {% set step = "1" %}
+{% set sticky_cta_text = 'task_orders.form.sticky_header_text' | translate %}
 
 {% block to_builder_form_field %}
   {{ TOFormStepHeader(

templates/task_orders/step_2.html

@@ -7,6 +7,7 @@
 {% set next_button_text = "Next: Add Base CLIN" %}
 {% set previous_button_link = url_for("task_orders.form_step_one_add_pdf", task_order_id=task_order_id) %}
 {% set step = "2" %}
+{% set sticky_cta_text = 'task_orders.form.sticky_header_text' | translate %}
 
 {% block to_builder_form_field %}
   {{ TOFormStepHeader(

templates/task_orders/step_3.html

@@ -8,6 +8,7 @@
 {% set next_button_text = "task_orders.form.step_3.next_button" | translate %}
 {% set previous_button_link = url_for("task_orders.form_step_two_add_number", task_order_id=task_order_id) %}
 {% set step = "3" %}
+{% set sticky_cta_text = 'task_orders.form.sticky_header_text' | translate %}
 
 
 {% block to_builder_form_field %}

templates/task_orders/step_4.html

@@ -1,17 +1,20 @@
 {% extends "task_orders/builder_base.html" %}
 
+{% from "task_orders/fragments/task_order_view.html" import TaskOrderView %}
+
 {% set action = url_for('task_orders.form_step_five_confirm_signature', task_order_id=task_order_id) %}
 {% set previous_button_link = url_for("task_orders.form_step_three_add_clins", task_order_id=task_order_id) %}
 {% set step = "4" %}
+{% set sticky_cta_text = 'task_orders.form.sticky_header_review_text' | translate %}
 
 {% block next_button %}
   <a
     href="{{ action }}"
     class="usa-button usa-button-primary">
-    Next: Submit Task Order
+    Next: Confirm
   </a>
 {% endblock %}
 
 {% block to_builder_form_field %}
-    {% include "task_orders/fragments/task_order_view.html" %}
+  {{ TaskOrderView(task_order, portfolio, builder_mode=True) }}
 {% endblock %}

templates/task_orders/step_5.html

@@ -8,6 +8,7 @@
 {% set next_button_text = 'task_orders.form.step_5.next_button' | translate %}
 {% set previous_button_link = url_for("task_orders.form_step_four_review", task_order_id=task_order_id) %}
 {% set step = "5" %}
+{% set sticky_cta_text = 'task_orders.form.sticky_header_text' | translate %}
 
 {% block to_builder_form_field %}
   {{ TOFormStepHeader(

templates/task_orders/view.html

@@ -1,4 +1,5 @@
 {% from "components/sticky_cta.html" import StickyCTA %}
+{% from "task_orders/fragments/task_order_view.html" import TaskOrderView %}
 
 {% extends 'portfolios/base.html' %}
 
@@ -11,6 +12,6 @@
   {% endcall %}
 
   <div class="task-order">
-    {% include "task_orders/fragments/task_order_view.html" %}
+    {{ TaskOrderView(task_order, portfolio) }}
   </div>
 {% endblock %}