Additional cleanup

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

@@ -526,109 +526,82 @@ function initializeWidgetOnList(list, parentId) {
  * This shows the auto generated email on action needed reason.
 */
 (function () {
-    let actionNeededReasonDropdown = document.querySelector("#id_action_needed_reason");
+    // Since this is an iife, these vars will be removed from memory afterwards
-    let actionNeededEmail = document.querySelector("#id_action_needed_reason_email");
+    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");
+
     let actionNeededEmailData = document.getElementById('action-needed-emails-data').textContent;
-    let noEmailMessage = document.querySelector("#no-email-message");
     const oldDropdownValue = actionNeededReasonDropdown ? actionNeededReasonDropdown.value : null;
     const oldEmailValue = actionNeededEmailData ? actionNeededEmailData.value : null;
-    const emptyReasonText = "-";
+
-    const noEmailText = "No email will be sent.";
     const domainRequestId = actionNeededReasonDropdown ? document.querySelector("#domain_request_id").value : null
     const emailSentSessionVariableName = `actionNeededEmailSent-${domainRequestId}`;
+    const emptyReasonText = "-";
+    const noEmailText = "No email will be sent.";
+
+    if(actionNeededReasonDropdown && actionNeededEmail && domainRequestId) {
+        // Add a change listener to dom load
+        handleDomLoadActionNeededEmail();
 
-    if(actionNeededReasonDropdown && actionNeededEmail && actionNeededEmailData && domainRequestId) {
         // Add a change listener to the action needed reason dropdown 
-        handleChangeActionNeededEmail(actionNeededReasonDropdown, actionNeededEmail, actionNeededEmailData);
+        let actionNeededEmailsJson = JSON.parse(actionNeededEmailData)
+        handleChangeActionNeededEmail(actionNeededEmailsJson);
+    }
+
+    function handleDomLoadActionNeededEmail() {
         document.addEventListener('DOMContentLoaded', function() {
             let reason = actionNeededReasonDropdown.value;
-            noEmailMessage.innerHTML = reason ? noEmailText : emptyReasonText;
-            if (reason && reason != "other") {
-                // Show the email
-                showElement(actionNeededEmail);
-                hideElement(noEmailMessage);
-            } else {
-                // Show the no email message
-                hideElement(actionNeededEmail);
-                showElement(noEmailMessage);
-            }
-            
 
-            let emailWasSent = document.getElementById("action-needed-email-sent")
+            // Handle the session boolean (to enable/disable editing)
+            let emailWasSent = document.getElementById("action-needed-email-sent");
             if (emailWasSent && emailWasSent.value === "True") {
                 // An email was sent out - store that information in a session variable
-                addOrRemoveSessionBoolean(emailSentSessionVariableName, add=true)
+                addOrRemoveSessionBoolean(emailSentSessionVariableName, add=true);
             }
 
-            if (sessionStorage.getItem(emailSentSessionVariableName) !== null) {
+            // Show an editable email field or a readonly one
-                // Show the readonly field, hide the editable field
+            updateActionNeededEmailDisplay(reason)
-                showReadonly(actionNeededEmail.parentElement)
-            }else {
-                // No email was sent out -- show the editable field
-                hideReadonly(actionNeededEmail.parentElement)
-            }
         });
     }
 
-    function handleChangeActionNeededEmail(actionNeededReasonDropdown, actionNeededEmail, actionNeededEmailData) {
+    function handleChangeActionNeededEmail(actionNeededEmailsJson) {
         actionNeededReasonDropdown.addEventListener("change", function() {
             let reason = actionNeededReasonDropdown.value;
-            let actionNeededEmailsJson = JSON.parse(actionNeededEmailData)
+            let emailBody = reason in actionNeededEmailsJson ? actionNeededEmailsJson[reason] : null;
+            if (reason && emailBody) {
+                // Replace the email content
+                actionNeededEmail.value = emailBody;
 
-            // Show the "no email will be sent" text only if a reason is actually selected.
+                // Reset the session object on change since change refreshes the email content.
-            noEmailMessage.innerHTML = reason ? noEmailText : emptyReasonText;
+                if (oldDropdownValue !== actionNeededReasonDropdown.value || oldEmailValue !== actionNeededEmail.value) {
-            if (reason && reason in actionNeededEmailsJson) {
+                    let emailSent = sessionStorage.getItem(emailSentSessionVariableName)
-                let emailBody = actionNeededEmailsJson[reason];
+                    if (emailSent !== null){
-                if (emailBody) {
+                        addOrRemoveSessionBoolean(emailSentSessionVariableName, add=false)
-                    // Show the email
-                    actionNeededEmail.value = emailBody
-                    showElement(actionNeededEmail);
-                    hideElement(noEmailMessage);
-                    
-                    // Reset the session object on change since change refreshes the email content.
-                    // Only do this if we change the action needed reason, or if we:
-                    // change the reason => modify email content => change back to old reason.
-                    if (oldDropdownValue !== actionNeededReasonDropdown.value || oldEmailValue !== actionNeededEmail.value) {
-                        let emailSent = sessionStorage.getItem(emailSentSessionVariableName)
-                        if (emailSent !== null){
-                            addOrRemoveSessionBoolean(emailSentSessionVariableName, add=false)
-                        }
                     }
-
-                    if (sessionStorage.getItem(emailSentSessionVariableName) !== null) {
-                        // Show the readonly field, hide the editable field
-                        showReadonly(actionNeededEmail.parentElement)
-                    }else {
-                        // No email was sent out -- show the editable field
-                        hideReadonly(actionNeededEmail.parentElement)
-                    }
-
-                }else {
-                    // Show the no email message
-                    hideElement(actionNeededEmail);
-                    showElement(noEmailMessage);
                 }
-            }else {
-                // Show the no email message
-                hideElement(actionNeededEmail);
-                showElement(noEmailMessage);
             }
+
+            // Show an editable email field or a readonly one
+            updateActionNeededEmailDisplay(reason)
         });
     }
 
-    function showReadonly(actionNeededEmailParent) {
+    // Shows an editable email field or a readonly one.
-        let readonlyView = document.querySelector("#action-needed-reason-email-readonly")
+    // If the email doesn't exist or if we're of reason "other", display that no email was sent.
-        if (readonlyView) {
+    // Likewise, if we've sent this email before, we should just display the content.
-            showElement(readonlyView)
+    function updateActionNeededEmailDisplay(reason) {
-            hideElement(actionNeededEmailParent)
+        let emailHasBeenSentBefore = sessionStorage.getItem(emailSentSessionVariableName) !== null;
-        }
+        let collapseableDiv = readonlyView.querySelector('.collapse--dgsimple');
-    }
+        if ((reason && reason != "other") && !emailHasBeenSentBefore) {
-
+            showElement(actionNeededEmail.parentElement)
-    function hideReadonly(actionNeededEmailParent) {
-        let readonlyView = document.querySelector("#action-needed-reason-email-readonly")
-        if (readonlyView) {
             hideElement(readonlyView)
-            showElement(actionNeededEmailParent)
+        } else {
+            if (!reason || reason === "other") {
+                collapseableDiv.innerHTML = reason ? noEmailText : emptyReasonText;
+            }
+            hideElement(actionNeededEmail.parentElement)
+            showElement(readonlyView)
         }
     }
 })();

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

@@ -145,9 +145,8 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
 
 {% block field_other %}
     {% if field.field.name == "action_needed_reason_email" %}
-    <p id="no-email-message" class="{% if original_object.action_needed_reason %}display-none{% endif %}">No email will be sent.</p>
+    <div id="action-needed-reason-email-readonly" class="readonly margin-top-0 padding-top-0 display-none">
-    <div id="action-needed-reason-email-readonly" class="readonly display-none">
+        <div class="margin-top-05 collapse--dgsimple collapsed">
-        <div class="collapse--dgsimple collapsed">
         {{ field.field.value|linebreaks }}
         </div>
         <button type="button" class="collapse-toggle--dgsimple usa-button usa-button--unstyled margin-top-0 margin-bottom-1 margin-left-1">
@@ -157,7 +156,6 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
             </svg>
         </button>
     </div>
-
     <div>
         {{ field.field }}
         <input id="action-needed-email-sent" class="display-none" value="{{action_needed_email_sent}}">