@anker-in/ui 0.1.10 → 0.1.12

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 (11) hide show
  1. package/dist/demo-room.js +208 -177
  2. package/dist/demo-room.js.map +1 -1
  3. package/dist/demo-room.mjs +208 -177
  4. package/dist/demo-room.mjs.map +1 -1
  5. package/dist/index.d.mts +8 -3
  6. package/dist/index.d.ts +8 -3
  7. package/dist/index.js +518 -431
  8. package/dist/index.js.map +1 -1
  9. package/dist/index.mjs +518 -431
  10. package/dist/index.mjs.map +1 -1
  11. package/package.json +3 -4
package/dist/index.js CHANGED
@@ -15,6 +15,10 @@ var dayLocaleData = require('dayjs/plugin/localeData');
15
15
  var weekday = require('dayjs/plugin/weekday');
16
16
  var weekOfYear = require('dayjs/plugin/weekOfYear');
17
17
  var react = require('swiper/react');
18
+ var modules = require('swiper/modules');
19
+ require('swiper/css');
20
+ require('swiper/css/navigation');
21
+ require('swiper/css/pagination');
18
22
 
19
23
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
20
24
 
@@ -26,12 +30,6 @@ var dayLocaleData__default = /*#__PURE__*/_interopDefault(dayLocaleData);
26
30
  var weekday__default = /*#__PURE__*/_interopDefault(weekday);
27
31
  var weekOfYear__default = /*#__PURE__*/_interopDefault(weekOfYear);
28
32
 
29
- var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
30
- get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
31
- }) : x)(function(x) {
32
- if (typeof require !== "undefined") return require.apply(this, arguments);
33
- throw Error('Dynamic require of "' + x + '" is not supported');
34
- });
35
33
  function cn(...inputs) {
36
34
  return tailwindMerge.twMerge(clsx.clsx(inputs));
37
35
  }
