@anker-in/ui 0.1.15 → 0.1.16

package/dist/index.mjs

@@ -12,6 +12,8 @@ import { theme, ConfigProvider, Calendar, Select } from 'antd';
 import dayLocaleData from 'dayjs/plugin/localeData';
 import weekday from 'dayjs/plugin/weekday';
 import weekOfYear from 'dayjs/plugin/weekOfYear';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
 
 function cn(...inputs) {
   return twMerge(clsx(inputs));
@@ -1659,7 +1661,8 @@ var QuestionnaireForm = ({
   pageData,
   selectedTimeslotId,
   loading = false,
-  className
+  className,
+  error
 }) => {
   const [responses, setResponses] = useState({});
   const [errors, setErrors] = useState({});
@@ -2105,17 +2108,20 @@ var QuestionnaireForm = ({
           ),
           children: loading ? pageData?.submitting || "Submitting..." : pageData?.submit || "Submit Booking"
         }
-      )
+      ),
+      error && /* @__PURE__ */ jsx("div", { className: "text-center w-full p-4", children: /* @__PURE__ */ jsx("p", { className: "text-[#FF4D4D] font-bold", children: error.message }) })
     ] })
   ] });
 };
 dayjs.extend(dayLocaleData);
 dayjs.extend(weekday);
 dayjs.extend(weekOfYear);
