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

Financial verification modal 159014770

atst/app.py

@@ -68,7 +68,7 @@ def make_flask_callbacks(app):
         )
         g.dev = os.getenv("FLASK_ENV", "dev") == "dev"
         g.matchesPath = lambda href: re.match("^" + href, request.path)
-        g.modalOpen = request.args.get("modal", False)
+        g.modal = request.args.get("modal", None)
         g.current_user = {
             "id": "cce17030-4109-4719-b958-ed109dbb87c8",
             "first_name": "Amanda",

atst/routes/requests/index.py

@@ -33,4 +33,6 @@ def requests_index():
 
     mapped_requests = [map_request(r) for r in requests]
 
-    return render_template("requests.html", requests=mapped_requests)
+    pending_fv = any(Requests.is_pending_financial_verification(r) for r in requests)
+
+    return render_template("requests.html", requests=mapped_requests, pending_financial_verification=pending_fv)

atst/routes/requests/requests_form.py

@@ -4,6 +4,7 @@ from . import requests_bp
 from atst.domain.requests import Requests
 from atst.routes.requests.jedi_request_flow import JEDIRequestFlow
 from atst.models.permissions import Permissions
+from atst.models.request_status_event import RequestStatus
 from atst.domain.exceptions import UnauthorizedError
 
 
@@ -99,8 +100,8 @@ def requests_submit(request_id=None):
     request = Requests.get(request_id)
     Requests.submit(request)
 
-    if request.status == "approved":
+    if request.status == RequestStatus.PENDING_FINANCIAL_VERIFICATION:
-        return redirect("/requests?modal=True")
+        return redirect("/requests?modal=pendingFinancialVerification")
 
     else:
         return redirect("/requests")

js/index.js

@@ -20,7 +20,15 @@ const app = new Vue({
     return {
       modals: {
         styleguideModal: false,
+        pendingFinancialVerification: false,
       }
     }
+  },
+  mounted: function() {
+    const modalOpen = document.querySelector("#modalOpen");
+    if (modalOpen) {
+      const modal = modalOpen.getAttribute("data-modal");
+      this.modals[modal] = true;
+    }
   }
 })

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,36 +4,17 @@
 {% from "components/modal.html" import Modal %}
 {% from "components/empty_state.html" import EmptyState %}
 
-{% block modal %}
+{% block content %}
-  {% if g.modalOpen %}
-    {% call Modal() %}
-      <h1>Your request is now approved!</h1>
 
-      <p>
+  {% call Modal(name='pendingFinancialVerification', dismissable=True) %}
-        Your next step is to create a <b>Task Order (T.O.)</b> associated with
+    <h1>Request submitted!</h1>
-        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>"
-      ) }}
 
+    {% include 'fragments/pending_financial_verification.html' %}
 
     <div class='action-group'>
-        <a href='/requests' class='action-group__action usa-button'>Close</a>
+      <a v-on:click="closeModal('pendingFinancialVerification')" class='action-group__action usa-button'>Close</a>
     </div>
   {% endcall %}
-  {% endif %}
-{% endblock %}
-
-{% block content %}
 
 {% if not requests %}
 
@@ -46,9 +27,11 @@
 
 {% else %}
 
-  {{ Alert('Pending Financial Verification',
+  {% if 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>"
+
-  ) }}
+    {{ Alert('Pending Financial Verification', fragment="fragments/pending_financial_verification.html") }}
+
+  {% endif %}
 
   <div class="col col--grow">
 

tests/routes/test_request_submit.py

@@ -1,6 +1,7 @@
 import pytest
 from tests.mocks import MOCK_USER
 from tests.factories import RequestFactory
+from atst.models.request_status_event import RequestStatus
 
 
 def _mock_func(*args, **kwargs):
@@ -27,12 +28,11 @@ def test_submit_autoapproved_reviewed_request(monkeypatch, client, user_session)
     user_session()
     monkeypatch.setattr("atst.domain.requests.Requests.get", _mock_func)
     monkeypatch.setattr("atst.domain.requests.Requests.submit", _mock_func)
-    monkeypatch.setattr("atst.models.request.Request.status", "approved")
+    monkeypatch.setattr("atst.models.request.Request.status", RequestStatus.PENDING_FINANCIAL_VERIFICATION)
-    # this just needs to send a known invalid form value
     response = client.post(
         "/requests/submit/1",
         headers={"Content-Type": "application/x-www-form-urlencoded"},
         data="",
         follow_redirects=False,
     )
-    assert "/requests?modal=True" in response.headers["Location"]
+    assert "/requests?modal=" in response.headers["Location"]