@anker-in/ui 0.1.10 → 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.
- package/dist/demo-room.js +107 -94
- package/dist/demo-room.js.map +1 -1
- package/dist/demo-room.mjs +107 -94
- package/dist/demo-room.mjs.map +1 -1
- package/dist/index.d.mts +3 -2
- package/dist/index.d.ts +3 -2
- package/dist/index.js +262 -212
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +262 -212
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -62,7 +62,7 @@ var StudioCard = ({
|
|
|
62
62
|
{
|
|
63
63
|
...props,
|
|
64
64
|
className: cn(
|
|
65
|
-
"p-6 cursor-pointer transition-colors duration-200",
|
|
65
|
+
"p-6 cursor-pointer transition-colors duration-200 border-b border-[#E4E5E6] last:border-b-0",
|
|
66
66
|
className
|
|
67
67
|
),
|
|
68
68
|
style: {
|
|
@@ -79,8 +79,8 @@ var StudioCard = ({
|
|
|
79
79
|
},
|
|
80
80
|
children: [
|
|
81
81
|
/* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between mb-4", children: [
|
|
82
|
-
/* @__PURE__ */ jsx("h3", { className: "text-
|
|
83
|
-
distance !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-
|
|
82
|
+
/* @__PURE__ */ jsx("h3", { className: "text-[24px] l:text-[20px] font-bold text-[#080A0F]", children: name }),
|
|
83
|
+
distance !== void 0 && /* @__PURE__ */ 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: [
|
|
84
84
|
formatDistance(distance),
|
|
85
85
|
" ",
|
|
86
86
|
pageData.away
|
|
@@ -139,7 +139,7 @@ var StudioCard = ({
|
|
|
139
139
|
]
|
|
140
140
|
}
|
|
141
141
|
),
|
|
142
|
-
/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("p", { className: "text-
|
|
142
|
+
/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("p", { className: "text-[16px] l:text-[12px] text-[#2A2C32]", children: [
|
|
143
143
|
availableTime === pageData.noAvailableTime ? "" : pageData.available,
|
|
144
144
|
" ",
|
|
145
145
|
availableTime
|
|
@@ -175,7 +175,7 @@ var StudioCard = ({
|
|
|
175
175
|
]
|
|
176
176
|
}
|
|
177
177
|
),
|
|
178
|
-
/* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx("p", { className: "text-
|
|
178
|
+
/* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx("p", { className: "text-[16px] l:text-[14px] text-[#2A2C32] break-words", children: address }) })
|
|
179
179
|
] }),
|
|
180
180
|
/* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 mb-6", children: [
|
|
181
181
|
/* @__PURE__ */ jsxs(
|
|
@@ -183,55 +183,44 @@ var StudioCard = ({
|
|
|
183
183
|
{
|
|
184
184
|
width: "20",
|
|
185
185
|
height: "20",
|
|
186
|
-
viewBox: "0 0
|
|
186
|
+
viewBox: "0 0 24 24",
|
|
187
187
|
fill: "none",
|
|
188
188
|
xmlns: "http://www.w3.org/2000/svg",
|
|
189
189
|
className: "flex-shrink-0 mt-0.5",
|
|
190
190
|
children: [
|
|
191
|
-
/* @__PURE__ */ jsx(
|
|
192
|
-
"rect",
|
|
193
|
-
{
|
|
194
|
-
x: "3",
|
|
195
|
-
y: "5",
|
|
196
|
-
width: "14",
|
|
197
|
-
height: "10",
|
|
198
|
-
rx: "1.5",
|
|
199
|
-
stroke: "currentColor",
|
|
200
|
-
strokeWidth: "1.5"
|
|
201
|
-
}
|
|
202
|
-
),
|
|
203
191
|
/* @__PURE__ */ jsx(
|
|
204
192
|
"path",
|
|
205
193
|
{
|
|
206
|
-
d: "
|
|
194
|
+
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",
|
|
207
195
|
stroke: "currentColor",
|
|
208
|
-
strokeWidth: "
|
|
209
|
-
strokeLinecap: "round"
|
|
196
|
+
strokeWidth: "2",
|
|
197
|
+
strokeLinecap: "round",
|
|
198
|
+
strokeLinejoin: "round"
|
|
210
199
|
}
|
|
211
200
|
),
|
|
212
201
|
/* @__PURE__ */ jsx(
|
|
213
202
|
"path",
|
|
214
203
|
{
|
|
215
|
-
d: "
|
|
204
|
+
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",
|
|
216
205
|
stroke: "currentColor",
|
|
217
|
-
strokeWidth: "
|
|
218
|
-
strokeLinecap: "round"
|
|
206
|
+
strokeWidth: "2",
|
|
207
|
+
strokeLinecap: "round",
|
|
208
|
+
strokeLinejoin: "round"
|
|
219
209
|
}
|
|
220
|
-
)
|
|
221
|
-
/* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "1.5", fill: "currentColor" })
|
|
210
|
+
)
|
|
222
211
|
]
|
|
223
212
|
}
|
|
224
213
|
),
|
|
225
|
-
/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("p", { className: "text-
|
|
214
|
+
/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("p", { className: "text-[16px] l:text-[14px] text-[#2A2C32]", children: euifyMakeModel }) })
|
|
226
215
|
] }),
|
|
227
216
|
/* @__PURE__ */ jsx(
|
|
228
217
|
"button",
|
|
229
218
|
{
|
|
230
219
|
onClick: handleScheduleClick,
|
|
231
220
|
className: cn(
|
|
232
|
-
"w-
|
|
233
|
-
"bg-white text-gray-900 border border-gray-900",
|
|
234
|
-
"font-
|
|
221
|
+
"w-fit px-[28px] l:px-[20px] l:py-[8px] py-3 rounded-full",
|
|
222
|
+
"bg-white text-gray-900 border-2 border-gray-900",
|
|
223
|
+
"font-bold text-[16px] l:text-[14px]",
|
|
235
224
|
"hover:bg-gray-900 hover:text-white",
|
|
236
225
|
"transition-all duration-200"
|
|
237
226
|
),
|
|
@@ -351,14 +340,12 @@ var StudioMap = ({
|
|
|
351
340
|
const lng = Number(location.lng);
|
|
352
341
|
const svgIcon = {
|
|
353
342
|
url: `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
|
|
354
|
-
<svg width="
|
|
355
|
-
<
|
|
356
|
-
<circle cx="24" cy="24" r="10" fill="#000000"/>
|
|
357
|
-
<circle cx="24" cy="24" r="5" fill="#3ADB67"/>
|
|
343
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="44" viewBox="0 0 17 22" fill="none">
|
|
344
|
+
<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"/>
|
|
358
345
|
</svg>
|
|
359
346
|
`)}`,
|
|
360
|
-
scaledSize: { width:
|
|
361
|
-
anchor: { x:
|
|
347
|
+
scaledSize: { width: 34, height: 44 },
|
|
348
|
+
anchor: { x: 17, y: 44 }
|
|
362
349
|
};
|
|
363
350
|
const marker = new google.maps.Marker({
|
|
364
351
|
position: { lat, lng },
|
|
@@ -369,41 +356,53 @@ var StudioMap = ({
|
|
|
369
356
|
marker.addListener("click", () => {
|
|
370
357
|
setSelectedLocation(location);
|
|
371
358
|
const content = `
|
|
372
|
-
<div style="padding: 16px;
|
|
373
|
-
<h3 style="margin: 0 0
|
|
374
|
-
${location.availableTime ? `<div style="
|
|
375
|
-
<svg style="
|
|
376
|
-
<
|
|
359
|
+
<div style="padding: 0 16px 16px 16px; font-weight: 700; font-family: 'MontForAnker'; max-width: 420px;">
|
|
360
|
+
<h3 style="margin: 0 0 16px 0; font-size: 24px; color: #080A0F;">${location.name}</h3>
|
|
361
|
+
${location.availableTime ? `<div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px;">
|
|
362
|
+
<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">
|
|
363
|
+
<rect x="3" y="4" width="14" height="13" rx="2" stroke="currentColor" stroke-width="1.5"/>
|
|
364
|
+
<path d="M3 8H17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
365
|
+
<path d="M6 2V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
366
|
+
<path d="M14 2V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
377
367
|
</svg>
|
|
378
|
-
<
|
|
368
|
+
<div>
|
|
369
|
+
<p style="margin: 0; font-size: 16px; color: #2A2C32;">${location.availableTime === pageData?.noAvailableTime ? "" : pageData.available} ${location.availableTime}</p>
|
|
370
|
+
</div>
|
|
379
371
|
</div>` : ""}
|
|
380
|
-
<div style="
|
|
381
|
-
<svg style="
|
|
382
|
-
<path
|
|
372
|
+
<div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px;">
|
|
373
|
+
<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">
|
|
374
|
+
<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"/>
|
|
375
|
+
<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"/>
|
|
383
376
|
</svg>
|
|
384
|
-
<
|
|
377
|
+
<div style="flex: 1;">
|
|
378
|
+
<p style="margin: 0; font-size: 16px; color: #2A2C32; word-wrap: break-word;">${location.address}</p>
|
|
379
|
+
</div>
|
|
385
380
|
</div>
|
|
386
|
-
${location.euifyMakeModel ? `<div style="
|
|
387
|
-
<svg style="
|
|
388
|
-
<path d="
|
|
381
|
+
${location.euifyMakeModel ? `<div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 24px;">
|
|
382
|
+
<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">
|
|
383
|
+
<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"/>
|
|
384
|
+
<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"/>
|
|
389
385
|
</svg>
|
|
390
|
-
<
|
|
386
|
+
<div>
|
|
387
|
+
<p style="margin: 0; font-size: 16px; color: #2A2C32;">${location.euifyMakeModel}</p>
|
|
388
|
+
</div>
|
|
391
389
|
</div>` : ""}
|
|
392
390
|
<button
|
|
393
391
|
id="schedule-btn-${location.id}"
|
|
394
392
|
style="
|
|
395
|
-
width:
|
|
396
|
-
padding:
|
|
397
|
-
background: #
|
|
398
|
-
color: #
|
|
399
|
-
border:
|
|
400
|
-
border-radius:
|
|
401
|
-
font-weight:
|
|
393
|
+
width: fit-content;
|
|
394
|
+
padding: 12px 28px;
|
|
395
|
+
background: #fff;
|
|
396
|
+
color: #111827;
|
|
397
|
+
border: 2px solid #111827;
|
|
398
|
+
border-radius: 9999px;
|
|
399
|
+
font-weight: 700;
|
|
402
400
|
cursor: pointer;
|
|
403
|
-
font-size:
|
|
401
|
+
font-size: 16px;
|
|
402
|
+
transition: all 0.2s;
|
|
404
403
|
"
|
|
405
|
-
onmouseover="this.style.background='#
|
|
406
|
-
onmouseout="this.style.background='#
|
|
404
|
+
onmouseover="this.style.background='#111827'; this.style.color='#fff';"
|
|
405
|
+
onmouseout="this.style.background='#fff'; this.style.color='#111827';"
|
|
407
406
|
>
|
|
408
407
|
${pageData.scheduleNow}
|
|
409
408
|
</button>
|
|
@@ -455,41 +454,53 @@ var StudioMap = ({
|
|
|
455
454
|
const marker = markersRef.current[markerIndex];
|
|
456
455
|
if (location && marker) {
|
|
457
456
|
const content = `
|
|
458
|
-
<div style="padding: 16px;
|
|
459
|
-
<h3 style="margin: 0 0
|
|
460
|
-
${location.availableTime ? `<div style="
|
|
461
|
-
<svg style="
|
|
462
|
-
<
|
|
457
|
+
<div style="padding: 0 16px 16px 16px; font-weight: 700; font-family: 'MontForAnker'; max-width: 420px;">
|
|
458
|
+
<h3 style="margin: 0 0 16px 0; font-size: 24px; color: #080A0F;">${location.name}</h3>
|
|
459
|
+
${location.availableTime ? `<div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px;">
|
|
460
|
+
<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">
|
|
461
|
+
<rect x="3" y="4" width="14" height="13" rx="2" stroke="currentColor" stroke-width="1.5"/>
|
|
462
|
+
<path d="M3 8H17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
463
|
+
<path d="M6 2V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
464
|
+
<path d="M14 2V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
463
465
|
</svg>
|
|
464
|
-
<
|
|
466
|
+
<div>
|
|
467
|
+
<p style="margin: 0;font-size: 16px; color: #2A2C32;">${location.availableTime === pageData?.noAvailableTime ? "" : pageData.available} ${location.availableTime}</p>
|
|
468
|
+
</div>
|
|
465
469
|
</div>` : ""}
|
|
466
|
-
<div style="
|
|
467
|
-
<svg style="
|
|
468
|
-
<path
|
|
470
|
+
<div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px;">
|
|
471
|
+
<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">
|
|
472
|
+
<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"/>
|
|
473
|
+
<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"/>
|
|
469
474
|
</svg>
|
|
470
|
-
<
|
|
475
|
+
<div style="flex: 1;">
|
|
476
|
+
<p style="margin: 0; font-size: 16px; color: #2A2C32; word-wrap: break-word;">${location.address}</p>
|
|
477
|
+
</div>
|
|
471
478
|
</div>
|
|
472
|
-
${location.euifyMakeModel ? `<div style="
|
|
473
|
-
<svg style="
|
|
474
|
-
<path d="
|
|
479
|
+
${location.euifyMakeModel ? `<div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 24px;">
|
|
480
|
+
<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">
|
|
481
|
+
<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"/>
|
|
482
|
+
<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"/>
|
|
475
483
|
</svg>
|
|
476
|
-
<
|
|
484
|
+
<div>
|
|
485
|
+
<p style="margin: 0; font-size: 16px; color: #2A2C32;">${location.euifyMakeModel}</p>
|
|
486
|
+
</div>
|
|
477
487
|
</div>` : ""}
|
|
478
488
|
<button
|
|
479
489
|
id="schedule-btn-hover-${location.id}"
|
|
480
490
|
style="
|
|
481
|
-
width:
|
|
482
|
-
padding:
|
|
483
|
-
background: #
|
|
484
|
-
color: #
|
|
485
|
-
border:
|
|
486
|
-
border-radius:
|
|
487
|
-
font-weight:
|
|
491
|
+
width: fit-content;
|
|
492
|
+
padding: 12px 28px;
|
|
493
|
+
background: #fff;
|
|
494
|
+
color: #111827;
|
|
495
|
+
border: 2px solid #111827;
|
|
496
|
+
border-radius: 9999px;
|
|
497
|
+
font-weight: 700;
|
|
488
498
|
cursor: pointer;
|
|
489
|
-
font-size:
|
|
499
|
+
font-size: 16px;
|
|
500
|
+
transition: all 0.2s;
|
|
490
501
|
"
|
|
491
|
-
onmouseover="this.style.background='#
|
|
492
|
-
onmouseout="this.style.background='#
|
|
502
|
+
onmouseover="this.style.background='#111827'; this.style.color='#fff';"
|
|
503
|
+
onmouseout="this.style.background='#fff'; this.style.color='#111827';"
|
|
493
504
|
>
|
|
494
505
|
${pageData.scheduleNow}
|
|
495
506
|
</button>
|
|
@@ -979,9 +990,9 @@ var LocationFilter = ({
|
|
|
979
990
|
"div",
|
|
980
991
|
{
|
|
981
992
|
style: { background: "#F8F8F8" },
|
|
982
|
-
className: "rounded-[12px] rounded-b-none h-[
|
|
993
|
+
className: "rounded-[12px] rounded-b-none h-[108px] font-bold text-[14px] flex flex-col",
|
|
983
994
|
children: [
|
|
984
|
-
/* @__PURE__ */ jsx("div", { className: "flex items-center justify-end px-[
|
|
995
|
+
/* @__PURE__ */ jsx("div", { className: "flex items-center justify-end px-[24px] pt-[12px] pb-[8px]", children: /* @__PURE__ */ jsx(
|
|
985
996
|
"button",
|
|
986
997
|
{
|
|
987
998
|
onClick: onClose,
|
|
@@ -1005,14 +1016,14 @@ var LocationFilter = ({
|
|
|
1005
1016
|
)
|
|
1006
1017
|
}
|
|
1007
1018
|
) }),
|
|
1008
|
-
/* @__PURE__ */ jsxs("div", { className: "flex items-center px-[20px] gap-[16px]
|
|
1019
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center text-[16px] px-[20px] gap-[16px] py-[16px]", children: [
|
|
1009
1020
|
/* @__PURE__ */ jsx(
|
|
1010
1021
|
"button",
|
|
1011
1022
|
{
|
|
1012
1023
|
onClick: () => handleTabClick("country"),
|
|
1013
1024
|
className: cn(
|
|
1014
1025
|
"pb-[4px] transition-colors",
|
|
1015
|
-
currentLevel === "country" ? "text-[#
|
|
1026
|
+
currentLevel === "country" ? "text-[#080A0F] border-b-2 border-[#3ADB67]" : "text-[#080A0F]"
|
|
1016
1027
|
),
|
|
1017
1028
|
children: pageData.country
|
|
1018
1029
|
}
|
|
@@ -1024,7 +1035,7 @@ var LocationFilter = ({
|
|
|
1024
1035
|
disabled: !selectedCountry,
|
|
1025
1036
|
className: cn(
|
|
1026
1037
|
"pb-[4px] transition-colors",
|
|
1027
|
-
currentLevel === "state" ? "text-[#
|
|
1038
|
+
currentLevel === "state" ? "text-[#080A0F] border-b-2 border-[#3ADB67]" : "text-[#080A0F]",
|
|
1028
1039
|
!selectedCountry && "opacity-50 cursor-not-allowed"
|
|
1029
1040
|
),
|
|
1030
1041
|
children: pageData.state
|
|
@@ -1037,7 +1048,7 @@ var LocationFilter = ({
|
|
|
1037
1048
|
disabled: !selectedState,
|
|
1038
1049
|
className: cn(
|
|
1039
1050
|
"pb-[4px] transition-colors",
|
|
1040
|
-
currentLevel === "city" ? "text-[#
|
|
1051
|
+
currentLevel === "city" ? "text-[#080A0F] border-b-2 border-[#3ADB67]" : "text-[#080A0F]",
|
|
1041
1052
|
!selectedState && "opacity-50 cursor-not-allowed"
|
|
1042
1053
|
),
|
|
1043
1054
|
children: pageData.city
|
|
@@ -1047,12 +1058,13 @@ var LocationFilter = ({
|
|
|
1047
1058
|
]
|
|
1048
1059
|
}
|
|
1049
1060
|
),
|
|
1050
|
-
/* @__PURE__ */ jsx(AntdMobileIsolated, { style: { height: "calc(100% -
|
|
1061
|
+
/* @__PURE__ */ jsx(AntdMobileIsolated, { style: { height: "calc(100% - 108px)" }, children: showIndexBar ? /* @__PURE__ */ jsx(IndexBar, { style: { height: "100%" }, children: groupedItems.map((group) => {
|
|
1051
1062
|
const { title, items } = group;
|
|
1052
1063
|
return /* @__PURE__ */ jsx(IndexBar.Panel, { index: title, title, children: /* @__PURE__ */ jsx(List, { children: items.map((item) => /* @__PURE__ */ jsx(
|
|
1053
1064
|
List.Item,
|
|
1054
1065
|
{
|
|
1055
1066
|
onClick: () => handleItemClick(item),
|
|
1067
|
+
className: "text-[16px] !pl-[24px]",
|
|
1056
1068
|
style: { cursor: "pointer" },
|
|
1057
1069
|
children: item.name
|
|
1058
1070
|
},
|
|
@@ -1062,6 +1074,7 @@ var LocationFilter = ({
|
|
|
1062
1074
|
List.Item,
|
|
1063
1075
|
{
|
|
1064
1076
|
onClick: () => handleItemClick(item),
|
|
1077
|
+
className: "text-[16px] !pl-[24px]",
|
|
1065
1078
|
style: { cursor: "pointer" },
|
|
1066
1079
|
children: item.name
|
|
1067
1080
|
},
|
|
@@ -1262,7 +1275,7 @@ var RoomsList = ({
|
|
|
1262
1275
|
lat: Number(room.latitude) || 0,
|
|
1263
1276
|
lng: Number(room.longitude) || 0,
|
|
1264
1277
|
availableTime: nextAvailableTimeslot ? `${nextAvailableTimeslot.start_time}` : mergedPageData.noAvailableTime,
|
|
1265
|
-
euifyMakeModel: room?.
|
|
1278
|
+
euifyMakeModel: room?.equipment?.join(", ") || ""
|
|
1266
1279
|
};
|
|
1267
1280
|
});
|
|
1268
1281
|
}, [demoRooms, mergedPageData.defaultCountry, mergedPageData.noAvailableTime]);
|
|
@@ -1314,7 +1327,7 @@ var RoomsList = ({
|
|
|
1314
1327
|
/* @__PURE__ */ jsxs(
|
|
1315
1328
|
"button",
|
|
1316
1329
|
{
|
|
1317
|
-
className: "flex cursor-pointer items-center hover:text-[#
|
|
1330
|
+
className: "flex cursor-pointer items-center hover:text-[#3ADB67] transition-colors",
|
|
1318
1331
|
onClick: () => setShowLocationFilter(true),
|
|
1319
1332
|
children: [
|
|
1320
1333
|
/* @__PURE__ */ jsx("span", { className: "mr-1", children: getSelectedLocationName() }),
|
|
@@ -1371,7 +1384,7 @@ var RoomsList = ({
|
|
|
1371
1384
|
"div",
|
|
1372
1385
|
{
|
|
1373
1386
|
style: { maxHeight: "706px", overflow: "auto" },
|
|
1374
|
-
className: "rounded-[12px] bg-white border border-[#E4E5E6]",
|
|
1387
|
+
className: "rounded-[12px] bg-white border h-[706px] border-[#E4E5E6]",
|
|
1375
1388
|
children: filteredStudioLocations.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[200px] text-[#767880]", children: mergedPageData.locationFilter.noStudiosFound }) : filteredStudioLocations.map((item) => {
|
|
1376
1389
|
return /* @__PURE__ */ jsx(
|
|
1377
1390
|
StudioCard,
|
|
@@ -1764,7 +1777,7 @@ var QuestionnaireForm = ({
|
|
|
1764
1777
|
onChange: (e) => handleChange(questionId, e.target.value),
|
|
1765
1778
|
placeholder: question.placeholder,
|
|
1766
1779
|
className: cn(
|
|
1767
|
-
"w-full px-4 py-3 rounded-lg border text-base",
|
|
1780
|
+
"w-full px-4 py-3 rounded-lg border text-base bg-white dark:bg-white dark:text-gray-900",
|
|
1768
1781
|
"focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:border-transparent",
|
|
1769
1782
|
hasError ? "border-red-500" : "border-[#E4E5E6]"
|
|
1770
1783
|
)
|
|
@@ -1780,7 +1793,7 @@ var QuestionnaireForm = ({
|
|
|
1780
1793
|
onBlur: (e) => handleEmailBlur(questionId, e.target.value),
|
|
1781
1794
|
placeholder: question.placeholder,
|
|
1782
1795
|
className: cn(
|
|
1783
|
-
"w-full px-4 py-3 rounded-lg border text-base",
|
|
1796
|
+
"w-full px-4 py-3 rounded-lg border text-base bg-white dark:bg-white dark:text-gray-900",
|
|
1784
1797
|
"focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:border-transparent",
|
|
1785
1798
|
hasError ? "border-red-500" : "border-[#E4E5E6]"
|
|
1786
1799
|
)
|
|
@@ -1799,6 +1812,7 @@ var QuestionnaireForm = ({
|
|
|
1799
1812
|
"appearance-none pl-3 pr-8 py-3 rounded-lg border text-base",
|
|
1800
1813
|
"focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:border-transparent",
|
|
1801
1814
|
"bg-white cursor-pointer w-[80px]",
|
|
1815
|
+
"dark:bg-white dark:text-gray-900",
|
|
1802
1816
|
hasError ? "border-red-500" : "border-[#E4E5E6]"
|
|
1803
1817
|
),
|
|
1804
1818
|
children: countryCodes.map((item) => /* @__PURE__ */ jsx("option", { value: item.code, children: item.code }, item.code))
|
|
@@ -1833,7 +1847,7 @@ var QuestionnaireForm = ({
|
|
|
1833
1847
|
onChange: (e) => handleChange(questionId, e.target.value),
|
|
1834
1848
|
placeholder: question.placeholder,
|
|
1835
1849
|
className: cn(
|
|
1836
|
-
"flex-1 px-4 py-3 rounded-lg border text-base",
|
|
1850
|
+
"flex-1 px-4 py-3 rounded-lg border text-base bg-white dark:bg-white dark:text-gray-900",
|
|
1837
1851
|
"focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:border-transparent",
|
|
1838
1852
|
hasError ? "border-red-500" : "border-[#E4E5E6]"
|
|
1839
1853
|
)
|
|
@@ -1849,8 +1863,9 @@ var QuestionnaireForm = ({
|
|
|
1849
1863
|
placeholder: question.placeholder,
|
|
1850
1864
|
rows: 4,
|
|
1851
1865
|
className: cn(
|
|
1852
|
-
"w-full px-4 py-3 rounded-lg border text-base resize-none",
|
|
1866
|
+
"w-full px-4 py-3 rounded-lg border text-base resize-none bg-white",
|
|
1853
1867
|
"focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:border-transparent",
|
|
1868
|
+
"dark:bg-white dark:text-gray-900",
|
|
1854
1869
|
hasError ? "border-red-500" : "border-[#E4E5E6]"
|
|
1855
1870
|
)
|
|
1856
1871
|
}
|
|
@@ -1869,10 +1884,15 @@ var QuestionnaireForm = ({
|
|
|
1869
1884
|
value: option.value || option.label,
|
|
1870
1885
|
checked: responses[questionId] === (option.value || option.label),
|
|
1871
1886
|
onChange: (e) => handleChange(questionId, e.target.value),
|
|
1872
|
-
className: "w-5 h-5 text-[#3ADB67] focus:ring-[#3ADB67] focus:ring-2"
|
|
1887
|
+
className: "w-5 h-5 text-[#3ADB67] focus:ring-[#3ADB67] focus:ring-2",
|
|
1888
|
+
style: {
|
|
1889
|
+
backgroundColor: "white",
|
|
1890
|
+
borderColor: "#D1D5DB",
|
|
1891
|
+
colorScheme: "light"
|
|
1892
|
+
}
|
|
1873
1893
|
}
|
|
1874
1894
|
),
|
|
1875
|
-
/* @__PURE__ */ jsx("span", { className: "text-base text-gray-900 group-hover:text-[#3ADB67] transition-colors", children: option.label })
|
|
1895
|
+
/* @__PURE__ */ jsx("span", { className: "text-base text-gray-900 dark:text-gray-900 font-bold group-hover:text-[#3ADB67] transition-colors", children: option.label })
|
|
1876
1896
|
]
|
|
1877
1897
|
},
|
|
1878
1898
|
option.value || option.label
|
|
@@ -1898,10 +1918,15 @@ var QuestionnaireForm = ({
|
|
|
1898
1918
|
optionValue,
|
|
1899
1919
|
e.target.checked
|
|
1900
1920
|
),
|
|
1901
|
-
className: "w-5 h-5 text-[#3ADB67] focus:ring-[#3ADB67] focus:ring-2 rounded"
|
|
1921
|
+
className: "w-5 h-5 text-[#3ADB67] focus:ring-[#3ADB67] focus:ring-2 rounded",
|
|
1922
|
+
style: {
|
|
1923
|
+
backgroundColor: "white",
|
|
1924
|
+
borderColor: "#D1D5DB",
|
|
1925
|
+
colorScheme: "light"
|
|
1926
|
+
}
|
|
1902
1927
|
}
|
|
1903
1928
|
),
|
|
1904
|
-
/* @__PURE__ */ jsx("span", { className: "text-base text-gray-900 group-hover:text-[#3ADB67] transition-colors", children: option.label })
|
|
1929
|
+
/* @__PURE__ */ jsx("span", { className: "text-base text-gray-900 dark:text-gray-900 font-bold group-hover:text-[#3ADB67] transition-colors", children: option.label })
|
|
1905
1930
|
]
|
|
1906
1931
|
},
|
|
1907
1932
|
optionValue
|
|
@@ -1914,9 +1939,9 @@ var QuestionnaireForm = ({
|
|
|
1914
1939
|
value: responses[questionId] || "",
|
|
1915
1940
|
onChange: (e) => handleChange(questionId, e.target.value),
|
|
1916
1941
|
className: cn(
|
|
1917
|
-
"w-full px-4 py-3 rounded-lg border text-base",
|
|
1942
|
+
"w-full px-4 py-3 rounded-lg border text-base bg-white dark:bg-white dark:text-gray-900",
|
|
1918
1943
|
"focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:border-transparent",
|
|
1919
|
-
"
|
|
1944
|
+
"cursor-pointer",
|
|
1920
1945
|
hasError ? "border-red-500" : "border-[#E4E5E6]"
|
|
1921
1946
|
),
|
|
1922
1947
|
children: [
|
|
@@ -1936,21 +1961,21 @@ var QuestionnaireForm = ({
|
|
|
1936
1961
|
return null;
|
|
1937
1962
|
}
|
|
1938
1963
|
};
|
|
1939
|
-
return /* @__PURE__ */ jsxs("div", { className: "pb-[80px]", children: [
|
|
1940
|
-
questions && questions.length > 0 && /* @__PURE__ */ jsx("div", { className: "bg-white rounded-[12px] border border-[#E4E5E6] p-8", children: /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, className: cn("space-y-6", className), children: questions.map((question) => {
|
|
1964
|
+
return /* @__PURE__ */ jsxs("div", { className: "pb-[80px] light", children: [
|
|
1965
|
+
questions && questions.length > 0 && /* @__PURE__ */ jsx("div", { className: "bg-white rounded-[12px] border border-[#E4E5E6] p-8 dark:bg-white dark:border-[#E4E5E6] l:p-4", children: /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, className: cn("space-y-6", className), children: questions.map((question) => {
|
|
1941
1966
|
const questionId = getQuestionId(question);
|
|
1942
1967
|
return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
|
|
1943
1968
|
/* @__PURE__ */ jsxs("label", { className: "block", children: [
|
|
1944
|
-
/* @__PURE__ */ jsxs("span", { className: "text-base font-
|
|
1969
|
+
/* @__PURE__ */ jsxs("span", { className: "text-base font-bold text-gray-900 dark:text-gray-900", children: [
|
|
1945
1970
|
question.label,
|
|
1946
1971
|
question.required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
|
|
1947
1972
|
] }),
|
|
1948
|
-
question.description && /* @__PURE__ */ jsx("span", { className: "block text-sm text-gray-600 mt-1", children: question.description }),
|
|
1949
|
-
question.type === "email" && questionId === "email" && pageData?.emailDescription && /* @__PURE__ */ jsx("span", { className: "block text-sm text-gray-600 mt-1", children: pageData.emailDescription })
|
|
1973
|
+
question.description && /* @__PURE__ */ jsx("span", { className: "block text-sm text-gray-600 dark:text-gray-600 font-bold mt-1", children: question.description }),
|
|
1974
|
+
question.type === "email" && questionId === "email" && pageData?.emailDescription && /* @__PURE__ */ jsx("span", { className: "block text-sm text-gray-600 dark:text-gray-600 font-bold mt-1", children: pageData.emailDescription })
|
|
1950
1975
|
] }),
|
|
1951
1976
|
renderQuestion(question),
|
|
1952
|
-
question.hint && !errors[questionId] && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: question.hint }),
|
|
1953
|
-
errors[questionId] && /* @__PURE__ */ jsx("p", { className: "text-sm", style: { color: "#FF4D4D" }, children: errors[questionId] })
|
|
1977
|
+
question.hint && !errors[questionId] && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-500 font-bold", children: question.hint }),
|
|
1978
|
+
errors[questionId] && /* @__PURE__ */ jsx("p", { className: "text-sm font-bold", style: { color: "#FF4D4D" }, children: errors[questionId] })
|
|
1954
1979
|
] }, questionId);
|
|
1955
1980
|
}) }) }),
|
|
1956
1981
|
!!selectedTimeslotId && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center", children: [
|
|
@@ -1963,20 +1988,25 @@ var QuestionnaireForm = ({
|
|
|
1963
1988
|
id: `agreement-${index}`,
|
|
1964
1989
|
checked: agreements[index] || false,
|
|
1965
1990
|
onChange: (e) => handleAgreementChange(index, e.target.checked),
|
|
1966
|
-
className: "w-5 h-5 rounded
|
|
1991
|
+
className: "w-5 h-5 rounded text-[#2FC257] focus:ring-[#2FC257] cursor-pointer flex-shrink-0",
|
|
1992
|
+
style: {
|
|
1993
|
+
backgroundColor: "white",
|
|
1994
|
+
borderColor: "#D1D5DB",
|
|
1995
|
+
colorScheme: "light"
|
|
1996
|
+
}
|
|
1967
1997
|
}
|
|
1968
1998
|
),
|
|
1969
1999
|
/* @__PURE__ */ jsx(
|
|
1970
2000
|
"label",
|
|
1971
2001
|
{
|
|
1972
2002
|
htmlFor: `agreement-${index}`,
|
|
1973
|
-
className: "text-sm text-gray-700 cursor-pointer select-none flex-1 [&_a]:underline [&_a]:text-blue-600 [&_a:hover]:text-blue-700",
|
|
2003
|
+
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",
|
|
1974
2004
|
dangerouslySetInnerHTML: { __html: agreeContent },
|
|
1975
2005
|
"aria-label": `Agreement ${index + 1}`
|
|
1976
2006
|
}
|
|
1977
2007
|
)
|
|
1978
2008
|
] }, index)),
|
|
1979
|
-
agreementError && /* @__PURE__ */ jsx("p", { className: "text-sm mt-2", style: { color: "#FF4D4D" }, children: agreementError })
|
|
2009
|
+
agreementError && /* @__PURE__ */ jsx("p", { className: "text-sm font-bold mt-2", style: { color: "#FF4D4D" }, children: agreementError })
|
|
1980
2010
|
] }),
|
|
1981
2011
|
/* @__PURE__ */ jsx(
|
|
1982
2012
|
"button",
|
|
@@ -1986,7 +2016,7 @@ var QuestionnaireForm = ({
|
|
|
1986
2016
|
onClick: handleSubmit,
|
|
1987
2017
|
className: cn(
|
|
1988
2018
|
"w-fit mt-6 px-6 py-4 rounded-full",
|
|
1989
|
-
"bg-[#080A0F] text-white font-
|
|
2019
|
+
"bg-[#080A0F] text-white font-bold text-base",
|
|
1990
2020
|
"hover:bg-[#2FC257] transition-colors",
|
|
1991
2021
|
"focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:ring-offset-2",
|
|
1992
2022
|
"disabled:opacity-50 disabled:cursor-not-allowed"
|
|
@@ -2131,10 +2161,10 @@ var DateTimePicker = ({
|
|
|
2131
2161
|
const wrapperStyle = {
|
|
2132
2162
|
background: "#fff",
|
|
2133
2163
|
border: `1px solid ${token.colorBorderSecondary}`,
|
|
2134
|
-
borderRadius:
|
|
2164
|
+
borderRadius: 16
|
|
2135
2165
|
};
|
|
2136
2166
|
return /* @__PURE__ */ jsxs("div", { children: [
|
|
2137
|
-
/* @__PURE__ */ jsx("div", { className: "text-[48px] l:text-[32px] py-[64px] l:py-[24px] font-bold text-center", children: pageData.scheduleYourVisit }),
|
|
2167
|
+
/* @__PURE__ */ jsx("div", { className: "text-[48px] l:text-[32px] py-[64px] l:py-[24px] l:pt-[64px] font-bold text-center", children: pageData.scheduleYourVisit }),
|
|
2138
2168
|
/* @__PURE__ */ jsxs("div", { className: "flex gap-4 l:flex-col", children: [
|
|
2139
2169
|
/* @__PURE__ */ jsx(
|
|
2140
2170
|
ConfigProvider,
|
|
@@ -2158,6 +2188,20 @@ var DateTimePicker = ({
|
|
|
2158
2188
|
className: "calendar-custom-cell w-[calc(824/1920*100vw)] min-l:max-w-[824px] l:w-full",
|
|
2159
2189
|
children: [
|
|
2160
2190
|
/* @__PURE__ */ jsx("style", { children: `
|
|
2191
|
+
.calendar-custom-cell {
|
|
2192
|
+
border-radius: 16px !important;
|
|
2193
|
+
overflow: hidden;
|
|
2194
|
+
padding: 0 24px 16px 24px !important;
|
|
2195
|
+
}
|
|
2196
|
+
.calendar-custom-cell,
|
|
2197
|
+
.calendar-custom-cell *,
|
|
2198
|
+
.calendar-custom-cell .ant-picker-panel,
|
|
2199
|
+
.calendar-custom-cell .ant-picker-calendar,
|
|
2200
|
+
.calendar-custom-cell .ant-picker-content,
|
|
2201
|
+
.calendar-custom-cell .ant-picker-cell,
|
|
2202
|
+
.calendar-custom-cell .ant-picker-calendar-date-value {
|
|
2203
|
+
font-family: 'MontForAnker' !important;
|
|
2204
|
+
}
|
|
2161
2205
|
.calendar-custom-cell .ant-picker-cell {
|
|
2162
2206
|
padding: 6px !important;
|
|
2163
2207
|
text-align: center !important;
|
|
@@ -2175,6 +2219,11 @@ var DateTimePicker = ({
|
|
|
2175
2219
|
border: 1px solid #E4E5E6 !important;
|
|
2176
2220
|
aspect-ratio: 1 / 1 !important;
|
|
2177
2221
|
}
|
|
2222
|
+
.calendar-custom-cell .ant-picker-calendar-date-value {
|
|
2223
|
+
line-height: 38px !important;
|
|
2224
|
+
font-weight: 700 !important;
|
|
2225
|
+
font-size: 14px !important;
|
|
2226
|
+
}
|
|
2178
2227
|
@media (min-width: 1024px) and (max-width: 1919px) {
|
|
2179
2228
|
.calendar-custom-cell .ant-picker-cell-inner {
|
|
2180
2229
|
width: 54px !important;
|
|
@@ -2183,6 +2232,8 @@ var DateTimePicker = ({
|
|
|
2183
2232
|
}
|
|
2184
2233
|
.calendar-custom-cell .ant-picker-calendar-date-value {
|
|
2185
2234
|
line-height: 54px !important;
|
|
2235
|
+
font-weight: 700 !important;
|
|
2236
|
+
font-size: 20px !important;
|
|
2186
2237
|
}
|
|
2187
2238
|
}
|
|
2188
2239
|
@media (min-width: 1920px) {
|
|
@@ -2193,17 +2244,19 @@ var DateTimePicker = ({
|
|
|
2193
2244
|
}
|
|
2194
2245
|
.calendar-custom-cell .ant-picker-calendar-date-value {
|
|
2195
2246
|
line-height: 100px !important;
|
|
2247
|
+
font-weight: 700 !important;
|
|
2248
|
+
font-size: 20px !important;
|
|
2196
2249
|
}
|
|
2197
2250
|
}
|
|
2198
2251
|
.calendar-custom-cell .ant-picker-cell-selected .ant-picker-cell-inner,
|
|
2199
2252
|
.calendar-custom-cell .ant-picker-cell-selected:not(.ant-picker-cell-disabled) .ant-picker-cell-inner {
|
|
2200
2253
|
background-color: #3ADB67 !important;
|
|
2201
|
-
color:
|
|
2254
|
+
color: #080A0F !important;
|
|
2202
2255
|
border-color: #3ADB67 !important;
|
|
2203
2256
|
}
|
|
2204
2257
|
.calendar-custom-cell .ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner {
|
|
2205
2258
|
background-color: #3ADB67 !important;
|
|
2206
|
-
color:
|
|
2259
|
+
color: #080A0F !important;
|
|
2207
2260
|
}
|
|
2208
2261
|
.calendar-custom-cell .ant-picker-cell-today .ant-picker-cell-inner {
|
|
2209
2262
|
border-color: #3ADB67 !important;
|
|
@@ -2222,25 +2275,24 @@ var DateTimePicker = ({
|
|
|
2222
2275
|
.calendar-custom-cell .ant-picker-cell-today .ant-picker-cell-inner::before {
|
|
2223
2276
|
display: none !important;
|
|
2224
2277
|
}
|
|
2225
|
-
.calendar-custom-cell .ant-picker-calendar-date-value {
|
|
2226
|
-
line-height: 38px !important;
|
|
2227
|
-
}
|
|
2228
2278
|
.calendar-custom-cell .ant-picker-content {
|
|
2229
2279
|
width: 100% !important;
|
|
2230
2280
|
}
|
|
2231
2281
|
.calendar-custom-cell .ant-picker-content thead tr th {
|
|
2232
2282
|
line-height: 48px !important;
|
|
2283
|
+
font-weight: 700 !important;
|
|
2284
|
+
font-size: 18px !important;
|
|
2233
2285
|
}
|
|
2234
2286
|
.calendar-custom-cell .ant-picker-cell-disabled .ant-picker-cell-inner {
|
|
2235
2287
|
background-color: #F5F5F5 !important;
|
|
2236
|
-
color: #
|
|
2237
|
-
border
|
|
2288
|
+
color: #2A2C32 !important;
|
|
2289
|
+
border: none !important;
|
|
2238
2290
|
cursor: not-allowed !important;
|
|
2239
2291
|
box-shadow: none !important;
|
|
2240
2292
|
}
|
|
2241
2293
|
.calendar-custom-cell .ant-picker-cell-disabled:hover .ant-picker-cell-inner {
|
|
2242
2294
|
background-color: #F5F5F5 !important;
|
|
2243
|
-
border
|
|
2295
|
+
border: none !important;
|
|
2244
2296
|
box-shadow: none !important;
|
|
2245
2297
|
}
|
|
2246
2298
|
.calendar-custom-cell .ant-picker-cell-disabled::before {
|
|
@@ -2280,7 +2332,7 @@ var DateTimePicker = ({
|
|
|
2280
2332
|
className: `ant-picker-cell-inner ${isSelected ? "ant-picker-cell-inner-selected" : ""} ${isToday ? "ant-picker-cell-inner-today" : ""}`,
|
|
2281
2333
|
style: {
|
|
2282
2334
|
backgroundColor: isSelected ? "#3ADB67" : void 0,
|
|
2283
|
-
color: isSelected ? "
|
|
2335
|
+
color: isSelected ? "#080A0F" : isDisabled ? "#2A2C32" : void 0,
|
|
2284
2336
|
borderColor: isSelected ? "#3ADB67" : isToday ? "#3ADB67" : void 0
|
|
2285
2337
|
},
|
|
2286
2338
|
children: /* @__PURE__ */ jsx("div", { className: "ant-picker-calendar-date-value", children: date.date() })
|
|
@@ -2298,7 +2350,7 @@ var DateTimePicker = ({
|
|
|
2298
2350
|
label,
|
|
2299
2351
|
value: index
|
|
2300
2352
|
}));
|
|
2301
|
-
return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between
|
|
2353
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-3 l:pb-[0px]", children: [
|
|
2302
2354
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
|
|
2303
2355
|
/* @__PURE__ */ jsx(
|
|
2304
2356
|
Select,
|
|
@@ -2310,14 +2362,15 @@ var DateTimePicker = ({
|
|
|
2310
2362
|
onChange(now);
|
|
2311
2363
|
},
|
|
2312
2364
|
variant: "borderless",
|
|
2313
|
-
className: "text-
|
|
2365
|
+
className: "text-[32px] l:text-[20px] font-bold",
|
|
2314
2366
|
popupMatchSelectWidth: false,
|
|
2367
|
+
suffixIcon: null,
|
|
2315
2368
|
style: {
|
|
2316
|
-
|
|
2317
|
-
fontWeight: 500
|
|
2369
|
+
fontWeight: 700
|
|
2318
2370
|
}
|
|
2319
2371
|
}
|
|
2320
2372
|
),
|
|
2373
|
+
/* @__PURE__ */ jsx("div", { className: "text-[20px] text-[#E4E5E6]", children: "/" }),
|
|
2321
2374
|
/* @__PURE__ */ jsx(
|
|
2322
2375
|
Select,
|
|
2323
2376
|
{
|
|
@@ -2328,11 +2381,11 @@ var DateTimePicker = ({
|
|
|
2328
2381
|
onChange(now);
|
|
2329
2382
|
},
|
|
2330
2383
|
variant: "borderless",
|
|
2331
|
-
className: "text-
|
|
2384
|
+
className: "text-[32px] l:text-[20px] font-bold",
|
|
2332
2385
|
popupMatchSelectWidth: false,
|
|
2386
|
+
suffixIcon: null,
|
|
2333
2387
|
style: {
|
|
2334
|
-
|
|
2335
|
-
fontWeight: 500
|
|
2388
|
+
fontWeight: 700
|
|
2336
2389
|
}
|
|
2337
2390
|
}
|
|
2338
2391
|
)
|
|
@@ -2408,10 +2461,10 @@ var DateTimePicker = ({
|
|
|
2408
2461
|
)
|
|
2409
2462
|
}
|
|
2410
2463
|
),
|
|
2411
|
-
/* @__PURE__ */ jsxs("div", { className: "bg-white p-[24px] rounded-[
|
|
2412
|
-
/* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
|
|
2413
|
-
pageData.timeSlot,
|
|
2414
|
-
/* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
|
|
2464
|
+
/* @__PURE__ */ jsxs("div", { className: "bg-white p-[24px] rounded-[16px] flex-1", children: [
|
|
2465
|
+
/* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
|
|
2466
|
+
/* @__PURE__ */ jsx("div", { className: "text-[24px] l:text-[16px]", children: pageData.timeSlot }),
|
|
2467
|
+
/* @__PURE__ */ jsxs("div", { className: "flex text-[18px] l:text-[14px] l:gap-1 gap-2", children: [
|
|
2415
2468
|
/* @__PURE__ */ jsx(
|
|
2416
2469
|
"button",
|
|
2417
2470
|
{
|
|
@@ -2425,7 +2478,7 @@ var DateTimePicker = ({
|
|
|
2425
2478
|
}
|
|
2426
2479
|
},
|
|
2427
2480
|
disabled: !selectedDate || selectedDate.isSame(dayjs(), "day") || selectedDate.isBefore(dayjs(), "day"),
|
|
2428
|
-
className: "w-
|
|
2481
|
+
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",
|
|
2429
2482
|
children: /* @__PURE__ */ jsx(
|
|
2430
2483
|
"svg",
|
|
2431
2484
|
{
|
|
@@ -2445,7 +2498,7 @@ var DateTimePicker = ({
|
|
|
2445
2498
|
)
|
|
2446
2499
|
}
|
|
2447
2500
|
),
|
|
2448
|
-
/* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: selectedDate ? selectedDate.format("MMMM D
|
|
2501
|
+
/* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: selectedDate ? selectedDate.format("MMMM D") : "" }),
|
|
2449
2502
|
/* @__PURE__ */ jsx(
|
|
2450
2503
|
"button",
|
|
2451
2504
|
{
|
|
@@ -2457,7 +2510,7 @@ var DateTimePicker = ({
|
|
|
2457
2510
|
}
|
|
2458
2511
|
},
|
|
2459
2512
|
disabled: !selectedDate,
|
|
2460
|
-
className: "w-
|
|
2513
|
+
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",
|
|
2461
2514
|
children: /* @__PURE__ */ jsx(
|
|
2462
2515
|
"svg",
|
|
2463
2516
|
{
|
|
@@ -2479,7 +2532,7 @@ var DateTimePicker = ({
|
|
|
2479
2532
|
)
|
|
2480
2533
|
] })
|
|
2481
2534
|
] }),
|
|
2482
|
-
/* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 mt-[40px] gap-4", children: timeslotsLoading ? /* @__PURE__ */ jsx("div", { className: "col-span-2 text-center text-[#
|
|
2535
|
+
/* @__PURE__ */ 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__ */ jsx("div", { className: "col-span-2 text-center text-[#2A2C32] py-8", children: pageData.loadingTimeSlots }) : timeslotsError ? /* @__PURE__ */ jsx("div", { className: "col-span-2 text-center text-red-600 py-8", children: pageData.failedToLoadTimeSlots }) : dayTimeslots.length === 0 ? /* @__PURE__ */ jsx("div", { className: "col-span-2 text-center text-[#2A2C32] py-8", children: pageData.noAvailableTimeSlots }) : dayTimeslots.map((slot) => {
|
|
2483
2536
|
const isAvailable = slot.status === "available";
|
|
2484
2537
|
const isFull = slot.status === "full";
|
|
2485
2538
|
const isSelected = selectedTimeslotId === slot.id;
|
|
@@ -2493,19 +2546,19 @@ var DateTimePicker = ({
|
|
|
2493
2546
|
}
|
|
2494
2547
|
},
|
|
2495
2548
|
className: `
|
|
2496
|
-
rounded-[20px] w-full flex items-center justify-center gap-4 h-[76px]
|
|
2549
|
+
rounded-[20px] w-full text-[18px] l:gap-2 l:text-[16px] flex items-center justify-center gap-4 h-[76px]
|
|
2497
2550
|
border text-center transition-colors
|
|
2498
|
-
${isSelected ? "border-[#3ADB67] bg-[#3ADB67]
|
|
2551
|
+
${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"}
|
|
2499
2552
|
`,
|
|
2500
2553
|
children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
|
|
2501
2554
|
/* @__PURE__ */ jsx("div", { children: formatTimeslot(slot) }),
|
|
2502
|
-
isFull && /* @__PURE__ */ jsx("div", { className: "text-
|
|
2503
|
-
isAvailable && !isSelected && /* @__PURE__ */ jsxs("div", { className: "text-
|
|
2555
|
+
isFull && /* @__PURE__ */ jsx("div", { className: "text-[16px] l:text-[14px] text-[#2A2C32] mt-[2px]", children: pageData.full }),
|
|
2556
|
+
isAvailable && !isSelected && /* @__PURE__ */ jsxs("div", { className: "text-[16px] l:text-[14px] text-[#2A2C32] mt-1", children: [
|
|
2504
2557
|
slot.capacity - slot.booked_count,
|
|
2505
2558
|
" ",
|
|
2506
2559
|
pageData.spotsLeft
|
|
2507
2560
|
] }),
|
|
2508
|
-
isAvailable && isSelected && /* @__PURE__ */ jsxs("div", { className: "text-
|
|
2561
|
+
isAvailable && isSelected && /* @__PURE__ */ jsxs("div", { className: "text-[16px] l:text-[14px] mt-1", children: [
|
|
2509
2562
|
slot.capacity - slot.booked_count,
|
|
2510
2563
|
" ",
|
|
2511
2564
|
pageData.spotsLeft
|
|
@@ -2515,15 +2568,15 @@ var DateTimePicker = ({
|
|
|
2515
2568
|
slot.id
|
|
2516
2569
|
);
|
|
2517
2570
|
}) }),
|
|
2518
|
-
!timeslotsLoading && dayTimeslots?.length > 0 && /* @__PURE__ */ jsx("div", { className: "
|
|
2571
|
+
!timeslotsLoading && dayTimeslots?.length > 0 && /* @__PURE__ */ jsx("div", { className: "pt-[24px] text-[#6d6d6F] text-center", children: pageData?.timezone?.replace(
|
|
2519
2572
|
"{{timezone}}",
|
|
2520
2573
|
demoRoom?.timezone || timezone || ""
|
|
2521
2574
|
) })
|
|
2522
2575
|
] })
|
|
2523
2576
|
] }),
|
|
2524
2577
|
/* @__PURE__ */ jsxs("div", { className: "mt-12", children: [
|
|
2525
|
-
!!questionnaire?.questions?.length && /* @__PURE__ */ jsx("div", { className: "text-[48px] font-bold text-center mb-8", children: pageData.fillOutForm }),
|
|
2526
|
-
questionnaireLoading ? /* @__PURE__ */ jsx("div", { className: "text-center text-[#
|
|
2578
|
+
!!questionnaire?.questions?.length && /* @__PURE__ */ jsx("div", { className: "text-[48px] font-bold text-center mb-8 l:mb-[24px] l:text-[32px] l:text-left", children: pageData.fillOutForm }),
|
|
2579
|
+
questionnaireLoading ? /* @__PURE__ */ jsx("div", { className: "text-center text-[#2A2C32] py-8", children: pageData.loadingQuestionnaire }) : /* @__PURE__ */ jsx(
|
|
2527
2580
|
QuestionnaireForm,
|
|
2528
2581
|
{
|
|
2529
2582
|
questions: questionnaire?.questions || [],
|
|
@@ -2644,7 +2697,7 @@ var DemoRoomDetail = ({
|
|
|
2644
2697
|
});
|
|
2645
2698
|
const title = demoRoom?.name || titleProp || "Design District Demo Room";
|
|
2646
2699
|
const descriptions = demoRoom?.description ? [demoRoom.description] : descriptionsProp || defaultDescriptions;
|
|
2647
|
-
const devices = demoRoom?.
|
|
2700
|
+
const devices = demoRoom?.equipment?.join(", ") || devicesProp || "eufyMake E1, eufyMake M5";
|
|
2648
2701
|
const address = demoRoom?.address || addressProp || "1111 8th St, San Francisco, CA United States 94108";
|
|
2649
2702
|
const images = demoRoom?.images && demoRoom.images.length > 0 ? demoRoom.images : imagesProp || defaultImages;
|
|
2650
2703
|
const googleMapsLink = mapsLink || (() => {
|
|
@@ -2670,10 +2723,10 @@ var DemoRoomDetail = ({
|
|
|
2670
2723
|
/* @__PURE__ */ jsx("p", { className: "text-sm mt-2", children: error.message })
|
|
2671
2724
|
] }) });
|
|
2672
2725
|
}
|
|
2673
|
-
return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-
|
|
2674
|
-
/* @__PURE__ */ jsxs("div", { className: "space-y-6
|
|
2675
|
-
/* @__PURE__ */ jsx("h1", { className: "text-[
|
|
2676
|
-
/* @__PURE__ */ jsx("div", { className: "
|
|
2726
|
+
return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), ...props, children: /* @__PURE__ */ 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: [
|
|
2727
|
+
/* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
|
|
2728
|
+
/* @__PURE__ */ jsx("h1", { className: "text-[48px] l:text-[32px] font-bold text-gray-900 leading-tight", children: title }),
|
|
2729
|
+
/* @__PURE__ */ jsx("div", { className: "mt-[20px]", children: descriptions.map((desc, index) => /* @__PURE__ */ jsx(
|
|
2677
2730
|
"p",
|
|
2678
2731
|
{
|
|
2679
2732
|
className: "text-base text-gray-600 leading-relaxed",
|
|
@@ -2692,34 +2745,24 @@ var DemoRoomDetail = ({
|
|
|
2692
2745
|
xmlns: "http://www.w3.org/2000/svg",
|
|
2693
2746
|
className: "flex-shrink-0 mt-0.5",
|
|
2694
2747
|
children: [
|
|
2695
|
-
/* @__PURE__ */ jsx(
|
|
2696
|
-
"rect",
|
|
2697
|
-
{
|
|
2698
|
-
x: "3",
|
|
2699
|
-
y: "3",
|
|
2700
|
-
width: "18",
|
|
2701
|
-
height: "18",
|
|
2702
|
-
rx: "2",
|
|
2703
|
-
stroke: "currentColor",
|
|
2704
|
-
strokeWidth: "2"
|
|
2705
|
-
}
|
|
2706
|
-
),
|
|
2707
2748
|
/* @__PURE__ */ jsx(
|
|
2708
2749
|
"path",
|
|
2709
2750
|
{
|
|
2710
|
-
d: "
|
|
2751
|
+
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",
|
|
2711
2752
|
stroke: "currentColor",
|
|
2712
2753
|
strokeWidth: "2",
|
|
2713
|
-
strokeLinecap: "round"
|
|
2754
|
+
strokeLinecap: "round",
|
|
2755
|
+
strokeLinejoin: "round"
|
|
2714
2756
|
}
|
|
2715
2757
|
),
|
|
2716
2758
|
/* @__PURE__ */ jsx(
|
|
2717
2759
|
"path",
|
|
2718
2760
|
{
|
|
2719
|
-
d: "
|
|
2761
|
+
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",
|
|
2720
2762
|
stroke: "currentColor",
|
|
2721
2763
|
strokeWidth: "2",
|
|
2722
|
-
strokeLinecap: "round"
|
|
2764
|
+
strokeLinecap: "round",
|
|
2765
|
+
strokeLinejoin: "round"
|
|
2723
2766
|
}
|
|
2724
2767
|
)
|
|
2725
2768
|
]
|
|
@@ -2798,7 +2841,7 @@ var DemoRoomDetail = ({
|
|
|
2798
2841
|
] })
|
|
2799
2842
|
] })
|
|
2800
2843
|
] }),
|
|
2801
|
-
/* @__PURE__ */ jsx("div", { className: "relative l:w-full h-[400px] rounded-2xl overflow-hidden", children: images.length > 0 ? /* @__PURE__ */ jsx(
|
|
2844
|
+
/* @__PURE__ */ jsx("div", { className: "relative l:w-full min-l:h-[400px] rounded-2xl overflow-hidden", children: images.length > 0 ? /* @__PURE__ */ jsx(
|
|
2802
2845
|
Swiper,
|
|
2803
2846
|
{
|
|
2804
2847
|
...swiperVersion === "11+" && Navigation && Pagination && Autoplay ? { modules: [Navigation, Pagination, Autoplay] } : {},
|
|
@@ -2876,15 +2919,18 @@ var BookingForm = ({
|
|
|
2876
2919
|
() => createDemoRoomApi(apiConfig),
|
|
2877
2920
|
[apiConfig]
|
|
2878
2921
|
);
|
|
2879
|
-
const dateTimePickerPageData = useMemo(
|
|
2880
|
-
|
|
2881
|
-
|
|
2882
|
-
|
|
2922
|
+
const dateTimePickerPageData = useMemo(
|
|
2923
|
+
() => ({
|
|
2924
|
+
...pageData?.dateTimePicker,
|
|
2925
|
+
...pageData?.questionnaireForm
|
|
2926
|
+
}),
|
|
2927
|
+
[pageData?.dateTimePicker, pageData?.questionnaireForm]
|
|
2928
|
+
);
|
|
2883
2929
|
return /* @__PURE__ */ jsxs("div", { children: [
|
|
2884
2930
|
/* @__PURE__ */ jsx("div", { className: cn("w-full", className), ...props, children: /* @__PURE__ */ jsx(
|
|
2885
2931
|
DemoRoomDetail,
|
|
2886
2932
|
{
|
|
2887
|
-
className: cn("mt-8", layoutClassName),
|
|
2933
|
+
className: cn("min-l:mt-8", layoutClassName),
|
|
2888
2934
|
apiClient,
|
|
2889
2935
|
demoRoomCode,
|
|
2890
2936
|
locale: apiConfig.locale,
|
|
@@ -2962,7 +3008,9 @@ var BookingSuccess = ({
|
|
|
2962
3008
|
}, [token, apiConfig, initialBookingData]);
|
|
2963
3009
|
const handleCancelAppointment = async () => {
|
|
2964
3010
|
if (!token || !apiConfig) {
|
|
2965
|
-
setCancelError(
|
|
3011
|
+
setCancelError(
|
|
3012
|
+
pageData.cancelError || "Unable to cancel: Missing token or API configuration"
|
|
3013
|
+
);
|
|
2966
3014
|
return;
|
|
2967
3015
|
}
|
|
2968
3016
|
setCancelLoading(true);
|
|
@@ -2983,13 +3031,15 @@ var BookingSuccess = ({
|
|
|
2983
3031
|
}
|
|
2984
3032
|
} catch (err) {
|
|
2985
3033
|
console.error("Failed to cancel booking:", err);
|
|
2986
|
-
setCancelError(
|
|
3034
|
+
setCancelError(
|
|
3035
|
+
pageData.cancelError || "Failed to cancel appointment. Please try again."
|
|
3036
|
+
);
|
|
2987
3037
|
} finally {
|
|
2988
3038
|
setCancelLoading(false);
|
|
2989
3039
|
}
|
|
2990
3040
|
};
|
|
2991
3041
|
if (loading) {
|
|
2992
|
-
return /* @__PURE__ */ jsx("div", { className: `min-h-screen py-12 px-6 ${className || ""}`, children: /* @__PURE__ */ jsx("div", { className: "
|
|
3042
|
+
return /* @__PURE__ */ jsx("div", { className: `min-h-screen py-12 px-6 ${className || ""}`, children: /* @__PURE__ */ jsx("div", { className: "mx-auto", children: /* @__PURE__ */ jsxs("div", { className: "animate-pulse space-y-6", children: [
|
|
2993
3043
|
/* @__PURE__ */ jsx("div", { className: "h-8 bg-gray-200 rounded w-1/3" }),
|
|
2994
3044
|
/* @__PURE__ */ jsx("div", { className: "h-24 bg-gray-200 rounded" }),
|
|
2995
3045
|
/* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
|
|
@@ -3002,24 +3052,24 @@ var BookingSuccess = ({
|
|
|
3002
3052
|
if (!bookingData) {
|
|
3003
3053
|
return null;
|
|
3004
3054
|
}
|
|
3005
|
-
return /* @__PURE__ */ jsx("div", { className: `min-h-screen py-12 px-6 ${className || ""}`, children: /* @__PURE__ */ jsxs("div", { className: "
|
|
3055
|
+
return /* @__PURE__ */ jsx("div", { className: `min-h-screen l:py-0 l:px-0 py-12 px-6 ${className || ""}`, children: /* @__PURE__ */ jsxs("div", { className: "mx-auto", children: [
|
|
3006
3056
|
/* @__PURE__ */ jsx("h1", { className: "text-[40px] font-bold text-gray-900 mb-8", children: pageData.yourAppointment }),
|
|
3007
|
-
isCancelled && /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-
|
|
3057
|
+
isCancelled && /* @__PURE__ */ 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: [
|
|
3008
3058
|
/* @__PURE__ */ jsx("p", { className: "text-base text-gray-700", children: pageData.appointmentCanceled }),
|
|
3009
|
-
onScheduleAgain && /* @__PURE__ */ jsx(
|
|
3059
|
+
onScheduleAgain && bookingData && /* @__PURE__ */ jsx(
|
|
3010
3060
|
"button",
|
|
3011
3061
|
{
|
|
3012
|
-
onClick: onScheduleAgain,
|
|
3013
|
-
className: "px-6 py-3 bg-black text-white rounded-full
|
|
3062
|
+
onClick: () => onScheduleAgain(bookingData.demoroom_code),
|
|
3063
|
+
className: "px-6 py-3 bg-black text-white rounded-full hover:bg-gray-800 transition-colors whitespace-nowrap",
|
|
3014
3064
|
children: pageData.scheduleAgain
|
|
3015
3065
|
}
|
|
3016
3066
|
)
|
|
3017
3067
|
] }),
|
|
3018
|
-
/* @__PURE__ */ jsxs("div", { className: "space-y-8 bg-white px-[48px] py-[32px] rounded-
|
|
3068
|
+
/* @__PURE__ */ jsxs("div", { className: "space-y-8 bg-white px-[48px] l:px-[16px] l:py-[16px] py-[32px] rounded-[16px]", children: [
|
|
3019
3069
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
3020
|
-
/* @__PURE__ */ jsx("h2", { className: "text-lg
|
|
3070
|
+
/* @__PURE__ */ jsx("h2", { className: "text-lg text-gray-900 mb-3", children: pageData.location }),
|
|
3021
3071
|
/* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
|
|
3022
|
-
bookingData.demoroom_name && /* @__PURE__ */ jsx("p", { className: "text-base
|
|
3072
|
+
bookingData.demoroom_name && /* @__PURE__ */ jsx("p", { className: "text-base text-gray-900", children: bookingData.demoroom_name }),
|
|
3023
3073
|
bookingData.address && /* @__PURE__ */ jsx("p", { className: "text-base text-gray-600", children: bookingData.address }),
|
|
3024
3074
|
bookingData.latitude && bookingData.longitude && /* @__PURE__ */ jsx(
|
|
3025
3075
|
"a",
|
|
@@ -3034,7 +3084,7 @@ var BookingSuccess = ({
|
|
|
3034
3084
|
] })
|
|
3035
3085
|
] }),
|
|
3036
3086
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
3037
|
-
/* @__PURE__ */ jsx("h2", { className: "text-lg
|
|
3087
|
+
/* @__PURE__ */ jsx("h2", { className: "text-lg text-gray-900 mb-3", children: pageData.dateAndTime }),
|
|
3038
3088
|
/* @__PURE__ */ jsxs("p", { className: "text-base text-gray-900", children: [
|
|
3039
3089
|
bookingData.booking_date,
|
|
3040
3090
|
bookingData.time_slot && `, ${bookingData.time_slot}`,
|
|
@@ -3042,15 +3092,15 @@ var BookingSuccess = ({
|
|
|
3042
3092
|
] })
|
|
3043
3093
|
] }),
|
|
3044
3094
|
bookingData.equipment && /* @__PURE__ */ jsxs("div", { children: [
|
|
3045
|
-
/* @__PURE__ */ jsx("h2", { className: "text-lg
|
|
3046
|
-
/* @__PURE__ */ jsx("p", { className: "text-base text-gray-900", children: bookingData.equipment })
|
|
3095
|
+
/* @__PURE__ */ jsx("h2", { className: "text-lg text-gray-900 mb-3", children: pageData.event }),
|
|
3096
|
+
/* @__PURE__ */ jsx("p", { className: "text-base text-gray-900", children: Array.isArray(bookingData.equipment) ? bookingData.equipment.join(", ") : bookingData.equipment })
|
|
3047
3097
|
] }),
|
|
3048
3098
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
3049
|
-
/* @__PURE__ */ jsx("h2", { className: "text-lg
|
|
3099
|
+
/* @__PURE__ */ jsx("h2", { className: "text-lg text-gray-900 mb-3", children: pageData.demoRoom }),
|
|
3050
3100
|
/* @__PURE__ */ jsx("p", { className: "text-base text-gray-900", children: bookingData.demoroom_code })
|
|
3051
3101
|
] }),
|
|
3052
3102
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
3053
|
-
/* @__PURE__ */ jsx("h2", { className: "text-lg
|
|
3103
|
+
/* @__PURE__ */ jsx("h2", { className: "text-lg text-gray-900 mb-3", children: pageData.visitorInfo }),
|
|
3054
3104
|
/* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
|
|
3055
3105
|
/* @__PURE__ */ jsx("p", { className: "text-base text-gray-900", children: bookingData.customer_name }),
|
|
3056
3106
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-base text-gray-600", children: [
|
|
@@ -3108,13 +3158,13 @@ var BookingSuccess = ({
|
|
|
3108
3158
|
{
|
|
3109
3159
|
onClick: () => setShowCancelDialog(true),
|
|
3110
3160
|
disabled: cancelLoading,
|
|
3111
|
-
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",
|
|
3161
|
+
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",
|
|
3112
3162
|
children: pageData.cancelAppointment
|
|
3113
3163
|
}
|
|
3114
3164
|
),
|
|
3115
3165
|
cancelError && /* @__PURE__ */ jsx("p", { className: "text-sm mt-2", style: { color: "#FF4D4D" }, children: cancelError })
|
|
3116
3166
|
] }),
|
|
3117
|
-
showCancelDialog && /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 px-4", children: /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-[24px] max-w-[
|
|
3167
|
+
showCancelDialog && /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 px-4", children: /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-[24px] max-w-[600px] p-8 shadow-xl relative", children: [
|
|
3118
3168
|
/* @__PURE__ */ jsx(
|
|
3119
3169
|
"button",
|
|
3120
3170
|
{
|
|
@@ -3144,28 +3194,28 @@ var BookingSuccess = ({
|
|
|
3144
3194
|
)
|
|
3145
3195
|
}
|
|
3146
3196
|
),
|
|
3147
|
-
/* @__PURE__ */ jsx("div", { className: "flex justify-center mb-6", children: /* @__PURE__ */ jsx("div", { className: "w-16 h-16 rounded-full
|
|
3197
|
+
/* @__PURE__ */ jsx("div", { className: "flex justify-center mb-6", children: /* @__PURE__ */ jsx("div", { className: "w-16 h-16 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsxs(
|
|
3148
3198
|
"svg",
|
|
3149
3199
|
{
|
|
3150
|
-
width: "32",
|
|
3151
|
-
height: "32",
|
|
3152
|
-
viewBox: "0 0 32 32",
|
|
3153
|
-
fill: "none",
|
|
3154
3200
|
xmlns: "http://www.w3.org/2000/svg",
|
|
3155
|
-
|
|
3156
|
-
|
|
3157
|
-
|
|
3158
|
-
|
|
3159
|
-
|
|
3160
|
-
|
|
3161
|
-
|
|
3162
|
-
|
|
3163
|
-
|
|
3164
|
-
|
|
3201
|
+
width: "48",
|
|
3202
|
+
height: "48",
|
|
3203
|
+
viewBox: "0 0 48 48",
|
|
3204
|
+
fill: "none",
|
|
3205
|
+
children: [
|
|
3206
|
+
/* @__PURE__ */ jsx("circle", { cx: "24", cy: "24", r: "21", fill: "#FFC24D" }),
|
|
3207
|
+
/* @__PURE__ */ jsx(
|
|
3208
|
+
"path",
|
|
3209
|
+
{
|
|
3210
|
+
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",
|
|
3211
|
+
fill: "white"
|
|
3212
|
+
}
|
|
3213
|
+
)
|
|
3214
|
+
]
|
|
3165
3215
|
}
|
|
3166
3216
|
) }) }),
|
|
3167
3217
|
/* @__PURE__ */ jsxs("div", { className: "text-center mb-8", children: [
|
|
3168
|
-
/* @__PURE__ */ jsx("h3", { className: "text-[18px]
|
|
3218
|
+
/* @__PURE__ */ jsx("h3", { className: "text-[18px] text-gray-900 mb-2", children: pageData.cancelDialog?.title }),
|
|
3169
3219
|
/* @__PURE__ */ jsx("p", { className: "text-[14px] text-gray-600", children: pageData.cancelDialog?.description })
|
|
3170
3220
|
] }),
|
|
3171
3221
|
/* @__PURE__ */ jsxs("div", { className: "flex gap-3 justify-center", children: [
|
|
@@ -3174,7 +3224,7 @@ var BookingSuccess = ({
|
|
|
3174
3224
|
{
|
|
3175
3225
|
onClick: () => setShowCancelDialog(false),
|
|
3176
3226
|
disabled: cancelLoading,
|
|
3177
|
-
className: "px-8 py-3 border-2 border-black rounded-full text-black
|
|
3227
|
+
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]",
|
|
3178
3228
|
children: pageData.cancelDialog?.backButton
|
|
3179
3229
|
}
|
|
3180
3230
|
),
|
|
@@ -3183,7 +3233,7 @@ var BookingSuccess = ({
|
|
|
3183
3233
|
{
|
|
3184
3234
|
onClick: handleCancelAppointment,
|
|
3185
3235
|
disabled: cancelLoading,
|
|
3186
|
-
className: "px-8 py-3 bg-black text-white rounded-full
|
|
3236
|
+
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",
|
|
3187
3237
|
children: cancelLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
3188
3238
|
/* @__PURE__ */ jsxs(
|
|
3189
3239
|
"svg",
|