@anker-in/ui 0.1.4 → 0.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/README.md +162 -37
  2. package/dist/DemoRoom-Dx3PluHP.d.mts +85 -0
  3. package/dist/DemoRoom-Dx3PluHP.d.ts +85 -0
  4. package/dist/demo-room.css +3 -0
  5. package/dist/demo-room.css.map +1 -1
  6. package/dist/demo-room.d.mts +28 -64
  7. package/dist/demo-room.d.ts +28 -64
  8. package/dist/demo-room.js +478 -609
  9. package/dist/demo-room.js.map +1 -1
  10. package/dist/demo-room.mjs +480 -609
  11. package/dist/demo-room.mjs.map +1 -1
  12. package/dist/index.css +3 -0
  13. package/dist/index.css.map +1 -1
  14. package/dist/index.d.mts +118 -42
  15. package/dist/index.d.ts +118 -42
  16. package/dist/index.js +1229 -1312
  17. package/dist/index.js.map +1 -1
  18. package/dist/index.mjs +1231 -1313
  19. package/dist/index.mjs.map +1 -1
  20. package/dist/styles.css +0 -1
  21. package/package.json +1 -1
  22. package/dist/DemoRoom-CZyrsxWe.d.mts +0 -30
  23. package/dist/DemoRoom-CZyrsxWe.d.ts +0 -30
package/dist/index.js CHANGED
@@ -4,18 +4,17 @@ var React2 = require('react');
4
4
  var clsx = require('clsx');
5
5
  var tailwindMerge = require('tailwind-merge');
6
6
  var jsxRuntime = require('react/jsx-runtime');
7
- var headlessUi = require('@anker-in/headless-ui');
8
7
  var IndexBar = require('antd-mobile/es/components/index-bar');
9
8
  var List = require('antd-mobile/es/components/list');
10
9
  require('antd-mobile/es/components/index-bar/index-bar.css');
11
10
  require('antd-mobile/es/components/list/list.css');
12
- var react = require('swiper/react');
13
11
  var dayjs = require('dayjs');
14
12
  require('dayjs/locale/zh-cn');
15
13
  var antd = require('antd');
16
14
  var dayLocaleData = require('dayjs/plugin/localeData');
17
15
  var weekday = require('dayjs/plugin/weekday');
18
16
  var weekOfYear = require('dayjs/plugin/weekOfYear');
17
+ var react = require('swiper/react');
19
18
 
20
19
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
21
20
 
@@ -36,463 +35,66 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
36
35
  function cn(...inputs) {
37
36
  return tailwindMerge.twMerge(clsx.clsx(inputs));
38
37
  }
39
- var defaultTabs = [
40
- { id: "upcoming-events", label: "Upcoming Events" },
41
- { id: "find-demoroom", label: "Find Demoroom" },
42
- { id: "4-easy-steps", label: "4 Easy Steps" },
43
- { id: "faq", label: "FAQ" }
44
- ];
45
- var HelpNav = ({
46
- tabs = defaultTabs,
47
- activeTabId: controlledActiveTabId,
48
- onTabChange,
49
- activeBorderColor = "#3ADB67",
50
- className,
51
- ...props
52
- }) => {
53
- const [internalActiveTabId, setInternalActiveTabId] = React2.useState(
54
- tabs[1]?.id || tabs[0]?.id
55
- );
56
- const activeTabId = controlledActiveTabId ?? internalActiveTabId;
57
- const handleTabClick = (tabId) => {
58
- if (!controlledActiveTabId) {
59
- setInternalActiveTabId(tabId);
60
- }
61
- onTabChange?.(tabId);
62
- };
63
- return /* @__PURE__ */ jsxRuntime.jsx(
64
- "div",
65
- {
66
- className: cn(
67
- "w-full pt-5 flex items-center justify-center gap-8 pb-8",
68
- className
69
- ),
70
- ...props,
71
- children: tabs.map((tab) => {
72
- const isActive = tab.id === activeTabId;
73
- return /* @__PURE__ */ jsxRuntime.jsxs(
74
- "button",
75
- {
76
- onClick: () => handleTabClick(tab.id),
77
- className: cn(
78
- "relative text-[#080A0F]",
79
- "pb-4",
80
- "flex items-center gap-2",
81
- "transition-all duration-200",
82
- "outline-none focus:outline-none"
83
- ),
84
- style: {
85
- fontSize: "18px",
86
- fontWeight: 600,
87
- letterSpacing: "-0.36px",
88
- lineHeight: "25.2px"
89
- },
90
- children: [
91
- tab.label,
92
- isActive && /* @__PURE__ */ jsxRuntime.jsx(
93
- "span",
94
- {
95
- className: "absolute bottom-0 left-0 right-0 h-1 rounded-t",
96
- style: {
97
- backgroundColor: activeBorderColor,
98
- height: "4px"
99
- }
100
- }
101
- )
102
- ]
103
- },
104
- tab.id
105
- );
106
- })
107
- }
108
- );
109
- };
110
- HelpNav.displayName = "HelpNav";
111
- var EventCard = ({
112
- title,
113
- description,
114
- backgroundImage,
115
- aspectRatio,
116
- variant = "medium",
117
- buttons = [],
118
- subtitle,
119
- className,
120
- ...props
121
- }) => {
122
- const isLarge = variant === "large";
123
- const isMedium = variant === "medium";
124
- const isProduct = variant === "product";
125
- return /* @__PURE__ */ jsxRuntime.jsx(
126
- "div",
127
- {
128
- className: cn("rounded-3xl overflow-hidden relative", className),
129
- style: {
130
- backgroundImage: backgroundImage ? `url(${backgroundImage})` : void 0,
131
- backgroundSize: "cover",
132
- backgroundPosition: "center",
133
- aspectRatio
134
- },
135
- ...props,
136
- children: /* @__PURE__ */ jsxRuntime.jsxs(
137
- "div",
138
- {
139
- className: cn(
140
- "relative h-full flex flex-col",
141
- isLarge && "justify-center pl-8",
142
- !isLarge && "justify-end pl-8 pb-8"
143
- ),
144
- children: [
145
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
146
- /* @__PURE__ */ jsxRuntime.jsx(
147
- "h3",
148
- {
149
- className: cn(
150
- "font-semibold mb-3",
151
- isLarge && "text-3xl text-gray-900",
152
- isMedium && "text-2xl text-white",
153
- isProduct && "text-2xl text-gray-900"
154
- ),
155
- children: title
156
- }
157
- ),
158
- subtitle && isProduct && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-600 mb-4", children: subtitle }),
159
- description && /* @__PURE__ */ jsxRuntime.jsx(
160
- "p",
161
- {
162
- className: cn(
163
- "text-sm leading-relaxed",
164
- isMedium && "text-white/90",
165
- (isLarge || isProduct) && "text-gray-600"
166
- ),
167
- children: description
168
- }
169
- )
170
- ] }),
171
- buttons.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-3 mt-6", children: buttons.map((button, index) => /* @__PURE__ */ jsxRuntime.jsx(
172
- "button",
173
- {
174
- onClick: button.onClick,
175
- className: cn(
176
- "px-6 py-3 rounded-full font-medium text-sm transition-all duration-200",
177
- button.variant === "primary" && "bg-gray-900 text-white hover:bg-gray-800",
178
- button.variant === "secondary" && "bg-white text-gray-900 border border-gray-300 hover:bg-gray-50"
179
- ),
180
- children: button.label
181
- },
182
- index
183
- )) })
184
- ]
185
- }
186
- )
187
- }
188
- );
189
- };
190
- EventCard.displayName = "EventCard";
191
38
  var Title = ({
192
39
  title = "",
193
40
  ...props
194
41
  }) => {
195
- 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 }) });
42
+ 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 }) });
196
43
  };
197
44
  Title.displayName = "Title";
198
- var defaultEvents = [
199
- {
200
- variant: "large",
201
- title: "IFA 2025 Event Name Event Name",
202
- description: "Corem ipsum dolor sit amet, consectetur adipiscing elit.",
203
- backgroundImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
204
- buttons: [
205
- {
206
- label: "Schedule Now",
207
- variant: "primary"
208
- }
209
- ],
210
- aspectRatio: "1664 / 640"
211
- },
212
- {
213
- variant: "medium",
214
- title: "Local Event Name Local Event Name Local Event Name",
215
- description: "Norem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.",
216
- backgroundImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
217
- buttons: [
218
- {
219
- label: "Schedule Now",
220
- variant: "primary"
221
- }
222
- ],
223
- aspectRatio: "824 / 640"
224
- },
225
- {
226
- variant: "product",
227
- title: "Anker Prime",
228
- subtitle: "Anker Prime 240W GaN Desktop Charger (4 Ports) Feb. 5th - 16th",
229
- backgroundImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
230
- buttons: [
231
- {
232
- label: "Learn More",
233
- variant: "secondary"
234
- },
235
- {
236
- label: "Shop Now",
237
- variant: "primary"
238
- }
239
- ],
240
- aspectRatio: "824 / 640"
241
- },
242
- {
243
- variant: "medium",
244
- title: "Local Event Name Local Event Name Local Event Name",
245
- description: "Norem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.",
246
- backgroundImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
247
- buttons: [
248
- {
249
- label: "Schedule Now",
250
- variant: "primary"
251
- }
252
- ],
253
- aspectRatio: "824 / 640"
254
- },
255
- {
256
- variant: "product",
257
- title: "Anker Prime",
258
- subtitle: "Anker Prime 240W GaN Desktop Charger (4 Ports) Feb. 5th - 16th",
259
- backgroundImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
260
- buttons: [
261
- {
262
- label: "Learn More",
263
- variant: "secondary"
264
- },
265
- {
266
- label: "Shop Now",
267
- variant: "primary"
268
- }
269
- ],
270
- aspectRatio: "824 / 640"
271
- }
272
- ];
273
- var UpcomingEvents = ({
274
- title = "Upcoming Events",
275
- events = defaultEvents,
276
- showViewMore = true,
277
- onViewMore,
278
- className,
279
- ...props
280
- }) => {
281
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full", className), ...props, children: [
282
- /* @__PURE__ */ jsxRuntime.jsx(Title, { title }),
283
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-6 mb-[64px]", children: events.map((event, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(index === 0 ? "col-span-2" : ""), children: /* @__PURE__ */ jsxRuntime.jsx(EventCard, { ...event }) }, index)) }),
284
- showViewMore && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
285
- "button",
286
- {
287
- onClick: onViewMore,
288
- className: "inline-flex items-center gap-2 text-gray-700 hover:text-gray-900 transition-colors duration-200",
289
- children: [
290
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-bold", children: "View More" }),
291
- /* @__PURE__ */ jsxRuntime.jsx(
292
- "svg",
293
- {
294
- width: "16",
295
- height: "16",
296
- viewBox: "0 0 16 16",
297
- fill: "none",
298
- xmlns: "http://www.w3.org/2000/svg",
299
- className: "transition-transform duration-200 group-hover:translate-y-0.5",
300
- children: /* @__PURE__ */ jsxRuntime.jsx(
301
- "path",
302
- {
303
- d: "M8 3L8 13M8 13L12 9M8 13L4 9",
304
- stroke: "currentColor",
305
- strokeWidth: "2",
306
- strokeLinecap: "round",
307
- strokeLinejoin: "round"
308
- }
309
- )
310
- }
311
- )
312
- ]
313
- }
314
- ) })
315
- ] });
316
- };
317
- UpcomingEvents.displayName = "UpcomingEvents";
318
- var defaultBannerData = {
319
- title: "See it. Touch it. Make it Locally.",
320
- subTitle: "Visit your local studio right around the corner.",
321
- backgroundImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
322
- backgroundImageMobile: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638"
323
- };
324
- var Banner = ({
325
- data = defaultBannerData,
326
- className,
327
- style,
328
- ...props
329
- }) => {
330
- return /* @__PURE__ */ jsxRuntime.jsxs(
331
- "div",
332
- {
333
- className: cn("relative"),
334
- style: { aspectRatio: "1920/480", ...style },
335
- ...props,
336
- children: [
337
- data?.backgroundImage && /* @__PURE__ */ jsxRuntime.jsx(
338
- "img",
339
- {
340
- src: data.backgroundImage,
341
- alt: "",
342
- className: "inset-0 h-full w-full object-cover"
343
- }
344
- ),
345
- /* @__PURE__ */ jsxRuntime.jsxs(
346
- "div",
347
- {
348
- className: cn(
349
- "absolute flex flex-col gap-4 justify-center m-auto top-0 bottom-0 left-0 right-0 z-10",
350
- className
351
- ),
352
- children: [
353
- /* @__PURE__ */ jsxRuntime.jsx(
354
- headlessUi.Text,
355
- {
356
- className: "text-[48px] font-bold text-white leading-[1]",
357
- html: data?.title
358
- }
359
- ),
360
- /* @__PURE__ */ jsxRuntime.jsx(
361
- headlessUi.Text,
362
- {
363
- className: "text-[18px] font-bold text-white leading-[1.4]",
364
- html: data?.subTitle
365
- }
366
- )
367
- ]
368
- }
369
- )
370
- ]
371
- }
372
- );
373
- };
374
- Banner.displayName = "Banner";
375
- var BreadCrumbs = ({
376
- items,
377
- className,
378
- ...props
379
- }) => {
380
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center py-6 gap-1 text-[18px]", className), ...props, children: items?.map((item, i) => {
381
- const isLast = i === items?.length - 1;
382
- return /* @__PURE__ */ jsxRuntime.jsxs(
383
- headlessUi.Link,
384
- {
385
- className: cn(
386
- "flex items-center gap-1 text-[#6D6D6F] no-underline",
387
- isLast && "text-[#080A0F]",
388
- item?.link ? "cursor-pointer" : "cursor-default hover:text-[#080A0F]"
389
- ),
390
- href: item?.link,
391
- children: [
392
- item?.label,
393
- !isLast && /* @__PURE__ */ jsxRuntime.jsx("span", { children: "/" })
394
- ]
395
- },
396
- i
397
- );
398
- }) });
399
- };
400
- BreadCrumbs.displayName = "BreadCrumbs";
401
- var defaultSteps = [
402
- {
403
- stepNumber: 1,
404
- title: 'Find a demo room you would like to visit, and click "Schedule Now"',
405
- description: 'Find a demo room you would like to visit, and click "Schedule Now"',
406
- mapImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638"
407
- },
408
- {
409
- stepNumber: 2,
410
- title: "Fill out the form and confirm your time of visit",
411
- description: "Fill out the form and confirm your time of visit",
412
- mapImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638"
413
- },
414
- {
415
- stepNumber: 3,
416
- title: "Once you arrive at the demo room, scan the QR code to check in",
417
- description: "Once you arrive at the demo room, scan the QR code to check in",
418
- mapImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638"
419
- },
420
- {
421
- stepNumber: 4,
422
- title: "Have fun!",
423
- description: "Have fun!",
424
- mapImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638"
425
- }
426
- ];
427
- var EasySteps = ({
428
- title = "Schedule in 4 Easy Steps",
429
- steps = defaultSteps,
430
- className,
431
- ...props
432
- }) => {
433
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full", className), ...props, children: [
434
- /* @__PURE__ */ jsxRuntime.jsx(Title, { title }),
435
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 md:grid-cols-2 gap-6", children: steps.map((step) => /* @__PURE__ */ jsxRuntime.jsxs(
436
- "div",
437
- {
438
- className: cn(
439
- "bg-white rounded-2xl overflow-hidden",
440
- "border border-gray-200",
441
- "hover:shadow-lg transition-shadow duration-200"
442
- ),
443
- children: [
444
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6 pb-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 mb-3", children: [
445
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-semibold text-gray-900", children: [
446
- "Step ",
447
- step.stepNumber,
448
- ":"
449
- ] }),
450
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-900 font-medium flex-1", children: step.title })
451
- ] }) }),
452
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full aspect-[356/220] bg-gray-100", children: /* @__PURE__ */ jsxRuntime.jsx(
453
- "img",
454
- {
455
- src: step.mapImage,
456
- alt: `Step ${step.stepNumber} - ${step.title}`,
457
- className: "w-full h-full object-cover"
458
- }
459
- ) })
460
- ]
461
- },
462
- step.stepNumber
463
- )) })
464
- ] });
465
- };
466
- EasySteps.displayName = "EasySteps";
467
45
  var StudioCard = ({
468
46
  code,
469
47
  name,
470
48
  availableTime,
471
49
  address,
472
- city,
473
- state,
474
- zipCode,
475
- country = "United States",
476
50
  euifyMakeModel,
51
+ distance,
477
52
  onSchedule,
53
+ pageData = {
54
+ scheduleNow: "Schedule Now",
55
+ available: "Available",
56
+ away: "away"
57
+ },
478
58
  className,
59
+ style,
479
60
  ...props
480
61
  }) => {
481
- const fullAddress = `${address}, ${city}, ${state} ${country} ${zipCode}`;
62
+ const [isHovered, setIsHovered] = React2__default.default.useState(false);
482
63
  const handleScheduleClick = () => {
483
64
  onSchedule?.(code);
484
65
  };
66
+ const formatDistance = (dist) => {
67
+ if (dist < 1) {
68
+ return `${Math.round(dist * 1e3)} m`;
69
+ }
70
+ return `${dist.toFixed(1)} km`;
71
+ };
485
72
  return /* @__PURE__ */ jsxRuntime.jsxs(
486
73
  "div",
487
74
  {
488
- className: cn(
489
- "p-6",
490
- "hover:shadow-lg transition-shadow duration-200",
491
- className
492
- ),
493
75
  ...props,
76
+ className: cn("p-6 cursor-pointer transition-colors duration-200", className),
77
+ style: {
78
+ backgroundColor: isHovered ? "#f3f4f6" : "transparent",
79
+ ...style
80
+ },
81
+ onMouseEnter: (e) => {
82
+ setIsHovered(true);
83
+ props.onMouseEnter?.(e);
84
+ },
85
+ onMouseLeave: (e) => {
86
+ setIsHovered(false);
87
+ props.onMouseLeave?.(e);
88
+ },
494
89
  children: [
495
- /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-semibold text-gray-900 mb-4", children: name }),
90
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between mb-4", children: [
91
+ /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-semibold text-gray-900", children: name }),
92
+ 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: [
93
+ formatDistance(distance),
94
+ " ",
95
+ pageData.away
96
+ ] })
97
+ ] }),
496
98
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 mb-3", children: [
497
99
  /* @__PURE__ */ jsxRuntime.jsxs(
498
100
  "svg",
@@ -547,7 +149,8 @@ var StudioCard = ({
547
149
  }
548
150
  ),
549
151
  /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-gray-600", children: [
550
- "Available ",
152
+ pageData.available,
153
+ " ",
551
154
  availableTime
552
155
  ] }) })
