223 lines
7.6 KiB
TypeScript
223 lines
7.6 KiB
TypeScript
"use client";
|
|
|
|
import { useId, useMemo, useState } from "react";
|
|
import type { StageSectionConfig, SelectOption } from "@/types/form";
|
|
import type { UseFormRegister, FieldValues, FieldErrors } from "react-hook-form";
|
|
import { FieldRenderer } from "./fields/FieldRenderer";
|
|
import { MatrixGroup } from "./MatrixGroup";
|
|
import { StageIcon } from "./StageIcon";
|
|
import { evaluate } from "@/lib/conditional";
|
|
|
|
interface StageSectionProps {
|
|
section: StageSectionConfig;
|
|
register: UseFormRegister<FieldValues>;
|
|
errors: FieldErrors;
|
|
/** Live form values, used to evaluate per-field visibility rules. */
|
|
formValues: Record<string, unknown>;
|
|
/** Whether this is the section that matches the current org stage. */
|
|
isCurrent: boolean;
|
|
/** Whether the section starts open. */
|
|
defaultOpen: boolean;
|
|
/** Option groups fetched from CiviCRM, keyed by option_group_id. */
|
|
options: Record<number, SelectOption[]>;
|
|
/** Optional last-checked-in timestamp for this stage (ISO date). */
|
|
lastTouched?: string;
|
|
}
|
|
|
|
/**
|
|
* One accordion card per stage section. Header carries:
|
|
* - A hand-drawn stage icon (left)
|
|
* - The stage label (display serif)
|
|
* - A "Current stage" pill in terracotta if applicable
|
|
* - A field-count summary on the right
|
|
* - A chevron that rotates on open
|
|
*
|
|
* The card border thickens and tints leaf-green when current; otherwise it
|
|
* sits quietly on the cream paper.
|
|
*/
|
|
export function StageSection({
|
|
section,
|
|
register,
|
|
errors,
|
|
formValues,
|
|
isCurrent,
|
|
defaultOpen,
|
|
options,
|
|
lastTouched,
|
|
}: StageSectionProps) {
|
|
const [open, setOpen] = useState(defaultOpen);
|
|
const headingId = useId();
|
|
const panelId = useId();
|
|
|
|
const matrixFieldNames = useMemo(() => {
|
|
const names = new Set<string>();
|
|
for (const m of section.matrixGroups ?? []) {
|
|
for (const row of m.rows) for (const f of row.fields) names.add(f);
|
|
}
|
|
return names;
|
|
}, [section.matrixGroups]);
|
|
|
|
const visibleFields = section.fields.filter(
|
|
(f) => evaluate(f.visibleWhen, formValues) && !matrixFieldNames.has(f.name),
|
|
);
|
|
|
|
const fieldCount =
|
|
visibleFields.length +
|
|
(section.matrixGroups ?? []).reduce(
|
|
(n, g) => n + g.rows.reduce((m, r) => m + r.fields.length, 0),
|
|
0,
|
|
);
|
|
|
|
return (
|
|
<section
|
|
aria-labelledby={headingId}
|
|
className={
|
|
"overflow-hidden rounded-lg bg-white/95 transition " +
|
|
(isCurrent
|
|
? "border-2 border-leaf-600 shadow-[0_1px_0_0_rgba(0,0,0,0.04),0_8px_24px_-12px_rgba(60,80,40,0.18)]"
|
|
: "border border-rule shadow-sm")
|
|
}
|
|
>
|
|
<h2 id={headingId} className="m-0">
|
|
<button
|
|
type="button"
|
|
onClick={() => setOpen((v) => !v)}
|
|
aria-expanded={open}
|
|
aria-controls={panelId}
|
|
className={
|
|
"group relative flex w-full items-center gap-4 px-5 py-4 text-left transition-colors sm:px-6 " +
|
|
(isCurrent ? "bg-leaf-50/60" : "hover:bg-paper-2/60")
|
|
}
|
|
>
|
|
<StageRankMark rank={section.rank} isCurrent={isCurrent} />
|
|
<span className="flex-1 min-w-0">
|
|
<span className="block font-display text-lg font-medium text-ink leading-tight tracking-tight sm:text-xl">
|
|
{section.label}
|
|
</span>
|
|
<span className="mt-1 flex items-center gap-3 text-xs text-ink-mute">
|
|
{isCurrent && (
|
|
<span className="inline-flex items-center gap-1.5 rounded-full border border-clay-200 bg-clay-100/70 px-2 py-0.5 font-medium text-clay-700 uppercase tracking-[0.08em]">
|
|
<span className="h-1.5 w-1.5 rounded-full bg-clay-600" aria-hidden />
|
|
Current stage
|
|
</span>
|
|
)}
|
|
<span className="tabular-nums">
|
|
{fieldCount} {fieldCount === 1 ? "field" : "fields"}
|
|
</span>
|
|
{lastTouched && (
|
|
<>
|
|
<span aria-hidden>·</span>
|
|
<span>Last touched {formatRelative(lastTouched)}</span>
|
|
</>
|
|
)}
|
|
</span>
|
|
</span>
|
|
<Chevron open={open} />
|
|
</button>
|
|
</h2>
|
|
|
|
<div
|
|
id={panelId}
|
|
role="region"
|
|
aria-labelledby={headingId}
|
|
hidden={!open}
|
|
className="border-t border-rule-soft"
|
|
>
|
|
<div className="px-5 py-6 sm:px-7 sm:py-7">
|
|
{section.intro && (
|
|
<p className="mb-6 max-w-prose text-[15px] leading-relaxed text-ink-soft">
|
|
{section.intro}
|
|
</p>
|
|
)}
|
|
{(section.matrixGroups ?? []).length > 0 && (
|
|
<div className="mb-7 space-y-5">
|
|
{section.matrixGroups!.map((g) => (
|
|
<MatrixGroup key={g.id} group={g} register={register} />
|
|
))}
|
|
</div>
|
|
)}
|
|
{visibleFields.length === 0 && (section.matrixGroups ?? []).length === 0 ? (
|
|
<p className="text-sm italic text-ink-mute">No fields are visible at this stage.</p>
|
|
) : visibleFields.length === 0 ? null : (
|
|
<div className="grid grid-cols-1 gap-x-7 gap-y-5 md:grid-cols-2">
|
|
{visibleFields.map((f) => {
|
|
const resolvedOptions = f.optionGroupId ? options[f.optionGroupId] : undefined;
|
|
const wide =
|
|
f.type === "textarea" ||
|
|
f.type === "boolean" ||
|
|
f.type === "multiselect";
|
|
return (
|
|
<div key={f.name} className={wide ? "md:col-span-2" : ""}>
|
|
<FieldRenderer
|
|
field={f}
|
|
register={register}
|
|
errors={errors}
|
|
readonlyValue={formValues[f.name]}
|
|
resolvedOptions={resolvedOptions}
|
|
/>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Stage rank mark: the number sits in a small circle, with the hand-drawn
|
|
* icon offset behind it. When current, the ring is leaf-green and the
|
|
* number is white-on-green; otherwise it's quiet.
|
|
*/
|
|
function StageRankMark({ rank, isCurrent }: { rank: number; isCurrent: boolean }) {
|
|
return (
|
|
<span aria-hidden className="relative inline-flex h-12 w-12 flex-shrink-0 items-center justify-center">
|
|
<StageIcon
|
|
rank={rank}
|
|
className={
|
|
"absolute inset-0 h-12 w-12 transition-opacity " +
|
|
(isCurrent ? "text-leaf-700 opacity-100" : "text-leaf-600 opacity-50")
|
|
}
|
|
/>
|
|
<span
|
|
className={
|
|
"relative z-10 inline-flex h-5 w-5 items-center justify-center rounded-full text-[10px] font-semibold tabular-nums shadow-sm " +
|
|
(isCurrent ? "bg-leaf-700 text-paper" : "bg-paper text-ink-soft border border-rule")
|
|
}
|
|
style={{ marginLeft: 28, marginTop: 28 }}
|
|
>
|
|
{rank}
|
|
</span>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
function Chevron({ open }: { open: boolean }) {
|
|
return (
|
|
<svg
|
|
aria-hidden
|
|
viewBox="0 0 20 20"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="1.5"
|
|
strokeLinecap="round"
|
|
className={"h-5 w-5 flex-shrink-0 text-ink-mute transition-transform duration-300 " + (open ? "rotate-180" : "")}
|
|
>
|
|
<path d="M5 8 L10 13 L15 8" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function formatRelative(iso: string): string {
|
|
const then = new Date(iso).getTime();
|
|
if (Number.isNaN(then)) return iso;
|
|
const days = Math.round((Date.now() - then) / (1000 * 60 * 60 * 24));
|
|
if (days <= 0) return "today";
|
|
if (days === 1) return "yesterday";
|
|
if (days < 30) return `${days} days ago`;
|
|
if (days < 365) return `${Math.round(days / 30)} months ago`;
|
|
return `${Math.round(days / 365)} years ago`;
|
|
}
|