@anker-in/ui 0.1.17 → 0.1.19

package/dist/index.js

@@ -1798,6 +1798,16 @@ var QuestionnaireForm = ({
         }
       });
       onSubmit?.(finalResponses);
+    } else {
+      setTimeout(() => {
+        const firstErrorElement = document.querySelector('[data-has-error="true"]');
+        if (firstErrorElement) {
+          firstErrorElement.scrollIntoView({
+            behavior: "smooth",
+            block: "center"
+          });
+        }
+      }, 100);
     }
   };
   const renderQuestion = (question) => {
@@ -1980,7 +1990,7 @@ var QuestionnaireForm = ({
                 onChange: (e) => handleOtherInputChange(questionId, e.target.value),
                 placeholder: question.placeholder || "Please specify...",
                 className: cn(
-                  "w-full ml-8 px-4 py-3 rounded-lg border text-base bg-white dark:bg-white dark:text-gray-900",
+                  "w-full px-4 py-3 rounded-lg border text-base bg-white dark:bg-white dark:text-gray-900",
                   "focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:border-transparent",
                   hasError ? "border-red-500" : "border-[#E4E5E6]"
                 )
@@ -2022,11 +2032,17 @@ var QuestionnaireForm = ({
             optionValue
           );
         }) });
-      case "select":
+      case "select": {
+        const currentValue = responses[questionId];
+        const hasOnlyOneOption = question.options?.length === 1;
+        const defaultValue = hasOnlyOneOption && !currentValue && question.options?.[0] ? question.options[0].value || question.options[0].label : currentValue || "";
+        if (hasOnlyOneOption && !currentValue && question.options?.[0]) {
+          handleChange(questionId, defaultValue);
+        }
         return /* @__PURE__ */ jsxRuntime.jsx(
           "select",
           {
-            value: responses[questionId] || "",
+            value: defaultValue,
             onChange: (e) => handleChange(questionId, e.target.value),
             className: cn(
               "w-full px-4 py-3 rounded-lg border text-base bg-white dark:bg-white dark:text-gray-900",
@@ -2044,6 +2060,7 @@ var QuestionnaireForm = ({
             ))
           }
         );
+      }
       default:
         return null;
     }
@@ -2051,62 +2068,78 @@ var QuestionnaireForm = ({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pb-[80px] light", children: [
     questions && questions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white rounded-[12px] border border-[#E4E5E6] p-8 dark:bg-white dark:border-[#E4E5E6] l:p-4", children: /* @__PURE__ */ jsxRuntime.jsx("form", { onSubmit: handleSubmit, className: cn("space-y-6", className), children: questions.map((question) => {
       const questionId = getQuestionId(question);
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "block", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-base font-bold text-gray-900 dark:text-gray-900", children: [
-            question.label,
-            question.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 ml-1", children: "*" })
-          ] }),
-          question.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-sm text-gray-600 dark:text-gray-600 font-bold mt-1", children: question.description }),
-          question.type === "email" && questionId === "email" && pageData?.emailDescription && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-sm text-gray-600 dark:text-gray-600 font-bold mt-1", children: pageData.emailDescription })
-        ] }),
-        renderQuestion(question),
-        question.hint && !errors[questionId] && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 dark:text-gray-500 font-bold", children: question.hint }),
-        errors[questionId] && /* @__PURE__ */ jsxRuntime.jsx(
-          "p",
-          {
-            className: "text-sm font-bold",
-            style: { color: "#FF4D4D" },
-            children: errors[questionId]
-          }
-        )
-      ] }, questionId);
+      const hasError = !!errors[questionId];
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "space-y-2",
+          "data-has-error": hasError ? "true" : "false",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "block", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-base font-bold text-gray-900 dark:text-gray-900", children: [
+                question.label,
+                question.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 ml-1", children: "*" })
+              ] }),
+              question.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-sm text-gray-600 dark:text-gray-600 font-bold mt-1", children: question.description }),
+              question.type === "email" && questionId === "email" && pageData?.emailDescription && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-sm text-gray-600 dark:text-gray-600 font-bold mt-1", children: pageData.emailDescription })
+            ] }),
+            renderQuestion(question),
+            question.hint && !errors[questionId] && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 dark:text-gray-500 font-bold", children: question.hint }),
+            errors[questionId] && /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: "text-sm font-bold",
+                style: { color: "#FF4D4D" },
+                children: errors[questionId]
+              }
+            )
+          ]
+        },
+        questionId
+      );
     }) }) }),
     !!selectedTimeslotId && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center", children: [