553
156
  ] }),
@@ -581,7 +184,7 @@ var StudioCard = ({
581
184
  ]
582
185
  }
583
186
  ),
584
- /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-600", children: fullAddress }) })
187
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-600 break-words", children: address }) })
585
188
  ] }),
586
189
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 mb-6", children: [
587
190
  /* @__PURE__ */ jsxRuntime.jsxs(
@@ -641,7 +244,7 @@ var StudioCard = ({
641
244
  "hover:bg-gray-900 hover:text-white",
642
245
  "transition-all duration-200"
643
246
  ),
644
- children: "Schedule Now"
247
+ children: pageData.scheduleNow
645
248
  }
646
249
  )
647
250
  ]
@@ -667,11 +270,18 @@ var defaultLocations = [
667
270
  var StudioMap = ({
668
271
  googleMapsApiKey,
669
272
  locations = defaultLocations,
273
+ hoveredLocationId,
670
274
  defaultCenter = { lat: 39.8283, lng: -98.5795 },
671
275
  // US center
672
276
  defaultZoom = 4,
673
277
  mapHeight = "600px",
674
278
  onSchedule,
279
+ pageData = {
280
+ apiKeyRequired: "Google Maps API Key is required",
281
+ loadingMap: "Loading map...",
282
+ scheduleNow: "Schedule Now",
283
+ available: "Available"
284
+ },
675
285
  className,
676
286
  ...props
677
287
  }) => {
@@ -770,13 +380,13 @@ var StudioMap = ({
770
380
  <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
771
381
  <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"/>
772
382
  </svg>
773
- <span style="vertical-align: middle;">Available ${location.availableTime}</span>
383
+ <span style="vertical-align: middle;">${pageData.available} ${location.availableTime}</span>
774
384
  </div>` : ""}
775
385
  <div style="margin-bottom: 8px; color: #666;">
776
386
  <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
777
387
  <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"/>
778
388
  </svg>
779
- <span style="vertical-align: middle;">${location.address}, ${location.city}, ${location.state} ${location.country} ${location.zipCode}</span>
389
+ <span style="vertical-align: middle;">${location.address}</span>
780
390
  </div>
781
391
  ${location.euifyMakeModel ? `<div style="margin-bottom: 12px; color: #666;">
782
392
  <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
@@ -800,7 +410,7 @@ var StudioMap = ({
800
410
  onmouseover="this.style.background='#333'"
801
411
  onmouseout="this.style.background='#000'"
802
412
  >
803
- Schedule Now
413
+ ${pageData.scheduleNow}
804
414
  </button>
805
415
  </div>
806
416
  `;
@@ -815,7 +425,7 @@ var StudioMap = ({
815
425
  if (btn) {
816
426
  btn.addEventListener("click", () => {
817
427
  if (onSchedule) {
818
- onSchedule(location);
428
+ onSchedule(location.id);
819
429
  }
820
430
  });
821
431
  }
@@ -836,6 +446,82 @@ var StudioMap = ({
836
446
  googleMapRef.current.fitBounds(bounds);
837
447
  }
838
448
  }, [isLoaded, locations, onSchedule]);
449
+ React2__default.default.useEffect(() => {
450
+ if (!isLoaded || !googleMapRef.current || !hoveredLocationId) {
451
+ if (!hoveredLocationId && infoWindowRef.current) {
452
+ infoWindowRef.current.close();
453
+ }
454
+ return;
455
+ }
456
+ const location = locations.find((loc) => loc.id === hoveredLocationId);
457
+ const markerIndex = locations.findIndex(
458
+ (loc) => loc.id === hoveredLocationId
459
+ );
460
+ const marker = markersRef.current[markerIndex];
461
+ if (location && marker) {
462
+ const content = `
463
+ <div style="padding: 16px; max-width: 300px; font-family: system-ui, sans-serif;">
464
+ <h3 style="margin: 0 0 12px 0; font-size: 18px; font-weight: 600;">${location.name}</h3>
465
+ ${location.availableTime ? `<div style="margin-bottom: 8px; color: #666;">
466
+ <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
467
+ <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"/>
468
+ </svg>
469
+ <span style="vertical-align: middle;">${pageData.available} ${location.availableTime}</span>
470
+ </div>` : ""}
471
+ <div style="margin-bottom: 8px; color: #666;">
472
+ <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
473
+ <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"/>
474
+ </svg>
475
+ <span style="vertical-align: middle;">${location.address}</span>
476
+ </div>
477
+ ${location.euifyMakeModel ? `<div style="margin-bottom: 12px; color: #666;">
478
+ <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
479
+ <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"/>
480
+ </svg>
481
+ <span style="vertical-align: middle;">${location.euifyMakeModel}</span>
482
+ </div>` : ""}
483
+ <button
484
+ id="schedule-btn-hover-${location.id}"
485
+ style="
486
+ width: 100%;
487
+ padding: 10px 16px;
488
+ background: #000;
489
+ color: #fff;
490
+ border: none;
491
+ border-radius: 6px;
492
+ font-weight: 500;
493
+ cursor: pointer;
494
+ font-size: 14px;
495
+ "
496
+ onmouseover="this.style.background='#333'"
497
+ onmouseout="this.style.background='#000'"
498
+ >
499
+ ${pageData.scheduleNow}
500
+ </button>
501
+ </div>
502
+ `;
503
+ if (infoWindowRef.current) {
504
+ infoWindowRef.current.setContent(content);
505
+ infoWindowRef.current.open(googleMapRef.current, marker);
506
+ google.maps.event.addListenerOnce(
507
+ infoWindowRef.current,
508
+ "domready",
509
+ () => {
510
+ const btn = document.getElementById(
511
+ `schedule-btn-hover-${location.id}`
512
+ );
513
+ if (btn) {
514
+ btn.addEventListener("click", () => {
515
+ if (onSchedule) {
516
+ onSchedule(location.id);
517
+ }
518
+ });
519
+ }
520
+ }
521
+ );
522
+ }
523
+ }
524
+ }, [hoveredLocationId, isLoaded, locations, onSchedule]);
839
525
  if (!googleMapsApiKey) {
840
526
  return /* @__PURE__ */ jsxRuntime.jsx(
841
527
  "div",
@@ -846,7 +532,7 @@ var StudioMap = ({
846
532
  ),
847
533
  style: { height: mapHeight },
848
534
  ...props,
849
- children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600", children: "Google Maps API Key is required" })
535
+ children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600", children: pageData.apiKeyRequired })
850
536
  }
851
537
  );
852
538
  }
@@ -859,7 +545,7 @@ var StudioMap = ({
859
545
  /* @__PURE__ */ jsxRuntime.jsx("div", { ref: mapRef, style: { height: mapHeight } }),
860
546
  !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: [
861
547
  /* @__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" }),
862
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600", children: "Loading map..." })
548
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600", children: pageData.loadingMap })
863
549
  ] }) })
864
550
  ]
865
551
  }
@@ -988,7 +674,14 @@ function useQuestionnaire(client, code, questionnaire_id, locale, options) {
988
674
  });
989
675
  const enabled = options?.enabled !== false;
990
676
  React2.useEffect(() => {
991
- if (!enabled || !code || !questionnaire_id) return;
677
+ if (!enabled || !code || !questionnaire_id) {
678
+ setState({
679
+ data: null,
680
+ loading: false,
681
+ error: null
682
+ });
683
+ return;
684
+ }
992
685
  let cancelled = false;
993
686
  const fetchData = async () => {
994
687
  setState((prev) => ({ ...prev, loading: true, error: null }));
@@ -1144,27 +837,6 @@ var AntdMobileIsolated = ({
1144
837
  AntdMobileIsolated.displayName = "AntdMobileIsolated";
1145
838
 
1146
839
  // src/components/DemoRoom/utils/addressParser.ts
1147
- function parseAddress(address) {
1148
- const parts = address.split(",").map((part) => part.trim());
1149
- let country = "United States";
1150
- let state = "";
1151
- let city = "";
1152
- if (parts.length >= 3) {
1153
- city = parts[1] || "";
1154
- state = parts[2]?.split(" ")[0] || "";
1155
- country = parts[3] || country;
1156
- } else if (parts.length === 2) {
1157
- city = parts[0] || "";
1158
- state = parts[1]?.split(" ")[0] || "";
1159
- } else if (parts.length === 1) {
1160
- city = parts[0] || "";
1161
- }
1162
- return {
1163
- country: country.trim(),
1164
- state: state.trim(),
1165
- city: city.trim()
1166
- };
1167
- }
1168
840
  function groupByAlphabet(items) {
1169
841
  const groups = /* @__PURE__ */ new Map();
1170
842
  items.forEach((item) => {
@@ -1191,7 +863,15 @@ var LocationFilter = ({
1191
863
  locations,
1192
864
  onSelect,
1193
865
  visible = false,
1194
- onClose
866
+ onClose,
867
+ pageData = {
868
+ allLocations: "All Locations",
869
+ clear: "Clear",
870
+ country: "Country",
871
+ state: "State",
872
+ city: "City",
873
+ noStudiosFound: "No studios found in this location"
874
+ }
1195
875
  }) => {
1196
876
  const [currentLevel, setCurrentLevel] = React2.useState("country");
1197
877
  const [selectedCountry, setSelectedCountry] = React2.useState();
@@ -1202,7 +882,7 @@ var LocationFilter = ({
1202
882
  const states = /* @__PURE__ */ new Map();
1203
883
  const cities = /* @__PURE__ */ new Map();
1204
884
  locations.forEach((location) => {
1205
- const { country, state, city } = parseAddress(location.address);
885
+ const { country, state, city } = location;
1206
886
  if (country) {
1207
887
  const existing = countries.get(country);
1208
888
  countries.set(country, {
@@ -1245,9 +925,7 @@ var LocationFilter = ({
1245
925
  items = locationData.countries;
1246
926
  break;
1247
927
  case "state":
1248
- items = selectedCountry ? locationData.states.filter(
1249
- (s) => s.parentCode === selectedCountry
1250
- ) : [];
928
+ items = selectedCountry ? locationData.states.filter((s) => s.parentCode === selectedCountry) : [];
1251
929
  break;
1252
930
  case "city":
1253
931
  items = selectedState ? locationData.cities.filter((c) => c.parentCode === selectedState) : [];
@@ -1264,6 +942,7 @@ var LocationFilter = ({
1264
942
  () => groupByAlphabet(filteredItems),
1265
943
  [filteredItems]
1266
944
  );
945
+ const showIndexBar = filteredItems.length >= 10;
1267
946
  const handleItemClick = (item) => {
1268
947
  if (currentLevel === "country") {
1269
948
  setSelectedCountry(item.code);
@@ -1307,42 +986,30 @@ var LocationFilter = ({
1307
986
  style: { background: "#F8F8F8" },
1308
987
  className: "rounded-[12px] rounded-b-none h-[72px] font-bold text-[14px] flex flex-col",
1309
988
  children: [
1310
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-[20px] pt-[12px] pb-[8px]", children: [
1311
- /* @__PURE__ */ jsxRuntime.jsx(
1312
- "input",
1313
- {
1314
- type: "text",
1315
- placeholder: "Please enter the search city",
1316
- value: searchQuery,
1317
- onChange: (e) => setSearchQuery(e.target.value),
1318
- className: "flex-1 h-[32px] px-[12px] rounded-[6px] border border-[#E4E5E6] text-[14px] outline-none focus:border-[#2E8B57]"
1319
- }
1320
- ),
1321
- /* @__PURE__ */ jsxRuntime.jsx(
1322
- "button",
1323
- {
1324
- onClick: onClose,
1325
- className: "ml-[12px] w-[24px] h-[24px] flex items-center justify-center",
1326
- children: /* @__PURE__ */ jsxRuntime.jsx(
1327
- "svg",
1328
- {
1329
- xmlns: "http://www.w3.org/2000/svg",
1330
- width: "24",
1331
- height: "24",
1332
- viewBox: "0 0 24 24",
1333
- fill: "none",
1334
- children: /* @__PURE__ */ jsxRuntime.jsx(
1335
- "path",
1336
- {
1337
- d: "M6.4 19L5 17.6L10.6 12L5 6.4L6.4 5L12 10.6L17.6 5L19 6.4L13.4 12L19 17.6L17.6 19L12 13.4L6.4 19Z",
1338
- fill: "#1D1D1F"
1339
- }
1340
- )
1341
- }
1342
- )
1343
- }
1344
- )
1345
- ] }),
989
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-end px-[20px] pt-[12px] pb-[8px]", children: /* @__PURE__ */ jsxRuntime.jsx(
990
+ "button",
991
+ {
992
+ onClick: onClose,
993
+ className: "ml-[12px] w-[24px] h-[24px] flex items-center justify-end",
994
+ children: /* @__PURE__ */ jsxRuntime.jsx(
995
+ "svg",
996
+ {
997
+ xmlns: "http://www.w3.org/2000/svg",
998
+ width: "24",
999
+ height: "24",
1000
+ viewBox: "0 0 24 24",
1001
+ fill: "none",
1002
+ children: /* @__PURE__ */ jsxRuntime.jsx(
1003
+ "path",
1004
+ {
1005
+ d: "M6.4 19L5 17.6L10.6 12L5 6.4L6.4 5L12 10.6L17.6 5L19 6.4L13.4 12L19 17.6L17.6 19L12 13.4L6.4 19Z",
1006
+ fill: "#1D1D1F"
1007
+ }
1008
+ )
1009
+ }
1010
+ )
1011
+ }
1012
+ ) }),
1346
1013
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center px-[20px] gap-[16px] pb-[8px]", children: [
1347
1014
  /* @__PURE__ */ jsxRuntime.jsx(
1348
1015
  "button",
@@ -1352,7 +1019,7 @@ var LocationFilter = ({
1352
1019
  "pb-[4px] transition-colors",
1353
1020
  currentLevel === "country" ? "text-[#1D1D1F] border-b-2 border-[#2E8B57]" : "text-[#767880]"
1354
1021
  ),
1355
- children: "Country"
1022
+ children: pageData.country
1356
1023
  }
1357
1024
  ),
1358
1025
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -1365,7 +1032,7 @@ var LocationFilter = ({
1365
1032
  currentLevel === "state" ? "text-[#1D1D1F] border-b-2 border-[#2E8B57]" : "text-[#767880]",
1366
1033
  !selectedCountry && "opacity-50 cursor-not-allowed"
1367
1034
  ),
1368
- children: "State"
1035
+ children: pageData.state
1369
1036
  }
1370
1037
  ),
1371
1038
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -1378,55 +1045,69 @@ var LocationFilter = ({
1378
1045
  currentLevel === "city" ? "text-[#1D1D1F] border-b-2 border-[#2E8B57]" : "text-[#767880]",
1379
1046
  !selectedState && "opacity-50 cursor-not-allowed"
1380
1047
  ),
1381
- children: "City"
1048
+ children: pageData.city
1382
1049
  }
1383
1050
  )
1384
1051
  ] })
1385
1052
  ]
1386
1053
  }
1387
1054
  ),
1388
- /* @__PURE__ */ jsxRuntime.jsx(AntdMobileIsolated, { style: { height: "calc(100% - 72px)" }, children: /* @__PURE__ */ jsxRuntime.jsx(IndexBar__default.default, { style: { height: "100%" }, children: groupedItems.map((group) => {
1055
+ /* @__PURE__ */ jsxRuntime.jsx(AntdMobileIsolated, { style: { height: "calc(100% - 72px)" }, children: showIndexBar ? /* @__PURE__ */ jsxRuntime.jsx(IndexBar__default.default, { style: { height: "100%" }, children: groupedItems.map((group) => {
1389
1056
  const { title, items } = group;
1390
1057
  return /* @__PURE__ */ jsxRuntime.jsx(IndexBar__default.default.Panel, { index: title, title, children: /* @__PURE__ */ jsxRuntime.jsx(List__default.default, { children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
1391
1058
  List__default.default.Item,
1392
1059
  {
1393
- clickable: true,
1394
1060
  onClick: () => handleItemClick(item),
1395
- extra: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[8px]", children: [
1396
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[#767880] text-[14px]", children: item.count }),
1397
- /* @__PURE__ */ jsxRuntime.jsx(
1398
- "svg",
1399
- {
1400
- xmlns: "http://www.w3.org/2000/svg",
1401
- width: "16",
1402
- height: "16",
1403
- viewBox: "0 0 16 16",
1404
- fill: "none",
1405
- children: /* @__PURE__ */ jsxRuntime.jsx(
1406
- "path",
1407
- {
1408
- d: "M6.4 12L5.6 11.2L9.06667 7.73333L5.6 4.26667L6.4 3.46667L10.6667 7.73333L6.4 12Z",
1409
- fill: "#767880"
1410
- }
1411
- )
1412
- }
1413
- )
1414
- ] }),
1061
+ style: { cursor: "pointer" },
1415
1062
  children: item.name
1416
1063
  },
1417
1064
  item.code
1418
1065
  )) }) }, title);
1419
- }) }) })
1066
+ }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: "100%", overflow: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsx(List__default.default, { children: filteredItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
1067
+ List__default.default.Item,
1068
+ {
1069
+ onClick: () => handleItemClick(item),
1070
+ style: { cursor: "pointer" },
1071
+ children: item.name
1072
+ },
1073
+ item.code
1074
+ )) }) }) })
1420
1075
  ]
1421
1076
  }
1422
1077
  );
1423
1078
  };
1424
1079
  LocationFilter.displayName = "LocationFilter";
1425
- var defaultStudioLocations = [
1426
- {
1080
+ var defaultPageData = {
1081
+ title: "Find a Studio Near You",
1082
+ loadingText: "Loading demo rooms...",
1083
+ errorTitle: "Failed to load demo rooms",
1084
+ locationFilter: {
1085
+ allLocations: "All Locations",
1086
+ clear: "Clear",
1087
+ country: "Country",
1088
+ state: "State",
1089
+ city: "City",
1090
+ noStudiosFound: "No studios found in this location"
1091
+ },
1092
+ studioCard: {
1093
+ scheduleNow: "Schedule Now",
1094
+ available: "Available",
1095
+ away: "away"
1096
+ },
1097
+ map: {
1098
+ apiKeyRequired: "Google Maps API Key is required",
1099
+ loadingMap: "Loading map...",
1100
+ scheduleNow: "Schedule Now",
1101
+ available: "Available"
1102
+ },
1103
+ defaultCountry: "United States",
1104
+ noAvailableTime: "No available time"
1105
+ };
1106
+ var defaultStudioLocations = [
1107
+ {
1427
1108
  id: "1",
1428
1109
  name: "Design District Demo Room",
1429
- address: "111 8th St",
1110
+ address: "111 8th St, San Francisco, CA, United States",
1430
1111
  city: "San Francisco",
1431
1112
  state: "CA",
1432
1113
  zipCode: "94108",
@@ -1439,7 +1120,7 @@ var defaultStudioLocations = [
1439
1120
  {
1440
1121
  id: "2",
1441
1122
  name: "Brooklyn Creative Studio",
1442
- address: "456 Broadway",
1123
+ address: "456 Broadway, Brooklyn, NY, United States",
1443
1124
  city: "Brooklyn",
1444
1125
  state: "NY",
1445
1126
  zipCode: "11211",
@@ -1452,7 +1133,7 @@ var defaultStudioLocations = [
1452
1133
  {
1453
1134
  id: "3",
1454
1135
  name: "Austin Innovation Hub",
1455
- address: "789 Tech Blvd",
1136
+ address: "789 Tech Blvd, Austin, TX, United States",
1456
1137
  city: "Austin",
1457
1138
  state: "TX",
1458
1139
  zipCode: "78701",
@@ -1465,7 +1146,7 @@ var defaultStudioLocations = [
1465
1146
  {
1466
1147
  id: "4",
1467
1148
  name: "Seattle Maker Space",
1468
- address: "321 Pine St",
1149
+ address: "321 Pine St, Seattle, WA, United States",
1469
1150
  city: "Seattle",
1470
1151
  state: "WA",
1471
1152
  zipCode: "98101",
@@ -1478,7 +1159,7 @@ var defaultStudioLocations = [
1478
1159
  {
1479
1160
  id: "5",
1480
1161
  name: "Chicago Design Center",
1481
- address: "654 Michigan Ave",
1162
+ address: "654 Michigan Ave, Chicago, IL, United States",
1482
1163
  city: "Chicago",
1483
1164
  state: "IL",
1484
1165
  zipCode: "60611",
@@ -1491,7 +1172,7 @@ var defaultStudioLocations = [
1491
1172
  {
1492
1173
  id: "6",
1493
1174
  name: "Miami Beach Studio",
1494
- address: "987 Ocean Drive",
1175
+ address: "987 Ocean Drive, Miami Beach, FL, United States",
1495
1176
  city: "Miami Beach",
1496
1177
  state: "FL",
1497
1178
  zipCode: "33139",
@@ -1504,7 +1185,7 @@ var defaultStudioLocations = [
1504
1185
  {
1505
1186
  id: "7",
1506
1187
  name: "Denver Mountain Studio",
1507
- address: "147 16th St",
1188
+ address: "147 16th St, Denver, CO, United States",
1508
1189
  city: "Denver",
1509
1190
  state: "CO",
1510
1191
  zipCode: "80202",
@@ -1517,7 +1198,7 @@ var defaultStudioLocations = [
1517
1198
  {
1518
1199
  id: "8",
1519
1200
  name: "Los Angeles Creative Lab",
1520
- address: "258 Main St",
1201
+ address: "258 Main St, Los Angeles, CA, United States",
1521
1202
  city: "Los Angeles",
1522
1203
  state: "CA",
1523
1204
  zipCode: "90012",
@@ -1535,10 +1216,25 @@ var RoomsList = ({
1535
1216
  teamCode,
1536
1217
  brandWebsite,
1537
1218
  onSchedule,
1219
+ pageData,
1538
1220
  ...props
1539
1221
  }) => {
1222
+ const mergedPageData = React2.useMemo(
1223
+ () => ({
1224
+ ...defaultPageData,
1225
+ ...pageData,
1226
+ locationFilter: {
1227
+ ...defaultPageData.locationFilter,
1228
+ ...pageData?.locationFilter
1229
+ },
1230
+ studioCard: { ...defaultPageData.studioCard, ...pageData?.studioCard },
1231
+ map: { ...defaultPageData.map, ...pageData?.map }
1232
+ }),
1233
+ [pageData]
1234
+ );
1540
1235
  const [showLocationFilter, setShowLocationFilter] = React2.useState(false);
1541
1236
  const [selectedLocation, setSelectedLocation] = React2.useState();
1237
+ const [hoveredRoomId, setHoveredRoomId] = React2.useState(null);
1542
1238
  const {
1543
1239
  data: demoRooms,
1544
1240
  loading,
@@ -1551,37 +1247,25 @@ var RoomsList = ({
1551
1247
  const studioLocations = React2.useMemo(() => {
1552
1248
  if (!demoRooms) return defaultStudioLocations;
1553
1249
  return demoRooms.map((room) => {
1554
- const timeslots = [
1555
- {
1556
- id: 130,
1557
- start_time: "2026-01-13T09:00:00-05:00",
1558
- end_time: "2026-01-13T10:00:00-05:00",
1559
- capacity: 5,
1560
- booked_count: 2,
1561
- status: "available"
1562
- },
1563
- {
1564
- id: 131,
1565
- start_time: "2026-01-13T14:00:00-05:00",
1566
- end_time: "2026-01-13T15:00:00-05:00",
1567
- capacity: 5,
1568
- booked_count: 5,
1569
- status: "full"
1570
- }
1571
- ];
1572
- const nextAvailableTimeslot = (room.timeslots?.length ? room.timeslots : timeslots)?.find((slot) => slot.status === "available");
1573
- const { country, state, city } = parseAddress(room.address);
1250
+ const nextAvailableTimeslot = room?.timeslots?.find(
1251
+ (slot) => slot.status === "available"
1252
+ );
1253
+ const country = room.location?.country || mergedPageData.defaultCountry;
1254
+ const state = room.location?.state || "";
1255
+ const city = room.location?.city || "";
1256
+ const addressParts = [room.address, city, state, country].filter(Boolean);
1257
+ const fullAddress = addressParts.join(", ");
1574
1258
  return {
1575
1259
  id: room.code,
1576
1260
  name: room.name,
1577
- address: room.address,
1261
+ address: fullAddress,
1578
1262
  city,
1579
1263
  state,
1580
1264
  zipCode: "",
1581
1265
  country,
1582
1266
  lat: Number(room.latitude) || 34.0522,
1583
1267
  lng: Number(room.longitude) || -118.2437,
1584
- availableTime: nextAvailableTimeslot ? `${nextAvailableTimeslot.start_time}` : "No available time",
1268
+ availableTime: nextAvailableTimeslot ? `${nextAvailableTimeslot.start_time}` : mergedPageData.noAvailableTime,
1585
1269
  euifyMakeModel: room?.description
1586
1270
  };
1587
1271
  });
@@ -1589,25 +1273,24 @@ var RoomsList = ({
1589
1273
  const filteredStudioLocations = React2.useMemo(() => {
1590
1274
  if (!selectedLocation) return studioLocations;
1591
1275
  return studioLocations.filter((location) => {
1592
- const { country, state, city } = parseAddress(location.address);
1593
1276
  if (selectedLocation.city) {
1594
- return country === selectedLocation.country && state === selectedLocation.state && city === selectedLocation.city;
1277
+ return location.country === selectedLocation.country && location.state === selectedLocation.state && location.city === selectedLocation.city;
1595
1278
  }
1596
1279
  if (selectedLocation.state) {
1597
- return country === selectedLocation.country && state === selectedLocation.state;
1280
+ return location.country === selectedLocation.country && location.state === selectedLocation.state;
1598
1281
  }
1599
1282
  if (selectedLocation.country) {
1600
- return country === selectedLocation.country;
1283
+ return location.country === selectedLocation.country;
1601
1284
  }
1602
1285
  return true;
1603
1286
  });
1604
1287
  }, [studioLocations, selectedLocation]);
1605
1288
  const getSelectedLocationName = () => {
1606
- if (!selectedLocation) return "All Locations";
1289
+ if (!selectedLocation) return mergedPageData.locationFilter.allLocations;
1607
1290
  if (selectedLocation.city) return selectedLocation.city;
1608
1291
  if (selectedLocation.state) return selectedLocation.state;
1609
1292
  if (selectedLocation.country) return selectedLocation.country;
1610
- return "All Locations";
1293
+ return mergedPageData.locationFilter.allLocations;
1611
1294
  };
1612
1295
  const handleLocationSelect = (selection) => {
1613
1296
  setSelectedLocation(selection);
@@ -1618,20 +1301,20 @@ var RoomsList = ({
1618
1301
  };
1619
1302
  console.log(filteredStudioLocations);
1620
1303
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, ...props, children: [
1621
- /* @__PURE__ */ jsxRuntime.jsx(Title, { title: "Find a Studio Near You" }),
1622
- 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..." }) }) }),
1623
- error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[794px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center text-red-600", children: [
1624
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-medium", children: "Failed to load demo rooms" }),
1304
+ /* @__PURE__ */ jsxRuntime.jsx(Title, { title: mergedPageData.title }),
1305
+ 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 }) }) }),
1306
+ 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: [
1307
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-medium", children: mergedPageData.errorTitle }),
1625
1308
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm mt-2", children: error.message })
1626
1309
  ] }) }),
1627
- !loading && !error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[794px] overflow-auto gap-4", children: [
1310
+ !loading && !error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[794px] gap-4", children: [
1628
1311
  /* @__PURE__ */ jsxRuntime.jsxs(
1629
1312
  "div",
1630
1313
  {
1631
- className: "flex-none relative w-[420px]",
1314
+ className: "flex-none relative w-[420px] l:!w-full",
1632
1315
  style: { height: "794px" },
1633
1316
  children: [
1634
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-[12px] items-center h-[72px] mb-4 font-bold text-[16px] gap-10 flex bg-white border border-[#E4E5E6] px-[20px] py-[16px]", children: [
1317
+ /* @__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: [
1635
1318
  /* @__PURE__ */ jsxRuntime.jsxs(
1636
1319
  "button",
1637
1320
  {
@@ -1664,7 +1347,7 @@ var RoomsList = ({
1664
1347
  {
1665
1348
  onClick: handleClearFilter,
1666
1349
  className: "ml-auto text-[14px] text-[#2E8B57] hover:underline",
1667
- children: "Clear"
1350
+ children: mergedPageData.locationFilter.clear
1668
1351
  }
1669
1352
  ),
1670
1353
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex text-[#767880] cursor-not-allowed", children: [
@@ -1687,13 +1370,13 @@ var RoomsList = ({
1687
1370
  }
1688
1371
  )
1689
1372
  ] })
1690
- ] }),
1373
+ ] }) }),
1691
1374
  /* @__PURE__ */ jsxRuntime.jsx(
1692
1375
  "div",
1693
1376
  {
1694
1377
  style: { maxHeight: "706px", overflow: "auto" },
1695
1378
  className: "rounded-[12px] bg-white border border-[#E4E5E6]",
1696
- 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) => {
1379
+ 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) => {
1697
1380
  return /* @__PURE__ */ jsxRuntime.jsx(
1698
1381
  StudioCard,
1699
1382
  {
@@ -1705,7 +1388,10 @@ var RoomsList = ({
1705
1388
  state: item?.state,
1706
1389
  zipCode: item?.zipCode,
1707
1390
  euifyMakeModel: item?.euifyMakeModel || "",
1708
- onSchedule
1391
+ onSchedule,
1392
+ onMouseEnter: () => setHoveredRoomId(item.id),
1393
+ onMouseLeave: () => setHoveredRoomId(null),
1394
+ pageData: mergedPageData.studioCard
1709
1395
  },
1710
1396
  item.id
1711
1397
  );
@@ -1716,26 +1402,29 @@ var RoomsList = ({
1716
1402
  LocationFilter,
1717
1403
  {
1718
1404
  locations: studioLocations.map((loc) => ({
1719
- address: loc.address,
1720
- id: loc.id
1405
+ id: loc.id,
1406
+ country: loc.country,
1407
+ state: loc.state,
1408
+ city: loc.city
1721
1409
  })),
1722
1410
  visible: showLocationFilter,
1723
1411
  onSelect: handleLocationSelect,
1724
- onClose: () => setShowLocationFilter(false)
1412
+ onClose: () => setShowLocationFilter(false),
1413
+ pageData: mergedPageData.locationFilter
1725
1414
  }
1726
1415
  )
1727
1416
  ]
1728
1417
  }
1729
1418
  ),
1730
- googleMapsApiKey && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex-1"), children: /* @__PURE__ */ jsxRuntime.jsx(
1419
+ googleMapsApiKey && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex-1 l:!hidden"), children: /* @__PURE__ */ jsxRuntime.jsx(
1731
1420
  StudioMap,
1732
1421
  {
1733
1422
  googleMapsApiKey,
1734
1423
  locations: filteredStudioLocations,
1735
- onSchedule: () => {
1736
- console.log(111);
1737
- },
1738
- mapHeight: "794px"
1424
+ hoveredLocationId: hoveredRoomId,
1425
+ onSchedule,
1426
+ mapHeight: "794px",
1427
+ pageData: mergedPageData.map
1739
1428
  }
1740
1429
  ) })
1741
1430
  ] })
@@ -1911,436 +1600,160 @@ function createDemoRoomApi(config) {
1911
1600
  }
1912
1601
  var DemoRoom = ({
1913
1602
  className,
1914
- layoutClassName = "w-safe11",
1603
+ layoutClassName,
1915
1604
  googleMapsApiKey,
1916
1605
  apiConfig,
1917
1606
  teamCode,
1918
1607
  brandWebsite,
1919
1608
  onSchedule,
1609
+ pageData,
1920
1610
  ...props
1921
1611
  }) => {
1922
1612
  const apiClient = React2.useMemo(
1923
1613
  () => createDemoRoomApi(apiConfig),
1924
1614
  [apiConfig]
1925
1615
  );
1926
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(className), ...props, children: [
1927
- /* @__PURE__ */ jsxRuntime.jsx(Banner, { className: layoutClassName }),
1928
- /* @__PURE__ */ jsxRuntime.jsx(
1929
- BreadCrumbs,
1930
- {
1931
- className: layoutClassName,
1932
- items: [{ label: "Home", link: "/" }, { label: "Demo Room" }]
1933
- }
1934
- ),
1935
- /* @__PURE__ */ jsxRuntime.jsx(HelpNav, {}),
1936
- /* @__PURE__ */ jsxRuntime.jsx(UpcomingEvents, { className: layoutClassName }),
1937
- /* @__PURE__ */ jsxRuntime.jsx(
1938
- RoomsList,
1939
- {
1940
- className: layoutClassName,
1941
- googleMapsApiKey,
1942
- apiClient,
1943
- teamCode,
1944
- brandWebsite,
1945
- onSchedule
1946
- }
1947
- ),
1948
- /* @__PURE__ */ jsxRuntime.jsx(EasySteps, { className: layoutClassName })
1949
- ] });
1616
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
1617
+ RoomsList,
1618
+ {
1619
+ className: layoutClassName,
1620
+ googleMapsApiKey,
1621
+ apiClient,
1622
+ teamCode,
1623
+ brandWebsite,
1624
+ onSchedule,
1625
+ pageData
1626
+ }
1627
+ ) });
1950
1628
  };
1951
1629
  DemoRoom.displayName = "DemoRoom";
1952
- var Navigation;
1953
- var Pagination;
1954
- var Autoplay;
1955
- var swiperVersion = "11+";
1956
- try {
1957
- const modules = __require("swiper/modules");
1958
- Navigation = modules.Navigation;
1959
- Pagination = modules.Pagination;
1960
- Autoplay = modules.Autoplay;
1961
- swiperVersion = "11+";
1962
- } catch (e) {
1963
- try {
1964
- const SwiperCore = __require("swiper");
1965
- const SwiperNavigation = __require("swiper/modules/navigation");
1966
- const SwiperPagination = __require("swiper/modules/pagination");
1967
- const SwiperAutoplay = __require("swiper/modules/autoplay");
1968
- const SwiperClass = SwiperCore.default || SwiperCore;
1969
- if (SwiperClass && SwiperClass.use) {
1970
- SwiperClass.use([
1971
- SwiperNavigation.default || SwiperNavigation,
1972
- SwiperPagination.default || SwiperPagination,
1973
- SwiperAutoplay.default || SwiperAutoplay
1974
- ]);
1630
+ var QuestionnaireForm = ({
1631
+ questions,
1632
+ onSubmit,
1633
+ pageData,
1634
+ selectedTimeslotId,
1635
+ loading = false,
1636
+ className
1637
+ }) => {
1638
+ const [responses, setResponses] = React2.useState({});
1639
+ const [errors, setErrors] = React2.useState({});
1640
+ const [agreements, setAgreements] = React2.useState({});
1641
+ const [agreementError, setAgreementError] = React2.useState("");
1642
+ const getQuestionId = (question) => {
1643
+ return question.id || question.key || "";
1644
+ };
1645
+ const handleChange = (questionId, value) => {
1646
+ setResponses((prev) => ({
1647
+ ...prev,
1648
+ [questionId]: value
1649
+ }));
1650
+ if (errors[questionId]) {
1651
+ setErrors((prev) => {
1652
+ const newErrors = { ...prev };
1653
+ delete newErrors[questionId];
1654
+ return newErrors;
1655
+ });
1975
1656
  }
1976
- Navigation = SwiperNavigation.default || SwiperNavigation;
1977
- Pagination = SwiperPagination.default || SwiperPagination;
1978
- Autoplay = SwiperAutoplay.default || SwiperAutoplay;
1979
- swiperVersion = "8";
1980
- } catch (e2) {
1981
- console.warn("Failed to load swiper modules:", e2);
1982
- }
1983
- }
1984
- if (typeof window !== "undefined") {
1985
- try {
1986
- __require("swiper/css");
1987
- __require("swiper/css/navigation");
1988
- __require("swiper/css/pagination");
1989
- } catch (e) {
1990
- try {
1991
- __require("swiper/swiper.min.css");
1992
- __require("swiper/modules/navigation/navigation.min.css");
1993
- __require("swiper/modules/pagination/pagination.min.css");
1994
- } catch (e2) {
1995
- console.warn("Failed to load swiper styles");
1657
+ };
1658
+ const handleCheckboxChange = (questionId, optionValue, checked) => {
1659
+ const currentValues = responses[questionId] || [];
1660
+ const newValues = checked ? [...currentValues, optionValue] : currentValues.filter((v) => v !== optionValue);
1661
+ handleChange(questionId, newValues);
1662
+ };
1663
+ const handleAgreementChange = (index, checked) => {
1664
+ setAgreements((prev) => ({
1665
+ ...prev,
1666
+ [index]: checked
1667
+ }));
1668
+ if (checked && agreementError) {
1669
+ setAgreementError("");
1996
1670
  }
1997
- }
1998
- }
1999
- var defaultDescriptions = [
2000
- "Norem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.",
2001
- "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos."
2002
- ];
2003
- var defaultImages = [
2004
- "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
2005
- "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638"
2006
- ];
2007
- var DemoRoomDetail = ({
2008
- apiClient,
2009
- demoRoomCode,
2010
- locale,
2011
- title: titleProp,
2012
- descriptions: descriptionsProp,
2013
- devices: devicesProp,
2014
- address: addressProp,
2015
- mapsLink,
2016
- images: imagesProp,
2017
- className,
2018
- ...props
2019
- }) => {
2020
- const {
2021
- data: demoRoom,
2022
- loading,
2023
- error
2024
- } = useDemoRoom(
2025
- apiClient,
2026
- demoRoomCode || "",
2027
- locale,
2028
- { enabled: !!apiClient && !!demoRoomCode }
2029
- );
2030
- const title = demoRoom?.name || titleProp || "Design District Demo Room";
2031
- const descriptions = demoRoom?.description ? [demoRoom.description] : descriptionsProp || defaultDescriptions;
2032
- const devices = demoRoom?.description || devicesProp || "eufyMake E1, eufyMake M5";
2033
- const address = demoRoom?.address || addressProp || "1111 8th St, San Francisco, CA United States 94108";
2034
- const images = demoRoom?.images && demoRoom.images.length > 0 ? demoRoom.images : imagesProp || defaultImages;
2035
- const googleMapsLink = mapsLink || (demoRoom?.latitude && demoRoom?.longitude ? `https://www.google.com/maps/search/?api=1&query=${demoRoom.latitude},${demoRoom.longitude}` : "#");
2036
- if (loading && apiClient && demoRoomCode) {
2037
- 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: [
2038
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
2039
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-12 bg-gray-200 rounded animate-pulse" }),
2040
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-24 bg-gray-200 rounded animate-pulse" }),
2041
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 bg-gray-200 rounded animate-pulse" })
2042
- ] }),
2043
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[400px] bg-gray-200 rounded-2xl animate-pulse" })
2044
- ] }) });
2045
- }
2046
- if (error && apiClient && demoRoomCode) {
2047
- 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: [
2048
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-medium", children: "Failed to load demo room details" }),
2049
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm mt-2", children: error.message })
2050
- ] }) });
2051
- }
2052
- 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: [
2053
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
2054
- /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-[40px] font-bold text-gray-900 leading-tight", children: title }),
2055
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: descriptions.map((desc, index) => /* @__PURE__ */ jsxRuntime.jsx(
2056
- "p",
2057
- {
2058
- className: "text-base text-gray-600 leading-relaxed",
2059
- children: desc
2060
- },
2061
- index
2062
- )) }),
2063
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
2064
- /* @__PURE__ */ jsxRuntime.jsxs(
2065
- "svg",
1671
+ };
1672
+ const validateForm = () => {
1673
+ const newErrors = {};
1674
+ questions.forEach((question) => {
1675
+ if (question.required) {
1676
+ const questionId = getQuestionId(question);
1677
+ const value = responses[questionId];
1678
+ if (!value || Array.isArray(value) && value.length === 0) {
1679
+ newErrors[questionId] = "This field is required";
1680
+ }
1681
+ }
1682
+ });
1683
+ const agrees = pageData?.agrees || [];
1684
+ if (agrees.length > 0) {
1685
+ const allAgreed = agrees.every(
1686
+ (_, index) => agreements[index]
1687
+ );
1688
+ if (!allAgreed) {
1689
+ setAgreementError(
1690
+ "Please agree to all terms and conditions to continue"
1691
+ );
1692
+ setErrors(newErrors);
1693
+ return false;
1694
+ }
1695
+ }
1696
+ setErrors(newErrors);
1697
+ setAgreementError("");
1698
+ return Object.keys(newErrors).length === 0;
1699
+ };
1700
+ const handleSubmit = (e) => {
1701
+ e.preventDefault();
1702
+ if (validateForm()) {
1703
+ onSubmit?.(responses);
1704
+ }
1705
+ };
1706
+ const renderQuestion = (question) => {
1707
+ const questionId = getQuestionId(question);
1708
+ const hasError = !!errors[questionId];
1709
+ switch (question.type) {
1710
+ case "text":
1711
+ case "email":
1712
+ case "tel":
1713
+ return /* @__PURE__ */ jsxRuntime.jsx(
1714
+ "input",
2066
1715
  {
2067
- width: "24",
2068
- height: "24",
2069
- viewBox: "0 0 24 24",
2070
- fill: "none",
2071
- xmlns: "http://www.w3.org/2000/svg",
2072
- className: "flex-shrink-0 mt-0.5",
1716
+ type: question.type,
1717
+ value: responses[questionId] || "",
1718
+ onChange: (e) => handleChange(questionId, e.target.value),
1719
+ placeholder: question.placeholder,
1720
+ className: cn(
1721
+ "w-full px-4 py-3 rounded-lg border text-base",
1722
+ "focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:border-transparent",
1723
+ hasError ? "border-red-500" : "border-[#E4E5E6]"
1724
+ )
1725
+ }
1726
+ );
1727
+ case "textarea":
1728
+ return /* @__PURE__ */ jsxRuntime.jsx(
1729
+ "textarea",
1730
+ {
1731
+ value: responses[questionId] || "",
1732
+ onChange: (e) => handleChange(questionId, e.target.value),
1733
+ placeholder: question.placeholder,
1734
+ rows: 4,
1735
+ className: cn(
1736
+ "w-full px-4 py-3 rounded-lg border text-base resize-none",
1737
+ "focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:border-transparent",
1738
+ hasError ? "border-red-500" : "border-[#E4E5E6]"
1739
+ )
1740
+ }
1741
+ );
1742
+ case "radio":
1743
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: question?.options?.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
1744
+ "label",
1745
+ {
1746
+ className: "flex items-center gap-3 cursor-pointer group",
2073
1747
  children: [
2074
1748
  /* @__PURE__ */ jsxRuntime.jsx(
2075
- "rect",
1749
+ "input",
2076
1750
  {
2077
- x: "3",
2078
- y: "3",
2079
- width: "18",
2080
- height: "18",
2081
- rx: "2",
2082
- stroke: "currentColor",
2083
- strokeWidth: "2"
2084
- }
2085
- ),
2086
- /* @__PURE__ */ jsxRuntime.jsx(
2087
- "path",
2088
- {
2089
- d: "M8 10H16",
2090
- stroke: "currentColor",
2091
- strokeWidth: "2",
2092
- strokeLinecap: "round"
2093
- }
2094
- ),
2095
- /* @__PURE__ */ jsxRuntime.jsx(
2096
- "path",
2097
- {
2098
- d: "M8 14H16",
2099
- stroke: "currentColor",
2100
- strokeWidth: "2",
2101
- strokeLinecap: "round"
2102
- }
2103
- )
2104
- ]
2105
- }
2106
- ),
2107
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base text-gray-900", children: devices })
2108
- ] }),
2109
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
2110
- /* @__PURE__ */ jsxRuntime.jsxs(
2111
- "svg",
2112
- {
2113
- width: "24",
2114
- height: "24",
2115
- viewBox: "0 0 24 24",
2116
- fill: "none",
2117
- xmlns: "http://www.w3.org/2000/svg",
2118
- className: "flex-shrink-0 mt-0.5",
2119
- children: [
2120
- /* @__PURE__ */ jsxRuntime.jsx(
2121
- "path",
2122
- {
2123
- d: "M12 2C8.13 2 5 5.13 5 9C5 14.25 12 22 12 22C12 22 19 14.25 19 9C19 5.13 15.87 2 12 2Z",
2124
- stroke: "currentColor",
2125
- strokeWidth: "2",
2126
- strokeLinecap: "round",
2127
- strokeLinejoin: "round"
2128
- }
2129
- ),
2130
- /* @__PURE__ */ jsxRuntime.jsx(
2131
- "circle",
2132
- {
2133
- cx: "12",
2134
- cy: "9",
2135
- r: "2.5",
2136
- stroke: "currentColor",
2137
- strokeWidth: "2"
2138
- }
2139
- )
2140
- ]
2141
- }
2142
- ),
2143
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
2144
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-900", children: address }),
2145
- /* @__PURE__ */ jsxRuntime.jsxs(
2146
- "a",
2147
- {
2148
- href: googleMapsLink,
2149
- target: "_blank",
2150
- rel: "noopener noreferrer",
2151
- className: "inline-flex items-center gap-1 text-sm text-blue-600 hover:text-blue-700 mt-1 underline",
2152
- children: [
2153
- "Open in Google Maps",
2154
- /* @__PURE__ */ jsxRuntime.jsx(
2155
- "svg",
2156
- {
2157
- width: "12",
2158
- height: "12",
2159
- viewBox: "0 0 12 12",
2160
- fill: "none",
2161
- xmlns: "http://www.w3.org/2000/svg",
2162
- children: /* @__PURE__ */ jsxRuntime.jsx(
2163
- "path",
2164
- {
2165
- d: "M3 9L9 3M9 3H3M9 3V9",
2166
- stroke: "currentColor",
2167
- strokeWidth: "1.5",
2168
- strokeLinecap: "round",
2169
- strokeLinejoin: "round"
2170
- }
2171
- )
2172
- }
2173
- )
2174
- ]
2175
- }
2176
- )
2177
- ] })
2178
- ] })
2179
- ] }),
2180
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-[400px] rounded-2xl overflow-hidden", children: images.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
2181
- react.Swiper,
2182
- {
2183
- ...swiperVersion === "11+" && Navigation && Pagination && Autoplay ? { modules: [Navigation, Pagination, Autoplay] } : {},
2184
- spaceBetween: 0,
2185
- slidesPerView: 1,
2186
- navigation: true,
2187
- pagination: { clickable: true },
2188
- autoplay: {
2189
- delay: 3e3,
2190
- disableOnInteraction: false
2191
- },
2192
- loop: true,
2193
- className: "h-full rounded-2xl",
2194
- children: images.map((img, index) => /* @__PURE__ */ jsxRuntime.jsx(react.SwiperSlide, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full h-full bg-gray-100", children: /* @__PURE__ */ jsxRuntime.jsx(
2195
- "img",
2196
- {
2197
- src: img,
2198
- alt: `Demo room view ${index + 1}`,
2199
- className: "w-full h-full object-cover"
2200
- }
2201
- ) }) }, index))
2202
- }
2203
- ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center rounded-2xl", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
2204
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-16 h-16 mx-auto mb-3 rounded-full bg-white flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
2205
- "svg",
2206
- {
2207
- width: "32",
2208
- height: "32",
2209
- viewBox: "0 0 32 32",
2210
- fill: "none",
2211
- xmlns: "http://www.w3.org/2000/svg",
2212
- children: [
2213
- /* @__PURE__ */ jsxRuntime.jsx(
2214
- "rect",
2215
- {
2216
- x: "4",
2217
- y: "8",
2218
- width: "24",
2219
- height: "16",
2220
- rx: "2",
2221
- stroke: "currentColor",
2222
- strokeWidth: "2"
2223
- }
2224
- ),
2225
- /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "14", r: "2", fill: "currentColor" }),
2226
- /* @__PURE__ */ jsxRuntime.jsx(
2227
- "path",
2228
- {
2229
- d: "M28 20L22 14L16 20",
2230
- stroke: "currentColor",
2231
- strokeWidth: "2",
2232
- strokeLinecap: "round",
2233
- strokeLinejoin: "round"
2234
- }
2235
- )
2236
- ]
2237
- }
2238
- ) }),
2239
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-500 text-sm", children: "Demo Room Images" })
2240
- ] }) }) })
2241
- ] }) });
2242
- };
2243
- DemoRoomDetail.displayName = "DemoRoomDetail";
2244
- var QuestionnaireForm = ({
2245
- questions,
2246
- onSubmit,
2247
- loading = false,
2248
- className
2249
- }) => {
2250
- const [responses, setResponses] = React2.useState({});
2251
- const [errors, setErrors] = React2.useState({});
2252
- const getQuestionId = (question) => {
2253
- return question.id || question.key || "";
2254
- };
2255
- const handleChange = (questionId, value) => {
2256
- setResponses((prev) => ({
2257
- ...prev,
2258
- [questionId]: value
2259
- }));
2260
- if (errors[questionId]) {
2261
- setErrors((prev) => {
2262
- const newErrors = { ...prev };
2263
- delete newErrors[questionId];
2264
- return newErrors;
2265
- });
2266
- }
2267
- };
2268
- const handleCheckboxChange = (questionId, optionValue, checked) => {
2269
- const currentValues = responses[questionId] || [];
2270
- const newValues = checked ? [...currentValues, optionValue] : currentValues.filter((v) => v !== optionValue);
2271
- handleChange(questionId, newValues);
2272
- };
2273
- const validateForm = () => {
2274
- const newErrors = {};
2275
- questions.forEach((question) => {
2276
- if (question.required) {
2277
- const questionId = getQuestionId(question);
2278
- const value = responses[questionId];
2279
- if (!value || Array.isArray(value) && value.length === 0) {
2280
- newErrors[questionId] = "This field is required";
2281
- }
2282
- }
2283
- });
2284
- setErrors(newErrors);
2285
- return Object.keys(newErrors).length === 0;
2286
- };
2287
- const handleSubmit = (e) => {
2288
- e.preventDefault();
2289
- if (validateForm()) {
2290
- onSubmit?.(responses);
2291
- }
2292
- };
2293
- const renderQuestion = (question) => {
2294
- const questionId = getQuestionId(question);
2295
- const hasError = !!errors[questionId];
2296
- switch (question.type) {
2297
- case "text":
2298
- case "email":
2299
- case "tel":
2300
- return /* @__PURE__ */ jsxRuntime.jsx(
2301
- "input",
2302
- {
2303
- type: question.type,
2304
- value: responses[questionId] || "",
2305
- onChange: (e) => handleChange(questionId, e.target.value),
2306
- placeholder: question.placeholder,
2307
- className: cn(
2308
- "w-full px-4 py-3 rounded-lg border text-base",
2309
- "focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:border-transparent",
2310
- hasError ? "border-red-500" : "border-[#E4E5E6]"
2311
- )
2312
- }
2313
- );
2314
- case "textarea":
2315
- return /* @__PURE__ */ jsxRuntime.jsx(
2316
- "textarea",
2317
- {
2318
- value: responses[questionId] || "",
2319
- onChange: (e) => handleChange(questionId, e.target.value),
2320
- placeholder: question.placeholder,
2321
- rows: 4,
2322
- className: cn(
2323
- "w-full px-4 py-3 rounded-lg border text-base resize-none",
2324
- "focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:border-transparent",
2325
- hasError ? "border-red-500" : "border-[#E4E5E6]"
2326
- )
2327
- }
2328
- );
2329
- case "radio":
2330
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: question?.options?.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
2331
- "label",
2332
- {
2333
- className: "flex items-center gap-3 cursor-pointer group",
2334
- children: [
2335
- /* @__PURE__ */ jsxRuntime.jsx(
2336
- "input",
2337
- {
2338
- type: "radio",
2339
- name: questionId,
2340
- value: option.value || option.label,
2341
- checked: responses[questionId] === (option.value || option.label),
2342
- onChange: (e) => handleChange(questionId, e.target.value),
2343
- className: "w-5 h-5 text-[#3ADB67] focus:ring-[#3ADB67] focus:ring-2"
1751
+ type: "radio",
1752
+ name: questionId,
1753
+ value: option.value || option.label,
1754
+ checked: responses[questionId] === (option.value || option.label),
1755
+ onChange: (e) => handleChange(questionId, e.target.value),
1756
+ className: "w-5 h-5 text-[#3ADB67] focus:ring-[#3ADB67] focus:ring-2"
2344
1757
  }
2345
1758
  ),
2346
1759
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base text-gray-900 group-hover:text-[#3ADB67] transition-colors", children: option.label })
@@ -2407,8 +1820,8 @@ var QuestionnaireForm = ({
2407
1820
  return null;
2408
1821
  }
2409
1822
  };
2410
- return /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className: cn("space-y-6", className), children: [
2411
- questions?.map((question) => {
1823
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pb-[80px]", children: [
1824
+ 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) => {
2412
1825
  const questionId = getQuestionId(question);
2413
1826
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
2414
1827
  /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "block", children: [
@@ -2420,24 +1833,51 @@ var QuestionnaireForm = ({
2420
1833
  ] }),
2421
1834
  renderQuestion(question),
2422
1835
  question.hint && !errors[questionId] && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: question.hint }),
2423
- errors[questionId] && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-500", children: errors[questionId] })
1836
+ errors[questionId] && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", style: { color: "#FF4D4D" }, children: errors[questionId] })
2424
1837
  ] }, questionId);
2425
- }),
2426
- /* @__PURE__ */ jsxRuntime.jsx(
2427
- "button",
2428
- {
2429
- type: "submit",
2430
- disabled: loading,
2431
- className: cn(
2432
- "w-full px-6 py-4 rounded-full",
2433
- "bg-[#3ADB67] text-white font-medium text-base",
2434
- "hover:bg-[#2FC257] transition-colors",
2435
- "focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:ring-offset-2",
2436
- "disabled:opacity-50 disabled:cursor-not-allowed"
2437
- ),
2438
- children: loading ? "Submitting..." : "Submit Booking"
2439
- }
2440
- )
1838
+ }) }) }),
1839
+ !!selectedTimeslotId && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center", children: [
1840
+ pageData?.agrees && pageData.agrees.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 mt-8", children: [
1841
+ pageData.agrees.map((agreeContent, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
1842
+ /* @__PURE__ */ jsxRuntime.jsx(
1843
+ "input",
1844
+ {
1845
+ type: "checkbox",
1846
+ id: `agreement-${index}`,
1847
+ checked: agreements[index] || false,
1848
+ onChange: (e) => handleAgreementChange(index, e.target.checked),
1849
+ className: "w-5 h-5 rounded border-gray-300 text-[#2FC257] focus:ring-[#2FC257] cursor-pointer flex-shrink-0"
1850
+ }
1851
+ ),
1852
+ /* @__PURE__ */ jsxRuntime.jsx(
1853
+ "label",
1854
+ {
1855
+ htmlFor: `agreement-${index}`,
1856
+ className: "text-sm text-gray-700 cursor-pointer select-none flex-1 [&_a]:underline [&_a]:text-blue-600 [&_a:hover]:text-blue-700",
1857
+ dangerouslySetInnerHTML: { __html: agreeContent },
1858
+ "aria-label": `Agreement ${index + 1}`
1859
+ }
1860
+ )
1861
+ ] }, index)),
1862
+ agreementError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm mt-2", style: { color: "#FF4D4D" }, children: agreementError })
1863
+ ] }),
1864
+ /* @__PURE__ */ jsxRuntime.jsx(
1865
+ "button",
1866
+ {
1867
+ type: "submit",
1868
+ disabled: loading,
1869
+ onClick: handleSubmit,
1870
+ className: cn(
1871
+ "w-fit mt-6 px-6 py-4 rounded-full",
1872
+ "bg-[#080A0F] text-white font-medium text-base",
1873
+ "hover:bg-[#2FC257] transition-colors",
1874
+ "focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:ring-offset-2",
1875
+ "disabled:opacity-50 disabled:cursor-not-allowed"
1876
+ ),
1877
+ children: loading ? pageData?.submitting || "Submitting..." : pageData?.submit || "Submit Booking"
1878
+ }
1879
+ )
1880
+ ] })
2441
1881
  ] });
