@anker-in/ui 0.3.3 → 0.3.5

package/dist/index.mjs

@@ -10900,7 +10900,6 @@ var QuestionnaireForm2 = ({
       return true;
     });
   }, [questions, hasBookedBefore]);
-  console.log(error, pageData);
   useEffect(() => {
     if (hasBookedBeforeInitialized.current) return;
     if (hasBookedBeforeQuestion && hasBookedBeforeQuestionId) {
@@ -10973,7 +10972,7 @@ var QuestionnaireForm2 = ({
     if (!emailRegex.test(value)) {
       setErrors((prev) => ({
         ...prev,
-        [questionId]: "Please enter a valid email address"
+        [questionId]: pageData?.emailValidError || "Please enter a valid email address"
       }));
     }
   };
@@ -11011,7 +11010,7 @@ var QuestionnaireForm2 = ({
         const questionId = getQuestionId(question);
         const value = responses[questionId];
         if (!value || Array.isArray(value) && value.length === 0) {
-          newErrors[questionId] = "This field is required";
+          newErrors[questionId] = pageData?.fieldRuquired || "This field is required";
         }
       }
     });
@@ -11022,7 +11021,7 @@ var QuestionnaireForm2 = ({
       );
       if (!allAgreed) {
         setAgreementError(
-          "Please agree to all terms and conditions to continue"
+          pageData?.agreeRuquired || "Please agree to all terms and conditions to continue"
         );
         setErrors(newErrors);
         return false;
@@ -11443,6 +11442,10 @@ var DateTimePicker2 = ({
   );
   const [isInitialized, setIsInitialized] = useState(() => !!booking);
   const [hasResolvedBookingSlot, setHasResolvedBookingSlot] = useState(false);
+  const autoSelectLockRef = useRef(false);
+  useEffect(() => {
+    autoSelectLockRef.current = false;
+  }, [demoRoomCode]);
   const {
     createBooking,
     loading: bookingLoading,
@@ -11454,13 +11457,17 @@ var DateTimePicker2 = ({
     error: editError
   } = useEditBooking(apiClient);
   const isManagedByParent = demoRoomLoading !== void 0;
-  const { data: fetchedDemoRoom } = useDemoRoom(
+  const {
+    data: fetchedDemoRoom,
+    loading: fetchedDemoRoomLoading
+  } = useDemoRoom(
     apiClient,
     demoRoomCode || "",
     locale,
     { enabled: !isManagedByParent && !demoRoomProp && !!demoRoomCode }
   );
   const demoRoom = demoRoomProp ?? fetchedDemoRoom;
+  const effectiveDemoRoomLoading = !demoRoom && !!(isManagedByParent ? demoRoomLoading : fetchedDemoRoomLoading);
   const isPodPurpose = selectedPurposeType === "pod";
   const effectiveQuestionnaireId = isPodPurpose && demoRoom?.pod_config?.questionnaire_id || demoRoom?.questionnaire_id;
   const { data: questionnaire, loading: questionnaireLoading } = useQuestionnaire(
@@ -11509,7 +11516,28 @@ var DateTimePicker2 = ({
     return dates;
   }, [timeslotsData, demoRoom?.timezone, timezone5]);
   useEffect(() => {
-    if (!timeslotsData?.timeslots || isInitialized) return;
+    if (booking || isInitialized || autoSelectLockRef.current || !demoRoom?.timeslots?.length)
+      return;
+    const tz = demoRoom?.timezone || timezone5;
+    const now2 = tz ? dayjs4().tz(tz) : dayjs4();
+    const nearestSlot = demoRoom.timeslots.filter((slot) => {
+      const slotTime = tz ? dayjs4(slot.start_time).tz(tz) : dayjs4(slot.start_time);
+      return slot.status === "available" && slotTime.isAfter(now2);
+    }).sort((a, b) => {
+      const timeA = tz ? dayjs4(a.start_time).tz(tz) : dayjs4(a.start_time);
+      const timeB = tz ? dayjs4(b.start_time).tz(tz) : dayjs4(b.start_time);
+      return timeA.unix() - timeB.unix();
+    })[0];
+    if (!nearestSlot) return;
+    autoSelectLockRef.current = true;
+    const nearestDate = tz ? dayjs4(nearestSlot.start_time).tz(tz) : dayjs4(nearestSlot.start_time);
+    setSelectedDate(nearestDate);
+    setCalendarValue(nearestDate);
+    setSelectedTimeslotId(nearestSlot.id);
+    setIsInitialized(true);
+  }, [booking, isInitialized, demoRoom?.timeslots, demoRoom?.timezone, timezone5]);
+  useEffect(() => {
+    if (!timeslotsData?.timeslots || isInitialized || autoSelectLockRef.current) return;
     const tz = demoRoom?.timezone || timezone5;
     const now2 = tz ? dayjs4().tz(tz) : dayjs4();
     const availableTimeslots = timeslotsData.timeslots.filter((slot) => {
@@ -11524,16 +11552,25 @@ var DateTimePicker2 = ({
       });
       const nearestSlot = sortedSlots[0];
       const nearestDate = tz ? dayjs4(nearestSlot.start_time).tz(tz) : dayjs4(nearestSlot.start_time);
+      autoSelectLockRef.current = true;
       setSelectedDate(nearestDate);
       setCalendarValue(nearestDate);
       setSelectedTimeslotId(nearestSlot.id);
       setIsInitialized(true);
-    } else if (!selectedDate) {
+    } else if (!selectedDate && !effectiveDemoRoomLoading) {
+      autoSelectLockRef.current = true;
       setSelectedDate(now2);
       setCalendarValue(now2);
       setIsInitialized(true);
     }
-  }, [timeslotsData, isInitialized, selectedDate, demoRoom?.timezone, timezone5]);
+  }, [
+    timeslotsData,
+    isInitialized,
+    selectedDate,
+    demoRoom?.timezone,
+    timezone5,
+    effectiveDemoRoomLoading
+  ]);
   useEffect(() => {
     if (!timeslotsData?.timeslots || !isInitialized) return;
     if (selectedDate && selectedDate.isSame(calendarValue, "month")) {
@@ -12507,6 +12544,9 @@ var BookingFormO2O = ({
   const [selectedPurposeType, setSelectedPurposeType] = useState(
     () => initialBusinessType || purposeOptions[0]?.type || ""
   );
+  const [isPurposeConfirmed, setIsPurposeConfirmed] = useState(
+    () => !!initialBusinessType && purposeOptions.some((item) => item.type === initialBusinessType)
+  );
   useEffect(() => {
     setSelectedPurposeType((currentType) => {
       if (purposeOptions.some((item) => item.type === currentType)) {
@@ -12520,11 +12560,16 @@ var BookingFormO2O = ({
       }
       return purposeOptions[0]?.type || "";
     });
+    const resolvedFromExplicitSource = !!initialBusinessType && purposeOptions.some((item) => item.type === initialBusinessType) || !!booking?.business_type && purposeOptions.some((item) => item.type === booking.business_type);
+    if (resolvedFromExplicitSource) {
+      setIsPurposeConfirmed(true);
+    }
   }, [purposeOptions, initialBusinessType, booking?.business_type]);
   const selectedPurpose = useMemo(() => {
-    return purposeOptions.find((item) => item.type === selectedPurposeType) || purposeOptions[0];
+    return purposeOptions.find((item) => item.type === selectedPurposeType) || {};
   }, [purposeOptions, selectedPurposeType]);
-  const selectedPodContent = selectedPurpose?.podContent;
+  const isPodSelected = isPurposeConfirmed && selectedPurpose?.type === "pod";
+  const selectedPodContent = isPodSelected ? selectedPurpose?.podContent : void 0;
   const selectedPodDescription = getPodContentDescription(selectedPodContent);
   const podDesignId = useMemo(() => getQueryParam("design_id"), []);
   const isPodDesignEditMode = !!podDesignId || !!booking?.design_project_id;
@@ -12606,85 +12651,95 @@ var BookingFormO2O = ({
       }
     ) }),
     /* @__PURE__ */ jsxs("div", { className: "bg-[#f5f5f5]", children: [
-      !!purposeOptions.length && /* @__PURE__ */ jsx("div", { className: cn("py-[40px] l:py-[24px]", className), children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-[16px] l:grid-cols-1", children: [
-        /* @__PURE__ */ jsxs("section", { className: "rounded-[16px] bg-white px-[28px] py-[24px] l:px-[16px] l:py-[20px]", children: [
-          /* @__PURE__ */ jsx(
-            "label",
-            {
-              htmlFor: "booking-purpose-select",
-              className: "block text-[16px] font-bold text-[#080A0F] l:text-[14px]",
-              children: getPurposeLabel(pageData)
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "relative mt-[14px]", children: [
-            /* @__PURE__ */ jsx(
-              "select",
-              {
-                id: "booking-purpose-select",
-                value: selectedPurpose?.type || "",
-                onChange: (event2) => {
-                  setSelectedPurposeType(event2.target.value);
-                },
-                disabled: !!token,
-                className: cn(
-                  "h-[48px] w-full appearance-none rounded-[8px] border border-[#D9DCE1] bg-white px-[16px] pr-[48px] text-[16px] font-medium text-[#2A2C32] outline-none transition-colors focus:border-[#080A0F] focus:ring-2 focus:ring-[#3ADB67]/30 l:text-[14px]",
-                  token && "pointer-events-none cursor-not-allowed opacity-50"
-                ),
-                children: purposeOptions.map((item, index) => /* @__PURE__ */ jsx(
-                  "option",
-                  {
-                    value: item.type || "",
-                    children: item.label || item.type
-                  },
-                  `${item.type || item.label || "purpose"}-${index}`
-                ))
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-[14px] top-1/2 flex -translate-y-1/2 text-[#080A0F]", children: /* @__PURE__ */ jsx(ChevronIcon2, {}) })
-          ] }),
-          !!selectedPurpose?.purposeNote && /* @__PURE__ */ jsx("p", { className: "mt-[16px] max-w-[720px] text-[14px] font-medium leading-[1.35] text-[#080A0F] l:text-[13px]", children: selectedPurpose.purposeNote })
-        ] }),
-        selectedPurpose?.type === "pod" && !!selectedPodContent && /* @__PURE__ */ jsxs("section", { className: "rounded-[16px] bg-white px-[28px] py-[20px] l:px-[16px] l:py-[20px]", children: [
-          !!selectedPodContent.title && /* @__PURE__ */ jsx("h2", { className: "text-[16px] font-bold text-[#080A0F] l:text-[14px]", children: selectedPodContent.title }),
-          !!selectedPodDescription && /* @__PURE__ */ jsx("p", { className: "mt-[6px] text-[13px] font-medium leading-[1.35] text-[#080A0F] l:text-[12px]", children: selectedPodDescription }),
-          !!selectedPodImage && /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: selectedPodImage,
-              alt: selectedPodContent.imageAlt || selectedPodContent.title || "",
-              className: "mt-[12px] h-[220px] rounded-[8px] object-cover l:h-auto"
-            }
+      !!purposeOptions.length && /* @__PURE__ */ jsx("div", { className: cn("py-[40px] l:py-[24px]", className), children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "grid gap-[16px] l:grid-cols-1",
+            isPodSelected && "grid-cols-2"
           ),
-          !!selectedPodButtonText && (booking?.print_status === "unprinted" && booking?.design_project_id || !token) && /* @__PURE__ */ jsxs(
-            "a",
-            {
-              href: selectedPodButtonLink || "#",
-              "aria-disabled": isPodButtonDisabled,
-              tabIndex: isPodButtonDisabled ? -1 : void 0,
-              onClick: (event2) => {
-                if (isPodButtonDisabled) event2.preventDefault();
-              },
-              rel: "noopener noreferrer",
-              className: cn(
-                "mt-[12px] inline-flex h-[42px] items-center justify-center gap-[6px] rounded-full bg-[#080A0F] px-[24px] text-[14px] font-bold text-white transition-colors hover:bg-[#2A2C32]",
-                isPodButtonDisabled && "pointer-events-none cursor-not-allowed opacity-50"
+          children: [
+            /* @__PURE__ */ jsxs("section", { className: "rounded-[16px] bg-white px-[28px] py-[24px] l:px-[16px] l:py-[20px]", children: [
+              /* @__PURE__ */ jsx(
+                "label",
+                {
+                  htmlFor: "booking-purpose-select",
+                  className: "block text-[16px] font-bold text-[#080A0F] l:text-[14px]",
+                  children: getPurposeLabel(pageData)
+                }
               ),
-              children: [
-                selectedPodButtonIcon && /* @__PURE__ */ jsx(
-                  "img",
+              /* @__PURE__ */ jsxs("div", { className: "relative mt-[14px]", children: [
+                /* @__PURE__ */ jsx(
+                  "select",
                   {
-                    src: selectedPodButtonIcon,
-                    alt: "",
-                    className: "h-[16px] w-[16px]",
-                    "aria-hidden": "true"
+                    id: "booking-purpose-select",
+                    value: selectedPurpose?.type || "",
+                    onChange: (event2) => {
+                      setSelectedPurposeType(event2.target.value);
+                      setIsPurposeConfirmed(true);
+                    },
+                    disabled: !!token,
+                    className: cn(
+                      "h-[48px] w-full appearance-none rounded-[8px] border border-[#D9DCE1] bg-white px-[16px] pr-[48px] text-[16px] font-medium text-[#2A2C32] outline-none transition-colors focus:border-[#080A0F] focus:ring-2 focus:ring-[#3ADB67]/30 l:text-[14px]",
+                      token && "pointer-events-none cursor-not-allowed opacity-50"
+                    ),
+                    children: purposeOptions.map((item, index) => /* @__PURE__ */ jsx(
+                      "option",
+                      {
+                        value: item.type || "",
+                        children: item.label || item.type
+                      },
+                      `${item.type || item.label || "purpose"}-${index}`
+                    ))
                   }
                 ),
-                selectedPodButtonText
-              ]
-            }
-          )
-        ] })
-      ] }) }),
+                /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-[14px] top-1/2 flex -translate-y-1/2 text-[#080A0F]", children: /* @__PURE__ */ jsx(ChevronIcon2, {}) })
+              ] }),
+              !!selectedPurpose?.purposeNote && /* @__PURE__ */ jsx("p", { className: "mt-[16px] max-w-[720px] text-[14px] font-medium leading-[1.35] text-[#080A0F] l:text-[13px]", children: selectedPurpose.purposeNote })
+            ] }),
+            isPodSelected && !!selectedPodContent && /* @__PURE__ */ jsxs("section", { className: "rounded-[16px] bg-white px-[28px] py-[20px] l:px-[16px] l:py-[20px]", children: [
+              !!selectedPodContent.title && /* @__PURE__ */ jsx("h2", { className: "text-[16px] font-bold text-[#080A0F] l:text-[14px]", children: selectedPodContent.title }),
+              !!selectedPodDescription && /* @__PURE__ */ jsx("p", { className: "mt-[6px] text-[13px] font-medium leading-[1.35] text-[#080A0F] l:text-[12px]", children: selectedPodDescription }),
+              !!selectedPodImage && /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: selectedPodImage,
+                  alt: selectedPodContent.imageAlt || selectedPodContent.title || "",
+                  className: "mt-[12px] h-[220px] rounded-[8px] object-cover l:h-auto"
+                }
+              ),
+              !!selectedPodButtonText && (booking?.print_status === "unprinted" && booking?.design_project_id || !token) && /* @__PURE__ */ jsxs(
+                "a",
+                {
+                  href: selectedPodButtonLink || "#",
+                  "aria-disabled": isPodButtonDisabled,
+                  tabIndex: isPodButtonDisabled ? -1 : void 0,
+                  onClick: (event2) => {
+                    if (isPodButtonDisabled) event2.preventDefault();
+                  },
+                  rel: "noopener noreferrer",
+                  className: cn(
+                    "mt-[12px] inline-flex h-[42px] items-center justify-center gap-[6px] rounded-full bg-[#080A0F] px-[24px] text-[14px] font-bold text-white transition-colors hover:bg-[#2A2C32]",
+                    isPodButtonDisabled && "pointer-events-none cursor-not-allowed opacity-50"
+                  ),
+                  children: [
+                    selectedPodButtonIcon && /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        src: selectedPodButtonIcon,
+                        alt: "",
+                        className: "h-[16px] w-[16px]",
+                        "aria-hidden": "true"
+                      }
+                    ),
+                    selectedPodButtonText
+                  ]
+                }
+              )
+            ] })
+          ]
+        }
+      ) }),
       /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(
         DateTimePicker_default2,
         {