@@ -74,7 +72,7 @@ var StudioCard = ({
74
72
  {
75
73
  ...props,
76
74
  className: cn(
77
- "p-6 cursor-pointer transition-colors duration-200",
75
+ "p-6 cursor-pointer transition-colors duration-200 border-b border-[#E4E5E6] last:border-b-0",
78
76
  className
79
77
  ),
80
78
  style: {
@@ -91,8 +89,8 @@ var StudioCard = ({
91
89
  },
92
90
  children: [
93
91
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between mb-4", children: [
94
- /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-semibold text-gray-900", children: name }),
95
- 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: [
92
+ /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[24px] l:text-[20px] font-bold text-[#080A0F]", children: name }),
93
+ distance !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[16px] l:text-[14px] font-medium text-[#2E8B57] bg-[#E8F5E9] px-3 py-1 rounded-full whitespace-nowrap ml-2", children: [
96
94
  formatDistance(distance),
97
95
  " ",
98
96
  pageData.away
@@ -151,7 +149,7 @@ var StudioCard = ({
151
149
  ]
152
150
  }
153
151
  ),
154
- /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-gray-600", children: [
152
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-[16px] l:text-[12px] text-[#2A2C32]", children: [
155
153
  availableTime === pageData.noAvailableTime ? "" : pageData.available,
156
154
  " ",
157
155
  availableTime
@@ -187,7 +185,7 @@ var StudioCard = ({
187
185
  ]
188
186
  }
189
187
  ),
190
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-600 break-words", children: address }) })
188
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[16px] l:text-[14px] text-[#2A2C32] break-words", children: address }) })
191
189
  ] }),
192
190
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 mb-6", children: [
193
191
  /* @__PURE__ */ jsxRuntime.jsxs(
@@ -195,55 +193,44 @@ var StudioCard = ({
195
193
  {
196
194
  width: "20",
197
195
  height: "20",
198
- viewBox: "0 0 20 20",
196
+ viewBox: "0 0 24 24",
199
197
  fill: "none",
200
198
  xmlns: "http://www.w3.org/2000/svg",
201
199
  className: "flex-shrink-0 mt-0.5",
202
200
  children: [
203
- /* @__PURE__ */ jsxRuntime.jsx(
204
- "rect",
205
- {
206
- x: "3",
207
- y: "5",
208
- width: "14",
209
- height: "10",
210
- rx: "1.5",
211
- stroke: "currentColor",
212
- strokeWidth: "1.5"
213
- }
214
- ),
215
201
  /* @__PURE__ */ jsxRuntime.jsx(
216
202
  "path",
217
203
  {
218
- d: "M7 15V17",
204
+ d: "M14.4643 7.4929H9.65565M3.16391 18.7132H20.8171C22.0122 18.7132 22.981 17.7563 22.981 16.576L23 13.8348L22.981 6.42431C22.981 5.24396 22.0122 4.28711 20.8171 4.28711H3.16391C1.96882 4.28711 1 5.24396 1 6.42431V16.576C1 17.7563 1.96882 18.7132 3.16391 18.7132Z",
219
205
  stroke: "currentColor",
220
- strokeWidth: "1.5",
221
- strokeLinecap: "round"
206
+ strokeWidth: "2",
207
+ strokeLinecap: "round",
208
+ strokeLinejoin: "round"
222
209
  }
223
210
  ),
224
211
  /* @__PURE__ */ jsxRuntime.jsx(
225
212
  "path",
226
213
  {
227
- d: "M13 15V17",
214
+ d: "M5.32812 18.2325V14.4238C5.32812 13.8715 5.77584 13.4238 6.32813 13.4238H17.7925C18.3447 13.4238 18.7925 13.8715 18.7925 14.4238V18.2325",
228
215
  stroke: "currentColor",
229
- strokeWidth: "1.5",
230
- strokeLinecap: "round"
216
+ strokeWidth: "2",
217
+ strokeLinecap: "round",
218
+ strokeLinejoin: "round"
231
219
  }
232
- ),
233
- /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "10", cy: "10", r: "1.5", fill: "currentColor" })
220
+ )
234
221
  ]
235
222
  }
236
223
  ),
237
- /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-600", children: euifyMakeModel }) })
224
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[16px] l:text-[14px] text-[#2A2C32]", children: euifyMakeModel }) })
238
225
  ] }),
239
226
  /* @__PURE__ */ jsxRuntime.jsx(
240
227
  "button",
241
228
  {
242
229
  onClick: handleScheduleClick,
243
230
  className: cn(
244
- "w-full px-6 py-3 rounded-full",
245
- "bg-white text-gray-900 border border-gray-900",
246
- "font-medium text-sm",
231
+ "w-fit px-[28px] l:px-[20px] l:py-[8px] py-3 rounded-full",
232
+ "bg-white text-gray-900 border-2 border-gray-900",
233
+ "font-bold text-[16px] l:text-[14px]",
247
234
  "hover:bg-gray-900 hover:text-white",
248
235
  "transition-all duration-200"
249
236
  ),
@@ -381,41 +368,53 @@ var StudioMap = ({
381
368
  marker.addListener("click", () => {
382
369
  setSelectedLocation(location);
383
370
  const content = `
384
- <div style="padding: 16px; max-width: 300px; font-family: system-ui, sans-serif;">
385
- <h3 style="margin: 0 0 12px 0; font-size: 18px; font-weight: 600;">${location.name}</h3>
386
- ${location.availableTime ? `<div style="margin-bottom: 8px; color: #666;">
387
- <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
388
- <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"/>
371
+ <div style="padding: 0 16px 16px 16px; font-weight: 700; font-family: 'MontForAnker'; max-width: 420px;">
372
+ <h3 style="margin: 0 0 16px 0; font-size: 24px; color: #080A0F;">${location.name}</h3>
373
+ ${location.availableTime ? `<div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px;">
374
+ <svg style="flex-shrink: 0; margin-top: 2px;" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
375
+ <rect x="3" y="4" width="14" height="13" rx="2" stroke="currentColor" stroke-width="1.5"/>
376
+ <path d="M3 8H17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
377
+ <path d="M6 2V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
378
+ <path d="M14 2V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
389
379
  </svg>
390
- <span style="vertical-align: middle;"> ${location.availableTime === pageData?.noAvailableTime ? "" : pageData.available} ${location.availableTime}</span>
380
+ <div>
381
+ <p style="margin: 0; font-size: 16px; color: #2A2C32;">${location.availableTime === pageData?.noAvailableTime ? "" : pageData.available} ${location.availableTime}</p>
382
+ </div>
391
383
  </div>` : ""}
392
- <div style="margin-bottom: 8px; color: #666;">
393
- <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
394
- <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"/>
384
+ <div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px;">
385
+ <svg style="flex-shrink: 0; margin-top: 2px;" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
386
+ <path d="M10 10C11.1046 10 12 9.10457 12 8C12 6.89543 11.1046 6 10 6C8.89543 6 8 6.89543 8 8C8 9.10457 8.89543 10 10 10Z" stroke="currentColor" stroke-width="1.5"/>
387
+ <path d="M10 18C10 18 16 13 16 8C16 4.68629 13.3137 2 10 2C6.68629 2 4 4.68629 4 8C4 13 10 18 10 18Z" stroke="currentColor" stroke-width="1.5"/>
395
388
  </svg>
396
- <span style="vertical-align: middle;">${location.address}</span>
389
+ <div style="flex: 1;">
390
+ <p style="margin: 0; font-size: 16px; color: #2A2C32; word-wrap: break-word;">${location.address}</p>
391
+ </div>
397
392
  </div>
398
- ${location.euifyMakeModel ? `<div style="margin-bottom: 12px; color: #666;">
399
- <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
400
- <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"/>
393
+ ${location.euifyMakeModel ? `<div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 24px;">
394
+ <svg style="flex-shrink: 0; margin-top: 2px;" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
395
+ <path d="M14.4643 7.4929H9.65565M3.16391 18.7132H20.8171C22.0122 18.7132 22.981 17.7563 22.981 16.576L23 13.8348L22.981 6.42431C22.981 5.24396 22.0122 4.28711 20.8171 4.28711H3.16391C1.96882 4.28711 1 5.24396 1 6.42431V16.576C1 17.7563 1.96882 18.7132 3.16391 18.7132Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
396
+ <path d="M5.32812 18.2325V14.4238C5.32812 13.8715 5.77584 13.4238 6.32813 13.4238H17.7925C18.3447 13.4238 18.7925 13.8715 18.7925 14.4238V18.2325" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
401
397
  </svg>
402
- <span style="vertical-align: middle;">${location.euifyMakeModel}</span>
398
+ <div>
399
+ <p style="margin: 0; font-size: 16px; color: #2A2C32;">${location.euifyMakeModel}</p>
400
+ </div>
403
401
  </div>` : ""}
404
402
  <button
405
403
  id="schedule-btn-${location.id}"
406
404
  style="
407
- width: 100%;
408
- padding: 10px 16px;
409
- background: #000;
410
- color: #fff;
411
- border: none;
412
- border-radius: 6px;
413
- font-weight: 500;
405
+ width: fit-content;
406
+ padding: 12px 28px;
407
+ background: #fff;
408
+ color: #111827;
409
+ border: 2px solid #111827;
410
+ border-radius: 9999px;
411
+ font-weight: 700;
414
412
  cursor: pointer;
415
- font-size: 14px;
413
+ font-size: 16px;
414
+ transition: all 0.2s;
416
415
  "
417
- onmouseover="this.style.background='#333'"
418
- onmouseout="this.style.background='#000'"
416
+ onmouseover="this.style.background='#111827'; this.style.color='#fff';"
417
+ onmouseout="this.style.background='#fff'; this.style.color='#111827';"
419
418
  >
420
419
  ${pageData.scheduleNow}
421
420
  </button>
@@ -467,41 +466,53 @@ var StudioMap = ({
467
466
  const marker = markersRef.current[markerIndex];
468
467
  if (location && marker) {
469
468
  const content = `
470
- <div style="padding: 16px; max-width: 300px; font-family: system-ui, sans-serif;">
471
- <h3 style="margin: 0 0 12px 0; font-size: 18px; font-weight: 600;">${location.name}</h3>
472
- ${location.availableTime ? `<div style="margin-bottom: 8px; color: #666;">
473
- <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
474
- <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"/>
469
+ <div style="padding: 0 16px 16px 16px; font-weight: 700; font-family: 'MontForAnker'; max-width: 420px;">
470
+ <h3 style="margin: 0 0 16px 0; font-size: 24px; color: #080A0F;">${location.name}</h3>
471
+ ${location.availableTime ? `<div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px;">
472
+ <svg style="flex-shrink: 0; margin-top: 2px;" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
473
+ <rect x="3" y="4" width="14" height="13" rx="2" stroke="currentColor" stroke-width="1.5"/>
474
+ <path d="M3 8H17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
475
+ <path d="M6 2V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
476
+ <path d="M14 2V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
475
477
  </svg>
476
- <span style="vertical-align: middle;">${pageData.available} ${location.availableTime}</span>
478
+ <div>
479
+ <p style="margin: 0;font-size: 16px; color: #2A2C32;">${location.availableTime === pageData?.noAvailableTime ? "" : pageData.available} ${location.availableTime}</p>
480
+ </div>
477
481
  </div>` : ""}
478
- <div style="margin-bottom: 8px; color: #666;">
479
- <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
480
- <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"/>
482
+ <div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px;">
483
+ <svg style="flex-shrink: 0; margin-top: 2px;" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
484
+ <path d="M10 10C11.1046 10 12 9.10457 12 8C12 6.89543 11.1046 6 10 6C8.89543 6 8 6.89543 8 8C8 9.10457 8.89543 10 10 10Z" stroke="currentColor" stroke-width="1.5"/>
485
+ <path d="M10 18C10 18 16 13 16 8C16 4.68629 13.3137 2 10 2C6.68629 2 4 4.68629 4 8C4 13 10 18 10 18Z" stroke="currentColor" stroke-width="1.5"/>
481
486
  </svg>
482
- <span style="vertical-align: middle;">${location.address}</span>
487
+ <div style="flex: 1;">
488
+ <p style="margin: 0; font-size: 16px; color: #2A2C32; word-wrap: break-word;">${location.address}</p>
489
+ </div>
483
490
  </div>
484
- ${location.euifyMakeModel ? `<div style="margin-bottom: 12px; color: #666;">
485
- <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
486
- <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"/>
491
+ ${location.euifyMakeModel ? `<div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 24px;">
492
+ <svg style="flex-shrink: 0; margin-top: 2px;" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
493
+ <path d="M14.4643 7.4929H9.65565M3.16391 18.7132H20.8171C22.0122 18.7132 22.981 17.7563 22.981 16.576L23 13.8348L22.981 6.42431C22.981 5.24396 22.0122 4.28711 20.8171 4.28711H3.16391C1.96882 4.28711 1 5.24396 1 6.42431V16.576C1 17.7563 1.96882 18.7132 3.16391 18.7132Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
494
+ <path d="M5.32812 18.2325V14.4238C5.32812 13.8715 5.77584 13.4238 6.32813 13.4238H17.7925C18.3447 13.4238 18.7925 13.8715 18.7925 14.4238V18.2325" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
487
495
  </svg>
488
- <span style="vertical-align: middle;">${location.euifyMakeModel}</span>
496
+ <div>
497
+ <p style="margin: 0; font-size: 16px; color: #2A2C32;">${location.euifyMakeModel}</p>
498
+ </div>
489
499
  </div>` : ""}
490
500
  <button
491
501
  id="schedule-btn-hover-${location.id}"
492
502
  style="
493
- width: 100%;
494
- padding: 10px 16px;
495
- background: #000;
496
- color: #fff;
497
- border: none;
498
- border-radius: 6px;
499
- font-weight: 500;
503
+ width: fit-content;
504
+ padding: 12px 28px;
505
+ background: #fff;
506
+ color: #111827;
507
+ border: 2px solid #111827;
508
+ border-radius: 9999px;
509
+ font-weight: 700;
500
510
  cursor: pointer;
501
- font-size: 14px;
511
+ font-size: 16px;
512
+ transition: all 0.2s;
502
513
  "
503
- onmouseover="this.style.background='#333'"
504
- onmouseout="this.style.background='#000'"
514
+ onmouseover="this.style.background='#111827'; this.style.color='#fff';"
515
+ onmouseout="this.style.background='#fff'; this.style.color='#111827';"
505
516
  >
506
517
  ${pageData.scheduleNow}
507
518
  </button>
@@ -534,7 +545,7 @@ var StudioMap = ({
534
545
  "div",
535
546
  {
536
547
  className: cn(
537
- "flex items-center justify-center bg-gray-100 rounded-lg",
548
+ "flex items-center overflow-hidden justify-center bg-gray-100 rounded-[16px]",
538
549
  className
539
550
  ),
540
551
  style: { height: mapHeight },
@@ -546,7 +557,7 @@ var StudioMap = ({
546
557
  return /* @__PURE__ */ jsxRuntime.jsxs(
547
558
  "div",
548
559
  {
549
- className: cn("relative w-full rounded-lg overflow-hidden", className),
560
+ className: cn("relative w-full rounded-[16px] overflow-hidden", className),
550
561
  ...props,
551
562
  children: [
552
563
  /* @__PURE__ */ jsxRuntime.jsx("div", { ref: mapRef, style: { height: mapHeight } }),
@@ -951,6 +962,29 @@ var LocationFilter = ({
951
962
  );
952
963
  const showIndexBar = filteredItems.length >= 10;
953
964
  const handleItemClick = (item) => {
965
+ if (item.code === "__all__") {
966
+ if (currentLevel === "country") {
967
+ onSelect?.({
968
+ level: "country"
969
+ });
970
+ onClose?.();
971
+ } else if (currentLevel === "state") {
972
+ onSelect?.({
973
+ level: "state",
974
+ country: selectedCountry
975
+ });
976
+ onClose?.();
977
+ } else if (currentLevel === "city") {
978
+ const parts = selectedState?.split("/") || [];
979
+ onSelect?.({
980
+ level: "city",
981
+ country: parts[0],
982
+ state: parts[1]
983
+ });
984
+ onClose?.();
985
+ }
986
+ return;
987
+ }
954
988
  if (currentLevel === "country") {
955
989
  setSelectedCountry(item.code);
956
990
  setCurrentLevel("state");
@@ -981,104 +1015,104 @@ var LocationFilter = ({
981
1015
  return /* @__PURE__ */ jsxRuntime.jsxs(
982
1016
  "div",
983
1017
  {
984
- style: { height: "794px" },
1018
+ style: { height: "724px" },
985
1019
  className: cn(
986
- "w-full rounded-[12px] absolute z-10 top-0 left-0 bg-white border border-[#E4E5E6]",
1020
+ "w-full rounded-b-[12px] absolute z-10 bottom-[-2px] left-0 bg-white border border-[#E4E5E6]",
987
1021
  RoomsList_default.antdMobileScope
988
1022
  ),
989
1023
  children: [
990
- /* @__PURE__ */ jsxRuntime.jsxs(
1024
+ /* @__PURE__ */ jsxRuntime.jsx(
991
1025
  "div",
992
1026
  {
993
1027
  style: { background: "#F8F8F8" },
994
- className: "rounded-[12px] rounded-b-none h-[72px] font-bold text-[14px] flex flex-col",
995
- children: [
996
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-end px-[20px] pt-[12px] pb-[8px]", children: /* @__PURE__ */ jsxRuntime.jsx(
1028
+ className: "h-[76px] font-bold text-[14px] flex flex-col",
1029
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center text-[16px] px-[20px] gap-[16px] py-[24px]", children: [
1030
+ /* @__PURE__ */ jsxRuntime.jsx(
997
1031
  "button",
998
1032
  {
999
- onClick: onClose,
1000
- className: "ml-[12px] w-[24px] h-[24px] flex items-center justify-end",
1001
- children: /* @__PURE__ */ jsxRuntime.jsx(
1002
- "svg",
1003
- {
1004
- xmlns: "http://www.w3.org/2000/svg",
1005
- width: "24",
1006
- height: "24",
1007
- viewBox: "0 0 24 24",
1008
- fill: "none",
1009
- children: /* @__PURE__ */ jsxRuntime.jsx(
1010
- "path",
1011
- {
1012
- 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",
1013
- fill: "#1D1D1F"
1014
- }
1015
- )
1016
- }
1017
- )
1033
+ onClick: () => handleTabClick("country"),
1034
+ className: cn(
1035
+ "pb-[4px] transition-colors",
1036
+ currentLevel === "country" ? "text-[#080A0F] border-b-2 border-[#3ADB67]" : "text-[#080A0F]"
1037
+ ),
1038
+ children: pageData.country
1018
1039
  }
1019
- ) }),
1020
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center px-[20px] gap-[16px] pb-[8px]", children: [
1021
- /* @__PURE__ */ jsxRuntime.jsx(
1022
- "button",
1023
- {
1024
- onClick: () => handleTabClick("country"),
1025
- className: cn(
1026
- "pb-[4px] transition-colors",
1027
- currentLevel === "country" ? "text-[#1D1D1F] border-b-2 border-[#2E8B57]" : "text-[#767880]"
1028
- ),
1029
- children: pageData.country
1030
- }
1031
- ),
1032
- /* @__PURE__ */ jsxRuntime.jsx(
1033
- "button",
1034
- {
1035
- onClick: () => handleTabClick("state"),
1036
- disabled: !selectedCountry,
1037
- className: cn(
1038
- "pb-[4px] transition-colors",
1039
- currentLevel === "state" ? "text-[#1D1D1F] border-b-2 border-[#2E8B57]" : "text-[#767880]",
1040
- !selectedCountry && "opacity-50 cursor-not-allowed"
1041
- ),
1042
- children: pageData.state
1043
- }
1044
- ),
1045
- /* @__PURE__ */ jsxRuntime.jsx(
1046
- "button",
1047
- {
1048
- onClick: () => handleTabClick("city"),
1049
- disabled: !selectedState,
1050
- className: cn(
1051
- "pb-[4px] transition-colors",
1052
- currentLevel === "city" ? "text-[#1D1D1F] border-b-2 border-[#2E8B57]" : "text-[#767880]",
1053
- !selectedState && "opacity-50 cursor-not-allowed"
1054
- ),
1055
- children: pageData.city
1056
- }
1057
- )
1058
- ] })
1059
- ]
1040
+ ),
1041
+ /* @__PURE__ */ jsxRuntime.jsx(
1042
+ "button",
1043
+ {
1044
+ onClick: () => handleTabClick("state"),
1045
+ disabled: !selectedCountry,
1046
+ className: cn(
1047
+ "pb-[4px] transition-colors",
1048
+ currentLevel === "state" ? "text-[#080A0F] border-b-2 border-[#3ADB67]" : "text-[#080A0F]",
1049
+ !selectedCountry && "opacity-50 cursor-not-allowed"
1050
+ ),
1051
+ children: pageData.state
1052
+ }
1053
+ ),
1054
+ /* @__PURE__ */ jsxRuntime.jsx(
1055
+ "button",
1056
+ {
1057
+ onClick: () => handleTabClick("city"),
1058
+ disabled: !selectedState,
1059
+ className: cn(
1060
+ "pb-[4px] transition-colors",
1061
+ currentLevel === "city" ? "text-[#080A0F] border-b-2 border-[#3ADB67]" : "text-[#080A0F]",
1062
+ !selectedState && "opacity-50 cursor-not-allowed"
1063
+ ),
1064
+ children: pageData.city
1065
+ }
1066
+ )
1067
+ ] })
1060
1068
  }
1061
1069
  ),
1062
- /* @__PURE__ */ jsxRuntime.jsx(AntdMobileIsolated, { style: { height: "calc(100% - 72px)" }, children: showIndexBar ? /* @__PURE__ */ jsxRuntime.jsx(IndexBar__default.default, { style: { height: "100%" }, children: groupedItems.map((group) => {
1063
- const { title, items } = group;
1064
- 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(
1070
+ /* @__PURE__ */ jsxRuntime.jsx(AntdMobileIsolated, { style: { height: "calc(100% - 76px)" }, children: showIndexBar ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { height: "100%", display: "flex", flexDirection: "column" }, children: [
1071
+ /* @__PURE__ */ jsxRuntime.jsx(List__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(
1072
+ List__default.default.Item,
1073
+ {
1074
+ onClick: () => handleItemClick({ code: "__all__", name: pageData.allLocations || "All", count: filteredItems.length }),
1075
+ className: "text-[16px] !pl-[24px] font-bold",
1076
+ style: { cursor: "pointer", borderBottom: "1px solid #E4E5E6" },
1077
+ children: pageData.allLocations
1078
+ },
1079
+ "__all__"
1080
+ ) }),
1081
+ /* @__PURE__ */ jsxRuntime.jsx(IndexBar__default.default, { style: { flex: 1 }, children: groupedItems.map((group) => {
1082
+ const { title, items } = group;
1083
+ 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(
1084
+ List__default.default.Item,
1085
+ {
1086
+ onClick: () => handleItemClick(item),
1087
+ className: "text-[16px] !pl-[24px]",
1088
+ style: { cursor: "pointer" },
1089
+ children: item.name
1090
+ },
1091
+ item.code
1092
+ )) }) }, title);
1093
+ }) })
1094
+ ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: "100%", overflow: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsxs(List__default.default, { children: [
1095
+ /* @__PURE__ */ jsxRuntime.jsx(
1096
+ List__default.default.Item,
1097
+ {
1098
+ onClick: () => handleItemClick({ code: "__all__", name: pageData.allLocations || "All", count: filteredItems.length }),
1099
+ className: "text-[16px] !pl-[24px] font-bold",
1100
+ style: { cursor: "pointer", borderBottom: "1px solid #E4E5E6" },
1101
+ children: pageData.allLocations
1102
+ },
1103
+ "__all__"
1104
+ ),
1105
+ filteredItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
1065
1106
  List__default.default.Item,
1066
1107
  {
1067
1108
  onClick: () => handleItemClick(item),
1109
+ className: "text-[16px] !pl-[24px]",
1068
1110
  style: { cursor: "pointer" },
1069
1111
  children: item.name
1070
1112
  },
1071
1113
  item.code
1072
- )) }) }, title);
1073
- }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: "100%", overflow: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsx(List__default.default, { children: filteredItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
1074
- List__default.default.Item,
1075
- {
1076
- onClick: () => handleItemClick(item),
1077
- style: { cursor: "pointer" },
1078
- children: item.name
1079
- },
1080
- item.code
1081
- )) }) }) })
1114
+ ))
1115
+ ] }) }) })
1082
1116
  ]
1083
1117
  }
1084
1118
  );
@@ -1274,7 +1308,7 @@ var RoomsList = ({
1274
1308
  lat: Number(room.latitude) || 0,
1275
1309
  lng: Number(room.longitude) || 0,
1276
1310
  availableTime: nextAvailableTimeslot ? `${nextAvailableTimeslot.start_time}` : mergedPageData.noAvailableTime,
1277
- euifyMakeModel: room?.description
1311
+ euifyMakeModel: room?.equipment?.join(", ") || ""
1278
1312
  };
1279
1313
  });
