@anker-in/ui 0.1.15 → 0.1.16

package/dist/index.js

@@ -14,6 +14,8 @@ var antd = require('antd');
 var dayLocaleData = require('dayjs/plugin/localeData');
 var weekday = require('dayjs/plugin/weekday');
 var weekOfYear = require('dayjs/plugin/weekOfYear');
+var timezone = require('dayjs/plugin/timezone');
+var utc = require('dayjs/plugin/utc');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -24,6 +26,8 @@ var dayjs__default = /*#__PURE__*/_interopDefault(dayjs);
 var dayLocaleData__default = /*#__PURE__*/_interopDefault(dayLocaleData);
 var weekday__default = /*#__PURE__*/_interopDefault(weekday);
 var weekOfYear__default = /*#__PURE__*/_interopDefault(weekOfYear);
+var timezone__default = /*#__PURE__*/_interopDefault(timezone);
+var utc__default = /*#__PURE__*/_interopDefault(utc);
 
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
@@ -1671,7 +1675,8 @@ var QuestionnaireForm = ({
   pageData,
   selectedTimeslotId,
   loading = false,
-  className
+  className,
+  error
 }) => {
   const [responses, setResponses] = React9.useState({});
   const [errors, setErrors] = React9.useState({});
@@ -2117,17 +2122,20 @@ var QuestionnaireForm = ({
           ),
           children: loading ? pageData?.submitting || "Submitting..." : pageData?.submit || "Submit Booking"
         }
-      )
+      ),
+      error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center w-full p-4", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[#FF4D4D] font-bold", children: error.message }) })
     ] })
   ] });
 };
 dayjs__default.default.extend(dayLocaleData__default.default);
 dayjs__default.default.extend(weekday__default.default);
 dayjs__default.default.extend(weekOfYear__default.default);
+dayjs__default.default.extend(utc__default.default);
+dayjs__default.default.extend(timezone__default.default);
 var DateTimePicker = ({
   apiClient,
   demoRoomCode,
-  timezone,
+  timezone: timezone2,
   pageData = {
     scheduleYourVisit: "Schedule Your Visit",
     timeSlot: "Time Slot",
@@ -2181,41 +2189,47 @@ var DateTimePicker = ({
     {
       start_date: startDate,
       end_date: endDate,
-      timezone
+      timezone: timezone2
     },
     { enabled: !!demoRoomCode }
   );
   const dayTimeslots = React9.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__default.default(slot.start_time).format("YYYY-MM-DD");
+      const slotDate = tz ? dayjs__default.default(slot.start_time).tz(tz).format("YYYY-MM-DD") : dayjs__default.default(slot.start_time).format("YYYY-MM-DD");
       return slotDate === selectedDateStr;
     });
-  }, [timeslotsData, selectedDate]);
+  }, [timeslotsData, selectedDate, demoRoom?.timezone, timezone2]);
   const availableDates = React9.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__default.default(slot.start_time).format("YYYY-MM-DD");
+        const dateStr = tz ? dayjs__default.default(slot.start_time).tz(tz).format("YYYY-MM-DD") : dayjs__default.default(slot.start_time).format("YYYY-MM-DD");
         dates.add(dateStr);
       }
     });
     return dates;
