// VELOUR — signed-in members' blog. Jennifer's monthly letter, a paid benefit.
// Paid (Jennifer / demo account): read the latest letter + write back.
// Free (fresh account): visible but locked & greyed, with an upgrade nudge.
const { Card, Avatar } = window.VelourDesignSystem_380ed4;
const FRESH = !!window.VELOUR_FRESH;
// ---- the letters Jennifer publishes ----------------------------------------
//
// THE ONLY SOURCE IS public.posts, via /api/posts. There is no built-in letter
// any more.
//
// There used to be: a hard-coded June 2026 letter and three past titles, kept as
// a fallback when this was first wired to the API on 30 Aug 2026 — the reasoning
// being that a members' page going blank on deploy day would be worse than the
// bug it fixed. The owner settled that on 31 Aug by deciding the archive starts
// fresh, and the fallback stopped being a safety net at that moment: with an
// empty table it would have shown every member a letter dated June for as long
// as nobody published, and then made three months of "past letters" vanish the
// day somebody did. An empty state that says so is the honest version.
//
// LOCKED LETTERS ARE FILTERED OUT, not rendered empty. api/posts.js sends a paid
// letter to an unentitled reader as title and month with no body at all — so a
// locked row has nothing for BlogPaid to render, and treating it as the latest
// letter would print a headline over silence. The locked view below reads those
// titles deliberately; the paid view must not.
function useLiveLetters() {
const [letters, setLetters] = React.useState(null);
React.useEffect(() => {
let cancelled = false;
const ask = (headers) =>
fetch("/api/posts", { headers: headers || {} })
.then((r) => (r.ok ? r.json() : null))
.then((body) => {
if (cancelled || !body || !Array.isArray(body.posts)) return;
setLetters(body.posts);
})
// A failed request settles as an empty list rather than staying null
// forever, or the page would sit on its loading state for good.
.catch(() => { if (!cancelled) setLetters([]); });
// The session rides along when there is one: it is what turns a paid letter
// from a title into a letter. No session is not an error here — the demo
// dashboard has none, and free letters are public.
if (window.velourAuth) {
window.velourAuth.ensureFresh()
.then((s) => ask(s && s.access_token ? { Authorization: "Bearer " + s.access_token } : {}))
.catch(() => ask({}));
} else ask({});
return () => { cancelled = true; };
}, []);
return letters;
}
// What to render. `loading` matters: without it the page would flash "no letter
// yet" at a paying member for the length of one fetch, every single visit.
function useLetterView() {
const live = useLiveLetters();
const readable = (live || []).filter((p) => !p.locked && p.paras && p.paras.length);
return {
loading: live === null,
latest: readable[0] || null,
past: readable.slice(1).map((p) => ({ month: p.month, title: p.title })),
// What a locked reader may still be shown: a real published title and month,
// never a body.
headline: (live && live[0]) || null,
};
}
function JenniferByline() {
return (
Jennifer Sichenzia
Founder & CEO, VELOUR
);
}
// ---- feedback (paid) -------------------------------------------------------
const REACTIONS = ["This resonated", "Made me think", "Trying it this month"];
// The write-back. It POSTs now.
//
// It used to be `onClick={() => setSent(true)}` — a local flag and nothing else,
// under a confirmation reading "Jennifer reads every note." The note went
// nowhere. api/letter-reply.js is the endpoint that makes that sentence true;
// see migration 015.
//
// THE CONFIRMATION WAITS FOR THE SERVER. That is the whole point of the change:
// "Sent" is now a thing that happened rather than a thing the button says.
function LetterFeedback({ postId }) {
const [reaction, setReaction] = React.useState(null);
const [note, setNote] = React.useState("");
const [sent, setSent] = React.useState(false);
const [sending, setSending] = React.useState(false);
const [error, setError] = React.useState(null);
const submit = async () => {
if (sending || (!reaction && !note.trim())) return;
// No letter id means the letter came from nowhere the server knows about,
// and there is nothing to attach a reply to.
if (!postId) { setError("This letter can't take replies yet."); return; }
setSending(true); setError(null);
try {
const s = window.velourAuth ? await window.velourAuth.ensureFresh() : null;
if (!s || !s.access_token) throw new Error("Sign in again to write back.");
const res = await fetch("/api/letter-reply", {
method: "POST",
headers: { "Content-Type": "application/json", Authorization: "Bearer " + s.access_token },
body: JSON.stringify({ postId, reaction, note: note.trim() }),
});
const body = await res.json().catch(() => ({}));
if (!res.ok) throw new Error(body.error || "That didn't send.");
setSent(true);
} catch (err) {
setError(err.message);
} finally {
setSending(false);
}
};
if (sent) {
return (