2442
1882
  };
2443
1883
  dayjs__default.default.extend(dayLocaleData__default.default);
@@ -2447,38 +1887,45 @@ var DateTimePicker = ({
2447
1887
  apiClient,
2448
1888
  demoRoomCode,
2449
1889
  timezone,
1890
+ pageData = {
1891
+ scheduleYourVisit: "Schedule Your Visit",
1892
+ timeSlot: "Time Slot",
1893
+ loadingTimeSlots: "Loading time slots...",
1894
+ failedToLoadTimeSlots: "Failed to load time slots",
1895
+ noAvailableTimeSlots: "No available time slots for this date",
1896
+ full: "Full",
1897
+ spotsLeft: "spots left",
1898
+ fillOutForm: "Fill out Form",
1899
+ loadingQuestionnaire: "Loading questionnaire...",
1900
+ bookingFailed: "Booking failed"
1901
+ },
2450
1902
  locale,
2451
1903
  onBookingSuccess
2452
1904
  }) => {
2453
1905
  const { token } = antd.theme.useToken();
2454
1906
  const [selectMonth, setSelectMonth] = React2.useState("");
2455
1907
  const [selectedDate, setSelectedDate] = React2.useState(dayjs__default.default());
2456
- const [selectedTimeslotId, setSelectedTimeslotId] = React2.useState(null);
2457
- const [showQuestionnaire, setShowQuestionnaire] = React2.useState(false);
2458
- const { createBooking, loading: bookingLoading, error: bookingError } = useCreateBooking(apiClient);
1908
+ const [selectedTimeslotId, setSelectedTimeslotId] = React2.useState(
1909
+ null
1910
+ );
2459
1911
  const {
2460
- data: demoRoom
2461
- } = useDemoRoom(
1912
+ createBooking,
1913
+ loading: bookingLoading,
1914
+ error: bookingError
1915
+ } = useCreateBooking(apiClient);
1916
+ const { data: demoRoom } = useDemoRoom(
2462
1917
  apiClient,
2463
1918
  demoRoomCode || "",
2464
1919
  locale,
2465
1920
  { enabled: !!demoRoomCode }
2466
1921
  );
2467
- const {
2468
- data: questionnaire,
2469
- loading: questionnaireLoading
2470
- } = useQuestionnaire(
1922
+ const { data: questionnaire, loading: questionnaireLoading } = useQuestionnaire(
2471
1923
  apiClient,
2472
1924
  demoRoomCode || "",
2473
1925
  demoRoom?.questionnaire_id,
2474
1926
  locale,
2475
1927
  { enabled: !!demoRoomCode && !!demoRoom?.questionnaire_id }
2476
1928
  );
2477
- React2.useEffect(() => {
2478
- if (questionnaire) {
2479
- setShowQuestionnaire(true);
2480
- }
2481
- }, [questionnaire]);
2482
1929
  const startDate = selectedDate.startOf("month").format("YYYY-MM-DD");
2483
1930
  const endDate = selectedDate.endOf("month").format("YYYY-MM-DD");
2484
1931
  const {
@@ -2518,7 +1965,7 @@ var DateTimePicker = ({
2518
1965
  borderRadius: token.borderRadiusLG
2519
1966
  };
2520
1967
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
2521
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[48px] py-[64px] font-bold text-center", children: "Schedule Your Visit" }),
1968
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[48px] py-[64px] font-bold text-center", children: pageData.scheduleYourVisit }),
2522
1969
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
2523
1970
  /* @__PURE__ */ jsxRuntime.jsx(
2524
1971
  antd.ConfigProvider,
@@ -2535,13 +1982,8 @@ var DateTimePicker = ({
2535
1982
  }
2536
1983
  }
2537
1984
  },
2538
- children: /* @__PURE__ */ jsxRuntime.jsxs(
2539
- "div",
2540
- {
2541
- style: wrapperStyle,
2542
- className: "calendar-custom-cell",
2543
- children: [
2544
- /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
1985
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: wrapperStyle, className: "calendar-custom-cell", children: [
1986
+ /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
2545
1987
  .calendar-custom-cell .ant-picker-cell {
2546
1988
  padding: 6px !important;
2547
1989
  }
@@ -2576,141 +2018,139 @@ var DateTimePicker = ({
2576
2018
  line-height: 48px !important;
2577
2019
  }
2578
2020
  ` }),
2579
- /* @__PURE__ */ jsxRuntime.jsx(
2580
- antd.Calendar,
2581
- {
2582
- fullscreen: false,
2583
- value: selectedDate,
2584
- onChange: (date) => setSelectedDate(date),
2585
- headerRender: ({ value, onChange }) => {
2586
- const year = value.year();
2587
- const month = value.month();
2588
- const yearOptions = Array.from({ length: 20 }, (_, i) => {
2589
- const label = year - 10 + i;
2590
- return { label, value: label };
2591
- });
2592
- const monthOptions = value.localeData().months().map((label, index) => ({
2593
- label,
2594
- value: index
2595
- }));
2596
- const monthText = monthOptions?.find((item) => {
2597
- return item?.value === month;
2598
- });
2599
- setSelectMonth(monthText?.label || "");
2600
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-3", children: [
2601
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
2602
- /* @__PURE__ */ jsxRuntime.jsx(
2603
- antd.Select,
2604
- {
2605
- value: month,
2606
- options: monthOptions,
2607
- onChange: (newMonth) => {
2608
- const now = value.clone().month(newMonth);
2609
- onChange(now);
2610
- },
2611
- variant: "borderless",
2612
- className: "text-2xl font-medium",
2613
- popupMatchSelectWidth: false,
2614
- style: {
2615
- fontSize: "24px",
2616
- fontWeight: 500
2617
- }
2618
- }
2619
- ),
2620
- /* @__PURE__ */ jsxRuntime.jsx(
2621
- antd.Select,
2622
- {
2623
- value: year,
2624
- options: yearOptions,
2625
- onChange: (newYear) => {
2626
- const now = value.clone().year(newYear);
2627
- onChange(now);
2628
- },
2629
- variant: "borderless",
2630
- className: "text-2xl font-medium",
2631
- popupMatchSelectWidth: false,
2632
- style: {
2633
- fontSize: "24px",
2634
- fontWeight: 500
2635
- }
2636
- }
2637
- )
2638
- ] }),
2639
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
2640
- /* @__PURE__ */ jsxRuntime.jsx(
2641
- "button",
2021
+ /* @__PURE__ */ jsxRuntime.jsx(
2022
+ antd.Calendar,
2023
+ {
2024
+ fullscreen: false,
2025
+ value: selectedDate,
2026
+ onChange: (date) => setSelectedDate(date),
2027
+ headerRender: ({ value, onChange }) => {
2028
+ const year = value.year();
2029
+ const month = value.month();
2030
+ const yearOptions = Array.from({ length: 20 }, (_, i) => {
2031
+ const label = year - 10 + i;
2032
+ return { label, value: label };
2033
+ });
2034
+ const monthOptions = value.localeData().months().map((label, index) => ({
2035
+ label,
2036
+ value: index
2037
+ }));
2038
+ const monthText = monthOptions?.find((item) => {
2039
+ return item?.value === month;
2040
+ });
2041
+ setSelectMonth(monthText?.label || "");
2042
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-3", children: [
2043
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
2044
+ /* @__PURE__ */ jsxRuntime.jsx(
2045
+ antd.Select,
2046
+ {
2047
+ value: month,
2048
+ options: monthOptions,
2049
+ onChange: (newMonth) => {
2050
+ const now = value.clone().month(newMonth);
2051
+ onChange(now);
2052
+ },
2053
+ variant: "borderless",
2054
+ className: "text-2xl font-medium",
2055
+ popupMatchSelectWidth: false,
2056
+ style: {
2057
+ fontSize: "24px",
2058
+ fontWeight: 500
2059
+ }
2060
+ }
2061
+ ),
2062
+ /* @__PURE__ */ jsxRuntime.jsx(
2063
+ antd.Select,
2064
+ {
2065
+ value: year,
2066
+ options: yearOptions,
2067
+ onChange: (newYear) => {
2068
+ const now = value.clone().year(newYear);
2069
+ onChange(now);
2070
+ },
2071
+ variant: "borderless",
2072
+ className: "text-2xl font-medium",
2073
+ popupMatchSelectWidth: false,
2074
+ style: {
2075
+ fontSize: "24px",
2076
+ fontWeight: 500
2077
+ }
2078
+ }
2079
+ )
2080
+ ] }),
2081
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
2082
+ /* @__PURE__ */ jsxRuntime.jsx(
2083
+ "button",
2084
+ {
2085
+ onClick: () => {
2086
+ const newDate = value.subtract(1, "month");
2087
+ onChange(newDate);
2088
+ },
2089
+ className: "w-10 h-10 flex items-center justify-center hover:bg-gray-100 rounded-lg transition-colors",
2090
+ children: /* @__PURE__ */ jsxRuntime.jsx(
2091
+ "svg",
2642
2092
  {
2643
- onClick: () => {
2644
- const newDate = value.subtract(1, "month");
2645
- onChange(newDate);
2646
- },
2647
- className: "w-10 h-10 flex items-center justify-center hover:bg-gray-100 rounded-lg transition-colors",
2093
+ width: "20",
2094
+ height: "20",
2095
+ viewBox: "0 0 20 20",
2096
+ fill: "none",
2097
+ xmlns: "http://www.w3.org/2000/svg",
2648
2098
  children: /* @__PURE__ */ jsxRuntime.jsx(
2649
- "svg",
2099
+ "path",
2650
2100
  {
2651
- width: "20",
2652
- height: "20",
2653
- viewBox: "0 0 20 20",
2654
- fill: "none",
2655
- xmlns: "http://www.w3.org/2000/svg",
2656
- children: /* @__PURE__ */ jsxRuntime.jsx(
2657
- "path",
2658
- {
2659
- d: "M12 16L6 10L12 4",
2660
- stroke: "currentColor",
2661
- strokeWidth: "2",
2662
- strokeLinecap: "round",
2663
- strokeLinejoin: "round"
2664
- }
2665
- )
2101
+ d: "M12 16L6 10L12 4",
2102
+ stroke: "currentColor",
2103
+ strokeWidth: "2",
2104
+ strokeLinecap: "round",
2105
+ strokeLinejoin: "round"
2666
2106
  }
2667
2107
  )
2668
2108
  }
2669
- ),
2670
- /* @__PURE__ */ jsxRuntime.jsx(
2671
- "button",
2109
+ )
2110
+ }
2111
+ ),
2112
+ /* @__PURE__ */ jsxRuntime.jsx(
2113
+ "button",
2114
+ {
2115
+ onClick: () => {
2116
+ const newDate = value.add(1, "month");
2117
+ onChange(newDate);
2118
+ },
2119
+ className: "w-10 h-10 flex items-center justify-center hover:bg-gray-100 rounded-lg transition-colors",
2120
+ children: /* @__PURE__ */ jsxRuntime.jsx(
2121
+ "svg",
2672
2122
  {
2673
- onClick: () => {
2674
- const newDate = value.add(1, "month");
2675
- onChange(newDate);
2676
- },
2677
- className: "w-10 h-10 flex items-center justify-center hover:bg-gray-100 rounded-lg transition-colors",
2123
+ width: "20",
2124
+ height: "20",
2125
+ viewBox: "0 0 20 20",
2126
+ fill: "none",
2127
+ xmlns: "http://www.w3.org/2000/svg",
2678
2128
  children: /* @__PURE__ */ jsxRuntime.jsx(
2679
- "svg",
2129
+ "path",
2680
2130
  {
2681
- width: "20",
2682
- height: "20",
2683
- viewBox: "0 0 20 20",
2684
- fill: "none",
2685
- xmlns: "http://www.w3.org/2000/svg",
2686
- children: /* @__PURE__ */ jsxRuntime.jsx(
2687
- "path",
2688
- {
2689
- d: "M8 4L14 10L8 16",
2690
- stroke: "currentColor",
2691
- strokeWidth: "2",
2692
- strokeLinecap: "round",
2693
- strokeLinejoin: "round"
2694
- }
2695
- )
2131
+ d: "M8 4L14 10L8 16",
2132
+ stroke: "currentColor",
2133
+ strokeWidth: "2",
2134
+ strokeLinecap: "round",
2135
+ strokeLinejoin: "round"
2696
2136
  }
2697
2137
  )
2698
2138
  }
2699
2139
  )
2700
- ] })
2701
- ] });
2702
- },
2703
- onPanelChange
2704
- }
2705
- )
2706
- ]
2707
- }
2708
- )
2140
+ }
2141
+ )
2142
+ ] })
2143
+ ] });
2144
+ },
2145
+ onPanelChange
2146
+ }
2147
+ )
2148
+ ] })
2709
2149
  }
2710
2150
  ),
2711
2151
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white p-[24px] rounded-[12px] flex-1", children: [
2712
2152
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
2713
- "Time Slot",
2153
+ pageData.timeSlot,
2714
2154
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
2715
2155
  /* @__PURE__ */ jsxRuntime.jsx(
2716
2156
  "button",
@@ -2751,105 +2191,412 @@ var DateTimePicker = ({
2751
2191
  children: /* @__PURE__ */ jsxRuntime.jsx(
2752
2192
  "svg",
2753
2193
  {
2754
- xmlns: "http://www.w3.org/2000/svg",
2755
- width: "24",
2756
- height: "24",
2757
- viewBox: "0 0 24 24",
2194
+ xmlns: "http://www.w3.org/2000/svg",
2195
+ width: "24",
2196
+ height: "24",
2197
+ viewBox: "0 0 24 24",
2198
+ fill: "none",
2199
+ children: /* @__PURE__ */ jsxRuntime.jsx(
2200
+ "path",
2201
+ {
2202
+ d: "M8.29289 5.29289C8.68342 4.90237 9.31643 4.90237 9.70696 5.29289L15.707 11.2929C16.0975 11.6834 16.0975 12.3164 15.707 12.707L9.70696 18.707C9.31643 19.0975 8.68342 19.0975 8.29289 18.707C7.90237 18.3164 7.90237 17.6834 8.29289 17.2929L13.5859 11.9999L8.29289 6.70696C7.90237 6.31643 7.90237 5.68342 8.29289 5.29289Z",
2203
+ fill: "#1D1D1F"
2204
+ }
2205
+ )
2206
+ }
2207
+ )
2208
+ }
2209
+ )
2210
+ ] })
2211
+ ] }),
2212
+ /* @__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) => {
2213
+ const isAvailable = slot.status === "available";
2214
+ const isFull = slot.status === "full";
2215
+ const isSelected = selectedTimeslotId === slot.id;
2216
+ return /* @__PURE__ */ jsxRuntime.jsx(
2217
+ "button",
2218
+ {
2219
+ disabled: !isAvailable,
2220
+ onClick: () => {
2221
+ if (isAvailable) {
2222
+ setSelectedTimeslotId(slot.id);
2223
+ }
2224
+ },
2225
+ className: `
2226
+ rounded-[20px] w-full flex items-center justify-center gap-4 h-[76px]
2227
+ border text-center transition-colors
2228
+ ${isSelected ? "border-[#3ADB67] bg-[#3ADB67] text-white cursor-pointer" : isAvailable ? "border-[#E4E5E6] hover:border-[#3ADB67] hover:bg-[#3ADB67] cursor-pointer" : "border-[#E4E5E6] bg-[#F5F5F5] text-[#BDBDBD] cursor-not-allowed"}
2229
+ `,
2230
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
2231
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: formatTimeslot(slot) }),
2232
+ isFull && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-[#BDBDBD] mt-1", children: pageData.full }),
2233
+ isAvailable && !isSelected && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-[#767880] mt-1", children: [
2234
+ slot.capacity - slot.booked_count,
2235
+ " ",
2236
+ pageData.spotsLeft
2237
+ ] }),
2238
+ isAvailable && isSelected && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-white mt-1", children: [
2239
+ slot.capacity - slot.booked_count,
2240
+ " ",
2241
+ pageData.spotsLeft
2242
+ ] })
2243
+ ] })
2244
+ },
2245
+ slot.id
2246
+ );
2247
+ }) })
2248
+ ] })
2249
+ ] }),
2250
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-12", children: [
2251
+ !!questionnaire?.questions?.length && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[48px] font-bold text-center mb-8", children: pageData.fillOutForm }),
2252
+ questionnaireLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center text-[#767880] py-8", children: pageData.loadingQuestionnaire }) : /* @__PURE__ */ jsxRuntime.jsx(
2253
+ QuestionnaireForm,
2254
+ {
2255
+ questions: questionnaire?.questions || [],
2256
+ loading: bookingLoading,
2257
+ pageData,
2258
+ selectedTimeslotId,
2259
+ onSubmit: async (responses) => {
2260
+ try {
2261
+ const customerName = responses.name || responses.customer_name || "";
2262
+ const customerEmail = responses.email || responses.customer_email || "";
2263
+ const customerPhone = responses.phone || responses.customer_phone_number || "";
2264
+ const customerPhoneCode = responses.phone_code || responses.customer_phone_code || "+1";
2265
+ if (selectedTimeslotId) {
2266
+ const result = await createBooking({
2267
+ demoroom_code: demoRoomCode,
2268
+ timeslot_id: selectedTimeslotId,
2269
+ questionnaire_id: questionnaire?.id,
2270
+ questionnaire_response: responses,
2271
+ customer_name: customerName,
2272
+ customer_email: customerEmail,
2273
+ customer_phone_code: customerPhoneCode,
2274
+ customer_phone_number: customerPhone
2275
+ });
2276
+ if (result && onBookingSuccess) {
2277
+ onBookingSuccess(result?.cancel_token);
2278
+ }
2279
+ }
2280
+ } catch (error) {
2281
+ console.error("Booking creation failed:", error);
2282
+ }
2283
+ }
2284
+ }
2285
+ )
2286
+ ] })
2287
+ ] });
2288
+ };
2289
+ var DateTimePicker_default = DateTimePicker;
2290
+ var Navigation;
2291
+ var Pagination;
2292
+ var Autoplay;
2293
+ var swiperVersion = "11+";
2294
+ try {
2295
+ const modules = __require("swiper/modules");
2296
+ Navigation = modules.Navigation;
2297
+ Pagination = modules.Pagination;
2298
+ Autoplay = modules.Autoplay;
2299
+ swiperVersion = "11+";
2300
+ } catch (e) {
2301
+ try {
2302
+ const SwiperCore = __require("swiper");
2303
+ const SwiperNavigation = __require("swiper/modules/navigation");
2304
+ const SwiperPagination = __require("swiper/modules/pagination");
2305
+ const SwiperAutoplay = __require("swiper/modules/autoplay");
2306
+ const SwiperClass = SwiperCore.default || SwiperCore;
2307
+ if (SwiperClass && SwiperClass.use) {
2308
+ SwiperClass.use([
2309
+ SwiperNavigation.default || SwiperNavigation,
2310
+ SwiperPagination.default || SwiperPagination,
2311
+ SwiperAutoplay.default || SwiperAutoplay
2312
+ ]);
2313
+ }
2314
+ Navigation = SwiperNavigation.default || SwiperNavigation;
2315
+ Pagination = SwiperPagination.default || SwiperPagination;
2316
+ Autoplay = SwiperAutoplay.default || SwiperAutoplay;
2317
+ swiperVersion = "8";
2318
+ } catch (e2) {
2319
+ console.warn("Failed to load swiper modules:", e2);
2320
+ }
2321
+ }
2322
+ if (typeof window !== "undefined") {
2323
+ try {
2324
+ __require("swiper/css");
2325
+ __require("swiper/css/navigation");
2326
+ __require("swiper/css/pagination");
2327
+ } catch (e) {
2328
+ try {
2329
+ __require("swiper/swiper.min.css");
2330
+ __require("swiper/modules/navigation/navigation.min.css");
2331
+ __require("swiper/modules/pagination/pagination.min.css");
2332
+ } catch (e2) {
2333
+ console.warn("Failed to load swiper styles");
2334
+ }
2335
+ }
2336
+ }
2337
+ var defaultDescriptions = [
2338
+ "Norem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.",
2339
+ "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos."
2340
+ ];
2341
+ var defaultImages = [
2342
+ "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
2343
+ "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638"
2344
+ ];
2345
+ var DemoRoomDetail = ({
2346
+ apiClient,
2347
+ demoRoomCode,
2348
+ locale,
2349
+ title: titleProp,
2350
+ descriptions: descriptionsProp,
2351
+ devices: devicesProp,
2352
+ address: addressProp,
2353
+ mapsLink,
2354
+ images: imagesProp,
2355
+ pageData = {
2356
+ loadingText: "Loading...",
2357
+ errorTitle: "Failed to load demo room details",
2358
+ openInGoogleMaps: "Open in Google Maps",
2359
+ demoRoomImages: "Demo Room Images"
2360
+ },
2361
+ className,
2362
+ ...props
2363
+ }) => {
2364
+ const {
2365
+ data: demoRoom,
2366
+ loading,
2367
+ error
2368
+ } = useDemoRoom(
2369
+ apiClient,
2370
+ demoRoomCode || "",
2371
+ locale,
2372
+ { enabled: !!apiClient && !!demoRoomCode }
2373
+ );
2374
+ const title = demoRoom?.name || titleProp || "Design District Demo Room";
2375
+ const descriptions = demoRoom?.description ? [demoRoom.description] : descriptionsProp || defaultDescriptions;
2376
+ const devices = demoRoom?.description || devicesProp || "eufyMake E1, eufyMake M5";
2377
+ const address = demoRoom?.address || addressProp || "1111 8th St, San Francisco, CA United States 94108";
2378
+ const images = demoRoom?.images && demoRoom.images.length > 0 ? demoRoom.images : imagesProp || defaultImages;
2379
+ const googleMapsLink = mapsLink || (() => {
2380
+ if (demoRoom?.latitude && demoRoom?.longitude) {
2381
+ return `https://www.google.com/maps/search/?api=1&query=${demoRoom.latitude},${demoRoom.longitude}`;
2382
+ } else {
2383
+ return `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(address)}`;
2384
+ }
2385
+ })();
2386
+ if (loading && apiClient && demoRoomCode) {
2387
+ 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: [
2388
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
2389
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-12 bg-gray-200 rounded animate-pulse" }),
2390
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-24 bg-gray-200 rounded animate-pulse" }),
2391
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 bg-gray-200 rounded animate-pulse" })
2392
+ ] }),
2393
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[400px] bg-gray-200 rounded-2xl animate-pulse" })
2394
+ ] }) });
2395
+ }
2396
+ if (error && apiClient && demoRoomCode) {
2397
+ 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: [
2398
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-medium", children: pageData.errorTitle }),
2399
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm mt-2", children: error.message })
2400
+ ] }) });
2401
+ }
2402
+ 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: [
2403
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
2404
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-[40px] font-bold text-gray-900 leading-tight", children: title }),
2405
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: descriptions.map((desc, index) => /* @__PURE__ */ jsxRuntime.jsx(
2406
+ "p",
2407
+ {
2408
+ className: "text-base text-gray-600 leading-relaxed",
2409
+ children: desc
2410
+ },
2411
+ index
2412
+ )) }),
2413
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
2414
+ /* @__PURE__ */ jsxRuntime.jsxs(
2415
+ "svg",
2416
+ {
2417
+ width: "24",
2418
+ height: "24",
2419
+ viewBox: "0 0 24 24",
2420
+ fill: "none",
2421
+ xmlns: "http://www.w3.org/2000/svg",
2422
+ className: "flex-shrink-0 mt-0.5",
2423
+ children: [
2424
+ /* @__PURE__ */ jsxRuntime.jsx(
2425
+ "rect",
2426
+ {
2427
+ x: "3",
2428
+ y: "3",
2429
+ width: "18",
2430
+ height: "18",
2431
+ rx: "2",
2432
+ stroke: "currentColor",
2433
+ strokeWidth: "2"
2434
+ }
2435
+ ),
2436
+ /* @__PURE__ */ jsxRuntime.jsx(
2437
+ "path",
2438
+ {
2439
+ d: "M8 10H16",
2440
+ stroke: "currentColor",
2441
+ strokeWidth: "2",
2442
+ strokeLinecap: "round"
2443
+ }
2444
+ ),
2445
+ /* @__PURE__ */ jsxRuntime.jsx(
2446
+ "path",
2447
+ {
2448
+ d: "M8 14H16",
2449
+ stroke: "currentColor",
2450
+ strokeWidth: "2",
2451
+ strokeLinecap: "round"
2452
+ }
2453
+ )
2454
+ ]
2455
+ }
2456
+ ),
2457
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base text-gray-900", children: devices })
2458
+ ] }),
2459
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
2460
+ /* @__PURE__ */ jsxRuntime.jsxs(
2461
+ "svg",
2462
+ {
2463
+ width: "24",
2464
+ height: "24",
2465
+ viewBox: "0 0 24 24",
2466
+ fill: "none",
2467
+ xmlns: "http://www.w3.org/2000/svg",
2468
+ className: "flex-shrink-0 mt-0.5",
2469
+ children: [
2470
+ /* @__PURE__ */ jsxRuntime.jsx(
2471
+ "path",
2472
+ {
2473
+ d: "M12 2C8.13 2 5 5.13 5 9C5 14.25 12 22 12 22C12 22 19 14.25 19 9C19 5.13 15.87 2 12 2Z",
2474
+ stroke: "currentColor",
2475
+ strokeWidth: "2",
2476
+ strokeLinecap: "round",
2477
+ strokeLinejoin: "round"
2478
+ }
2479
+ ),
2480
+ /* @__PURE__ */ jsxRuntime.jsx(
2481
+ "circle",
2482
+ {
2483
+ cx: "12",
2484
+ cy: "9",
2485
+ r: "2.5",
2486
+ stroke: "currentColor",
2487
+ strokeWidth: "2"
2488
+ }
2489
+ )
2490
+ ]
2491
+ }
2492
+ ),
2493
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
2494
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-900", children: address }),
2495
+ /* @__PURE__ */ jsxRuntime.jsxs(
2496
+ "a",
2497
+ {
2498
+ href: googleMapsLink,
2499
+ target: "_blank",
2500
+ rel: "noopener noreferrer",
2501
+ className: "inline-flex items-center gap-1 text-sm text-blue-600 hover:text-blue-700 mt-1 underline",
2502
+ children: [
2503
+ pageData.openInGoogleMaps,
2504
+ /* @__PURE__ */ jsxRuntime.jsx(
2505
+ "svg",
2506
+ {
2507
+ width: "12",
2508
+ height: "12",
2509
+ viewBox: "0 0 12 12",
2758
2510
  fill: "none",
2511
+ xmlns: "http://www.w3.org/2000/svg",
2759
2512
  children: /* @__PURE__ */ jsxRuntime.jsx(
2760
2513
  "path",
2761
2514
  {
2762
- d: "M8.29289 5.29289C8.68342 4.90237 9.31643 4.90237 9.70696 5.29289L15.707 11.2929C16.0975 11.6834 16.0975 12.3164 15.707 12.707L9.70696 18.707C9.31643 19.0975 8.68342 19.0975 8.29289 18.707C7.90237 18.3164 7.90237 17.6834 8.29289 17.2929L13.5859 11.9999L8.29289 6.70696C7.90237 6.31643 7.90237 5.68342 8.29289 5.29289Z",
2763
- fill: "#1D1D1F"
2515
+ d: "M3 9L9 3M9 3H3M9 3V9",
2516
+ stroke: "currentColor",
2517
+ strokeWidth: "1.5",
2518
+ strokeLinecap: "round",
2519
+ strokeLinejoin: "round"
2764
2520
  }
2765
2521
  )
2766
2522
  }
2767
2523
  )
2768
- }
2769
- )
2770
- ] })
2771
- ] }),
2772
- /* @__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) => {
2773
- const isAvailable = slot.status === "available";
2774
- const isFull = slot.status === "full";
2775
- const isSelected = selectedTimeslotId === slot.id;
2776
- return /* @__PURE__ */ jsxRuntime.jsx(
2777
- "button",
2778
- {
2779
- disabled: !isAvailable,
2780
- onClick: () => {
2781
- if (isAvailable) {
2782
- setSelectedTimeslotId(slot.id);
2783
- }
2784
- },
2785
- className: `
2786
- rounded-[20px] w-full flex items-center justify-center gap-4 h-[76px]
2787
- border text-center transition-colors
2788
- ${isSelected ? "border-[#3ADB67] bg-[#3ADB67] text-white cursor-pointer" : isAvailable ? "border-[#E4E5E6] hover:border-[#3ADB67] hover:bg-[#3ADB67] hover:text-white cursor-pointer" : "border-[#E4E5E6] bg-[#F5F5F5] text-[#BDBDBD] cursor-not-allowed"}
2789
- `,
2790
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
2791
- /* @__PURE__ */ jsxRuntime.jsx("div", { children: formatTimeslot(slot) }),
2792
- isFull && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-[#BDBDBD] mt-1", children: "Full" }),
2793
- isAvailable && !isSelected && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-[#767880] mt-1", children: [
2794
- slot.capacity - slot.booked_count,
2795
- " spots left"
2796
- ] }),
2797
- isAvailable && isSelected && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-white mt-1", children: [
2798
- slot.capacity - slot.booked_count,
2799
- " spots left"
2800
- ] })
2801
- ] })
2802
- },
2803
- slot.id
2804
- );
2805
- }) })
2524
+ ]
2525
+ }
2526
+ )
2527
+ ] })
2806
2528
  ] })
