diff --git a/messages/de.json b/messages/de.json index 216446299..917b68859 100644 --- a/messages/de.json +++ b/messages/de.json @@ -4967,6 +4967,18 @@ "symptomPatternsEmpty": "Erfasse Symptome über einen Zyklus, um zu sehen, in welcher Phase sie sich häufen.", "symptomMostlyIn": "Meist in {phase} ({count}/{total} Tage)" }, + "phaseEducation": { + "title": "Was gerade passiert", + "whatsHappening": { + "MENSTRUAL": "Deine Periode ist der Beginn eines neuen Zyklus, während sich die Gebärmutterschleimhaut löst. Energie und Stimmung fühlen sich in diesen ersten Tagen oft niedriger an.", + "FOLLICULAR": "Nach der Periode steigt der Östrogenspiegel allmählich, während der Körper eine Eizelle vorbereitet. Viele bemerken in dieser Phase eine gleichmäßigere Energie.", + "OVULATORY": "Etwa zur Zyklusmitte wird eine Eizelle freigesetzt und die Fruchtbarkeit erreicht für ein kurzes Fenster ihren Höhepunkt. Diese Phase ist die kürzeste der vier.", + "LUTEAL": "Nach dem Eisprung steigt das Progesteron und der Körper kommt zur Ruhe. In den Tagen vor der nächsten Periode bemerken manche prämenstruelle Veränderungen." + }, + "commonHere": "Das bemerkst du hier oft", + "trackNudge": "Heute eintragen", + "stillLearning": "Lerne deinen Zyklus noch kennen. Trage weiter ein, dann füllt sich das mit Mustern aus deinen eigenen Tagen." + }, "disclaimer": "Diese Vorhersagen sind beschreibende Schätzungen aus deinen erfassten Daten, keine Verhütungsmethode und keine medizinische Beratung. Sie zeigen nie an, dass ungeschützter Geschlechtsverkehr sicher ist. Wende dich für Verhütung oder medizinische Entscheidungen an eine medizinische Fachperson.", "title": "Dein Zyklus", "subtitle": "Erfasse deine Periode und Symptome und sieh, was als Nächstes kommt.", diff --git a/messages/en.json b/messages/en.json index 8b07b879a..e040f7fb4 100644 --- a/messages/en.json +++ b/messages/en.json @@ -4967,6 +4967,18 @@ "symptomPatternsEmpty": "Log symptoms across a cycle to see which phase they cluster in.", "symptomMostlyIn": "Mostly in {phase} ({count}/{total} days)" }, + "phaseEducation": { + "title": "What's happening now", + "whatsHappening": { + "MENSTRUAL": "Your period is the start of a new cycle, as the uterine lining sheds. Energy and mood often feel lower in these first days.", + "FOLLICULAR": "After your period, oestrogen gradually rises as the body prepares an egg. Many people notice steadier energy through this stretch.", + "OVULATORY": "Around mid-cycle an egg is released and fertility peaks for a short window. This phase is the briefest of the four.", + "LUTEAL": "After ovulation, progesterone rises and the body settles in. In the days before your next period some people notice premenstrual changes." + }, + "commonHere": "You often notice this here", + "trackNudge": "Log today", + "stillLearning": "Still learning your cycle. Keep logging and this fills in with patterns from your own days." + }, "disclaimer": "These predictions are descriptive estimates from your logged data, not a contraceptive method and not medical advice. They never indicate that it is safe to have unprotected sex. For contraception or any medical decision, consult a healthcare professional.", "title": "Your cycle", "subtitle": "Log your period and symptoms, see what comes next.", diff --git a/messages/es.json b/messages/es.json index da63e756a..1733028ff 100644 --- a/messages/es.json +++ b/messages/es.json @@ -4967,6 +4967,18 @@ "symptomPatternsEmpty": "Registra síntomas a lo largo de un ciclo para ver en qué fase se concentran.", "symptomMostlyIn": "Sobre todo en {phase} ({count}/{total} días)" }, + "phaseEducation": { + "title": "Qué está pasando ahora", + "whatsHappening": { + "MENSTRUAL": "Tu menstruación es el inicio de un nuevo ciclo, mientras el revestimiento uterino se desprende. La energía y el ánimo suelen sentirse más bajos en estos primeros días.", + "FOLLICULAR": "Tras la menstruación, el estrógeno sube de forma gradual mientras el cuerpo prepara un óvulo. Muchas personas notan una energía más estable durante esta etapa.", + "OVULATORY": "Hacia la mitad del ciclo se libera un óvulo y la fertilidad alcanza su punto máximo durante una ventana corta. Esta fase es la más breve de las cuatro.", + "LUTEAL": "Después de la ovulación, la progesterona sube y el cuerpo se asienta. En los días previos a la siguiente menstruación, algunas personas notan cambios premenstruales." + }, + "commonHere": "Esto lo notas a menudo aquí", + "trackNudge": "Registrar hoy", + "stillLearning": "Aún estamos conociendo tu ciclo. Sigue registrando y esto se irá completando con patrones de tus propios días." + }, "disclaimer": "Estas predicciones son estimaciones descriptivas a partir de tus datos registrados, no un método anticonceptivo ni un consejo médico. Nunca indican que sea seguro tener relaciones sin protección. Para anticoncepción o cualquier decisión médica, consulta a un profesional sanitario.", "title": "Tu ciclo", "subtitle": "Registra tu periodo y síntomas, y mira qué viene después.", diff --git a/messages/fr.json b/messages/fr.json index ae6869a5c..9aded9315 100644 --- a/messages/fr.json +++ b/messages/fr.json @@ -4967,6 +4967,18 @@ "symptomPatternsEmpty": "Notez vos symptômes sur un cycle pour voir dans quelle phase ils se regroupent.", "symptomMostlyIn": "Surtout en {phase} ({count}/{total} jours)" }, + "phaseEducation": { + "title": "Ce qui se passe maintenant", + "whatsHappening": { + "MENSTRUAL": "Tes règles marquent le début d'un nouveau cycle, lorsque la muqueuse utérine se détache. L'énergie et l'humeur semblent souvent plus basses durant ces premiers jours.", + "FOLLICULAR": "Après les règles, l'œstrogène augmente progressivement pendant que le corps prépare un ovule. Beaucoup ressentent une énergie plus stable durant cette période.", + "OVULATORY": "Vers le milieu du cycle, un ovule est libéré et la fertilité culmine sur une courte fenêtre. Cette phase est la plus brève des quatre.", + "LUTEAL": "Après l'ovulation, la progestérone augmente et le corps se pose. Dans les jours précédant les prochaines règles, certaines personnes remarquent des changements prémenstruels." + }, + "commonHere": "Tu le remarques souvent ici", + "trackNudge": "Noter aujourd'hui", + "stillLearning": "On apprend encore ton cycle. Continue à noter et cela se remplira avec les tendances de tes propres journées." + }, "disclaimer": "Ces prévisions sont des estimations descriptives issues de vos données enregistrées, ni une méthode de contraception ni un avis médical. Elles n'indiquent jamais qu'il est sûr d'avoir des rapports non protégés. Pour la contraception ou toute décision médicale, consultez un professionnel de santé.", "title": "Ton cycle", "subtitle": "Enregistre tes règles et symptômes, et vois ce qui arrive ensuite.", diff --git a/messages/it.json b/messages/it.json index 41b5e482e..bbaf665f7 100644 --- a/messages/it.json +++ b/messages/it.json @@ -4967,6 +4967,18 @@ "symptomPatternsEmpty": "Registra i sintomi durante un ciclo per vedere in quale fase si concentrano.", "symptomMostlyIn": "Soprattutto in {phase} ({count}/{total} giorni)" }, + "phaseEducation": { + "title": "Cosa sta succedendo ora", + "whatsHappening": { + "MENSTRUAL": "Le mestruazioni sono l'inizio di un nuovo ciclo, mentre il rivestimento uterino si sfalda. In questi primi giorni energia e umore spesso si sentono più bassi.", + "FOLLICULAR": "Dopo le mestruazioni gli estrogeni salgono gradualmente mentre il corpo prepara un ovulo. Molte persone notano un'energia più stabile in questa fase.", + "OVULATORY": "Verso metà ciclo viene rilasciato un ovulo e la fertilità raggiunge il picco per una breve finestra. Questa fase è la più breve delle quattro.", + "LUTEAL": "Dopo l'ovulazione il progesterone sale e il corpo si assesta. Nei giorni prima del ciclo successivo alcune persone notano cambiamenti premestruali." + }, + "commonHere": "Questo lo noti spesso qui", + "trackNudge": "Registra oggi", + "stillLearning": "Stiamo ancora imparando il tuo ciclo. Continua a registrare e questo si completerà con gli schemi delle tue giornate." + }, "disclaimer": "Queste previsioni sono stime descrittive basate sui tuoi dati registrati, non un metodo contraccettivo né un parere medico. Non indicano mai che sia sicuro avere rapporti non protetti. Per la contraccezione o qualsiasi decisione medica, consulta un professionista sanitario.", "title": "Il tuo ciclo", "subtitle": "Registra il ciclo e i sintomi e scopri cosa arriva dopo.", diff --git a/messages/pl.json b/messages/pl.json index cc2036172..ad3a65dc3 100644 --- a/messages/pl.json +++ b/messages/pl.json @@ -4967,6 +4967,18 @@ "symptomPatternsEmpty": "Zapisuj objawy przez cały cykl, aby zobaczyć, w której fazie się grupują.", "symptomMostlyIn": "Głównie w fazie {phase} ({count}/{total} dni)" }, + "phaseEducation": { + "title": "Co się teraz dzieje", + "whatsHappening": { + "MENSTRUAL": "Miesiączka to początek nowego cyklu, gdy złuszcza się błona śluzowa macicy. W tych pierwszych dniach energia i nastrój często są niższe.", + "FOLLICULAR": "Po miesiączce poziom estrogenu stopniowo rośnie, gdy organizm przygotowuje komórkę jajową. Wiele osób odczuwa w tej fazie bardziej stabilną energię.", + "OVULATORY": "W połowie cyklu uwalniana jest komórka jajowa, a płodność osiąga szczyt przez krótkie okno czasu. Ta faza jest najkrótsza z czterech.", + "LUTEAL": "Po owulacji rośnie poziom progesteronu i organizm się wycisza. W dniach przed kolejną miesiączką niektóre osoby zauważają zmiany przedmiesiączkowe." + }, + "commonHere": "To często zauważasz tutaj", + "trackNudge": "Zapisz dziś", + "stillLearning": "Wciąż poznajemy Twój cykl. Zapisuj dalej, a to wypełni się wzorcami z Twoich własnych dni." + }, "disclaimer": "Te prognozy to opisowe szacunki na podstawie zapisanych danych, a nie metoda antykoncepcji ani porada medyczna. Nigdy nie oznaczają, że współżycie bez zabezpieczenia jest bezpieczne. W sprawach antykoncepcji lub decyzji medycznych skonsultuj się z pracownikiem ochrony zdrowia.", "title": "Twój cykl", "subtitle": "Zapisuj miesiączkę i objawy oraz sprawdzaj, co dalej.", diff --git a/src/components/cycle/__tests__/phase-education-card.test.tsx b/src/components/cycle/__tests__/phase-education-card.test.tsx new file mode 100644 index 000000000..7e18e0ae1 --- /dev/null +++ b/src/components/cycle/__tests__/phase-education-card.test.tsx @@ -0,0 +1,120 @@ +import { describe, it, expect } from "vitest"; +import { renderToStaticMarkup } from "react-dom/server"; + +import { PhaseEducationCard } from "../phase-education-card"; +import { I18nProvider } from "@/lib/i18n/context"; +import type { SymptomPhaseRow } from "../use-cycle"; + +function render(node: React.ReactNode) { + return renderToStaticMarkup( + {node}, + ); +} + +const lutealCramps: SymptomPhaseRow = { + symptomKey: "cramps", + counts: { MENSTRUAL: 1, FOLLICULAR: 0, OVULATORY: 0, LUTEAL: 6 }, + total: 7, + topPhase: "LUTEAL", + topShare: 6 / 7, +}; +const follicularFatigue: SymptomPhaseRow = { + symptomKey: "fatigue", + counts: { MENSTRUAL: 0, FOLLICULAR: 5, OVULATORY: 0, LUTEAL: 1 }, + total: 6, + topPhase: "FOLLICULAR", + topShare: 5 / 6, +}; + +const okGate = { + predictionEnabled: true, + rawChartMode: false, + cyclesObserved: 4, + onLogToday: () => {}, +}; + +describe("", () => { + it("renders phase name + descriptive line + the log nudge when the gate passes", () => { + const html = render( + , + ); + expect(html).toContain("Luteal"); + expect(html).toContain("progesterone"); // curated whatsHappening line + expect(html).toContain("Log today"); + expect(html).toContain('data-phase="LUTEAL"'); + }); + + it("shows only the user's OWN symptoms that cluster in the active phase", () => { + const html = render( + , + ); + // cramps clusters in luteal → shown; fatigue clusters in follicular → not. + expect(html).toContain("Cramps"); + expect(html).not.toContain("Fatigue"); + }); + + it("falls back to the still-learning line when fewer than three cycles", () => { + const html = render( + {}} + />, + ); + expect(html).toContain("Still learning your cycle"); + expect(html).not.toContain("progesterone"); + expect(html).not.toContain("Cramps"); + }); + + it("falls back to still-learning in raw-chart mode / prediction disabled", () => { + const raw = render( + {}} + />, + ); + expect(raw).toContain("Still learning your cycle"); + + const off = render( + {}} + />, + ); + expect(off).toContain("Still learning your cycle"); + }); + + it("omits the chip row in the compact variant", () => { + const html = render( + , + ); + expect(html).toContain("progesterone"); + expect(html).not.toContain("cycle-phase-education-chips"); + // The compact variant still carries the log nudge. + expect(html).toContain("Log today"); + }); +}); diff --git a/src/components/cycle/cycle-view.tsx b/src/components/cycle/cycle-view.tsx index 1b29562da..b4e29a82d 100644 --- a/src/components/cycle/cycle-view.tsx +++ b/src/components/cycle/cycle-view.tsx @@ -13,6 +13,7 @@ import { BbtChart } from "./bbt-chart"; import { CycleCalendar } from "./cycle-calendar"; import { CycleDisclaimer } from "./cycle-disclaimer"; import { LogDaySheet } from "./log-day-sheet"; +import { PhaseEducationCard } from "./phase-education-card"; import { PredictionsPanel } from "./predictions-panel"; import { CyclePhaseHeadline, CyclePhaseCrosstab } from "./cycle-phase-crosstab"; import { CycleSymptomPatterns } from "./cycle-symptom-patterns"; @@ -96,6 +97,10 @@ export function CycleView() { // prediction.disclaimer (already goal-correct); fall back to the goal-derived // key for the no-prediction calendar tab (QA H-1). const goal = calendar.data?.profile.goal; + // Honesty-gate inputs for the phase-education card (Clue precedent): the + // predictive phase framing only shows when prediction is on, not in + // raw-chart mode, and at least three cycles are observed. + const calProfile = calendar.data?.profile; const disclaimerText = calendar.data?.prediction?.disclaimer ?? t( @@ -123,6 +128,8 @@ export function CycleView() { {/* Desktop: ring (left) + tabs (right). Single column below lg. */}
+ {/* Wheel + compact phase card — grouped so they stick together. */} +
{/* Wheel — the signature ring on the premium wellness-tile surface. */}
@@ -182,6 +189,22 @@ export function CycleView() { ) : null}
+ {/* Compact phase-education card beneath the wheel — chip row omitted + here (compact); the full card lives on the calendar tab. */} + {!loading && !calendarError ? ( + openSheet(today)} + /> + ) : null} +
+ @@ -199,6 +222,16 @@ export function CycleView() { + {!loading && !calendarError ? ( + openSheet(today)} + /> + ) : null} {loading ? ( diff --git a/src/components/cycle/phase-education-card.tsx b/src/components/cycle/phase-education-card.tsx new file mode 100644 index 000000000..3f75f7d22 --- /dev/null +++ b/src/components/cycle/phase-education-card.tsx @@ -0,0 +1,213 @@ +"use client"; + +import { useMemo } from "react"; +import { Sparkles, Plus } from "lucide-react"; + +import { Button } from "@/components/ui/button"; +import { useTranslations } from "@/lib/i18n/context"; +import { cn } from "@/lib/utils"; +import { PHASE_WHATS_HAPPENING_KEY } from "@/lib/cycle/phase-copy"; +import { PHASE_HUE } from "./phase-tokens"; +import { CYCLE_SYMPTOM_CATALOG } from "./symptom-catalog"; +import type { CyclePhase } from "./types"; +import type { SymptomPhaseRow } from "./use-cycle"; + +/** + * v1.15.1 — the per-phase "what's happening now" education card. + * + * Anchored to the wheel: a hue-tinted `wellness-tile` surface keyed to the + * ACTIVE phase (`--tile-hue`), so it reads as part of the ring, not a generic + * tip card. Three zones: + * 1. phase name + hue dot, + * 2. a short, factual, descriptive-only "what's happening" line (curated i18n, + * never clinical advice / a medical claim), + * 3. a "you often notice this here" chip row sourced from the user's OWN + * symptom-by-phase history (`symptomPatterns`), filtered to symptoms that + * cluster in THIS phase — never a generic population claim — plus a + * "log today" nudge into the existing day-log sheet. + * + * Honesty gate (Clue precedent): when prediction is disabled / raw-chart mode + * or fewer than three observed cycles, the predictive framing is suppressed and + * the card shows a calm "still learning" line instead of phase copy + chips. + * + * Motion: NO competing animation. The card rides the wheel's once-per-session + * reveal — `animate` drives the shared `wellness-tile-rise` keyframe (a single + * calm entrance), which the global `prefers-reduced-motion` block already + * zeroes. No bespoke transitions. + */ + +const MIN_CYCLES_FOR_PREDICTION = 3; + +export interface PhaseEducationCardProps { + /** The active phase from the calendar read, or null when none is resolved. */ + phase: CyclePhase | null; + /** The user's own symptom-by-phase rows (from `useCycleInsights`). */ + symptomPatterns: SymptomPhaseRow[]; + /** Honesty-gate inputs from the calendar profile. */ + predictionEnabled: boolean; + rawChartMode: boolean; + cyclesObserved: number; + /** Open the day-log sheet for today (the "log today" nudge). */ + onLogToday: () => void; + /** Ride the wheel's once-per-session reveal — no independent animation. */ + animate?: boolean; + /** Compact variant beneath the wheel (tighter padding, no chip row). */ + compact?: boolean; + className?: string; +} + +export function PhaseEducationCard({ + phase, + symptomPatterns, + predictionEnabled, + rawChartMode, + cyclesObserved, + onLogToday, + animate = false, + compact = false, + className, +}: PhaseEducationCardProps) { + const { t } = useTranslations(); + + // Honesty gate: with prediction off / raw-chart mode / too few cycles, the + // phase label is not trustworthy — suppress the framing and stay calm. + const stillLearning = + !phase || + !predictionEnabled || + rawChartMode || + cyclesObserved < MIN_CYCLES_FOR_PREDICTION; + + // Flatten the catalog once: symptom key → { labelKey, icon }. Reuses the same + // catalog the symptom-patterns card draws from so the chip labels + icons + // match exactly. + const byKey = useMemo(() => { + const map = new Map< + string, + { + labelKey: string; + icon: (typeof CYCLE_SYMPTOM_CATALOG)[number]["symptoms"][number]["icon"]; + } + >(); + for (const cat of CYCLE_SYMPTOM_CATALOG) { + for (const s of cat.symptoms) { + map.set(s.key, { labelKey: s.labelKey, icon: s.icon }); + } + } + return map; + }, []); + + // The "common here" chips are the user's OWN symptoms that cluster in the + // ACTIVE phase (topPhase === phase). Most-concentrated first; capped so the + // row stays scannable. Empty when no pattern points at this phase yet. + const chips = useMemo(() => { + if (stillLearning || !phase) return []; + return symptomPatterns + .filter((row) => row.topPhase === phase) + .sort((a, b) => b.topShare - a.topShare || b.total - a.total) + .slice(0, 5); + }, [symptomPatterns, phase, stillLearning]); + + const hue = phase ? PHASE_HUE[phase] : PHASE_HUE.LUTEAL; + const phaseName = phase ? t(`cycle.phase.${phase}`) : null; + + return ( +
+ {/* Zone 1 — eyebrow + phase name with a hue dot (never colour-only). */} +
+
+ + {stillLearning ? ( +

+ {t("cycle.phaseEducation.stillLearning")} +

+ ) : ( + <> +

+

+ + {/* Zone 2 — the curated, descriptive-only "what's happening" line. */} +

+ {t(PHASE_WHATS_HAPPENING_KEY[phase as CyclePhase])} +

+ + {/* Zone 3 — the user's OWN clustered symptoms for this phase. The + compact variant under the wheel omits the chip row to stay light; + the calendar-tab variant shows it. */} + {!compact && chips.length > 0 ? ( +
+

+ {t("cycle.phaseEducation.commonHere")} +

+
    + {chips.map((row) => { + const meta = byKey.get(row.symptomKey); + const Icon = meta?.icon; + const name = meta ? t(meta.labelKey) : row.symptomKey; + return ( +
  • + {Icon ? ( +
    • + ); + })} +
+
+ ) : null} + + {/* The "log today" nudge — opens the existing day-log sheet. */} + + + )} +
+ ); +} diff --git a/src/lib/cycle/phase-copy.ts b/src/lib/cycle/phase-copy.ts new file mode 100644 index 000000000..c24bb6cd6 --- /dev/null +++ b/src/lib/cycle/phase-copy.ts @@ -0,0 +1,23 @@ +/** + * v1.15.1 — per-phase education copy → i18n leaf mapping. + * + * The `PhaseEducationCard` renders a short, factual "what's happening" line for + * the active cycle phase. The copy is curated, descriptive-only (no clinical + * advice, no medical claims) and lives entirely under `cycle.phaseEducation.*` + * in the message bundles — this module only maps a phase to its leaf key so the + * i18n-call-site-coverage guard sees the literal `t()` arguments at the call + * site and the copy stays translatable across all six locales. + */ +import type { CyclePhase } from "@/lib/cycle/types"; + +/** + * The phase → i18n leaf for the "what's happening now" descriptive line. The + * keys are spelled out as string literals (not interpolated) so the + * call-site-coverage walker resolves each one against `messages/en.json`. + */ +export const PHASE_WHATS_HAPPENING_KEY: Record = { + MENSTRUAL: "cycle.phaseEducation.whatsHappening.MENSTRUAL", + FOLLICULAR: "cycle.phaseEducation.whatsHappening.FOLLICULAR", + OVULATORY: "cycle.phaseEducation.whatsHappening.OVULATORY", + LUTEAL: "cycle.phaseEducation.whatsHappening.LUTEAL", +};