add mechanism for initial modal display; fix financial verification modal display

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/requests.html

@@ -4,37 +4,32 @@
 {% 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>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 v-on:click="closeModal('pendingFinancialVerification')" class='action-group__action usa-button'>Close</a>
+    </div>
+  {% endcall %}
+
 {% if not requests %}
 
   {{ EmptyState(