Merge pull request #2598 from cisagov/nl/2470-update-action-needed-email

Issue #2470 - Enhance analysts ability to update "Action needed" email text [nl]

src/registrar/admin.py

@@ -224,7 +224,7 @@ class DomainRequestAdminForm(forms.ModelForm):
             "other_contacts": NoAutocompleteFilteredSelectMultiple("other_contacts", False),
         }
         labels = {
-            "action_needed_reason_email": "Auto-generated email",
+            "action_needed_reason_email": "Email",
         }
 
     def __init__(self, *args, **kwargs):

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

@@ -353,7 +353,7 @@ function initializeWidgetOnList(list, parentId) {
     let rejectionReasonFormGroup = document.querySelector('.field-rejection_reason')
     // This is the "action needed reason" field
     let actionNeededReasonFormGroup = document.querySelector('.field-action_needed_reason');
-    // This is the "auto-generated email" field
+    // This is the "Email" field
     let actionNeededReasonEmailFormGroup = document.querySelector('.field-action_needed_reason_email')
 
     if (rejectionReasonFormGroup && actionNeededReasonFormGroup && actionNeededReasonEmailFormGroup) {
@@ -509,22 +509,38 @@ function initializeWidgetOnList(list, parentId) {
 (function () {
     // 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 readonlyView = document.querySelector("#action-needed-reason-email-readonly");
+    // Placeholder text (for certain "action needed" reasons that do not involve e=mails)
+    var placeholderText = document.querySelector("#action-needed-reason-email-placeholder-text")
+
+    // E-mail divs and textarea components
+    var actionNeededEmail = document.querySelector("#id_action_needed_reason_email")
+    var actionNeededEmailReadonly = document.querySelector("#action-needed-reason-email-readonly")
+    var actionNeededEmailReadonlyTextarea = document.querySelector("#action-needed-reason-email-readonly-textarea")
+
+    // Edit e-mail modal (and its confirmation button)
+    var actionNeededEmailAlreadySentModal = document.querySelector("#email-already-sent-modal")
+    var confirmEditEmailButton = document.querySelector("#email-already-sent-modal_continue-editing-button")
+
+    // Headers and footers (which change depending on if the e-mail was sent or not)
+    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 lastSentEmailText = document.getElementById("action-needed-email-last-sent-text");
 
+    // Get the list of e-mails associated with each action-needed dropdown value
     let emailData = document.getElementById('action-needed-emails-data');
     if (!emailData) {
         return;
     }
-
     let actionNeededEmailData = emailData.textContent;
     if(!actionNeededEmailData) {
         return;
     }
-
     let actionNeededEmailsJson = JSON.parse(actionNeededEmailData);
+
     const domainRequestId = actionNeededReasonDropdown ? document.querySelector("#domain_request_id").value : null
     const emailSentSessionVariableName = `actionNeededEmailSent-${domainRequestId}`;
     const oldDropdownValue = actionNeededReasonDropdown ? actionNeededReasonDropdown.value : null;
@@ -545,53 +561,112 @@ function initializeWidgetOnList(list, parentId) {
             updateActionNeededEmailDisplay(reason)
         });
 
+        editEmailButton.addEventListener("click", function() {
+            if (!checkEmailAlreadySent()) {
+                showEmail(canEdit=true)
+            }
+        });
+
+        confirmEditEmailButton.addEventListener("click", function() {
+            // Show editable view
+            showEmail(canEdit=true)
+        });
+
+
         // Add a change listener to the action needed reason dropdown
         actionNeededReasonDropdown.addEventListener("change", function() {
             let reason = actionNeededReasonDropdown.value;
             let emailBody = reason in actionNeededEmailsJson ? actionNeededEmailsJson[reason] : null;
-            if (reason && emailBody) {
-                // Replace the email content
-                actionNeededEmail.value = emailBody;
             
+            if (reason && emailBody) {
                 // Reset the session object on change since change refreshes the email content.
                 if (oldDropdownValue !== actionNeededReasonDropdown.value || oldEmailValue !== actionNeededEmail.value) {
-                    let emailSent = sessionStorage.getItem(emailSentSessionVariableName)
+                    // Replace the email content
-                    if (emailSent !== null){
+                    actionNeededEmail.value = emailBody;
-                        addOrRemoveSessionBoolean(emailSentSessionVariableName, add=false)
+                    actionNeededEmailReadonlyTextarea.value = emailBody;
-                    }
+                    hideEmailAlreadySentView();
                 }
             }
 
-            // Show an editable email field or a readonly one
+            // Show either a preview of the email or some text describing no email will be sent
             updateActionNeededEmailDisplay(reason)
         });
     }
 
-    // Shows an editable email field or a readonly one.
+    function checkEmailAlreadySent()
+    {
+        lastEmailSent = lastSentEmailText.value.replace(/\s+/g, '')
+        currentEmailInTextArea = actionNeededEmail.value.replace(/\s+/g, '')
+        return lastEmailSent === currentEmailInTextArea
+    }
+
+    // Shows a readonly preview of the email with updated messaging to indicate this email was sent
+    function showEmailAlreadySentView()
+    {
+        hideElement(actionNeededEmailHeader)
+        showElement(actionNeededEmailHeaderOnSave)
+        actionNeededEmailFooter.innerHTML = "This email has been sent to the creator of this request";
+    }
+
+    // Shows a readonly preview of the email with updated messaging to indicate this email was sent
+    function hideEmailAlreadySentView()
+    {
+        showElement(actionNeededEmailHeader)
+        hideElement(actionNeededEmailHeaderOnSave)
+        actionNeededEmailFooter.innerHTML = "This email will be sent to the creator of this request after saving";
+    }
+
+    // Shows either a preview of the email or some text describing no email will be sent.
     // If the email doesn't exist or if we're of reason "other", display that no email was sent.
-    // Likewise, if we've sent this email before, we should just display the content.
     function updateActionNeededEmailDisplay(reason) {
-        let emailHasBeenSentBefore = sessionStorage.getItem(emailSentSessionVariableName) !== null;
+        hideElement(actionNeededEmail.parentElement)
-        let collapseableDiv = readonlyView.querySelector(".collapse--dgsimple");
+
-        let showMoreButton = document.querySelector("#action_needed_reason_email__show_details");
+        if (reason) {
-        if ((reason && reason != "other") && !emailHasBeenSentBefore) {
+            if (reason === "other") {
-            showElement(actionNeededEmail.parentElement)
+                // Hide email preview and show this text instead
-            hideElement(readonlyView)
+                showPlaceholderText("No email will be sent");
-            hideElement(showMoreButton)
-        } else {
-            if (!reason || reason === "other") {
-                collapseableDiv.innerHTML = reason ? "No email will be sent." : "-";
-                hideElement(showMoreButton)
-                if (collapseableDiv.classList.contains("collapsed")) {
-                    showMoreButton.click()
-                }
-            }else {
-                showElement(showMoreButton)
             }
-            hideElement(actionNeededEmail.parentElement)
+            else {
-            showElement(readonlyView)
+                // Always show readonly view of email to start
+                showEmail(canEdit=false)
+                if(checkEmailAlreadySent())
+                {
+                    showEmailAlreadySentView();
+                }
+            }
+        } else {
+            // Hide email preview and show this text instead
+            showPlaceholderText("Select an action needed reason to see email");
         }
     }
+
+    // Shows either a readonly view (canEdit=false) or editable view (canEdit=true) of the action needed email
+    function showEmail(canEdit)
+    {
+        if(!canEdit)
+        {
+            showElement(actionNeededEmailReadonly)
+            hideElement(actionNeededEmail.parentElement)
+        }
+        else
+        {
+            hideElement(actionNeededEmailReadonly)
+            showElement(actionNeededEmail.parentElement)
+        }
+        showElement(actionNeededEmailFooter) // this is the same for both views, so it was separated out
+        hideElement(placeholderText)
+    }
+
+    // Hides preview of action needed email and instead displays the given text (innerHTML)
+    function showPlaceholderText(innerHTML)
+    {
+        hideElement(actionNeededEmail.parentElement)
+        hideElement(actionNeededEmailReadonly)
+        hideElement(actionNeededEmailFooter)
+
+        placeholderText.innerHTML = innerHTML;
+        showElement(placeholderText)
+    }
 })();
 
 

src/registrar/assets/sass/_theme/_admin.scss

@@ -66,6 +66,9 @@ html[data-theme="light"] {
     // --object-tools-fg: var(--button-fg);
     // --object-tools-bg: var(--close-button-bg);
     // --object-tools-hover-bg: var(--close-button-hover-bg);
+
+    --summary-box-bg: #f1f1f1;
+    --summary-box-border: #d1d2d2;
 }
 
 // Fold dark theme settings into our main CSS
@@ -104,6 +107,9 @@ html[data-theme="light"] {
   
       --close-button-bg: #333333;
       --close-button-hover-bg: #666666;
+
+      --summary-box-bg:  #121212;
+      --summary-box-border: #666666;
     }
 
     // Dark mode django (bug due to scss cascade) and USWDS tables
@@ -848,6 +854,26 @@ div.dja__model-description{
     }
 }
 
+.vertical-separator {
+    min-height: 20px;
+    height: 100%;
+    width: 1px;
+    background-color: #d1d2d2;
+    vertical-align: middle
+}
+
+.usa-summary-box_admin {
+    color: var(--body-fg);
+    border-color: var(--summary-box-border);
+    background-color: var(--summary-box-bg);
+    min-width: fit-content;
+    padding: .5rem;
+    border-radius: .25rem;
+}
+
+.text-faded {
+    color: #{$dhs-gray-60};
+}
 ul.add-list-reset {
     padding: 0 !important;
     margin: 0 !important;

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

@@ -145,20 +145,110 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
 
 {% block field_other %}
     {% if field.field.name == "action_needed_reason_email" %}
-    <div id="action-needed-reason-email-readonly" class="readonly margin-top-0 padding-top-0 display-none">
-        <div class="margin-top-05 collapse--dgsimple collapsed">
-        {{ field.field.value|linebreaks }}
-        </div>
-        <button id="action_needed_reason_email__show_details" type="button" class="collapse-toggle--dgsimple usa-button usa-button--unstyled margin-top-0 margin-bottom-1 margin-left-1">
-            <span>Show details</span>
-            <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
-                <use xlink:href="/public/img/sprite.svg#expand_more"></use>
-            </svg>
-        </button>
-    </div>
     <div>
-        {{ field.field }}
+        <div id="action-needed-reason-email-placeholder-text" class="margin-top-05 text-faded">
-        <input id="action-needed-email-sent" class="display-none" value="{{action_needed_email_sent}}">
+            -
+        </div>
+        <div>
+            <div id="action-needed-reason-email-readonly" class="display-none usa-summary-box_admin padding-top-0 margin-top-0">
+                <div class="flex-container">
+                    <div class="margin-top-05">
+                        <p class="{% if action_needed_email_sent %}display-none{% endif %}" id="action-needed-email-header"><b>Auto-generated email that will be sent to the creator</b></p>
+                        <p class="{% if not action_needed_email_sent %}display-none{% endif %}" id="action-needed-email-header-email-sent">
+                            <svg class="usa-icon text-green" 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>
+                    </div>
+                    <div class="vertical-separator margin-top-1 margin-bottom-1"></div>
+                    <a
+                        href="#email-already-sent-modal"
+                        class="usa-button usa-button--unstyled usa-button--dja-link-color usa-button__small-text text-no-underline margin-left-1"
+                        aria-controls="email-already-sent-modal"
+                        data-open-modal
+                        >Edit email</a
+                    >
+                </div>
+                <div
+                    class="usa-modal"
+                    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"
+                    >
+                    <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>{{ original_object.get_action_needed_reason_display }}</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>
+                <label class="sr-only" for="action-needed-reason-email-readonly-textarea">Email:</label>
+                <textarea cols="40" rows="10" class="vLargeTextField" id="action-needed-reason-email-readonly-textarea" readonly>{{ field.field.value|striptags }}
+                </textarea>
+            </div>
+            <div>
+                {{ field.field }}
+                <input id="action-needed-email-sent" class="display-none" value="{{action_needed_email_sent}}">
+                <input id="action-needed-email-last-sent-text" class="display-none" value="{{original_object.action_needed_reason_email}}">
+            </div>
+        </div>
+        <span id="action-needed-email-footer" class="help">
+        {% if not action_needed_email_sent %}
+        This email will be sent to the creator of this request after saving
+        {% else %}
+        This email has been sent to the creator of this request
+        {% endif %}
+        </span>
     </div>
     {% else %}
         {{ field.field }}