@anker-in/ui 0.1.3 → 0.1.5
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.css +3 -0
- package/dist/demo-room.css.map +1 -1
- package/dist/demo-room.d.mts +11 -64
- package/dist/demo-room.d.ts +11 -64
- package/dist/demo-room.js +465 -575
- package/dist/demo-room.js.map +1 -1
- package/dist/demo-room.mjs +467 -575
- package/dist/demo-room.mjs.map +1 -1
- package/dist/index.css +3 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +44 -45
- package/dist/index.d.ts +44 -45
- package/dist/index.js +1134 -1202
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1134 -1203
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/dist/demo-room.mjs
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import React2, { useState, useMemo, useEffect, useRef } from 'react';
|
|
2
2
|
import { clsx } from 'clsx';
|
|
3
3
|
import { twMerge } from 'tailwind-merge';
|
|
4
|
-
import {
|
|
5
|
-
import { Text, Link } from '@anker-in/headless-ui';
|
|
4
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
6
5
|
import IndexBar from 'antd-mobile/es/components/index-bar';
|
|
7
6
|
import List from 'antd-mobile/es/components/list';
|
|
8
7
|
import 'antd-mobile/es/components/index-bar/index-bar.css';
|
|
@@ -11,158 +10,6 @@ import 'antd-mobile/es/components/list/list.css';
|
|
|
11
10
|
function cn(...inputs) {
|
|
12
11
|
return twMerge(clsx(inputs));
|
|
13
12
|
}
|
|
14
|
-
var defaultTabs = [
|
|
15
|
-
{ id: "upcoming-events", label: "Upcoming Events" },
|
|
16
|
-
{ id: "find-demoroom", label: "Find Demoroom" },
|
|
17
|
-
{ id: "4-easy-steps", label: "4 Easy Steps" },
|
|
18
|
-
{ id: "faq", label: "FAQ" }
|
|
19
|
-
];
|
|
20
|
-
var HelpNav = ({
|
|
21
|
-
tabs = defaultTabs,
|
|
22
|
-
activeTabId: controlledActiveTabId,
|
|
23
|
-
onTabChange,
|
|
24
|
-
activeBorderColor = "#3ADB67",
|
|
25
|
-
className,
|
|
26
|
-
...props
|
|
27
|
-
}) => {
|
|
28
|
-
const [internalActiveTabId, setInternalActiveTabId] = useState(
|
|
29
|
-
tabs[1]?.id || tabs[0]?.id
|
|
30
|
-
);
|
|
31
|
-
const activeTabId = controlledActiveTabId ?? internalActiveTabId;
|
|
32
|
-
const handleTabClick = (tabId) => {
|
|
33
|
-
if (!controlledActiveTabId) {
|
|
34
|
-
setInternalActiveTabId(tabId);
|
|
35
|
-
}
|
|
36
|
-
onTabChange?.(tabId);
|
|
37
|
-
};
|
|
38
|
-
return /* @__PURE__ */ jsx(
|
|
39
|
-
"div",
|
|
40
|
-
{
|
|
41
|
-
className: cn(
|
|
42
|
-
"w-full pt-5 flex items-center justify-center gap-8 pb-8",
|
|
43
|
-
className
|
|
44
|
-
),
|
|
45
|
-
...props,
|
|
46
|
-
children: tabs.map((tab) => {
|
|
47
|
-
const isActive = tab.id === activeTabId;
|
|
48
|
-
return /* @__PURE__ */ jsxs(
|
|
49
|
-
"button",
|
|
50
|
-
{
|
|
51
|
-
onClick: () => handleTabClick(tab.id),
|
|
52
|
-
className: cn(
|
|
53
|
-
"relative text-[#080A0F]",
|
|
54
|
-
"pb-4",
|
|
55
|
-
"flex items-center gap-2",
|
|
56
|
-
"transition-all duration-200",
|
|
57
|
-
"outline-none focus:outline-none"
|
|
58
|
-
),
|
|
59
|
-
style: {
|
|
60
|
-
fontSize: "18px",
|
|
61
|
-
fontWeight: 600,
|
|
62
|
-
letterSpacing: "-0.36px",
|
|
63
|
-
lineHeight: "25.2px"
|
|
64
|
-
},
|
|
65
|
-
children: [
|
|
66
|
-
tab.label,
|
|
67
|
-
isActive && /* @__PURE__ */ jsx(
|
|
68
|
-
"span",
|
|
69
|
-
{
|
|
70
|
-
className: "absolute bottom-0 left-0 right-0 h-1 rounded-t",
|
|
71
|
-
style: {
|
|
72
|
-
backgroundColor: activeBorderColor,
|
|
73
|
-
height: "4px"
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
)
|
|
77
|
-
]
|
|
78
|
-
},
|
|
79
|
-
tab.id
|
|
80
|
-
);
|
|
81
|
-
})
|
|
82
|
-
}
|
|
83
|
-
);
|
|
84
|
-
};
|
|
85
|
-
HelpNav.displayName = "HelpNav";
|
|
86
|
-
var EventCard = ({
|
|
87
|
-
title,
|
|
88
|
-
description,
|
|
89
|
-
backgroundImage,
|
|
90
|
-
aspectRatio,
|
|
91
|
-
variant = "medium",
|
|
92
|
-
buttons = [],
|
|
93
|
-
subtitle,
|
|
94
|
-
className,
|
|
95
|
-
...props
|
|
96
|
-
}) => {
|
|
97
|
-
const isLarge = variant === "large";
|
|
98
|
-
const isMedium = variant === "medium";
|
|
99
|
-
const isProduct = variant === "product";
|
|
100
|
-
return /* @__PURE__ */ jsx(
|
|
101
|
-
"div",
|
|
102
|
-
{
|
|
103
|
-
className: cn("rounded-3xl overflow-hidden relative", className),
|
|
104
|
-
style: {
|
|
105
|
-
backgroundImage: backgroundImage ? `url(${backgroundImage})` : void 0,
|
|
106
|
-
backgroundSize: "cover",
|
|
107
|
-
backgroundPosition: "center",
|
|
108
|
-
aspectRatio
|
|
109
|
-
},
|
|
110
|
-
...props,
|
|
111
|
-
children: /* @__PURE__ */ jsxs(
|
|
112
|
-
"div",
|
|
113
|
-
{
|
|
114
|
-
className: cn(
|
|
115
|
-
"relative h-full flex flex-col",
|
|
116
|
-
isLarge && "justify-center pl-8",
|
|
117
|
-
!isLarge && "justify-end pl-8 pb-8"
|
|
118
|
-
),
|
|
119
|
-
children: [
|
|
120
|
-
/* @__PURE__ */ jsxs("div", { children: [
|
|
121
|
-
/* @__PURE__ */ jsx(
|
|
122
|
-
"h3",
|
|
123
|
-
{
|
|
124
|
-
className: cn(
|
|
125
|
-
"font-semibold mb-3",
|
|
126
|
-
isLarge && "text-3xl text-gray-900",
|
|
127
|
-
isMedium && "text-2xl text-white",
|
|
128
|
-
isProduct && "text-2xl text-gray-900"
|
|
129
|
-
),
|
|
130
|
-
children: title
|
|
131
|
-
}
|
|
132
|
-
),
|
|
133
|
-
subtitle && isProduct && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600 mb-4", children: subtitle }),
|
|
134
|
-
description && /* @__PURE__ */ jsx(
|
|
135
|
-
"p",
|
|
136
|
-
{
|
|
137
|
-
className: cn(
|
|
138
|
-
"text-sm leading-relaxed",
|
|
139
|
-
isMedium && "text-white/90",
|
|
140
|
-
(isLarge || isProduct) && "text-gray-600"
|
|
141
|
-
),
|
|
142
|
-
children: description
|
|
143
|
-
}
|
|
144
|
-
)
|
|
145
|
-
] }),
|
|
146
|
-
buttons.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex gap-3 mt-6", children: buttons.map((button, index) => /* @__PURE__ */ jsx(
|
|
147
|
-
"button",
|
|
148
|
-
{
|
|
149
|
-
onClick: button.onClick,
|
|
150
|
-
className: cn(
|
|
151
|
-
"px-6 py-3 rounded-full font-medium text-sm transition-all duration-200",
|
|
152
|
-
button.variant === "primary" && "bg-gray-900 text-white hover:bg-gray-800",
|
|
153
|
-
button.variant === "secondary" && "bg-white text-gray-900 border border-gray-300 hover:bg-gray-50"
|
|
154
|
-
),
|
|
155
|
-
children: button.label
|
|
156
|
-
},
|
|
157
|
-
index
|
|
158
|
-
)) })
|
|
159
|
-
]
|
|
160
|
-
}
|
|
161
|
-
)
|
|
162
|
-
}
|
|
163
|
-
);
|
|
164
|
-
};
|
|
165
|
-
EventCard.displayName = "EventCard";
|
|
166
13
|
var Title = ({
|
|
167
14
|
title = "",
|
|
168
15
|
...props
|
|
@@ -170,275 +17,6 @@ var Title = ({
|
|
|
170
17
|
return /* @__PURE__ */ jsx("div", { className: cn("w-full"), ...props, children: /* @__PURE__ */ jsx("h2", { className: "text-[48px] font-semibold mb-12 text-[#080A0F]", children: title }) });
|
|
171
18
|
};
|
|
172
19
|
Title.displayName = "Title";
|
|
173
|
-
var defaultEvents = [
|
|
174
|
-
{
|
|
175
|
-
variant: "large",
|
|
176
|
-
title: "IFA 2025 Event Name Event Name",
|
|
177
|
-
description: "Corem ipsum dolor sit amet, consectetur adipiscing elit.",
|
|
178
|
-
backgroundImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
|
|
179
|
-
buttons: [
|
|
180
|
-
{
|
|
181
|
-
label: "Schedule Now",
|
|
182
|
-
variant: "primary"
|
|
183
|
-
}
|
|
184
|
-
],
|
|
185
|
-
aspectRatio: "1664 / 640"
|
|
186
|
-
},
|
|
187
|
-
{
|
|
188
|
-
variant: "medium",
|
|
189
|
-
title: "Local Event Name Local Event Name Local Event Name",
|
|
190
|
-
description: "Norem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.",
|
|
191
|
-
backgroundImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
|
|
192
|
-
buttons: [
|
|
193
|
-
{
|
|
194
|
-
label: "Schedule Now",
|
|
195
|
-
variant: "primary"
|
|
196
|
-
}
|
|
197
|
-
],
|
|
198
|
-
aspectRatio: "824 / 640"
|
|
199
|
-
},
|
|
200
|
-
{
|
|
201
|
-
variant: "product",
|
|
202
|
-
title: "Anker Prime",
|
|
203
|
-
subtitle: "Anker Prime 240W GaN Desktop Charger (4 Ports) Feb. 5th - 16th",
|
|
204
|
-
backgroundImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
|
|
205
|
-
buttons: [
|
|
206
|
-
{
|
|
207
|
-
label: "Learn More",
|
|
208
|
-
variant: "secondary"
|
|
209
|
-
},
|
|
210
|
-
{
|
|
211
|
-
label: "Shop Now",
|
|
212
|
-
variant: "primary"
|
|
213
|
-
}
|
|
214
|
-
],
|
|
215
|
-
aspectRatio: "824 / 640"
|
|
216
|
-
},
|
|
217
|
-
{
|
|
218
|
-
variant: "medium",
|
|
219
|
-
title: "Local Event Name Local Event Name Local Event Name",
|
|
220
|
-
description: "Norem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.",
|
|
221
|
-
backgroundImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
|
|
222
|
-
buttons: [
|
|
223
|
-
{
|
|
224
|
-
label: "Schedule Now",
|
|
225
|
-
variant: "primary"
|
|
226
|
-
}
|
|
227
|
-
],
|
|
228
|
-
aspectRatio: "824 / 640"
|
|
229
|
-
},
|
|
230
|
-
{
|
|
231
|
-
variant: "product",
|
|
232
|
-
title: "Anker Prime",
|
|
233
|
-
subtitle: "Anker Prime 240W GaN Desktop Charger (4 Ports) Feb. 5th - 16th",
|
|
234
|
-
backgroundImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
|
|
235
|
-
buttons: [
|
|
236
|
-
{
|
|
237
|
-
label: "Learn More",
|
|
238
|
-
variant: "secondary"
|
|
239
|
-
},
|
|
240
|
-
{
|
|
241
|
-
label: "Shop Now",
|
|
242
|
-
variant: "primary"
|
|
243
|
-
}
|
|
244
|
-
],
|
|
245
|
-
aspectRatio: "824 / 640"
|
|
246
|
-
}
|
|
247
|
-
];
|
|
248
|
-
var UpcomingEvents = ({
|
|
249
|
-
title = "Upcoming Events",
|
|
250
|
-
events = defaultEvents,
|
|
251
|
-
showViewMore = true,
|
|
252
|
-
onViewMore,
|
|
253
|
-
className,
|
|
254
|
-
...props
|
|
255
|
-
}) => {
|
|
256
|
-
return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), ...props, children: [
|
|
257
|
-
/* @__PURE__ */ jsx(Title, { title }),
|
|
258
|
-
/* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-6 mb-[64px]", children: events.map((event, index) => /* @__PURE__ */ jsx("div", { className: cn(index === 0 ? "col-span-2" : ""), children: /* @__PURE__ */ jsx(EventCard, { ...event }) }, index)) }),
|
|
259
|
-
showViewMore && /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxs(
|
|
260
|
-
"button",
|
|
261
|
-
{
|
|
262
|
-
onClick: onViewMore,
|
|
263
|
-
className: "inline-flex items-center gap-2 text-gray-700 hover:text-gray-900 transition-colors duration-200",
|
|
264
|
-
children: [
|
|
265
|
-
/* @__PURE__ */ jsx("span", { className: "text-base font-bold", children: "View More" }),
|
|
266
|
-
/* @__PURE__ */ jsx(
|
|
267
|
-
"svg",
|
|
268
|
-
{
|
|
269
|
-
width: "16",
|
|
270
|
-
height: "16",
|
|
271
|
-
viewBox: "0 0 16 16",
|
|
272
|
-
fill: "none",
|
|
273
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
274
|
-
className: "transition-transform duration-200 group-hover:translate-y-0.5",
|
|
275
|
-
children: /* @__PURE__ */ jsx(
|
|
276
|
-
"path",
|
|
277
|
-
{
|
|
278
|
-
d: "M8 3L8 13M8 13L12 9M8 13L4 9",
|
|
279
|
-
stroke: "currentColor",
|
|
280
|
-
strokeWidth: "2",
|
|
281
|
-
strokeLinecap: "round",
|
|
282
|
-
strokeLinejoin: "round"
|
|
283
|
-
}
|
|
284
|
-
)
|
|
285
|
-
}
|
|
286
|
-
)
|
|
287
|
-
]
|
|
288
|
-
}
|
|
289
|
-
) })
|
|
290
|
-
] });
|
|
291
|
-
};
|
|
292
|
-
UpcomingEvents.displayName = "UpcomingEvents";
|
|
293
|
-
var defaultBannerData = {
|
|
294
|
-
title: "See it. Touch it. Make it Locally.",
|
|
295
|
-
subTitle: "Visit your local studio right around the corner.",
|
|
296
|
-
backgroundImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
|
|
297
|
-
backgroundImageMobile: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638"
|
|
298
|
-
};
|
|
299
|
-
var Banner = ({
|
|
300
|
-
data = defaultBannerData,
|
|
301
|
-
className,
|
|
302
|
-
style,
|
|
303
|
-
...props
|
|
304
|
-
}) => {
|
|
305
|
-
return /* @__PURE__ */ jsxs(
|
|
306
|
-
"div",
|
|
307
|
-
{
|
|
308
|
-
className: cn("relative"),
|
|
309
|
-
style: { aspectRatio: "1920/480", ...style },
|
|
310
|
-
...props,
|
|
311
|
-
children: [
|
|
312
|
-
data?.backgroundImage && /* @__PURE__ */ jsx(
|
|
313
|
-
"img",
|
|
314
|
-
{
|
|
315
|
-
src: data.backgroundImage,
|
|
316
|
-
alt: "",
|
|
317
|
-
className: "inset-0 h-full w-full object-cover"
|
|
318
|
-
}
|
|
319
|
-
),
|
|
320
|
-
/* @__PURE__ */ jsxs(
|
|
321
|
-
"div",
|
|
322
|
-
{
|
|
323
|
-
className: cn(
|
|
324
|
-
"absolute flex flex-col gap-4 justify-center m-auto top-0 bottom-0 left-0 right-0 z-10",
|
|
325
|
-
className
|
|
326
|
-
),
|
|
327
|
-
children: [
|
|
328
|
-
/* @__PURE__ */ jsx(
|
|
329
|
-
Text,
|
|
330
|
-
{
|
|
331
|
-
className: "text-[48px] font-bold text-white leading-[1]",
|
|
332
|
-
html: data?.title
|
|
333
|
-
}
|
|
334
|
-
),
|
|
335
|
-
/* @__PURE__ */ jsx(
|
|
336
|
-
Text,
|
|
337
|
-
{
|
|
338
|
-
className: "text-[18px] font-bold text-white leading-[1.4]",
|
|
339
|
-
html: data?.subTitle
|
|
340
|
-
}
|
|
341
|
-
)
|
|
342
|
-
]
|
|
343
|
-
}
|
|
344
|
-
)
|
|
345
|
-
]
|
|
346
|
-
}
|
|
347
|
-
);
|
|
348
|
-
};
|
|
349
|
-
Banner.displayName = "Banner";
|
|
350
|
-
var BreadCrumbs = ({
|
|
351
|
-
items,
|
|
352
|
-
className,
|
|
353
|
-
...props
|
|
354
|
-
}) => {
|
|
355
|
-
return /* @__PURE__ */ jsx("div", { className: cn("flex items-center py-6 gap-1 text-[18px]", className), ...props, children: items?.map((item, i) => {
|
|
356
|
-
const isLast = i === items?.length - 1;
|
|
357
|
-
return /* @__PURE__ */ jsxs(
|
|
358
|
-
Link,
|
|
359
|
-
{
|
|
360
|
-
className: cn(
|
|
361
|
-
"flex items-center gap-1 text-[#6D6D6F] no-underline",
|
|
362
|
-
isLast && "text-[#080A0F]",
|
|
363
|
-
item?.link ? "cursor-pointer" : "cursor-default hover:text-[#080A0F]"
|
|
364
|
-
),
|
|
365
|
-
href: item?.link,
|
|
366
|
-
children: [
|
|
367
|
-
item?.label,
|
|
368
|
-
!isLast && /* @__PURE__ */ jsx("span", { children: "/" })
|
|
369
|
-
]
|
|
370
|
-
},
|
|
371
|
-
i
|
|
372
|
-
);
|
|
373
|
-
}) });
|
|
374
|
-
};
|
|
375
|
-
BreadCrumbs.displayName = "BreadCrumbs";
|
|
376
|
-
var defaultSteps = [
|
|
377
|
-
{
|
|
378
|
-
stepNumber: 1,
|
|
379
|
-
title: 'Find a demo room you would like to visit, and click "Schedule Now"',
|
|
380
|
-
description: 'Find a demo room you would like to visit, and click "Schedule Now"',
|
|
381
|
-
mapImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638"
|
|
382
|
-
},
|
|
383
|
-
{
|
|
384
|
-
stepNumber: 2,
|
|
385
|
-
title: "Fill out the form and confirm your time of visit",
|
|
386
|
-
description: "Fill out the form and confirm your time of visit",
|
|
387
|
-
mapImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638"
|
|
388
|
-
},
|
|
389
|
-
{
|
|
390
|
-
stepNumber: 3,
|
|
391
|
-
title: "Once you arrive at the demo room, scan the QR code to check in",
|
|
392
|
-
description: "Once you arrive at the demo room, scan the QR code to check in",
|
|
393
|
-
mapImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638"
|
|
394
|
-
},
|
|
395
|
-
{
|
|
396
|
-
stepNumber: 4,
|
|
397
|
-
title: "Have fun!",
|
|
398
|
-
description: "Have fun!",
|
|
399
|
-
mapImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638"
|
|
400
|
-
}
|
|
401
|
-
];
|
|
402
|
-
var EasySteps = ({
|
|
403
|
-
title = "Schedule in 4 Easy Steps",
|
|
404
|
-
steps = defaultSteps,
|
|
405
|
-
className,
|
|
406
|
-
...props
|
|
407
|
-
}) => {
|
|
408
|
-
return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), ...props, children: [
|
|
409
|
-
/* @__PURE__ */ jsx(Title, { title }),
|
|
410
|
-
/* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 md:grid-cols-2 gap-6", children: steps.map((step) => /* @__PURE__ */ jsxs(
|
|
411
|
-
"div",
|
|
412
|
-
{
|
|
413
|
-
className: cn(
|
|
414
|
-
"bg-white rounded-2xl overflow-hidden",
|
|
415
|
-
"border border-gray-200",
|
|
416
|
-
"hover:shadow-lg transition-shadow duration-200"
|
|
417
|
-
),
|
|
418
|
-
children: [
|
|
419
|
-
/* @__PURE__ */ jsx("div", { className: "p-6 pb-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 mb-3", children: [
|
|
420
|
-
/* @__PURE__ */ jsxs("span", { className: "text-sm font-semibold text-gray-900", children: [
|
|
421
|
-
"Step ",
|
|
422
|
-
step.stepNumber,
|
|
423
|
-
":"
|
|
424
|
-
] }),
|
|
425
|
-
/* @__PURE__ */ jsx("p", { className: "text-sm text-gray-900 font-medium flex-1", children: step.title })
|
|
426
|
-
] }) }),
|
|
427
|
-
/* @__PURE__ */ jsx("div", { className: "relative w-full aspect-[356/220] bg-gray-100", children: /* @__PURE__ */ jsx(
|
|
428
|
-
"img",
|
|
429
|
-
{
|
|
430
|
-
src: step.mapImage,
|
|
431
|
-
alt: `Step ${step.stepNumber} - ${step.title}`,
|
|
432
|
-
className: "w-full h-full object-cover"
|
|
433
|
-
}
|
|
434
|
-
) })
|
|
435
|
-
]
|
|
436
|
-
},
|
|
437
|
-
step.stepNumber
|
|
438
|
-
)) })
|
|
439
|
-
] });
|
|
440
|
-
};
|
|
441
|
-
EasySteps.displayName = "EasySteps";
|
|
442
20
|
var StudioCard = ({
|
|
443
21
|
code,
|
|
444
22
|
name,
|
|
@@ -449,25 +27,48 @@ var StudioCard = ({
|
|
|
449
27
|
zipCode,
|
|
450
28
|
country = "United States",
|
|
451
29
|
euifyMakeModel,
|
|
30
|
+
distance,
|
|
452
31
|
onSchedule,
|
|
453
32
|
className,
|
|
33
|
+
style,
|
|
454
34
|
...props
|
|
455
35
|
}) => {
|
|
456
36
|
const fullAddress = `${address}, ${city}, ${state} ${country} ${zipCode}`;
|
|
37
|
+
const [isHovered, setIsHovered] = React2.useState(false);
|
|
457
38
|
const handleScheduleClick = () => {
|
|
458
39
|
onSchedule?.(code);
|
|
459
40
|
};
|
|
41
|
+
const formatDistance = (dist) => {
|
|
42
|
+
if (dist < 1) {
|
|
43
|
+
return `${Math.round(dist * 1e3)} m`;
|
|
44
|
+
}
|
|
45
|
+
return `${dist.toFixed(1)} km`;
|
|
46
|
+
};
|
|
460
47
|
return /* @__PURE__ */ jsxs(
|
|
461
48
|
"div",
|
|
462
49
|
{
|
|
463
|
-
className: cn(
|
|
464
|
-
"p-6",
|
|
465
|
-
"hover:shadow-lg transition-shadow duration-200",
|
|
466
|
-
className
|
|
467
|
-
),
|
|
468
50
|
...props,
|
|
51
|
+
className: cn("p-6 cursor-pointer transition-colors duration-200", className),
|
|
52
|
+
style: {
|
|
53
|
+
backgroundColor: isHovered ? "#f3f4f6" : "transparent",
|
|
54
|
+
...style
|
|
55
|
+
},
|
|
56
|
+
onMouseEnter: (e) => {
|
|
57
|
+
setIsHovered(true);
|
|
58
|
+
props.onMouseEnter?.(e);
|
|
59
|
+
},
|
|
60
|
+
onMouseLeave: (e) => {
|
|
61
|
+
setIsHovered(false);
|
|
62
|
+
props.onMouseLeave?.(e);
|
|
63
|
+
},
|
|
469
64
|
children: [
|
|
470
|
-
/* @__PURE__ */
|
|
65
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between mb-4", children: [
|
|
66
|
+
/* @__PURE__ */ jsx("h3", { className: "text-xl font-semibold text-gray-900", children: name }),
|
|
67
|
+
distance !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-[#2E8B57] bg-[#E8F5E9] px-3 py-1 rounded-full whitespace-nowrap ml-2", children: [
|
|
68
|
+
formatDistance(distance),
|
|
69
|
+
" away"
|
|
70
|
+
] })
|
|
71
|
+
] }),
|
|
471
72
|
/* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 mb-3", children: [
|
|
472
73
|
/* @__PURE__ */ jsxs(
|
|
473
74
|
"svg",
|
|
@@ -613,7 +214,7 @@ var StudioCard = ({
|
|
|
613
214
|
"w-full px-6 py-3 rounded-full",
|
|
614
215
|
"bg-white text-gray-900 border border-gray-900",
|
|
615
216
|
"font-medium text-sm",
|
|
616
|
-
"hover:bg-gray-900
|
|
217
|
+
"hover:bg-gray-900",
|
|
617
218
|
"transition-all duration-200"
|
|
618
219
|
),
|
|
619
220
|
children: "Schedule Now"
|
|
@@ -642,6 +243,7 @@ var defaultLocations = [
|
|
|
642
243
|
var StudioMap = ({
|
|
643
244
|
googleMapsApiKey,
|
|
644
245
|
locations = defaultLocations,
|
|
246
|
+
hoveredLocationId,
|
|
645
247
|
defaultCenter = { lat: 39.8283, lng: -98.5795 },
|
|
646
248
|
// US center
|
|
647
249
|
defaultZoom = 4,
|
|
@@ -790,7 +392,7 @@ var StudioMap = ({
|
|
|
790
392
|
if (btn) {
|
|
791
393
|
btn.addEventListener("click", () => {
|
|
792
394
|
if (onSchedule) {
|
|
793
|
-
onSchedule(location);
|
|
395
|
+
onSchedule(location.id);
|
|
794
396
|
}
|
|
795
397
|
});
|
|
796
398
|
}
|
|
@@ -811,6 +413,82 @@ var StudioMap = ({
|
|
|
811
413
|
googleMapRef.current.fitBounds(bounds);
|
|
812
414
|
}
|
|
813
415
|
}, [isLoaded, locations, onSchedule]);
|
|
416
|
+
React2.useEffect(() => {
|
|
417
|
+
if (!isLoaded || !googleMapRef.current || !hoveredLocationId) {
|
|
418
|
+
if (!hoveredLocationId && infoWindowRef.current) {
|
|
419
|
+
infoWindowRef.current.close();
|
|
420
|
+
}
|
|
421
|
+
return;
|
|
422
|
+
}
|
|
423
|
+
const location = locations.find((loc) => loc.id === hoveredLocationId);
|
|
424
|
+
const markerIndex = locations.findIndex(
|
|
425
|
+
(loc) => loc.id === hoveredLocationId
|
|
426
|
+
);
|
|
427
|
+
const marker = markersRef.current[markerIndex];
|
|
428
|
+
if (location && marker) {
|
|
429
|
+
const content = `
|
|
430
|
+
<div style="padding: 16px; max-width: 300px; font-family: system-ui, sans-serif;">
|
|
431
|
+
<h3 style="margin: 0 0 12px 0; font-size: 18px; font-weight: 600;">${location.name}</h3>
|
|
432
|
+
${location.availableTime ? `<div style="margin-bottom: 8px; color: #666;">
|
|
433
|
+
<svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
|
|
434
|
+
<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"/>
|
|
435
|
+
</svg>
|
|
436
|
+
<span style="vertical-align: middle;">Available ${location.availableTime}</span>
|
|
437
|
+
</div>` : ""}
|
|
438
|
+
<div style="margin-bottom: 8px; color: #666;">
|
|
439
|
+
<svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
|
|
440
|
+
<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"/>
|
|
441
|
+
</svg>
|
|
442
|
+
<span style="vertical-align: middle;">${location.address}, ${location.city}, ${location.state} ${location.country} ${location.zipCode}</span>
|
|
443
|
+
</div>
|
|
444
|
+
${location.euifyMakeModel ? `<div style="margin-bottom: 12px; color: #666;">
|
|
445
|
+
<svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
|
|
446
|
+
<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"/>
|
|
447
|
+
</svg>
|
|
448
|
+
<span style="vertical-align: middle;">${location.euifyMakeModel}</span>
|
|
449
|
+
</div>` : ""}
|
|
450
|
+
<button
|
|
451
|
+
id="schedule-btn-hover-${location.id}"
|
|
452
|
+
style="
|
|
453
|
+
width: 100%;
|
|
454
|
+
padding: 10px 16px;
|
|
455
|
+
background: #000;
|
|
456
|
+
color: #fff;
|
|
457
|
+
border: none;
|
|
458
|
+
border-radius: 6px;
|
|
459
|
+
font-weight: 500;
|
|
460
|
+
cursor: pointer;
|
|
461
|
+
font-size: 14px;
|
|
462
|
+
"
|
|
463
|
+
onmouseover="this.style.background='#333'"
|
|
464
|
+
onmouseout="this.style.background='#000'"
|
|
465
|
+
>
|
|
466
|
+
Schedule Now
|
|
467
|
+
</button>
|
|
468
|
+
</div>
|
|
469
|
+
`;
|
|
470
|
+
if (infoWindowRef.current) {
|
|
471
|
+
infoWindowRef.current.setContent(content);
|
|
472
|
+
infoWindowRef.current.open(googleMapRef.current, marker);
|
|
473
|
+
google.maps.event.addListenerOnce(
|
|
474
|
+
infoWindowRef.current,
|
|
475
|
+
"domready",
|
|
476
|
+
() => {
|
|
477
|
+
const btn = document.getElementById(
|
|
478
|
+
`schedule-btn-hover-${location.id}`
|
|
479
|
+
);
|
|
480
|
+
if (btn) {
|
|
481
|
+
btn.addEventListener("click", () => {
|
|
482
|
+
if (onSchedule) {
|
|
483
|
+
onSchedule(location.id);
|
|
484
|
+
}
|
|
485
|
+
});
|
|
486
|
+
}
|
|
487
|
+
}
|
|
488
|
+
);
|
|
489
|
+
}
|
|
490
|
+
}
|
|
491
|
+
}, [hoveredLocationId, isLoaded, locations, onSchedule]);
|
|
814
492
|
if (!googleMapsApiKey) {
|
|
815
493
|
return /* @__PURE__ */ jsx(
|
|
816
494
|
"div",
|
|
@@ -930,20 +608,58 @@ var AntdMobileIsolated = ({
|
|
|
930
608
|
AntdMobileIsolated.displayName = "AntdMobileIsolated";
|
|
931
609
|
|
|
932
610
|
// src/components/DemoRoom/utils/addressParser.ts
|
|
611
|
+
var KNOWN_COUNTRIES = [
|
|
612
|
+
"United States",
|
|
613
|
+
"United Kingdom",
|
|
614
|
+
"American Samoa",
|
|
615
|
+
"United Arab Emirates",
|
|
616
|
+
"Bosnia and Herzegovina",
|
|
617
|
+
"Trinidad and Tobago",
|
|
618
|
+
"Saint Kitts and Nevis",
|
|
619
|
+
"Antigua and Barbuda",
|
|
620
|
+
"Saint Vincent and the Grenadines",
|
|
621
|
+
"S\xE3o Tom\xE9 and Pr\xEDncipe",
|
|
622
|
+
"United States Minor Outlying Islands",
|
|
623
|
+
"British Virgin Islands",
|
|
624
|
+
"United States Virgin Islands",
|
|
625
|
+
"Cayman Islands",
|
|
626
|
+
"Cook Islands",
|
|
627
|
+
"Falkland Islands",
|
|
628
|
+
"Faroe Islands",
|
|
629
|
+
"Marshall Islands",
|
|
630
|
+
"Northern Mariana Islands",
|
|
631
|
+
"Pitcairn Islands",
|
|
632
|
+
"Solomon Islands",
|
|
633
|
+
"Turks and Caicos Islands",
|
|
634
|
+
"Wallis and Futuna"
|
|
635
|
+
];
|
|
933
636
|
function parseAddress(address) {
|
|
934
|
-
const parts = address.split(",").map((part) => part.trim());
|
|
637
|
+
const parts = address.split(",").map((part) => part.trim()).filter(Boolean);
|
|
935
638
|
let country = "United States";
|
|
936
639
|
let state = "";
|
|
937
640
|
let city = "";
|
|
938
|
-
if (parts.length
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
641
|
+
if (parts.length === 0) {
|
|
642
|
+
return { country, state, city };
|
|
643
|
+
}
|
|
644
|
+
const lastPart = parts[parts.length - 1];
|
|
645
|
+
const matchedCountry = KNOWN_COUNTRIES.find(
|
|
646
|
+
(knownCountry) => lastPart.toLowerCase() === knownCountry.toLowerCase()
|
|
647
|
+
);
|
|
648
|
+
if (matchedCountry) {
|
|
649
|
+
country = matchedCountry;
|
|
650
|
+
if (parts.length >= 2) {
|
|
651
|
+
state = parts[parts.length - 2].split(" ")[0];
|
|
652
|
+
}
|
|
653
|
+
if (parts.length >= 3) {
|
|
654
|
+
city = parts[parts.length - 3];
|
|
655
|
+
}
|
|
656
|
+
} else {
|
|
657
|
+
if (parts.length >= 2) {
|
|
658
|
+
state = parts[parts.length - 1].split(" ")[0];
|
|
659
|
+
city = parts[parts.length - 2];
|
|
660
|
+
} else if (parts.length === 1) {
|
|
661
|
+
city = parts[0];
|
|
662
|
+
}
|
|
947
663
|
}
|
|
948
664
|
return {
|
|
949
665
|
country: country.trim(),
|
|
@@ -1031,9 +747,7 @@ var LocationFilter = ({
|
|
|
1031
747
|
items = locationData.countries;
|
|
1032
748
|
break;
|
|
1033
749
|
case "state":
|
|
1034
|
-
items = selectedCountry ? locationData.states.filter(
|
|
1035
|
-
(s) => s.parentCode === selectedCountry
|
|
1036
|
-
) : [];
|
|
750
|
+
items = selectedCountry ? locationData.states.filter((s) => s.parentCode === selectedCountry) : [];
|
|
1037
751
|
break;
|
|
1038
752
|
case "city":
|
|
1039
753
|
items = selectedState ? locationData.cities.filter((c) => c.parentCode === selectedState) : [];
|
|
@@ -1050,6 +764,7 @@ var LocationFilter = ({
|
|
|
1050
764
|
() => groupByAlphabet(filteredItems),
|
|
1051
765
|
[filteredItems]
|
|
1052
766
|
);
|
|
767
|
+
const showIndexBar = filteredItems.length >= 10;
|
|
1053
768
|
const handleItemClick = (item) => {
|
|
1054
769
|
if (currentLevel === "country") {
|
|
1055
770
|
setSelectedCountry(item.code);
|
|
@@ -1074,61 +789,49 @@ var LocationFilter = ({
|
|
|
1074
789
|
setSelectedCountry(void 0);
|
|
1075
790
|
setSelectedState(void 0);
|
|
1076
791
|
} else if (level === "state") {
|
|
1077
|
-
setSelectedState(void 0);
|
|
1078
|
-
}
|
|
1079
|
-
};
|
|
1080
|
-
if (!visible) return null;
|
|
1081
|
-
return /* @__PURE__ */ jsxs(
|
|
1082
|
-
"div",
|
|
1083
|
-
{
|
|
1084
|
-
style: { height: "794px" },
|
|
1085
|
-
className: cn(
|
|
1086
|
-
"w-full rounded-[12px] absolute z-10 top-0 left-0 bg-white border border-[#E4E5E6]",
|
|
1087
|
-
RoomsList_default.antdMobileScope
|
|
1088
|
-
),
|
|
1089
|
-
children: [
|
|
1090
|
-
/* @__PURE__ */ jsxs(
|
|
1091
|
-
"div",
|
|
1092
|
-
{
|
|
1093
|
-
style: { background: "#F8F8F8" },
|
|
1094
|
-
className: "rounded-[12px] rounded-b-none h-[72px] font-bold text-[14px] flex flex-col",
|
|
1095
|
-
children: [
|
|
1096
|
-
/* @__PURE__ */
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
children: /* @__PURE__ */ jsx(
|
|
1121
|
-
"path",
|
|
1122
|
-
{
|
|
1123
|
-
d: "M6.4 19L5 17.6L10.6 12L5 6.4L6.4 5L12 10.6L17.6 5L19 6.4L13.4 12L19 17.6L17.6 19L12 13.4L6.4 19Z",
|
|
1124
|
-
fill: "#1D1D1F"
|
|
1125
|
-
}
|
|
1126
|
-
)
|
|
1127
|
-
}
|
|
1128
|
-
)
|
|
1129
|
-
}
|
|
1130
|
-
)
|
|
1131
|
-
] }),
|
|
792
|
+
setSelectedState(void 0);
|
|
793
|
+
}
|
|
794
|
+
};
|
|
795
|
+
if (!visible) return null;
|
|
796
|
+
return /* @__PURE__ */ jsxs(
|
|
797
|
+
"div",
|
|
798
|
+
{
|
|
799
|
+
style: { height: "794px" },
|
|
800
|
+
className: cn(
|
|
801
|
+
"w-full rounded-[12px] absolute z-10 top-0 left-0 bg-white border border-[#E4E5E6]",
|
|
802
|
+
RoomsList_default.antdMobileScope
|
|
803
|
+
),
|
|
804
|
+
children: [
|
|
805
|
+
/* @__PURE__ */ jsxs(
|
|
806
|
+
"div",
|
|
807
|
+
{
|
|
808
|
+
style: { background: "#F8F8F8" },
|
|
809
|
+
className: "rounded-[12px] rounded-b-none h-[72px] font-bold text-[14px] flex flex-col",
|
|
810
|
+
children: [
|
|
811
|
+
/* @__PURE__ */ jsx("div", { className: "flex items-center justify-end px-[20px] pt-[12px] pb-[8px]", children: /* @__PURE__ */ jsx(
|
|
812
|
+
"button",
|
|
813
|
+
{
|
|
814
|
+
onClick: onClose,
|
|
815
|
+
className: "ml-[12px] w-[24px] h-[24px] flex items-center justify-end",
|
|
816
|
+
children: /* @__PURE__ */ jsx(
|
|
817
|
+
"svg",
|
|
818
|
+
{
|
|
819
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
820
|
+
width: "24",
|
|
821
|
+
height: "24",
|
|
822
|
+
viewBox: "0 0 24 24",
|
|
823
|
+
fill: "none",
|
|
824
|
+
children: /* @__PURE__ */ jsx(
|
|
825
|
+
"path",
|
|
826
|
+
{
|
|
827
|
+
d: "M6.4 19L5 17.6L10.6 12L5 6.4L6.4 5L12 10.6L17.6 5L19 6.4L13.4 12L19 17.6L17.6 19L12 13.4L6.4 19Z",
|
|
828
|
+
fill: "#1D1D1F"
|
|
829
|
+
}
|
|
830
|
+
)
|
|
831
|
+
}
|
|
832
|
+
)
|
|
833
|
+
}
|
|
834
|
+
) }),
|
|
1132
835
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center px-[20px] gap-[16px] pb-[8px]", children: [
|
|
1133
836
|
/* @__PURE__ */ jsx(
|
|
1134
837
|
"button",
|
|
@@ -1171,38 +874,26 @@ var LocationFilter = ({
|
|
|
1171
874
|
]
|
|
1172
875
|
}
|
|
1173
876
|
),
|
|
1174
|
-
/* @__PURE__ */ jsx(AntdMobileIsolated, { style: { height: "calc(100% - 72px)" }, children: /* @__PURE__ */ jsx(IndexBar, { style: { height: "100%" }, children: groupedItems.map((group) => {
|
|
877
|
+
/* @__PURE__ */ jsx(AntdMobileIsolated, { style: { height: "calc(100% - 72px)" }, children: showIndexBar ? /* @__PURE__ */ jsx(IndexBar, { style: { height: "100%" }, children: groupedItems.map((group) => {
|
|
1175
878
|
const { title, items } = group;
|
|
1176
879
|
return /* @__PURE__ */ jsx(IndexBar.Panel, { index: title, title, children: /* @__PURE__ */ jsx(List, { children: items.map((item) => /* @__PURE__ */ jsx(
|
|
1177
880
|
List.Item,
|
|
1178
881
|
{
|
|
1179
|
-
clickable: true,
|
|
1180
882
|
onClick: () => handleItemClick(item),
|
|
1181
|
-
|
|
1182
|
-
/* @__PURE__ */ jsx("span", { className: "text-[#767880] text-[14px]", children: item.count }),
|
|
1183
|
-
/* @__PURE__ */ jsx(
|
|
1184
|
-
"svg",
|
|
1185
|
-
{
|
|
1186
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1187
|
-
width: "16",
|
|
1188
|
-
height: "16",
|
|
1189
|
-
viewBox: "0 0 16 16",
|
|
1190
|
-
fill: "none",
|
|
1191
|
-
children: /* @__PURE__ */ jsx(
|
|
1192
|
-
"path",
|
|
1193
|
-
{
|
|
1194
|
-
d: "M6.4 12L5.6 11.2L9.06667 7.73333L5.6 4.26667L6.4 3.46667L10.6667 7.73333L6.4 12Z",
|
|
1195
|
-
fill: "#767880"
|
|
1196
|
-
}
|
|
1197
|
-
)
|
|
1198
|
-
}
|
|
1199
|
-
)
|
|
1200
|
-
] }),
|
|
883
|
+
style: { cursor: "pointer" },
|
|
1201
884
|
children: item.name
|
|
1202
885
|
},
|
|
1203
886
|
item.code
|
|
1204
887
|
)) }) }, title);
|
|
1205
|
-
}) }) })
|
|
888
|
+
}) }) : /* @__PURE__ */ jsx("div", { style: { height: "100%", overflow: "auto" }, children: /* @__PURE__ */ jsx(List, { children: filteredItems.map((item) => /* @__PURE__ */ jsx(
|
|
889
|
+
List.Item,
|
|
890
|
+
{
|
|
891
|
+
onClick: () => handleItemClick(item),
|
|
892
|
+
style: { cursor: "pointer" },
|
|
893
|
+
children: item.name
|
|
894
|
+
},
|
|
895
|
+
item.code
|
|
896
|
+
)) }) }) })
|
|
1206
897
|
]
|
|
1207
898
|
}
|
|
1208
899
|
);
|
|
@@ -1325,6 +1016,7 @@ var RoomsList = ({
|
|
|
1325
1016
|
}) => {
|
|
1326
1017
|
const [showLocationFilter, setShowLocationFilter] = useState(false);
|
|
1327
1018
|
const [selectedLocation, setSelectedLocation] = useState();
|
|
1019
|
+
const [hoveredRoomId, setHoveredRoomId] = useState(null);
|
|
1328
1020
|
const {
|
|
1329
1021
|
data: demoRooms,
|
|
1330
1022
|
loading,
|
|
@@ -1337,25 +1029,9 @@ var RoomsList = ({
|
|
|
1337
1029
|
const studioLocations = useMemo(() => {
|
|
1338
1030
|
if (!demoRooms) return defaultStudioLocations;
|
|
1339
1031
|
return demoRooms.map((room) => {
|
|
1340
|
-
const
|
|
1341
|
-
|
|
1342
|
-
|
|
1343
|
-
start_time: "2026-01-13T09:00:00-05:00",
|
|
1344
|
-
end_time: "2026-01-13T10:00:00-05:00",
|
|
1345
|
-
capacity: 5,
|
|
1346
|
-
booked_count: 2,
|
|
1347
|
-
status: "available"
|
|
1348
|
-
},
|
|
1349
|
-
{
|
|
1350
|
-
id: 131,
|
|
1351
|
-
start_time: "2026-01-13T14:00:00-05:00",
|
|
1352
|
-
end_time: "2026-01-13T15:00:00-05:00",
|
|
1353
|
-
capacity: 5,
|
|
1354
|
-
booked_count: 5,
|
|
1355
|
-
status: "full"
|
|
1356
|
-
}
|
|
1357
|
-
];
|
|
1358
|
-
const nextAvailableTimeslot = (room.timeslots?.length ? room.timeslots : timeslots)?.find((slot) => slot.status === "available");
|
|
1032
|
+
const nextAvailableTimeslot = room?.timeslots?.find(
|
|
1033
|
+
(slot) => slot.status === "available"
|
|
1034
|
+
);
|
|
1359
1035
|
const { country, state, city } = parseAddress(room.address);
|
|
1360
1036
|
return {
|
|
1361
1037
|
id: room.code,
|
|
@@ -1406,18 +1082,18 @@ var RoomsList = ({
|
|
|
1406
1082
|
return /* @__PURE__ */ jsxs("div", { className, ...props, children: [
|
|
1407
1083
|
/* @__PURE__ */ jsx(Title, { title: "Find a Studio Near You" }),
|
|
1408
1084
|
loading && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[794px]", children: /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsx("div", { className: "text-lg font-medium", children: "Loading demo rooms..." }) }) }),
|
|
1409
|
-
error && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[794px]", children: /* @__PURE__ */ jsxs("div", { className: "text-center
|
|
1085
|
+
error && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[794px]", children: /* @__PURE__ */ jsxs("div", { className: "text-center", style: { color: "#FF4D4D" }, children: [
|
|
1410
1086
|
/* @__PURE__ */ jsx("div", { className: "text-lg font-medium", children: "Failed to load demo rooms" }),
|
|
1411
1087
|
/* @__PURE__ */ jsx("div", { className: "text-sm mt-2", children: error.message })
|
|
1412
1088
|
] }) }),
|
|
1413
|
-
!loading && !error && /* @__PURE__ */ jsxs("div", { className: "flex h-[794px]
|
|
1089
|
+
!loading && !error && /* @__PURE__ */ jsxs("div", { className: "flex h-[794px] gap-4", children: [
|
|
1414
1090
|
/* @__PURE__ */ jsxs(
|
|
1415
1091
|
"div",
|
|
1416
1092
|
{
|
|
1417
1093
|
className: "flex-none relative w-[420px]",
|
|
1418
1094
|
style: { height: "794px" },
|
|
1419
1095
|
children: [
|
|
1420
|
-
/* @__PURE__ */
|
|
1096
|
+
/* @__PURE__ */ jsx("div", { className: "rounded-[12px] mb-4 bg-white border border-[#E4E5E6] px-[20px] py-[16px]", children: /* @__PURE__ */ jsxs("div", { className: "h-[40px] font-bold text-[16px] gap-10 flex items-center", children: [
|
|
1421
1097
|
/* @__PURE__ */ jsxs(
|
|
1422
1098
|
"button",
|
|
1423
1099
|
{
|
|
@@ -1473,7 +1149,7 @@ var RoomsList = ({
|
|
|
1473
1149
|
}
|
|
1474
1150
|
)
|
|
1475
1151
|
] })
|
|
1476
|
-
] }),
|
|
1152
|
+
] }) }),
|
|
1477
1153
|
/* @__PURE__ */ jsx(
|
|
1478
1154
|
"div",
|
|
1479
1155
|
{
|
|
@@ -1491,7 +1167,9 @@ var RoomsList = ({
|
|
|
1491
1167
|
state: item?.state,
|
|
1492
1168
|
zipCode: item?.zipCode,
|
|
1493
1169
|
euifyMakeModel: item?.euifyMakeModel || "",
|
|
1494
|
-
onSchedule
|
|
1170
|
+
onSchedule,
|
|
1171
|
+
onMouseEnter: () => setHoveredRoomId(item.id),
|
|
1172
|
+
onMouseLeave: () => setHoveredRoomId(null)
|
|
1495
1173
|
},
|
|
1496
1174
|
item.id
|
|
1497
1175
|
);
|
|
@@ -1518,9 +1196,8 @@ var RoomsList = ({
|
|
|
1518
1196
|
{
|
|
1519
1197
|
googleMapsApiKey,
|
|
1520
1198
|
locations: filteredStudioLocations,
|
|
1521
|
-
|
|
1522
|
-
|
|
1523
|
-
},
|
|
1199
|
+
hoveredLocationId: hoveredRoomId,
|
|
1200
|
+
onSchedule,
|
|
1524
1201
|
mapHeight: "794px"
|
|
1525
1202
|
}
|
|
1526
1203
|
) })
|
|
@@ -1657,11 +1334,39 @@ var DemoRoomApiClient = class {
|
|
|
1657
1334
|
});
|
|
1658
1335
|
}
|
|
1659
1336
|
/**
|
|
1660
|
-
* 根据 token
|
|
1661
|
-
* @param token
|
|
1337
|
+
* 根据 token 获取预约详情（支持多语言）
|
|
1338
|
+
* @param token 预约凭证 (cancel_token)
|
|
1339
|
+
* @param locale 语言偏好（可选，也可以通过 Accept-Language Header）
|
|
1340
|
+
*/
|
|
1341
|
+
async getBooking(token, locale) {
|
|
1342
|
+
const headers = {};
|
|
1343
|
+
if (locale) {
|
|
1344
|
+
headers["Accept-Language"] = locale;
|
|
1345
|
+
}
|
|
1346
|
+
const response = await this.request(
|
|
1347
|
+
`/api/v1/store/bookings/${token}`,
|
|
1348
|
+
{ headers }
|
|
1349
|
+
);
|
|
1350
|
+
return response.booking;
|
|
1351
|
+
}
|
|
1352
|
+
/**
|
|
1353
|
+
* 取消预约（支持多语言邮件通知）
|
|
1354
|
+
* @param token 预约凭证 (cancel_token)
|
|
1355
|
+
* @param locale 语言偏好（可选，用于邮件通知）
|
|
1662
1356
|
*/
|
|
1663
|
-
async
|
|
1664
|
-
|
|
1357
|
+
async cancelBooking(token, locale) {
|
|
1358
|
+
const headers = {};
|
|
1359
|
+
if (locale) {
|
|
1360
|
+
headers["Accept-Language"] = locale;
|
|
1361
|
+
}
|
|
1362
|
+
const response = await this.request(
|
|
1363
|
+
`/api/v1/store/bookings/${token}/cancel`,
|
|
1364
|
+
{
|
|
1365
|
+
method: "POST",
|
|
1366
|
+
headers
|
|
1367
|
+
}
|
|
1368
|
+
);
|
|
1369
|
+
return response.booking;
|
|
1665
1370
|
}
|
|
1666
1371
|
};
|
|
1667
1372
|
function createDemoRoomApi(config) {
|
|
@@ -1669,7 +1374,7 @@ function createDemoRoomApi(config) {
|
|
|
1669
1374
|
}
|
|
1670
1375
|
var DemoRoom = ({
|
|
1671
1376
|
className,
|
|
1672
|
-
layoutClassName
|
|
1377
|
+
layoutClassName,
|
|
1673
1378
|
googleMapsApiKey,
|
|
1674
1379
|
apiConfig,
|
|
1675
1380
|
teamCode,
|
|
@@ -1681,33 +1386,220 @@ var DemoRoom = ({
|
|
|
1681
1386
|
() => createDemoRoomApi(apiConfig),
|
|
1682
1387
|
[apiConfig]
|
|
1683
1388
|
);
|
|
1684
|
-
return /* @__PURE__ */
|
|
1685
|
-
|
|
1686
|
-
|
|
1687
|
-
|
|
1389
|
+
return /* @__PURE__ */ jsx("div", { className: cn(className), ...props, children: /* @__PURE__ */ jsx(
|
|
1390
|
+
RoomsList,
|
|
1391
|
+
{
|
|
1392
|
+
className: layoutClassName,
|
|
1393
|
+
googleMapsApiKey,
|
|
1394
|
+
apiClient,
|
|
1395
|
+
teamCode,
|
|
1396
|
+
brandWebsite,
|
|
1397
|
+
onSchedule
|
|
1398
|
+
}
|
|
1399
|
+
) });
|
|
1400
|
+
};
|
|
1401
|
+
DemoRoom.displayName = "DemoRoom";
|
|
1402
|
+
var EventCard = ({
|
|
1403
|
+
title,
|
|
1404
|
+
description,
|
|
1405
|
+
backgroundImage,
|
|
1406
|
+
aspectRatio,
|
|
1407
|
+
variant = "medium",
|
|
1408
|
+
buttons = [],
|
|
1409
|
+
subtitle,
|
|
1410
|
+
className,
|
|
1411
|
+
...props
|
|
1412
|
+
}) => {
|
|
1413
|
+
const isLarge = variant === "large";
|
|
1414
|
+
const isMedium = variant === "medium";
|
|
1415
|
+
const isProduct = variant === "product";
|
|
1416
|
+
return /* @__PURE__ */ jsx(
|
|
1417
|
+
"div",
|
|
1418
|
+
{
|
|
1419
|
+
className: cn("rounded-3xl overflow-hidden relative", className),
|
|
1420
|
+
style: {
|
|
1421
|
+
backgroundImage: backgroundImage ? `url(${backgroundImage})` : void 0,
|
|
1422
|
+
backgroundSize: "cover",
|
|
1423
|
+
backgroundPosition: "center",
|
|
1424
|
+
aspectRatio
|
|
1425
|
+
},
|
|
1426
|
+
...props,
|
|
1427
|
+
children: /* @__PURE__ */ jsxs(
|
|
1428
|
+
"div",
|
|
1429
|
+
{
|
|
1430
|
+
className: cn(
|
|
1431
|
+
"relative h-full flex flex-col",
|
|
1432
|
+
isLarge && "justify-center pl-8",
|
|
1433
|
+
!isLarge && "justify-end pl-8 pb-8"
|
|
1434
|
+
),
|
|
1435
|
+
children: [
|
|
1436
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
1437
|
+
/* @__PURE__ */ jsx(
|
|
1438
|
+
"h3",
|
|
1439
|
+
{
|
|
1440
|
+
className: cn(
|
|
1441
|
+
"font-semibold mb-3",
|
|
1442
|
+
isLarge && "text-3xl text-gray-900",
|
|
1443
|
+
isMedium && "text-2xl text-white",
|
|
1444
|
+
isProduct && "text-2xl text-gray-900"
|
|
1445
|
+
),
|
|
1446
|
+
children: title
|
|
1447
|
+
}
|
|
1448
|
+
),
|
|
1449
|
+
subtitle && isProduct && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600 mb-4", children: subtitle }),
|
|
1450
|
+
description && /* @__PURE__ */ jsx(
|
|
1451
|
+
"p",
|
|
1452
|
+
{
|
|
1453
|
+
className: cn(
|
|
1454
|
+
"text-sm leading-relaxed",
|
|
1455
|
+
isMedium && "text-white/90",
|
|
1456
|
+
(isLarge || isProduct) && "text-gray-600"
|
|
1457
|
+
),
|
|
1458
|
+
children: description
|
|
1459
|
+
}
|
|
1460
|
+
)
|
|
1461
|
+
] }),
|
|
1462
|
+
buttons.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex gap-3 mt-6", children: buttons.map((button, index) => /* @__PURE__ */ jsx(
|
|
1463
|
+
"button",
|
|
1464
|
+
{
|
|
1465
|
+
onClick: button.onClick,
|
|
1466
|
+
className: cn(
|
|
1467
|
+
"px-6 py-3 rounded-full font-medium text-sm transition-all duration-200",
|
|
1468
|
+
button.variant === "primary" && "bg-gray-900 text-white hover:bg-gray-800",
|
|
1469
|
+
button.variant === "secondary" && "bg-white text-gray-900 border border-gray-300 hover:bg-gray-50"
|
|
1470
|
+
),
|
|
1471
|
+
children: button.label
|
|
1472
|
+
},
|
|
1473
|
+
index
|
|
1474
|
+
)) })
|
|
1475
|
+
]
|
|
1476
|
+
}
|
|
1477
|
+
)
|
|
1478
|
+
}
|
|
1479
|
+
);
|
|
1480
|
+
};
|
|
1481
|
+
EventCard.displayName = "EventCard";
|
|
1482
|
+
var defaultEvents = [
|
|
1483
|
+
{
|
|
1484
|
+
variant: "large",
|
|
1485
|
+
title: "IFA 2025 Event Name Event Name",
|
|
1486
|
+
description: "Corem ipsum dolor sit amet, consectetur adipiscing elit.",
|
|
1487
|
+
backgroundImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
|
|
1488
|
+
buttons: [
|
|
1489
|
+
{
|
|
1490
|
+
label: "Schedule Now",
|
|
1491
|
+
variant: "primary"
|
|
1492
|
+
}
|
|
1493
|
+
],
|
|
1494
|
+
aspectRatio: "1664 / 640"
|
|
1495
|
+
},
|
|
1496
|
+
{
|
|
1497
|
+
variant: "medium",
|
|
1498
|
+
title: "Local Event Name Local Event Name Local Event Name",
|
|
1499
|
+
description: "Norem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.",
|
|
1500
|
+
backgroundImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
|
|
1501
|
+
buttons: [
|
|
1502
|
+
{
|
|
1503
|
+
label: "Schedule Now",
|
|
1504
|
+
variant: "primary"
|
|
1505
|
+
}
|
|
1506
|
+
],
|
|
1507
|
+
aspectRatio: "824 / 640"
|
|
1508
|
+
},
|
|
1509
|
+
{
|
|
1510
|
+
variant: "product",
|
|
1511
|
+
title: "Anker Prime",
|
|
1512
|
+
subtitle: "Anker Prime 240W GaN Desktop Charger (4 Ports) Feb. 5th - 16th",
|
|
1513
|
+
backgroundImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
|
|
1514
|
+
buttons: [
|
|
1515
|
+
{
|
|
1516
|
+
label: "Learn More",
|
|
1517
|
+
variant: "secondary"
|
|
1518
|
+
},
|
|
1519
|
+
{
|
|
1520
|
+
label: "Shop Now",
|
|
1521
|
+
variant: "primary"
|
|
1522
|
+
}
|
|
1523
|
+
],
|
|
1524
|
+
aspectRatio: "824 / 640"
|
|
1525
|
+
},
|
|
1526
|
+
{
|
|
1527
|
+
variant: "medium",
|
|
1528
|
+
title: "Local Event Name Local Event Name Local Event Name",
|
|
1529
|
+
description: "Norem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.",
|
|
1530
|
+
backgroundImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
|
|
1531
|
+
buttons: [
|
|
1532
|
+
{
|
|
1533
|
+
label: "Schedule Now",
|
|
1534
|
+
variant: "primary"
|
|
1535
|
+
}
|
|
1536
|
+
],
|
|
1537
|
+
aspectRatio: "824 / 640"
|
|
1538
|
+
},
|
|
1539
|
+
{
|
|
1540
|
+
variant: "product",
|
|
1541
|
+
title: "Anker Prime",
|
|
1542
|
+
subtitle: "Anker Prime 240W GaN Desktop Charger (4 Ports) Feb. 5th - 16th",
|
|
1543
|
+
backgroundImage: "https://cdn.shopify.com/s/files/1/0569/5147/2268/files/Component_3_1.png?v=1765274638",
|
|
1544
|
+
buttons: [
|
|
1545
|
+
{
|
|
1546
|
+
label: "Learn More",
|
|
1547
|
+
variant: "secondary"
|
|
1548
|
+
},
|
|
1688
1549
|
{
|
|
1689
|
-
|
|
1690
|
-
|
|
1550
|
+
label: "Shop Now",
|
|
1551
|
+
variant: "primary"
|
|
1691
1552
|
}
|
|
1692
|
-
|
|
1693
|
-
|
|
1694
|
-
|
|
1695
|
-
|
|
1696
|
-
|
|
1553
|
+
],
|
|
1554
|
+
aspectRatio: "824 / 640"
|
|
1555
|
+
}
|
|
1556
|
+
];
|
|
1557
|
+
var UpcomingEvents = ({
|
|
1558
|
+
title = "Upcoming Events",
|
|
1559
|
+
events = defaultEvents,
|
|
1560
|
+
showViewMore = true,
|
|
1561
|
+
onViewMore,
|
|
1562
|
+
className,
|
|
1563
|
+
...props
|
|
1564
|
+
}) => {
|
|
1565
|
+
return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), ...props, children: [
|
|
1566
|
+
/* @__PURE__ */ jsx(Title, { title }),
|
|
1567
|
+
/* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-6 mb-[64px]", children: events.map((event, index) => /* @__PURE__ */ jsx("div", { className: cn(index === 0 ? "col-span-2" : ""), children: /* @__PURE__ */ jsx(EventCard, { ...event }) }, index)) }),
|
|
1568
|
+
showViewMore && /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxs(
|
|
1569
|
+
"button",
|
|
1697
1570
|
{
|
|
1698
|
-
|
|
1699
|
-
|
|
1700
|
-
|
|
1701
|
-
|
|
1702
|
-
|
|
1703
|
-
|
|
1571
|
+
onClick: onViewMore,
|
|
1572
|
+
className: "inline-flex items-center gap-2 text-gray-700 hover:text-gray-900 transition-colors duration-200",
|
|
1573
|
+
children: [
|
|
1574
|
+
/* @__PURE__ */ jsx("span", { className: "text-base font-bold", children: "View More" }),
|
|
1575
|
+
/* @__PURE__ */ jsx(
|
|
1576
|
+
"svg",
|
|
1577
|
+
{
|
|
1578
|
+
width: "16",
|
|
1579
|
+
height: "16",
|
|
1580
|
+
viewBox: "0 0 16 16",
|
|
1581
|
+
fill: "none",
|
|
1582
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1583
|
+
className: "transition-transform duration-200 group-hover:translate-y-0.5",
|
|
1584
|
+
children: /* @__PURE__ */ jsx(
|
|
1585
|
+
"path",
|
|
1586
|
+
{
|
|
1587
|
+
d: "M8 3L8 13M8 13L12 9M8 13L4 9",
|
|
1588
|
+
stroke: "currentColor",
|
|
1589
|
+
strokeWidth: "2",
|
|
1590
|
+
strokeLinecap: "round",
|
|
1591
|
+
strokeLinejoin: "round"
|
|
1592
|
+
}
|
|
1593
|
+
)
|
|
1594
|
+
}
|
|
1595
|
+
)
|
|
1596
|
+
]
|
|
1704
1597
|
}
|
|
1705
|
-
)
|
|
1706
|
-
/* @__PURE__ */ jsx(EasySteps, { className: layoutClassName })
|
|
1598
|
+
) })
|
|
1707
1599
|
] });
|
|
1708
1600
|
};
|
|
1709
|
-
|
|
1601
|
+
UpcomingEvents.displayName = "UpcomingEvents";
|
|
1710
1602
|
|
|
1711
|
-
export { DemoRoom,
|
|
1603
|
+
export { DemoRoom, EventCard, StudioCard, StudioMap, UpcomingEvents };
|
|
1712
1604
|
//# sourceMappingURL=demo-room.mjs.map
|
|
1713
1605
|
//# sourceMappingURL=demo-room.mjs.map
|