@anker-in/ui 0.1.5 → 0.1.9

package/dist/index.js

@@ -39,7 +39,7 @@ var Title = ({
   title = "",
   ...props
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full"), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[48px] font-semibold mb-12 text-[#080A0F]", children: title }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full"), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[32px] min-l:text-[48px] font-bold mb-12 text-[#080A0F]", children: title }) });
 };
 Title.displayName = "Title";
 var StudioCard = ({
@@ -47,18 +47,18 @@ var StudioCard = ({
   name,
   availableTime,
   address,
-  city,
-  state,
-  zipCode,
-  country = "United States",
   euifyMakeModel,
   distance,
   onSchedule,
+  pageData = {
+    scheduleNow: "Schedule Now",
+    available: "Available",
+    away: "away"
+  },
   className,
   style,
   ...props
 }) => {
-  const fullAddress = `${address}, ${city}, ${state} ${country} ${zipCode}`;
   const [isHovered, setIsHovered] = React2__default.default.useState(false);
   const handleScheduleClick = () => {
     onSchedule?.(code);
@@ -91,7 +91,8 @@ var StudioCard = ({
           /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-semibold text-gray-900", children: name }),
           distance !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-medium text-[#2E8B57] bg-[#E8F5E9] px-3 py-1 rounded-full whitespace-nowrap ml-2", children: [
             formatDistance(distance),
-            " away"
+            " ",
+            pageData.away
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 mb-3", children: [
@@ -148,7 +149,8 @@ var StudioCard = ({
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-gray-600", children: [
-            "Available ",
+            pageData.available,
+            " ",
             availableTime
           ] }) })
         ] }),
@@ -182,7 +184,7 @@ var StudioCard = ({
               ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-600", children: fullAddress }) })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-600 break-words", children: address }) })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 mb-6", children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
@@ -239,10 +241,10 @@ var StudioCard = ({
               "w-full px-6 py-3 rounded-full",
               "bg-white text-gray-900 border border-gray-900",
               "font-medium text-sm",
-              "hover:bg-gray-900",
+              "hover:bg-gray-900 hover:text-white",
               "transition-all duration-200"
             ),
-            children: "Schedule Now"
+            children: pageData.scheduleNow
           }
         )
       ]
@@ -274,6 +276,12 @@ var StudioMap = ({
   defaultZoom = 4,
   mapHeight = "600px",
   onSchedule,
+  pageData = {
+    apiKeyRequired: "Google Maps API Key is required",
+    loadingMap: "Loading map...",
+    scheduleNow: "Schedule Now",
+    available: "Available"
+  },
   className,
   ...props
 }) => {
@@ -350,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);
@@ -372,13 +384,13 @@ 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;">Available ${location.availableTime}</span>
+                    <span style="vertical-align: middle;">${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">
                 <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
               </svg>
-              <span style="vertical-align: middle;">${location.address}, ${location.city}, ${location.state} ${location.country} ${location.zipCode}</span>
+              <span style="vertical-align: middle;">${location.address}</span>
             </div>
             ${location.euifyMakeModel ? `<div style="margin-bottom: 12px; color: #666;">
                     <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
@@ -402,7 +414,7 @@ var StudioMap = ({
               onmouseover="this.style.background='#333'"
               onmouseout="this.style.background='#000'"
             >
-              Schedule Now
+              ${pageData.scheduleNow}
             </button>
           </div>
         `;
@@ -458,13 +470,13 @@ 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;">Available ${location.availableTime}</span>
+                  <span style="vertical-align: middle;">${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">
               <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
             </svg>
-            <span style="vertical-align: middle;">${location.address}, ${location.city}, ${location.state} ${location.country} ${location.zipCode}</span>
+            <span style="vertical-align: middle;">${location.address}</span>
           </div>
           ${location.euifyMakeModel ? `<div style="margin-bottom: 12px; color: #666;">
                   <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
@@ -488,7 +500,7 @@ var StudioMap = ({
             onmouseover="this.style.background='#333'"
             onmouseout="this.style.background='#000'"
           >
-            Schedule Now
+            ${pageData.scheduleNow}
           </button>
         </div>
       `;
@@ -524,7 +536,7 @@ var StudioMap = ({
         ),
         style: { height: mapHeight },
         ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600", children: "Google Maps API Key is required" })
+        children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600", children: pageData.apiKeyRequired })
       }
     );
   }
@@ -537,7 +549,7 @@ var StudioMap = ({
         /* @__PURE__ */ jsxRuntime.jsx("div", { ref: mapRef, style: { height: mapHeight } }),
         !isLoaded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-gray-100", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-block animate-spin rounded-full h-8 w-8 border-4 border-gray-300 border-t-gray-900 mb-2" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600", children: "Loading map..." })
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600", children: pageData.loadingMap })
         ] }) })
       ]
     }
