# Inline Preference Panel

Build a boutique-style inline accordion on your **initial** unsubscribe page: pause chips, reduce-frequency chips, and a quiet unsubscribe link with confirmation. Subscribers stay on the same page for pause and reduce actions (no separate preferences page required).

## Overview

The inline preference center is one panel with three rows:

| Row        | Purpose                                                       |
| ---------- | ------------------------------------------------------------- |
| **Pause**  | Accordion row with one-click pause duration chips             |
| **Reduce** | Accordion row with frequency chips and per-topic toggle chips |
| **Leave**  | “Unsubscribe from all” with arm → confirm flow                |

Team pause durations, frequencies, and topics come from **Settings** and are injected at runtime as chip buttons (`{{preferencesPauseChips}}`, `{{preferencesReduceChips}}`).

## Add blocks in the page editor

1. Open your unsubscribe page in the **visual editor** (GrapesJS).
2. In **Unsubscribe Components**, drag **Inline Preference Center** onto the **initial** page.
3. Edit copy on the pause, reduce, and leave rows inside the panel.
4. Save the page. Component styles are merged into your page CSS on save.

## Styling

- **Theme colors:** The panel reads your page **primary** and **secondary** colors (`--primary-color`, `--secondary-color` from theme settings — the same variables as the pause modal and preferences form). Accents, chip selection, and success feedback tint from **primary**; muted text and borders mix from **secondary**.
- **Saved page CSS:** Inline panel styles live in your page’s `template.css` in the database. Boutique inline templates and GrapesJS blocks include the default rules when you create or save from the editor.
- **Custom branding:** Override scoped tokens on `.lc-pref-center` (e.g. `--lc-accent`, `--lc-border`) in **global styles** or custom CSS, or change **primary** / **secondary** in the page theme.
- **Existing pages:** If you added panel HTML without saving block styles, open the visual editor and save once (or paste the latest rules from `lib/constants/inline-preference-panel.ts` into your page CSS).

Reference markup lives at `docs/reference/boutique-preference-center.html` in the repo.

## Subscriber behavior

### Pause chips

- Tap a duration chip, then confirm on the inline **Confirm pause** step (same arm → confirm pattern as quiet unsubscribe).
- On confirm, emails are paused and the subscriber navigates to the **paused** confirmation page.
- Uses the same `/api/unsub/pause-emails` flow as the pause modal.
- **Cancel** returns to the chip list; collapsing the pause accordion also clears the confirm step.
- If your team uses **SUPPRESSION** pause and the subscriber is in the 90-day cooldown, chips are disabled and a message shows time remaining.

### Reduce chips

- **Frequency chips** save via `/api/unsub/save-preferences` and show an inline “All set” state on the initial page.
- **Topic toggle chips** (one per active topic) behave like checkboxes: each tap saves the updated topic list via `/api/unsub/save-preferences` without closing the accordion. At least one topic must stay selected.
- **Edit** reopens the accordion so the subscriber can pick a different frequency.
- Returning subscribers with a saved frequency see the done state automatically; topic chips reflect saved topic preferences (or all topics selected when none are saved yet).

### Quiet unsubscribe

1. **Or unsubscribe from all emails** arms a confirmation row.
2. **Keep me, just quieter** closes the confirmation and opens **Hear from us less** so the subscriber can pick a lower frequency or fewer topics.
3. **Unsubscribe** runs the normal unsubscribe action.

## Template variables

| Variable                     | Replaced with                                  |
| ---------------------------- | ---------------------------------------------- |
| `{{preferencesPauseChips}}`  | Pause duration chip buttons from team settings |
| `{{preferencesReduceChips}}` | Frequency and per-topic toggle chip buttons    |

If a team has no pause or frequency configs, placeholders are cleared (empty chips area).

## Data attributes (behavior vs. styling)

Handlers and CSS use **data attributes** for behavior and UI state. **Classes** (`.opt-head`, `.chip`, `.leave`, etc.) are layout and appearance only.

| Attribute                           | Purpose                                                          |
| ----------------------------------- | ---------------------------------------------------------------- |
| `data-lc-panel="preference-center"` | Panel root; scopes click handling                                |
| `data-action="toggle-opt"`          | Accordion header — expand/collapse pause or reduce               |
| `data-lc-expanded="true"`           | Option row is open (set by handler)                              |
| `data-lc-done="true"`               | Reduce frequency saved — shows “All set” row                     |
| `data-lc-armed="true"`              | Quiet unsubscribe confirmation visible                           |
| `data-lc-cooldown="true"`           | Pause suppression cooldown active                                |
| `data-lc-chip-state`                | Chip feedback: `saving`, `saved-added`, `saved-removed`, `error` |
| `data-lc-part`                      | Structural part: `body`, `done`, `leave`                         |
| `data-lc-pause-cooldown`            | Cooldown message element (template text; not a state flag)       |

Chip selection uses `aria-pressed` / `aria-busy`; accordion headers use `aria-expanded`.

## Validation notes

- Optional `data-action` values: `toggle-opt`, `pause-for-duration`, `confirm-pause-inline`, `pause-cancel`, `select-frequency`, `toggle-reduce-topic`, `unsubscribe-arm`, `unsubscribe-cancel`, `edit-reduce`.

## Related docs

- [User Preferences](/docs/user-preferences) — Configure frequencies, topics, and pause durations
- [Page Templates](/docs/page-templates) — Other template types and page states
- [Subscriber Experience](/docs/subscriber-experience) — End-to-end subscriber journey