@uptrademedia/site-kit 1.2.4 → 1.2.6

package/dist/forms/index.js

@@ -174,8 +174,9 @@ function getDeviceType() {
 }
 
 // src/forms/recaptcha.ts
-function getSiteKey() {
+function getSiteKey(explicitSiteKey) {
   if (typeof window === "undefined") return void 0;
+  if (explicitSiteKey) return explicitSiteKey;
   const win = window;
   return win.__SITE_KIT_RECAPTCHA_SITE_KEY__ ?? process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY;
 }
@@ -207,8 +208,8 @@ function loadScript(siteKey) {
     document.head.appendChild(script);
   });
 }
-async function getRecaptchaToken() {
-  const siteKey = getSiteKey();
+async function getRecaptchaToken(explicitSiteKey) {
+  const siteKey = getSiteKey(explicitSiteKey);
   if (!siteKey || typeof window === "undefined") return null;
   try {
     const grecaptcha = await loadScript(siteKey);
@@ -283,6 +284,10 @@ function useForm(formIdOrSlug, options = {}) {
         }
         const data = await response.json();
         if (!data) throw new Error("Form not found");
+        if (typeof window !== "undefined" && data.recaptcha_site_key) {
+          ;
+          window.__SITE_KIT_RECAPTCHA_SITE_KEY__ = data.recaptcha_site_key;
+        }
         if (data.steps) {
           data.steps.sort((a, b) => (a.step_number || 0) - (b.step_number || 0));
         }
@@ -443,11 +448,18 @@ function useForm(formIdOrSlug, options = {}) {
       if (!apiKey) {
         throw new Error("API key is required. Set NEXT_PUBLIC_UPTRADE_API_KEY in your .env");
       }
-      const recaptchaToken = await getRecaptchaToken();
+      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,
+        data: {
+          ...values,
+          ...form.honeypot_enabled ? { [honeypotFieldName]: "" } : {}
+        },
         metadata: {
           pageUrl: typeof window !== "undefined" ? window.location.href : null,
           referrer: typeof document !== "undefined" ? document.referrer || null : null,
@@ -541,6 +553,7 @@ function normalizeOptions(options) {
   return [];
 }
 function FormField({ field: field2, value, error, onChange, classPrefix = "uptrade-form" }) {
+  const inputId = `uptrade-${field2.id || field2.slug}`;
   const options = normalizeOptions(field2.options);
   const baseInputStyle = {
     width: "100%",
@@ -580,13 +593,14 @@ function FormField({ field: field2, value, error, onChange, classPrefix = "uptra
   const hideLabel = !!field2.hide_label;
   const effectivePlaceholder = hideLabel ? field2.label : field2.placeholder;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classPrefix}__field ${classPrefix}__field--${field2.field_type}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("label", { className: `${classPrefix}__label`, style: { ...labelStyle, ...hideLabel ? { position: "absolute", width: 1, height: 1, padding: 0, margin: -1, overflow: "hidden", clip: "rect(0,0,0,0)", whiteSpace: "nowrap", border: 0 } : {} }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: inputId, className: `${classPrefix}__label`, style: { ...labelStyle, ...hideLabel ? { position: "absolute", width: 1, height: 1, padding: 0, margin: -1, overflow: "hidden", clip: "rect(0,0,0,0)", whiteSpace: "nowrap", border: 0 } : {} }, children: [
       field2.label,
       field2.is_required && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--uptrade-error-color, #ef4444)" }, children: " *" })
     ] }),
     ["text", "email", "phone", "tel", "number"].includes(field2.field_type) && /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
+        id: inputId,
         className: `${classPrefix}__input`,
         type: field2.field_type === "phone" || field2.field_type === "tel" ? "tel" : field2.field_type,
         name: field2.slug,
@@ -600,6 +614,7 @@ function FormField({ field: field2, value, error, onChange, classPrefix = "uptra
     field2.field_type === "textarea" && /* @__PURE__ */ jsxRuntime.jsx(
       "textarea",
       {
+        id: inputId,
         className: `${classPrefix}__textarea`,
         name: field2.slug,
         value: String(value || ""),
@@ -613,6 +628,7 @@ function FormField({ field: field2, value, error, onChange, classPrefix = "uptra
     field2.field_type === "select" && /* @__PURE__ */ jsxRuntime.jsxs(
       "select",
       {
+        id: inputId,
         className: `${classPrefix}__select`,
         name: field2.slug,
         value: String(value || ""),
@@ -628,6 +644,7 @@ function FormField({ field: field2, value, error, onChange, classPrefix = "uptra
     field2.field_type === "multi-select" && /* @__PURE__ */ jsxRuntime.jsx(
       "select",
       {
+        id: inputId,
         className: `${classPrefix}__select ${classPrefix}__select--multi`,
         name: field2.slug,
         value: Array.isArray(value) ? value : [],
@@ -690,6 +707,7 @@ function FormField({ field: field2, value, error, onChange, classPrefix = "uptra
     field2.field_type === "date" && /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
+        id: inputId,
         className: `${classPrefix}__input ${classPrefix}__input--date`,
         type: "date",
         name: field2.slug,
@@ -702,6 +720,7 @@ function FormField({ field: field2, value, error, onChange, classPrefix = "uptra
     field2.field_type === "time" && /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
+        id: inputId,
         className: `${classPrefix}__input ${classPrefix}__input--time`,
         type: "time",
         name: field2.slug,
@@ -714,6 +733,7 @@ function FormField({ field: field2, value, error, onChange, classPrefix = "uptra
     field2.field_type === "datetime" && /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
+        id: inputId,
         className: `${classPrefix}__input ${classPrefix}__input--datetime`,
         type: "datetime-local",
         name: field2.slug,
@@ -726,6 +746,7 @@ function FormField({ field: field2, value, error, onChange, classPrefix = "uptra
     field2.field_type === "file" && /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
+        id: inputId,
         className: `${classPrefix}__input ${classPrefix}__input--file`,
         type: "file",
         name: field2.slug,
@@ -760,6 +781,7 @@ function FormField({ field: field2, value, error, onChange, classPrefix = "uptra
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
+          id: inputId,
           type: "range",
           name: field2.slug,
           value: Number(value || 50),
@@ -787,6 +809,8 @@ function FormClient({
   const [step, setStep] = react.useState(1);
   const [isSubmitting, setIsSubmitting] = react.useState(false);
   const [isComplete, setIsComplete] = react.useState(false);
+  const [honeypotValue, setHoneypotValue] = react.useState("");
+  const honeypotFieldName = config.honeypot_field || "website";
   const { trackStepChange, trackComplete } = useFormTracking({
     formId: config.id,
     totalSteps: config.total_steps
@@ -910,12 +934,18 @@ function FormClient({
       if (!apiKey) {
         throw new Error("API key is required. Set NEXT_PUBLIC_UPTRADE_API_KEY in your .env");
       }
-      const recaptchaToken = await getRecaptchaToken();
+      const recaptchaToken = config.recaptcha_enabled ? await getRecaptchaToken(config.recaptcha_site_key) : null;
+      if (config.recaptcha_enabled && !recaptchaToken) {
+        throw new Error("reCAPTCHA is required but could not be initialized.");
+      }
       const utm = getUTMParams2();
       const submission = {
         form_id: config.id,
         project_id: config.project_id,
-        data: values,
+        data: {
+          ...values,
+          ...config.honeypot_enabled ? { [honeypotFieldName]: honeypotValue } : {}
+        },
         routing_type: config.form_type,
         status: "new",
         metadata: {
@@ -954,7 +984,7 @@ function FormClient({
     } finally {
       setIsSubmitting(false);
     }
-  }, [config, values, validateStep, trackComplete, onSuccess, onError]);
+  }, [config, honeypotFieldName, honeypotValue, values, validateStep, trackComplete, onSuccess, onError]);
   const progress = react.useMemo(() => {
     return Math.round(step / config.total_steps * 100);
   }, [step, config.total_steps]);
@@ -1042,7 +1072,7 @@ function FormClient({
           "input",
           {
             type: "text",
-            name: "website",
+            name: honeypotFieldName,
             tabIndex: -1,
             autoComplete: "off",
             style: {
@@ -1051,7 +1081,9 @@ function FormClient({
               opacity: 0,
               pointerEvents: "none"
             },
+            value: honeypotValue,
             onChange: (e) => {
+              setHoneypotValue(e.target.value);
               if (e.target.value) {
                 console.warn("[Forms] Honeypot triggered");
               }