# 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
```html
<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
```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
```js
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:
1. 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...`
2. The Anita notification bar element must exist below `<nav>` but above `<main>`.
3. `showAnitaNotification()` must be called in `selectTemplate()` after creating a new letter entry.