Merge pull request #153 from dod-ccpo/financial-verification-modal-159014770

Financial verification modal 159014770

templates/base.html

@@ -35,6 +35,11 @@
 
     {% include 'footer.html' %}
     {% block modal %}{% endblock %}
+
+    {% if g.modal %}
+      <div data-modal="{{ g.modal }}" id="modalOpen">
+      </div>
+    {% endif %}
   </div>
 
   {% assets "js_all" %}

templates/components/alert.html

@@ -1,6 +1,6 @@
 {% from "components/icon.html" import Icon %}
 
-{% macro Alert(title, message=None, actions=None, level='info') -%}
+{% macro Alert(title, message=None, actions=None, level='info', fragment=None) -%}
   {% set role = 'alertdialog' if actions else 'alert' %}
   {% set levels = {
     'warning': {
@@ -31,6 +31,12 @@
         <div class='alert__message'>{{ message | safe }}</div>
       {% endif %}
 
+      {% if fragment %}
+        <div class='alert__message'>
+          {% include fragment %}
+        </div>
+      {% endif %}
+
       {% if actions %}
         <div class='alert__actions'>{{ actions | safe }}</div>
       {% endif %}

templates/fragments/pending_financial_verification.html

@@ -0,0 +1,12 @@
+<p>
+  The next step is to create a Task Order associated with JEDI Cloud.
+  Please contact a Contracting Officer (KO), Contracting Officer
+  Representative (COR), or a Financial Manager to help with this step.
+</p>
+<p>
+  Once the Task Order has been created, you will be asked to provide
+  details about the task order in the Financial Verification step.
+</p>
+<p>
+  <i>Learn more</i> about the JEDI Task Order and the Financial Verification process.
+</p>

templates/requests.html

@@ -4,37 +4,18 @@
 {% from "components/modal.html" import Modal %}
 {% from "components/empty_state.html" import EmptyState %}
 
-{% block modal %}
-  {% if g.modalOpen %}
-    {% call Modal() %}
-      <h1>Your request is now approved!</h1>
-
-      <p>
-        Your next step is to create a <b>Task Order (T.O.)</b> associated with
-        JEDI Cloud. Please consult a <b>Contracting Officer (KO)</b> or
-        <b>Contracting Officer Representative (COR)</b> to help with this step.
-      </p>
-
-      <p>
-        Once the Task Order (T.O.) has been created, we will need the following
-        details to create your account. These details will help keep your cloud
-        usage in sync with your budget.
-      </p>
-
-      {{ Alert("You'll need these details: ",
-        message="<p>Task Order Number</p><p>Contracting Officer: Name, E-mail and Office</p>"
-      ) }}
-
-
-      <div class='action-group'>
-        <a href='/requests' class='action-group__action usa-button'>Close</a>
-      </div>
-    {% endcall %}
-  {% endif %}
-{% endblock %}
-
 {% block content %}
 
+  {% call Modal(name='pendingFinancialVerification', dismissable=True) %}
+    <h1>Request submitted!</h1>
+
+    {% include 'fragments/pending_financial_verification.html' %}
+
+    <div class='action-group'>
+      <a v-on:click="closeModal('pendingFinancialVerification')" class='action-group__action usa-button'>Close</a>
+    </div>
+  {% endcall %}
+
 {% if not requests %}
 
   {{ EmptyState(
@@ -46,9 +27,11 @@
 
 {% else %}
 
-  {{ Alert('Pending Financial Verification',
-    message="<p>Your next step is to create a Task Order (T.O.) associated with JEDI Cloud. Please consult a Contracting Officer (KO) or Contracting Officer Representative (COR) to help with this step.</p>"
-  ) }}
+  {% if pending_financial_verification %}
+
+    {{ Alert('Pending Financial Verification', fragment="fragments/pending_financial_verification.html") }}
+
+  {% endif %}
 
   <div class="col col--grow">