@anker-in/ui 0.1.9 → 0.1.11

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 (13) hide show
  1. package/dist/demo-room.d.mts +3 -57
  2. package/dist/demo-room.d.ts +3 -57
  3. package/dist/demo-room.js +123 -303
  4. package/dist/demo-room.js.map +1 -1
  5. package/dist/demo-room.mjs +124 -302
  6. package/dist/demo-room.mjs.map +1 -1
  7. package/dist/index.d.mts +3 -2
  8. package/dist/index.d.ts +3 -2
  9. package/dist/index.js +559 -359
  10. package/dist/index.js.map +1 -1
  11. package/dist/index.mjs +559 -359
  12. package/dist/index.mjs.map +1 -1
  13. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -73,7 +73,10 @@ var StudioCard = ({
73
73
  "div",
74
74
  {
75
75
  ...props,
76
- className: cn("p-6 cursor-pointer transition-colors duration-200", className),
76
+ className: cn(
77
+ "p-6 cursor-pointer transition-colors duration-200 border-b border-[#E4E5E6] last:border-b-0",
78
+ className
79
+ ),
77
80
  style: {
78
81
  backgroundColor: isHovered ? "#f3f4f6" : "transparent",
79
82
  ...style
@@ -88,14 +91,14 @@ var StudioCard = ({
88
91
  },
89
92
  children: [
90
93
  /* @__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: [
94
+ /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[24px] l:text-[20px] font-bold text-[#080A0F]", children: name }),
95
+ 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: [
93
96
  formatDistance(distance),
94
97
  " ",
95
98
  pageData.away
96
99
  ] })
97
100
  ] }),
98
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 mb-3", children: [
101
+ availableTime && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 mb-3", children: [
99
102
  /* @__PURE__ */ jsxRuntime.jsxs(
100
103
  "svg",
101
104
  {
@@ -148,8 +151,8 @@ var StudioCard = ({
148
151
  ]
149
152
  }
150
153
  ),
151
- /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-gray-600", children: [
152
- pageData.available,
154
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-[16px] l:text-[12px] text-[#2A2C32]", children: [
155
+ availableTime === pageData.noAvailableTime ? "" : pageData.available,
153
156
  " ",
154
157
  availableTime
155
158
  ] }) })
@@ -184,7 +187,7 @@ var StudioCard = ({
184
187
  ]
185
188
  }
186
189
  ),
187
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-600 break-words", children: address }) })
190
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[16px] l:text-[14px] text-[#2A2C32] break-words", children: address }) })
188
191
  ] }),
189
192
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 mb-6", children: [
190
193
  /* @__PURE__ */ jsxRuntime.jsxs(
@@ -192,55 +195,44 @@ var StudioCard = ({
192
195
  {
193
196
  width: "20",
194
197
  height: "20",
195
- viewBox: "0 0 20 20",
198
+ viewBox: "0 0 24 24",
196
199
  fill: "none",
197
200
  xmlns: "http://www.w3.org/2000/svg",
198
201
  className: "flex-shrink-0 mt-0.5",
199
202
  children: [
200
- /* @__PURE__ */ jsxRuntime.jsx(
201
- "rect",
202
- {
203
- x: "3",
204
- y: "5",
205
- width: "14",
206
- height: "10",
207
- rx: "1.5",
208
- stroke: "currentColor",
209
- strokeWidth: "1.5"
210
- }
211
- ),
212
203
  /* @__PURE__ */ jsxRuntime.jsx(
213
204
  "path",
214
205
  {
215
- d: "M7 15V17",
206
+ 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",
216
207
  stroke: "currentColor",
217
- strokeWidth: "1.5",
218
- strokeLinecap: "round"
208
+ strokeWidth: "2",
209
+ strokeLinecap: "round",
210
+ strokeLinejoin: "round"
219
211
  }
220
212
  ),
221
213
  /* @__PURE__ */ jsxRuntime.jsx(
222
214
  "path",
223
215
  {
224
- d: "M13 15V17",
216
+ 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",
225
217
  stroke: "currentColor",
226
- strokeWidth: "1.5",
227
- strokeLinecap: "round"
218
+ strokeWidth: "2",
219
+ strokeLinecap: "round",
220
+ strokeLinejoin: "round"
228
221
  }
229
- ),
230
- /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "10", cy: "10", r: "1.5", fill: "currentColor" })
222
+ )
231
223
  ]
232
224
  }
233
225
  ),
234
- /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-600", children: euifyMakeModel }) })
226
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[16px] l:text-[14px] text-[#2A2C32]", children: euifyMakeModel }) })
235
227
  ] }),
