keystone-design-bootstrap 1.0.21 → 1.0.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "keystone-design-bootstrap",
-  "version": "1.0.21",
+  "version": "1.0.24",
   "description": "Keystone Design Bootstrap - Sections, Elements, and Theme System for customer websites",
   "type": "module",
   "main": "./src/index.ts",
@@ -12,6 +12,7 @@
     "./logo": "./src/design_system/logo/keystone-logo.tsx",
     "./hooks": "./src/lib/hooks/index.ts",
     "./contexts": "./src/contexts/index.ts",
+    "./tracking": "./src/tracking/index.ts",
     "./lib/server-api": "./src/lib/server-api.ts",
     "./lib/component-registry": "./src/lib/component-registry.ts",
     "./styles/*": "./src/styles/*",

package/src/design_system/components/DynamicFormFields.tsx

@@ -0,0 +1,202 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Input, InputBase, InputGroup, NativeSelect, Textarea, PrivacyCheckbox } from '../elements';
+import type { FormDefinition, FormFieldDefinition } from '../../types/api/form';
+import countries from '../../utils/countries';
+
+export interface DynamicFormFieldsProps {
+  /** Form definition from API (fields array + optional settings). */
+  form: FormDefinition;
+  /** For job_application forms: add hidden jobSlug input. */
+  jobSlug?: string;
+}
+
+const INPUT_TYPES = ['text', 'email', 'tel'] as const;
+
+/** Get national-format mask from country (e.g. "(###) ###-####") by stripping country code from phoneMask. */
+function getNationalMask(country: (typeof countries)[0] | undefined): string {
+  if (!country?.phoneMask) return '';
+  const code = country.phoneCode.startsWith('+') ? country.phoneCode : `+${country.phoneCode}`;
+  const escaped = code.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  return country.phoneMask.replace(new RegExp(`^\\s*${escaped}[\\s-]*`), '').trim();
+}
+
+/** Format digit string into mask; # = one digit. No trailing literals so backspace works. */
+function formatDigitsToMask(digits: string, mask: string): string {
+  if (digits.length === 0) return '';
+  let i = 0;
+  let out = '';
+  for (const c of mask) {
+    if (c === '#') {
+      if (i < digits.length) out += digits[i++];
+      else break;
+    } else if (i < digits.length) {
+      out += c;
+    }
+  }
+  return out;
+}
+
+function allFieldsFlat(fields: FormDefinition['fields']): FormFieldDefinition[] {
+  const out: FormFieldDefinition[] = [];
+  for (const item of fields) {
+    if (Array.isArray(item)) out.push(...item);
+    else if (item && typeof item === 'object' && 'name' in item) out.push(item);
+  }
+  return out;
+}
+
+function renderField(
+  field: FormFieldDefinition,
+  index: number,
+  showCountryCode: boolean,
+  selectedCountryPhone: string,
+  onCountryChange: (code: string) => void,
+  phoneValues: Record<string, string>,
+  setPhoneValues: React.Dispatch<React.SetStateAction<Record<string, string>>>
+): React.ReactNode {
+  const name = field.name ?? `field-${index}`;
+
+  if (field.type === 'hidden') {
+    const val = field.value ?? '';
+    return <input key={name} type="hidden" name={name} value={val} />;
+  }
+
+  if (field.type === 'tel' && showCountryCode) {
+    const countryOptions = countries.map((c) => ({
+      label: c.phoneCode.startsWith('+') ? c.phoneCode : `+${c.phoneCode}`,
+      value: c.code,
+    }));
+    const country = countries.find((c) => c.code === selectedCountryPhone);
+    const nationalMask = getNationalMask(country);
+    const value = phoneValues[name] ?? '';
+    const placeholder = nationalMask ? nationalMask.replace(/#/g, '0') : (field.placeholder ?? '');
+
+    const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const digits = e.target.value.replace(/\D/g, '');
+      const formatted = nationalMask ? formatDigitsToMask(digits, nationalMask) : digits;
+      setPhoneValues((prev) => ({ ...prev, [name]: formatted }));
+    };
+
+    return (
+      <InputGroup
+        key={name}
+        label={field.label}
+        isRequired={Boolean(field.required)}
+        size="md"
+        leadingAddon={
+          <NativeSelect
+            aria-label="Country code"
+            value={selectedCountryPhone}
+            onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
+              onCountryChange(e.currentTarget.value)
+            }
+            options={countryOptions}
+          />
+        }
+      >
+        <InputBase
+          type="tel"
+          name={name}
+          value={value}
+          onChange={handlePhoneChange}
+          placeholder={placeholder}
+          size="md"
+        />
+      </InputGroup>
+    );
+  }
+
+  if (field.type === 'textarea') {
+    return (
+      <Textarea
+        key={name}
+        name={name}
+        label={field.label}
+        placeholder={field.placeholder}
+        rows={6}
+        isRequired={Boolean(field.required)}
+      />
+    );
+  }
+
+  const inputType = INPUT_TYPES.includes(field.type as (typeof INPUT_TYPES)[number])
+    ? (field.type as 'text' | 'email' | 'tel')
+    : 'text';
+  return (
+    <Input
+      key={name}
+      isRequired={Boolean(field.required)}
+      size="md"
+      name={name}
+      label={field.label}
+      type={inputType}
+      placeholder={field.placeholder}
+    />
+  );
+}
+
+export function DynamicFormFields({ form, jobSlug }: DynamicFormFieldsProps) {
+  const [selectedCountryPhone, setSelectedCountryPhone] = useState('US');
+  const [phoneValues, setPhoneValues] = useState<Record<string, string>>({});
+  const { settings } = form;
+  const fields: FormDefinition['fields'] = Array.isArray(form.fields) ? form.fields : [];
+
+  const handleCountryChange = (newCode: string) => {
+    setSelectedCountryPhone(newCode);
+    const country = countries.find((c) => c.code === newCode);
+    const nationalMask = getNationalMask(country);
+    if (!nationalMask) return;
+    setPhoneValues((prev) => {
+      const next = { ...prev };
+      let changed = false;
+      for (const name of Object.keys(next)) {
+        const digits = next[name].replace(/\D/g, '');
+        const formatted = formatDigitsToMask(digits, nationalMask);
+        if (formatted !== next[name]) {
+          next[name] = formatted;
+          changed = true;
+        }
+      }
+      return changed ? next : prev;
+    });
+  };
+
+  /** Show country code selector for tel fields; default true (US +1) unless backend sets to false. */
+  const showCountryCode = settings?.show_country_code !== false;
+  const showPrivacyCheckbox = settings?.show_privacy_checkbox !== false;
+  const flat = allFieldsFlat(fields);
+  const hasPhoneField = flat.some((f) => f.type === 'tel');
+
+  return (
+    <div className="flex flex-col gap-6">
+      {fields.map((item, index) => {
+        if (Array.isArray(item)) {
+          if (item.length === 0) return null;
+          return (
+            <div
+              key={`row-${index}`}
+              className="flex flex-col gap-x-8 gap-y-6 md:flex-row"
+            >
+              {item.map((f, i) => (
+                <div key={f.name} className="flex-1">
+                  {renderField(f, i, showCountryCode, selectedCountryPhone, handleCountryChange, phoneValues, setPhoneValues)}
+                </div>
+              ))}
+            </div>
+          );
+        }
+        return (
+          <div key={item.name ?? `field-${index}`}>
+            {renderField(item, index, showCountryCode, selectedCountryPhone, handleCountryChange, phoneValues, setPhoneValues)}
+          </div>
+        );
+      })}
+
+      {jobSlug ? <input type="hidden" name="jobSlug" value={jobSlug} /> : null}
+
+      {showPrivacyCheckbox && hasPhoneField && <PrivacyCheckbox />}
+    </div>
+  );
+}