2807
2529
  ] }),
2808
- showQuestionnaire && questionnaire && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-12", children: [
2809
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[48px] font-bold text-center mb-8", children: "Fill out Form" }),
2810
- questionnaireLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center text-[#767880] py-8", children: "Loading questionnaire..." }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white rounded-[12px] border border-[#E4E5E6] p-8", children: /* @__PURE__ */ jsxRuntime.jsx(
2811
- QuestionnaireForm,
2530
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-[400px] rounded-2xl overflow-hidden", children: images.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
2531
+ react.Swiper,
2532
+ {
2533
+ ...swiperVersion === "11+" && Navigation && Pagination && Autoplay ? { modules: [Navigation, Pagination, Autoplay] } : {},
2534
+ spaceBetween: 0,
2535
+ slidesPerView: 1,
2536
+ navigation: true,
2537
+ pagination: { clickable: true },
2538
+ autoplay: {
2539
+ delay: 3e3,
2540
+ disableOnInteraction: false
2541
+ },
2542
+ loop: true,
2543
+ className: "h-full rounded-2xl",
2544
+ children: images.map((img, index) => /* @__PURE__ */ jsxRuntime.jsx(react.SwiperSlide, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full h-full bg-gray-100", children: /* @__PURE__ */ jsxRuntime.jsx(
2545
+ "img",
2546
+ {
2547
+ src: img,
2548
+ alt: `Demo room view ${index + 1}`,
2549
+ className: "w-full h-full object-cover"
2550
+ }
2551
+ ) }) }, index))
2552
+ }
2553
+ ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center rounded-2xl", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
2554
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-16 h-16 mx-auto mb-3 rounded-full bg-white flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
2555
+ "svg",
2812
2556
  {
2813
- questions: questionnaire.questions,
2814
- loading: bookingLoading,
2815
- onSubmit: async (responses) => {
2816
- try {
2817
- const customerName = responses.name || responses.customer_name || "";
2818
- const customerEmail = responses.email || responses.customer_email || "";
2819
- const customerPhone = responses.phone || responses.customer_phone_number || "";
2820
- const customerPhoneCode = responses.phone_code || responses.customer_phone_code || "+1";
2821
- const result = await createBooking({
2822
- demoroom_code: demoRoomCode,
2823
- timeslot_id: selectedTimeslotId,
2824
- questionnaire_id: questionnaire.id,
2825
- questionnaire_response: responses,
2826
- customer_name: customerName,
2827
- customer_email: customerEmail,
2828
- customer_phone_code: customerPhoneCode,
2829
- customer_phone_number: customerPhone
2830
- });
2831
- if (result && onBookingSuccess) {
2832
- onBookingSuccess(result?.cancel_token);
2557
+ width: "32",
2558
+ height: "32",
2559
+ viewBox: "0 0 32 32",
2560
+ fill: "none",
2561
+ xmlns: "http://www.w3.org/2000/svg",
2562
+ children: [
2563
+ /* @__PURE__ */ jsxRuntime.jsx(
2564
+ "rect",
2565
+ {
2566
+ x: "4",
2567
+ y: "8",
2568
+ width: "24",
2569
+ height: "16",
2570
+ rx: "2",
2571
+ stroke: "currentColor",
2572
+ strokeWidth: "2"
2833
2573
  }
2834
- } catch (error) {
2835
- console.error("Booking creation failed:", error);
2836
- }
2837
- }
2574
+ ),
2575
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "14", r: "2", fill: "currentColor" }),
2576
+ /* @__PURE__ */ jsxRuntime.jsx(
2577
+ "path",
2578
+ {
2579
+ d: "M28 20L22 14L16 20",
2580
+ stroke: "currentColor",
2581
+ strokeWidth: "2",
2582
+ strokeLinecap: "round",
2583
+ strokeLinejoin: "round"
2584
+ }
2585
+ )
2586
+ ]
2838
2587
  }
