Letter Queue — Payment Link & Anita Notification Pattern

Overview

The DRE letter queue page (/var/www/internal/letter-queue.html) is an all-in-one HTML+JS internal tool for authoring, approving, and sending demand letters. This reference documents two cross-cutting additions applied to every letter template and the authoring workflow.

Payment Link Placement

Every letter template and mock letter must include the payment URL before the FDCPA disclosure:

Payment can be made at: https://pay.debtrecoveryexperts.com

The line goes immediately before the FDCPA disclosure:

This communication is from a debt collector attempting to collect a debt.

Templates affected (in `templateContent` map)

formal-demand — already had link
lien-threat — already had link
escalation — already had link
legal-action — was missing, added via patch

Mock letter data affected (in `letters` array)

All 4 mock entries had the link appended during the 2026-07-08 update. The link lives inside the template content string so the composer textarea reflects it immediately when a user selects a letter.

Anita Notification Bar

When a new draft is created via the "+ New Letter" modal (i.e., selectTemplate() fires), show an amber alert bar below the nav bar:

HTML structure

<div id="anitaNotification" class="anita-notification hidden" role="alert">
  <span>✏️ Anita — a new letter draft is ready for your review and authoring.</span>
  <button class="close-btn" id="anitaNotifClose" aria-label="Dismiss">&times;</button>
</div>

CSS

.anita-notification {
  display: flex; align-items: center; gap: 0.75rem;
  background: #fbbf24; color: #1a1a1a;
  padding: 10px 24px; font-size: 0.875rem; font-weight: 500;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.anita-notification .close-btn { margin-left: auto; background: none; border: none; color: #1a1a1a; cursor: pointer; font-size: 1.25rem; opacity: 0.6; padding: 0 4px; line-height: 1; }
.anita-notification .close-btn:hover { opacity: 1; }
.anita-notification.fade-out { opacity: 0; transition: opacity 0.5s ease-out; }

JS function

let anitaNotifTimer = null;

function showAnitaNotification() {
  if (!anitaNotification) return;
  if (anitaNotifTimer) { clearTimeout(anitaNotifTimer); anitaNotifTimer = null; }
  anitaNotification.classList.remove('hidden', 'fade-out');
  anitaNotifTimer = setTimeout(() => {
    anitaNotification.classList.add('fade-out');
    setTimeout(() => {
      anitaNotification.classList.add('hidden');
      anitaNotification.classList.remove('fade-out');
    }, 500);
  }, 15000);
}
anitaNotifClose.addEventListener('click', () => {
  if (anitaNotifTimer) { clearTimeout(anitaNotifTimer); anitaNotifTimer = null; }
  anitaNotification.classList.add('hidden');
});

Hook point

In selectTemplate() (inside the New Letter modal flow), call showAnitaNotification() right after the new letter object is pushed to the letters array — before selectLetter(newId).

Re-applying these patterns

When duplicating the letter queue page or adding new mock data / templates:

Every templateContent entry must end with \n\nPayment can be made at: https://pay.debtrecoveryexperts.com\n\nThis communication is from a debt collector attempting to collect a debt...
The Anita notification bar element must exist below <nav> but above <main>.
showAnitaNotification() must be called in selectTemplate() after creating a new letter entry.

3.5 KiB Raw Permalink Blame History