-  }, [timeslotsData]);
+  }, [timeslotsData, demoRoom?.timezone, timezone2]);
   React9.useEffect(() => {
     if (!timeslotsData?.timeslots || isInitialized) return;
-    const now2 = dayjs__default.default();
-    const availableTimeslots = timeslotsData.timeslots.filter(
-      (slot) => slot.status === "available" && dayjs__default.default(slot.start_time).isAfter(now2)
-    );
+    const tz = demoRoom?.timezone || timezone2;
+    const now2 = tz ? dayjs__default.default().tz(tz) : dayjs__default.default();
+    const availableTimeslots = timeslotsData.timeslots.filter((slot) => {
+      const slotTime = tz ? dayjs__default.default(slot.start_time).tz(tz) : dayjs__default.default(slot.start_time);
+      return slot.status === "available" && slotTime.isAfter(now2);
+    });
     if (availableTimeslots.length > 0) {
-      const sortedSlots = [...availableTimeslots].sort(
-        (a, b) => dayjs__default.default(a.start_time).unix() - dayjs__default.default(b.start_time).unix()
-      );
+      const sortedSlots = [...availableTimeslots].sort((a, b) => {
+        const timeA = tz ? dayjs__default.default(a.start_time).tz(tz) : dayjs__default.default(a.start_time);
+        const timeB = tz ? dayjs__default.default(b.start_time).tz(tz) : dayjs__default.default(b.start_time);
+        return timeA.unix() - timeB.unix();
+      });
       const nearestSlot = sortedSlots[0];
-      const nearestDate = dayjs__default.default(nearestSlot.start_time);
+      const nearestDate = tz ? dayjs__default.default(nearestSlot.start_time).tz(tz) : dayjs__default.default(nearestSlot.start_time);
       setSelectedDate(nearestDate);
       setCalendarValue(nearestDate);
       setSelectedTimeslotId(nearestSlot.id);
@@ -2225,32 +2239,43 @@ var DateTimePicker = ({
       setCalendarValue(now2);
       setIsInitialized(true);
     }
-  }, [timeslotsData, isInitialized, selectedDate]);
+  }, [timeslotsData, isInitialized, selectedDate, demoRoom?.timezone, timezone2]);
   React9.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__default.default();
+    const now2 = tz ? dayjs__default.default().tz(tz) : dayjs__default.default();
     const availableTimeslots = timeslotsData.timeslots.filter((slot) => {
-      const slotDate = dayjs__default.default(slot.start_time);
+      const slotDate = tz ? dayjs__default.default(slot.start_time).tz(tz) : dayjs__default.default(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__default.default(a.start_time).unix() - dayjs__default.default(b.start_time).unix()
-      );
+      const sortedSlots = [...availableTimeslots].sort((a, b) => {
+        const timeA = tz ? dayjs__default.default(a.start_time).tz(tz) : dayjs__default.default(a.start_time);
+        const timeB = tz ? dayjs__default.default(b.start_time).tz(tz) : dayjs__default.default(b.start_time);
+        return timeA.unix() - timeB.unix();
+      });
       const firstSlot = sortedSlots[0];
-      const firstDate = dayjs__default.default(firstSlot.start_time);
+      const firstDate = tz ? dayjs__default.default(firstSlot.start_time).tz(tz) : dayjs__default.default(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__default.default(slot.start_time).format("h:mm A");
-    const end = dayjs__default.default(slot.end_time).format("h:mm A");
+    const tz = demoRoom?.timezone || timezone2;
+    const start = tz ? dayjs__default.default(slot.start_time).tz(tz).format("h:mm A") : dayjs__default.default(slot.start_time).format("h:mm A");
+    const end = tz ? dayjs__default.default(slot.end_time).tz(tz).format("h:mm A") : dayjs__default.default(slot.end_time).format("h:mm A");
     return `${start} - ${end}`;
   };
   const wrapperStyle = {
@@ -2665,7 +2690,7 @@ var DateTimePicker = ({
         }) }),
         !timeslotsLoading && dayTimeslots?.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-[24px] text-[#6d6d6F] text-center", children: pageData?.timezone?.replace(
           "{{timezone}}",
-          demoRoom?.timezone || timezone || ""
+          demoRoom?.timezone || timezone2 || ""
         ) })
       ] })
     ] }),
@@ -2678,6 +2703,7 @@ var DateTimePicker = ({
           loading: bookingLoading,
           pageData,
           selectedTimeslotId,
+          error: bookingError,
           onSubmit: async (responses) => {
             if (onQuestionnaireSubmit) {
               await onQuestionnaireSubmit(responses);
@@ -8766,7 +8792,7 @@ var BookingForm = ({
   apiConfig,
   demoRoomCode,
   pageData,
-  timezone,
+  timezone: timezone2,
   handleBookingSuccess,
   onQuestionnaireSubmit,
   ...props
@@ -8798,7 +8824,7 @@ var BookingForm = ({
       {
         apiClient,
         demoRoomCode,
-        timezone,
+        timezone: timezone2,
         locale: apiConfig.locale,
         onBookingSuccess: handleBookingSuccess,
         onQuestionnaireSubmit,