2839
- ) })
2840
- ] }),
2841
- 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: [
2842
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: "Booking failed" }),
2843
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm mt-1", children: bookingError.message })
2844
- ] })
2845
- ] });
2588
+ ) }),
2589
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-500 text-sm", children: pageData.demoRoomImages })
2590
+ ] }) }) })
2591
+ ] }) });
2846
2592
  };
2847
- var DateTimePicker_default = DateTimePicker;
2593
+ DemoRoomDetail.displayName = "DemoRoomDetail";
2848
2594
  var BookingForm = ({
2849
2595
  layoutClassName,
2850
2596
  className,
2851
2597
  apiConfig,
2852
2598
  demoRoomCode,
2599
+ pageData,
2853
2600
  timezone,
2854
2601
  handleBookingSuccess,
2855
2602
  ...props
@@ -2858,25 +2605,21 @@ var BookingForm = ({
2858
2605
  () => createDemoRoomApi(apiConfig),
2859
2606
  [apiConfig]
2860
2607
  );
2608
+ const dateTimePickerPageData = React2.useMemo(() => ({
2609
+ ...pageData?.dateTimePicker,
2610
+ ...pageData?.questionnaireForm
2611
+ }), [pageData?.dateTimePicker, pageData?.questionnaireForm]);
2861
2612
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
2862
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full", className), ...props, children: [
2863
- /* @__PURE__ */ jsxRuntime.jsx(
2864
- BreadCrumbs,
2865
- {
2866
- className: layoutClassName,
2867
- items: [{ label: "Home", link: "/" }, { label: "Demo Room" }]
2868
- }
2869
- ),
2870
- /* @__PURE__ */ jsxRuntime.jsx(
2871
- DemoRoomDetail,
2872
- {
2873
- className: cn("mt-8", layoutClassName),
2874
- apiClient,
2875
- demoRoomCode,
2876
- locale: apiConfig.locale
2877
- }
2878
- )
2879
- ] }),
2613
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
2614
+ DemoRoomDetail,
2615
+ {
2616
+ className: cn("mt-8", layoutClassName),
2617
+ apiClient,
2618
+ demoRoomCode,
2619
+ locale: apiConfig.locale,
2620
+ pageData: pageData?.demoRoomDetail
2621
+ }
2622
+ ) }),
2880
2623
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-[#f5f5f5]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsx(
2881
2624
  DateTimePicker_default,
2882
2625
  {
@@ -2884,7 +2627,8 @@ var BookingForm = ({
2884
2627
  demoRoomCode,
2885
2628
  timezone,
2886
2629
  locale: apiConfig.locale,
2887
- onBookingSuccess: handleBookingSuccess
2630
+ onBookingSuccess: handleBookingSuccess,
2631
+ pageData: dateTimePickerPageData
2888
2632
  }
2889
2633
  ) }) })
