"use client"; import { registerCdpRecipe } from "@/lib/registry/analytics/cdp-events"; import formSummaryRecipe from "@/recipes/form-summary.recipe"; registerCdpRecipe(formSummaryRecipe); import { getSourceText } from "@/components/registry/primitives/editables/source-normalizers"; import { Text, type TextSource, } from "@/components/registry/primitives/editables/text"; import { cn } from "@/lib/registry/cn"; import { useFormBuilderContext } from "@/lib/registry/forms/form-context"; import type { CmsProps } from "@/lib/registry/sitecore"; /** * Live values readout for a parent FormBuilder. Shows a configurable * subset of the form's fields as a "running summary" — useful for * quote builders, pricing calculators, and any multi-step form where * users want to see what they've answered so far. * * Reads from the FormBuilderProvider context (must be a descendant). * The `fields` prop is a comma-separated list of field names to * surface; each name pulls its current value from the live values * map registered via `useRegisterFormValue`. * * Fields whose React component doesn't register their value won't * appear here. The standard form-X-fields auto-register via their * native input change events. */ export interface FormSummaryProps extends CmsProps { title?: TextSource; /** * Comma-separated list of field names to surface. Defaults to all * registered fields. Pass an explicit list to control display order * and limit the summary to a subset. */ fields?: TextSource; /** * Optional total field — the name of a field whose value should * render in the largest type at the bottom of the summary (e.g. * `quote_total` from a calculator). */ totalField?: TextSource; /** Label shown above the total value. Defaults to `Total`. */ totalLabel?: TextSource; } function formatLabel(name: string): string { // camelCase / snake_case → Title Case return name .replace(/[_-]+/g, " ") .replace(/([a-z])([A-Z])/g, "$1 $2") .replace(/^\w/, (c) => c.toUpperCase()); } function renderValue(value: unknown): string { if (value == null || value === "") return "—"; if (typeof value === "string") return value; if (typeof value === "number") return String(value); if (typeof value === "boolean") return value ? "Yes" : "No"; if (Array.isArray(value)) return value.join(", "); if (typeof value === "object") { try { return JSON.stringify(value); } catch { return "—"; } } return String(value); } export function Default({ title, fields, totalField, totalLabel, styles, id, isEditing, }: FormSummaryProps) { const { values } = useFormBuilderContext(); const titleText = getSourceText(title) || "Summary"; const fieldsList = (getSourceText(fields) ?? "") .split(",") .map((s) => s.trim()) .filter(Boolean); const totalName = getSourceText(totalField) ?? ""; const totalLabelText = getSourceText(totalLabel) || "Total"; // When `fields` is empty, surface every registered value (excluding // the total, since it gets its own slot). const displayNames = fieldsList.length > 0 ? fieldsList : Object.keys(values).filter((k) => k !== totalName); const totalValue = totalName ? values[totalName] : undefined; return ( ); } export const FormSummary = Default; export default Default; export const componentType = "universal";

Form Summary

Showcase

Form Summary