1280
1314
  }, [demoRooms, mergedPageData.defaultCountry, mergedPageData.noAvailableTime]);
@@ -1304,10 +1338,6 @@ var RoomsList = ({
1304
1338
  setSelectedLocation(selection);
1305
1339
  setShowLocationFilter(false);
1306
1340
  };
1307
- const handleClearFilter = () => {
1308
- setSelectedLocation(void 0);
1309
- };
1310
- console.log(filteredStudioLocations);
1311
1341
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, ...props, children: [
1312
1342
  /* @__PURE__ */ jsxRuntime.jsx(Title, { title: mergedPageData.title }),
1313
1343
  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 }) }) }),
@@ -1322,12 +1352,15 @@ var RoomsList = ({
1322
1352
  className: "flex-none relative w-[420px] l:!w-full",
1323
1353
  style: { height: "794px" },
1324
1354
  children: [
1325
- /* @__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: [
1355
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
1356
+ "mb-4 bg-white border border-[#E4E5E6] px-[20px] py-[16px]",
1357
+ showLocationFilter ? "rounded-t-[12px] rounded-b-none" : "rounded-[12px]"
1358
+ ), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-[40px] font-bold text-[16px] l:text-[14px] gap-10 l:gap-4 flex items-center", children: [
1326
1359
  /* @__PURE__ */ jsxRuntime.jsxs(
1327
1360
  "button",
1328
1361
  {
1329
- className: "flex cursor-pointer items-center hover:text-[#2E8B57] transition-colors",
1330
- onClick: () => setShowLocationFilter(true),
1362
+ className: "flex cursor-pointer items-center hover:text-[#3ADB67] transition-colors",
1363
+ onClick: () => setShowLocationFilter(!showLocationFilter),
1331
1364
  children: [
1332
1365
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-1", children: getSelectedLocationName() }),
1333
1366
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -1338,6 +1371,10 @@ var RoomsList = ({
1338
1371
  height: "24",
1339
1372
  viewBox: "0 0 24 24",
1340
1373
  fill: "none",
1374
+ className: cn(
1375
+ "transition-transform duration-300",
1376
+ showLocationFilter && "rotate-180"
1377
+ ),
1341
1378
  children: /* @__PURE__ */ jsxRuntime.jsx(
1342
1379
  "path",
1343
1380
  {
@@ -1350,14 +1387,7 @@ var RoomsList = ({
1350
1387
  ]
1351
1388
  }
1352
1389
  ),
1353
- selectedLocation && /* @__PURE__ */ jsxRuntime.jsx(
1354
- "button",
1355
- {
1356
- onClick: handleClearFilter,
1357
- className: "ml-auto text-[14px] text-[#2E8B57] hover:underline",
1358
- children: mergedPageData.locationFilter.clear
1359
- }
1360
- ),
1390
+ selectedLocation && false,
1361
1391
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex text-[#767880] cursor-not-allowed", children: [
1362
1392
  mergedPageData.machine,
1363
1393
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -1383,7 +1413,7 @@ var RoomsList = ({
1383
1413
  "div",
1384
1414
  {
1385
1415
  style: { maxHeight: "706px", overflow: "auto" },
1386
- className: "rounded-[12px] bg-white border border-[#E4E5E6]",
1416
+ className: "rounded-[12px] bg-white border h-[706px] border-[#E4E5E6]",
1387
1417
  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) => {
1388
1418
  return /* @__PURE__ */ jsxRuntime.jsx(
1389
1419
  StudioCard,
@@ -1398,7 +1428,6 @@ var RoomsList = ({
1398
1428
  euifyMakeModel: item?.euifyMakeModel || "",
1399
1429
  onSchedule,
1400
1430
  onMouseEnter: () => setHoveredRoomId(item.id),
1401
- onMouseLeave: () => setHoveredRoomId(null),
1402
1431
  pageData: {
1403
1432
  ...mergedPageData.studioCard,
1404
1433
  noAvailableTime: mergedPageData?.noAvailableTime
@@ -1654,6 +1683,7 @@ var QuestionnaireForm = ({
1654
1683
  const [agreements, setAgreements] = React2.useState({});
1655
1684
  const [agreementError, setAgreementError] = React2.useState("");
1656
1685
  const [phoneCountryCodes, setPhoneCountryCodes] = React2.useState({});
1686
+ const [otherInputs, setOtherInputs] = React2.useState({});
1657
1687
  const defaultCountryCodes = [
1658
1688
  { code: "+1", country: "US/CA" },
1659
1689
  { code: "+86", country: "CN" },
@@ -1714,6 +1744,13 @@ var QuestionnaireForm = ({
1714
1744
  setAgreementError("");
1715
1745
  }
1716
1746
  };
1747
+ const handleOtherInputChange = (questionId, value) => {
1748
+ setOtherInputs((prev) => ({
1749
+ ...prev,
1750
+ [questionId]: value
1751
+ }));
1752
+ handleChange(questionId, value);
1753
+ };
1717
1754
  const validateForm = () => {
1718
1755
  const newErrors = {};
1719
1756
  questions.forEach((question) => {
@@ -1776,7 +1813,7 @@ var QuestionnaireForm = ({
1776
1813
  onChange: (e) => handleChange(questionId, e.target.value),
1777
1814
  placeholder: question.placeholder,
1778
1815
  className: cn(
1779
- "w-full px-4 py-3 rounded-lg border text-base",
1816
+ "w-full px-4 py-3 rounded-lg border text-base bg-white dark:bg-white dark:text-gray-900",
1780
1817
  "focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:border-transparent",
1781
1818
  hasError ? "border-red-500" : "border-[#E4E5E6]"
1782
1819
  )
@@ -1792,7 +1829,7 @@ var QuestionnaireForm = ({
1792
1829
  onBlur: (e) => handleEmailBlur(questionId, e.target.value),
1793
1830
  placeholder: question.placeholder,
1794
1831
  className: cn(
1795
- "w-full px-4 py-3 rounded-lg border text-base",
1832
+ "w-full px-4 py-3 rounded-lg border text-base bg-white dark:bg-white dark:text-gray-900",
1796
1833
  "focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:border-transparent",
1797
1834
  hasError ? "border-red-500" : "border-[#E4E5E6]"
1798
1835
  )
@@ -1811,6 +1848,7 @@ var QuestionnaireForm = ({
1811
1848
  "appearance-none pl-3 pr-8 py-3 rounded-lg border text-base",
1812
1849
  "focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:border-transparent",
1813
1850
  "bg-white cursor-pointer w-[80px]",
1851
+ "dark:bg-white dark:text-gray-900",
1814
1852
  hasError ? "border-red-500" : "border-[#E4E5E6]"
1815
1853
  ),
1816
1854
  children: countryCodes.map((item) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: item.code, children: item.code }, item.code))
@@ -1845,7 +1883,7 @@ var QuestionnaireForm = ({
1845
1883
  onChange: (e) => handleChange(questionId, e.target.value),
1846
1884
  placeholder: question.placeholder,
1847
1885
  className: cn(
1848
- "flex-1 px-4 py-3 rounded-lg border text-base",
1886
+ "flex-1 px-4 py-3 rounded-lg border text-base bg-white dark:bg-white dark:text-gray-900",
1849
1887
  "focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:border-transparent",
1850
1888
  hasError ? "border-red-500" : "border-[#E4E5E6]"
1851
1889
  )
@@ -1861,8 +1899,9 @@ var QuestionnaireForm = ({
1861
1899
  placeholder: question.placeholder,
1862
1900
  rows: 4,
1863
1901
  className: cn(
1864
- "w-full px-4 py-3 rounded-lg border text-base resize-none",
1902
+ "w-full px-4 py-3 rounded-lg border text-base resize-none bg-white",
1865
1903
  "focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:border-transparent",
1904
+ "dark:bg-white dark:text-gray-900",
1866
1905
  hasError ? "border-red-500" : "border-[#E4E5E6]"
1867
1906
  )
1868
1907
  }
@@ -1881,14 +1920,75 @@ var QuestionnaireForm = ({
1881
1920
  value: option.value || option.label,
1882
1921
  checked: responses[questionId] === (option.value || option.label),
1883
1922
  onChange: (e) => handleChange(questionId, e.target.value),
1884
- className: "w-5 h-5 text-[#3ADB67] focus:ring-[#3ADB67] focus:ring-2"
1923
+ className: "w-5 h-5 appearance-none cursor-pointer flex-shrink-0",
1924
+ style: {
1925
+ backgroundImage: responses[questionId] === (option.value || option.label) ? "url(https://cdn.shopify.com/s/files/1/0569/5147/2268/files/SelectBox.png?v=1769507941)" : "url(https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Frame_2121235232_2.png?v=1769507995)",
1926
+ backgroundSize: "contain",
1927
+ backgroundRepeat: "no-repeat",
1928
+ backgroundPosition: "center"
1929
+ }
1885
1930
  }
1886
1931
  ),
1887
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base text-gray-900 group-hover:text-[#3ADB67] transition-colors", children: option.label })
1932
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base text-gray-900 dark:text-gray-900 font-bold group-hover:text-[#3ADB67] transition-colors", children: option.label })
1888
1933
  ]
1889
1934
  },
1890
1935
  option.value || option.label
1891
1936
  )) });
1937
+ case "radio_with_other": {
1938
+ const isOtherSelected = responses[questionId] === "__other__" || responses[questionId] && !question?.options?.find(
1939
+ (opt) => (opt.value || opt.label) === responses[questionId]
1940
+ );
1941
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: question?.options?.map((option) => {
1942
+ const optionValue = option.value || option.label;
1943
+ const isOtherOption = optionValue === "__other__";
1944
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
1945
+ /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-3 cursor-pointer group", children: [
1946
+ /* @__PURE__ */ jsxRuntime.jsx(
1947
+ "input",
1948
+ {
1949
+ type: "radio",
1950
+ name: questionId,
1951
+ value: optionValue,
1952
+ checked: isOtherOption ? isOtherSelected : responses[questionId] === optionValue,
1953
+ onChange: (e) => {
1954
+ if (isOtherOption) {
1955
+ handleChange(questionId, "__other__");
1956
+ setOtherInputs((prev) => ({
1957
+ ...prev,
1958
+ [questionId]: ""
1959
+ }));
1960
+ } else {
1961
+ handleChange(questionId, e.target.value);
1962
+ }
1963
+ },
1964
+ className: "w-5 h-5 appearance-none cursor-pointer flex-shrink-0",
1965
+ style: {
1966
+ backgroundImage: (isOtherOption ? isOtherSelected : responses[questionId] === optionValue) ? "url(https://cdn.shopify.com/s/files/1/0569/5147/2268/files/SelectBox.png?v=1769507941)" : "url(https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Frame_2121235232_2.png?v=1769507995)",
1967
+ backgroundSize: "contain",
1968
+ backgroundRepeat: "no-repeat",
1969
+ backgroundPosition: "center"
1970
+ }
1971
+ }
1972
+ ),
1973
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base text-gray-900 dark:text-gray-900 font-bold group-hover:text-[#3ADB67] transition-colors", children: option.label })
1974
+ ] }),
1975
+ isOtherOption && isOtherSelected && /* @__PURE__ */ jsxRuntime.jsx(
1976
+ "input",
1977
+ {
1978
+ type: "text",
1979
+ value: otherInputs[questionId] || "",
1980
+ onChange: (e) => handleOtherInputChange(questionId, e.target.value),
1981
+ placeholder: question.placeholder || "Please specify...",
1982
+ className: cn(
1983
+ "w-full ml-8 px-4 py-3 rounded-lg border text-base bg-white dark:bg-white dark:text-gray-900",
1984
+ "focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:border-transparent",
1985
+ hasError ? "border-red-500" : "border-[#E4E5E6]"
1986
+ )
1987
+ }
1988
+ )
1989
+ ] }, optionValue);
1990
+ }) });
1991
+ }
1892
1992
  case "checkbox":
1893
1993
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: question?.options?.map((option) => {
1894
1994
  const optionValue = option.value || option.label;
@@ -1910,59 +2010,66 @@ var QuestionnaireForm = ({
1910
2010
  optionValue,
1911
2011
  e.target.checked
1912
2012
  ),
1913
- className: "w-5 h-5 text-[#3ADB67] focus:ring-[#3ADB67] focus:ring-2 rounded"
2013
+ className: "w-5 h-5 text-[#3ADB67] focus:ring-[#3ADB67] focus:ring-2 rounded",
2014
+ style: {
2015
+ accentColor: "#3ADB67"
2016
+ }
1914
2017
  }
1915
2018
  ),
1916
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base text-gray-900 group-hover:text-[#3ADB67] transition-colors", children: option.label })
2019
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base text-gray-900 dark:text-gray-900 font-bold group-hover:text-[#3ADB67] transition-colors", children: option.label })
1917
2020
  ]
1918
2021
  },
1919
2022
  optionValue
1920
2023
  );
1921
2024
  }) });
1922
2025
  case "select":
1923
- return /* @__PURE__ */ jsxRuntime.jsxs(
2026
+ return /* @__PURE__ */ jsxRuntime.jsx(
1924
2027
  "select",
1925
2028
  {
1926
2029
  value: responses[questionId] || "",
1927
2030
  onChange: (e) => handleChange(questionId, e.target.value),
1928
2031
  className: cn(
1929
- "w-full px-4 py-3 rounded-lg border text-base",
2032
+ "w-full px-4 py-3 rounded-lg border text-base bg-white dark:bg-white dark:text-gray-900",
1930
2033
  "focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:border-transparent",
1931
- "bg-white cursor-pointer",
2034
+ "cursor-pointer",
1932
2035
  hasError ? "border-red-500" : "border-[#E4E5E6]"
1933
2036
  ),
1934
- children: [
1935
- /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: question.placeholder || "Please select..." }),
1936
- question.options?.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
1937
- "option",
1938
- {
1939
- value: option.value || option.label,
1940
- children: option.label
1941
- },
1942
- option.value || option.label
1943
- ))
1944
- ]
2037
+ children: question.options?.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
2038
+ "option",
2039
+ {
2040
+ value: option.value || option.label,
2041
+ children: option.label
2042
+ },
2043
+ option.value || option.label
2044
+ ))
1945
2045
  }
1946
2046
  );
1947
2047
  default:
1948
2048
  return null;
1949
2049
  }
1950
2050
  };
1951
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pb-[80px]", children: [
1952
- 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) => {
2051
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pb-[80px] light", children: [
2052
+ questions && questions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white rounded-[12px] border border-[#E4E5E6] p-8 dark:bg-white dark:border-[#E4E5E6] l:p-4", children: /* @__PURE__ */ jsxRuntime.jsx("form", { onSubmit: handleSubmit, className: cn("space-y-6", className), children: questions.map((question) => {
1953
2053
  const questionId = getQuestionId(question);
1954
2054
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
1955
2055
  /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "block", children: [
1956
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-base font-medium text-gray-900", children: [
2056
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-base font-bold text-gray-900 dark:text-gray-900", children: [
1957
2057
  question.label,
1958
2058
  question.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 ml-1", children: "*" })
1959
2059
  ] }),
1960
- question.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-sm text-gray-600 mt-1", children: question.description }),
1961
- question.type === "email" && questionId === "email" && pageData?.emailDescription && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-sm text-gray-600 mt-1", children: pageData.emailDescription })
2060
+ question.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-sm text-gray-600 dark:text-gray-600 font-bold mt-1", children: question.description }),
2061
+ question.type === "email" && questionId === "email" && pageData?.emailDescription && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-sm text-gray-600 dark:text-gray-600 font-bold mt-1", children: pageData.emailDescription })
1962
2062
  ] }),
1963
2063
  renderQuestion(question),
1964
- question.hint && !errors[questionId] && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: question.hint }),
1965
- errors[questionId] && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", style: { color: "#FF4D4D" }, children: errors[questionId] })
2064
+ question.hint && !errors[questionId] && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 dark:text-gray-500 font-bold", children: question.hint }),
2065
+ errors[questionId] && /* @__PURE__ */ jsxRuntime.jsx(
2066
+ "p",
2067
+ {
2068
+ className: "text-sm font-bold",
2069
+ style: { color: "#FF4D4D" },
2070
+ children: errors[questionId]
2071
+ }
2072
+ )
1966
2073
  ] }, questionId);
