@anker-in/ui 0.1.18 → 0.2.0

package/dist/index.mjs

@@ -1670,6 +1670,41 @@ var QuestionnaireForm = ({
   const [agreementError, setAgreementError] = useState("");
   const [phoneCountryCodes, setPhoneCountryCodes] = useState({});
   const [otherInputs, setOtherInputs] = useState({});
+  const prevHasBookedBeforeRef = useRef(false);
+  const hasBookedBefore = responses["has_booked_before"] === "option2";
+  const hiddenQuestionIds = useMemo(() => {
+    if (!hasBookedBefore) return [];
+    return questions.filter((q) => q.is_default === false).map((q) => q.key || q.id || "");
+  }, [hasBookedBefore, questions]);
+  const visibleQuestions = useMemo(() => {
+    return questions.filter((question) => {
+      if (hasBookedBefore && question.is_default === false) {
+        return false;
+      }
+      return true;
+    });
+  }, [questions, hasBookedBefore]);
+  useEffect(() => {
+    if (hasBookedBefore && !prevHasBookedBeforeRef.current) {
+      if (hiddenQuestionIds.length > 0) {
+        setResponses((prev) => {
+          const newResponses = { ...prev };
+          hiddenQuestionIds.forEach((questionId) => {
+            delete newResponses[questionId];
+          });
+          return newResponses;
+        });
+        setErrors((prev) => {
+          const newErrors = { ...prev };
+          hiddenQuestionIds.forEach((questionId) => {
+            delete newErrors[questionId];
+          });
+          return newErrors;
+        });
+      }
+    }
+    prevHasBookedBeforeRef.current = hasBookedBefore;
+  }, [hasBookedBefore, hiddenQuestionIds]);
   const defaultCountryCodes = [
     { code: "+1", country: "US/CA" },
     { code: "+86", country: "CN" },
@@ -1685,7 +1720,7 @@ var QuestionnaireForm = ({
   ];
   const countryCodes = pageData?.countryCodes || defaultCountryCodes;
   const getQuestionId = (question) => {
-    return question.id || question.key || "";
+    return question.key || question.id || "";
   };
   const handleChange = (questionId, value) => {
     setResponses((prev) => ({
@@ -1739,7 +1774,7 @@ var QuestionnaireForm = ({
   };
   const validateForm = () => {
     const newErrors = {};
-    questions.forEach((question) => {
+    visibleQuestions.forEach((question) => {
       if (question.required) {
         const questionId = getQuestionId(question);
         const value = responses[questionId];
@@ -1784,6 +1819,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) => {
@@ -2042,64 +2087,80 @@ var QuestionnaireForm = ({
     }
   };
   return /* @__PURE__ */ jsxs("div", { className: "pb-[80px] light", children: [
-    questions && questions.length > 0 && /* @__PURE__ */ jsx("div", { className: "bg-white rounded-[12px] border border-[#E4E5E6] p-8 dark:bg-white dark:border-[#E4E5E6] l:p-4", children: /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, className: cn("space-y-6", className), children: questions.map((question) => {
+    visibleQuestions && visibleQuestions.length > 0 && /* @__PURE__ */ jsx("div", { className: "bg-white rounded-[12px] border border-[#E4E5E6] p-8 dark:bg-white dark:border-[#E4E5E6] l:p-4", children: /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, className: cn("space-y-6", className), children: visibleQuestions.map((question) => {
       const questionId = getQuestionId(question);
-      return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsxs("label", { className: "block", children: [
-          /* @__PURE__ */ jsxs("span", { className: "text-base font-bold text-gray-900 dark:text-gray-900", children: [
-            question.label,
-            question.required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
-          ] }),
-          question.description && /* @__PURE__ */ 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__ */ 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__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-500 font-bold", children: question.hint }),
-        errors[questionId] && /* @__PURE__ */ jsx(
-          "p",
-          {
-            className: "text-sm font-bold",
-            style: { color: "#FF4D4D" },
-            children: errors[questionId]
-          }
-        )
-      ] }, questionId);
+      const hasError = !!errors[questionId];
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "space-y-2",
+          "data-has-error": hasError ? "true" : "false",
+          children: [
+            /* @__PURE__ */ jsxs("label", { className: "block", children: [
+              /* @__PURE__ */ jsxs("span", { className: "text-base font-bold text-gray-900 dark:text-gray-900", children: [
+                question.label,
+                question.required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
+              ] }),
+              question.description && /* @__PURE__ */ 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__ */ 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__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-500 font-bold", children: question.hint }),
+            errors[questionId] && /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: "text-sm font-bold",
+                style: { color: "#FF4D4D" },
+                children: errors[questionId]
+              }
+            )
+          ]
+        },
+        questionId
+      );
     }) }) }),
     !!selectedTimeslotId && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center", children: [
-      pageData?.agrees && pageData.agrees.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-4 mt-8", children: [
-        pageData.agrees.map((agreeContent, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ 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__ */ jsxs(
+        "div",
+        {
+          className: "space-y-4 mt-8",
+          "data-has-error": agreementError ? "true" : "false",
+          children: [
+            pageData.agrees.map((agreeContent, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ 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__ */ 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__ */ jsx(
+              "p",
+              {
+                className: "text-sm font-bold mt-2",
+                style: { color: "#FF4D4D" },
+                children: agreementError
               }
-            }
-          ),
-          /* @__PURE__ */ 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__ */ jsx(
-          "p",
-          {
-            className: "text-sm font-bold mt-2",
-            style: { color: "#FF4D4D" },
-            children: agreementError
-          }
-        )
-      ] }),
+            )
+          ]
+        }
+      ),
       /* @__PURE__ */ jsx(
         "button",
         {
@@ -2706,6 +2767,7 @@ var DateTimePicker = ({
               const customerEmail = responses.email || responses.customer_email || "";
               const customerPhone = responses.phone || responses.customer_phone_number || "";
               const customerPhoneCode = responses.phone_code || responses.customer_phone_code || "+1";
+              const hasBookedBefore = responses.has_booked_before === "option2" ? 1 : 0;
               if (selectedTimeslotId) {
                 const result = await createBooking({
                   demoroom_code: demoRoomCode,
@@ -2715,7 +2777,8 @@ var DateTimePicker = ({
                   customer_name: customerName,
                   customer_email: customerEmail,
                   customer_phone_code: customerPhoneCode,
-                  customer_phone_number: customerPhone
+                  customer_phone_number: customerPhone,
+                  has_booked_before: hasBookedBefore
                 });
                 if (result && onBookingSuccess) {
                   onBookingSuccess(result?.cancel_token);
@@ -8929,23 +8992,23 @@ var BookingSuccess = ({
     return null;
   }
   return /* @__PURE__ */ jsx("div", { className: `min-h-screen l:py-0 l:px-0 py-12 px-6 ${className || ""}`, children: /* @__PURE__ */ jsxs("div", { className: "mx-auto", children: [
-    /* @__PURE__ */ jsx("h1", { className: "text-[40px] font-bold text-gray-900 mb-8", children: pageData.yourAppointment }),
+    /* @__PURE__ */ jsx("h1", { className: "text-[48px] xxl:text-[32px] font-bold text-[#080A0F] mb-8", children: pageData.yourAppointment }),
     isCancelled && /* @__PURE__ */ 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__ */ jsx("p", { className: "text-base text-gray-700", children: pageData.appointmentCanceled }),
+      /* @__PURE__ */ jsx("p", { className: "text-base text-[#080A0F]", children: pageData.appointmentCanceled }),
       onScheduleAgain && bookingData && /* @__PURE__ */ 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__ */ jsxs("div", { className: "space-y-8 bg-white px-[48px] l:px-[16px] l:py-[16px] py-[32px] rounded-[16px]", children: [
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h2", { className: "text-lg  text-gray-900 mb-3", children: pageData.location }),
+        /* @__PURE__ */ jsx("h2", { className: "text-[24px] l:text-[20px]  text-[#4A4C56] mb-3", children: pageData.location }),
         /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-          bookingData.demoroom_name && /* @__PURE__ */ jsx("p", { className: "text-base text-gray-900", children: bookingData.demoroom_name }),
+          bookingData.demoroom_name && /* @__PURE__ */ jsx("p", { className: "text-base text-[#4A4C56]", children: bookingData.demoroom_name }),
           bookingData.address && /* @__PURE__ */ jsx("p", { className: "text-base text-gray-600", children: bookingData.address }),
           bookingData.latitude && bookingData.longitude && /* @__PURE__ */ jsx(
             "a",
@@ -8960,25 +9023,25 @@ var BookingSuccess = ({
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h2", { className: "text-lg text-gray-900 mb-3", children: pageData.dateAndTime }),
-        /* @__PURE__ */ jsxs("p", { className: "text-base text-gray-900", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-[24px] l:text-[20px] text-[#4A4C56] mb-3", children: pageData.dateAndTime }),
+        /* @__PURE__ */ 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__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h2", { className: "text-lg text-gray-900 mb-3", children: pageData.event }),
-        /* @__PURE__ */ jsx("p", { className: "text-base text-gray-900", children: Array.isArray(bookingData.equipment) ? bookingData.equipment.join(", ") : bookingData.equipment })
+        /* @__PURE__ */ jsx("h2", { className: "text-[24px] l:text-[20px] text-[#4A4C56] mb-3", children: pageData.event }),
+        /* @__PURE__ */ jsx("p", { className: "text-base text-[#4A4C56]", children: Array.isArray(bookingData.equipment) ? bookingData.equipment.join(", ") : bookingData.equipment })
       ] }),
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h2", { className: "text-lg text-gray-900 mb-3", children: pageData.demoRoom }),
-        /* @__PURE__ */ jsx("p", { className: "text-base text-gray-900", children: bookingData.demoroom_code })
+        /* @__PURE__ */ jsx("h2", { className: "text-[24px] l:text-[20px] text-[#4A4C56] mb-3", children: pageData.demoRoom }),
+        /* @__PURE__ */ jsx("p", { className: "text-base text-[#4A4C56]", children: bookingData.demoroom_code })
       ] }),
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h2", { className: "text-lg text-gray-900 mb-3", children: pageData.visitorInfo }),
+        /* @__PURE__ */ jsx("h2", { className: "text-[24px] l:text-[20px] text-[#4A4C56] mb-3", children: pageData.visitorInfo }),
         /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-base text-gray-900", children: bookingData.customer_name }),
+          /* @__PURE__ */ jsx("p", { className: "text-base text-[#4A4C56]", children: bookingData.customer_name }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-base text-gray-600", children: [
             /* @__PURE__ */ jsx(
               "svg",
@@ -9091,7 +9154,7 @@ var BookingSuccess = ({
         }
       ) }) }),
       /* @__PURE__ */ jsxs("div", { className: "text-center mb-8", children: [
-        /* @__PURE__ */ jsx("h3", { className: "text-[18px] text-gray-900 mb-2", children: pageData.cancelDialog?.title }),
+        /* @__PURE__ */ jsx("h3", { className: "text-[18px] text-[#4A4C56] mb-2", children: pageData.cancelDialog?.title }),
         /* @__PURE__ */ jsx("p", { className: "text-[14px] text-gray-600", children: pageData.cancelDialog?.description })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex gap-3 justify-center", children: [