236
228
  /* @__PURE__ */ jsxRuntime.jsx(
237
229
  "button",
238
230
  {
239
231
  onClick: handleScheduleClick,
240
232
  className: cn(
241
- "w-full px-6 py-3 rounded-full",
242
- "bg-white text-gray-900 border border-gray-900",
243
- "font-medium text-sm",
233
+ "w-fit px-[28px] l:px-[20px] l:py-[8px] py-3 rounded-full",
234
+ "bg-white text-gray-900 border-2 border-gray-900",
235
+ "font-bold text-[16px] l:text-[14px]",
244
236
  "hover:bg-gray-900 hover:text-white",
245
237
  "transition-all duration-200"
246
238
  ),
@@ -360,14 +352,12 @@ var StudioMap = ({
360
352
  const lng = Number(location.lng);
361
353
  const svgIcon = {
362
354
  url: `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
363
- <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
364
- <circle cx="24" cy="24" r="22" fill="#00000010"/>
365
- <circle cx="24" cy="24" r="10" fill="#000000"/>
366
- <circle cx="24" cy="24" r="5" fill="#3ADB67"/>
355
+ <svg xmlns="http://www.w3.org/2000/svg" width="34" height="44" viewBox="0 0 17 22" fill="none">
356
+ <path d="M8.5 0C13.1944 0 17 3.80557 17 8.5C17 12.1044 14.94 15.4573 13.0264 17.8174C12.0543 19.0162 11.0847 20.0016 10.3584 20.6875C9.99466 21.031 9.69081 21.3018 9.47559 21.4873C9.36796 21.5801 9.28226 21.6518 9.22266 21.7012C9.19285 21.7259 9.16878 21.7444 9.15234 21.7578C9.14444 21.7642 9.13843 21.7697 9.13379 21.7734C9.13156 21.7752 9.12935 21.7772 9.12793 21.7783L9.12598 21.7803H9.125C9.12232 21.7774 9.08429 21.7304 8.5 21L9.125 21.7812C8.75978 22.0734 8.24022 22.0734 7.875 21.7812L8.5 21C7.91571 21.7304 7.87768 21.7774 7.875 21.7803H7.87402L7.87207 21.7783C7.87065 21.7772 7.86844 21.7752 7.86621 21.7734C7.86157 21.7697 7.85556 21.7642 7.84766 21.7578C7.83122 21.7444 7.80715 21.7259 7.77734 21.7012C7.71774 21.6518 7.63204 21.5801 7.52441 21.4873C7.30919 21.3018 7.00534 21.031 6.6416 20.6875C5.91533 20.0016 4.94566 19.0162 3.97363 17.8174C2.06001 15.4573 0 12.1044 0 8.5C0 3.80557 3.80557 0 8.5 0ZM8.5 2C4.91013 2 2 4.91013 2 8.5C2 11.3955 3.69006 14.2928 5.52637 16.5576C6.4292 17.6711 7.33473 18.5922 8.01465 19.2344C8.19381 19.4036 8.3573 19.5526 8.5 19.6807C8.6427 19.5526 8.80619 19.4036 8.98535 19.2344C9.66527 18.5922 10.5708 17.6711 11.4736 16.5576C13.3099 14.2928 15 11.3955 15 8.5C15 4.91013 12.0899 2 8.5 2ZM8.5 4.59961C10.6539 4.59961 12.4004 6.34609 12.4004 8.5C12.4004 10.6539 10.6539 12.4004 8.5 12.4004C6.34609 12.4004 4.59961 10.6539 4.59961 8.5C4.59961 6.34609 6.34609 4.59961 8.5 4.59961ZM8.5 6.40039C7.34021 6.40039 6.40039 7.34021 6.40039 8.5C6.40039 9.65979 7.34021 10.5996 8.5 10.5996C9.65979 10.5996 10.5996 9.65979 10.5996 8.5C10.5996 7.34021 9.65979 6.40039 8.5 6.40039Z" fill="#3D3D3F"/>
367
357
  </svg>
368
358
  `)}`,
369
- scaledSize: { width: 48, height: 48 },
370
- anchor: { x: 24, y: 24 }
359
+ scaledSize: { width: 34, height: 44 },
360
+ anchor: { x: 17, y: 44 }
371
361
  };
372
362
  const marker = new google.maps.Marker({
373
363
  position: { lat, lng },
@@ -378,41 +368,53 @@ var StudioMap = ({
378
368
  marker.addListener("click", () => {
379
369
  setSelectedLocation(location);
380
370
  const content = `
381
- <div style="padding: 16px; max-width: 300px; font-family: system-ui, sans-serif;">
382
- <h3 style="margin: 0 0 12px 0; font-size: 18px; font-weight: 600;">${location.name}</h3>
383
- ${location.availableTime ? `<div style="margin-bottom: 8px; color: #666;">
384
- <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
385
- <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"/>
386
379
  </svg>
387
- <span style="vertical-align: middle;">${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>
388
383
  </div>` : ""}
389
- <div style="margin-bottom: 8px; color: #666;">
390
- <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
391
- <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"/>
392
388
  </svg>
393
- <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>
394
392
  </div>
395
- ${location.euifyMakeModel ? `<div style="margin-bottom: 12px; color: #666;">
396
- <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
397
- <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"/>
398
397
  </svg>
399
- <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>
400
401
  </div>` : ""}
401
402
  <button
402
403
  id="schedule-btn-${location.id}"
403
404
  style="
404
- width: 100%;
405
- padding: 10px 16px;
406
- background: #000;
407
- color: #fff;
408
- border: none;
409
- border-radius: 6px;
410
- 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;
411
412
  cursor: pointer;
412
- font-size: 14px;
413
+ font-size: 16px;
414
+ transition: all 0.2s;
413
415
  "
414
- onmouseover="this.style.background='#333'"
415
- 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';"
416
418
  >
417
419
  ${pageData.scheduleNow}
418
420
  </button>
@@ -464,41 +466,53 @@ var StudioMap = ({
464
466
  const marker = markersRef.current[markerIndex];
465
467
  if (location && marker) {
466
468
  const content = `
467
- <div style="padding: 16px; max-width: 300px; font-family: system-ui, sans-serif;">
468
- <h3 style="margin: 0 0 12px 0; font-size: 18px; font-weight: 600;">${location.name}</h3>
469
- ${location.availableTime ? `<div style="margin-bottom: 8px; color: #666;">
470
- <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
471
- <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"/>
472
477
  </svg>
473
- <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>
474
481
  </div>` : ""}
475
- <div style="margin-bottom: 8px; color: #666;">
476
- <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
477
- <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"/>
478
486
  </svg>
479
- <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>
480
490
  </div>
481
- ${location.euifyMakeModel ? `<div style="margin-bottom: 12px; color: #666;">
482
- <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
483
- <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"/>
484
495
  </svg>
485
- <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>
486
499
  </div>` : ""}
487
500
  <button
488
501
  id="schedule-btn-hover-${location.id}"
489
502
  style="
490
- width: 100%;
491
- padding: 10px 16px;
492
- background: #000;
493
- color: #fff;
494
- border: none;
495
- border-radius: 6px;
496
- 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;
497
510
  cursor: pointer;
498
- font-size: 14px;
511
+ font-size: 16px;
512
+ transition: all 0.2s;
499
513
  "
500
- onmouseover="this.style.background='#333'"
501
- 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';"
502
516
  >
503
517
  ${pageData.scheduleNow}
504
518
  </button>
@@ -988,9 +1002,9 @@ var LocationFilter = ({
988
1002
  "div",
989
1003
  {
990
1004
  style: { background: "#F8F8F8" },
991
- className: "rounded-[12px] rounded-b-none h-[72px] font-bold text-[14px] flex flex-col",
1005
+ className: "rounded-[12px] rounded-b-none h-[108px] font-bold text-[14px] flex flex-col",
992
1006
  children: [
993
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-end px-[20px] pt-[12px] pb-[8px]", children: /* @__PURE__ */ jsxRuntime.jsx(
1007
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-end px-[24px] pt-[12px] pb-[8px]", children: /* @__PURE__ */ jsxRuntime.jsx(
994
1008
  "button",
995
1009
  {
996
1010
  onClick: onClose,
@@ -1014,14 +1028,14 @@ var LocationFilter = ({
1014
1028
  )
1015
1029
  }
1016
1030
  ) }),
1017
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center px-[20px] gap-[16px] pb-[8px]", children: [
1031
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center text-[16px] px-[20px] gap-[16px] py-[16px]", children: [
1018
1032
  /* @__PURE__ */ jsxRuntime.jsx(
1019
1033
  "button",
1020
1034
  {
1021
1035
  onClick: () => handleTabClick("country"),
1022
1036
  className: cn(
1023
1037
  "pb-[4px] transition-colors",
1024
- currentLevel === "country" ? "text-[#1D1D1F] border-b-2 border-[#2E8B57]" : "text-[#767880]"
1038
+ currentLevel === "country" ? "text-[#080A0F] border-b-2 border-[#3ADB67]" : "text-[#080A0F]"
1025
1039
  ),
1026
1040
  children: pageData.country
1027
1041
  }
@@ -1033,7 +1047,7 @@ var LocationFilter = ({
1033
1047
  disabled: !selectedCountry,
1034
1048
  className: cn(
1035
1049
  "pb-[4px] transition-colors",
1036
- currentLevel === "state" ? "text-[#1D1D1F] border-b-2 border-[#2E8B57]" : "text-[#767880]",
1050
+ currentLevel === "state" ? "text-[#080A0F] border-b-2 border-[#3ADB67]" : "text-[#080A0F]",
1037
1051
  !selectedCountry && "opacity-50 cursor-not-allowed"
1038
1052
  ),
1039
1053
  children: pageData.state
@@ -1046,7 +1060,7 @@ var LocationFilter = ({
1046
1060
  disabled: !selectedState,
1047
1061
  className: cn(
1048
1062
  "pb-[4px] transition-colors",
1049
- currentLevel === "city" ? "text-[#1D1D1F] border-b-2 border-[#2E8B57]" : "text-[#767880]",
1063
+ currentLevel === "city" ? "text-[#080A0F] border-b-2 border-[#3ADB67]" : "text-[#080A0F]",
1050
1064
  !selectedState && "opacity-50 cursor-not-allowed"
1051
1065
  ),
1052
1066
  children: pageData.city
@@ -1056,12 +1070,13 @@ var LocationFilter = ({
1056
1070
  ]
1057
1071
  }
1058
1072
  ),
1059
- /* @__PURE__ */ jsxRuntime.jsx(AntdMobileIsolated, { style: { height: "calc(100% - 72px)" }, children: showIndexBar ? /* @__PURE__ */ jsxRuntime.jsx(IndexBar__default.default, { style: { height: "100%" }, children: groupedItems.map((group) => {
1073
+ /* @__PURE__ */ jsxRuntime.jsx(AntdMobileIsolated, { style: { height: "calc(100% - 108px)" }, children: showIndexBar ? /* @__PURE__ */ jsxRuntime.jsx(IndexBar__default.default, { style: { height: "100%" }, children: groupedItems.map((group) => {
1060
1074
  const { title, items } = group;
1061
1075
  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(
1062
1076
  List__default.default.Item,
1063
1077
  {
1064
1078
  onClick: () => handleItemClick(item),
1079
+ className: "text-[16px] !pl-[24px]",
1065
1080
  style: { cursor: "pointer" },
1066
1081
  children: item.name
1067
1082
  },
@@ -1071,6 +1086,7 @@ var LocationFilter = ({
1071
1086
  List__default.default.Item,
1072
1087
  {
1073
1088
  onClick: () => handleItemClick(item),
1089
+ className: "text-[16px] !pl-[24px]",
1074
1090
  style: { cursor: "pointer" },
1075
1091
  children: item.name
1076
1092
  },
@@ -1268,13 +1284,13 @@ var RoomsList = ({
1268
1284
  state,
1269
1285
  zipCode: "",
1270
1286
  country,
1271
- lat: Number(room.latitude) || 34.0522,
1272
- lng: Number(room.longitude) || -118.2437,
1287
+ lat: Number(room.latitude) || 0,
1288
+ lng: Number(room.longitude) || 0,
1273
1289
  availableTime: nextAvailableTimeslot ? `${nextAvailableTimeslot.start_time}` : mergedPageData.noAvailableTime,
1274
- euifyMakeModel: room?.description
1290
+ euifyMakeModel: room?.equipment?.join(", ") || ""
1275
1291
  };
1276
1292
  });
1277
- }, [demoRooms]);
1293
+ }, [demoRooms, mergedPageData.defaultCountry, mergedPageData.noAvailableTime]);
1278
1294
  const filteredStudioLocations = React2.useMemo(() => {
1279
1295
  if (!selectedLocation) return studioLocations;
1280
1296
  return studioLocations.filter((location) => {
@@ -1323,7 +1339,7 @@ var RoomsList = ({
1323
1339
  /* @__PURE__ */ jsxRuntime.jsxs(
1324
1340
  "button",
1325
1341
  {
1326
- className: "flex cursor-pointer items-center hover:text-[#2E8B57] transition-colors",
1342
+ className: "flex cursor-pointer items-center hover:text-[#3ADB67] transition-colors",
1327
1343
  onClick: () => setShowLocationFilter(true),
1328
1344
  children: [
1329
1345
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-1", children: getSelectedLocationName() }),
@@ -1380,7 +1396,7 @@ var RoomsList = ({
1380
1396
  "div",
1381
1397
  {
1382
1398
  style: { maxHeight: "706px", overflow: "auto" },
1383
- className: "rounded-[12px] bg-white border border-[#E4E5E6]",
1399
+ className: "rounded-[12px] bg-white border h-[706px] border-[#E4E5E6]",
1384
1400
  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) => {
1385
1401
  return /* @__PURE__ */ jsxRuntime.jsx(
1386
1402
  StudioCard,
@@ -1396,7 +1412,10 @@ var RoomsList = ({
1396
1412
  onSchedule,
1397
1413
  onMouseEnter: () => setHoveredRoomId(item.id),
1398
1414
  onMouseLeave: () => setHoveredRoomId(null),
1399
- pageData: mergedPageData.studioCard
1415
+ pageData: {
1416
+ ...mergedPageData.studioCard,
1417
+ noAvailableTime: mergedPageData?.noAvailableTime
1418
+ }
1400
1419
  },
1401
1420
  item.id
1402
1421
  );
@@ -1429,7 +1448,10 @@ var RoomsList = ({
1429
1448
  hoveredLocationId: hoveredRoomId,
1430
1449
  onSchedule,
1431
1450
  mapHeight: "794px",
1432
- pageData: mergedPageData.map
1451
+ pageData: {
1452
+ ...mergedPageData.map,
1453
+ noAvailableTime: pageData?.noAvailableTime
1454
+ }
1433
1455
  }
1434
1456
  ) })
1435
1457
  ] })
@@ -1644,6 +1666,21 @@ var QuestionnaireForm = ({
1644
1666
  const [errors, setErrors] = React2.useState({});
1645
1667
  const [agreements, setAgreements] = React2.useState({});
1646
1668
  const [agreementError, setAgreementError] = React2.useState("");
1669
+ const [phoneCountryCodes, setPhoneCountryCodes] = React2.useState({});
1670
+ const defaultCountryCodes = [
1671
+ { code: "+1", country: "US/CA" },
1672
+ { code: "+86", country: "CN" },
1673
+ { code: "+44", country: "UK" },
1674
+ { code: "+81", country: "JP" },
1675
+ { code: "+82", country: "KR" },
1676
+ { code: "+65", country: "SG" },
1677
+ { code: "+852", country: "HK" },
1678
+ { code: "+886", country: "TW" },
1679
+ { code: "+61", country: "AU" },
1680
+ { code: "+49", country: "DE" },
1681
+ { code: "+33", country: "FR" }
1682
+ ];
1683
+ const countryCodes = pageData?.countryCodes || defaultCountryCodes;
1647
1684
  const getQuestionId = (question) => {
1648
1685
  return question.id || question.key || "";
1649
1686
  };
@@ -1660,6 +1697,22 @@ var QuestionnaireForm = ({
1660
1697
  });
1661
1698
  }
1662
1699
  };
1700
+ const handleEmailBlur = (questionId, value) => {
1701
+ if (!value) return;
1702
+ const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
1703
+ if (!emailRegex.test(value)) {
1704
+ setErrors((prev) => ({
1705
+ ...prev,
1706
+ [questionId]: "Please enter a valid email address"
1707
+ }));
1708
+ }
1709
+ };
1710
+ const handleCountryCodeChange = (questionId, code) => {
1711
+ setPhoneCountryCodes((prev) => ({
1712
+ ...prev,
1713
+ [questionId]: code
1714
+ }));
1715
+ };
1663
1716
  const handleCheckboxChange = (questionId, optionValue, checked) => {
1664
1717
  const currentValues = responses[questionId] || [];
1665
1718
  const newValues = checked ? [...currentValues, optionValue] : currentValues.filter((v) => v !== optionValue);
@@ -1705,7 +1758,22 @@ var QuestionnaireForm = ({
1705
1758
  const handleSubmit = (e) => {
1706
1759
  e.preventDefault();
1707
1760
  if (validateForm()) {
1708
- onSubmit?.(responses);
1761
+ const finalResponses = { ...responses };
1762
+ questions.forEach((question) => {
1763
+ if (question.type === "tel" || question.type === "phone") {
1764
+ const questionId = getQuestionId(question);
1765
+ const countryCode = phoneCountryCodes[questionId] || "+1";
1766
+ const phoneNumber = responses[questionId];
1767
+ if (phoneNumber) {
1768
+ finalResponses[questionId] = phoneNumber;
1769
+ if (questionId === "phone" || questionId === "customer_phone_number") {
1770
+ finalResponses["phone_code"] = countryCode;
1771
+ finalResponses["customer_phone_code"] = countryCode;
1772
+ }
1773
+ }
1774
+ }
1775
+ });
1776
+ onSubmit?.(finalResponses);
1709
1777
  }
1710
1778
  };
1711
1779
  const renderQuestion = (question) => {
@@ -1713,9 +1781,6 @@ var QuestionnaireForm = ({
1713
1781
  const hasError = !!errors[questionId];
1714
1782
  switch (question.type) {
1715
1783
  case "text":
1716
- case "email":
1717
- case "tel":
1718
- case "phone":
1719
1784
  return /* @__PURE__ */ jsxRuntime.jsx(
1720
1785
  "input",
1721
1786
  {
@@ -1724,12 +1789,83 @@ var QuestionnaireForm = ({
1724
1789
  onChange: (e) => handleChange(questionId, e.target.value),
1725
1790
  placeholder: question.placeholder,
1726
1791
  className: cn(
1727
- "w-full px-4 py-3 rounded-lg border text-base",
1792
+ "w-full px-4 py-3 rounded-lg border text-base bg-white dark:bg-white dark:text-gray-900",
1793
+ "focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:border-transparent",
1794
+ hasError ? "border-red-500" : "border-[#E4E5E6]"
1795
+ )
1796
+ }
1797
+ );
1798
+ case "email":
1799
+ return /* @__PURE__ */ jsxRuntime.jsx(
1800
+ "input",
1801
+ {
1802
+ type: "email",
1803
+ value: responses[questionId] || "",
1804
+ onChange: (e) => handleChange(questionId, e.target.value),
1805
+ onBlur: (e) => handleEmailBlur(questionId, e.target.value),
1806
+ placeholder: question.placeholder,
1807
+ className: cn(
1808
+ "w-full px-4 py-3 rounded-lg border text-base bg-white dark:bg-white dark:text-gray-900",
1728
1809
  "focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:border-transparent",
1729
1810
  hasError ? "border-red-500" : "border-[#E4E5E6]"
1730
1811
  )
1731
1812
  }
1732
1813
  );
1814
+ case "tel":
1815
+ case "phone":
1816
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
1817
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
1818
+ /* @__PURE__ */ jsxRuntime.jsx(
1819
+ "select",
1820
+ {
1821
+ value: phoneCountryCodes[questionId] || "+1",
1822
+ onChange: (e) => handleCountryCodeChange(questionId, e.target.value),
1823
+ className: cn(
1824
+ "appearance-none pl-3 pr-8 py-3 rounded-lg border text-base",
1825
+ "focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:border-transparent",
1826
+ "bg-white cursor-pointer w-[80px]",
1827
+ "dark:bg-white dark:text-gray-900",
1828
+ hasError ? "border-red-500" : "border-[#E4E5E6]"
1829
+ ),
1830
+ children: countryCodes.map((item) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: item.code, children: item.code }, item.code))
1831
+ }
1832
+ ),
1833
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx(
1834
+ "svg",
1835
+ {
1836
+ width: "12",
1837
+ height: "8",
1838
+ viewBox: "0 0 12 8",
1839
+ fill: "none",
1840
+ xmlns: "http://www.w3.org/2000/svg",
1841
+ children: /* @__PURE__ */ jsxRuntime.jsx(
1842
+ "path",
1843
+ {
1844
+ d: "M1 1.5L6 6.5L11 1.5",
1845
+ stroke: "#9CA3AF",
1846
+ strokeWidth: "1.5",
1847
+ strokeLinecap: "round",
1848
+ strokeLinejoin: "round"
1849
+ }
1850
+ )
1851
+ }
1852
+ ) })
1853
+ ] }),
1854
+ /* @__PURE__ */ jsxRuntime.jsx(
1855
+ "input",
1856
+ {
1857
+ type: "tel",
1858
+ value: responses[questionId] || "",
1859
+ onChange: (e) => handleChange(questionId, e.target.value),
1860
+ placeholder: question.placeholder,
1861
+ className: cn(
1862
+ "flex-1 px-4 py-3 rounded-lg border text-base bg-white dark:bg-white dark:text-gray-900",
1863
+ "focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:border-transparent",
1864
+ hasError ? "border-red-500" : "border-[#E4E5E6]"
1865
+ )
1866
+ }
1867
+ )
1868
+ ] });
1733
1869
  case "textarea":
1734
1870
  return /* @__PURE__ */ jsxRuntime.jsx(
1735
1871
  "textarea",
@@ -1739,8 +1875,9 @@ var QuestionnaireForm = ({
1739
1875
  placeholder: question.placeholder,
1740
1876
  rows: 4,
1741
1877
  className: cn(
1742
- "w-full px-4 py-3 rounded-lg border text-base resize-none",
1878
+ "w-full px-4 py-3 rounded-lg border text-base resize-none bg-white",
1743
1879
  "focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:border-transparent",
1880
+ "dark:bg-white dark:text-gray-900",
1744
1881
  hasError ? "border-red-500" : "border-[#E4E5E6]"
1745
1882
  )
1746
1883
  }
@@ -1759,10 +1896,15 @@ var QuestionnaireForm = ({
1759
1896
  value: option.value || option.label,
1760
1897
  checked: responses[questionId] === (option.value || option.label),
1761
1898
  onChange: (e) => handleChange(questionId, e.target.value),
1762
- className: "w-5 h-5 text-[#3ADB67] focus:ring-[#3ADB67] focus:ring-2"
1899
+ className: "w-5 h-5 text-[#3ADB67] focus:ring-[#3ADB67] focus:ring-2",
1900
+ style: {
1901
+ backgroundColor: "white",
1902
+ borderColor: "#D1D5DB",
1903
+ colorScheme: "light"
1904
+ }
1763
1905
  }
1764
1906
  ),
1765
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base text-gray-900 group-hover:text-[#3ADB67] transition-colors", children: option.label })
1907
+ /* @__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 })
1766
1908
  ]
1767
1909
  },
1768
1910
  option.value || option.label
@@ -1788,10 +1930,15 @@ var QuestionnaireForm = ({
1788
1930
  optionValue,
1789
1931
  e.target.checked
1790
1932
  ),
1791
- className: "w-5 h-5 text-[#3ADB67] focus:ring-[#3ADB67] focus:ring-2 rounded"
1933
+ className: "w-5 h-5 text-[#3ADB67] focus:ring-[#3ADB67] focus:ring-2 rounded",
1934
+ style: {
1935
+ backgroundColor: "white",
1936
+ borderColor: "#D1D5DB",
1937
+ colorScheme: "light"
1938
+ }
1792
1939
  }
1793
1940
  ),
1794
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base text-gray-900 group-hover:text-[#3ADB67] transition-colors", children: option.label })
1941
+ /* @__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 })
1795
1942
  ]
1796
1943
  },
1797
1944
  optionValue
@@ -1804,9 +1951,9 @@ var QuestionnaireForm = ({
1804
1951
  value: responses[questionId] || "",
1805
1952
  onChange: (e) => handleChange(questionId, e.target.value),
1806
1953
  className: cn(
1807
- "w-full px-4 py-3 rounded-lg border text-base",
1954
+ "w-full px-4 py-3 rounded-lg border text-base bg-white dark:bg-white dark:text-gray-900",
1808
1955
  "focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:border-transparent",
1809
- "bg-white cursor-pointer",
1956
+ "cursor-pointer",
1810
1957
  hasError ? "border-red-500" : "border-[#E4E5E6]"
1811
1958
  ),
1812
1959
  children: [
@@ -1826,20 +1973,21 @@ var QuestionnaireForm = ({
1826
1973
  return null;
1827
1974
  }
1828
1975
  };
1829
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pb-[80px]", children: [
1830
- 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) => {
1976
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pb-[80px] light", children: [
1977
+ 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) => {
1831
1978
  const questionId = getQuestionId(question);
1832
1979
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
1833
1980
  /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "block", children: [
1834
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-base font-medium text-gray-900", children: [
1981
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-base font-bold text-gray-900 dark:text-gray-900", children: [
1835
1982
  question.label,
1836
1983
  question.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 ml-1", children: "*" })
1837
1984
  ] }),
1838
- question.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-sm text-gray-600 mt-1", children: question.description })
1985
+ question.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-sm text-gray-600 dark:text-gray-600 font-bold mt-1", children: question.description }),
1986
+ 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 })
1839
1987
  ] }),
1840
1988
  renderQuestion(question),
1841
- question.hint && !errors[questionId] && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: question.hint }),
1842
- errors[questionId] && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", style: { color: "#FF4D4D" }, children: errors[questionId] })
1989
+ question.hint && !errors[questionId] && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 dark:text-gray-500 font-bold", children: question.hint }),
1990
+ errors[questionId] && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-bold", style: { color: "#FF4D4D" }, children: errors[questionId] })
1843
1991
  ] }, questionId);
1844
1992
  }) }) }),
1845
1993
  !!selectedTimeslotId && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center", children: [
@@ -1852,20 +2000,25 @@ var QuestionnaireForm = ({
1852
2000
  id: `agreement-${index}`,
1853
2001
  checked: agreements[index] || false,
1854
2002
  onChange: (e) => handleAgreementChange(index, e.target.checked),
1855
- className: "w-5 h-5 rounded border-gray-300 text-[#2FC257] focus:ring-[#2FC257] cursor-pointer flex-shrink-0"
2003
+ className: "w-5 h-5 rounded text-[#2FC257] focus:ring-[#2FC257] cursor-pointer flex-shrink-0",
2004
+ style: {
2005
+ backgroundColor: "white",
2006
+ borderColor: "#D1D5DB",
2007
+ colorScheme: "light"
2008
+ }
1856
2009
  }
1857
2010
  ),
1858
2011
  /* @__PURE__ */ jsxRuntime.jsx(
1859
2012
  "label",
1860
2013
  {
1861
2014
  htmlFor: `agreement-${index}`,
1862
- className: "text-sm text-gray-700 cursor-pointer select-none flex-1 [&_a]:underline [&_a]:text-blue-600 [&_a:hover]:text-blue-700",
2015
+ 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",
1863
2016
  dangerouslySetInnerHTML: { __html: agreeContent },
1864
2017
  "aria-label": `Agreement ${index + 1}`
1865
2018
  }
1866
2019
  )
1867
2020
  ] }, index)),
1868
- agreementError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm mt-2", style: { color: "#FF4D4D" }, children: agreementError })
2021
+ agreementError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-bold mt-2", style: { color: "#FF4D4D" }, children: agreementError })
1869
2022
  ] }),
1870
2023
  /* @__PURE__ */ jsxRuntime.jsx(
1871
2024
  "button",
@@ -1875,7 +2028,7 @@ var QuestionnaireForm = ({
1875
2028
  onClick: handleSubmit,
1876
2029
  className: cn(
1877
2030
  "w-fit mt-6 px-6 py-4 rounded-full",
1878
- "bg-[#080A0F] text-white font-medium text-base",
2031
+ "bg-[#080A0F] text-white font-bold text-base",
1879
2032
  "hover:bg-[#2FC257] transition-colors",
1880
2033
  "focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:ring-offset-2",
1881
2034
  "disabled:opacity-50 disabled:cursor-not-allowed"
@@ -1909,7 +2062,6 @@ var DateTimePicker = ({
1909
2062
  onBookingSuccess
1910
2063
  }) => {
1911
2064
  const { token } = antd.theme.useToken();
1912
- const [selectMonth, setSelectMonth] = React2.useState("");
1913
2065
  const [selectedDate, setSelectedDate] = React2.useState(null);
1914
2066
  const [calendarValue, setCalendarValue] = React2.useState(dayjs__default.default());
1915
2067
  const [selectedTimeslotId, setSelectedTimeslotId] = React2.useState(
@@ -1934,9 +2086,8 @@ var DateTimePicker = ({
1934
2086
  locale,
1935
2087
  { enabled: !!demoRoomCode && !!demoRoom?.questionnaire_id }
1936
2088
  );
1937
- const currentDate = selectedDate || dayjs__default.default();
1938
- const startDate = currentDate.startOf("month").format("YYYY-MM-DD");
1939
- const endDate = currentDate.endOf("month").format("YYYY-MM-DD");
2089
+ const startDate = calendarValue.startOf("month").format("YYYY-MM-DD");
2090
+ const endDate = calendarValue.endOf("month").format("YYYY-MM-DD");
1940
2091
  const {
1941
2092
  data: timeslotsData,
1942
2093
  loading: timeslotsLoading,
@@ -1992,6 +2143,28 @@ var DateTimePicker = ({
1992
2143
  setIsInitialized(true);
1993
2144
  }
1994
2145
  }, [timeslotsData, isInitialized, selectedDate]);
2146
+ React2.useEffect(() => {
2147
+ if (!timeslotsData?.timeslots || !isInitialized) return;
2148
+ if (selectedDate && selectedDate.isSame(calendarValue, "month")) {
2149
+ return;
2150
+ }
2151
+ const currentMonthStart = calendarValue.startOf("month");
2152
+ const currentMonthEnd = calendarValue.endOf("month");
2153
+ const now = dayjs__default.default();
2154
+ const availableTimeslots = timeslotsData.timeslots.filter((slot) => {
2155
+ const slotDate = dayjs__default.default(slot.start_time);
2156
+ return slot.status === "available" && slotDate.isAfter(now) && (slotDate.isAfter(currentMonthStart) || slotDate.isSame(currentMonthStart, "day")) && (slotDate.isBefore(currentMonthEnd) || slotDate.isSame(currentMonthEnd, "day"));
2157
+ });
2158
+ if (availableTimeslots.length > 0) {
2159
+ const sortedSlots = [...availableTimeslots].sort(
2160
+ (a, b) => dayjs__default.default(a.start_time).unix() - dayjs__default.default(b.start_time).unix()
2161
+ );
2162
+ const firstSlot = sortedSlots[0];
2163
+ const firstDate = dayjs__default.default(firstSlot.start_time);
2164
+ setSelectedDate(firstDate);
2165
+ setSelectedTimeslotId(firstSlot.id);
2166
+ }
2167
+ }, [calendarValue, timeslotsData, isInitialized, selectedDate]);
1995
2168
  const formatTimeslot = (slot) => {
1996
2169
  const start = dayjs__default.default(slot.start_time).format("h:mm A");
1997
2170
  const end = dayjs__default.default(slot.end_time).format("h:mm A");
@@ -2000,10 +2173,10 @@ var DateTimePicker = ({
2000
2173
  const wrapperStyle = {
2001
2174
  background: "#fff",
2002
2175
  border: `1px solid ${token.colorBorderSecondary}`,
2003
- borderRadius: token.borderRadiusLG
2176
+ borderRadius: 16
2004
2177
  };
2005
2178
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
2006
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[48px] l:text-[32px] py-[64px] l:py-[24px] font-bold text-center", children: pageData.scheduleYourVisit }),
2179
+ /* @__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 }),
2007
2180
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4 l:flex-col", children: [
2008
2181
  /* @__PURE__ */ jsxRuntime.jsx(
2009
2182
  antd.ConfigProvider,
@@ -2020,8 +2193,27 @@ var DateTimePicker = ({
2020
2193
  }
2021
2194
  }
2022
2195
  },
2023
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: wrapperStyle, className: "calendar-custom-cell w-[calc(824/1920*100vw)] min-l:max-w-[824px] l:w-full", children: [
2024
- /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
2196
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
2197
+ "div",
2198
+ {
2199
+ style: wrapperStyle,
2200
+ className: "calendar-custom-cell w-[calc(824/1920*100vw)] min-l:max-w-[824px] l:w-full",
2201
+ children: [
2202
+ /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
2203
+ .calendar-custom-cell {
2204
+ border-radius: 16px !important;
2205
+ overflow: hidden;
2206
+ padding: 0 24px 16px 24px !important;
2207
+ }
2208
+ .calendar-custom-cell,
2209
+ .calendar-custom-cell *,
2210
+ .calendar-custom-cell .ant-picker-panel,
2211
+ .calendar-custom-cell .ant-picker-calendar,
2212
+ .calendar-custom-cell .ant-picker-content,
2213
+ .calendar-custom-cell .ant-picker-cell,
2214
+ .calendar-custom-cell .ant-picker-calendar-date-value {
2215
+ font-family: 'MontForAnker' !important;
2216
+ }
2025
2217
  .calendar-custom-cell .ant-picker-cell {
2026
2218
  padding: 6px !important;
2027
2219
  text-align: center !important;
@@ -2039,6 +2231,11 @@ var DateTimePicker = ({
2039
2231
  border: 1px solid #E4E5E6 !important;
2040
2232
  aspect-ratio: 1 / 1 !important;
2041
2233
  }
2234
+ .calendar-custom-cell .ant-picker-calendar-date-value {
2235
+ line-height: 38px !important;
2236
+ font-weight: 700 !important;
2237
+ font-size: 14px !important;
2238
+ }
2042
2239
  @media (min-width: 1024px) and (max-width: 1919px) {
2043
2240
  .calendar-custom-cell .ant-picker-cell-inner {
2044
2241
  width: 54px !important;
@@ -2047,6 +2244,8 @@ var DateTimePicker = ({
2047
2244
  }
2048
2245
  .calendar-custom-cell .ant-picker-calendar-date-value {
2049
2246
  line-height: 54px !important;
2247
+ font-weight: 700 !important;
2248
+ font-size: 20px !important;
2050
2249
  }
2051
2250
  }
2052
2251
  @media (min-width: 1920px) {
@@ -2057,17 +2256,19 @@ var DateTimePicker = ({
2057
2256
  }
2058
2257
  .calendar-custom-cell .ant-picker-calendar-date-value {
2059
2258
  line-height: 100px !important;
2259
+ font-weight: 700 !important;
2260
+ font-size: 20px !important;
2060
2261
  }
2061
2262
  }
2062
2263
  .calendar-custom-cell .ant-picker-cell-selected .ant-picker-cell-inner,
2063
2264
  .calendar-custom-cell .ant-picker-cell-selected:not(.ant-picker-cell-disabled) .ant-picker-cell-inner {
2064
2265
  background-color: #3ADB67 !important;
2065
- color: white !important;
2266
+ color: #080A0F !important;
2066
2267
  border-color: #3ADB67 !important;
2067
2268
  }
2068
2269
  .calendar-custom-cell .ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner {
2069
2270
  background-color: #3ADB67 !important;
2070
- color: white !important;
2271
+ color: #080A0F !important;
2071
2272
  }
2072
2273
  .calendar-custom-cell .ant-picker-cell-today .ant-picker-cell-inner {
2073
2274
  border-color: #3ADB67 !important;
@@ -2086,25 +2287,24 @@ var DateTimePicker = ({
2086
2287
  .calendar-custom-cell .ant-picker-cell-today .ant-picker-cell-inner::before {
2087
2288
  display: none !important;
2088
2289
  }
2089
- .calendar-custom-cell .ant-picker-calendar-date-value {
2090
- line-height: 38px !important;
2091
- }
2092
2290
  .calendar-custom-cell .ant-picker-content {
2093
2291
  width: 100% !important;
2094
2292
  }
2095
2293
  .calendar-custom-cell .ant-picker-content thead tr th {
2096
2294
  line-height: 48px !important;
2295
+ font-weight: 700 !important;
2296
+ font-size: 18px !important;
2097
2297
  }
2098
2298
  .calendar-custom-cell .ant-picker-cell-disabled .ant-picker-cell-inner {
2099
2299
  background-color: #F5F5F5 !important;
2100
- color: #BDBDBD !important;
2101
- border-color: #E4E5E6 !important;
2300
+ color: #2A2C32 !important;
2301
+ border: none !important;
2102
2302
  cursor: not-allowed !important;
2103
2303
  box-shadow: none !important;
2104
2304
  }
2105
2305
  .calendar-custom-cell .ant-picker-cell-disabled:hover .ant-picker-cell-inner {
2106
2306
  background-color: #F5F5F5 !important;
2107
- border-color: #E4E5E6 !important;
2307
+ border: none !important;
2108
2308
  box-shadow: none !important;
2109
2309
  }
2110
2310
  .calendar-custom-cell .ant-picker-cell-disabled::before {
@@ -2114,170 +2314,169 @@ var DateTimePicker = ({
2114
2314
  display: none !important;
2115
2315
  }
2116
2316
  ` }),
2117
- /* @__PURE__ */ jsxRuntime.jsx(
2118
- antd.Calendar,
2119
- {
2120
- fullscreen: false,
2121
- value: calendarValue,
2122
- onSelect: (date) => {
2123
- setSelectedDate(date);
2124
- setCalendarValue(date);
2125
- },
2126
- onPanelChange: (date) => {
2127
- setCalendarValue(date);
2128
- },
2129
- disabledDate: (current) => {
2130
- if (!current) return false;
2131
- if (current.isSame(dayjs__default.default(), "day")) return false;
2132
- if (current.isBefore(dayjs__default.default(), "day")) return true;
2133
- const dateStr = current.format("YYYY-MM-DD");
2134
- return !availableDates.has(dateStr);
2135
- },
2136
- fullCellRender: (date) => {
2137
- const isSelected = selectedDate && date.isSame(selectedDate, "day");
2138
- const isToday = date.isSame(dayjs__default.default(), "day");
2139
- const dateStr = date.format("YYYY-MM-DD");
2140
- const isDisabled = !isToday && (date.isBefore(dayjs__default.default(), "day") || !availableDates.has(dateStr));
2141
- return /* @__PURE__ */ jsxRuntime.jsx(
2142
- "div",
2143
- {
2144
- className: `ant-picker-cell-inner ${isSelected ? "ant-picker-cell-inner-selected" : ""} ${isToday ? "ant-picker-cell-inner-today" : ""}`,
2145
- style: {
2146
- backgroundColor: isSelected ? "#3ADB67" : void 0,
2147
- color: isSelected ? "white" : isDisabled ? "#BDBDBD" : void 0,
2148
- borderColor: isSelected ? "#3ADB67" : isToday ? "#3ADB67" : void 0
2149
- },
2150
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ant-picker-calendar-date-value", children: date.date() })
2151
- }
2152
- );
2153
- },
2154
- headerRender: ({ value, onChange }) => {
2155
- const year = value.year();
2156
- const month = value.month();
2157
- const yearOptions = Array.from({ length: 20 }, (_, i) => {
2158
- const label = year - 10 + i;
2159
- return { label, value: label };
2160
- });
2161
- const monthOptions = value.localeData().months().map((label, index) => ({
2162
- label,
2163
- value: index
2164
- }));
2165
- const monthText = monthOptions?.find((item) => {
2166
- return item?.value === month;
2167
- });
2168
- setSelectMonth(monthText?.label || "");
2169
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-3", children: [
2170
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
2171
- /* @__PURE__ */ jsxRuntime.jsx(
2172
- antd.Select,
2317
+ /* @__PURE__ */ jsxRuntime.jsx(
2318
+ antd.Calendar,
2319
+ {
2320
+ fullscreen: false,
2321
+ value: calendarValue,
2322
+ onSelect: (date) => {
2323
+ setSelectedDate(date);
2324
+ setCalendarValue(date);
2325
+ },
2326
+ onPanelChange: (date) => {
2327
+ setCalendarValue(date);
2328
+ },
2329
+ disabledDate: (current) => {
2330
+ if (!current) return false;
2331
+ if (current.isSame(dayjs__default.default(), "day")) return false;
2332
+ if (current.isBefore(dayjs__default.default(), "day")) return true;
2333
+ const dateStr = current.format("YYYY-MM-DD");
2334
+ return !availableDates.has(dateStr);
2335
+ },
2336
+ fullCellRender: (date) => {
2337
+ const isSelected = selectedDate && date.isSame(selectedDate, "day");
2338
+ const isToday = date.isSame(dayjs__default.default(), "day");
2339
+ const dateStr = date.format("YYYY-MM-DD");
2340
+ const isDisabled = !isToday && (date.isBefore(dayjs__default.default(), "day") || !availableDates.has(dateStr));
2341
+ return /* @__PURE__ */ jsxRuntime.jsx(
2342
+ "div",
2173
2343
  {
2174
- value: month,
2175
- options: monthOptions,
2176
- onChange: (newMonth) => {
2177
- const now = value.clone().month(newMonth);
2178
- onChange(now);
2179
- },
2180
- variant: "borderless",
2181
- className: "text-2xl font-medium",
2182
- popupMatchSelectWidth: false,
2344
+ className: `ant-picker-cell-inner ${isSelected ? "ant-picker-cell-inner-selected" : ""} ${isToday ? "ant-picker-cell-inner-today" : ""}`,
2183
2345
  style: {
2184
- fontSize: "24px",
2185
- fontWeight: 500
2186
- }
2187
- }
2188
- ),
2189
- /* @__PURE__ */ jsxRuntime.jsx(
2190
- antd.Select,
2191
- {
2192
- value: year,
2193
- options: yearOptions,
2194
- onChange: (newYear) => {
2195
- const now = value.clone().year(newYear);
2196
- onChange(now);
2346
+ backgroundColor: isSelected ? "#3ADB67" : void 0,
2347
+ color: isSelected ? "#080A0F" : isDisabled ? "#2A2C32" : void 0,
2348
+ borderColor: isSelected ? "#3ADB67" : isToday ? "#3ADB67" : void 0
2197
2349
  },
2198
- variant: "borderless",
2199
- className: "text-2xl font-medium",
2200
- popupMatchSelectWidth: false,
2201
- style: {
2202
- fontSize: "24px",
2203
- fontWeight: 500
2204
- }
2350
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ant-picker-calendar-date-value", children: date.date() })
2205
2351
  }
2206
- )
2207
- ] }),
2208
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
2209
- /* @__PURE__ */ jsxRuntime.jsx(
2210
- "button",
2211
- {
2212
- onClick: () => {
2213
- const newDate = value.subtract(1, "month");
2214
- onChange(newDate);
2215
- },
2216
- className: "w-10 h-10 flex items-center justify-center hover:bg-gray-100 rounded-lg transition-colors",
2217
- children: /* @__PURE__ */ jsxRuntime.jsx(
2218
- "svg",
2352
+ );
2353
+ },
2354
+ headerRender: ({ value, onChange }) => {
2355
+ const year = value.year();
2356
+ const month = value.month();
2357
+ const yearOptions = Array.from({ length: 20 }, (_, i) => {
2358
+ const label = year - 10 + i;
2359
+ return { label, value: label };
2360
+ });
2361
+ const monthOptions = value.localeData().months().map((label, index) => ({
2362
+ label,
2363
+ value: index
2364
+ }));
2365
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-3 l:pb-[0px]", children: [
2366
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
2367
+ /* @__PURE__ */ jsxRuntime.jsx(
2368
+ antd.Select,
2219
2369
  {
2220
- width: "20",
2221
- height: "20",
2222
- viewBox: "0 0 20 20",
2223
- fill: "none",
2224
- xmlns: "http://www.w3.org/2000/svg",
2370
+ value: month,
2371
+ options: monthOptions,
2372
+ onChange: (newMonth) => {
2373
+ const now = value.clone().month(newMonth);
2374
+ onChange(now);
2375
+ },
2376
+ variant: "borderless",
2377
+ className: "text-[32px] l:text-[20px] font-bold",
2378
+ popupMatchSelectWidth: false,
2379
+ suffixIcon: null,
2380
+ style: {
2381
+ fontWeight: 700
2382
+ }
2383
+ }
2384
+ ),
2385
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[20px] text-[#E4E5E6]", children: "/" }),
2386
+ /* @__PURE__ */ jsxRuntime.jsx(
2387
+ antd.Select,
2388
+ {
2389
+ value: year,
2390
+ options: yearOptions,
2391
+ onChange: (newYear) => {
2392
+ const now = value.clone().year(newYear);
2393
+ onChange(now);
2394
+ },
2395
+ variant: "borderless",
2396
+ className: "text-[32px] l:text-[20px] font-bold",
2397
+ popupMatchSelectWidth: false,
2398
+ suffixIcon: null,
2399
+ style: {
2400
+ fontWeight: 700
2401
+ }
2402
+ }
2403
+ )
2404
+ ] }),
2405
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
2406
+ /* @__PURE__ */ jsxRuntime.jsx(
2407
+ "button",
2408
+ {
2409
+ onClick: () => {
2410
+ const newDate = value.subtract(1, "month");
2411
+ onChange(newDate);
2412
+ },
2413
+ className: "w-10 h-10 flex items-center justify-center hover:bg-gray-100 rounded-lg transition-colors",
2225
2414
  children: /* @__PURE__ */ jsxRuntime.jsx(
2226
- "path",
2415
+ "svg",
2227
2416
  {
2228
- d: "M12 16L6 10L12 4",
2229
- stroke: "currentColor",
2230
- strokeWidth: "2",
2231
- strokeLinecap: "round",
2232
- strokeLinejoin: "round"
2417
+ width: "20",
2418
+ height: "20",
2419
+ viewBox: "0 0 20 20",
2420
+ fill: "none",
2421
+ xmlns: "http://www.w3.org/2000/svg",
2422
+ children: /* @__PURE__ */ jsxRuntime.jsx(
2423
+ "path",
2424
+ {
2425
+ d: "M12 16L6 10L12 4",
2426
+ stroke: "currentColor",
2427
+ strokeWidth: "2",
2428
+ strokeLinecap: "round",
2429
+ strokeLinejoin: "round"
2430
+ }
2431
+ )
2233
2432
  }
2234
2433
  )
2235
2434
  }
2236
- )
2237
- }
2238
- ),
2239
- /* @__PURE__ */ jsxRuntime.jsx(
2240
- "button",
2241
- {
2242
- onClick: () => {
2243
- const newDate = value.add(1, "month");
2244
- onChange(newDate);
2245
- },
2246
- className: "w-10 h-10 flex items-center justify-center hover:bg-gray-100 rounded-lg transition-colors",
2247
- children: /* @__PURE__ */ jsxRuntime.jsx(
2248
- "svg",
2435
+ ),
2436
+ /* @__PURE__ */ jsxRuntime.jsx(
2437
+ "button",
2249
2438
  {
2250
- width: "20",
2251
- height: "20",
2252
- viewBox: "0 0 20 20",
2253
- fill: "none",
2254
- xmlns: "http://www.w3.org/2000/svg",
2439
+ onClick: () => {
2440
+ const newDate = value.add(1, "month");
2441
+ onChange(newDate);
2442
+ },
2443
+ className: "w-10 h-10 flex items-center justify-center hover:bg-gray-100 rounded-lg transition-colors",
2255
2444
  children: /* @__PURE__ */ jsxRuntime.jsx(
2256
- "path",
2445
+ "svg",
2257
2446
  {
2258
- d: "M8 4L14 10L8 16",
2259
- stroke: "currentColor",
2260
- strokeWidth: "2",
2261
- strokeLinecap: "round",
2262
- strokeLinejoin: "round"
2447
+ width: "20",
2448
+ height: "20",
2449
+ viewBox: "0 0 20 20",
2450
+ fill: "none",
2451
+ xmlns: "http://www.w3.org/2000/svg",
2452
+ children: /* @__PURE__ */ jsxRuntime.jsx(
2453
+ "path",
2454
+ {
2455
+ d: "M8 4L14 10L8 16",
2456
+ stroke: "currentColor",
2457
+ strokeWidth: "2",
2458
+ strokeLinecap: "round",
2459
+ strokeLinejoin: "round"
2460
+ }
2461
+ )
2263
2462
  }
2264
2463
  )
2265
2464
  }
2266
2465
  )
2267
- }
2268
- )
2269
- ] })
2270
- ] });
2271
- }
2272
- }
2273
- )
2274
- ] })
2466
+ ] })
2467
+ ] });
2468
+ }
2469
+ }
2470
+ )
2471
+ ]
2472
+ }
2473
+ )
2275
2474
  }
