61:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 62:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 63:T8e92,"use client" import * as React from "react" import { ChevronDown, CircleAlert, CircleCheck, Clock, LoaderCircle, Mail, MapPin, Phone, } from "lucide-react" import { z } from "zod" import { cn } from "@/lib/utils" /* -------------------------------------------------------------------------- */ /* Contract */ /* -------------------------------------------------------------------------- */ /** * Longest message the form will hand over. The textarea deliberately carries no * native `maxLength`: a paste that is 40 characters too long has to be reported, * not silently trimmed to the limit — truncation destroys what someone wrote and * turns "too long" into "the end of my message vanished". */ export const CONTACT_MESSAGE_MAX = 2000 /** * The single validation rule, exported so the receiving endpoint can run the * identical check. zod owns validation: the form is `noValidate`, so the * browser never competes for the same field, and `type="email"` survives only * for the mobile keyboard (the native rule accepts `a@b`, which every mail * provider bounces). * * Parsing trims, so `parsed.data` — the object handed to `onSubmit` — is * already the payload you want to send, and `" "` counts as empty. */ export const contactFormSchema = z.object({ name: z .string() .trim() .min(1, "Tell us who we're replying to.") .max(80, "Keep the name under 80 characters."), email: z .string() .trim() .min(1, "Enter the address we should reply to.") .pipe(z.string().email("That doesn't look like an email address.")), subject: z.string().min(1, "Pick what this message is about."), message: z .string() .trim() .min(10, "Add a little more detail — at least 10 characters.") .max(CONTACT_MESSAGE_MAX, `Keep the message under ${CONTACT_MESSAGE_MAX} characters.`), }) export type ContactFormValues = z.infer export type ContactField = keyof ContactFormValues /** Tab order, and therefore the order the first invalid field is looked for in. */ const FIELD_ORDER: readonly ContactField[] = ["name", "email", "subject", "message"] export type ContactSectionStatus = "idle" | "submitting" | "success" | "error" /** Decides the icon and, for `email` / `phone`, the link scheme derived from `value`. */ export type ContactChannelType = "email" | "phone" | "address" | "hours" export interface ContactChannel { type: ContactChannelType /** Row label — "Email", "Sales line", "Studio", "Support hours". */ label: string /** What the visitor reads. `\n` starts a new line, for addresses and opening hours. */ value: string /** * Overrides the derived link, and is the only way an `address` row becomes one * (a street address has no scheme to derive from — pass a real map URL). * `""` and `"#"` are ignored on purpose: a row with nowhere to go renders as * plain text, never as a link that does nothing. */ href?: string /** Small second line: "Replies within one business day." */ note?: string } export interface ContactSubject { /** Submitted verbatim as `values.subject`. */ value: string label: string } export const DEFAULT_CONTACT_SUBJECTS: readonly ContactSubject[] = [ { value: "general", label: "General question" }, { value: "sales", label: "Sales and pricing" }, { value: "support", label: "Technical support" }, { value: "partnership", label: "Partnership" }, { value: "press", label: "Press and media" }, ] export const DEFAULT_CONTACT_CHANNELS: readonly ContactChannel[] = [ { type: "email", label: "Email", value: "hello@example.com", note: "Replies within one business day.", }, { type: "phone", label: "Phone", value: "+1 (415) 555-0132", note: "Monday to Friday, 9:00–17:00 PT.", }, { type: "address", label: "Office", value: "500 Terry Francois Blvd\nSuite 200\nSan Francisco, CA 94158", href: "https://www.google.com/maps/search/?api=1&query=500+Terry+Francois+Blvd+San+Francisco", }, { type: "hours", label: "Support hours", value: "Monday to Friday\n9:00 – 17:00 (UTC−8)", }, ] /** * Every user-visible string except the field validation messages, which live in * `contactFormSchema` so the same wording can be reused on the server. Override * any subset through the `messages` prop. */ export const CONTACT_MESSAGES = { detailsHeading: "Other ways to reach us", nameLabel: "Your name", namePlaceholder: "Alex Morgan", emailLabel: "Email", emailPlaceholder: "you@example.com", subjectLabel: "What is this about?", subjectPlaceholder: "Choose a topic", messageLabel: "Message", messagePlaceholder: "A sentence or two about what you need.", counterLabel: "characters used", requiredHint: "required", submitLabel: "Send message", pendingLabel: "Sending…", retryLabel: "Try again", sendingAnnouncement: "Sending your message…", failureMessage: "We couldn't send your message just now. Nothing you typed was lost — try again.", successTitle: "Message sent", successDescription: "We'll reply to this address within one business day.", successSubjectLabel: "Topic", resetLabel: "Send another message", } export type ContactMessages = typeof CONTACT_MESSAGES const CHANNEL_ICONS: Record> = { email: Mail, phone: Phone, address: MapPin, hours: Clock, } /** * The link for a row, or `undefined` when it should stay text. An explicit * `href` wins; `mailto:` / `tel:` are derived from the displayed value so the * common rows cannot drift out of sync with what is printed next to them. */ function channelHref(channel: ContactChannel): string | undefined { const explicit = channel.href?.trim() if (explicit !== undefined && explicit !== "" && explicit !== "#") return explicit if (channel.type === "email") { const address = channel.value.trim() return address === "" ? undefined : `mailto:${address}` } if (channel.type === "phone") { // Everything a human writes for legibility — spaces, brackets, dashes — is // noise to the dialler. A number the regex empties out (an extension-only // string, say) gets no link rather than `tel:`. const dialable = channel.value.replace(/[^+\d]/g, "") return dialable === "" || dialable === "+" ? undefined : `tel:${dialable}` } return undefined } /** A rejection that is not an `Error` still has to become a sentence a human can read. */ function rejectionText(error: unknown, fallback: string): string { if (error instanceof Error && error.message) return error.message if (typeof error === "string" && error) return error return fallback } /* -------------------------------------------------------------------------- */ /* Styling primitives */ /* -------------------------------------------------------------------------- */ const CONTROL_CLASS = cn( "w-full min-w-0 rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground", "outline-none transition-colors motion-reduce:transition-none placeholder:text-muted-foreground", "focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40", "disabled:cursor-not-allowed disabled:opacity-60", "aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/30", ) function Field({ children, controlId, error, errorId, label, suffix, }: { children: React.ReactNode controlId: string error: string | undefined errorId: string label: string /** Right-hand slot on the label row — the message counter lives here. */ suffix?: React.ReactNode }) { return (

{label} {suffix}

{children} {/* The message is plain markup, not role="alert": submitting an invalid form moves focus to the first offending control, and a screen reader reads this text there as that control's description. Firing four alerts at once would talk over that. */} {error !== undefined ? (

{error}

) : null}

) } /* -------------------------------------------------------------------------- */ /* Component */ /* -------------------------------------------------------------------------- */ export interface ContactSectionProps extends Omit, "onSubmit" | "children"> { /** * Owns the network call — the block never fetches anything itself. It receives * the parsed, trimmed values. Resolve to swap the form for the confirmation * panel; reject to show a retryable failure with every field still filled in * (an `Error`'s message is shown verbatim, so a server can explain itself). */ onSubmit: (values: ContactFormValues) => Promise /** Section heading, and the accessible name of the region. Pass `""` to drop it. */ heading?: string /** Optional line under the heading. */ description?: string /** Left column rows. Pass `[]` to ship the form on its own. */ channels?: readonly ContactChannel[] /** Options for the topic dropdown. */ subjects?: readonly ContactSubject[] /** Seeds the form — a signed-in visitor's name and address, or an `?about=` param. */ defaultValues?: Partial /** * Slot under the contact rows for a map: an `