package/src/design_system/elements/checkbox/privacy-checkbox.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { useId } from 'react';
+
+/**
+ * A2P 10DLC-compliant privacy + SMS consent checkbox. Use on any form that collects phone numbers.
+ * Same copy and markup used across contact and job application forms.
+ */
+export function PrivacyCheckbox() {
+  const id = useId();
+  return (
+    <div className="flex items-start gap-3">
+      <input
+        type="checkbox"
+        id={id}
+        name="privacy"
+        required
+        aria-label="Agree to Privacy Policy, Terms of Service, and SMS consent"
+        className="mt-1 w-4 h-4 shrink-0 border-secondary rounded focus:ring-focus-ring"
+      />
+      <label htmlFor={id} className="font-body text-sm text-tertiary">
+        By checking this box, you agree to our{' '}
+        <a
+          href="/privacy-policy"
+          className="underline outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2"
+        >
+          Privacy Policy
+        </a>
+        {' '}
+        and{' '}
+        <a
+          href="/terms-of-service"
+          className="underline outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2"
+        >
+          Terms of Service
+        </a>
+        . You consent to receive text messages from our team and our automated systems (e.g., question follow-ups, updates, responses to ads) at the number provided. Message frequency varies. Message and data rates may apply. Reply HELP for help, STOP to opt out. *
+      </label>
+    </div>
+  );
+}