@@ -666,7 +678,14 @@ function useQuestionnaire(client, code, questionnaire_id, locale, options) {
   });
   const enabled = options?.enabled !== false;
   React2.useEffect(() => {
-    if (!enabled || !code || !questionnaire_id) return;
+    if (!enabled || !code || !questionnaire_id) {
+      setState({
+        data: null,
+        loading: false,
+        error: null
+      });
+      return;
+    }
     let cancelled = false;
     const fetchData = async () => {
       setState((prev) => ({ ...prev, loading: true, error: null }));
@@ -822,65 +841,6 @@ var AntdMobileIsolated = ({
 AntdMobileIsolated.displayName = "AntdMobileIsolated";
 
 // src/components/DemoRoom/utils/addressParser.ts
-var KNOWN_COUNTRIES = [
-  "United States",
-  "United Kingdom",
-  "American Samoa",
-  "United Arab Emirates",
-  "Bosnia and Herzegovina",
-  "Trinidad and Tobago",
-  "Saint Kitts and Nevis",
-  "Antigua and Barbuda",
-  "Saint Vincent and the Grenadines",
-  "S\xE3o Tom\xE9 and Pr\xEDncipe",
-  "United States Minor Outlying Islands",
-  "British Virgin Islands",
-  "United States Virgin Islands",
-  "Cayman Islands",
-  "Cook Islands",
-  "Falkland Islands",
-  "Faroe Islands",
-  "Marshall Islands",
-  "Northern Mariana Islands",
-  "Pitcairn Islands",
-  "Solomon Islands",
-  "Turks and Caicos Islands",
-  "Wallis and Futuna"
-];
-function parseAddress(address) {
-  const parts = address.split(",").map((part) => part.trim()).filter(Boolean);
-  let country = "United States";
-  let state = "";
-  let city = "";
-  if (parts.length === 0) {
-    return { country, state, city };
-  }
-  const lastPart = parts[parts.length - 1];
-  const matchedCountry = KNOWN_COUNTRIES.find(
-    (knownCountry) => lastPart.toLowerCase() === knownCountry.toLowerCase()
-  );
-  if (matchedCountry) {
-    country = matchedCountry;
-    if (parts.length >= 2) {
-      state = parts[parts.length - 2].split(" ")[0];
-    }
-    if (parts.length >= 3) {
-      city = parts[parts.length - 3];
-    }
-  } else {
-    if (parts.length >= 2) {
-      state = parts[parts.length - 1].split(" ")[0];
-      city = parts[parts.length - 2];
-    } else if (parts.length === 1) {
-      city = parts[0];
-    }
-  }
-  return {
-    country: country.trim(),
-    state: state.trim(),
-    city: city.trim()
-  };
-}
 function groupByAlphabet(items) {
   const groups = /* @__PURE__ */ new Map();
   items.forEach((item) => {
@@ -907,7 +867,15 @@ var LocationFilter = ({
   locations,
   onSelect,
   visible = false,
-  onClose
+  onClose,
+  pageData = {
+    allLocations: "All Locations",
+    clear: "Clear",
+    country: "Country",
+    state: "State",
+    city: "City",
+    noStudiosFound: "No studios found in this location"
+  }
 }) => {
   const [currentLevel, setCurrentLevel] = React2.useState("country");
   const [selectedCountry, setSelectedCountry] = React2.useState();
@@ -918,7 +886,7 @@ var LocationFilter = ({
     const states = /* @__PURE__ */ new Map();
     const cities = /* @__PURE__ */ new Map();
     locations.forEach((location) => {
-      const { country, state, city } = parseAddress(location.address);
+      const { country, state, city } = location;
       if (country) {
         const existing = countries.get(country);
         countries.set(country, {
@@ -1055,7 +1023,7 @@ var LocationFilter = ({
                       "pb-[4px] transition-colors",
                       currentLevel === "country" ? "text-[#1D1D1F] border-b-2 border-[#2E8B57]" : "text-[#767880]"
                     ),
-                    children: "Country"
+                    children: pageData.country
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -1068,7 +1036,7 @@ var LocationFilter = ({
                       currentLevel === "state" ? "text-[#1D1D1F] border-b-2 border-[#2E8B57]" : "text-[#767880]",
                       !selectedCountry && "opacity-50 cursor-not-allowed"
                     ),
-                    children: "State"
+                    children: pageData.state
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -1081,7 +1049,7 @@ var LocationFilter = ({
                       currentLevel === "city" ? "text-[#1D1D1F] border-b-2 border-[#2E8B57]" : "text-[#767880]",
                       !selectedState && "opacity-50 cursor-not-allowed"
                     ),
-                    children: "City"
+                    children: pageData.city
                   }
                 )
               ] })
@@ -1113,11 +1081,38 @@ var LocationFilter = ({
   );
 };
 LocationFilter.displayName = "LocationFilter";
+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",
+    country: "Country",
+    state: "State",
+    city: "City",
+    noStudiosFound: "No studios found in this location"
+  },
+  studioCard: {
+    scheduleNow: "Schedule Now",
+    available: "Available",
+    away: "away"
+  },
+  map: {
+    apiKeyRequired: "Google Maps API Key is required",
+    loadingMap: "Loading map...",
+    scheduleNow: "Schedule Now",
+    available: "Available"
+  },
+  defaultCountry: "United States",
+  noAvailableTime: "No available time"
+};
 var defaultStudioLocations = [
   {
     id: "1",
     name: "Design District Demo Room",
-    address: "111 8th St",
+    address: "111 8th St, San Francisco, CA, United States",
     city: "San Francisco",
     state: "CA",
     zipCode: "94108",
@@ -1130,7 +1125,7 @@ var defaultStudioLocations = [
   {
     id: "2",
     name: "Brooklyn Creative Studio",
-    address: "456 Broadway",
+    address: "456 Broadway, Brooklyn, NY, United States",
     city: "Brooklyn",
     state: "NY",
     zipCode: "11211",
@@ -1143,7 +1138,7 @@ var defaultStudioLocations = [
   {
     id: "3",
     name: "Austin Innovation Hub",
-    address: "789 Tech Blvd",
+    address: "789 Tech Blvd, Austin, TX, United States",
     city: "Austin",
     state: "TX",
     zipCode: "78701",
@@ -1156,7 +1151,7 @@ var defaultStudioLocations = [
   {
     id: "4",
     name: "Seattle Maker Space",
-    address: "321 Pine St",
+    address: "321 Pine St, Seattle, WA, United States",
     city: "Seattle",
     state: "WA",
     zipCode: "98101",
@@ -1169,7 +1164,7 @@ var defaultStudioLocations = [
   {
     id: "5",
     name: "Chicago Design Center",
-    address: "654 Michigan Ave",
+    address: "654 Michigan Ave, Chicago, IL, United States",
     city: "Chicago",
     state: "IL",
     zipCode: "60611",
@@ -1182,7 +1177,7 @@ var defaultStudioLocations = [
   {
     id: "6",
     name: "Miami Beach Studio",
-    address: "987 Ocean Drive",
+    address: "987 Ocean Drive, Miami Beach, FL, United States",
     city: "Miami Beach",
     state: "FL",
     zipCode: "33139",
@@ -1195,7 +1190,7 @@ var defaultStudioLocations = [
   {
     id: "7",
     name: "Denver Mountain Studio",
-    address: "147 16th St",
+    address: "147 16th St, Denver, CO, United States",
     city: "Denver",
     state: "CO",
     zipCode: "80202",
@@ -1208,7 +1203,7 @@ var defaultStudioLocations = [
   {
     id: "8",
     name: "Los Angeles Creative Lab",
-    address: "258 Main St",
+    address: "258 Main St, Los Angeles, CA, United States",
     city: "Los Angeles",
     state: "CA",
     zipCode: "90012",
@@ -1226,8 +1221,22 @@ var RoomsList = ({
   teamCode,
   brandWebsite,
   onSchedule,
+  pageData,
   ...props
 }) => {
+  const mergedPageData = React2.useMemo(
+    () => ({
+      ...defaultPageData,
+      ...pageData,
+      locationFilter: {
+        ...defaultPageData.locationFilter,
+        ...pageData?.locationFilter
+      },
+      studioCard: { ...defaultPageData.studioCard, ...pageData?.studioCard },
+      map: { ...defaultPageData.map, ...pageData?.map }
+    }),
+    [pageData]
+  );
   const [showLocationFilter, setShowLocationFilter] = React2.useState(false);
   const [selectedLocation, setSelectedLocation] = React2.useState();
   const [hoveredRoomId, setHoveredRoomId] = React2.useState(null);
@@ -1246,18 +1255,22 @@ var RoomsList = ({
       const nextAvailableTimeslot = room?.timeslots?.find(
         (slot) => slot.status === "available"
       );
-      const { country, state, city } = parseAddress(room.address);
+      const country = room.location?.country || mergedPageData.defaultCountry;
+      const state = room.location?.state || "";
+      const city = room.location?.city || "";
+      const addressParts = [room.address, city, state, country].filter(Boolean);
+      const fullAddress = addressParts.join(", ");
       return {
         id: room.code,
         name: room.name,
-        address: room.address,
+        address: fullAddress,
         city,
         state,
         zipCode: "",
         country,
         lat: Number(room.latitude) || 34.0522,
         lng: Number(room.longitude) || -118.2437,
-        availableTime: nextAvailableTimeslot ? `${nextAvailableTimeslot.start_time}` : "No available time",
+        availableTime: nextAvailableTimeslot ? `${nextAvailableTimeslot.start_time}` : mergedPageData.noAvailableTime,
         euifyMakeModel: room?.description
       };
     });
@@ -1265,25 +1278,24 @@ var RoomsList = ({
   const filteredStudioLocations = React2.useMemo(() => {
     if (!selectedLocation) return studioLocations;
     return studioLocations.filter((location) => {
-      const { country, state, city } = parseAddress(location.address);
       if (selectedLocation.city) {
-        return country === selectedLocation.country && state === selectedLocation.state && city === selectedLocation.city;
+        return location.country === selectedLocation.country && location.state === selectedLocation.state && location.city === selectedLocation.city;
       }
       if (selectedLocation.state) {
-        return country === selectedLocation.country && state === selectedLocation.state;
+        return location.country === selectedLocation.country && location.state === selectedLocation.state;
       }
       if (selectedLocation.country) {
-        return country === selectedLocation.country;
+        return location.country === selectedLocation.country;
       }
       return true;
     });
   }, [studioLocations, selectedLocation]);
   const getSelectedLocationName = () => {
-    if (!selectedLocation) return "All Locations";
+    if (!selectedLocation) return mergedPageData.locationFilter.allLocations;
     if (selectedLocation.city) return selectedLocation.city;
     if (selectedLocation.state) return selectedLocation.state;
     if (selectedLocation.country) return selectedLocation.country;
-    return "All Locations";
+    return mergedPageData.locationFilter.allLocations;
   };
   const handleLocationSelect = (selection) => {
     setSelectedLocation(selection);
@@ -1294,17 +1306,17 @@ var RoomsList = ({
   };
   console.log(filteredStudioLocations);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Title, { title: "Find a Studio Near You" }),
-    loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[794px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-medium", children: "Loading demo rooms..." }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Title, { title: mergedPageData.title }),
+    loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[794px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-medium", children: mergedPageData.loadingText }) }) }),
     error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[794px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", style: { color: "#FF4D4D" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-medium", children: "Failed to load demo rooms" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-medium", children: mergedPageData.errorTitle }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm mt-2", children: error.message })
     ] }) }),
     !loading && !error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[794px] gap-4", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: "flex-none relative w-[420px]",
+          className: "flex-none relative w-[420px] l:!w-full",
           style: { height: "794px" },
           children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-[12px] mb-4 bg-white border border-[#E4E5E6] px-[20px] py-[16px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-[40px] font-bold text-[16px] gap-10 flex items-center", children: [
@@ -1340,11 +1352,11 @@ var RoomsList = ({
                 {
                   onClick: handleClearFilter,
                   className: "ml-auto text-[14px] text-[#2E8B57] hover:underline",
-                  children: "Clear"
+                  children: mergedPageData.locationFilter.clear
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex text-[#767880] cursor-not-allowed", children: [
-                "eufymake E1",
+                mergedPageData.machine,
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "svg",
                   {
@@ -1369,7 +1381,7 @@ var RoomsList = ({
               {
                 style: { maxHeight: "706px", overflow: "auto" },
                 className: "rounded-[12px] bg-white border border-[#E4E5E6]",
-                children: filteredStudioLocations.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[200px] text-[#767880]", children: "No studios found in this location" }) : filteredStudioLocations.map((item) => {
+                children: filteredStudioLocations.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[200px] text-[#767880]", children: mergedPageData.locationFilter.noStudiosFound }) : filteredStudioLocations.map((item) => {
                   return /* @__PURE__ */ jsxRuntime.jsx(
                     StudioCard,
                     {
@@ -1383,7 +1395,8 @@ var RoomsList = ({
                       euifyMakeModel: item?.euifyMakeModel || "",
                       onSchedule,
                       onMouseEnter: () => setHoveredRoomId(item.id),
-                      onMouseLeave: () => setHoveredRoomId(null)
+                      onMouseLeave: () => setHoveredRoomId(null),
+                      pageData: mergedPageData.studioCard
                     },
                     item.id
                   );
@@ -1394,25 +1407,29 @@ var RoomsList = ({
               LocationFilter,
               {
                 locations: studioLocations.map((loc) => ({
-                  address: loc.address,
-                  id: loc.id
+                  id: loc.id,
+                  country: loc.country,
+                  state: loc.state,
+                  city: loc.city
                 })),
                 visible: showLocationFilter,
                 onSelect: handleLocationSelect,
-                onClose: () => setShowLocationFilter(false)
+                onClose: () => setShowLocationFilter(false),
+                pageData: mergedPageData.locationFilter
               }
             )
           ]
         }
       ),
-      googleMapsApiKey && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex-1"), children: /* @__PURE__ */ jsxRuntime.jsx(
+      googleMapsApiKey && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex-1 l:!hidden"), children: /* @__PURE__ */ jsxRuntime.jsx(
         StudioMap,
         {
           googleMapsApiKey,
           locations: filteredStudioLocations,
           hoveredLocationId: hoveredRoomId,
           onSchedule,
-          mapHeight: "794px"
+          mapHeight: "794px",
+          pageData: mergedPageData.map
         }
       ) })
     ] })
@@ -1594,6 +1611,7 @@ var DemoRoom = ({
   teamCode,
   brandWebsite,
   onSchedule,
+  pageData,
   ...props
 }) => {
   const apiClient = React2.useMemo(
@@ -1608,7 +1626,8 @@ var DemoRoom = ({
       apiClient,
       teamCode,
       brandWebsite,
-      onSchedule
+      onSchedule,
+      pageData
     }
   ) });
 };
@@ -1617,10 +1636,10 @@ var QuestionnaireForm = ({
   questions,
   onSubmit,
   pageData,
+  selectedTimeslotId,
   loading = false,
   className
 }) => {
-  console.log(pageData);
   const [responses, setResponses] = React2.useState({});
   const [errors, setErrors] = React2.useState({});
   const [agreements, setAgreements] = React2.useState({});
@@ -1696,6 +1715,7 @@ var QuestionnaireForm = ({
       case "text":
       case "email":
       case "tel":
+      case "phone":
         return /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
@@ -1807,7 +1827,7 @@ var QuestionnaireForm = ({
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pb-[80px]", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white rounded-[12px] border border-[#E4E5E6] p-8", children: /* @__PURE__ */ jsxRuntime.jsx("form", { onSubmit: handleSubmit, className: cn("space-y-6", className), children: questions?.map((question) => {
+    questions && questions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white rounded-[12px] border border-[#E4E5E6] p-8", children: /* @__PURE__ */ jsxRuntime.jsx("form", { onSubmit: handleSubmit, className: cn("space-y-6", className), children: questions.map((question) => {
       const questionId = getQuestionId(question);
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "block", children: [
@@ -1822,7 +1842,7 @@ var QuestionnaireForm = ({
         errors[questionId] && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", style: { color: "#FF4D4D" }, children: errors[questionId] })
       ] }, questionId);
     }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center", children: [
+    !!selectedTimeslotId && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center", children: [
       pageData?.agrees && pageData.agrees.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 mt-8", children: [
         pageData.agrees.map((agreeContent, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -1860,7 +1880,7 @@ var QuestionnaireForm = ({
             "focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:ring-offset-2",
             "disabled:opacity-50 disabled:cursor-not-allowed"
           ),
-          children: loading ? "Submitting..." : "Submit Booking"
+          children: loading ? pageData?.submitting || "Submitting..." : pageData?.submit || "Submit Booking"
         }
       )
     ] })
@@ -1873,17 +1893,29 @@ var DateTimePicker = ({
   apiClient,
   demoRoomCode,
   timezone,
-  pageData,
+  pageData = {
+    scheduleYourVisit: "Schedule Your Visit",
+    timeSlot: "Time Slot",
+    loadingTimeSlots: "Loading time slots...",
+    failedToLoadTimeSlots: "Failed to load time slots",
+    noAvailableTimeSlots: "No available time slots for this date",
+    full: "Full",
+    spotsLeft: "spots left",
+    fillOutForm: "Fill out Form",
+    loadingQuestionnaire: "Loading questionnaire...",
+    bookingFailed: "Booking failed"
+  },
   locale,
   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 [showQuestionnaire, setShowQuestionnaire] = React2.useState(false);
+  const [isInitialized, setIsInitialized] = React2.useState(false);
   const {
     createBooking,
     loading: bookingLoading,
@@ -1902,13 +1934,9 @@ var DateTimePicker = ({
     locale,
     { enabled: !!demoRoomCode && !!demoRoom?.questionnaire_id }
   );
-  React2.useEffect(() => {
-    if (questionnaire) {
-      setShowQuestionnaire(true);
-    }
-  }, [questionnaire]);
-  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,
@@ -1924,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: "Schedule Your Visit" }),
-    /* @__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,
         {
@@ -1963,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;
@@ -1998,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();
@@ -2122,8 +2268,7 @@ var DateTimePicker = ({
                       )
                     ] })
                   ] });
-                },
-                onPanelChange
+                }
               }
             )
           ] })
@@ -2131,16 +2276,22 @@ var DateTimePicker = ({
       ),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white p-[24px] rounded-[12px] flex-1", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
-          "Time Slot",
+          pageData.timeSlot,
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "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",
                   {
@@ -2165,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",
                   {
@@ -2190,7 +2345,7 @@ var DateTimePicker = ({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 mt-[40px] gap-4", children: timeslotsLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2 text-center text-[#767880] py-8", children: "Loading time slots..." }) : timeslotsError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2 text-center text-red-600 py-8", children: "Failed to load time slots" }) : dayTimeslots.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2 text-center text-[#767880] py-8", children: "No available time slots for this date" }) : dayTimeslots.map((slot) => {
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 mt-[40px] gap-4", children: timeslotsLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2 text-center text-[#767880] py-8", children: pageData.loadingTimeSlots }) : timeslotsError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2 text-center text-red-600 py-8", children: pageData.failedToLoadTimeSlots }) : dayTimeslots.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2 text-center text-[#767880] py-8", children: pageData.noAvailableTimeSlots }) : dayTimeslots.map((slot) => {
           const isAvailable = slot.status === "available";
           const isFull = slot.status === "full";
           const isSelected = selectedTimeslotId === slot.id;
@@ -2210,14 +2365,16 @@ var DateTimePicker = ({
                     `,
               children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("div", { children: formatTimeslot(slot) }),
-                isFull && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-[#BDBDBD] mt-1", children: "Full" }),
+                isFull && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-[#BDBDBD] mt-1", children: pageData.full }),
                 isAvailable && !isSelected && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-[#767880] mt-1", children: [
                   slot.capacity - slot.booked_count,
-                  " spots left"
+                  " ",
+                  pageData.spotsLeft
                 ] }),
                 isAvailable && isSelected && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-white mt-1", children: [
                   slot.capacity - slot.booked_count,
-                  " spots left"
+                  " ",
+                  pageData.spotsLeft
                 ] })
               ] })
             },
@@ -2226,32 +2383,35 @@ var DateTimePicker = ({
         }) })
       ] })
     ] }),
-    showQuestionnaire && questionnaire && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-12", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[48px] font-bold text-center mb-8", children: "Fill out Form" }),
-      questionnaireLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center text-[#767880] py-8", children: "Loading questionnaire..." }) : /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-12", children: [
+      !!questionnaire?.questions?.length && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[48px] font-bold text-center mb-8", children: pageData.fillOutForm }),
+      questionnaireLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center text-[#767880] py-8", children: pageData.loadingQuestionnaire }) : /* @__PURE__ */ jsxRuntime.jsx(
         QuestionnaireForm,
         {
-          questions: questionnaire.questions,
+          questions: questionnaire?.questions || [],
           loading: bookingLoading,
           pageData,
+          selectedTimeslotId,
           onSubmit: async (responses) => {
             try {
               const customerName = responses.name || responses.customer_name || "";
               const customerEmail = responses.email || responses.customer_email || "";
               const customerPhone = responses.phone || responses.customer_phone_number || "";
               const customerPhoneCode = responses.phone_code || responses.customer_phone_code || "+1";
-              const result = await createBooking({
-                demoroom_code: demoRoomCode,
-                timeslot_id: selectedTimeslotId,
-                questionnaire_id: questionnaire.id,
-                questionnaire_response: responses,
-                customer_name: customerName,
-                customer_email: customerEmail,
-                customer_phone_code: customerPhoneCode,
-                customer_phone_number: customerPhone
-              });
-              if (result && onBookingSuccess) {
-                onBookingSuccess(result?.cancel_token);
+              if (selectedTimeslotId) {
+                const result = await createBooking({
+                  demoroom_code: demoRoomCode,
+                  timeslot_id: selectedTimeslotId,
+                  questionnaire_id: questionnaire?.id,
+                  questionnaire_response: responses,
+                  customer_name: customerName,
+                  customer_email: customerEmail,
+                  customer_phone_code: customerPhoneCode,
+                  customer_phone_number: customerPhone
+                });
+                if (result && onBookingSuccess) {
+                  onBookingSuccess(result?.cancel_token);
+                }
               }
             } catch (error) {
               console.error("Booking creation failed:", error);
@@ -2259,10 +2419,6 @@ var DateTimePicker = ({
           }
         }
       )
-    ] }),
-    bookingError && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-8 p-4 bg-red-50 border border-red-200 rounded-lg text-red-600 max-w-2xl mx-auto", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: "Booking failed" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm mt-1", children: bookingError.message })
     ] })
   ] });
 };
@@ -2332,6 +2488,12 @@ var DemoRoomDetail = ({
   address: addressProp,
   mapsLink,
   images: imagesProp,
+  pageData = {
+    loadingText: "Loading...",
+    errorTitle: "Failed to load demo room details",
+    openInGoogleMaps: "Open in Google Maps",
+    demoRoomImages: "Demo Room Images"
+  },
   className,
   ...props
 }) => {
@@ -2339,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";
@@ -2369,12 +2528,12 @@ var DemoRoomDetail = ({
   }
   if (error && apiClient && demoRoomCode) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center text-red-600 py-8", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-medium", children: "Failed to load demo room details" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-medium", children: pageData.errorTitle }),
       /* @__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",
@@ -2474,7 +2633,7 @@ var DemoRoomDetail = ({
               rel: "noopener noreferrer",
               className: "inline-flex items-center gap-1 text-sm text-blue-600 hover:text-blue-700 mt-1 underline",
               children: [
-                "Open in Google Maps",
+                pageData.openInGoogleMaps,
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "svg",
                   {
@@ -2501,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] } : {},
@@ -2560,7 +2719,7 @@ var DemoRoomDetail = ({
           ]
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-500 text-sm", children: "Demo Room Images" })
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-500 text-sm", children: pageData.demoRoomImages })
     ] }) }) })
   ] }) });
 };
@@ -2579,6 +2738,10 @@ var BookingForm = ({
     () => createDemoRoomApi(apiConfig),
     [apiConfig]
   );
+  const dateTimePickerPageData = React2.useMemo(() => ({
+    ...pageData?.dateTimePicker,
+    ...pageData?.questionnaireForm
+  }), [pageData?.dateTimePicker, pageData?.questionnaireForm]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
       DemoRoomDetail,
@@ -2586,7 +2749,8 @@ var BookingForm = ({
         className: cn("mt-8", layoutClassName),
         apiClient,
         demoRoomCode,
-        locale: apiConfig.locale
+        locale: apiConfig.locale,
+        pageData: pageData?.demoRoomDetail
       }
     ) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-[#f5f5f5]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -2597,7 +2761,7 @@ var BookingForm = ({
         timezone,
         locale: apiConfig.locale,
         onBookingSuccess: handleBookingSuccess,
-        pageData
+        pageData: dateTimePickerPageData
       }
     ) }) })
   ] });
@@ -2609,7 +2773,28 @@ var BookingSuccess = ({
   apiConfig,
   onScheduleAgain,
   onCancelSuccess,
-  className
+  className,
+  pageData = {
+    yourAppointment: "Your Appointment",
+    appointmentCanceled: "This appointment has been canceled.",
+    scheduleAgain: "Schedule again",
+    location: "Location",
+    openInGoogleMaps: "Open in Google Maps \u2197",
+    dateAndTime: "Date and Time",
+    event: "Event",
+    demoRoom: "Demo Room",
+    visitorInfo: "Visitor Info",
+    noPhoneProvided: "No phone provided",
+    cancelAppointment: "Cancel Appointment",
+    cancelDialog: {
+      title: "Are you sure you want to cancel?",
+      description: "You won't be able to restore the schedule.",
+      backButton: "Back",
+      confirmButton: "Cancel Appointment",
+      canceling: "Canceling..."
+    },
+    cancelError: "Failed to cancel appointment. Please try again."
+  }
 }) => {
   const [bookingData, setBookingData] = React2.useState(
     initialBookingData || null
@@ -2639,7 +2824,7 @@ var BookingSuccess = ({
   }, [token, apiConfig, initialBookingData]);
   const handleCancelAppointment = async () => {
     if (!token || !apiConfig) {
-      setCancelError("Unable to cancel: Missing token or API configuration");
+      setCancelError(pageData.cancelError || "Unable to cancel: Missing token or API configuration");
       return;
     }
     setCancelLoading(true);
@@ -2660,7 +2845,7 @@ var BookingSuccess = ({
       }
     } catch (err) {
       console.error("Failed to cancel booking:", err);
-      setCancelError("Failed to cancel appointment. Please try again.");
+      setCancelError(pageData.cancelError || "Failed to cancel appointment. Please try again.");
     } finally {
       setCancelLoading(false);
     }
@@ -2680,21 +2865,21 @@ var BookingSuccess = ({
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `min-h-screen py-12 px-6 ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-3xl mx-auto", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-[40px] font-bold text-gray-900 mb-8", children: "Your Appointment" }),
+    /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-[40px] font-bold text-gray-900 mb-8", children: pageData.yourAppointment }),
     isCancelled && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-lg p-6 mb-8 flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-700", children: "This appointment has been canceled." }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-700", children: pageData.appointmentCanceled }),
       onScheduleAgain && /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           onClick: onScheduleAgain,
           className: "px-6 py-3 bg-black text-white rounded-full font-medium hover:bg-gray-800 transition-colors whitespace-nowrap",
-          children: "Schedule again"
+          children: pageData.scheduleAgain
         }
       )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-8 bg-white px-[48px] py-[32px] rounded-lg", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: "Location" }),
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: pageData.location }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
           bookingData.demoroom_name && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base font-medium text-gray-900", children: bookingData.demoroom_name }),
           bookingData.address && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-600", children: bookingData.address }),
@@ -2705,13 +2890,13 @@ var BookingSuccess = ({
               target: "_blank",
               rel: "noopener noreferrer",
               className: "inline-flex items-center gap-1 text-base text-blue-600 hover:text-blue-700 hover:underline",
-              children: "Open in Google Maps \u2197"
+              children: pageData.openInGoogleMaps
             }
           )
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: "Date and Time" }),
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: pageData.dateAndTime }),
         /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-base text-gray-900", children: [
           bookingData.booking_date,
           bookingData.time_slot && `, ${bookingData.time_slot}`,
@@ -2719,15 +2904,15 @@ var BookingSuccess = ({
         ] })
       ] }),
       bookingData.equipment && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: "Event" }),
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: pageData.event }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-900", children: bookingData.equipment })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: "Demo Room" }),
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: pageData.demoRoom }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-900", children: bookingData.demoroom_code })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: "Visitor Info" }),
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: pageData.visitorInfo }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-900", children: bookingData.customer_name }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-base text-gray-600", children: [
@@ -2753,7 +2938,7 @@ var BookingSuccess = ({
               bookingData.phone_code,
               " ",
               bookingData.phone_number
-            ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: "No phone provided" })
+            ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: pageData.noPhoneProvided })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-base text-gray-600", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -2786,7 +2971,7 @@ var BookingSuccess = ({
           onClick: () => setShowCancelDialog(true),
           disabled: cancelLoading,
           className: "text-[14px] cursor-pointer w-fit rounded-full text-[#080A0F] border border-[#080A0F] px-[20px] py-[10px] leading-[1] hover:bg-gray-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
-          children: "Cancel Appointment"
+          children: pageData.cancelAppointment
         }
       ),
       cancelError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm mt-2", style: { color: "#FF4D4D" }, children: cancelError })
@@ -2842,8 +3027,8 @@ var BookingSuccess = ({
         }
       ) }) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center mb-8", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[18px] font-semibold text-gray-900 mb-2", children: "Are you sure you want to cancel?" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[14px] text-gray-600", children: "You won't be able to restore the schedule." })
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[18px] font-semibold text-gray-900 mb-2", children: pageData.cancelDialog?.title }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[14px] text-gray-600", children: pageData.cancelDialog?.description })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 justify-center", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -2852,7 +3037,7 @@ var BookingSuccess = ({
             onClick: () => setShowCancelDialog(false),
             disabled: cancelLoading,
             className: "px-8 py-3 border-2 border-black rounded-full text-black font-medium hover:bg-gray-50 transition-colors disabled:opacity-50 min-w-[120px]",
-            children: "Back"
+            children: pageData.cancelDialog?.backButton
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -2892,8 +3077,8 @@ var BookingSuccess = ({
                   ]
                 }
               ),
-              "Canceling..."
-            ] }) : "Cancel Appointment"
+              pageData.cancelDialog?.canceling
+            ] }) : pageData.cancelDialog?.confirmButton
           }
         )
       ] })