1967
2074
  }) }) }),
1968
2075
  !!selectedTimeslotId && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center", children: [
@@ -1975,20 +2082,30 @@ var QuestionnaireForm = ({
1975
2082
  id: `agreement-${index}`,
1976
2083
  checked: agreements[index] || false,
1977
2084
  onChange: (e) => handleAgreementChange(index, e.target.checked),
1978
- className: "w-5 h-5 rounded border-gray-300 text-[#2FC257] focus:ring-[#2FC257] cursor-pointer flex-shrink-0"
2085
+ className: "w-5 h-5 rounded text-[#3ADB67] focus:ring-[#3ADB67] cursor-pointer flex-shrink-0",
2086
+ style: {
2087
+ accentColor: "#3ADB67"
2088
+ }
1979
2089
  }
1980
2090
  ),
1981
2091
  /* @__PURE__ */ jsxRuntime.jsx(
1982
2092
  "label",
1983
2093
  {
1984
2094
  htmlFor: `agreement-${index}`,
1985
- className: "text-sm text-gray-700 cursor-pointer select-none flex-1 [&_a]:underline [&_a]:text-blue-600 [&_a:hover]:text-blue-700",
2095
+ className: "text-sm text-gray-700 dark:text-gray-700 font-bold cursor-pointer select-none flex-1 [&_a]:underline [&_a]:text-blue-600 [&_a:hover]:text-blue-700",
1986
2096
  dangerouslySetInnerHTML: { __html: agreeContent },
1987
2097
  "aria-label": `Agreement ${index + 1}`
1988
2098
  }
1989
2099
  )
