Update components/kleap-form.tsx

components/kleap-form.tsx

@@ -13,6 +13,11 @@ import {
 } from "@/components/ui/form";
 import { Button } from "./ui/button";
 
+interface KleapFormFieldOption {
+  label: string;
+  value: string;
+}
+
 interface KleapFormField {
   name: string;
   label: string;
@@ -28,7 +33,7 @@ interface KleapFormField {
     | "number";
   placeholder?: string;
   required?: boolean;
-  options?: string[]; // For select, radio
+  options?: KleapFormFieldOption[]; // For select, radio
   rows?: number; // For textarea
   validation?: {
     min?: number;
@@ -171,7 +176,7 @@ export function KleapForm({
     try {
       // Get app_id from environment or URL
       const envAppId = process.env.NEXT_PUBLIC_APP_ID;
-      const urlAppId = new URLSearchParams(window.location.search).get(
+      const urlAppId = new URLSearchParams(typeof window !== 'undefined' ? window.location.search : '').get(
         "app_id",
       );
       const appId = envAppId || urlAppId || "";
@@ -197,13 +202,6 @@ export function KleapForm({
         formData.append(key, String(value));
       });
 
-      // 📤 DEBUG HELPER - Log request details
-      console.group("📤 KLEAP FORM REQUEST");
-      for (const [_key, _value] of formData.entries()) {
-        // Debug logging entries
-      }
-      console.groupEnd();
-
       // Submit to Kleap's form API
       const response = await fetch("https://form.kleap.co", {
         method: "POST",
@@ -325,8 +323,8 @@ export function KleapForm({
                       >
                         <option value="">Select an option</option>
                         {field.options?.map((option) => (
-                          <option key={option} value={option}>
-                            {option}
+                          <option key={option.value} value={option.value}>
+                            {option.label}
                           </option>
                         ))}
                       </select>
@@ -349,16 +347,16 @@ export function KleapForm({
                     ) : field.type === "radio" && field.options ? (
                       <div className="space-y-2">
                         {field.options.map((option) => (
-                          <label key={option} className="flex items-center">
+                          <label key={option.value} className="flex items-center">
                             <input
                               type="radio"
-                              value={option}
-                              checked={formField.value === option}
-                              onChange={() => formField.onChange(option)}
+                              value={option.value}
+                              checked={formField.value === option.value}
+                              onChange={() => formField.onChange(option.value)}
                               className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300"
                             />
                             <span className="ml-2 text-sm text-gray-700 dark:text-gray-300">
-                              {option}
+                              {option.label}
                             </span>
                           </label>
                         ))}