2890
2634
  ] });
@@ -2895,17 +2639,42 @@ var BookingSuccess = ({
2895
2639
  token,
2896
2640
  apiConfig,
2897
2641
  onScheduleAgain,
2898
- className
2642
+ onCancelSuccess,
2643
+ className,
2644
+ pageData = {
2645
+ yourAppointment: "Your Appointment",
2646
+ appointmentCanceled: "This appointment has been canceled.",
2647
+ scheduleAgain: "Schedule again",
2648
+ location: "Location",
2649
+ openInGoogleMaps: "Open in Google Maps \u2197",
2650
+ dateAndTime: "Date and Time",
2651
+ event: "Event",
2652
+ demoRoom: "Demo Room",
2653
+ visitorInfo: "Visitor Info",
2654
+ noPhoneProvided: "No phone provided",
2655
+ cancelAppointment: "Cancel Appointment",
2656
+ cancelDialog: {
2657
+ title: "Are you sure you want to cancel?",
2658
+ description: "You won't be able to restore the schedule.",
2659
+ backButton: "Back",
2660
+ confirmButton: "Cancel Appointment",
2661
+ canceling: "Canceling..."
2662
+ },
2663
+ cancelError: "Failed to cancel appointment. Please try again."
2664
+ }
2899
2665
  }) => {
2900
- const [bookingData, setBookingData] = React2.useState(initialBookingData || null);
2666
+ const [bookingData, setBookingData] = React2.useState(
2667
+ initialBookingData || null
2668
+ );
2901
2669
  const [loading, setLoading] = React2.useState(false);
2902
- const [error, setError] = React2.useState(null);
2903
2670
  const [isCancelled, setIsCancelled] = React2.useState(false);
2671
+ const [showCancelDialog, setShowCancelDialog] = React2.useState(false);
2672
+ const [cancelLoading, setCancelLoading] = React2.useState(false);
2673
+ const [cancelError, setCancelError] = React2.useState(null);
2904
2674
  React2.useEffect(() => {
2905
2675
  if (token && apiConfig && !initialBookingData) {
2906
2676
  const fetchBookingData = async () => {
2907
2677
  setLoading(true);
2908
- setError(null);
2909
2678
  try {
2910
2679
  const apiClient = createDemoRoomApi(apiConfig);
2911
2680
  const booking = await apiClient.getBooking(token, apiConfig.locale);
@@ -2913,7 +2682,6 @@ var BookingSuccess = ({
2913
2682
  setIsCancelled(booking.status === "cancelled");
2914
2683
  } catch (err) {
2915
2684
  console.error("Failed to fetch booking data:", err);
2916
- setError("Failed to load booking information");
2917
2685
  } finally {
2918
2686
  setLoading(false);
2919
2687
  }
@@ -2921,8 +2689,36 @@ var BookingSuccess = ({
2921
2689
  fetchBookingData();
2922
2690
  }
2923
2691
  }, [token, apiConfig, initialBookingData]);
2692
+ const handleCancelAppointment = async () => {
2693
+ if (!token || !apiConfig) {
2694
+ setCancelError(pageData.cancelError || "Unable to cancel: Missing token or API configuration");
2695
+ return;
2696
+ }
2697
+ setCancelLoading(true);
2698
+ setCancelError(null);
2699
+ try {
2700
+ const apiClient = createDemoRoomApi(apiConfig);
2701
+ const cancelledBooking = await apiClient.cancelBooking(
2702
+ token,
2703
+ apiConfig.locale
2704
+ );
2705
+ if (cancelledBooking) {
2706
+ setBookingData(cancelledBooking);
2707
+ }
2708
+ setIsCancelled(true);
2709
+ setShowCancelDialog(false);
2710
+ if (onCancelSuccess && cancelledBooking) {
2711
+ onCancelSuccess(cancelledBooking);
2712
+ }
2713
+ } catch (err) {
2714
+ console.error("Failed to cancel booking:", err);
2715
+ setCancelError(pageData.cancelError || "Failed to cancel appointment. Please try again.");
2716
+ } finally {
2717
+ setCancelLoading(false);
2718
+ }
2719
+ };
2924
2720
  if (loading) {
2925
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `min-h-screen bg-white py-12 px-6 ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-3xl mx-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "animate-pulse space-y-6", children: [
2721
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `min-h-screen py-12 px-6 ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-3xl mx-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "animate-pulse space-y-6", children: [
2926
2722
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 bg-gray-200 rounded w-1/3" }),
2927
2723
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-24 bg-gray-200 rounded" }),
2928
2724
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
@@ -2932,40 +2728,25 @@ var BookingSuccess = ({
2932
2728
  ] })
2933
2729
  ] }) }) });