2276
2475
  ),
2277
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white p-[24px] rounded-[12px] flex-1", children: [
2278
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
2279
- pageData.timeSlot,
2280
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
2476
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white p-[24px] rounded-[16px] flex-1", children: [
2477
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [
2478
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[24px] l:text-[16px]", children: pageData.timeSlot }),
2479
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex text-[18px] l:text-[14px] l:gap-1 gap-2", children: [
2281
2480
  /* @__PURE__ */ jsxRuntime.jsx(
2282
2481
  "button",
2283
2482
  {
@@ -2291,7 +2490,7 @@ var DateTimePicker = ({
2291
2490
  }
2292
2491
  },
2293
2492
  disabled: !selectedDate || selectedDate.isSame(dayjs__default.default(), "day") || selectedDate.isBefore(dayjs__default.default(), "day"),
2294
- 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",
2493
+ 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",
2295
2494
  children: /* @__PURE__ */ jsxRuntime.jsx(
2296
2495
  "svg",
2297
2496
  {
@@ -2311,7 +2510,7 @@ var DateTimePicker = ({
2311
2510
  )
2312
2511
  }
2313
2512
  ),
2314
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: selectMonth }),
2513
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: selectedDate ? selectedDate.format("MMMM D") : "" }),
2315
2514
  /* @__PURE__ */ jsxRuntime.jsx(
2316
2515
  "button",
2317
2516
  {
@@ -2323,7 +2522,7 @@ var DateTimePicker = ({
2323
2522
  }
2324
2523
  },
2325
2524
  disabled: !selectedDate,
2326
- 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",
2525
+ 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",
2327
2526
  children: /* @__PURE__ */ jsxRuntime.jsx(
2328
2527
  "svg",
2329
2528
  {
@@ -2345,7 +2544,7 @@ var DateTimePicker = ({
2345
2544
  )
2346
2545
  ] })
2347
2546
  ] }),
