modal logic

src/registrar/assets/js/get-gov-admin.js

@@ -510,11 +510,18 @@ function initializeWidgetOnList(list, parentId) {
     // Since this is an iife, these vars will be removed from memory afterwards
     var actionNeededReasonDropdown = document.querySelector("#id_action_needed_reason");
     var actionNeededEmail = document.querySelector("#id_action_needed_reason_email");
-    var helptext = document.querySelector("#action-needed-reason-email-placeholder-text")
+    var placeholderText = document.querySelector("#action-needed-reason-email-placeholder-text")
     var actionNeededEmailReadonly = document.querySelector("#action-needed-reason-email-readonly");
     var actionNeededEmailReadonlyTextarea = document.querySelector("#action-needed-reason-email-readonly-textarea")
     var editEmailButton = document.querySelector("#action-needed-reason-email-edit-button")
 
+    var actionNeededEmailAlreadySentModal = document.querySelector("#email-already-sent-modal")
+    var confirmEditEmailButton = document.querySelector("#email-already-sent-modal_continue-editing-button")
+
+    var actionNeededEmailHeader = document.querySelector("#action-needed-email-header")
+    var actionNeededEmailHeaderOnSave = document.querySelector("#action-needed-email-header-email-sent")
+    var actionNeededEmailFooter = document.querySelector("#action-needed-email-footer")
+
     let emailWasSent = document.getElementById("action-needed-email-sent");
     let actionNeededEmailData = document.getElementById('action-needed-emails-data').textContent;
     let actionNeededEmailsJson = JSON.parse(actionNeededEmailData);
@@ -542,15 +549,30 @@ function initializeWidgetOnList(list, parentId) {
         editEmailButton.addEventListener("click", function() {
             let emailHasBeenSentBefore = sessionStorage.getItem(emailSentSessionVariableName) !== null;
 
-            if (emailHasBeenSentBefore) {
+            if (true) { //emailHasBeenSentBefore
                 // Show warning Modal
-
+                setModalVisibility(actionNeededEmailAlreadySentModal, true)
             }
             else {
                 // Show editable view
                 showElement(actionNeededEmail.parentElement)
                 hideElement(actionNeededEmailReadonly)
-                hideElement(helptext)
+                hideElement(placeholderText)
+            }
+        });
+
+        confirmEditEmailButton.addEventListener("click", function() {
+            // Show editable view
+            showElement(actionNeededEmail.parentElement)
+            hideElement(actionNeededEmailReadonly)
+            hideElement(placeholderText)
+        });
+
+        // Event delegation for data-close-modal buttons 
+        // (since manually opening the modal interferes with how this normally works)
+        document.addEventListener('click', function(event) {
+            if (event.target.matches('[data-close-modal]')) {
+                setModalVisibility(actionNeededEmailAlreadySentModal, false)
             }
         });
 
@@ -575,6 +597,27 @@ function initializeWidgetOnList(list, parentId) {
             // Show an editable email field or a readonly one
             updateActionNeededEmailDisplay(reason)
         });
+
+        const saveButton = document.querySelector('input[name=_save]');
+        // The button does not exist if no fields are editable.
+        if (saveButton) {
+            saveButton.addEventListener('click', function(event) {
+                // Update appearance of action needed e-mail header
+                hideElement(actionNeededEmailHeader)
+                showElement(actionNeededEmailHeaderOnSave)
+                actionNeededEmailFooter.innerHTML = "This email has been sent to the creator of this request";
+            });
+        }
+    }
+
+    function setModalVisibility(modalToToggle, isVisible) {
+        if (!isVisible) {
+            modalToToggle.classList.remove('is-visible');
+            modalToToggle.setAttribute('aria-hidden', 'true');
+        } else {
+            modalToToggle.classList.add('is-visible');
+            modalToToggle.setAttribute('aria-hidden', 'false');
+        }
     }
 
     // Shows an editable email field or a readonly one.
@@ -584,27 +627,30 @@ function initializeWidgetOnList(list, parentId) {
 
         console.info("REASON: "+reason)
 
+        // showElement(actionNeededEmailHeader)
+        // hideElement(actionNeededEmailHeaderOnSave)
+        actionNeededEmailFooter.innerHTML = "This email will be sent to the creator of this request after saving";
+        hideElement(actionNeededEmail.parentElement)
+
         if (reason) {
             if (reason === "other") {
-                helptext.innerHTML = "No email will be sent.";
+                placeholderText.innerHTML = "No email will be sent.";
-                hideElement(actionNeededEmail.parentElement)
                 hideElement(actionNeededEmailReadonly)
-                showElement(helptext)
+                showElement(placeholderText)
             }
             else {
                 // Always show readonly view to start
-                hideElement(actionNeededEmail.parentElement)
                 showElement(actionNeededEmailReadonly)
-                hideElement(helptext)
+                hideElement(placeholderText)
             }
         } else {
-            helptext.innerHTML = "Select an action needed reason to see email";
+            placeholderText.innerHTML = "Select an action needed reason to see email";
-            hideElement(actionNeededEmail.parentElement)
             hideElement(actionNeededEmailReadonly)
-            showElement(helptext)
+            showElement(placeholderText)
         }
     }
 
+
 })();
 
 

