@anker-in/ui 0.1.8 → 0.1.9

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-export { D as DemoRoom, a as DemoRoomProps } from './DemoRoom-Dx3PluHP.mjs';
+export { D as DemoRoom, a as DemoRoomProps } from './DemoRoom-YZ2To7p9.mjs';
 import React from 'react';
 export { ThemeProvider, useTheme } from './theme.mjs';
 import { ClassValue } from 'clsx';
@@ -140,7 +140,7 @@ type TimeslotStatus = 'available' | 'full' | 'disabled';
 type DemoRoomType = 'flagship' | 'standard' | 'popup';
 type DemoRoomStatus = 'enabled' | 'disabled';
 type BookingStatus = 'pending' | 'checked_in' | 'completed' | 'cancelled';
-type QuestionType = 'text' | 'email' | 'tel' | 'radio' | 'checkbox' | 'textarea' | 'select';
+type QuestionType = 'text' | 'email' | 'tel' | 'phone' | 'radio' | 'checkbox' | 'textarea' | 'select';
 interface Timeslot {
     id: number;
     start_time: string;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { D as DemoRoom, a as DemoRoomProps } from './DemoRoom-Dx3PluHP.js';
+export { D as DemoRoom, a as DemoRoomProps } from './DemoRoom-YZ2To7p9.js';
 import React from 'react';
 export { ThemeProvider, useTheme } from './theme.js';
 import { ClassValue } from 'clsx';
@@ -140,7 +140,7 @@ type TimeslotStatus = 'available' | 'full' | 'disabled';
 type DemoRoomType = 'flagship' | 'standard' | 'popup';
 type DemoRoomStatus = 'enabled' | 'disabled';
 type BookingStatus = 'pending' | 'checked_in' | 'completed' | 'cancelled';
-type QuestionType = 'text' | 'email' | 'tel' | 'radio' | 'checkbox' | 'textarea' | 'select';
+type QuestionType = 'text' | 'email' | 'tel' | 'phone' | 'radio' | 'checkbox' | 'textarea' | 'select';
 interface Timeslot {
     id: number;
     start_time: string;

package/dist/index.js

@@ -358,18 +358,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);
@@ -1081,6 +1085,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",
@@ -1351,7 +1356,7 @@ var RoomsList = ({
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex text-[#767880] cursor-not-allowed", children: [
-                "eufymake E1",
+                mergedPageData.machine,
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "svg",
                   {
@@ -1710,6 +1715,7 @@ var QuestionnaireForm = ({
       case "text":
       case "email":
       case "tel":
+      case "phone":
         return /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
@@ -1904,10 +1910,12 @@ var DateTimePicker = ({
 }) => {
   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 +1934,9 @@ 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 currentDate = selectedDate || dayjs__default.default();
+  const startDate = currentDate.startOf("month").format("YYYY-MM-DD");
+  const endDate = currentDate.endOf("month").format("YYYY-MM-DD");
   const {
     data: timeslotsData,
     loading: timeslotsLoading,
@@ -1943,30 +1952,59 @@ 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]);
   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 +2020,74 @@ var DateTimePicker = ({
               }
             }
           },
-          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: wrapperStyle, className: "calendar-custom-cell", 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,13 +2095,62 @@ 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),
+                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",
+                    {
+                      className: `ant-picker-cell-inner ${isSelected ? "ant-picker-cell-inner-selected" : ""} ${isToday ? "ant-picker-cell-inner-today" : ""}`,
+                      style: {
+                        backgroundColor: isSelected ? "#3ADB67" : void 0,
+                        color: isSelected ? "white" : isDisabled ? "#BDBDBD" : void 0,
+                        borderColor: isSelected ? "#3ADB67" : isToday ? "#3ADB67" : void 0
+                      },
+                      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ant-picker-calendar-date-value", children: date.date() })
+                    }
+                  );
+                },
                 headerRender: ({ value, onChange }) => {
                   const year = value.year();
                   const month = value.month();
@@ -2141,8 +2268,7 @@ var DateTimePicker = ({
                       )
                     ] })
                   ] });
-                },
-                onPanelChange
+                }
               }
             )
           ] })
@@ -2156,10 +2282,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",
                   {
@@ -2184,10 +2316,14 @@ var DateTimePicker = ({
               "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",
                   {
@@ -2365,12 +2501,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 +2532,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", 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 +2660,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] } : {},