86 lines
3.5 KiB
Markdown
86 lines
3.5 KiB
Markdown
# 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">×</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.
|