Header: show Civi stage label prominently; restore current_stage readonly in Stage 0
- New STAGE_OPTION_GROUP_ID constant (=75) added to config and consumed
by both the in-card readonly and the header. Because the field carries
optionGroupId, /api/data auto-includes the Stage option group in its
parallel fetch (via the existing optionGroupIds derivation).
- SubmissionContextHeader: dropped the small inline 'Stage Organizing'
line. Replaced with an uppercase 'Current stage' eyebrow next to the
progress dots, followed by a display-font 20/24px leaf-toned label
underneath. Resolves the stored option value ('Organizing') to its
Civi option label ('Stage 1 — Convene & Prepare') via the new
resolveStageLabel helper; falls back to the raw value if the option
group hasn't loaded.
- Stage 0 'Check-in (organizing)' section: re-added a current_stage
readonly field at the top. With optionGroupId set, FieldRenderer's
readonly branch resolves the value to the Civi label for display.
This commit is contained in:
@@ -17,6 +17,7 @@ function sectionForField(
|
||||
return undefined;
|
||||
}
|
||||
import { evaluate } from "@/lib/conditional";
|
||||
import { STAGE_OPTION_GROUP_ID } from "@/config/form";
|
||||
import { StageSection } from "./StageSection";
|
||||
import { loadDraft, saveDraft, clearDraft } from "@/lib/draft";
|
||||
|
||||
@@ -283,7 +284,7 @@ export function EngagementForm({ config, cid, cs }: EngagementFormProps) {
|
||||
<form onSubmit={handleSubmit(onSubmit, onInvalid)} className="space-y-5" noValidate>
|
||||
<SubmissionContextHeader
|
||||
orgName={load.data.orgName}
|
||||
currentStage={load.data.currentStage}
|
||||
currentStageLabel={resolveStageLabel(load.data.currentStage, load.data.options)}
|
||||
currentRank={currentRank}
|
||||
/>
|
||||
|
||||
@@ -339,11 +340,11 @@ export function EngagementForm({ config, cid, cs }: EngagementFormProps) {
|
||||
|
||||
function SubmissionContextHeader({
|
||||
orgName,
|
||||
currentStage,
|
||||
currentStageLabel,
|
||||
currentRank,
|
||||
}: {
|
||||
orgName: string;
|
||||
currentStage: string;
|
||||
currentStageLabel: string;
|
||||
currentRank: number;
|
||||
}) {
|
||||
return (
|
||||
@@ -352,17 +353,34 @@ function SubmissionContextHeader({
|
||||
<h1 className="mt-1 font-display text-3xl font-medium leading-tight tracking-tight text-ink sm:text-[34px]">
|
||||
{orgName}
|
||||
</h1>
|
||||
<div className="mt-3 flex items-center gap-3">
|
||||
<div className="mt-4 flex items-center gap-3">
|
||||
<StageProgress currentRank={currentRank} />
|
||||
<span className="text-sm text-ink-soft">
|
||||
<span className="text-ink-mute">Stage</span>{" "}
|
||||
<span className="font-medium text-leaf-800">{currentStage || "—"}</span>
|
||||
<span className="text-[10px] uppercase tracking-[0.16em] font-medium text-ink-mute">
|
||||
Current stage
|
||||
</span>
|
||||
</div>
|
||||
<p className="mt-1.5 font-display text-xl sm:text-2xl font-medium leading-tight tracking-tight text-leaf-800">
|
||||
{currentStageLabel || "—"}
|
||||
</p>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Resolve a Stage option-value (e.g. "Organizing") to its Civi option label
|
||||
* (e.g. "Stage 1 — Convene & Prepare"). Falls back to the raw value if the
|
||||
* option group hasn't loaded or the value isn't in the group.
|
||||
*/
|
||||
function resolveStageLabel(
|
||||
value: string,
|
||||
options: Record<number, { value: string; label: string }[]> | undefined,
|
||||
): string {
|
||||
if (!value) return "";
|
||||
const group = options?.[STAGE_OPTION_GROUP_ID];
|
||||
if (!group) return value;
|
||||
return group.find((o) => o.value === value)?.label ?? value;
|
||||
}
|
||||
|
||||
/**
|
||||
* Six small dots representing the six stages, with the current rank filled
|
||||
* and earlier ranks marked as visited. Quietly conveys progression without
|
||||
|
||||
Reference in New Issue
Block a user