-      pageData?.agrees && pageData.agrees.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 mt-8", children: [
-        pageData.agrees.map((agreeContent, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              type: "checkbox",
-              id: `agreement-${index}`,
-              checked: agreements[index] || false,
-              onChange: (e) => handleAgreementChange(index, e.target.checked),
-              className: "w-5 h-5 rounded text-[#3ADB67] focus:ring-[#3ADB67] cursor-pointer flex-shrink-0",
-              style: {
-                accentColor: "#3ADB67"
+      pageData?.agrees && pageData.agrees.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "space-y-4 mt-8",
+          "data-has-error": agreementError ? "true" : "false",
+          children: [
+            pageData.agrees.map((agreeContent, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  id: `agreement-${index}`,
+                  checked: agreements[index] || false,
+                  onChange: (e) => handleAgreementChange(index, e.target.checked),
+                  className: "w-5 h-5 rounded text-[#3ADB67] focus:ring-[#3ADB67] cursor-pointer flex-shrink-0",
+                  style: {
+                    accentColor: "#3ADB67"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "label",
+                {
+                  htmlFor: `agreement-${index}`,
+                  className: "text-sm text-gray-700 dark:text-gray-700 font-bold cursor-pointer select-none flex-1 [&_a]:underline [&_a]:text-blue-600 [&_a:hover]:text-blue-700",
+                  dangerouslySetInnerHTML: { __html: agreeContent },
+                  "aria-label": `Agreement ${index + 1}`
+                }
+              )
+            ] }, index)),
+            agreementError && /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: "text-sm font-bold mt-2",
+                style: { color: "#FF4D4D" },
+                children: agreementError
               }
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "label",
-            {
-              htmlFor: `agreement-${index}`,
-              className: "text-sm text-gray-700 dark:text-gray-700 font-bold cursor-pointer select-none flex-1 [&_a]:underline [&_a]:text-blue-600 [&_a:hover]:text-blue-700",
-              dangerouslySetInnerHTML: { __html: agreeContent },
-              "aria-label": `Agreement ${index + 1}`
-            }
-          )
-        ] }, index)),
-        agreementError && /* @__PURE__ */ jsxRuntime.jsx(
-          "p",
-          {
-            className: "text-sm font-bold mt-2",
-            style: { color: "#FF4D4D" },
-            children: agreementError
-          }
-        )
-      ] }),
+            )
+          ]
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
@@ -8936,23 +8969,23 @@ var BookingSuccess = ({
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `min-h-screen l:py-0 l:px-0 py-12 px-6 ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-[40px] font-bold text-gray-900 mb-8", children: pageData.yourAppointment }),
+    /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-[48px] xxl:text-[32px] font-bold text-[#080A0F] mb-8", children: pageData.yourAppointment }),
     isCancelled && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-[16px] l:items-start p-6 mb-4 l:gap-2 flex l:flex-col items-center justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-700", children: pageData.appointmentCanceled }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-[#080A0F]", children: pageData.appointmentCanceled }),
       onScheduleAgain && bookingData && /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           onClick: () => onScheduleAgain(bookingData.demoroom_code),
-          className: "px-6 py-3 bg-black text-white rounded-full hover:bg-gray-800 transition-colors whitespace-nowrap",
+          className: "px-6 py-3 text-[16px] bg-black text-white rounded-full hover:bg-gray-800 transition-colors whitespace-nowrap",
           children: pageData.scheduleAgain
         }
       )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-8 bg-white px-[48px] l:px-[16px] l:py-[16px] py-[32px] rounded-[16px]", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg  text-gray-900 mb-3", children: pageData.location }),
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[24px] l:text-[20px]  text-[#4A4C56] mb-3", children: pageData.location }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-          bookingData.demoroom_name && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-900", children: bookingData.demoroom_name }),
+          bookingData.demoroom_name && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-[#4A4C56]", children: bookingData.demoroom_name }),
           bookingData.address && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-600", children: bookingData.address }),
           bookingData.latitude && bookingData.longitude && /* @__PURE__ */ jsxRuntime.jsx(
             "a",
@@ -8967,25 +9000,25 @@ var BookingSuccess = ({
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg text-gray-900 mb-3", children: pageData.dateAndTime }),
-        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-base text-gray-900", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[24px] l:text-[20px] text-[#4A4C56] mb-3", children: pageData.dateAndTime }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-base text-[#4A4C56]", children: [
           bookingData.booking_date,
           bookingData.time_slot && `, ${bookingData.time_slot}`,
           !bookingData.time_slot && bookingData.booking_time && `, ${bookingData.booking_time}`
         ] })
       ] }),
       bookingData.equipment && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg text-gray-900 mb-3", children: pageData.event }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-900", children: Array.isArray(bookingData.equipment) ? bookingData.equipment.join(", ") : bookingData.equipment })
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[24px] l:text-[20px] text-[#4A4C56] mb-3", children: pageData.event }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-[#4A4C56]", children: Array.isArray(bookingData.equipment) ? bookingData.equipment.join(", ") : bookingData.equipment })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg text-gray-900 mb-3", children: pageData.demoRoom }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-900", children: bookingData.demoroom_code })
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[24px] l:text-[20px] text-[#4A4C56] mb-3", children: pageData.demoRoom }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-[#4A4C56]", children: bookingData.demoroom_code })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg text-gray-900 mb-3", children: pageData.visitorInfo }),
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[24px] l:text-[20px] text-[#4A4C56] mb-3", children: pageData.visitorInfo }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-900", children: bookingData.customer_name }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-[#4A4C56]", children: bookingData.customer_name }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-base text-gray-600", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "svg",
@@ -9098,7 +9131,7 @@ var BookingSuccess = ({
         }
       ) }) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center mb-8", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[18px] text-gray-900 mb-2", children: pageData.cancelDialog?.title }),
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[18px] text-[#4A4C56] mb-2", children: pageData.cancelDialog?.title }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[14px] text-gray-600", children: pageData.cancelDialog?.description })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 justify-center", children: [