Compare commits

...
3 Commits
Author SHA1 Message Date
Joel Brock 00a159ca69 Hide stage progress bars on form (header and floating bar) 2026-06-25 12:24:12 -07:00
Joel Brock c3b63946cc Add form-only instruction note below survey subtitle 2026-06-25 10:33:34 -07:00
Joel Brock 098bbd7cde Remove contact identity fields from Stage 0 and widen Current stage
Drop the readonly First name, Last name, and Email fields from the
Check-in (organizing) section display. Add an optional fullWidth flag to
FieldConfig and set it on current_stage so it spans the full section grid.
2026-06-22 10:48:02 -07:00
4 changed files with 22 additions and 21 deletions
+10 -2
View File
@@ -402,6 +402,12 @@ export function EngagementForm({ config, cid, cs }: EngagementFormProps) {
return ( return (
<form onSubmit={handleSubmit(onSubmit, onInvalid)} className="space-y-5" noValidate> <form onSubmit={handleSubmit(onSubmit, onInvalid)} className="space-y-5" noValidate>
<p className="max-w-prose text-[15px] leading-relaxed text-ink-soft">
The questions you&apos;ll see depend on where you are in the Framework.
Please provide whatever information you can. You do not need to fill in
every field to submit.
</p>
<SubmissionContextHeader <SubmissionContextHeader
orgName={load.data.orgName} orgName={load.data.orgName}
currentStageLabel={resolveStageLabel(load.data.currentStage, load.data.options)} currentStageLabel={resolveStageLabel(load.data.currentStage, load.data.options)}
@@ -517,7 +523,8 @@ function SubmissionContextHeader({
{orgName} {orgName}
</h1> </h1>
<div className="mt-4 flex items-center gap-3"> <div className="mt-4 flex items-center gap-3">
<StageProgress currentRank={currentRank} /> {/* Progress bar hidden for now */}
{/* <StageProgress currentRank={currentRank} /> */}
<span className="text-[10px] uppercase tracking-[0.16em] font-medium text-ink-mute"> <span className="text-[10px] uppercase tracking-[0.16em] font-medium text-ink-mute">
Current stage Current stage
</span> </span>
@@ -644,7 +651,8 @@ function SubmitBar({
aria-live="polite" aria-live="polite"
aria-label={`Viewing ${viewedSectionLabel}`} aria-label={`Viewing ${viewedSectionLabel}`}
> >
<StageProgress currentRank={viewedRank} pulse /> {/* Progress bar hidden for now */}
{/* <StageProgress currentRank={viewedRank} pulse /> */}
<p className="min-w-0 truncate text-xs text-ink-mute"> <p className="min-w-0 truncate text-xs text-ink-mute">
<span className="text-ink-soft">{viewedSectionLabel}</span> <span className="text-ink-soft">{viewedSectionLabel}</span>
{isDirty && draftSavedAt && ( {isDirty && draftSavedAt && (
+5 -1
View File
@@ -259,6 +259,7 @@ export function StageSection({
{visibleFields.map((f) => { {visibleFields.map((f) => {
const resolvedOptions = f.optionGroupId ? options[f.optionGroupId] : undefined; const resolvedOptions = f.optionGroupId ? options[f.optionGroupId] : undefined;
const wide = const wide =
f.fullWidth ||
f.type === "textarea" || f.type === "textarea" ||
f.type === "boolean" || f.type === "boolean" ||
f.type === "multiselect"; f.type === "multiselect";
@@ -426,7 +427,10 @@ function FieldGroupCard({
{fields.map((f) => { {fields.map((f) => {
const resolvedOptions = f.optionGroupId ? options[f.optionGroupId] : undefined; const resolvedOptions = f.optionGroupId ? options[f.optionGroupId] : undefined;
const wide = const wide =
f.type === "textarea" || f.type === "boolean" || f.type === "multiselect"; f.fullWidth ||
f.type === "textarea" ||
f.type === "boolean" ||
f.type === "multiselect";
return ( return (
<div key={f.name} className={wide ? "md:col-span-2" : ""}> <div key={f.name} className={wide ? "md:col-span-2" : ""}>
<FieldRenderer <FieldRenderer
+1 -18
View File
@@ -103,24 +103,7 @@ const stage0: StageSectionConfig = {
label: "Current stage", label: "Current stage",
type: "readonly", type: "readonly",
optionGroupId: STAGE_OPTION_GROUP_ID, optionGroupId: STAGE_OPTION_GROUP_ID,
}, fullWidth: true,
// Contact identity, sourced from the cid in /api/data. Display-only —
// never written back to Civi. These confirm to the form-filler which
// contact record their submission will be attributed to.
{
name: "contact_first_name",
label: "First name",
type: "readonly",
},
{
name: "contact_last_name",
label: "Last name",
type: "readonly",
},
{
name: "contact_email",
label: "Email",
type: "readonly",
}, },
// Org-contact fields (Food_Co_op_Organizing custom group). These live // Org-contact fields (Food_Co_op_Organizing custom group). These live
// on the Organization Contact record, not on the Check-in activity, so // on the Organization Contact record, not on the Check-in activity, so
+6
View File
@@ -101,6 +101,12 @@ export interface FieldConfig {
* FormDataPayload.options so the renderer can use real CRM-defined choices. * FormDataPayload.options so the renderer can use real CRM-defined choices.
*/ */
optionGroupId?: number; optionGroupId?: number;
/**
* Force this field to span the full width of the section grid (both
* columns), regardless of its type. Wide types (textarea, boolean,
* multiselect) already span by default.
*/
fullWidth?: boolean;
} }
/** /**