2348
- /* @__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) => {
2547
+ /* @__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-[#2A2C32] 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-[#2A2C32] py-8", children: pageData.noAvailableTimeSlots }) : dayTimeslots.map((slot) => {
2349
2548
  const isAvailable = slot.status === "available";
2350
2549
  const isFull = slot.status === "full";
2351
2550
  const isSelected = selectedTimeslotId === slot.id;
@@ -2359,19 +2558,19 @@ var DateTimePicker = ({
2359
2558
  }
2360
2559
  },
2361
2560
  className: `
2362
- rounded-[20px] w-full flex items-center justify-center gap-4 h-[76px]
2561
+ rounded-[20px] w-full text-[18px] l:gap-2 l:text-[16px] flex items-center justify-center gap-4 h-[76px]
2363
2562
  border text-center transition-colors
2364
- ${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"}
2563
+ ${isSelected ? "border-[#3ADB67] bg-[#3ADB67] cursor-pointer" : isAvailable ? "border-[#E4E5E6] hover:border-[#3ADB67] hover:bg-[#3ADB67] cursor-pointer" : "border-[#E4E5E6] bg-[#F5F5F5] text-[#2A2C32] cursor-not-allowed"}
2365
2564
  `,
2366
2565
  children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
2367
2566
  /* @__PURE__ */ jsxRuntime.jsx("div", { children: formatTimeslot(slot) }),