1990
2100
  ] }, index)),
1991
- agreementError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm mt-2", style: { color: "#FF4D4D" }, children: agreementError })
2101
+ agreementError && /* @__PURE__ */ jsxRuntime.jsx(
2102
+ "p",
2103
+ {
2104
+ className: "text-sm font-bold mt-2",
2105
+ style: { color: "#FF4D4D" },
2106
+ children: agreementError
2107
+ }
2108
+ )
1992
2109
  ] }),
1993
2110
  /* @__PURE__ */ jsxRuntime.jsx(
1994
2111
  "button",
@@ -1998,7 +2115,7 @@ var QuestionnaireForm = ({
1998
2115
  onClick: handleSubmit,
1999
2116
  className: cn(
2000
2117
  "w-fit mt-6 px-6 py-4 rounded-full",
2001
- "bg-[#080A0F] text-white font-medium text-base",
2118
+ "bg-[#080A0F] text-white font-bold text-base",
2002
2119
  "hover:bg-[#2FC257] transition-colors",
2003
2120
  "focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:ring-offset-2",
2004
2121
  "disabled:opacity-50 disabled:cursor-not-allowed"
@@ -2029,7 +2146,8 @@ var DateTimePicker = ({
2029
2146
  bookingFailed: "Booking failed"
2030
2147
  },
2031
2148
  locale,
2032
- onBookingSuccess
2149
+ onBookingSuccess,
2150
+ onQuestionnaireSubmit
2033
2151
  }) => {
2034
2152
  const { token } = antd.theme.useToken();
2035
2153
  const [selectedDate, setSelectedDate] = React2.useState(null);
@@ -2143,10 +2261,10 @@ var DateTimePicker = ({
2143
2261
  const wrapperStyle = {
2144
2262
  background: "#fff",
2145
2263
  border: `1px solid ${token.colorBorderSecondary}`,
2146
- borderRadius: token.borderRadiusLG
2264
+ borderRadius: 16
2147
2265
  };
2148
2266
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
2149
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[48px] l:text-[32px] py-[64px] l:py-[24px] font-bold text-center", children: pageData.scheduleYourVisit }),
2267
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[48px] l:text-[32px] py-[64px] l:py-[24px] l:pt-[64px] font-bold text-center", children: pageData.scheduleYourVisit }),
2150
2268
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4 l:flex-col", children: [
2151
2269
  /* @__PURE__ */ jsxRuntime.jsx(
2152
2270
  antd.ConfigProvider,
@@ -2170,6 +2288,20 @@ var DateTimePicker = ({
2170
2288
  className: "calendar-custom-cell w-[calc(824/1920*100vw)] min-l:max-w-[824px] l:w-full",
2171
2289
  children: [
2172
2290
  /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
2291
+ .calendar-custom-cell {
2292
+ border-radius: 16px !important;
2293
+ overflow: hidden;
2294
+ padding: 0 24px 16px 24px !important;
2295
+ }
2296
+ .calendar-custom-cell,
2297
+ .calendar-custom-cell *,
2298
+ .calendar-custom-cell .ant-picker-panel,
2299
+ .calendar-custom-cell .ant-picker-calendar,
2300
+ .calendar-custom-cell .ant-picker-content,
2301
+ .calendar-custom-cell .ant-picker-cell,
2302
+ .calendar-custom-cell .ant-picker-calendar-date-value {
2303
+ font-family: 'MontForAnker' !important;
2304
+ }
2173
2305
  .calendar-custom-cell .ant-picker-cell {
2174
2306
  padding: 6px !important;
2175
2307
  text-align: center !important;
@@ -2187,6 +2319,11 @@ var DateTimePicker = ({
2187
2319
  border: 1px solid #E4E5E6 !important;
2188
2320
  aspect-ratio: 1 / 1 !important;
2189
2321
  }
2322
+ .calendar-custom-cell .ant-picker-calendar-date-value {
2323
+ line-height: 38px !important;
2324
+ font-weight: 700 !important;
2325
+ font-size: 14px !important;
2326
+ }
2190
2327
  @media (min-width: 1024px) and (max-width: 1919px) {
2191
2328
  .calendar-custom-cell .ant-picker-cell-inner {
2192
2329
  width: 54px !important;
@@ -2195,6 +2332,8 @@ var DateTimePicker = ({
2195
2332
  }
2196
2333
  .calendar-custom-cell .ant-picker-calendar-date-value {
2197
2334
  line-height: 54px !important;
2335
+ font-weight: 700 !important;
2336
+ font-size: 20px !important;
2198
2337
  }
2199
2338
  }
2200
2339
  @media (min-width: 1920px) {
@@ -2205,17 +2344,19 @@ var DateTimePicker = ({
2205
2344
  }
2206
2345
  .calendar-custom-cell .ant-picker-calendar-date-value {
2207
2346
  line-height: 100px !important;
2347
+ font-weight: 700 !important;
2348
+ font-size: 20px !important;
2208
2349
  }
2209
2350
  }
2210
2351
  .calendar-custom-cell .ant-picker-cell-selected .ant-picker-cell-inner,
2211
2352
  .calendar-custom-cell .ant-picker-cell-selected:not(.ant-picker-cell-disabled) .ant-picker-cell-inner {
2212
2353
  background-color: #3ADB67 !important;
2213
- color: white !important;
2354
+ color: #080A0F !important;
2214
2355
  border-color: #3ADB67 !important;
2215
2356
  }
2216
2357
  .calendar-custom-cell .ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner {
2217
2358
  background-color: #3ADB67 !important;
2218
- color: white !important;
2359
+ color: #080A0F !important;
2219
2360
  }
2220
2361
  .calendar-custom-cell .ant-picker-cell-today .ant-picker-cell-inner {
2221
2362
  border-color: #3ADB67 !important;
@@ -2234,25 +2375,24 @@ var DateTimePicker = ({
2234
2375
  .calendar-custom-cell .ant-picker-cell-today .ant-picker-cell-inner::before {
2235
2376
  display: none !important;
2236
2377
  }
2237
- .calendar-custom-cell .ant-picker-calendar-date-value {
2238
- line-height: 38px !important;
2239
- }
2240
2378
  .calendar-custom-cell .ant-picker-content {
2241
2379
  width: 100% !important;
2242
2380
  }
2243
2381
  .calendar-custom-cell .ant-picker-content thead tr th {
2244
2382
  line-height: 48px !important;
2383
+ font-weight: 700 !important;
2384
+ font-size: 18px !important;
2245
2385
  }
2246
2386
  .calendar-custom-cell .ant-picker-cell-disabled .ant-picker-cell-inner {
2247
2387
  background-color: #F5F5F5 !important;
2248
- color: #BDBDBD !important;
2249
- border-color: #E4E5E6 !important;
2388
+ color: #767880 !important;
2389
+ border: none !important;
2250
2390
  cursor: not-allowed !important;
2251
2391
  box-shadow: none !important;
2252
2392
  }
2253
2393
  .calendar-custom-cell .ant-picker-cell-disabled:hover .ant-picker-cell-inner {
2254
2394
  background-color: #F5F5F5 !important;
2255
- border-color: #E4E5E6 !important;
2395
+ border: none !important;
2256
2396
  box-shadow: none !important;
2257
2397
  }
2258
2398
  .calendar-custom-cell .ant-picker-cell-disabled::before {
@@ -2292,7 +2432,7 @@ var DateTimePicker = ({
2292
2432
  className: `ant-picker-cell-inner ${isSelected ? "ant-picker-cell-inner-selected" : ""} ${isToday ? "ant-picker-cell-inner-today" : ""}`,
2293
2433
  style: {
2294
2434
  backgroundColor: isSelected ? "#3ADB67" : void 0,
2295
- color: isSelected ? "white" : isDisabled ? "#BDBDBD" : void 0,
2435
+ color: isSelected ? "#080A0F" : isDisabled ? "#767880" : void 0,
2296
2436
  borderColor: isSelected ? "#3ADB67" : isToday ? "#3ADB67" : void 0
2297
2437
  },
2298
2438
  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ant-picker-calendar-date-value", children: date.date() })
@@ -2310,7 +2450,7 @@ var DateTimePicker = ({
2310
2450
  label,
2311
2451
  value: index
2312
2452
  }));
2313
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-3", children: [
2453
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-3 l:pb-[0px]", children: [
2314
2454
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
2315
2455
  /* @__PURE__ */ jsxRuntime.jsx(
2316
2456
  antd.Select,
@@ -2322,14 +2462,15 @@ var DateTimePicker = ({
2322
2462
  onChange(now);
2323
2463
  },
2324
2464
  variant: "borderless",
2325
- className: "text-2xl font-medium",
2465
+ className: "text-[32px] l:text-[20px] font-bold",
2326
2466
  popupMatchSelectWidth: false,
2467
+ suffixIcon: null,
2327
2468
  style: {
2328
- fontSize: "24px",
2329
- fontWeight: 500
2469
+ fontWeight: 700
2330
2470
  }
2331
2471
  }
2332
2472
  ),
2473
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[20px] text-[#E4E5E6]", children: "/" }),
2333
2474
  /* @__PURE__ */ jsxRuntime.jsx(
2334
2475
  antd.Select,
2335
2476
  {
@@ -2340,11 +2481,11 @@ var DateTimePicker = ({
2340
2481
  onChange(now);
2341
2482
  },
2342
2483
  variant: "borderless",
2343
- className: "text-2xl font-medium",
2484
+ className: "text-[32px] l:text-[20px] font-bold",
2344
2485
  popupMatchSelectWidth: false,
2486
+ suffixIcon: null,
2345
2487
  style: {
2346
- fontSize: "24px",
2347
- fontWeight: 500
2488
+ fontWeight: 700
2348
2489
  }
2349
2490
  }
2350
2491
  )
@@ -2420,10 +2561,10 @@ var DateTimePicker = ({
2420
2561
  )
2421
2562
  }
2422
2563
  ),
2423
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white p-[24px] rounded-[12px] flex-1", children: [
2424
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
2425
- pageData.timeSlot,
2426
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
2564
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white p-[24px] rounded-[16px] flex-1", children: [
2565
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [
2566
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[24px] l:text-[16px]", children: pageData.timeSlot }),
2567
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex text-[18px] l:text-[14px] l:gap-1 gap-2", children: [
2427
2568
  /* @__PURE__ */ jsxRuntime.jsx(
2428
2569
  "button",
2429
2570
  {
@@ -2437,7 +2578,7 @@ var DateTimePicker = ({
2437
2578
  }
2438
2579
  },
2439
2580
  disabled: !selectedDate || selectedDate.isSame(dayjs__default.default(), "day") || selectedDate.isBefore(dayjs__default.default(), "day"),
2440
- className: "w-10 h-10 flex items-center justify-center hover:bg-gray-100 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
2581
+ className: "w-8 h-8 flex items-center justify-center hover:bg-gray-100 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
2441
2582
  children: /* @__PURE__ */ jsxRuntime.jsx(
2442
2583
  "svg",
2443
2584
  {
@@ -2457,7 +2598,7 @@ var DateTimePicker = ({
2457
2598
  )
2458
2599
  }
2459
2600
  ),
2460
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: selectedDate ? selectedDate.format("MMMM D, YYYY") : "" }),
2601
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: selectedDate ? selectedDate.format("MMMM D") : "" }),
2461
2602
  /* @__PURE__ */ jsxRuntime.jsx(
2462
2603
  "button",
2463
2604
  {
@@ -2469,7 +2610,7 @@ var DateTimePicker = ({
2469
2610
  }
2470
2611
  },
2471
2612
  disabled: !selectedDate,
2472
- className: "w-10 h-10 flex items-center justify-center hover:bg-gray-100 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
2613
+ className: "w-8 h-8 flex items-center justify-center hover:bg-gray-100 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
2473
2614
  children: /* @__PURE__ */ jsxRuntime.jsx(
2474
2615
  "svg",
2475
2616
  {
@@ -2491,7 +2632,7 @@ var DateTimePicker = ({
2491
2632
  )
2492
2633
  ] })
2493
2634
  ] }),
2494
- /* @__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) => {
2635
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 mt-[40px] gap-4 l:mt-[16px] l:flex l:flex-col l:gap-2", 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) => {
2495
2636
  const isAvailable = slot.status === "available";
2496
2637
  const isFull = slot.status === "full";
2497
2638
  const isSelected = selectedTimeslotId === slot.id;
@@ -2505,19 +2646,19 @@ var DateTimePicker = ({
2505
2646
  }
2506
2647
  },
2507
2648
  className: `
2508
- rounded-[20px] w-full flex items-center justify-center gap-4 h-[76px]
2649
+ rounded-[20px] w-full text-[18px] l:gap-2 l:text-[16px] flex items-center justify-center gap-4 h-[76px]
2509
2650
  border text-center transition-colors
2510
- ${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"}
2651
+ ${isSelected ? "border-[#3ADB67] bg-[#3ADB67] cursor-pointer" : isAvailable ? "border-[#E4E5E6] hover:border-[#3ADB67] hover:bg-[#3ADB67] cursor-pointer" : "border-[#E4E5E6] bg-[#F5F5F5] text-[#767880] cursor-not-allowed"}
2511
2652
  `,
2512
2653
  children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
2513
2654
  /* @__PURE__ */ jsxRuntime.jsx("div", { children: formatTimeslot(slot) }),
2514
- isFull && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-[#BDBDBD] mt-1", children: pageData.full }),
2515
- isAvailable && !isSelected && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-[#767880] mt-1", children: [
2655
+ isFull && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[16px] l:text-[14px] text-[#767880] mt-[2px]", children: pageData.full }),
2656
+ isAvailable && !isSelected && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[16px] l:text-[14px] text-[#767880] mt-1", children: [
2516
2657
  slot.capacity - slot.booked_count,
2517
2658
  " ",
2518
2659
  pageData.spotsLeft
2519
2660
  ] }),
2520
- isAvailable && isSelected && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-white mt-1", children: [
2661
+ isAvailable && isSelected && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[16px] l:text-[14px] mt-1", children: [
2521
2662
  slot.capacity - slot.booked_count,
2522
2663
  " ",
2523
2664
  pageData.spotsLeft
@@ -2527,14 +2668,14 @@ var DateTimePicker = ({
2527
2668
  slot.id
2528
2669
  );
2529
2670
  }) }),
2530
- !timeslotsLoading && dayTimeslots?.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-4 text-right", children: pageData?.timezone?.replace(
2671
+ !timeslotsLoading && dayTimeslots?.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-[24px] text-[#6d6d6F] text-center", children: pageData?.timezone?.replace(
2531
2672
  "{{timezone}}",
2532
2673
  demoRoom?.timezone || timezone || ""
2533
2674
  ) })
2534
2675
  ] })
2535
2676
  ] }),
2536
2677
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-12", children: [
2537
- !!questionnaire?.questions?.length && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[48px] font-bold text-center mb-8", children: pageData.fillOutForm }),
2678
+ !!questionnaire?.questions?.length && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[48px] font-bold text-center mb-8 l:mb-[24px] l:text-[32px] l:text-left", children: pageData.fillOutForm }),
2538
2679
  questionnaireLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center text-[#767880] py-8", children: pageData.loadingQuestionnaire }) : /* @__PURE__ */ jsxRuntime.jsx(
2539
2680
  QuestionnaireForm,
2540
2681
  {
@@ -2543,6 +2684,9 @@ var DateTimePicker = ({
2543
2684
  pageData,
2544
2685
  selectedTimeslotId,
2545
2686
  onSubmit: async (responses) => {
2687
+ if (onQuestionnaireSubmit) {
2688
+ await onQuestionnaireSubmit(responses);
2689
+ }
2546
2690
  try {
2547
2691
  const customerName = responses.name || responses.customer_name || "";
2548
2692
  const customerEmail = responses.email || responses.customer_email || "";
@@ -2573,61 +2717,6 @@ var DateTimePicker = ({
2573
2717
  ] });
2574
2718
  };
2575
2719
  var DateTimePicker_default = DateTimePicker;
2576
- var Navigation;
2577
- var Pagination;
2578
- var Autoplay;
2579
- var swiperVersion = "11+";
2580
- try {
2581
- const modules = __require("swiper/modules");
2582
- Navigation = modules.Navigation;
2583
- Pagination = modules.Pagination;
2584
- Autoplay = modules.Autoplay;
2585
- swiperVersion = "11+";
2586
- } catch (e) {
2587
- try {
2588
- const SwiperCore = __require("swiper");
2589
- const SwiperNavigation = __require("swiper/modules/navigation");
2590
- const SwiperPagination = __require("swiper/modules/pagination");
2591
- const SwiperAutoplay = __require("swiper/modules/autoplay");
2592
- const SwiperClass = SwiperCore.default || SwiperCore;
2593
- if (SwiperClass && SwiperClass.use) {
2594
- SwiperClass.use([
2595
- SwiperNavigation.default || SwiperNavigation,
2596
- SwiperPagination.default || SwiperPagination,
2597
- SwiperAutoplay.default || SwiperAutoplay
2598
- ]);
2599
- }
2600
- Navigation = SwiperNavigation.default || SwiperNavigation;
2601
- Pagination = SwiperPagination.default || SwiperPagination;
2602
- Autoplay = SwiperAutoplay.default || SwiperAutoplay;
2603
- swiperVersion = "8";
2604
- } catch (e2) {
2605
- console.warn("Failed to load swiper modules:", e2);
2606
- }
2607
- }
2608
- if (typeof window !== "undefined") {
2609
- try {
2610
- __require("swiper/css");
2611
- __require("swiper/css/navigation");
2612
- __require("swiper/css/pagination");
2613
- } catch (e) {
2614
- try {
2615
- __require("swiper/swiper.min.css");
2616
- __require("swiper/modules/navigation/navigation.min.css");
2617
- __require("swiper/modules/pagination/pagination.min.css");
2618
- } catch (e2) {
2619
- console.warn("Failed to load swiper styles");
2620
- }
2621
- }
2622
- }
2623
- var defaultDescriptions = [
2624
- "Norem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.",
2625
- "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."
2626
- ];
2627
- var defaultImages = [
2628
- "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
2629
- "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638"
2630
- ];
2631
2720
  var DemoRoomDetail = ({
2632
2721
  apiClient,
2633
2722
  demoRoomCode,
@@ -2654,20 +2743,21 @@ var DemoRoomDetail = ({
2654
2743
  } = useDemoRoom(apiClient, demoRoomCode || "", locale, {
2655
2744
  enabled: !!apiClient && !!demoRoomCode
2656
2745
  });
2657
- const title = demoRoom?.name || titleProp || "Design District Demo Room";
2658
- const descriptions = demoRoom?.description ? [demoRoom.description] : descriptionsProp || defaultDescriptions;
2659
- const devices = demoRoom?.description || devicesProp || "eufyMake E1, eufyMake M5";
2660
- const address = demoRoom?.address || addressProp || "1111 8th St, San Francisco, CA United States 94108";
2661
- const images = demoRoom?.images && demoRoom.images.length > 0 ? demoRoom.images : imagesProp || defaultImages;
2746
+ const title = demoRoom?.name || titleProp || "";
2747
+ const descriptions = demoRoom?.description ? [demoRoom.description] : descriptionsProp;
2748
+ const devices = demoRoom?.equipment?.join(", ") || devicesProp || "";
2749
+ const address = demoRoom?.address || addressProp || "";
2750
+ const images = demoRoom?.images && demoRoom.images.length > 0 ? demoRoom.images : imagesProp || [];
2662
2751
  const googleMapsLink = mapsLink || (() => {
2663
2752
  if (demoRoom?.latitude && demoRoom?.longitude) {
2664
2753
  return `https://www.google.com/maps/search/?api=1&query=${demoRoom.latitude},${demoRoom.longitude}`;
2665
- } else {
2754
+ } else if (address) {
2666
2755
  return `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(address)}`;
2667
2756
  }
2757
+ return "#";
2668
2758
  })();
2669
2759
  if (loading && apiClient && demoRoomCode) {
2670
- 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: [
2760
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full pb-4", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-8 items-start", children: [
2671
2761
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
2672
2762
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-12 bg-gray-200 rounded animate-pulse" }),
2673
2763
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-24 bg-gray-200 rounded animate-pulse" }),
@@ -2682,10 +2772,13 @@ var DemoRoomDetail = ({
2682
2772
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm mt-2", children: error.message })
2683
2773
  ] }) });
2684
2774
  }
2685
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-8 l:flex l:flex-col items-start py-[24px]", children: [
2686
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6 py-[24px]", children: [
2687
- /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-[40px] font-bold text-gray-900 leading-tight", children: title }),
2688
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: descriptions.map((desc, index) => /* @__PURE__ */ jsxRuntime.jsx(
2775
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
2776
+ "gap-[80px] l:gap-[40px] l:flex l:flex-col-reverse items-start py-[24px] l:pb-[64px]",
2777
+ images.length > 0 ? "grid grid-cols-2" : "flex"
2778
+ ), children: [
2779
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
2780
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-[48px] l:text-[32px] font-bold text-gray-900 leading-tight", children: title }),
2781
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[20px]", children: descriptions?.map((desc, index) => /* @__PURE__ */ jsxRuntime.jsx(
2689
2782
  "p",
2690
2783
  {
2691
2784
  className: "text-base text-gray-600 leading-relaxed",
@@ -2704,34 +2797,24 @@ var DemoRoomDetail = ({
2704
2797
  xmlns: "http://www.w3.org/2000/svg",
2705
2798
  className: "flex-shrink-0 mt-0.5",
2706
2799
  children: [
2707
- /* @__PURE__ */ jsxRuntime.jsx(
2708
- "rect",
2709
- {
2710
- x: "3",
2711
- y: "3",
2712
- width: "18",
2713
- height: "18",
2714
- rx: "2",
2715
- stroke: "currentColor",
2716
- strokeWidth: "2"
2717
- }
2718
- ),
2719
2800
  /* @__PURE__ */ jsxRuntime.jsx(
2720
2801
  "path",
2721
2802
  {
2722
- d: "M8 10H16",
2803
+ d: "M14.4643 7.4929H9.65565M3.16391 18.7132H20.8171C22.0122 18.7132 22.981 17.7563 22.981 16.576L23 13.8348L22.981 6.42431C22.981 5.24396 22.0122 4.28711 20.8171 4.28711H3.16391C1.96882 4.28711 1 5.24396 1 6.42431V16.576C1 17.7563 1.96882 18.7132 3.16391 18.7132Z",
2723
2804
  stroke: "currentColor",
2724
2805
  strokeWidth: "2",
2725
- strokeLinecap: "round"
2806
+ strokeLinecap: "round",
2807
+ strokeLinejoin: "round"
2726
2808
  }
2727
2809
  ),
2728
2810
  /* @__PURE__ */ jsxRuntime.jsx(
2729
2811
  "path",
2730
2812
  {
2731
- d: "M8 14H16",
2813
+ d: "M5.32812 18.2325V14.4238C5.32812 13.8715 5.77584 13.4238 6.32813 13.4238H17.7925C18.3447 13.4238 18.7925 13.8715 18.7925 14.4238V18.2325",
2732
2814
  stroke: "currentColor",
2733
2815
  strokeWidth: "2",
2734
- strokeLinecap: "round"
2816
+ strokeLinecap: "round",
2817
+ strokeLinejoin: "round"
2735
2818
  }
2736
2819
  )
2737
2820
  ]
@@ -2810,67 +2893,62 @@ var DemoRoomDetail = ({
2810
2893
  ] })
2811
2894
  ] })
2812
2895
  ] }),
2813
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative l:w-full h-[400px] rounded-2xl overflow-hidden", children: images.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
2814
- react.Swiper,
2815
- {
2816
- ...swiperVersion === "11+" && Navigation && Pagination && Autoplay ? { modules: [Navigation, Pagination, Autoplay] } : {},
2817
- spaceBetween: 0,
2818
- slidesPerView: 1,
2819
- navigation: true,
2820
- pagination: { clickable: true },
2821
- autoplay: {
2822
- delay: 3e3,
2823
- disableOnInteraction: false
2824
- },
2825
- loop: true,
2826
- className: "h-full rounded-2xl",
2827
- 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(
2828
- "img",
2829
- {
2830
- src: img,
2831
- alt: `Demo room view ${index + 1}`,
2832
- className: "w-full h-full object-cover"
2833
- }
2834
- ) }) }, index))
2835
- }
2836
- ) : /* @__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: [
2837
- /* @__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(
2838
- "svg",
2839
- {
2840
- width: "32",
2841
- height: "32",
2842
- viewBox: "0 0 32 32",
2843
- fill: "none",
2844
- xmlns: "http://www.w3.org/2000/svg",
2845
- children: [
2846
- /* @__PURE__ */ jsxRuntime.jsx(
2847
- "rect",
2848
- {
2849
- x: "4",
2850
- y: "8",
2851
- width: "24",
2852
- height: "16",
2853
- rx: "2",
2854
- stroke: "currentColor",
2855
- strokeWidth: "2"
2896
+ images.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative l:w-full min-l:h-[400px] rounded-2xl overflow-hidden demo-room-swiper", children: [
2897
+ /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
2898
+ .demo-room-swiper .swiper-pagination-bullet {
2899
+ background-color: rgba(255, 255, 255, 0.5);
2856
2900
  }
2857
- ),
2858
- /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "14", r: "2", fill: "currentColor" }),
2859
- /* @__PURE__ */ jsxRuntime.jsx(
2860
- "path",
2861
- {
2862
- d: "M28 20L22 14L16 20",
2863
- stroke: "currentColor",
2864
- strokeWidth: "2",
2865
- strokeLinecap: "round",
2866
- strokeLinejoin: "round"
2901
+ .demo-room-swiper .swiper-pagination-bullet-active {
2902
+ background-color: #3ADB67 !important;
2867
2903
  }
2868
- )
2869
- ]
2904
+ .demo-room-swiper .swiper-button-prev,
2905
+ .demo-room-swiper .swiper-button-next {
2906
+ width: 48px !important;
2907
+ height: 48px !important;
2908
+ background-size: contain !important;
2909
+ background-repeat: no-repeat !important;
2910
+ background-position: center !important;
2911
+ color: transparent !important;
2912
+ }
2913
+ .demo-room-swiper .swiper-button-prev::after,
2914
+ .demo-room-swiper .swiper-button-next::after {
2915
+ display: none !important;
2916
+ content: '' !important;
2917
+ }
2918
+ .demo-room-swiper .swiper-button-prev {
2919
+ background-image: url('https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Group_2121235586_572f0715-aa60-4188-9591-248f6ac53f40.svg?v=1736951731') !important;
2920
+ left: 16px !important;
2921
+ }
2922
+ .demo-room-swiper .swiper-button-next {
2923
+ background-image: url('https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Group_2121235583_3071dda3-e1ee-4fb8-b488-2402c8ea8018.svg?v=1736951731') !important;
2924
+ right: 16px !important;
2925
+ }
2926
+ ` }),
2927
+ /* @__PURE__ */ jsxRuntime.jsx(
2928
+ react.Swiper,
2929
+ {
2930
+ modules: [modules.Navigation, modules.Pagination, modules.Autoplay],
2931
+ spaceBetween: 0,
2932
+ slidesPerView: 1,
2933
+ navigation: images.length > 1,
2934
+ pagination: images.length > 1 ? { clickable: true } : false,
2935
+ autoplay: images.length > 1 ? {
2936
+ delay: 3e3,
2937
+ disableOnInteraction: false
2938
+ } : false,
2939
+ loop: images.length > 1,
2940
+ className: "h-full rounded-2xl",
2941
+ 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(
2942
+ "img",
2943
+ {
2944
+ src: img,
2945
+ alt: `Demo room view ${index + 1}`,
2946
+ className: "w-full h-full object-cover"
2947
+ }
2948
+ ) }) }, index))
2870
2949
  }
2871
- ) }),
2872
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-500 text-sm", children: pageData.demoRoomImages })
2873
- ] }) }) })
2950
+ )
2951
+ ] })
2874
2952
  ] }) });
2875
2953
  };
2876
2954
  DemoRoomDetail.displayName = "DemoRoomDetail";
@@ -2882,21 +2960,25 @@ var BookingForm = ({
2882
2960
  pageData,
2883
2961
  timezone,
2884
2962
  handleBookingSuccess,
2963
+ onQuestionnaireSubmit,
2885
2964
  ...props
2886
2965
  }) => {
2887
2966
  const apiClient = React2.useMemo(
2888
2967
  () => createDemoRoomApi(apiConfig),
2889
2968
  [apiConfig]
2890
2969
  );
2891
- const dateTimePickerPageData = React2.useMemo(() => ({
2892
- ...pageData?.dateTimePicker,
2893
- ...pageData?.questionnaireForm
2894
- }), [pageData?.dateTimePicker, pageData?.questionnaireForm]);
2970
+ const dateTimePickerPageData = React2.useMemo(
2971
+ () => ({
2972
+ ...pageData?.dateTimePicker,
2973
+ ...pageData?.questionnaireForm
2974
+ }),
2975
+ [pageData?.dateTimePicker, pageData?.questionnaireForm]
2976
+ );
2895
2977
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
2896
2978
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
2897
2979
  DemoRoomDetail,
2898
2980
  {
2899
- className: cn("mt-8", layoutClassName),
2981
+ className: cn("min-l:mt-8", layoutClassName),
2900
2982
  apiClient,
2901
2983
  demoRoomCode,
2902
2984
  locale: apiConfig.locale,
@@ -2911,6 +2993,7 @@ var BookingForm = ({
2911
2993
  timezone,
2912
2994
  locale: apiConfig.locale,
2913
2995
  onBookingSuccess: handleBookingSuccess,
2996
+ onQuestionnaireSubmit,
2914
2997
  pageData: dateTimePickerPageData
2915
2998
  }
2916
2999
  ) }) })
@@ -2974,7 +3057,9 @@ var BookingSuccess = ({
2974
3057
  }, [token, apiConfig, initialBookingData]);
2975
3058
  const handleCancelAppointment = async () => {
2976
3059
  if (!token || !apiConfig) {
2977
- setCancelError(pageData.cancelError || "Unable to cancel: Missing token or API configuration");
3060
+ setCancelError(
3061
+ pageData.cancelError || "Unable to cancel: Missing token or API configuration"
3062
+ );
2978
3063
  return;
2979
3064
  }
2980
3065
  setCancelLoading(true);
@@ -2995,13 +3080,15 @@ var BookingSuccess = ({
2995
3080
  }
2996
3081
  } catch (err) {
2997
3082
  console.error("Failed to cancel booking:", err);
2998
- setCancelError(pageData.cancelError || "Failed to cancel appointment. Please try again.");
3083
+ setCancelError(
3084
+ pageData.cancelError || "Failed to cancel appointment. Please try again."
3085
+ );
2999
3086
  } finally {
3000
3087
  setCancelLoading(false);
3001
3088
  }
3002
3089
  };
3003
3090
  if (loading) {
3004
- 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: [
3091
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `min-h-screen py-12 px-6 ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "animate-pulse space-y-6", children: [
3005
3092
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 bg-gray-200 rounded w-1/3" }),
3006
3093
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-24 bg-gray-200 rounded" }),
3007
3094
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
@@ -3014,24 +3101,24 @@ var BookingSuccess = ({
3014
3101
  if (!bookingData) {
3015
3102
  return null;
3016
3103
  }
3017
- 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: [
3104
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `min-h-screen l:py-0 l:px-0 py-12 px-6 ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto", children: [
3018
3105
  /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-[40px] font-bold text-gray-900 mb-8", children: pageData.yourAppointment }),
3019
- isCancelled && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-lg p-6 mb-8 flex items-center justify-between", children: [
3106
+ isCancelled && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-[16px] l:items-start p-6 mb-4 l:gap-2 flex l:flex-col items-center justify-between", children: [
3020
3107
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-700", children: pageData.appointmentCanceled }),
3021
- onScheduleAgain && /* @__PURE__ */ jsxRuntime.jsx(
3108
+ onScheduleAgain && bookingData && /* @__PURE__ */ jsxRuntime.jsx(
3022
3109
  "button",
3023
3110
  {
3024
- onClick: onScheduleAgain,
3025
- className: "px-6 py-3 bg-black text-white rounded-full font-medium hover:bg-gray-800 transition-colors whitespace-nowrap",
3111
+ onClick: () => onScheduleAgain(bookingData.demoroom_code),
3112
+ className: "px-6 py-3 bg-black text-white rounded-full hover:bg-gray-800 transition-colors whitespace-nowrap",
3026
3113
  children: pageData.scheduleAgain
3027
3114
  }
3028
3115
  )
3029
3116
  ] }),
3030
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-8 bg-white px-[48px] py-[32px] rounded-lg", children: [
3117
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-8 bg-white px-[48px] l:px-[16px] l:py-[16px] py-[32px] rounded-[16px]", children: [
3031
3118
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
3032
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: pageData.location }),
3119
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg text-gray-900 mb-3", children: pageData.location }),
3033
3120
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
3034
- bookingData.demoroom_name && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base font-medium text-gray-900", children: bookingData.demoroom_name }),
3121
+ bookingData.demoroom_name && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-900", children: bookingData.demoroom_name }),
3035
3122
  bookingData.address && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-600", children: bookingData.address }),
3036
3123
  bookingData.latitude && bookingData.longitude && /* @__PURE__ */ jsxRuntime.jsx(
3037
3124
  "a",
@@ -3046,7 +3133,7 @@ var BookingSuccess = ({
3046
3133
  ] })
3047
3134
  ] }),
3048
3135
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
3049
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: pageData.dateAndTime }),
3136
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg text-gray-900 mb-3", children: pageData.dateAndTime }),
3050
3137
  /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-base text-gray-900", children: [
3051
3138
  bookingData.booking_date,
3052
3139
  bookingData.time_slot && `, ${bookingData.time_slot}`,
@@ -3054,15 +3141,15 @@ var BookingSuccess = ({
3054
3141
  ] })
3055
3142
  ] }),
3056
3143
  bookingData.equipment && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
3057
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: pageData.event }),
3058
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-900", children: bookingData.equipment })
3144
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg text-gray-900 mb-3", children: pageData.event }),
3145
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-900", children: Array.isArray(bookingData.equipment) ? bookingData.equipment.join(", ") : bookingData.equipment })
3059
3146
  ] }),
3060
3147
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
3061
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: pageData.demoRoom }),
3148
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg text-gray-900 mb-3", children: pageData.demoRoom }),
3062
3149
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-900", children: bookingData.demoroom_code })
3063
3150
  ] }),
3064
3151
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
3065
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: pageData.visitorInfo }),
3152
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg text-gray-900 mb-3", children: pageData.visitorInfo }),
3066
3153
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
3067
3154
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-900", children: bookingData.customer_name }),
3068
3155
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-base text-gray-600", children: [
@@ -3120,13 +3207,13 @@ var BookingSuccess = ({
3120
3207
  {
3121
3208
  onClick: () => setShowCancelDialog(true),
3122
3209
  disabled: cancelLoading,
3123
- 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",
3210
+ className: "text-[14px] cursor-pointer w-fit rounded-full text-[#080A0F] border-2 border-[#080A0F] px-[20px] py-[10px] leading-[1] hover:bg-gray-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
3124
3211
  children: pageData.cancelAppointment
3125
3212
  }
3126
3213
  ),
3127
3214
  cancelError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm mt-2", style: { color: "#FF4D4D" }, children: cancelError })
3128
3215
  ] }),
3129
- 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: [
3216
+ 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-[600px] p-8 shadow-xl relative", children: [
3130
3217
  /* @__PURE__ */ jsxRuntime.jsx(
3131
3218
  "button",
3132
3219
  {
@@ -3156,28 +3243,28 @@ var BookingSuccess = ({
3156
3243
  )
3157
3244
  }
3158
3245
  ),
3159
- /* @__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(
3246
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center mb-6", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-16 h-16 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
3160
3247
  "svg",
3161
3248
  {
3162
- width: "32",
3163
- height: "32",
3164
- viewBox: "0 0 32 32",
3165
- fill: "none",
3166
3249
  xmlns: "http://www.w3.org/2000/svg",
3167
- children: /* @__PURE__ */ jsxRuntime.jsx(
3168
- "path",
3169
- {
3170
- d: "M16 10V17M16 22H16.01",
3171
- stroke: "white",
3172
- strokeWidth: "3",
3173
- strokeLinecap: "round",
3174
- strokeLinejoin: "round"
3175
- }
3176
- )
3250
+ width: "48",
3251
+ height: "48",
3252
+ viewBox: "0 0 48 48",
3253
+ fill: "none",
3254
+ children: [
3255
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "24", cy: "24", r: "21", fill: "#FFC24D" }),
3256
+ /* @__PURE__ */ jsxRuntime.jsx(
3257
+ "path",
3258
+ {
3259
+ d: "M23.9971 30.5703C25.4881 30.5704 26.6972 31.7795 26.6973 33.2705C26.6973 34.7616 25.4881 35.9706 23.9971 35.9707C22.5059 35.9707 21.2969 34.7617 21.2969 33.2705C21.297 31.7794 22.506 30.5703 23.9971 30.5703ZM23.9961 12.0176C25.2387 12.0176 26.2461 13.0249 26.2461 14.2676V26.2676C26.2461 27.5102 25.2387 28.5176 23.9961 28.5176C22.7535 28.5176 21.7461 27.5102 21.7461 26.2676V14.2676C21.7461 13.0249 22.7535 12.0176 23.9961 12.0176Z",
3260
+ fill: "white"
3261
+ }
3262
+ )
3263
+ ]
3177
3264
  }
3178
3265
  ) }) }),
3179
3266
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center mb-8", children: [
3180
- /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[18px] font-semibold text-gray-900 mb-2", children: pageData.cancelDialog?.title }),
3267
+ /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[18px] text-gray-900 mb-2", children: pageData.cancelDialog?.title }),
3181
3268
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[14px] text-gray-600", children: pageData.cancelDialog?.description })
3182
3269
  ] }),
3183
3270
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 justify-center", children: [
@@ -3186,7 +3273,7 @@ var BookingSuccess = ({
3186
3273
  {
3187
3274
  onClick: () => setShowCancelDialog(false),
3188
3275
  disabled: cancelLoading,
3189
- 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]",
3276
+ className: "px-8 py-3 border-2 border-black rounded-full text-black hover:bg-gray-50 transition-colors disabled:opacity-50 min-w-[120px]",
3190
3277
  children: pageData.cancelDialog?.backButton
3191
3278
  }
3192
3279
  ),
@@ -3195,7 +3282,7 @@ var BookingSuccess = ({
3195
3282
  {
3196
3283
  onClick: handleCancelAppointment,
3197
3284
  disabled: cancelLoading,
3198
- 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",
3285
+ className: "px-8 py-3 bg-black text-white rounded-full hover:bg-gray-800 transition-colors disabled:opacity-50 flex items-center gap-2 min-w-[180px] justify-center",
3199
3286
  children: cancelLoading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
3200
3287
  /* @__PURE__ */ jsxRuntime.jsxs(
3201
3288
  "svg",