src/registrar/templates/django/admin/includes/detail_table_fieldset.html

@@ -152,15 +152,74 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
 
         <div
         class="usa-modal"
-            id="toggle-email-already-sent-alert"
+        id="email-already-sent-modal"
         aria-labelledby="Are you sure you want to edit this email?"
         aria-describedby="The creator of this request already received an email"
         >
-            {% include 'includes/modal.html' with modal_heading="Are you sure you want to edit this email?" modal_button=modal_button|safe %}
+            <div class="usa-modal__content">
+                <div class="usa-modal__main">
+                    <h2 class="usa-modal__heading" id="modal-1-heading">
+                        Are you sure you want to edit this email?
+                    </h2>
+                    <div class="usa-prose">
+                        <p>
+                            The creator of this request already received an email for this status/reason: 
+                        </p>
+                        <ul>
+                            <li class="font-body-sm">Status: <b>Action needed</b></li>
+                            <li class="font-body-sm">Reason: <b>{{ field.field.value|linebreaks }}</b></li>
+                        </ul>
+                        <p>
+                            If you edit this email's text, <b>the system will send another email</b> to
+                            the creator after you "save" your changes.  If you do not want to send another email, click "cancel" below.
+                        </p>
+                    </div>
+
+                    <div class="usa-modal__footer">
+                        <ul class="usa-button-group">
+                            <li class="usa-button-group__item">
+                                <button
+                                type="submit" 
+                                class="usa-button" 
+                                id="email-already-sent-modal_continue-editing-button"
+                                data-close-modal
+                                >
+                                    Yes, continue editing
+                                </button>
+                            </li>
+                            <li class="usa-button-group__item">
+                                <button
+                                type="button"
+                                class="usa-button usa-button--unstyled padding-105 text-center"
+                                name="_cancel_edit_email"
+                                data-close-modal
+                                >
+                                    Cancel
+                                </button>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                <button
+                type="button"
+                class="usa-button usa-modal__close"
+                aria-label="Close this window"
+                data-close-modal
+                >
+                    <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
+                        <use xlink:href="{%static 'img/sprite.svg'%}#close"></use>
+                    </svg>
+                </button>
+            </div>
         </div>
 
         <div class="flex-container">
-            <label><b>Auto-generated email that will be sent to the creator</b></label> | 
+            <p id="action-needed-email-header"><b>Auto-generated email that will be sent to the creator</b></p>
+            <p class="display-none" id="action-needed-email-header-email-sent">
+                <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
+                    <use xlink:href="{%static 'img/sprite.svg'%}#check_circle"></use>
+                </svg>
+                <b>Email sent to the creator</b></p>
             <button id="action-needed-reason-email-edit-button" 
                 type="button" 
                 class="usa-button usa-button--unstyled usa-button--dja-link-color usa-button__small-text text-no-underline margin-top-2 margin-bottom-1 margin-left-1">
@@ -171,6 +230,7 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
     </div>
     <div>
         {{ field.field }}
+        <div id="action-needed-email-footer">This email will be sent to the creator of this request after saving</div>
         <input id="action-needed-email-sent" class="display-none" value="{{action_needed_email_sent}}">
     </div>
     {% else %}