+dayjs.extend(utc);
+dayjs.extend(timezone);
 var DateTimePicker = ({
   apiClient,
   demoRoomCode,
-  timezone,
+  timezone: timezone2,
   pageData = {
     scheduleYourVisit: "Schedule Your Visit",
     timeSlot: "Time Slot",
@@ -2169,41 +2175,47 @@ var DateTimePicker = ({
     {
       start_date: startDate,
       end_date: endDate,
-      timezone
+      timezone: timezone2
     },
     { enabled: !!demoRoomCode }
   );
   const dayTimeslots = useMemo(() => {
     if (!timeslotsData?.timeslots || !selectedDate) return [];
+    const tz = demoRoom?.timezone || timezone2;
     const selectedDateStr = selectedDate.format("YYYY-MM-DD");
     return timeslotsData.timeslots.filter((slot) => {
-      const slotDate = dayjs(slot.start_time).format("YYYY-MM-DD");
+      const slotDate = tz ? dayjs(slot.start_time).tz(tz).format("YYYY-MM-DD") : dayjs(slot.start_time).format("YYYY-MM-DD");
       return slotDate === selectedDateStr;
     });
-  }, [timeslotsData, selectedDate]);
+  }, [timeslotsData, selectedDate, demoRoom?.timezone, timezone2]);
   const availableDates = useMemo(() => {
     if (!timeslotsData?.timeslots) return /* @__PURE__ */ new Set();
+    const tz = demoRoom?.timezone || timezone2;
     const dates = /* @__PURE__ */ new Set();
     timeslotsData.timeslots.forEach((slot) => {
       if (slot.status === "available") {
-        const dateStr = dayjs(slot.start_time).format("YYYY-MM-DD");
+        const dateStr = tz ? dayjs(slot.start_time).tz(tz).format("YYYY-MM-DD") : dayjs(slot.start_time).format("YYYY-MM-DD");
         dates.add(dateStr);
       }
     });
     return dates;
-  }, [timeslotsData]);
+  }, [timeslotsData, demoRoom?.timezone, timezone2]);
   useEffect(() => {
     if (!timeslotsData?.timeslots || isInitialized) return;
-    const now2 = dayjs();
-    const availableTimeslots = timeslotsData.timeslots.filter(
-      (slot) => slot.status === "available" && dayjs(slot.start_time).isAfter(now2)
-    );
+    const tz = demoRoom?.timezone || timezone2;
+    const now2 = tz ? dayjs().tz(tz) : dayjs();
+    const availableTimeslots = timeslotsData.timeslots.filter((slot) => {
+      const slotTime = tz ? dayjs(slot.start_time).tz(tz) : dayjs(slot.start_time);
+      return slot.status === "available" && slotTime.isAfter(now2);
+    });
     if (availableTimeslots.length > 0) {
-      const sortedSlots = [...availableTimeslots].sort(
-        (a, b) => dayjs(a.start_time).unix() - dayjs(b.start_time).unix()
-      );
+      const sortedSlots = [...availableTimeslots].sort((a, b) => {
+        const timeA = tz ? dayjs(a.start_time).tz(tz) : dayjs(a.start_time);
+        const timeB = tz ? dayjs(b.start_time).tz(tz) : dayjs(b.start_time);
+        return timeA.unix() - timeB.unix();
+      });
       const nearestSlot = sortedSlots[0];
-      const nearestDate = dayjs(nearestSlot.start_time);
+      const nearestDate = tz ? dayjs(nearestSlot.start_time).tz(tz) : dayjs(nearestSlot.start_time);
       setSelectedDate(nearestDate);
       setCalendarValue(nearestDate);
       setSelectedTimeslotId(nearestSlot.id);
@@ -2213,32 +2225,43 @@ var DateTimePicker = ({
       setCalendarValue(now2);
       setIsInitialized(true);
     }
-  }, [timeslotsData, isInitialized, selectedDate]);
+  }, [timeslotsData, isInitialized, selectedDate, demoRoom?.timezone, timezone2]);
   useEffect(() => {
     if (!timeslotsData?.timeslots || !isInitialized) return;
     if (selectedDate && selectedDate.isSame(calendarValue, "month")) {
       return;
     }
+    const tz = demoRoom?.timezone || timezone2;
     const currentMonthStart = calendarValue.startOf("month");
     const currentMonthEnd = calendarValue.endOf("month");
-    const now2 = dayjs();
+    const now2 = tz ? dayjs().tz(tz) : dayjs();
     const availableTimeslots = timeslotsData.timeslots.filter((slot) => {
-      const slotDate = dayjs(slot.start_time);
+      const slotDate = tz ? dayjs(slot.start_time).tz(tz) : dayjs(slot.start_time);
       return slot.status === "available" && slotDate.isAfter(now2) && (slotDate.isAfter(currentMonthStart) || slotDate.isSame(currentMonthStart, "day")) && (slotDate.isBefore(currentMonthEnd) || slotDate.isSame(currentMonthEnd, "day"));
     });
     if (availableTimeslots.length > 0) {
-      const sortedSlots = [...availableTimeslots].sort(
-        (a, b) => dayjs(a.start_time).unix() - dayjs(b.start_time).unix()
-      );
+      const sortedSlots = [...availableTimeslots].sort((a, b) => {
+        const timeA = tz ? dayjs(a.start_time).tz(tz) : dayjs(a.start_time);
+        const timeB = tz ? dayjs(b.start_time).tz(tz) : dayjs(b.start_time);
+        return timeA.unix() - timeB.unix();
+      });
       const firstSlot = sortedSlots[0];
-      const firstDate = dayjs(firstSlot.start_time);
+      const firstDate = tz ? dayjs(firstSlot.start_time).tz(tz) : dayjs(firstSlot.start_time);
       setSelectedDate(firstDate);
       setSelectedTimeslotId(firstSlot.id);
     }
-  }, [calendarValue, timeslotsData, isInitialized, selectedDate]);
+  }, [
+    calendarValue,
+    timeslotsData,
+    isInitialized,
+    selectedDate,
+    demoRoom?.timezone,
+    timezone2
+  ]);
   const formatTimeslot = (slot) => {
-    const start = dayjs(slot.start_time).format("h:mm A");
-    const end = dayjs(slot.end_time).format("h:mm A");
+    const tz = demoRoom?.timezone || timezone2;
+    const start = tz ? dayjs(slot.start_time).tz(tz).format("h:mm A") : dayjs(slot.start_time).format("h:mm A");
+    const end = tz ? dayjs(slot.end_time).tz(tz).format("h:mm A") : dayjs(slot.end_time).format("h:mm A");
     return `${start} - ${end}`;
   };
   const wrapperStyle = {
@@ -2653,7 +2676,7 @@ var DateTimePicker = ({
         }) }),
         !timeslotsLoading && dayTimeslots?.length > 0 && /* @__PURE__ */ jsx("div", { className: "pt-[24px] text-[#6d6d6F] text-center", children: pageData?.timezone?.replace(
           "{{timezone}}",
-          demoRoom?.timezone || timezone || ""
+          demoRoom?.timezone || timezone2 || ""
         ) })
       ] })
     ] }),
@@ -2666,6 +2689,7 @@ var DateTimePicker = ({
           loading: bookingLoading,
           pageData,
           selectedTimeslotId,
+          error: bookingError,
           onSubmit: async (responses) => {
             if (onQuestionnaireSubmit) {
               await onQuestionnaireSubmit(responses);
@@ -8754,7 +8778,7 @@ var BookingForm = ({
   apiConfig,
   demoRoomCode,
   pageData,
-  timezone,
+  timezone: timezone2,
   handleBookingSuccess,
   onQuestionnaireSubmit,
   ...props
@@ -8786,7 +8810,7 @@ var BookingForm = ({
       {
         apiClient,
         demoRoomCode,
-        timezone,
+        timezone: timezone2,
         locale: apiConfig.locale,
         onBookingSuccess: handleBookingSuccess,
         onQuestionnaireSubmit,