Skip to content

Commit

Permalink
Merge pull request #2598 from cisagov/nl/2470-update-action-needed-email
Browse files Browse the repository at this point in the history 
Issue #2470 - Enhance analysts ability to update "Action needed" email text [nl]
  • Loading branch information
@CocoByte
CocoByte authored Aug 27, 2024
2 parents 8bf5463 + 69a3db5 commit ecfd4d1
Show file tree
Hide file tree
Showing 4 changed files with 237 additions and 46 deletions.
2 changes: 1 addition & 1 deletion src/registrar/admin.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -224,7 +224,7 @@ class Meta:
"other_contacts": NoAutocompleteFilteredSelectMultiple("other_contacts", False),
}
labels = {
"action_needed_reason_email": "Auto-generated email",
"action_needed_reason_email": "Email",
}

def __init__(self, *args, **kwargs):
Expand Down
139 changes: 107 additions & 32 deletions src/registrar/assets/js/get-gov-admin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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;
Expand All @@ -540,57 +556,116 @@ function initializeWidgetOnList(list, parentId) {
// 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)
});

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;

// Reset the session object on change since change refreshes the email content.
if (oldDropdownValue !== actionNeededReasonDropdown.value || oldEmailValue !== actionNeededEmail.value) {
let emailSent = sessionStorage.getItem(emailSentSessionVariableName)
if (emailSent !== null){
addOrRemoveSessionBoolean(emailSentSessionVariableName, add=false)
}
// Replace the email content
actionNeededEmail.value = emailBody;
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;
let collapseableDiv = readonlyView.querySelector(".collapse--dgsimple");
let showMoreButton = document.querySelector("#action_needed_reason_email__show_details");
if ((reason && reason != "other") && !emailHasBeenSentBefore) {
showElement(actionNeededEmail.parentElement)
hideElement(readonlyView)
hideElement(showMoreButton)
} else {
if (!reason || reason === "other") {
collapseableDiv.innerHTML = reason ? "No email will be sent." : "-";
hideElement(showMoreButton)
if (collapseableDiv.classList.contains("collapsed")) {
showMoreButton.click()
hideElement(actionNeededEmail.parentElement)

if (reason) {
if (reason === "other") {
// Hide email preview and show this text instead
showPlaceholderText("No email will be sent");
}
else {
// Always show readonly view of email to start
showEmail(canEdit=false)
if(checkEmailAlreadySent())
{
showEmailAlreadySentView();
}
}else {
showElement(showMoreButton)
}
} 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)
showElement(readonlyView)
}
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)
}
})();

Expand Down
26 changes: 26 additions & 0 deletions src/registrar/assets/sass/_theme/_admin.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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;
Expand Down
116 changes: 103 additions & 13 deletions src/registrar/templates/django/admin/includes/detail_table_fieldset.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,20 +145,110 @@

{% 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 }}
<input id="action-needed-email-sent" class="display-none" value="{{action_needed_email_sent}}">
<div id="action-needed-reason-email-placeholder-text" class="margin-top-05 text-faded">
-
</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 }}
Expand Down

0 comments on commit ecfd4d1

Please sign in to comment.