2934
2730
  }
2935
- if (error || !bookingData) {
2936
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `min-h-screen bg-white py-12 px-6 ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-3xl mx-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-12", children: [
2937
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-6xl mb-4", children: "\u274C" }),
2938
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-bold text-gray-900 mb-2", children: error || "Booking Not Found" }),
2939
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-600 mb-6", children: "We couldn't find your booking information." }),
2940
- onScheduleAgain && /* @__PURE__ */ jsxRuntime.jsx(
2941
- "button",
2942
- {
2943
- onClick: onScheduleAgain,
2944
- className: "px-6 py-3 bg-black text-white rounded-full font-medium hover:bg-gray-800 transition-colors",
2945
- children: "Schedule Again"
2946
- }
2947
- )
2948
- ] }) }) });
2731
+ if (!bookingData) {
2732
+ return null;
2949
2733
  }
2950
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `min-h-screen bg-white py-12 px-6 ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-3xl mx-auto", children: [
2951
- /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-[40px] font-bold text-gray-900 mb-8", children: "Your Appointment" }),
2952
- isCancelled ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-gray-50 rounded-lg p-6 mb-8 flex items-center justify-between", children: [
2953
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-700", children: "This appointment has been canceled." }),
2734
+ 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: [
2735
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-[40px] font-bold text-gray-900 mb-8", children: pageData.yourAppointment }),
2736
+ isCancelled && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-lg p-6 mb-8 flex items-center justify-between", children: [
2737
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-700", children: pageData.appointmentCanceled }),
2954
2738
  onScheduleAgain && /* @__PURE__ */ jsxRuntime.jsx(
2955
2739
  "button",
2956
2740
  {
2957
2741
  onClick: onScheduleAgain,
2958
2742
  className: "px-6 py-3 bg-black text-white rounded-full font-medium hover:bg-gray-800 transition-colors whitespace-nowrap",
2959
- children: "Schedule again"
2743
+ children: pageData.scheduleAgain
2960
2744
  }
2961
2745
  )
2962
- ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-green-50 rounded-lg p-6 mb-8 flex items-center justify-between border border-green-200", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
2963
- /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-6 h-6 text-green-600", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
2964
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-700", children: "Your appointment has been confirmed." })
2965
- ] }) }),
2966
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-8", children: [
2746
+ ] }),
2747
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-8 bg-white px-[48px] py-[32px] rounded-lg", children: [
2967
2748
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
2968
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: "Location" }),
2749
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: pageData.location }),
2969
2750
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
2970
2751
  bookingData.demoroom_name && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base font-medium text-gray-900", children: bookingData.demoroom_name }),
