simplify javascript

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

@@ -444,30 +444,23 @@ class CustomizableEmailBase {
      * @param {Object} config - must contain the following:
      * @property {HTMLElement} dropdown - The dropdown element.
      * @property {HTMLElement} textarea - The textarea element.
-     * @property {HTMLElement} textareaPlaceholder - The placeholder for the textarea.
-     * @property {HTMLElement} directEditButton - The button to directly edit the email.
-     * @property {HTMLElement} modalTrigger - The trigger for the modal.
-     * @property {HTMLElement} modalConfirm - The confirm button in the modal.
-     * @property {HTMLElement} formLabel - The label for the form.
      * @property {HTMLElement} lastSentEmailContent - The last sent email content element.
      * @property {HTMLElement} textAreaFormGroup - The form group for the textarea.
      * @property {HTMLElement} dropdownFormGroup - The form group for the dropdown.
+     * @property {HTMLElement} modalConfirm - The confirm button in the modal.
      * @property {string} apiUrl - The API URL for fetching email content.
      * @property {string} statusToCheck - The status to check against. Used for show/hide on textAreaFormGroup/dropdownFormGroup.
      * @property {string} sessionVariableName - The session variable name. Used for show/hide on textAreaFormGroup/dropdownFormGroup.
      * @property {string} apiErrorMessage - The error message that the ajax call returns.
      */
-    constructor(config) {        
+    constructor(config) {
+        this.config = config;        
         this.dropdown = config.dropdown;
         this.textarea = config.textarea;
-        this.textareaPlaceholder = config.textareaPlaceholder;
-        this.directEditButton = config.directEditButton;
-        this.modalTrigger = config.modalTrigger;
-        this.modalConfirm = config.modalConfirm;
-        this.formLabel = config.formLabel;
         this.lastSentEmailContent = config.lastSentEmailContent;
         this.apiUrl = config.apiUrl;
         this.apiErrorMessage = config.apiErrorMessage;
+        this.modalConfirm = config.modalConfirm;
 
         // These fields are hidden/shown on pageload depending on the current status
         this.textAreaFormGroup = config.textAreaFormGroup;
@@ -481,6 +474,14 @@ class CustomizableEmailBase {
         this.initialDropdownValue = this.dropdown ? this.dropdown.value : null;
         this.initialEmailValue = this.textarea ? this.textarea.value : null;
 
+        // Find other fields near the textarea 
+        const parentDiv = this.textarea ? this.textarea.closest(".flex-container") : null;
+        this.directEditButton = parentDiv ? parentDiv.querySelector(".edit-email-button") : null;
+        this.modalTrigger = parentDiv ? parentDiv.querySelector(".edit-button-modal-trigger") : null;
+
+        this.textareaPlaceholder = parentDiv ? parentDiv.querySelector(".custom-email-placeholder") : null;
+        this.formLabel = this.textarea ? document.querySelector(`label[for="${this.textarea.id}"]`) : null;
+
         this.isEmailAlreadySentConst;
         if (this.lastSentEmailContent && this.textarea) {
             this.isEmailAlreadySentConst = this.lastSentEmailContent.value.replace(/\s+/g, '') === this.textarea.value.replace(/\s+/g, '');
@@ -642,12 +643,8 @@ class customActionNeededEmail extends CustomizableEmailBase {
         const emailConfig = {
             dropdown: document.getElementById("id_action_needed_reason"),
             textarea: document.getElementById("id_action_needed_reason_email"),
-            textareaPlaceholder: document.querySelector(".field-action_needed_reason_email__placeholder"),
-            directEditButton: document.querySelector('.field-action_needed_reason_email__edit'),
-            modalTrigger: document.querySelector('.field-action_needed_reason_email__modal-trigger'),
-            modalConfirm: document.getElementById('confirm-edit-email'),
-            formLabel: document.querySelector('label[for="id_action_needed_reason_email"]'),
             lastSentEmailContent: document.getElementById("last-sent-action-needed-email-content"),
+            modalConfirm: document.getElementById("action-needed-reason__confirm-edit-email"),
             apiUrl: document.getElementById("get-action-needed-email-for-user-json")?.value || null,
             textAreaFormGroup: document.querySelector('.field-action_needed_reason'),
             dropdownFormGroup: document.querySelector('.field-action_needed_reason_email'),
@@ -690,6 +687,13 @@ document.addEventListener('DOMContentLoaded', function() {
 
     // Initialize UI
     const customEmail = new customActionNeededEmail();
+
+    // Check that every variable was setup correctly
+    const nullItems = Object.entries(customEmail.config).filter(([key, value]) => value === null).map(([key]) => key);
+    if (nullItems.length > 0) {
+        console.error(`Failed to load customActionNeededEmail(). Some variables were null: ${nullItems.join(", ")}`)
+        return;
+    }
     customEmail.loadActionNeededEmail()
 });
 
@@ -699,12 +703,8 @@ class customRejectedEmail extends CustomizableEmailBase {
         const emailConfig = {
             dropdown: document.getElementById("id_rejection_reason"),
             textarea: document.getElementById("id_rejection_reason_email"),
-            textareaPlaceholder: document.querySelector(".field-rejection_reason_email__placeholder"),
-            directEditButton: document.querySelector('.field-rejection_reason_email__edit'),
-            modalTrigger: document.querySelector('.field-rejection_reason_email__modal-trigger'),
-            modalConfirm: document.getElementById('confirm-edit-email'),
-            formLabel: document.querySelector('label[for="id_rejection_reason_email"]'),
             lastSentEmailContent: document.getElementById("last-sent-rejection-email-content"),
+            modalConfirm: document.getElementById("rejection-reason__confirm-edit-email"),
             apiUrl: document.getElementById("get-rejection-email-for-user-json")?.value || null,
             textAreaFormGroup: document.querySelector('.field-rejection_reason'),
             dropdownFormGroup: document.querySelector('.field-rejection_reason_email'),
@@ -749,6 +749,12 @@ document.addEventListener('DOMContentLoaded', function() {
 
     // Initialize UI
     const customEmail = new customRejectedEmail();
+    // Check that every variable was setup correctly
+    const nullItems = Object.entries(customEmail.config).filter(([key, value]) => value === null).map(([key]) => key);
+    if (nullItems.length > 0) {
+        console.error(`Failed to load customRejectedEmail(). Some variables were null: ${nullItems.join(", ")}`)
+        return;
+    }
     customEmail.loadRejectedEmail()
 });
 

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

@@ -137,29 +137,28 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
 
 {% block field_other %}
     {% if field.field.name == "action_needed_reason_email" %}
+        {{ field.field }}
 
-        <div class="margin-top-05 text-faded field-action_needed_reason_email__placeholder">
+        <div class="margin-top-05 text-faded custom-email-placeholder">
             &ndash;
         </div>
 
-        {{ field.field }}
-
         <button
             aria-label="Edit email in textarea"
             type="button"
-            class="usa-button usa-button--unstyled usa-button--dja-link-color usa-button__small-text margin-left-1 text-no-underline field-action_needed_reason_email__edit flex-align-self-start"
+            class="usa-button usa-button--unstyled usa-button--dja-link-color usa-button__small-text margin-left-1 text-no-underline flex-align-self-start edit-email-button"
             ><img src="/public/admin/img/icon-changelink.svg" alt="Change"> Edit email</button
         >
         <a
-            href="#email-already-sent-modal"
+            href="#action-needed-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 field-action_needed_reason_email__modal-trigger flex-align-self-start"
+            class="usa-button usa-button--unstyled usa-button--dja-link-color usa-button__small-text text-no-underline margin-left-1 edit-button-modal-trigger flex-align-self-start"
-            aria-controls="email-already-sent-modal"
+            aria-controls="action-needed-email-already-sent-modal"
             data-open-modal
             ><img src="/public/admin/img/icon-changelink.svg" alt="Change"> Edit email</a
         >
         <div
             class="usa-modal"
-            id="email-already-sent-modal"
+            id="action-needed-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"
             >
@@ -187,8 +186,8 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
                             <li class="usa-button-group__item">
                                 <button
                                 type="submit" 
+                                id="action-needed-reason__confirm-edit-email"
                                 class="usa-button" 
-                                id="confirm-edit-email"
                                 data-close-modal
                                 >
                                     Yes, continue editing
@@ -227,28 +226,28 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
         {% endif %}
 
     {% elif field.field.name == "rejection_reason_email" %}
-        <div class="margin-top-05 text-faded field-rejection_reason_email__placeholder">
+        {{ field.field }}
+
+        <div class="margin-top-05 text-faded custom-email-placeholder">
             &ndash;
         </div>
 
-        {{ field.field }}
-
         <button
             aria-label="Edit email in textarea"
             type="button"
-            class="usa-button usa-button--unstyled usa-button--dja-link-color usa-button__small-text margin-left-1 text-no-underline field-rejection_reason_email__edit flex-align-self-start"
+            class="usa-button usa-button--unstyled usa-button--dja-link-color usa-button__small-text margin-left-1 text-no-underline flex-align-self-start edit-email-button"
             ><img src="/public/admin/img/icon-changelink.svg" alt="Change"> Edit email</button
         >
         <a
-            href="#email-already-sent-modal"
+            href="#rejection-reason-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 field-rejection_reason_email__modal-trigger flex-align-self-start"
+            class="usa-button usa-button--unstyled usa-button--dja-link-color usa-button__small-text text-no-underline margin-left-1 edit-button-modal-trigger flex-align-self-start"
-            aria-controls="email-already-sent-modal"
+            aria-controls="rejection-reason-email-already-sent-modal"
             data-open-modal
             ><img src="/public/admin/img/icon-changelink.svg" alt="Change"> Edit email</a
         >
         <div
             class="usa-modal"
-            id="email-already-sent-modal"
+            id="rejection-reason-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"
             >
@@ -276,8 +275,8 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
                             <li class="usa-button-group__item">
                                 <button
                                 type="submit" 
+                                id="rejection-reason__confirm-edit-email"
                                 class="usa-button" 
-                                id="confirm-edit-email"
                                 data-close-modal
                                 >
                                     Yes, continue editing