@anker-in/ui 0.1.8 → 0.1.10

package/dist/index.js

@@ -73,7 +73,10 @@ var StudioCard = ({
     "div",
     {
       ...props,
-      className: cn("p-6 cursor-pointer transition-colors duration-200", className),
+      className: cn(
+        "p-6 cursor-pointer transition-colors duration-200",
+        className
+      ),
       style: {
         backgroundColor: isHovered ? "#f3f4f6" : "transparent",
         ...style
@@ -95,7 +98,7 @@ var StudioCard = ({
             pageData.away
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 mb-3", children: [
+        availableTime && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 mb-3", children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
             "svg",
             {
@@ -149,7 +152,7 @@ var StudioCard = ({
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-gray-600", children: [
-            pageData.available,
+            availableTime === pageData.noAvailableTime ? "" : pageData.available,
             " ",
             availableTime
           ] }) })
@@ -358,18 +361,22 @@ var StudioMap = ({
     validLocations.forEach((location) => {
       const lat = Number(location.lat);
       const lng = Number(location.lng);
+      const svgIcon = {
+        url: `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
+          <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="24" cy="24" r="22" fill="#00000010"/>
+            <circle cx="24" cy="24" r="10" fill="#000000"/>
+            <circle cx="24" cy="24" r="5" fill="#3ADB67"/>
+          </svg>
+        `)}`,
+        scaledSize: { width: 48, height: 48 },
+        anchor: { x: 24, y: 24 }
+      };
       const marker = new google.maps.Marker({
         position: { lat, lng },
         map: googleMapRef.current,
         title: location.name,
-        icon: {
-          path: google.maps.SymbolPath.CIRCLE,
-          scale: 10,
-          fillColor: "#000000",
-          fillOpacity: 1,
-          strokeColor: "#ffffff",
-          strokeWeight: 2
-        }
+        icon: svgIcon
       });
       marker.addListener("click", () => {
         setSelectedLocation(location);
@@ -380,7 +387,7 @@ var StudioMap = ({
                     <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
                       <path d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"/>
                     </svg>
-                    <span style="vertical-align: middle;">${pageData.available} ${location.availableTime}</span>
+                    <span style="vertical-align: middle;"> ${location.availableTime === pageData?.noAvailableTime ? "" : pageData.available} ${location.availableTime}</span>
                   </div>` : ""}
             <div style="margin-bottom: 8px; color: #666;">
               <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
@@ -1081,6 +1088,7 @@ var defaultPageData = {
   title: "Find a Studio Near You",
   loadingText: "Loading demo rooms...",
   errorTitle: "Failed to load demo rooms",
+  machine: "eufymake E1",
   locationFilter: {
     allLocations: "All Locations",
     clear: "Clear",
@@ -1263,13 +1271,13 @@ var RoomsList = ({
         state,
         zipCode: "",
         country,
-        lat: Number(room.latitude) || 34.0522,
-        lng: Number(room.longitude) || -118.2437,
+        lat: Number(room.latitude) || 0,
+        lng: Number(room.longitude) || 0,
         availableTime: nextAvailableTimeslot ? `${nextAvailableTimeslot.start_time}` : mergedPageData.noAvailableTime,
         euifyMakeModel: room?.description
       };
     });
-  }, [demoRooms]);
+  }, [demoRooms, mergedPageData.defaultCountry, mergedPageData.noAvailableTime]);
   const filteredStudioLocations = React2.useMemo(() => {
     if (!selectedLocation) return studioLocations;
     return studioLocations.filter((location) => {
@@ -1351,7 +1359,7 @@ var RoomsList = ({
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex text-[#767880] cursor-not-allowed", children: [
-                "eufymake E1",
+                mergedPageData.machine,
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "svg",
                   {
@@ -1391,7 +1399,10 @@ var RoomsList = ({
                       onSchedule,
                       onMouseEnter: () => setHoveredRoomId(item.id),
                       onMouseLeave: () => setHoveredRoomId(null),
-                      pageData: mergedPageData.studioCard
+                      pageData: {
+                        ...mergedPageData.studioCard,
+                        noAvailableTime: mergedPageData?.noAvailableTime
+                      }
                     },
                     item.id
                   );
@@ -1424,7 +1435,10 @@ var RoomsList = ({
           hoveredLocationId: hoveredRoomId,
           onSchedule,
           mapHeight: "794px",
-          pageData: mergedPageData.map
+          pageData: {
+            ...mergedPageData.map,
+            noAvailableTime: pageData?.noAvailableTime
+          }
         }
       ) })
     ] })
@@ -1639,6 +1653,21 @@ var QuestionnaireForm = ({
   const [errors, setErrors] = React2.useState({});
   const [agreements, setAgreements] = React2.useState({});
   const [agreementError, setAgreementError] = React2.useState("");
+  const [phoneCountryCodes, setPhoneCountryCodes] = React2.useState({});
+  const defaultCountryCodes = [
+    { code: "+1", country: "US/CA" },
+    { code: "+86", country: "CN" },
+    { code: "+44", country: "UK" },
+    { code: "+81", country: "JP" },
+    { code: "+82", country: "KR" },
+    { code: "+65", country: "SG" },
+    { code: "+852", country: "HK" },
+    { code: "+886", country: "TW" },
+    { code: "+61", country: "AU" },
+    { code: "+49", country: "DE" },
+    { code: "+33", country: "FR" }
+  ];
+  const countryCodes = pageData?.countryCodes || defaultCountryCodes;
   const getQuestionId = (question) => {
     return question.id || question.key || "";
   };
@@ -1655,6 +1684,22 @@ var QuestionnaireForm = ({
       });
     }
   };
+  const handleEmailBlur = (questionId, value) => {
+    if (!value) return;
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(value)) {
+      setErrors((prev) => ({
+        ...prev,
+        [questionId]: "Please enter a valid email address"
+      }));
+    }
+  };
+  const handleCountryCodeChange = (questionId, code) => {
+    setPhoneCountryCodes((prev) => ({
+      ...prev,
+      [questionId]: code
+    }));
+  };
   const handleCheckboxChange = (questionId, optionValue, checked) => {
     const currentValues = responses[questionId] || [];
     const newValues = checked ? [...currentValues, optionValue] : currentValues.filter((v) => v !== optionValue);
@@ -1700,7 +1745,22 @@ var QuestionnaireForm = ({
   const handleSubmit = (e) => {
     e.preventDefault();
     if (validateForm()) {
-      onSubmit?.(responses);
+      const finalResponses = { ...responses };
+      questions.forEach((question) => {
+        if (question.type === "tel" || question.type === "phone") {
+          const questionId = getQuestionId(question);
+          const countryCode = phoneCountryCodes[questionId] || "+1";
+          const phoneNumber = responses[questionId];
+          if (phoneNumber) {
+            finalResponses[questionId] = phoneNumber;
+            if (questionId === "phone" || questionId === "customer_phone_number") {
+              finalResponses["phone_code"] = countryCode;
+              finalResponses["customer_phone_code"] = countryCode;
+            }
+          }
+        }
+      });
+      onSubmit?.(finalResponses);
     }
   };
   const renderQuestion = (question) => {
@@ -1708,8 +1768,6 @@ var QuestionnaireForm = ({
     const hasError = !!errors[questionId];
     switch (question.type) {
       case "text":
-      case "email":
-      case "tel":
         return /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
@@ -1724,6 +1782,76 @@ var QuestionnaireForm = ({
             )
           }
         );
+      case "email":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "email",
+            value: responses[questionId] || "",
+            onChange: (e) => handleChange(questionId, e.target.value),
+            onBlur: (e) => handleEmailBlur(questionId, e.target.value),
+            placeholder: question.placeholder,
+            className: cn(
+              "w-full px-4 py-3 rounded-lg border text-base",
+              "focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:border-transparent",
+              hasError ? "border-red-500" : "border-[#E4E5E6]"
+            )
+          }
+        );
+      case "tel":
+      case "phone":
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "select",
+              {
+                value: phoneCountryCodes[questionId] || "+1",
+                onChange: (e) => handleCountryCodeChange(questionId, e.target.value),
+                className: cn(
+                  "appearance-none pl-3 pr-8 py-3 rounded-lg border text-base",
+                  "focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:border-transparent",
+                  "bg-white cursor-pointer w-[80px]",
+                  hasError ? "border-red-500" : "border-[#E4E5E6]"
+                ),
+                children: countryCodes.map((item) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: item.code, children: item.code }, item.code))
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                width: "12",
+                height: "8",
+                viewBox: "0 0 12 8",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    d: "M1 1.5L6 6.5L11 1.5",
+                    stroke: "#9CA3AF",
+                    strokeWidth: "1.5",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round"
+                  }
+                )
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "tel",
+              value: responses[questionId] || "",
+              onChange: (e) => handleChange(questionId, e.target.value),
+              placeholder: question.placeholder,
+              className: cn(
+                "flex-1 px-4 py-3 rounded-lg border text-base",
+                "focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:border-transparent",
+                hasError ? "border-red-500" : "border-[#E4E5E6]"
+              )
+            }
+          )
+        ] });
       case "textarea":
         return /* @__PURE__ */ jsxRuntime.jsx(
           "textarea",
@@ -1829,7 +1957,8 @@ var QuestionnaireForm = ({
             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 mt-1", children: question.description })
+          question.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-sm text-gray-600 mt-1", children: question.description }),
+          question.type === "email" && questionId === "email" && pageData?.emailDescription && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-sm text-gray-600 mt-1", children: pageData.emailDescription })
         ] }),
         renderQuestion(question),
         question.hint && !errors[questionId] && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: question.hint }),
