fix e-mail sent logic, fix text size in nested text area input

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

@@ -509,32 +509,41 @@ 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");
+    
+    // Placeholder text (for certain "action needed" reasons that do not involve e=mails)
     var placeholderText = document.querySelector("#action-needed-reason-email-placeholder-text")
-    var actionNeededEmailReadonly = document.querySelector("#action-needed-reason-email-readonly");
+
+    // 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 button (appears only in readonly view for e-mail text)
     var editEmailButton = document.querySelector("#action-needed-reason-email-edit-button")
 
+    // 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;
@@ -544,22 +553,19 @@ function initializeWidgetOnList(list, parentId) {
         // Add a change listener to dom load
         document.addEventListener('DOMContentLoaded', function() {
             let reason = actionNeededReasonDropdown.value;
-            let emailBody = reason in actionNeededEmailsJson ? actionNeededEmailsJson[reason] : null;
 
             // Handle the session boolean (to enable/disable editing)
             if (emailWasSent && emailWasSent.value === "True") {
                 // An email was sent out - store that information in a session variable
                 addOrRemoveSessionBoolean(emailSentSessionVariableName, add=true);
             }
-
+            
             // Show an editable email field or a readonly one
-            updateActionNeededEmailDisplay(reason, emailBody)
+            updateActionNeededEmailDisplay(reason)
         });
 
         editEmailButton.addEventListener("click", function() {
-            let emailHasBeenSentBefore = sessionStorage.getItem(emailSentSessionVariableName) !== null;
+            if (checkEmailAlreadySent()) {
-
-            if (emailHasBeenSentBefore) {
                 // Show warning Modal
                 setModalVisibility(actionNeededEmailAlreadySentModal, true)
             }
@@ -590,25 +596,41 @@ function initializeWidgetOnList(list, parentId) {
             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 either a preview of the email or some text describing no email will be sent
-            updateActionNeededEmailDisplay(reason, emailBody)
+            updateActionNeededEmailDisplay(reason)
         });
+    }
 
-        const saveButton = document.querySelector('input[name=_save]');
+    function checkEmailAlreadySent()
-        // The button does not exist if no fields are editable.
+    {
-        if (saveButton) {
+        lastEmailSent = lastSentEmailText.value.replace(/\s+/g, '')
-            saveButton.addEventListener('click', function(event) {
+        currentEmailInTextArea = actionNeededEmail.value.replace(/\s+/g, '')
-                // Show readonly view with messaging to indicate email was sent
+        console.log("old email value = " + lastEmailSent)
-                showEmailAlreadySentView()
+        console.log("current email value = " + currentEmailInTextArea)
-            });
+        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";
     }
 
     function setModalVisibility(modalToToggle, isVisible) {
@@ -623,15 +645,7 @@ function initializeWidgetOnList(list, parentId) {
 
     // 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.
-    function updateActionNeededEmailDisplay(reason, emailBody) {
+    function updateActionNeededEmailDisplay(reason) {
-
-        if (reason && emailBody) {
-            // Replace the email content
-            actionNeededEmail.value = emailBody;
-            actionNeededEmailReadonlyTextarea.value = emailBody;
-        }
-
-        actionNeededEmailFooter.innerHTML = "This email will be sent to the creator of this request after saving";
         hideElement(actionNeededEmail.parentElement)
 
         if (reason) {
@@ -642,6 +656,10 @@ function initializeWidgetOnList(list, parentId) {
             else {
                 // Always show readonly view of email to start
                 showEmail(canEdit=false)
+                if(checkEmailAlreadySent())
+                {
+                    showEmailAlreadySentView();
+                }
             }
         } else {
             // Hide email preview and show this text instead
@@ -649,15 +667,6 @@ function initializeWidgetOnList(list, parentId) {
         }
     }
 
-    // Shows a readonly preview of the email with updated messaging to indicate this email was sent
-    function showEmailAlreadySentView()
-    {
-        showEmail(canEdit=false)
-        hideElement(actionNeededEmailHeader)
-        showElement(actionNeededEmailHeaderOnSave)
-        actionNeededEmailFooter.innerHTML = "This email has been sent to the creator of this request";
-    }
-
     // Shows either a readonly view (canEdit=false) or editable view (canEdit=true) of the action needed email
     function showEmail(canEdit)
     {

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
@@ -857,10 +863,12 @@ div.dja__model-description{
 }
 
 .usa-summary-box_admin {
-    border-color: #d1d2d2;
+    color: var(--body-fg);
-    background-color: #f1f1f1;
+    border-color: var(--summary-box-border);
-    max-width: fit-content !important;
+    background-color: var(--summary-box-bg);
+    min-width: fit-content;
     padding: .5rem;
+    border-radius: .25rem;
 }
 
 .text-faded {

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

@@ -150,7 +150,7 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
             -
         </div>
         <div>
-            <div id="action-needed-reason-email-readonly" class="display-none usa-summary-box usa-summary-box_admin padding-top-0 margin-top-0">
+            <div id="action-needed-reason-email-readonly" class="display-none usa-summary-box_admin padding-top-0 margin-top-0">
                 <div
                 class="usa-modal"
                 id="email-already-sent-modal"
@@ -216,8 +216,8 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
         
                 <div class="flex-container">
                     <div class="margin-top-05">
-                        <p id="action-needed-email-header"><b>Auto-generated email that will be sent to the creator</b></p>
+                        <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="display-none" id="action-needed-email-header-email-sent">
+                        <p class="{% if not action_needed_email_sent %}display-none{% endif %}" 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>
@@ -231,16 +231,22 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
                             <span>Edit email</span>
                     </button>
                 </div>
-                <textarea cols="40" rows="10" class="vLargeTextField dja-readonly-textarea-container" id="action-needed-reason-email-readonly-textarea" readonly>
+                <textarea cols="40" rows="10" class="vLargeTextField" id="action-needed-reason-email-readonly-textarea" readonly>{{ field.field.value|striptags }}
-                    {{ field.field.value|linebreaks }}
                 </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>
-        <div id="action-needed-email-footer" class="help margin-left-0">This email will be sent to the creator of this request after saving</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 }}