2368
- isFull && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-[#BDBDBD] mt-1", children: pageData.full }),
2369
- isAvailable && !isSelected && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-[#767880] mt-1", children: [
2567
+ isFull && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[16px] l:text-[14px] text-[#2A2C32] mt-[2px]", children: pageData.full }),
2568
+ isAvailable && !isSelected && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[16px] l:text-[14px] text-[#2A2C32] mt-1", children: [
2370
2569
  slot.capacity - slot.booked_count,
2371
2570
  " ",
2372
2571
  pageData.spotsLeft
2373
2572
  ] }),
2374
- isAvailable && isSelected && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-white mt-1", children: [
2573
+ isAvailable && isSelected && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[16px] l:text-[14px] mt-1", children: [
2375
2574
  slot.capacity - slot.booked_count,
2376
2575
  " ",
2377
2576
  pageData.spotsLeft
@@ -2380,12 +2579,16 @@ var DateTimePicker = ({
2380
2579
  },
2381
2580
  slot.id
2382
2581
  );
2383
- }) })
2582
+ }) }),
2583
+ !timeslotsLoading && dayTimeslots?.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-[24px] text-[#6d6d6F] text-center", children: pageData?.timezone?.replace(
2584
+ "{{timezone}}",
2585
+ demoRoom?.timezone || timezone || ""
2586
+ ) })
2384
2587
  ] })
