@anker-in/ui 0.1.9 → 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
           ] }) })
@@ -384,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">
@@ -1268,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) => {
@@ -1396,7 +1399,10 @@ var RoomsList = ({
                       onSchedule,
                       onMouseEnter: () => setHoveredRoomId(item.id),
                       onMouseLeave: () => setHoveredRoomId(null),
-                      pageData: mergedPageData.studioCard
+                      pageData: {
+                        ...mergedPageData.studioCard,
+                        noAvailableTime: mergedPageData?.noAvailableTime
+                      }
                     },
                     item.id
                   );
@@ -1429,7 +1435,10 @@ var RoomsList = ({
           hoveredLocationId: hoveredRoomId,
           onSchedule,
           mapHeight: "794px",
-          pageData: mergedPageData.map
+          pageData: {
+            ...mergedPageData.map,
+            noAvailableTime: pageData?.noAvailableTime
+          }
         }
       ) })
     ] })
@@ -1644,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 || "";
   };
@@ -1660,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);
@@ -1705,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) => {
@@ -1713,9 +1768,6 @@ var QuestionnaireForm = ({
     const hasError = !!errors[questionId];
     switch (question.type) {
       case "text":
-      case "email":
-      case "tel":
-      case "phone":
         return /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
@@ -1730,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",
@@ -1835,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 }),
@@ -1909,7 +2032,6 @@ var DateTimePicker = ({
   onBookingSuccess
 }) => {
   const { token } = antd.theme.useToken();
-  const [selectMonth, setSelectMonth] = React2.useState("");
   const [selectedDate, setSelectedDate] = React2.useState(null);
   const [calendarValue, setCalendarValue] = React2.useState(dayjs__default.default());
   const [selectedTimeslotId, setSelectedTimeslotId] = React2.useState(
@@ -1934,9 +2056,8 @@ var DateTimePicker = ({
     locale,
     { enabled: !!demoRoomCode && !!demoRoom?.questionnaire_id }
   );
-  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 startDate = calendarValue.startOf("month").format("YYYY-MM-DD");
+  const endDate = calendarValue.endOf("month").format("YYYY-MM-DD");
   const {
     data: timeslotsData,
     loading: timeslotsLoading,
@@ -1992,6 +2113,28 @@ var DateTimePicker = ({
       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");
@@ -2020,8 +2163,13 @@ var DateTimePicker = ({
               }
             }
           },
-          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: `
+          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;
@@ -2114,164 +2262,162 @@ var DateTimePicker = ({
                 display: none !important;
               }
             ` }),
-            /* @__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",
-                    {
-                      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();
-                  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"
+                                    }
+                                  )
                                 }
                               )
                             }
                           )
-                        }
-                      )
-                    ] })
-                  ] });
-                }
-              }
-            )
-          ] })
+                        ] })
+                      ] });
+                    }
+                  }
+                )
+              ]
+            }
+          )
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white p-[24px] rounded-[12px] flex-1", children: [
@@ -2311,7 +2457,7 @@ 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",
               {
@@ -2380,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: [
@@ -2532,7 +2682,7 @@ 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 l:flex l:flex-col items-start", 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(