@@ -1903,11 +2032,12 @@ var DateTimePicker = ({
   onBookingSuccess
 }) => {
   const { token } = antd.theme.useToken();
-  const [selectMonth, setSelectMonth] = React2.useState("");
-  const [selectedDate, setSelectedDate] = React2.useState(dayjs__default.default());
+  const [selectedDate, setSelectedDate] = React2.useState(null);
+  const [calendarValue, setCalendarValue] = React2.useState(dayjs__default.default());
   const [selectedTimeslotId, setSelectedTimeslotId] = React2.useState(
     null
   );
+  const [isInitialized, setIsInitialized] = React2.useState(false);
   const {
     createBooking,
     loading: bookingLoading,
@@ -1926,8 +2056,8 @@ var DateTimePicker = ({
     locale,
     { enabled: !!demoRoomCode && !!demoRoom?.questionnaire_id }
   );
-  const startDate = selectedDate.startOf("month").format("YYYY-MM-DD");
-  const endDate = selectedDate.endOf("month").format("YYYY-MM-DD");
+  const startDate = calendarValue.startOf("month").format("YYYY-MM-DD");
+  const endDate = calendarValue.endOf("month").format("YYYY-MM-DD");
   const {
     data: timeslotsData,
     loading: timeslotsLoading,
@@ -1943,30 +2073,81 @@ var DateTimePicker = ({
     { enabled: !!demoRoomCode }
   );
   const dayTimeslots = React2.useMemo(() => {
-    if (!timeslotsData?.timeslots) return [];
+    if (!timeslotsData?.timeslots || !selectedDate) return [];
     const selectedDateStr = selectedDate.format("YYYY-MM-DD");
     return timeslotsData.timeslots.filter((slot) => {
       const slotDate = dayjs__default.default(slot.start_time).format("YYYY-MM-DD");
       return slotDate === selectedDateStr;
     });
   }, [timeslotsData, selectedDate]);
+  const availableDates = React2.useMemo(() => {
+    if (!timeslotsData?.timeslots) return /* @__PURE__ */ new Set();
+    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");
+        dates.add(dateStr);
+      }
+    });
+    return dates;
+  }, [timeslotsData]);
+  React2.useEffect(() => {
+    if (!timeslotsData?.timeslots || isInitialized) return;
+    const now = dayjs__default.default();
+    const availableTimeslots = timeslotsData.timeslots.filter(
+      (slot) => slot.status === "available" && dayjs__default.default(slot.start_time).isAfter(now)
+    );
+    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 nearestSlot = sortedSlots[0];
+      const nearestDate = dayjs__default.default(nearestSlot.start_time);
+      setSelectedDate(nearestDate);
+      setCalendarValue(nearestDate);
+      setSelectedTimeslotId(nearestSlot.id);
+      setIsInitialized(true);
+    } else if (!selectedDate) {
+      setSelectedDate(now);
+      setCalendarValue(now);
+      setIsInitialized(true);
+    }
+  }, [timeslotsData, isInitialized, selectedDate]);
+  React2.useEffect(() => {
+    if (!timeslotsData?.timeslots || !isInitialized) return;
+    if (selectedDate && selectedDate.isSame(calendarValue, "month")) {
+      return;
+    }
+    const currentMonthStart = calendarValue.startOf("month");
+    const currentMonthEnd = calendarValue.endOf("month");
+    const now = dayjs__default.default();
+    const availableTimeslots = timeslotsData.timeslots.filter((slot) => {
+      const slotDate = dayjs__default.default(slot.start_time);
+      return slot.status === "available" && slotDate.isAfter(now) && (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 firstSlot = sortedSlots[0];
+      const firstDate = dayjs__default.default(firstSlot.start_time);
+      setSelectedDate(firstDate);
+      setSelectedTimeslotId(firstSlot.id);
+    }
+  }, [calendarValue, timeslotsData, isInitialized, selectedDate]);
   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");
     return `${start} - ${end}`;
   };
-  const onPanelChange = (value, mode) => {
-    console.log(value.format("YYYY-MM-DD"), mode);
-  };
   const wrapperStyle = {
-    width: 824,
     background: "#fff",
     border: `1px solid ${token.colorBorderSecondary}`,
     borderRadius: token.borderRadiusLG
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[48px] py-[64px] font-bold text-center", children: pageData.scheduleYourVisit }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[48px] l:text-[32px] py-[64px] l:py-[24px] font-bold text-center", children: pageData.scheduleYourVisit }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4 l:flex-col", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         antd.ConfigProvider,
         {
@@ -1982,34 +2163,79 @@ var DateTimePicker = ({
               }
             }
           },
-          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: wrapperStyle, className: "calendar-custom-cell", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+          children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              style: wrapperStyle,
+              className: "calendar-custom-cell w-[calc(824/1920*100vw)] min-l:max-w-[824px] l:w-full",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
               .calendar-custom-cell .ant-picker-cell {
                 padding: 6px !important;
+                text-align: center !important;
+              }
+              .calendar-custom-cell .ant-picker-cell .ant-picker-cell-inner {
+                margin: 0 auto !important;
               }
               .calendar-custom-cell .ant-picker-cell-inner {
-                width: 100px !important;
-                height: 100px !important;
+                width: 38px !important;
+                height: 38px !important;
                 display: flex !important;
                 align-items: center !important;
                 justify-content: center !important;
-                border-radius: 20px !important;
+                border-radius: 8px !important;
                 border: 1px solid #E4E5E6 !important;
+                aspect-ratio: 1 / 1 !important;
+              }
+              @media (min-width: 1024px) and (max-width: 1919px) {
+                .calendar-custom-cell .ant-picker-cell-inner {
+                  width: 54px !important;
+                  height: 54px !important;
+                  border-radius: 12px !important;
+                }
+                .calendar-custom-cell .ant-picker-calendar-date-value {
+                  line-height: 54px !important;
+                }
+              }
+              @media (min-width: 1920px) {
+                .calendar-custom-cell .ant-picker-cell-inner {
+                  width: 100px !important;
+                  height: 100px !important;
+                  border-radius: 20px !important;
+                }
+                .calendar-custom-cell .ant-picker-calendar-date-value {
+                  line-height: 100px !important;
+                }
               }
-              .calendar-custom-cell .ant-picker-cell-selected .ant-picker-cell-inner {
+              .calendar-custom-cell .ant-picker-cell-selected .ant-picker-cell-inner,
+              .calendar-custom-cell .ant-picker-cell-selected:not(.ant-picker-cell-disabled) .ant-picker-cell-inner {
                 background-color: #3ADB67 !important;
                 color: white !important;
                 border-color: #3ADB67 !important;
               }
+              .calendar-custom-cell .ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner {
+                background-color: #3ADB67 !important;
+                color: white !important;
+              }
               .calendar-custom-cell .ant-picker-cell-today .ant-picker-cell-inner {
                 border-color: #3ADB67 !important;
-                border-radius: 20px !important;
+                border-radius: 8px !important;
+              }
+              @media (min-width: 1024px) and (max-width: 1919px) {
+                .calendar-custom-cell .ant-picker-cell-today .ant-picker-cell-inner {
+                  border-radius: 12px !important;
+                }
+              }
+              @media (min-width: 1920px) {
+                .calendar-custom-cell .ant-picker-cell-today .ant-picker-cell-inner {
+                  border-radius: 20px !important;
+                }
               }
               .calendar-custom-cell .ant-picker-cell-today .ant-picker-cell-inner::before {
                 display: none !important;
               }
               .calendar-custom-cell .ant-picker-calendar-date-value {
-                line-height: 100px !important;
+                line-height: 38px !important;
               }
               .calendar-custom-cell .ant-picker-content {
                 width: 100% !important;
@@ -2017,135 +2243,181 @@ var DateTimePicker = ({
               .calendar-custom-cell .ant-picker-content thead tr th {
                 line-height: 48px !important;
               }
+              .calendar-custom-cell .ant-picker-cell-disabled .ant-picker-cell-inner {
+                background-color: #F5F5F5 !important;
+                color: #BDBDBD !important;
+                border-color: #E4E5E6 !important;
+                cursor: not-allowed !important;
+                box-shadow: none !important;
+              }
+              .calendar-custom-cell .ant-picker-cell-disabled:hover .ant-picker-cell-inner {
+                background-color: #F5F5F5 !important;
+                border-color: #E4E5E6 !important;
+                box-shadow: none !important;
+              }
+              .calendar-custom-cell .ant-picker-cell-disabled::before {
+                display: none !important;
+              }
+              .calendar-custom-cell .ant-picker-cell-disabled::after {
+                display: none !important;
+              }
             ` }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              antd.Calendar,
-              {
-                fullscreen: false,
-                value: selectedDate,
-                onChange: (date) => setSelectedDate(date),
-                headerRender: ({ value, onChange }) => {
-                  const year = value.year();
-                  const month = value.month();
-                  const yearOptions = Array.from({ length: 20 }, (_, i) => {
-                    const label = year - 10 + i;
-                    return { label, value: label };
-                  });
-                  const monthOptions = value.localeData().months().map((label, index) => ({
-                    label,
-                    value: index
-                  }));
-                  const monthText = monthOptions?.find((item) => {
-                    return item?.value === month;
-                  });
-                  setSelectMonth(monthText?.label || "");
-                  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-3", children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        antd.Select,
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  antd.Calendar,
+                  {
+                    fullscreen: false,
+                    value: calendarValue,
+                    onSelect: (date) => {
+                      setSelectedDate(date);
+                      setCalendarValue(date);
+                    },
+                    onPanelChange: (date) => {
+                      setCalendarValue(date);
+                    },
+                    disabledDate: (current) => {
+                      if (!current) return false;
+                      if (current.isSame(dayjs__default.default(), "day")) return false;
+                      if (current.isBefore(dayjs__default.default(), "day")) return true;
+                      const dateStr = current.format("YYYY-MM-DD");
+                      return !availableDates.has(dateStr);
+                    },
+                    fullCellRender: (date) => {
+                      const isSelected = selectedDate && date.isSame(selectedDate, "day");
+                      const isToday = date.isSame(dayjs__default.default(), "day");
+                      const dateStr = date.format("YYYY-MM-DD");
+                      const isDisabled = !isToday && (date.isBefore(dayjs__default.default(), "day") || !availableDates.has(dateStr));
+                      return /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
                         {
-                          value: month,
-                          options: monthOptions,
-                          onChange: (newMonth) => {
-                            const now = value.clone().month(newMonth);
-                            onChange(now);
-                          },
-                          variant: "borderless",
-                          className: "text-2xl font-medium",
-                          popupMatchSelectWidth: false,
+                          className: `ant-picker-cell-inner ${isSelected ? "ant-picker-cell-inner-selected" : ""} ${isToday ? "ant-picker-cell-inner-today" : ""}`,
                           style: {
-                            fontSize: "24px",
-                            fontWeight: 500
-                          }
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        antd.Select,
-                        {
-                          value: year,
-                          options: yearOptions,
-                          onChange: (newYear) => {
-                            const now = value.clone().year(newYear);
-                            onChange(now);
+                            backgroundColor: isSelected ? "#3ADB67" : void 0,
+                            color: isSelected ? "white" : isDisabled ? "#BDBDBD" : void 0,
+                            borderColor: isSelected ? "#3ADB67" : isToday ? "#3ADB67" : void 0
                           },
-                          variant: "borderless",
-                          className: "text-2xl font-medium",
-                          popupMatchSelectWidth: false,
-                          style: {
-                            fontSize: "24px",
-                            fontWeight: 500
-                          }
+                          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ant-picker-calendar-date-value", children: date.date() })
                         }
-                      )
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "button",
-                        {
-                          onClick: () => {
-                            const newDate = value.subtract(1, "month");
-                            onChange(newDate);
-                          },
-                          className: "w-10 h-10 flex items-center justify-center hover:bg-gray-100 rounded-lg transition-colors",
-                          children: /* @__PURE__ */ jsxRuntime.jsx(
-                            "svg",
+                      );
+                    },
+                    headerRender: ({ value, onChange }) => {
+                      const year = value.year();
+                      const month = value.month();
+                      const yearOptions = Array.from({ length: 20 }, (_, i) => {
+                        const label = year - 10 + i;
+                        return { label, value: label };
+                      });
+                      const monthOptions = value.localeData().months().map((label, index) => ({
+                        label,
+                        value: index
+                      }));
+                      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-3", children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            antd.Select,
                             {
-                              width: "20",
-                              height: "20",
-                              viewBox: "0 0 20 20",
-                              fill: "none",
-                              xmlns: "http://www.w3.org/2000/svg",
+                              value: month,
+                              options: monthOptions,
+                              onChange: (newMonth) => {
+                                const now = value.clone().month(newMonth);
+                                onChange(now);
+                              },
+                              variant: "borderless",
+                              className: "text-2xl font-medium",
+                              popupMatchSelectWidth: false,
+                              style: {
+                                fontSize: "24px",
+                                fontWeight: 500
+                              }
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            antd.Select,
+                            {
+                              value: year,
+                              options: yearOptions,
+                              onChange: (newYear) => {
+                                const now = value.clone().year(newYear);
+                                onChange(now);
+                              },
+                              variant: "borderless",
+                              className: "text-2xl font-medium",
+                              popupMatchSelectWidth: false,
+                              style: {
+                                fontSize: "24px",
+                                fontWeight: 500
+                              }
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "button",
+                            {
+                              onClick: () => {
+                                const newDate = value.subtract(1, "month");
+                                onChange(newDate);
+                              },
+                              className: "w-10 h-10 flex items-center justify-center hover:bg-gray-100 rounded-lg transition-colors",
                               children: /* @__PURE__ */ jsxRuntime.jsx(
-                                "path",
+                                "svg",
                                 {
-                                  d: "M12 16L6 10L12 4",
-                                  stroke: "currentColor",
-                                  strokeWidth: "2",
-                                  strokeLinecap: "round",
-                                  strokeLinejoin: "round"
+                                  width: "20",
+                                  height: "20",
+                                  viewBox: "0 0 20 20",
+                                  fill: "none",
+                                  xmlns: "http://www.w3.org/2000/svg",
+                                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                                    "path",
+                                    {
+                                      d: "M12 16L6 10L12 4",
+                                      stroke: "currentColor",
+                                      strokeWidth: "2",
+                                      strokeLinecap: "round",
+                                      strokeLinejoin: "round"
+                                    }
+                                  )
                                 }
                               )
                             }
-                          )
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "button",
-                        {
-                          onClick: () => {
-                            const newDate = value.add(1, "month");
-                            onChange(newDate);
-                          },
-                          className: "w-10 h-10 flex items-center justify-center hover:bg-gray-100 rounded-lg transition-colors",
-                          children: /* @__PURE__ */ jsxRuntime.jsx(
-                            "svg",
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "button",
                             {
-                              width: "20",
-                              height: "20",
-                              viewBox: "0 0 20 20",
-                              fill: "none",
-                              xmlns: "http://www.w3.org/2000/svg",
+                              onClick: () => {
+                                const newDate = value.add(1, "month");
+                                onChange(newDate);
+                              },
+                              className: "w-10 h-10 flex items-center justify-center hover:bg-gray-100 rounded-lg transition-colors",
                               children: /* @__PURE__ */ jsxRuntime.jsx(
-                                "path",
+                                "svg",
                                 {
-                                  d: "M8 4L14 10L8 16",
-                                  stroke: "currentColor",
-                                  strokeWidth: "2",
-                                  strokeLinecap: "round",
-                                  strokeLinejoin: "round"
+                                  width: "20",
+                                  height: "20",
+                                  viewBox: "0 0 20 20",
+                                  fill: "none",
+                                  xmlns: "http://www.w3.org/2000/svg",
+                                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                                    "path",
+                                    {
+                                      d: "M8 4L14 10L8 16",
+                                      stroke: "currentColor",
+                                      strokeWidth: "2",
+                                      strokeLinecap: "round",
+                                      strokeLinejoin: "round"
+                                    }
+                                  )
                                 }
                               )
                             }
                           )
-                        }
-                      )
-                    ] })
-                  ] });
-                },
-                onPanelChange
-              }
-            )
-          ] })
+                        ] })
+                      ] });
+                    }
+                  }
+                )
+              ]
+            }
+          )
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white p-[24px] rounded-[12px] flex-1", children: [
@@ -2156,10 +2428,16 @@ var DateTimePicker = ({
               "button",
               {
                 onClick: () => {
-                  const newDate = selectedDate.subtract(1, "day");
-                  setSelectedDate(newDate);
+                  if (selectedDate) {
+                    const newDate = selectedDate.subtract(1, "day");
+                    if (!newDate.isBefore(dayjs__default.default(), "day")) {
+                      setSelectedDate(newDate);
+                      setCalendarValue(newDate);
+                    }
+                  }
                 },
-                className: "w-10 h-10 flex items-center justify-center hover:bg-gray-100 rounded-lg transition-colors",
+                disabled: !selectedDate || selectedDate.isSame(dayjs__default.default(), "day") || selectedDate.isBefore(dayjs__default.default(), "day"),
+                className: "w-10 h-10 flex items-center justify-center hover:bg-gray-100 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
                 children: /* @__PURE__ */ jsxRuntime.jsx(
                   "svg",
                   {
@@ -2179,15 +2457,19 @@ var DateTimePicker = ({
                 )
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: selectMonth }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: selectedDate ? selectedDate.format("MMMM D, YYYY") : "" }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
                 onClick: () => {
-                  const newDate = selectedDate.add(1, "day");
-                  setSelectedDate(newDate);
+                  if (selectedDate) {
+                    const newDate = selectedDate.add(1, "day");
+                    setSelectedDate(newDate);
+                    setCalendarValue(newDate);
+                  }
                 },
-                className: "w-10 h-10 flex items-center justify-center hover:bg-gray-100 rounded-lg transition-colors",
+                disabled: !selectedDate,
+                className: "w-10 h-10 flex items-center justify-center hover:bg-gray-100 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
                 children: /* @__PURE__ */ jsxRuntime.jsx(
                   "svg",
                   {
@@ -2244,7 +2526,11 @@ var DateTimePicker = ({
             },
             slot.id
           );
-        }) })
+        }) }),
+        !timeslotsLoading && dayTimeslots?.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-4 text-right", children: pageData?.timezone?.replace(
+          "{{timezone}}",
+          demoRoom?.timezone || timezone || ""
+        ) })
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-12", children: [
@@ -2365,12 +2651,9 @@ var DemoRoomDetail = ({
     data: demoRoom,
     loading,
     error
-  } = useDemoRoom(
-    apiClient,
-    demoRoomCode || "",
-    locale,
-    { enabled: !!apiClient && !!demoRoomCode }
-  );
+  } = useDemoRoom(apiClient, demoRoomCode || "", locale, {
+    enabled: !!apiClient && !!demoRoomCode
+  });
   const title = demoRoom?.name || titleProp || "Design District Demo Room";
   const descriptions = demoRoom?.description ? [demoRoom.description] : descriptionsProp || defaultDescriptions;
   const devices = demoRoom?.description || devicesProp || "eufyMake E1, eufyMake M5";
@@ -2399,8 +2682,8 @@ var DemoRoomDetail = ({
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm mt-2", children: error.message })
     ] }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-8 items-start", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-8 l:flex l:flex-col items-start py-[24px]", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6 py-[24px]", children: [
       /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-[40px] font-bold text-gray-900 leading-tight", children: title }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: descriptions.map((desc, index) => /* @__PURE__ */ jsxRuntime.jsx(
         "p",
@@ -2527,7 +2810,7 @@ var DemoRoomDetail = ({
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-[400px] rounded-2xl overflow-hidden", children: images.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative l:w-full h-[400px] rounded-2xl overflow-hidden", children: images.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
       react.Swiper,
       {
         ...swiperVersion === "11+" && Navigation && Pagination && Autoplay ? { modules: [Navigation, Pagination, Autoplay] } : {},