2385
2588
  ] }),
2386
2589
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-12", children: [
2387
- !!questionnaire?.questions?.length && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[48px] font-bold text-center mb-8", children: pageData.fillOutForm }),
2388
- questionnaireLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center text-[#767880] py-8", children: pageData.loadingQuestionnaire }) : /* @__PURE__ */ jsxRuntime.jsx(
2590
+ !!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 }),
2591
+ questionnaireLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center text-[#2A2C32] py-8", children: pageData.loadingQuestionnaire }) : /* @__PURE__ */ jsxRuntime.jsx(
2389
2592
  QuestionnaireForm,
2390
2593
  {
2391
2594
  questions: questionnaire?.questions || [],
@@ -2506,7 +2709,7 @@ var DemoRoomDetail = ({
2506
2709
  });
2507
2710
  const title = demoRoom?.name || titleProp || "Design District Demo Room";
2508
2711
  const descriptions = demoRoom?.description ? [demoRoom.description] : descriptionsProp || defaultDescriptions;
2509
- const devices = demoRoom?.description || devicesProp || "eufyMake E1, eufyMake M5";
2712
+ const devices = demoRoom?.equipment?.join(", ") || devicesProp || "eufyMake E1, eufyMake M5";
2510
2713
  const address = demoRoom?.address || addressProp || "1111 8th St, San Francisco, CA United States 94108";
2511
2714
  const images = demoRoom?.images && demoRoom.images.length > 0 ? demoRoom.images : imagesProp || defaultImages;
2512
2715
  const googleMapsLink = mapsLink || (() => {
@@ -2532,10 +2735,10 @@ var DemoRoomDetail = ({
2532
2735
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm mt-2", children: error.message })
2533
2736
  ] }) });
2534
2737
  }