2971
2752
  bookingData.address && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-600", children: bookingData.address }),
@@ -2976,13 +2757,13 @@ var BookingSuccess = ({
2976
2757
  target: "_blank",
2977
2758
  rel: "noopener noreferrer",
2978
2759
  className: "inline-flex items-center gap-1 text-base text-blue-600 hover:text-blue-700 hover:underline",
2979
- children: "Open in Google Maps \u2197"
2760
+ children: pageData.openInGoogleMaps
2980
2761
  }
2981
2762
  )
2982
2763
  ] })
2983
2764
  ] }),
2984
2765
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
2985
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: "Date and Time" }),
2766
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: pageData.dateAndTime }),
2986
2767
  /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-base text-gray-900", children: [
2987
2768
  bookingData.booking_date,
2988
2769
  bookingData.time_slot && `, ${bookingData.time_slot}`,
@@ -2990,48 +2771,185 @@ var BookingSuccess = ({
2990
2771
  ] })
2991
2772
  ] }),
2992
2773
  bookingData.equipment && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
2993
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: "Event" }),
2774
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: pageData.event }),
2994
2775
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-900", children: bookingData.equipment })
2995
2776
  ] }),
2996
2777
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
2997
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: "Demo Room" }),
2778
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: pageData.demoRoom }),
2998
2779
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-900", children: bookingData.demoroom_code })
2999
2780
  ] }),
3000
2781
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
3001
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: "Visitor Info" }),
2782
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: pageData.visitorInfo }),
3002
2783
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
3003
2784
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-900", children: bookingData.customer_name }),
3004
2785
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-base text-gray-600", children: [
3005
- /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx(
3006
- "path",
2786
+ /* @__PURE__ */ jsxRuntime.jsx(
2787
+ "svg",
3007
2788
  {
3008
- strokeLinecap: "round",
3009
- strokeLinejoin: "round",
3010
- strokeWidth: 2,
3011
- d: "M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
2789
+ className: "w-5 h-5",
2790
+ fill: "none",
2791
+ viewBox: "0 0 24 24",
2792
+ stroke: "currentColor",
2793
+ children: /* @__PURE__ */ jsxRuntime.jsx(
2794
+ "path",
2795
+ {
2796
+ strokeLinecap: "round",
2797
+ strokeLinejoin: "round",
2798
+ strokeWidth: 2,
2799
+ d: "M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
2800
+ }
2801
+ )
3012
2802
  }
3013
- ) }),
2803
+ ),
3014
2804
  bookingData.phone_code && bookingData.phone_number ? /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
3015
2805
  bookingData.phone_code,
3016
2806
  " ",
3017
2807
  bookingData.phone_number
3018
- ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: "No phone provided" })
2808
+ ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: pageData.noPhoneProvided })
3019
2809
  ] }),
3020
2810
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-base text-gray-600", children: [
3021
- /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx(
3022
- "path",
2811
+ /* @__PURE__ */ jsxRuntime.jsx(
2812
+ "svg",
3023
2813
  {
3024
- strokeLinecap: "round",
3025
- strokeLinejoin: "round",
3026
- strokeWidth: 2,
3027
- d: "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
2814
+ className: "w-5 h-5",
2815
+ fill: "none",
2816
+ viewBox: "0 0 24 24",
2817
+ stroke: "currentColor",
2818
+ children: /* @__PURE__ */ jsxRuntime.jsx(
2819
+ "path",
2820
+ {
2821
+ strokeLinecap: "round",
2822
+ strokeLinejoin: "round",
2823
+ strokeWidth: 2,
2824
+ d: "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
2825
+ }
2826
+ )
3028
2827
  }
3029
- ) }),
2828
+ ),
3030
2829
  /* @__PURE__ */ jsxRuntime.jsx("span", { children: bookingData.customer_email })
3031
2830
  ] })
3032
2831
  ] })
3033
2832
  ] })
3034
- ] })
2833
+ ] }),
2834
+ !isCancelled && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-[64px]", children: [
2835
+ /* @__PURE__ */ jsxRuntime.jsx(
2836
+ "button",
2837
+ {
2838
+ onClick: () => setShowCancelDialog(true),
2839
+ disabled: cancelLoading,
2840
+ 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",
2841
+ children: pageData.cancelAppointment
2842
+ }
2843
+ ),
2844
+ cancelError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm mt-2", style: { color: "#FF4D4D" }, children: cancelError })
2845
+ ] }),
2846
+ showCancelDialog && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 px-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-[24px] max-w-[400px] p-8 shadow-xl relative", children: [
2847
+ /* @__PURE__ */ jsxRuntime.jsx(
2848
+ "button",
2849
+ {
2850
+ onClick: () => setShowCancelDialog(false),
2851
+ disabled: cancelLoading,
2852
+ className: "absolute top-6 right-[30px] w-8 h-8 flex items-center justify-center text-gray-400 hover:text-gray-600 transition-colors disabled:opacity-50",
2853
+ "aria-label": "Close",
2854
+ children: /* @__PURE__ */ jsxRuntime.jsx(
2855
+ "svg",
2856
+ {
2857
+ width: "24",
2858
+ height: "24",
2859
+ viewBox: "0 0 24 24",
2860
+ fill: "none",
2861
+ xmlns: "http://www.w3.org/2000/svg",
2862
+ children: /* @__PURE__ */ jsxRuntime.jsx(
2863
+ "path",
2864
+ {
2865
+ d: "M18 6L6 18M6 6L18 18",
2866
+ stroke: "currentColor",
2867
+ strokeWidth: "2",
2868
+ strokeLinecap: "round",
2869
+ strokeLinejoin: "round"
2870
+ }
2871
+ )
2872
+ }
2873
+ )
2874
+ }
2875
+ ),
2876
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center mb-6", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-16 h-16 rounded-full bg-[#F59E0B] flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
2877
+ "svg",
2878
+ {
2879
+ width: "32",
2880
+ height: "32",
2881
+ viewBox: "0 0 32 32",
2882
+ fill: "none",
2883
+ xmlns: "http://www.w3.org/2000/svg",
2884
+ children: /* @__PURE__ */ jsxRuntime.jsx(
2885
+ "path",
2886
+ {
2887
+ d: "M16 10V17M16 22H16.01",
2888
+ stroke: "white",
2889
+ strokeWidth: "3",
2890
+ strokeLinecap: "round",
2891
+ strokeLinejoin: "round"
2892
+ }
2893
+ )
2894
+ }
2895
+ ) }) }),
2896
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center mb-8", children: [
2897
+ /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[18px] font-semibold text-gray-900 mb-2", children: pageData.cancelDialog?.title }),
2898
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[14px] text-gray-600", children: pageData.cancelDialog?.description })
2899
+ ] }),
2900
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 justify-center", children: [
2901
+ /* @__PURE__ */ jsxRuntime.jsx(
2902
+ "button",
2903
+ {
2904
+ onClick: () => setShowCancelDialog(false),
2905
+ disabled: cancelLoading,
2906
+ 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]",
2907
+ children: pageData.cancelDialog?.backButton
2908
+ }
2909
+ ),
2910
+ /* @__PURE__ */ jsxRuntime.jsx(
2911
+ "button",
2912
+ {
2913
+ onClick: handleCancelAppointment,
2914
+ disabled: cancelLoading,
2915
+ className: "px-8 py-3 bg-black text-white rounded-full font-medium hover:bg-gray-800 transition-colors disabled:opacity-50 flex items-center gap-2 min-w-[180px] justify-center",
2916
+ children: cancelLoading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
2917
+ /* @__PURE__ */ jsxRuntime.jsxs(
2918
+ "svg",
2919
+ {
2920
+ className: "animate-spin h-5 w-5",
2921
+ xmlns: "http://www.w3.org/2000/svg",
2922
+ fill: "none",
2923
+ viewBox: "0 0 24 24",
2924
+ children: [
2925
+ /* @__PURE__ */ jsxRuntime.jsx(
2926
+ "circle",
2927
+ {
2928
+ className: "opacity-25",
2929
+ cx: "12",
2930
+ cy: "12",
2931
+ r: "10",
2932
+ stroke: "currentColor",
2933
+ strokeWidth: "4"
2934
+ }
2935
+ ),
2936
+ /* @__PURE__ */ jsxRuntime.jsx(
2937
+ "path",
2938
+ {
2939
+ className: "opacity-75",
2940
+ fill: "currentColor",
2941
+ d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
2942
+ }
2943
+ )
2944
+ ]
2945
+ }
2946
+ ),
2947
+ pageData.cancelDialog?.canceling
2948
+ ] }) : pageData.cancelDialog?.confirmButton
2949
+ }
2950
+ )
2951
+ ] })
2952
+ ] }) })
3035
2953
  ] }) });
3036
2954
  };
3037
2955
 
@@ -3177,7 +3095,6 @@ exports.BookingForm = BookingForm;
3177
3095
  exports.BookingSuccess = BookingSuccess;
3178
3096
  exports.DemoRoom = DemoRoom;
3179
3097
  exports.DemoRoomApiClient = DemoRoomApiClient;
3180
- exports.DemoRoomDetail = DemoRoomDetail;
3181
3098
  exports.ThemeProvider = ThemeProvider;
3182
3099
  exports.cn = cn;
3183
3100
  exports.createDemoRoomApi = createDemoRoomApi;