package/src/design_system/elements/index.tsx

@@ -20,10 +20,11 @@ import { AppStoreButton as BaseAppStoreButton, GooglePlayButton as BaseGooglePla
 import { ButtonGroup as BaseButtonGroup } from './button-group/button-group';
 
 // Form inputs
-import { Input as BaseInput } from './input/input';
+import { Input as BaseInput, InputBase as BaseInputBase } from './input/input';
 import { InputGroup as BaseInputGroup } from './input/input-group';
 import { TextArea as BaseTextarea } from './textarea/textarea';
 import { Checkbox as BaseCheckbox } from './checkbox/checkbox';
+import { PrivacyCheckbox as BasePrivacyCheckbox } from './checkbox/privacy-checkbox';
 import { Toggle as BaseToggle } from './toggle/toggle';
 import { Form as BaseForm } from './form/form';
 import { FormContainer as BaseFormContainer } from './form-container/form-container';
@@ -106,8 +107,10 @@ export const ButtonGroup = createThemedExport('button-group', BaseButtonGroup);
 
 // Form inputs
 export const Input = createThemedExport('input', BaseInput);
+export const InputBase = BaseInputBase;
 export const Textarea = createThemedExport('textarea', BaseTextarea);
 export const Checkbox = createThemedExport('checkbox', BaseCheckbox);
+export const PrivacyCheckbox = BasePrivacyCheckbox;
 export const Toggle = createThemedExport('toggle', BaseToggle);
 export const Form = createThemedExport('form', BaseForm);
 export const FormContainer = createThemedExport('form-container', BaseFormContainer as unknown as React.ComponentType<Record<string, unknown>>);

package/src/design_system/elements/input/input-group.tsx

@@ -58,7 +58,6 @@ export const InputGroup = ({ size = "sm", prefix, leadingAddon, trailingAddon, l
     const paddings = sortCx({
         sm: {
             input: cx(
-                // Apply padding styles when select element is passed as a child
                 hasLeading && "group-has-[&>select]:px-2.5 group-has-[&>select]:pl-2.5",
                 hasTrailing && (prefix ? "group-has-[&>select]:pr-6 group-has-[&>select]:pl-0" : "group-has-[&>select]:pr-6 group-has-[&>select]:pl-3"),
             ),
@@ -66,7 +65,6 @@ export const InputGroup = ({ size = "sm", prefix, leadingAddon, trailingAddon, l
         },
         md: {
             input: cx(
-                // Apply padding styles when select element is passed as a child
                 hasLeading && "group-has-[&>select]:px-3 group-has-[&>select]:pl-3",
                 hasTrailing && (prefix ? "group-has-[&>select]:pr-6 group-has-[&>select]:pl-0" : "group-has-[&>select]:pr-6 group-has-[&>select]:pl-3"),
             ),
@@ -81,14 +79,9 @@ export const InputGroup = ({ size = "sm", prefix, leadingAddon, trailingAddon, l
             inputClassName={cx(paddings[size].input)}
             tooltipClassName={cx(hasTrailing && !hasLeading && "group-has-[&>select]:right-0")}
             wrapperClassName={cx(
-                "z-10",
-                // Apply styles based on the presence of leading or trailing elements
-                hasLeading && "rounded-l-none",
+                "z-10 min-w-0 flex-1 !w-auto",
+                hasLeading && "rounded-sm rounded-l-none bg-white ring-1 ring-secondary ring-inset focus-within:ring-2 focus-within:ring-brand group-disabled:bg-disabled_subtle group-disabled:ring-disabled",
                 hasTrailing && "rounded-r-none",
-                // When select element is passed as a child
-                "group-has-[&>select]:bg-transparent group-has-[&>select]:shadow-none group-has-[&>select]:ring-0 group-has-[&>select]:focus-within:ring-0",
-                // In `Input` component, there is "group-disabled" class so here we need to use "group-disabled:group-has-[&>select]" to avoid conflict
-                "group-disabled:group-has-[&>select]:bg-transparent",
             )}
             {...props}
         >
@@ -98,17 +91,19 @@ export const InputGroup = ({ size = "sm", prefix, leadingAddon, trailingAddon, l
 
                     <div
                         data-input-size={size}
+                        data-input-wrapper
                         className={cx(
-                            "group relative flex h-max w-full flex-row justify-center rounded-lg bg-primary transition-all duration-100 ease-linear",
-
-                            // Only apply focus ring when child is select and input is focused
-                            "has-[&>select]:shadow-xs has-[&>select]:ring-1 has-[&>select]:ring-border-primary has-[&>select]:ring-inset has-[&>select]:has-[input:focus]:ring-2 has-[&>select]:has-[input:focus]:ring-border-brand",
-
+                            "group relative flex h-max w-full flex-row items-center rounded-sm bg-white transition-all duration-100 ease-linear",
+                            "has-[&>select]:shadow-xs has-[&>select]:ring-1 has-[&>select]:ring-secondary has-[&>select]:ring-inset has-[&>select]:has-[input:focus]:ring-2 has-[&>select]:has-[input:focus]:ring-brand",
                             isDisabled && "cursor-not-allowed has-[&>select]:bg-disabled_subtle has-[&>select]:ring-border-disabled",
                             isInvalid && "has-[&>select]:ring-border-error_subtle has-[&>select]:has-[input:focus]:ring-border-error",
                         )}
                     >
-                        {leadingAddon && <section data-leading={hasLeading || undefined}>{leadingAddon}</section>}
+                        {leadingAddon && (
+                            <div data-leading={hasLeading || undefined} className="flex shrink-0">
+                                {leadingAddon}
+                            </div>
+                        )}
 
                         {prefix && (
                             <span className={cx("my-auto grow pr-2", paddings[size].leadingText)}>
@@ -118,7 +113,7 @@ export const InputGroup = ({ size = "sm", prefix, leadingAddon, trailingAddon, l
 
                         {children}
 
-                        {trailingAddon && <section data-trailing={hasTrailing || undefined}>{trailingAddon}</section>}
+                        {trailingAddon && <div data-trailing={hasTrailing || undefined}>{trailingAddon}</div>}
                     </div>
 
                     {hint && <HintText isInvalid={isInvalid}>{hint}</HintText>}

package/src/design_system/elements/select/select-native.tsx

@@ -34,15 +34,12 @@ export const NativeSelect = ({ label, hint, options, className, selectClassName,
                     aria-labelledby={selectId}
                     className={cx(
                         "appearance-none rounded-lg bg-primary px-3.5 py-2.5 text-md font-medium text-primary shadow-xs ring-1 ring-primary outline-hidden transition duration-100 ease-linear ring-inset placeholder:text-fg-quaternary focus-visible:ring-2 focus-visible:ring-brand disabled:cursor-not-allowed disabled:bg-disabled_subtle disabled:text-disabled",
-                        // Styles when the select is within an `InputGroup`
-                        "in-data-input-wrapper:flex in-data-input-wrapper:h-full in-data-input-wrapper:gap-1 in-data-input-wrapper:bg-inherit in-data-input-wrapper:px-3 in-data-input-wrapper:py-2 in-data-input-wrapper:font-normal in-data-input-wrapper:text-tertiary in-data-input-wrapper:shadow-none in-data-input-wrapper:ring-transparent",
-                        // Styles for the select when `TextField` is disabled
-                        "in-data-input-wrapper:group-disabled:pointer-events-none in-data-input-wrapper:group-disabled:cursor-not-allowed in-data-input-wrapper:group-disabled:bg-transparent in-data-input-wrapper:group-disabled:text-disabled",
-                        // Common styles for sizes and border radius within `InputGroup`
-                        "in-data-input-wrapper:in-data-leading:rounded-r-none in-data-input-wrapper:in-data-trailing:rounded-l-none in-data-input-wrapper:in-data-[input-size=md]:py-2.5 in-data-input-wrapper:in-data-leading:in-data-[input-size=md]:pl-3.5 in-data-input-wrapper:in-data-[input-size=sm]:py-2 in-data-input-wrapper:in-data-[input-size=sm]:pl-3",
-                        // For "leading" dropdown within `InputGroup`
+                        /* InputGroup: match other inputs (bg-white, rounded-sm, ring-secondary) */
+                        "in-data-input-wrapper:flex in-data-input-wrapper:h-full in-data-input-wrapper:gap-1 in-data-input-wrapper:!bg-white in-data-input-wrapper:px-3 in-data-input-wrapper:py-2 in-data-input-wrapper:font-normal in-data-input-wrapper:text-tertiary in-data-input-wrapper:shadow-none in-data-input-wrapper:ring-1 in-data-input-wrapper:ring-secondary in-data-input-wrapper:ring-inset in-data-input-wrapper:rounded-sm in-data-input-wrapper:focus-visible:ring-2 in-data-input-wrapper:focus-visible:ring-brand",
+                        "in-data-input-wrapper:group-disabled:pointer-events-none in-data-input-wrapper:group-disabled:cursor-not-allowed in-data-input-wrapper:group-disabled:bg-transparent in-data-input-wrapper:group-disabled:ring-disabled in-data-input-wrapper:group-disabled:text-disabled",
+                        "in-data-input-wrapper:in-data-leading:rounded-l-sm in-data-input-wrapper:in-data-leading:rounded-r-none in-data-input-wrapper:in-data-trailing:rounded-r-sm in-data-input-wrapper:in-data-trailing:rounded-l-none",
+                        "in-data-input-wrapper:in-data-[input-size=md]:py-2.5 in-data-input-wrapper:in-data-leading:in-data-[input-size=md]:pl-3.5 in-data-input-wrapper:in-data-[input-size=sm]:py-2 in-data-input-wrapper:in-data-[input-size=sm]:pl-3",
                         "in-data-input-wrapper:in-data-leading:in-data-[input-size=md]:pr-4.5 in-data-input-wrapper:in-data-leading:in-data-[input-size=sm]:pr-4.5",
-                        // For "trailing" dropdown within `InputGroup`
                         "in-data-input-wrapper:in-data-trailing:in-data-[input-size=md]:pr-8 in-data-input-wrapper:in-data-trailing:in-data-[input-size=sm]:pr-7.5",
                         selectClassName,
                     )}
@@ -55,7 +52,7 @@ export const NativeSelect = ({ label, hint, options, className, selectClassName,
                 </select>
                 <ChevronDown
                     aria-hidden="true"
-                    className="pointer-events-none absolute right-3.5 size-5 text-fg-quaternary in-data-input-wrapper:right-0 in-data-input-wrapper:size-4 in-data-input-wrapper:stroke-[2.625px] in-data-input-wrapper:in-data-trailing:in-data-[input-size=sm]:right-3"
+                    className="pointer-events-none absolute right-3.5 size-5 text-fg-quaternary in-data-input-wrapper:right-1.5 in-data-input-wrapper:size-4 in-data-input-wrapper:stroke-[2.625px] in-data-input-wrapper:in-data-trailing:in-data-[input-size=sm]:right-3"
                 />
             </div>
 

package/src/design_system/sections/contact-section-form.aman.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import React, { useRef, useState } from 'react';
+import { Form, Button } from '../elements';
+import { DynamicFormFields } from '../components/DynamicFormFields';
+import { trackMetaLead } from '../../tracking/trackMetaLead';
+import type { FormDefinition } from '../../types/api/form';
+
+interface ContactSectionFormAmanProps {
+    /** Form fields are rendered from this definition (required). */
+    formDefinition: FormDefinition | null | undefined;
+    submitButtonText?: string;
+    successMessage?: string;
+    thankYouMessage?: string;
+    onSuccess?: () => void;
+}
+
+export const ContactSectionForm = ({
+    formDefinition,
+    submitButtonText = "Send message",
+    successMessage = "Thank you for contacting us! We'll get back to you soon.",
+    thankYouMessage,
+    onSuccess,
+}: ContactSectionFormAmanProps) => {
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [submitStatus, setSubmitStatus] = useState<'idle' | 'success' | 'error'>('idle');
+    const [statusMessage, setStatusMessage] = useState<string>('');
+    const formRef = useRef<HTMLFormElement>(null);
+
+    const hasFields = formDefinition != null && Array.isArray(formDefinition.fields) && formDefinition.fields.length > 0;
+
+    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        setIsSubmitting(true);
+        setSubmitStatus('idle');
+        setStatusMessage('');
+        const formData = new FormData(e.currentTarget);
+        const data: Record<string, string> = { formType: 'lead' };
+        formData.forEach((value, key) => {
+            if (key !== 'privacy' && typeof value === 'string') data[key] = value;
+        });
+        try {
+            const response = await fetch('/api/form', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(data),
+            });
+            const result = await response.json();
+            if (result.success) {
+                setSubmitStatus('success');
+                setStatusMessage(result.message || successMessage);
+                formRef.current?.reset();
+                onSuccess?.();
+                trackMetaLead(result.eventId);
+                setTimeout(() => setSubmitStatus('idle'), 5000);
+            } else {
+                setSubmitStatus('error');
+                setStatusMessage(result.error || 'Something went wrong. Please try again.');
+            }
+        } catch {
+            setSubmitStatus('error');
+            setStatusMessage('Network error. Please try again later.');
+        }
+        setIsSubmitting(false);
+    };
+
+    if (!hasFields) return null;
+
+    return (
+        <Form ref={formRef} onSubmit={handleSubmit} className="flex flex-col gap-6">
+            <DynamicFormFields form={formDefinition} />
+            <Button
+                type="submit"
+                color="primary"
+                size="xl"
+                className="w-full font-body text-base uppercase tracking-wide rounded-sm"
+                isDisabled={isSubmitting}
+                isLoading={isSubmitting}
+            >
+                {isSubmitting ? 'Sending...' : submitButtonText}
+            </Button>
+            {submitStatus === 'success' && (
+                <div className="rounded-sm bg-success-50 p-4 text-success-700 font-body">{thankYouMessage ?? statusMessage}</div>
+            )}
+            {submitStatus === 'error' && (
+                <div className="rounded-sm bg-error-50 p-4 text-error-700 font-body text-sm">{statusMessage}</div>
+            )}
+        </Form>
+    );
+};

package/src/design_system/sections/contact-section-form.barelux.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import React, { useRef, useState } from 'react';
+import { Form, Button } from '../elements';
+import { DynamicFormFields } from '../components/DynamicFormFields';
+import { trackMetaLead } from '../../tracking/trackMetaLead';
+import type { FormDefinition } from '../../types/api/form';
+
+interface ContactSectionFormBareluxProps {
+    /** Form fields are rendered from this definition (required). */
+    formDefinition: FormDefinition | null | undefined;
+    submitButtonText?: string;
+    successMessage?: string;
+    thankYouMessage?: string;
+    onSuccess?: () => void;
+}
+
+export const ContactSectionForm = ({
+    formDefinition,
+    submitButtonText = "Send message",
+    successMessage = "Thank you for contacting us! We'll get back to you soon.",
+    thankYouMessage,
+    onSuccess,
+}: ContactSectionFormBareluxProps) => {
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [submitStatus, setSubmitStatus] = useState<'idle' | 'success' | 'error'>('idle');
+    const [statusMessage, setStatusMessage] = useState<string>('');
+    const formRef = useRef<HTMLFormElement>(null);
+
+    const hasFields = formDefinition != null && Array.isArray(formDefinition.fields) && formDefinition.fields.length > 0;
+
+    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        setIsSubmitting(true);
+        setSubmitStatus('idle');
+        setStatusMessage('');
+        const formData = new FormData(e.currentTarget);
+        const data: Record<string, string> = { formType: 'lead' };
+        formData.forEach((value, key) => {
+            if (key !== 'privacy' && typeof value === 'string') data[key] = value;
+        });
+        try {
+            const response = await fetch('/api/form', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(data),
+            });
+            const result = await response.json();
+            if (result.success) {
+                setSubmitStatus('success');
+                setStatusMessage(result.message || successMessage);
+                formRef.current?.reset();
+                onSuccess?.();
+                trackMetaLead(result.eventId);
+                setTimeout(() => setSubmitStatus('idle'), 5000);
+            } else {
+                setSubmitStatus('error');
+                setStatusMessage(result.error || 'Something went wrong. Please try again.');
+            }
+        } catch {
+            setSubmitStatus('error');
+            setStatusMessage('Network error. Please try again later.');
+        }
+        setIsSubmitting(false);
+    };
+
+    if (!hasFields) return null;
+
+    return (
+        <Form ref={formRef} onSubmit={handleSubmit} className="flex flex-col gap-6">
+            <DynamicFormFields form={formDefinition} />
+            <Button
+                type="submit"
+                color="primary"
+                size="md"
+                className="w-full"
+                isDisabled={isSubmitting}
+                isLoading={isSubmitting}
+            >
+                {submitStatus === 'success' ? successMessage.split('!')[0] + '!' : (isSubmitting ? 'Sending...' : submitButtonText)}
+            </Button>
+            {submitStatus === 'success' && (
+                <div className="font-body text-sm text-center" style={{ color: 'var(--color-text-brand-accent)' }}>
+                    {thankYouMessage ?? statusMessage}
+                </div>
+            )}
+            {submitStatus === 'error' && (
+                <div className="rounded-lg bg-error-50 p-4 text-error-700 font-body text-sm text-center">{statusMessage}</div>
+            )}
+        </Form>
+    );
+};