2535
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-8 l:flex l:flex-col items-start", children: [
2536
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6 py-[24px]", children: [
2537
- /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-[40px] font-bold text-gray-900 leading-tight", children: title }),
2538
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: descriptions.map((desc, index) => /* @__PURE__ */ jsxRuntime.jsx(
2738
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-[80px] l:gap-[40px] l:flex l:flex-col-reverse items-start py-[24px] l:pb-[64px]", children: [
2739
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
2740
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-[48px] l:text-[32px] font-bold text-gray-900 leading-tight", children: title }),
2741
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[20px]", children: descriptions.map((desc, index) => /* @__PURE__ */ jsxRuntime.jsx(
2539
2742
  "p",
2540
2743
  {
2541
2744
  className: "text-base text-gray-600 leading-relaxed",
@@ -2554,34 +2757,24 @@ var DemoRoomDetail = ({
2554
2757
  xmlns: "http://www.w3.org/2000/svg",
2555
2758
  className: "flex-shrink-0 mt-0.5",
2556
2759
  children: [
2557
- /* @__PURE__ */ jsxRuntime.jsx(
2558
- "rect",
2559
- {
2560
- x: "3",
2561
- y: "3",
2562
- width: "18",
2563
- height: "18",
2564
- rx: "2",
2565
- stroke: "currentColor",
2566
- strokeWidth: "2"
2567
- }
2568
- ),
2569
2760
  /* @__PURE__ */ jsxRuntime.jsx(
2570
2761
  "path",
2571
2762
  {
2572
- d: "M8 10H16",
2763
+ 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",
2573
2764
  stroke: "currentColor",
2574
2765
  strokeWidth: "2",
2575
- strokeLinecap: "round"
2766
+ strokeLinecap: "round",
2767
+ strokeLinejoin: "round"
2576
2768
  }
2577
2769
  ),
2578
2770
  /* @__PURE__ */ jsxRuntime.jsx(
2579
2771
  "path",
2580
2772
  {
2581
- d: "M8 14H16",
2773
+ 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",
2582
2774
  stroke: "currentColor",
2583
2775
  strokeWidth: "2",
2584
- strokeLinecap: "round"
2776
+ strokeLinecap: "round",
2777
+ strokeLinejoin: "round"
2585
2778
  }
2586
2779
  )
2587
2780
  ]
@@ -2660,7 +2853,7 @@ var DemoRoomDetail = ({
2660
2853
  ] })
2661
2854
  ] })
2662
2855
  ] }),
2663
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative l:w-full h-[400px] rounded-2xl overflow-hidden", children: images.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
2856
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative l:w-full min-l:h-[400px] rounded-2xl overflow-hidden", children: images.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
2664
2857
  react.Swiper,
