@sonordev/site-kit 2.6.1 → 2.7.0

package/dist/forms/index.mjs

@@ -1,6 +1,6 @@
 'use client';
 import '../chunk-4XPGGLVP.mjs';
-import { useRef, useEffect, useCallback, useState, useMemo } from 'react';
+import React2, { useRef, useEffect, useCallback, useState, useMemo } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 // src/forms/formsApi.ts
@@ -506,6 +506,42 @@ function getDeviceType() {
   return "desktop";
 }
 
+// src/forms/fetchWithRetry.ts
+function backoffDelay(attempt, response) {
+  if (response?.status === 429) {
+    const header = response.headers.get("retry-after");
+    const seconds = header ? parseInt(header, 10) : NaN;
+    if (!Number.isNaN(seconds) && seconds > 0) return Math.min(seconds * 1e3, 1e4);
+  }
+  return Math.min(8e3, 500 * 2 ** attempt);
+}
+async function fetchWithRetry(url, init, options = {}) {
+  const retries = options.retries ?? 2;
+  const timeoutMs = options.timeoutMs ?? 15e3;
+  let lastError;
+  for (let attempt = 0; attempt <= retries; attempt++) {
+    const controller = new AbortController();
+    const timer = setTimeout(() => controller.abort(), timeoutMs);
+    try {
+      const response = await fetch(url, { ...init, signal: controller.signal });
+      clearTimeout(timer);
+      if ((response.status === 429 || response.status >= 500) && attempt < retries) {
+        await new Promise((resolve) => setTimeout(resolve, backoffDelay(attempt, response)));
+        continue;
+      }
+      return response;
+    } catch (error) {
+      clearTimeout(timer);
+      lastError = error;
+      if (attempt < retries) {
+        await new Promise((resolve) => setTimeout(resolve, backoffDelay(attempt)));
+        continue;
+      }
+    }
+  }
+  throw lastError instanceof Error ? lastError : new Error("Network request failed after multiple attempts. Please try again.");
+}
+
 // src/forms/recaptcha.ts
 function getSiteKey(explicitSiteKey) {
   if (typeof window === "undefined") return void 0;
@@ -513,8 +549,9 @@ function getSiteKey(explicitSiteKey) {
   const win = window;
   return win.__SITE_KIT_RECAPTCHA_SITE_KEY__ ?? process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY;
 }
+var RECAPTCHA_LOAD_TIMEOUT_MS = 1e4;
 function loadScript(siteKey) {
-  return new Promise((resolve, reject) => {
+  return new Promise((resolve) => {
     if (typeof window === "undefined") {
       resolve(null);
       return;
@@ -524,20 +561,35 @@ function loadScript(siteKey) {
       resolve(win.grecaptcha);
       return;
     }
+    let settled = false;
+    const finish = (value) => {
+      if (settled) return;
+      settled = true;
+      resolve(value);
+    };
+    const giveUp = setTimeout(() => finish(null), RECAPTCHA_LOAD_TIMEOUT_MS);
+    const waitForReady = () => {
+      if (settled) return;
+      if (win.grecaptcha?.enterprise) {
+        clearTimeout(giveUp);
+        finish(win.grecaptcha);
+        return;
+      }
+      setTimeout(waitForReady, 50);
+    };
     const existing = document.querySelector('script[src*="recaptcha/enterprise"]');
     if (existing) {
-      const check = () => {
-        if (win.grecaptcha?.enterprise) resolve(win.grecaptcha);
-        else setTimeout(check, 50);
-      };
-      check();
+      waitForReady();
       return;
     }
     const script = document.createElement("script");
     script.src = `https://www.google.com/recaptcha/enterprise.js?render=${siteKey}`;
     script.async = true;
-    script.onload = () => resolve(win.grecaptcha);
-    script.onerror = () => reject(new Error("reCAPTCHA script failed to load"));
+    script.onload = () => waitForReady();
+    script.onerror = () => {
+      clearTimeout(giveUp);
+      finish(null);
+    };
     document.head.appendChild(script);
   });
 }
@@ -555,21 +607,83 @@ async function getRecaptchaToken(explicitSiteKey) {
   }
 }
 
-// src/forms/defaultSuccessMessage.ts
-var DEFAULT_FORM_SUCCESS_MESSAGE = "Thank you for your submission! We will be in touch soon.";
-
-// src/forms/useForm.ts
+// src/forms/submitForm.ts
+var DEFAULT_HONEYPOT_FIELD = "_sk_hp_url";
+function getApiConfig() {
+  const apiUrl = typeof window !== "undefined" ? window.__SITE_KIT_API_URL__ || "https://api.sonor.io" : "https://api.sonor.io";
+  const apiKey = typeof window !== "undefined" ? window.__SITE_KIT_API_KEY__ : void 0;
+  return { apiUrl, apiKey };
+}
 function getUTMParams() {
   if (typeof window === "undefined") return {};
   const params = new URLSearchParams(window.location.search);
-  return {
-    utm_source: params.get("utm_source"),
-    utm_medium: params.get("utm_medium"),
-    utm_campaign: params.get("utm_campaign"),
-    utm_term: params.get("utm_term"),
-    utm_content: params.get("utm_content")
+  const out = {};
+  for (const key of ["utm_source", "utm_medium", "utm_campaign", "utm_term", "utm_content"]) {
+    out[key] = params.get(key);
+  }
+  return out;
+}
+async function submitForm({
+  config: config2,
+  values,
+  honeypotValue,
+  formLoadedAt
+}) {
+  const { apiUrl, apiKey } = getApiConfig();
+  if (!apiKey) {
+    throw new Error("API key is required. Set SONOR_API_KEY in your environment.");
+  }
+  const recaptchaToken = config2.recaptcha_enabled ? await getRecaptchaToken(config2.recaptcha_site_key) : null;
+  if (config2.recaptcha_enabled && !recaptchaToken) {
+    throw new Error("Verification could not be completed. Please try again.");
+  }
+  const honeypotFieldName = config2.honeypot_field || DEFAULT_HONEYPOT_FIELD;
+  const utm = getUTMParams();
+  const payload = {
+    formId: config2.id,
+    form_id: config2.id,
+    data: {
+      ...values,
+      ...config2.honeypot_enabled ? { [honeypotFieldName]: honeypotValue } : {}
+    },
+    metadata: {
+      pageUrl: typeof window !== "undefined" ? window.location.href : null,
+      referrer: typeof document !== "undefined" ? document.referrer || null : null,
+      userAgent: typeof navigator !== "undefined" ? navigator.userAgent : null,
+      sessionId: typeof sessionStorage !== "undefined" ? sessionStorage.getItem("_sk_sid") : null,
+      recaptchaToken: recaptchaToken || void 0,
+      utmSource: utm.utm_source,
+      utmMedium: utm.utm_medium,
+      utmCampaign: utm.utm_campaign,
+      _formLoadedAt: formLoadedAt
+    }
   };
+  const response = await fetchWithRetry(
+    `${apiUrl}/api/public/forms/submit`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${apiKey}`
+      },
+      body: JSON.stringify(payload)
+    },
+    { retries: 2, timeoutMs: 2e4 }
+  );
+  const data = await response.json().catch(() => null);
+  if (!response.ok) {
+    const msg = (data?.message ?? data?.error ?? (response.statusText || `HTTP ${response.status}`)).toString().trim();
+    throw new Error(
+      msg ? `Failed to submit form: ${msg}` : `Failed to submit form (${response.status})`
+    );
+  }
+  return data;
 }
+
+// src/forms/defaultSuccessMessage.ts
+var DEFAULT_FORM_SUCCESS_MESSAGE = "Thank you for your submission! We will be in touch soon.";
+
+// src/forms/useForm.ts
 function useForm(formIdOrSlug, options = {}) {
   const {
     projectId: optionsProjectId,
@@ -587,6 +701,9 @@ function useForm(formIdOrSlug, options = {}) {
   const [step, setStep] = useState(1);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [isComplete, setIsComplete] = useState(false);
+  const [submitError, setSubmitError] = useState(null);
+  const isSubmittingRef = useRef(false);
+  const formLoadedAt = useRef(Date.now());
   const totalSteps = form?.total_steps || 1;
   const isMultiStep = form?.is_multi_step || false;
   const { trackStepChange, trackComplete } = useFormTracking({
@@ -595,16 +712,19 @@ function useForm(formIdOrSlug, options = {}) {
   });
   useEffect(() => {
     const apiUrl = typeof window !== "undefined" ? window.__SITE_KIT_API_URL__ || "https://api.sonor.io" : "https://api.sonor.io";
-    const apiKey = typeof window !== "undefined" ? window.__SITE_KIT_API_KEY__ : void 0;
-    if (!apiKey) {
-      setFetchError(new Error("API key is required. Provide it via SiteKitProvider (apiKey) or set __SITE_KIT_API_KEY__."));
-      setIsLoading(false);
-      return;
-    }
     async function fetchForm() {
       try {
         setIsLoading(true);
         setFetchError(null);
+        const readApiKey = () => typeof window !== "undefined" ? window.__SITE_KIT_API_KEY__ : void 0;
+        let apiKey = readApiKey();
+        for (let i = 0; i < 15 && !apiKey; i++) {
+          await new Promise((r) => setTimeout(r, 100));
+          apiKey = readApiKey();
+        }
+        if (!apiKey) {
+          throw new Error("API key is required. Provide it via SiteKitLayout/SiteKitProvider or set SONOR_API_KEY.");
+        }
         const url = `${apiUrl}/api/public/forms/config`;
         const init = {
           method: "POST",
@@ -616,15 +736,7 @@ function useForm(formIdOrSlug, options = {}) {
             formIdOrSlug
           })
         };
-        const maxAttempts = 4;
-        let response = await fetch(url, init);
-        for (let attempt = 1; attempt < maxAttempts && response.status === 429; attempt++) {
-          const ra = response.headers.get("retry-after");
-          const retryAfterSec = ra ? parseInt(ra, 10) : NaN;
-          const delayMs = !Number.isNaN(retryAfterSec) && retryAfterSec > 0 ? retryAfterSec * 1e3 : Math.min(8e3, 400 * 2 ** (attempt - 1));
-          await new Promise((r) => setTimeout(r, delayMs));
-          response = await fetch(url, init);
-        }
+        const response = await fetchWithRetry(url, init, { retries: 3, timeoutMs: 15e3 });
         if (!response.ok) {
           throw new Error(`Failed to fetch form: ${response.statusText}`);
         }
@@ -702,6 +814,7 @@ function useForm(formIdOrSlug, options = {}) {
   }, [fields, isFieldVisible]);
   const validateField = useCallback((field2) => {
     if (!isFieldVisible(field2)) return null;
+    if (["heading", "section_header", "paragraph", "hidden"].includes(field2.field_type)) return null;
     const value = values[field2.slug];
     const rules = field2.validation || {};
     if (field2.is_required && (!value || value === "")) {
@@ -721,8 +834,13 @@ function useForm(formIdOrSlug, options = {}) {
     if (rules.max !== void 0 && Number(value) > rules.max) {
       return `${field2.label} must be no more than ${rules.max}`;
     }
-    if (rules.pattern && !new RegExp(rules.pattern).test(strValue)) {
-      return rules.custom_error || `${field2.label} is invalid`;
+    if (rules.pattern) {
+      try {
+        if (!new RegExp(rules.pattern).test(strValue)) {
+          return rules.custom_error || `${field2.label} is invalid`;
+        }
+      } catch {
+      }
     }
     if (field2.field_type === "email" && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(strValue)) {
       return "Please enter a valid email address";
@@ -743,6 +861,23 @@ function useForm(formIdOrSlug, options = {}) {
     setErrors(newErrors);
     return Object.keys(newErrors).length === 0;
   }, [fields, validateField]);
+  const validateAll = useCallback(() => {
+    const newErrors = {};
+    for (const field2 of allFields) {
+      const error = validateField(field2);
+      if (error) newErrors[field2.slug] = error;
+    }
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  }, [allFields, validateField]);
+  const buildVisibleValues = useCallback(() => {
+    const out = {};
+    for (const field2 of allFields) {
+      if (!isFieldVisible(field2)) continue;
+      if (field2.slug in values) out[field2.slug] = values[field2.slug];
+    }
+    return out;
+  }, [allFields, values, isFieldVisible]);
   const setFieldValue = useCallback((key, value) => {
     setValuesState((prev) => ({ ...prev, [key]: value }));
     setErrors((prev) => {
@@ -789,49 +924,18 @@ function useForm(formIdOrSlug, options = {}) {
   }, [totalSteps, trackStepChange]);
   const submit = useCallback(async () => {
     if (!form) return;
-    if (!validate()) return;
+    if (isSubmittingRef.current) return;
+    if (!validateAll()) return;
+    isSubmittingRef.current = true;
     setIsSubmitting(true);
+    setSubmitError(null);
     try {
-      const apiUrl = typeof window !== "undefined" ? window.__SITE_KIT_API_URL__ || "https://api.sonor.io" : "https://api.sonor.io";
-      const apiKey = typeof window !== "undefined" ? window.__SITE_KIT_API_KEY__ : void 0;
-      if (!apiKey) {
-        throw new Error("API key is required. Set SONOR_API_KEY in your .env");
-      }
-      const honeypotFieldName = form.honeypot_field || "website";
-      const recaptchaToken = form.recaptcha_enabled ? await getRecaptchaToken(form.recaptcha_site_key) : null;
-      if (form.recaptcha_enabled && !recaptchaToken) {
-        throw new Error("reCAPTCHA is required but could not be initialized.");
-      }
-      const utm = getUTMParams();
-      const submission = {
-        formId: form.id,
-        data: {
-          ...values,
-          ...form.honeypot_enabled ? { [honeypotFieldName]: "" } : {}
-        },
-        metadata: {
-          pageUrl: typeof window !== "undefined" ? window.location.href : null,
-          referrer: typeof document !== "undefined" ? document.referrer || null : null,
-          userAgent: typeof navigator !== "undefined" ? navigator.userAgent : null,
-          sessionId: typeof sessionStorage !== "undefined" ? sessionStorage.getItem("_sk_sid") : null,
-          recaptchaToken: recaptchaToken || void 0,
-          utmSource: utm.utm_source,
-          utmMedium: utm.utm_medium,
-          utmCampaign: utm.utm_campaign
-        }
-      };
-      const response = await fetch(`${apiUrl}/api/public/forms/submit`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          "Authorization": `Bearer ${apiKey}`
-        },
-        body: JSON.stringify(submission)
+      const data = await submitForm({
+        config: form,
+        values: buildVisibleValues(),
+        honeypotValue: "",
+        formLoadedAt: formLoadedAt.current
       });
-      if (!response.ok) {
-        throw new Error(`Form submission failed: ${response.statusText}`);
-      }
-      const data = await response.json();
       trackComplete();
       setIsComplete(true);
       onSuccess?.(data);
@@ -841,21 +945,25 @@ function useForm(formIdOrSlug, options = {}) {
       }
     } catch (error) {
       console.error("[useForm] Submission error:", error);
+      setSubmitError("Something went wrong sending your submission. Please try again.");
       onError?.(error);
     } finally {
+      isSubmittingRef.current = false;
       setIsSubmitting(false);
     }
-  }, [form, values, validate, trackComplete, onSuccess, onError, redirectUrl]);
+  }, [form, validateAll, buildVisibleValues, trackComplete, onSuccess, onError, redirectUrl]);
   const reset = useCallback(() => {
     setValuesState(initialValues);
     setErrors({});
     setStep(1);
     setIsComplete(false);
+    setSubmitError(null);
   }, [initialValues]);
   return {
     form,
     isLoading,
     fetchError,
+    submitError,
     allFields,
     fields,
     visibleFields,
@@ -921,7 +1029,7 @@ function DatePicker({
 }) {
   const today = /* @__PURE__ */ new Date();
   const todayStr = toDateStr(today.getFullYear(), today.getMonth(), today.getDate());
-  const effectiveMin = minDate || todayStr;
+  const effectiveMin = minDate || "";
   const parsed = parseDate(value);
   const [viewYear, setViewYear] = useState(parsed?.year || today.getFullYear());
   const [viewMonth, setViewMonth] = useState(parsed?.month ?? today.getMonth());
@@ -1347,20 +1455,13 @@ function FormField({ field: field2, value, error, onChange, classPrefix = "sk-fo
       }
     ),
     field2.field_type === "file" && /* @__PURE__ */ jsx(
-      "input",
+      FileUploadField,
       {
-        id: inputId,
-        className: `${classPrefix}__input ${classPrefix}__input--file`,
-        type: "file",
-        name: field2.slug,
-        required: field2.is_required,
-        onChange: (e) => {
-          const file = e.target.files?.[0];
-          if (file) {
-            onChange(file.name);
-          }
-        },
-        style: baseInputStyle
+        field: field2,
+        inputId,
+        classPrefix,
+        baseInputStyle,
+        onChange
       }
     ),
     field2.field_type === "rating" && /* @__PURE__ */ jsx("div", { className: `${classPrefix}__rating`, style: { display: "flex", gap: 4 }, children: [1, 2, 3, 4, 5].map((star) => /* @__PURE__ */ jsx(
@@ -1400,6 +1501,79 @@ function FormField({ field: field2, value, error, onChange, classPrefix = "sk-fo
     field2.help_text && !error && field2.field_type !== "checkbox" && /* @__PURE__ */ jsx("p", { className: `${classPrefix}__help`, style: helpStyle, children: field2.help_text })
   ] });
 }
+function FileUploadField({
+  field: field2,
+  inputId,
+  classPrefix,
+  baseInputStyle,
+  onChange
+}) {
+  const [status, setStatus] = React2.useState("idle");
+  const [fileName, setFileName] = React2.useState("");
+  const handleFile = async (e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    setFileName(file.name);
+    setStatus("uploading");
+    onChange("");
+    try {
+      const url = await uploadFormFile(file);
+      onChange(url);
+      setStatus("idle");
+    } catch (err) {
+      console.error("[Forms] File upload failed:", err);
+      onChange("");
+      setStatus("error");
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id: inputId,
+        className: `${classPrefix}__input ${classPrefix}__input--file`,
+        type: "file",
+        name: field2.slug,
+        required: field2.is_required,
+        disabled: status === "uploading",
+        onChange: handleFile,
+        style: baseInputStyle
+      }
+    ),
+    status === "uploading" && /* @__PURE__ */ jsxs("p", { style: { color: "var(--sk-text-tertiary, #6b7280)", fontSize: 14, marginTop: 4 }, children: [
+      "Uploading ",
+      fileName,
+      "\u2026"
+    ] }),
+    status === "error" && /* @__PURE__ */ jsx("p", { role: "alert", style: { color: "var(--sk-error, #ef4444)", fontSize: 14, marginTop: 4 }, children: "Upload failed. Please choose the file again." })
+  ] });
+}
+async function uploadFormFile(file) {
+  const apiUrl = typeof window !== "undefined" ? window.__SITE_KIT_API_URL__ || "https://api.sonor.io" : "https://api.sonor.io";
+  const apiKey = typeof window !== "undefined" ? window.__SITE_KIT_API_KEY__ : void 0;
+  if (!apiKey) {
+    throw new Error("API key is required to upload files.");
+  }
+  const body = new FormData();
+  body.append("file", file);
+  const response = await fetchWithRetry(
+    `${apiUrl}/api/public/forms/upload`,
+    {
+      method: "POST",
+      headers: { Authorization: `Bearer ${apiKey}` },
+      body
+    },
+    { retries: 1, timeoutMs: 6e4 }
+  );
+  if (!response.ok) {
+    throw new Error(`Upload failed (${response.status})`);
+  }
+  const data = await response.json().catch(() => null);
+  if (!data?.url) {
+    throw new Error("Upload did not return a URL.");
+  }
+  return data.url;
+}
 function FormClient({
   config: config2,
   className,
@@ -1412,9 +1586,11 @@ function FormClient({
   const [step, setStep] = useState(1);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [isComplete, setIsComplete] = useState(false);
+  const [submitError, setSubmitError] = useState(null);
   const [honeypotValue, setHoneypotValue] = useState("");
-  const honeypotFieldName = config2.honeypot_field || "website";
+  const honeypotFieldName = config2.honeypot_field || DEFAULT_HONEYPOT_FIELD;
   const formLoadedAt = useRef(Date.now());
+  const isSubmittingRef = useRef(false);
   const { trackStepChange, trackComplete } = useFormTracking({
     formId: config2.id,
     totalSteps: config2.total_steps
@@ -1474,8 +1650,13 @@ function FormClient({
     if (rules.max !== void 0 && Number(value) > rules.max) {
       return `${field2.label} must be no more than ${rules.max}`;
     }
-    if (rules.pattern && !new RegExp(rules.pattern).test(strValue)) {
-      return rules.custom_error || `${field2.label} is invalid`;
+    if (rules.pattern) {
+      try {
+        if (!new RegExp(rules.pattern).test(strValue)) {
+          return rules.custom_error || `${field2.label} is invalid`;
+        }
+      } catch {
+      }
     }
     if (field2.field_type === "email" && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(strValue)) {
       return "Please enter a valid email address";
@@ -1496,6 +1677,35 @@ function FormClient({
     setErrors(newErrors);
     return Object.keys(newErrors).length === 0;
   }, [currentFields, validateField]);
+  const validateAll = useCallback(() => {
+    const allFields = config2.fields || [];
+    const newErrors = {};
+    for (const field2 of allFields) {
+      const error = validateField(field2);
+      if (error) newErrors[field2.slug] = error;
+    }
+    setErrors(newErrors);
+    if (Object.keys(newErrors).length === 0) return { ok: true, firstErrorStep: null };
+    let firstErrorStep = null;
+    if (config2.is_multi_step && config2.steps) {
+      const ordered = [...config2.steps].sort((a, b) => a.step_number - b.step_number);
+      for (const s of ordered) {
+        if (allFields.some((f) => f.step_id === s.id && newErrors[f.slug])) {
+          firstErrorStep = s.step_number;
+          break;
+        }
+      }
+    }
+    return { ok: false, firstErrorStep };
+  }, [config2, validateField]);
+  const buildVisibleValues = useCallback(() => {
+    const out = {};
+    for (const field2 of config2.fields || []) {
+      if (!isFieldVisible(field2)) continue;
+      if (field2.slug in values) out[field2.slug] = values[field2.slug];
+    }
+    return out;
+  }, [config2, values, isFieldVisible]);
   const setFieldValue = useCallback((key, value) => {
     setValues((prev) => ({ ...prev, [key]: value }));
     if (errors[key]) {
@@ -1530,53 +1740,22 @@ function FormClient({
     }
   }, [config2.total_steps, trackStepChange]);
   const submit = useCallback(async () => {
-    if (!validateStep()) return;
+    if (isSubmittingRef.current) return;
+    const { ok, firstErrorStep } = validateAll();
+    if (!ok) {
+      if (firstErrorStep != null) setStep(firstErrorStep);
+      return;
+    }
+    isSubmittingRef.current = true;
     setIsSubmitting(true);
+    setSubmitError(null);
     try {
-      const apiUrl = typeof window !== "undefined" ? window.__SITE_KIT_API_URL__ || "https://api.sonor.io" : "https://api.sonor.io";
-      const apiKey = typeof window !== "undefined" ? window.__SITE_KIT_API_KEY__ : void 0;
-      if (!apiKey) {
-        throw new Error("API key is required. Set SONOR_API_KEY in your .env");
-      }
-      const recaptchaToken = config2.recaptcha_enabled ? await getRecaptchaToken(config2.recaptcha_site_key) : null;
-      if (config2.recaptcha_enabled && !recaptchaToken) {
-        throw new Error("reCAPTCHA is required but could not be initialized.");
-      }
-      const utm = getUTMParams2();
-      const submission = {
-        form_id: config2.id,
-        project_id: config2.project_id,
-        data: {
-          ...values,
-          ...config2.honeypot_enabled ? { [honeypotFieldName]: honeypotValue } : {}
-        },
-        routing_type: config2.form_type,
-        status: "new",
-        metadata: {
-          pageUrl: typeof window !== "undefined" ? window.location.href : null,
-          referrer: typeof document !== "undefined" ? document.referrer || null : null,
-          userAgent: typeof navigator !== "undefined" ? navigator.userAgent : null,
-          sessionId: typeof sessionStorage !== "undefined" ? sessionStorage.getItem("_sk_sid") : null,
-          recaptchaToken: recaptchaToken || void 0,
-          utmSource: utm.utm_source,
-          utmMedium: utm.utm_medium,
-          utmCampaign: utm.utm_campaign,
-          _formLoadedAt: formLoadedAt.current
-        }
-      };
-      const response = await fetch(`${apiUrl}/api/public/forms/submit`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          "Authorization": `Bearer ${apiKey}`
-        },
-        body: JSON.stringify(submission)
+      const data = await submitForm({
+        config: config2,
+        values: buildVisibleValues(),
+        honeypotValue: config2.honeypot_enabled ? honeypotValue : "",
+        formLoadedAt: formLoadedAt.current
       });
-      const data = await response.json().catch(() => null);
-      if (!response.ok) {
-        const msg = (data?.message ?? data?.error ?? (response.statusText || `HTTP ${response.status}`)).trim();
-        throw new Error(msg ? `Failed to submit form: ${msg}` : `Failed to submit form (${response.status})`);
-      }
       trackComplete();
       setIsComplete(true);
       onSuccess?.(data);
@@ -1585,11 +1764,13 @@ function FormClient({
       }
     } catch (error) {
       console.error("[Forms] Submission error:", error);
+      setSubmitError("Something went wrong sending your submission. Please try again.");
       onError?.(error);
     } finally {
+      isSubmittingRef.current = false;
       setIsSubmitting(false);
     }
-  }, [config2, honeypotFieldName, honeypotValue, values, validateStep, trackComplete, onSuccess, onError]);
+  }, [config2, honeypotValue, validateAll, buildVisibleValues, trackComplete, onSuccess, onError]);
   const progress = useMemo(() => {
     return Math.round(step / config2.total_steps * 100);
   }, [step, config2.total_steps]);
@@ -1687,6 +1868,15 @@ function FormClient({
           step > 1 && /* @__PURE__ */ jsx("button", { type: "button", className: "sk-form__btn sk-form__btn--back", onClick: prevStep, children: "Back" }),
           /* @__PURE__ */ jsx("button", { type: "submit", className: "sk-form__btn sk-form__btn--submit", disabled: isSubmitting, children: isSubmitting ? "Submitting..." : step < config2.total_steps ? "Next" : config2.submit_button_text })
         ] }),
+        submitError && /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "sk-form__submit-error",
+            role: "alert",
+            style: { color: "var(--sk-error, #ef4444)", fontSize: 14, marginTop: 12 },
+            children: submitError
+          }
+        ),
         config2.honeypot_enabled && /* @__PURE__ */ jsx(
           "input",
           {
@@ -1713,16 +1903,6 @@ function FormClient({
     }
   );
 }
-function getUTMParams2() {
-  if (typeof window === "undefined") return {};
-  const params = new URLSearchParams(window.location.search);
-  const utmParams = {};
-  for (const key of ["utm_source", "utm_medium", "utm_campaign"]) {
-    const value = params.get(key);
-    if (value) utmParams[key] = value;
-  }
-  return utmParams;
-}
 function ManagedForm({
   formId,
   projectId,