2665
2858
  {
2666
2859
  ...swiperVersion === "11+" && Navigation && Pagination && Autoplay ? { modules: [Navigation, Pagination, Autoplay] } : {},
@@ -2738,15 +2931,18 @@ var BookingForm = ({
2738
2931
  () => createDemoRoomApi(apiConfig),
2739
2932
  [apiConfig]
2740
2933
  );
2741
- const dateTimePickerPageData = React2.useMemo(() => ({
2742
- ...pageData?.dateTimePicker,
2743
- ...pageData?.questionnaireForm
2744
- }), [pageData?.dateTimePicker, pageData?.questionnaireForm]);
2934
+ const dateTimePickerPageData = React2.useMemo(
2935
+ () => ({
2936
+ ...pageData?.dateTimePicker,
2937
+ ...pageData?.questionnaireForm
2938
+ }),
2939
+ [pageData?.dateTimePicker, pageData?.questionnaireForm]
2940
+ );
2745
2941
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
2746
2942
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
2747
2943
  DemoRoomDetail,
2748
2944
  {
2749
- className: cn("mt-8", layoutClassName),
2945
+ className: cn("min-l:mt-8", layoutClassName),
2750
2946
  apiClient,
2751
2947
  demoRoomCode,
2752
2948
  locale: apiConfig.locale,
@@ -2824,7 +3020,9 @@ var BookingSuccess = ({
2824
3020
  }, [token, apiConfig, initialBookingData]);
2825
3021
  const handleCancelAppointment = async () => {
2826
3022
  if (!token || !apiConfig) {
2827
- setCancelError(pageData.cancelError || "Unable to cancel: Missing token or API configuration");
3023
+ setCancelError(
3024
+ pageData.cancelError || "Unable to cancel: Missing token or API configuration"
3025
+ );
2828
3026
  return;
2829
3027
  }
2830
3028
  setCancelLoading(true);
@@ -2845,13 +3043,15 @@ var BookingSuccess = ({
2845
3043
  }
2846
3044
  } catch (err) {
2847
3045
  console.error("Failed to cancel booking:", err);
2848
- setCancelError(pageData.cancelError || "Failed to cancel appointment. Please try again.");
3046
+ setCancelError(
3047
+ pageData.cancelError || "Failed to cancel appointment. Please try again."
3048
+ );
2849
3049
  } finally {
2850
3050
  setCancelLoading(false);
2851
3051
  }
2852
3052
  };
2853
3053
  if (loading) {
2854
- 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: [
3054
+ 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: [
2855
3055
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 bg-gray-200 rounded w-1/3" }),
2856
3056
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-24 bg-gray-200 rounded" }),
2857
3057
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
@@ -2864,24 +3064,24 @@ var BookingSuccess = ({
2864
3064
  if (!bookingData) {
2865
3065
  return null;
2866
3066
  }
2867
- 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: [
3067
+ 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: [
2868
3068
  /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-[40px] font-bold text-gray-900 mb-8", children: pageData.yourAppointment }),
2869
- isCancelled && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-lg p-6 mb-8 flex items-center justify-between", children: [
3069
+ 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: [
2870
3070
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-700", children: pageData.appointmentCanceled }),
2871
- onScheduleAgain && /* @__PURE__ */ jsxRuntime.jsx(
3071
+ onScheduleAgain && bookingData && /* @__PURE__ */ jsxRuntime.jsx(
2872
3072
  "button",
2873
3073
  {
2874
- onClick: onScheduleAgain,
2875
- className: "px-6 py-3 bg-black text-white rounded-full font-medium hover:bg-gray-800 transition-colors whitespace-nowrap",
3074
+ onClick: () => onScheduleAgain(bookingData.demoroom_code),
3075
+ className: "px-6 py-3 bg-black text-white rounded-full hover:bg-gray-800 transition-colors whitespace-nowrap",
2876
3076
  children: pageData.scheduleAgain
2877
3077
  }
2878
3078
  )
2879
3079
  ] }),
2880
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-8 bg-white px-[48px] py-[32px] rounded-lg", children: [
3080
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-8 bg-white px-[48px] l:px-[16px] l:py-[16px] py-[32px] rounded-[16px]", children: [
2881
3081
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
2882
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: pageData.location }),
3082
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg text-gray-900 mb-3", children: pageData.location }),
2883
3083
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
2884
- bookingData.demoroom_name && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base font-medium text-gray-900", children: bookingData.demoroom_name }),
3084
+ bookingData.demoroom_name && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-900", children: bookingData.demoroom_name }),
2885
3085
  bookingData.address && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-600", children: bookingData.address }),
2886
3086
  bookingData.latitude && bookingData.longitude && /* @__PURE__ */ jsxRuntime.jsx(
2887
3087
  "a",
@@ -2896,7 +3096,7 @@ var BookingSuccess = ({
2896
3096
  ] })
2897
3097
  ] }),
2898
3098
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
2899
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: pageData.dateAndTime }),
3099
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg text-gray-900 mb-3", children: pageData.dateAndTime }),
2900
3100
  /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-base text-gray-900", children: [
2901
3101
  bookingData.booking_date,
2902
3102
  bookingData.time_slot && `, ${bookingData.time_slot}`,
@@ -2904,15 +3104,15 @@ var BookingSuccess = ({
2904
3104
  ] })
2905
3105
  ] }),
2906
3106
  bookingData.equipment && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
2907
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: pageData.event }),
2908
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-900", children: bookingData.equipment })
3107
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg text-gray-900 mb-3", children: pageData.event }),
3108
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-900", children: Array.isArray(bookingData.equipment) ? bookingData.equipment.join(", ") : bookingData.equipment })
2909
3109
  ] }),
2910
3110
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
2911
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: pageData.demoRoom }),
3111
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg text-gray-900 mb-3", children: pageData.demoRoom }),
2912
3112
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-900", children: bookingData.demoroom_code })
2913
3113
  ] }),
2914
3114
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
2915
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-3", children: pageData.visitorInfo }),
3115
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg text-gray-900 mb-3", children: pageData.visitorInfo }),
2916
3116
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
2917
3117
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-gray-900", children: bookingData.customer_name }),
2918
3118
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-base text-gray-600", children: [
@@ -2970,13 +3170,13 @@ var BookingSuccess = ({
2970
3170
  {
2971
3171
  onClick: () => setShowCancelDialog(true),
2972
3172
  disabled: cancelLoading,
2973
- 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",
3173
+ 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",
2974
3174
  children: pageData.cancelAppointment
2975
3175
  }
2976
3176
  ),
2977
3177
  cancelError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm mt-2", style: { color: "#FF4D4D" }, children: cancelError })
2978
3178
  ] }),
2979
- 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: [
3179
+ 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: [
2980
3180
  /* @__PURE__ */ jsxRuntime.jsx(
2981
3181
  "button",
2982
3182
  {
@@ -3006,28 +3206,28 @@ var BookingSuccess = ({
3006
3206
  )
3007
3207
  }
3008
3208
  ),
3009
- /* @__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(
3209
+ /* @__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(
3010
3210
  "svg",
3011
3211
  {
3012
- width: "32",
3013
- height: "32",
3014
- viewBox: "0 0 32 32",
3015
- fill: "none",
3016
3212
  xmlns: "http://www.w3.org/2000/svg",
3017
- children: /* @__PURE__ */ jsxRuntime.jsx(
3018
- "path",
3019
- {
3020
- d: "M16 10V17M16 22H16.01",
3021
- stroke: "white",
3022
- strokeWidth: "3",
3023
- strokeLinecap: "round",
3024
- strokeLinejoin: "round"
3025
- }
3026
- )
3213
+ width: "48",
3214
+ height: "48",
3215
+ viewBox: "0 0 48 48",
3216
+ fill: "none",
3217
+ children: [
3218
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "24", cy: "24", r: "21", fill: "#FFC24D" }),
3219
+ /* @__PURE__ */ jsxRuntime.jsx(
3220
+ "path",
3221
+ {
3222
+ 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",
3223
+ fill: "white"
3224
+ }
3225
+ )
3226
+ ]
3027
3227
  }
3028
3228
  ) }) }),
3029
3229
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center mb-8", children: [
3030
- /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[18px] font-semibold text-gray-900 mb-2", children: pageData.cancelDialog?.title }),
3230
+ /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[18px] text-gray-900 mb-2", children: pageData.cancelDialog?.title }),
3031
3231
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[14px] text-gray-600", children: pageData.cancelDialog?.description })
3032
3232
  ] }),
3033
3233
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 justify-center", children: [
@@ -3036,7 +3236,7 @@ var BookingSuccess = ({
3036
3236
  {
3037
3237
  onClick: () => setShowCancelDialog(false),
3038
3238
  disabled: cancelLoading,
3039
- 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]",
3239
+ 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]",
3040
3240
  children: pageData.cancelDialog?.backButton
3041
3241
  }
3042
3242
  ),
@@ -3045,7 +3245,7 @@ var BookingSuccess = ({
3045
3245
  {
3046
3246
  onClick: handleCancelAppointment,
3047
3247
  disabled: cancelLoading,
3048
- 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",
3248
+ 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",
3049
3249
  children: cancelLoading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
3050
3250
  /* @__PURE__ */ jsxRuntime.jsxs(
3051
3251
  "svg",