@sonordev/site-kit 1.3.0 → 1.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (63) hide show
  1. package/dist/{chunk-SQSBAPWA.mjs → chunk-3QKTOTWS.mjs} +5 -5
  2. package/dist/chunk-3QKTOTWS.mjs.map +1 -0
  3. package/dist/{chunk-BFJDUTXK.js → chunk-5NXUENL3.js} +3 -3
  4. package/dist/{chunk-BFJDUTXK.js.map → chunk-5NXUENL3.js.map} +1 -1
  5. package/dist/{chunk-6TFGPXXK.mjs → chunk-5TTTX6NN.mjs} +2 -2
  6. package/dist/{chunk-6TFGPXXK.mjs.map → chunk-5TTTX6NN.mjs.map} +1 -1
  7. package/dist/{chunk-44GSXYHJ.mjs → chunk-J4K335PQ.mjs} +3 -3
  8. package/dist/{chunk-44GSXYHJ.mjs.map → chunk-J4K335PQ.mjs.map} +1 -1
  9. package/dist/chunk-JB6I5PYV.js +939 -0
  10. package/dist/chunk-JB6I5PYV.js.map +1 -0
  11. package/dist/{chunk-7ROZJDXE.js → chunk-JKPJ2QCC.js} +2 -2
  12. package/dist/{chunk-7ROZJDXE.js.map → chunk-JKPJ2QCC.js.map} +1 -1
  13. package/dist/{chunk-JMNSED4O.mjs → chunk-KMLCQYEV.mjs} +3 -3
  14. package/dist/{chunk-JMNSED4O.mjs.map → chunk-KMLCQYEV.mjs.map} +1 -1
  15. package/dist/{chunk-YIL674PV.js → chunk-LTTTIJPN.js} +5 -5
  16. package/dist/{chunk-YIL674PV.js.map → chunk-LTTTIJPN.js.map} +1 -1
  17. package/dist/{chunk-742WMKQC.js → chunk-NZHVGBAF.js} +2 -2
  18. package/dist/{chunk-742WMKQC.js.map → chunk-NZHVGBAF.js.map} +1 -1
  19. package/dist/{chunk-RMOL4TZ6.js → chunk-PJKHCYI5.js} +5 -5
  20. package/dist/chunk-PJKHCYI5.js.map +1 -0
  21. package/dist/{chunk-47Y3YSES.mjs → chunk-QBFTBORL.mjs} +2 -2
  22. package/dist/{chunk-47Y3YSES.mjs.map → chunk-QBFTBORL.mjs.map} +1 -1
  23. package/dist/{chunk-2RHO4KSK.mjs → chunk-RJTBSSZB.mjs} +4 -4
  24. package/dist/{chunk-2RHO4KSK.mjs.map → chunk-RJTBSSZB.mjs.map} +1 -1
  25. package/dist/{chunk-CFEOOJUT.js → chunk-RRBBMEDL.js} +7 -7
  26. package/dist/{chunk-CFEOOJUT.js.map → chunk-RRBBMEDL.js.map} +1 -1
  27. package/dist/chunk-W2TZYAUL.mjs +925 -0
  28. package/dist/chunk-W2TZYAUL.mjs.map +1 -0
  29. package/dist/cli/index.js +1 -1
  30. package/dist/cli/index.mjs +1 -1
  31. package/dist/index.js +60 -938
  32. package/dist/index.js.map +1 -1
  33. package/dist/index.mjs +3 -917
  34. package/dist/index.mjs.map +1 -1
  35. package/dist/layout/client.js +2 -2
  36. package/dist/layout/client.mjs +1 -1
  37. package/dist/layout/index.js +6 -6
  38. package/dist/layout/index.mjs +3 -3
  39. package/dist/llms/index.js +12 -12
  40. package/dist/llms/index.mjs +2 -2
  41. package/dist/seo/index.js +41 -53
  42. package/dist/seo/index.js.map +1 -1
  43. package/dist/seo/index.mjs +6 -18
  44. package/dist/seo/index.mjs.map +1 -1
  45. package/dist/seo/server.js +4 -4
  46. package/dist/seo/server.mjs +2 -2
  47. package/dist/{server-api-HTSLBT6F.mjs → server-api-FCTEQOTK.mjs} +3 -3
  48. package/dist/{server-api-HTSLBT6F.mjs.map → server-api-FCTEQOTK.mjs.map} +1 -1
  49. package/dist/{server-api-C5JXIROA.js → server-api-SYINXTN7.js} +21 -21
  50. package/dist/{server-api-C5JXIROA.js.map → server-api-SYINXTN7.js.map} +1 -1
  51. package/dist/setup/index.js +2 -2
  52. package/dist/setup/index.mjs +1 -1
  53. package/dist/setup/server.js +2 -2
  54. package/dist/setup/server.mjs +1 -1
  55. package/dist/sitemap/index.js +2 -2
  56. package/dist/sitemap/index.mjs +1 -1
  57. package/dist/sync/index.js +63 -0
  58. package/dist/sync/index.js.map +1 -0
  59. package/dist/sync/index.mjs +4 -0
  60. package/dist/sync/index.mjs.map +1 -0
  61. package/package.json +6 -1
  62. package/dist/chunk-RMOL4TZ6.js.map +0 -1
  63. package/dist/chunk-SQSBAPWA.mjs.map +0 -1
@@ -0,0 +1,925 @@
1
+ 'use client';
2
+ import { useState, useRef, useMemo, useEffect, useCallback } from 'react';
3
+ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
4
+
5
+ // src/sync/BookingWidget.tsx
6
+
7
+ // src/sync/api.ts
8
+ var DEFAULT_API_URL = "https://api.sonor.io";
9
+ function getApiConfig() {
10
+ const apiUrl = typeof window !== "undefined" ? window.__SITE_KIT_API_URL__ || DEFAULT_API_URL : DEFAULT_API_URL;
11
+ const apiKey = typeof window !== "undefined" ? window.__SITE_KIT_API_KEY__ : void 0;
12
+ return { apiUrl, apiKey };
13
+ }
14
+ function buildHeaders(apiKey, isPost = false) {
15
+ const headers = {};
16
+ if (isPost) headers["Content-Type"] = "application/json";
17
+ if (apiKey) headers["x-api-key"] = apiKey;
18
+ return headers;
19
+ }
20
+ async function fetchBookingTypes(orgSlug, apiUrl, apiKey) {
21
+ const cfg = getApiConfig();
22
+ const url = apiUrl || cfg.apiUrl;
23
+ const key = apiKey || cfg.apiKey;
24
+ const endpoint = key ? `${url}/sync/widget/types` : `${url}/sync/public/${orgSlug}/types`;
25
+ const response = await fetch(endpoint, { headers: buildHeaders(key) });
26
+ if (!response.ok) {
27
+ const msg = await response.json().catch(() => ({ message: response.statusText }));
28
+ const detail = msg && typeof msg.message === "string" ? msg.message : response.statusText;
29
+ throw new Error(`Failed to fetch booking types: ${response.status} ${detail}`);
30
+ }
31
+ const data = await response.json();
32
+ return data.types || [];
33
+ }
34
+ async function fetchBookingTypeDetails(typeSlug, orgSlug, apiUrl, apiKey) {
35
+ const cfg = getApiConfig();
36
+ const url = apiUrl || cfg.apiUrl;
37
+ const key = apiKey || cfg.apiKey;
38
+ const endpoint = key ? `${url}/sync/widget/types/${typeSlug}` : `${url}/sync/public/${orgSlug}/types/${typeSlug}`;
39
+ const response = await fetch(endpoint, { headers: buildHeaders(key) });
40
+ if (!response.ok) {
41
+ const msg = await response.json().catch(() => ({ message: response.statusText }));
42
+ const detail = msg && typeof msg.message === "string" ? msg.message : response.statusText;
43
+ throw new Error(`Failed to fetch booking type: ${response.status} ${detail}`);
44
+ }
45
+ return response.json();
46
+ }
47
+ async function fetchAvailability(typeSlug, date, orgSlug, apiUrl, apiKey, timezone, hostId) {
48
+ const cfg = getApiConfig();
49
+ const url = apiUrl || cfg.apiUrl;
50
+ const key = apiKey || cfg.apiKey;
51
+ const params = new URLSearchParams({ date });
52
+ if (timezone) params.append("timezone", timezone);
53
+ if (hostId) params.append("hostId", hostId);
54
+ const endpoint = key ? `${url}/sync/widget/availability/${typeSlug}?${params}` : `${url}/sync/public/${orgSlug}/availability/${typeSlug}?${params}`;
55
+ const response = await fetch(endpoint, { headers: buildHeaders(key) });
56
+ if (!response.ok) {
57
+ const msg = await response.json().catch(() => ({ message: response.statusText }));
58
+ let detail = msg && typeof msg.message === "string" ? String(msg.message).trim() : (response.statusText || "").trim();
59
+ if (detail === String(response.status) || /^\d+$/.test(detail)) detail = "";
60
+ const rest = detail ? `${response.status} ${detail}` : String(response.status);
61
+ const fallback = response.status === 404 && !detail ? "No times available. In the Portal, check Sync \u2192 Booking Types (Schedule a Tour) has a host assigned and the project API key is set for this site." : null;
62
+ throw new Error(fallback || `Failed to fetch availability: ${rest}`.trim());
63
+ }
64
+ const data = await response.json();
65
+ const raw = data.slots || [];
66
+ return raw.map((slot) => ({
67
+ start: slot.startTime ?? slot.start,
68
+ end: slot.endTime ?? slot.end,
69
+ hostId: slot.hostId,
70
+ available: slot.available !== false
71
+ }));
72
+ }
73
+ async function createSlotHold(holdData, apiUrl, apiKey) {
74
+ const cfg = getApiConfig();
75
+ const url = apiUrl || cfg.apiUrl;
76
+ const key = apiKey || cfg.apiKey;
77
+ const endpoint = key ? `${url}/sync/widget/hold` : `${url}/sync/public/hold`;
78
+ const response = await fetch(endpoint, {
79
+ method: "POST",
80
+ headers: buildHeaders(key, true),
81
+ body: JSON.stringify(holdData)
82
+ });
83
+ if (!response.ok) {
84
+ throw new Error(`Failed to hold slot: ${response.statusText}`);
85
+ }
86
+ return response.json();
87
+ }
88
+ async function releaseSlotHold(holdId, apiUrl, apiKey) {
89
+ const cfg = getApiConfig();
90
+ const url = apiUrl || cfg.apiUrl;
91
+ const key = apiKey || cfg.apiKey;
92
+ const endpoint = key ? `${url}/sync/widget/hold/${holdId}` : `${url}/sync/public/hold/${holdId}`;
93
+ await fetch(endpoint, {
94
+ method: "DELETE",
95
+ headers: buildHeaders(key)
96
+ });
97
+ }
98
+ async function createBooking(bookingData, apiUrl, apiKey) {
99
+ const cfg = getApiConfig();
100
+ const url = apiUrl || cfg.apiUrl;
101
+ const key = apiKey || cfg.apiKey;
102
+ const endpoint = key ? `${url}/sync/widget/booking` : `${url}/sync/public/booking`;
103
+ const response = await fetch(endpoint, {
104
+ method: "POST",
105
+ headers: buildHeaders(key, true),
106
+ body: JSON.stringify(bookingData)
107
+ });
108
+ if (!response.ok) {
109
+ const errorData = await response.json().catch(() => ({}));
110
+ throw new Error(errorData.message || `Failed to create booking: ${response.statusText}`);
111
+ }
112
+ return response.json();
113
+ }
114
+ async function fetchAvailableDates(typeSlug, startDate, endDate, orgSlug, apiUrl, apiKey, timezone) {
115
+ const availableDates = [];
116
+ const start = new Date(startDate);
117
+ const end = new Date(endDate);
118
+ const current = new Date(start);
119
+ while (current <= end) {
120
+ const dateStr = current.toISOString().split("T")[0];
121
+ try {
122
+ const slots = await fetchAvailability(typeSlug, dateStr, orgSlug, apiUrl, apiKey, timezone);
123
+ if (slots.some((s) => s.available)) {
124
+ availableDates.push(dateStr);
125
+ }
126
+ } catch {
127
+ }
128
+ current.setDate(current.getDate() + 1);
129
+ }
130
+ return availableDates;
131
+ }
132
+ function detectTimezone() {
133
+ try {
134
+ return Intl.DateTimeFormat().resolvedOptions().timeZone;
135
+ } catch {
136
+ return "America/New_York";
137
+ }
138
+ }
139
+ function formatTime(isoString, timezone) {
140
+ const date = new Date(isoString);
141
+ return date.toLocaleTimeString("en-US", {
142
+ hour: "numeric",
143
+ minute: "2-digit",
144
+ hour12: true,
145
+ timeZone: timezone
146
+ });
147
+ }
148
+ function formatDate(isoString, timezone) {
149
+ const date = new Date(isoString);
150
+ return date.toLocaleDateString("en-US", {
151
+ weekday: "long",
152
+ month: "long",
153
+ day: "numeric",
154
+ year: "numeric",
155
+ timeZone: timezone
156
+ });
157
+ }
158
+ function formatDuration(minutes) {
159
+ if (minutes < 60) {
160
+ return `${minutes} min`;
161
+ }
162
+ const hours = Math.floor(minutes / 60);
163
+ const mins = minutes % 60;
164
+ if (mins === 0) {
165
+ return `${hours} hour${hours > 1 ? "s" : ""}`;
166
+ }
167
+ return `${hours}h ${mins}m`;
168
+ }
169
+ var DEFAULT_API_URL2 = "https://api.sonor.io";
170
+ var DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
171
+ var MONTHS = [
172
+ "January",
173
+ "February",
174
+ "March",
175
+ "April",
176
+ "May",
177
+ "June",
178
+ "July",
179
+ "August",
180
+ "September",
181
+ "October",
182
+ "November",
183
+ "December"
184
+ ];
185
+ function isSameDay(a, b) {
186
+ return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
187
+ }
188
+ function isBeforeDay(a, b) {
189
+ const ac = new Date(a.getFullYear(), a.getMonth(), a.getDate());
190
+ const bc = new Date(b.getFullYear(), b.getMonth(), b.getDate());
191
+ return ac < bc;
192
+ }
193
+ function calendarDays(year, month) {
194
+ const first = new Date(year, month, 1);
195
+ const last = new Date(year, month + 1, 0);
196
+ const cells = [];
197
+ for (let i = 0; i < first.getDay(); i++) cells.push(null);
198
+ for (let d = 1; d <= last.getDate(); d++) cells.push(new Date(year, month, d));
199
+ return cells;
200
+ }
201
+ function ChevronLeft() {
202
+ return /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M12.5 15L7.5 10L12.5 5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
203
+ }
204
+ function ChevronRight() {
205
+ return /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M7.5 5L12.5 10L7.5 15", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
206
+ }
207
+ function ClockIcon() {
208
+ return /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
209
+ /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeWidth: "1.2" }),
210
+ /* @__PURE__ */ jsx("path", { d: "M8 4.5V8L10 10", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" })
211
+ ] });
212
+ }
213
+ function GlobeIcon() {
214
+ return /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
215
+ /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeWidth: "1.2" }),
216
+ /* @__PURE__ */ jsx("path", { d: "M1.5 8H14.5", stroke: "currentColor", strokeWidth: "1.2" }),
217
+ /* @__PURE__ */ jsx("path", { d: "M8 1.5C9.66 3.34 10.61 5.62 10.61 8C10.61 10.38 9.66 12.66 8 14.5C6.34 12.66 5.39 10.38 5.39 8C5.39 5.62 6.34 3.34 8 1.5Z", stroke: "currentColor", strokeWidth: "1.2" })
218
+ ] });
219
+ }
220
+ function CheckCircleIcon() {
221
+ return /* @__PURE__ */ jsxs("svg", { width: "56", height: "56", viewBox: "0 0 56 56", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
222
+ /* @__PURE__ */ jsx("circle", { cx: "28", cy: "28", r: "28", fill: "var(--bw-primary)" }),
223
+ /* @__PURE__ */ jsx("path", { d: "M18 28.5L24.5 35L38 21.5", stroke: "white", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" })
224
+ ] });
225
+ }
226
+ function CalendarPlusIcon() {
227
+ return /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
228
+ /* @__PURE__ */ jsx("rect", { x: "1.5", y: "2.5", width: "13", height: "12", rx: "1.5", stroke: "currentColor", strokeWidth: "1.2" }),
229
+ /* @__PURE__ */ jsx("path", { d: "M1.5 6.5H14.5", stroke: "currentColor", strokeWidth: "1.2" }),
230
+ /* @__PURE__ */ jsx("path", { d: "M5 1V4M11 1V4", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" }),
231
+ /* @__PURE__ */ jsx("path", { d: "M8 9V12M6.5 10.5H9.5", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" })
232
+ ] });
233
+ }
234
+ function ArrowLeftIcon() {
235
+ return /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M10 3L5 8L10 13", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
236
+ }
237
+ function SpinnerIcon() {
238
+ return /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "bw-spinner", children: [
239
+ /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeDasharray: "50.265", strokeDashoffset: "25", opacity: "0.3" }),
240
+ /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeDasharray: "50.265", strokeDashoffset: "37.7" })
241
+ ] });
242
+ }
243
+ function BookingWidget({
244
+ orgSlug,
245
+ apiKey: propApiKey,
246
+ apiUrl: propApiUrl,
247
+ bookingTypeSlug,
248
+ timezone: propTimezone,
249
+ className = "",
250
+ daysToShow = 60,
251
+ onBookingComplete,
252
+ onError,
253
+ hideTypeSelector = false,
254
+ styles = {}
255
+ }) {
256
+ const apiKey = propApiKey || (typeof window !== "undefined" ? window.__SITE_KIT_API_KEY__ : void 0);
257
+ const apiUrl = propApiUrl || (typeof window !== "undefined" ? window.__SITE_KIT_API_URL__ : void 0) || DEFAULT_API_URL2;
258
+ const [step, setStep] = useState(bookingTypeSlug ? "datetime" : "type");
259
+ const [loading, setLoading] = useState(false);
260
+ const [slotsLoading, setSlotsLoading] = useState(false);
261
+ const [error, setError] = useState(null);
262
+ const [bookingTypes, setBookingTypes] = useState([]);
263
+ const [selectedType, setSelectedType] = useState(null);
264
+ const [viewMonth, setViewMonth] = useState(() => /* @__PURE__ */ new Date());
265
+ const [selectedDate, setSelectedDate] = useState(null);
266
+ const [slots, setSlots] = useState([]);
267
+ const [selectedSlot, setSelectedSlot] = useState(null);
268
+ const [confirmedSlot, setConfirmedSlot] = useState(false);
269
+ const [hold, setHold] = useState(null);
270
+ const [guestInfo, setGuestInfo] = useState({ name: "", email: "" });
271
+ const [bookingResult, setBookingResult] = useState(null);
272
+ const [submitting, setSubmitting] = useState(false);
273
+ const slotsRef = useRef(null);
274
+ const today = useMemo(() => {
275
+ const d = /* @__PURE__ */ new Date();
276
+ d.setHours(0, 0, 0, 0);
277
+ return d;
278
+ }, []);
279
+ const timezone = useMemo(() => propTimezone || detectTimezone(), [propTimezone]);
280
+ const shortTz = useMemo(() => {
281
+ try {
282
+ const parts = Intl.DateTimeFormat("en-US", { timeZone: timezone, timeZoneName: "short" }).formatToParts(/* @__PURE__ */ new Date());
283
+ return parts.find((p) => p.type === "timeZoneName")?.value || timezone;
284
+ } catch {
285
+ return timezone;
286
+ }
287
+ }, [timezone]);
288
+ const days = useMemo(() => calendarDays(viewMonth.getFullYear(), viewMonth.getMonth()), [viewMonth]);
289
+ const maxDate = useMemo(() => {
290
+ const d = new Date(today);
291
+ d.setDate(d.getDate() + daysToShow);
292
+ return d;
293
+ }, [today, daysToShow]);
294
+ useEffect(() => {
295
+ if (bookingTypeSlug) {
296
+ setLoading(true);
297
+ fetchBookingTypeDetails(bookingTypeSlug, orgSlug, apiUrl, apiKey).then((type) => {
298
+ setSelectedType(type);
299
+ setStep("datetime");
300
+ }).catch((err) => {
301
+ setError(err.message);
302
+ onError?.(err);
303
+ }).finally(() => setLoading(false));
304
+ } else {
305
+ setLoading(true);
306
+ fetchBookingTypes(orgSlug, apiUrl, apiKey).then((types) => setBookingTypes(types.filter((t) => t.is_active))).catch((err) => {
307
+ setError(err.message);
308
+ onError?.(err);
309
+ }).finally(() => setLoading(false));
310
+ }
311
+ }, [orgSlug, apiKey, bookingTypeSlug, apiUrl, onError]);
312
+ useEffect(() => {
313
+ if (!selectedDate || !selectedType) return;
314
+ const dateStr = selectedDate.toISOString().split("T")[0];
315
+ setSlotsLoading(true);
316
+ setSlots([]);
317
+ setSelectedSlot(null);
318
+ setConfirmedSlot(false);
319
+ fetchAvailability(selectedType.slug, dateStr, orgSlug, apiUrl, apiKey, timezone).then((s) => setSlots(s.filter((slot) => slot.available))).catch((err) => {
320
+ setError(err.message);
321
+ onError?.(err);
322
+ }).finally(() => setSlotsLoading(false));
323
+ }, [selectedDate, selectedType, orgSlug, apiKey, apiUrl, timezone, onError]);
324
+ const handleSlotSelect = useCallback((slot) => {
325
+ setSelectedSlot(slot);
326
+ setConfirmedSlot(false);
327
+ }, []);
328
+ const handleSlotConfirm = useCallback(async () => {
329
+ if (!selectedType || !selectedSlot) return;
330
+ if (hold) await releaseSlotHold(hold.holdId, apiUrl, apiKey).catch(() => {
331
+ });
332
+ setLoading(true);
333
+ try {
334
+ const newHold = await createSlotHold(
335
+ {
336
+ bookingType: selectedType.slug,
337
+ slotStart: selectedSlot.start,
338
+ slotEnd: selectedSlot.end,
339
+ hostId: selectedSlot.hostId || "",
340
+ sessionId: `bw-${Date.now()}`
341
+ },
342
+ apiUrl,
343
+ apiKey
344
+ );
345
+ setHold(newHold);
346
+ setConfirmedSlot(true);
347
+ setStep("form");
348
+ } catch (err) {
349
+ setError(err.message);
350
+ onError?.(err);
351
+ } finally {
352
+ setLoading(false);
353
+ }
354
+ }, [selectedType, selectedSlot, hold, timezone, apiUrl, apiKey, onError]);
355
+ const handleBookingSubmit = useCallback(async (e) => {
356
+ e.preventDefault();
357
+ if (!selectedType || !selectedSlot) return;
358
+ setSubmitting(true);
359
+ setError(null);
360
+ try {
361
+ const result = await createBooking(
362
+ {
363
+ bookingType: selectedType.slug,
364
+ scheduledAt: selectedSlot.start,
365
+ hostId: selectedSlot.hostId || "",
366
+ name: guestInfo.name,
367
+ email: guestInfo.email,
368
+ phone: guestInfo.phone,
369
+ message: guestInfo.notes,
370
+ source: "main-site",
371
+ timezone,
372
+ holdId: hold?.holdId,
373
+ sessionId: `bw-${Date.now()}`,
374
+ sourceUrl: typeof window !== "undefined" ? window.location.href : void 0
375
+ },
376
+ apiUrl,
377
+ apiKey
378
+ );
379
+ setBookingResult(result);
380
+ setStep("success");
381
+ onBookingComplete?.(result);
382
+ } catch (err) {
383
+ setError(err.message);
384
+ onError?.(err);
385
+ } finally {
386
+ setSubmitting(false);
387
+ }
388
+ }, [selectedType, selectedSlot, guestInfo, timezone, hold, apiUrl, apiKey, onBookingComplete, onError]);
389
+ useEffect(() => {
390
+ return () => {
391
+ if (hold) releaseSlotHold(hold.holdId, apiUrl, apiKey).catch(() => {
392
+ });
393
+ };
394
+ }, [hold, apiUrl, apiKey]);
395
+ const canGoPrev = viewMonth.getFullYear() > today.getFullYear() || viewMonth.getMonth() > today.getMonth();
396
+ const canGoNext = viewMonth < maxDate;
397
+ const goMonth = (dir) => {
398
+ setViewMonth((prev) => new Date(prev.getFullYear(), prev.getMonth() + dir, 1));
399
+ };
400
+ const groupedSlots = useMemo(() => {
401
+ const morning = [];
402
+ const afternoon = [];
403
+ const evening = [];
404
+ for (const s of slots) {
405
+ const h = new Date(s.start).getHours();
406
+ if (h < 12) morning.push(s);
407
+ else if (h < 17) afternoon.push(s);
408
+ else evening.push(s);
409
+ }
410
+ return { morning, afternoon, evening };
411
+ }, [slots]);
412
+ const cssVars = {
413
+ "--bw-primary": styles.primaryColor || "#0069ff",
414
+ "--bw-primary-light": styles.primaryColor ? `color-mix(in srgb, ${styles.primaryColor} 12%, white)` : "#e8f1ff",
415
+ "--bw-primary-hover": styles.primaryColor ? `color-mix(in srgb, ${styles.primaryColor} 90%, black)` : "#0055d4",
416
+ "--bw-radius": styles.borderRadius || "8px",
417
+ "--bw-font": styles.fontFamily || "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
418
+ };
419
+ return /* @__PURE__ */ jsxs("div", { className: `bw-root ${className}`, style: cssVars, children: [
420
+ error && /* @__PURE__ */ jsxs("div", { className: "bw-error", role: "alert", children: [
421
+ /* @__PURE__ */ jsx("span", { children: error }),
422
+ /* @__PURE__ */ jsx("button", { onClick: () => setError(null), "aria-label": "Dismiss error", children: "\xD7" })
423
+ ] }),
424
+ step === "type" && !hideTypeSelector && /* @__PURE__ */ jsxs("div", { className: "bw-step bw-fade-in", children: [
425
+ /* @__PURE__ */ jsx("h2", { className: "bw-heading", children: "Select a Service" }),
426
+ loading ? /* @__PURE__ */ jsxs("div", { className: "bw-loading", children: [
427
+ /* @__PURE__ */ jsx(SpinnerIcon, {}),
428
+ " Loading services..."
429
+ ] }) : /* @__PURE__ */ jsx("div", { className: "bw-type-list", children: bookingTypes.map((type) => /* @__PURE__ */ jsxs(
430
+ "button",
431
+ {
432
+ className: "bw-type-card",
433
+ onClick: () => {
434
+ setSelectedType(type);
435
+ setStep("datetime");
436
+ },
437
+ children: [
438
+ /* @__PURE__ */ jsx("span", { className: "bw-type-name", children: type.name }),
439
+ type.description && /* @__PURE__ */ jsx("span", { className: "bw-type-desc", children: type.description }),
440
+ /* @__PURE__ */ jsxs("span", { className: "bw-type-meta", children: [
441
+ /* @__PURE__ */ jsx(ClockIcon, {}),
442
+ " ",
443
+ formatDuration(type.duration_minutes),
444
+ type.price_cents ? ` \xB7 $${(type.price_cents / 100).toFixed(2)}` : " \xB7 Free"
445
+ ] })
446
+ ]
447
+ },
448
+ type.id
449
+ )) })
450
+ ] }),
451
+ step === "datetime" && selectedType && /* @__PURE__ */ jsxs("div", { className: "bw-step bw-fade-in", children: [
452
+ /* @__PURE__ */ jsxs("div", { className: "bw-info-header", children: [
453
+ !bookingTypeSlug && /* @__PURE__ */ jsx("button", { className: "bw-back", onClick: () => {
454
+ setSelectedType(null);
455
+ setStep("type");
456
+ }, children: /* @__PURE__ */ jsx(ArrowLeftIcon, {}) }),
457
+ /* @__PURE__ */ jsxs("div", { children: [
458
+ /* @__PURE__ */ jsx("h2", { className: "bw-heading", children: selectedType.name }),
459
+ /* @__PURE__ */ jsxs("div", { className: "bw-meta-row", children: [
460
+ /* @__PURE__ */ jsxs("span", { className: "bw-badge", children: [
461
+ /* @__PURE__ */ jsx(ClockIcon, {}),
462
+ " ",
463
+ formatDuration(selectedType.duration_minutes)
464
+ ] }),
465
+ /* @__PURE__ */ jsxs("span", { className: "bw-badge", children: [
466
+ /* @__PURE__ */ jsx(GlobeIcon, {}),
467
+ " ",
468
+ shortTz
469
+ ] })
470
+ ] })
471
+ ] })
472
+ ] }),
473
+ /* @__PURE__ */ jsxs("div", { className: "bw-datetime-layout", children: [
474
+ /* @__PURE__ */ jsxs("div", { className: "bw-calendar", children: [
475
+ /* @__PURE__ */ jsxs("div", { className: "bw-cal-header", children: [
476
+ /* @__PURE__ */ jsx("button", { className: "bw-cal-nav", onClick: () => goMonth(-1), disabled: !canGoPrev, "aria-label": "Previous month", children: /* @__PURE__ */ jsx(ChevronLeft, {}) }),
477
+ /* @__PURE__ */ jsxs("span", { className: "bw-cal-title", children: [
478
+ MONTHS[viewMonth.getMonth()],
479
+ " ",
480
+ viewMonth.getFullYear()
481
+ ] }),
482
+ /* @__PURE__ */ jsx("button", { className: "bw-cal-nav", onClick: () => goMonth(1), disabled: !canGoNext, "aria-label": "Next month", children: /* @__PURE__ */ jsx(ChevronRight, {}) })
483
+ ] }),
484
+ /* @__PURE__ */ jsx("div", { className: "bw-cal-weekdays", children: DAYS.map((d) => /* @__PURE__ */ jsx("span", { className: "bw-cal-wd", children: d }, d)) }),
485
+ /* @__PURE__ */ jsx("div", { className: "bw-cal-grid", children: days.map((date, i) => {
486
+ if (!date) return /* @__PURE__ */ jsx("span", { className: "bw-cal-empty" }, `e-${i}`);
487
+ const past = isBeforeDay(date, today);
488
+ const future = date > maxDate;
489
+ const disabled = past || future;
490
+ const sel = selectedDate && isSameDay(date, selectedDate);
491
+ const isToday = isSameDay(date, today);
492
+ return /* @__PURE__ */ jsx(
493
+ "button",
494
+ {
495
+ className: `bw-cal-day${sel ? " selected" : ""}${isToday ? " today" : ""}${disabled ? " disabled" : ""}`,
496
+ onClick: () => !disabled && setSelectedDate(date),
497
+ disabled,
498
+ "aria-label": date.toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric" }),
499
+ "aria-pressed": sel || void 0,
500
+ children: date.getDate()
501
+ },
502
+ date.toISOString()
503
+ );
504
+ }) })
505
+ ] }),
506
+ /* @__PURE__ */ jsx("div", { className: `bw-times${selectedDate ? " visible" : ""}`, ref: slotsRef, children: !selectedDate ? /* @__PURE__ */ jsxs("div", { className: "bw-times-placeholder", children: [
507
+ /* @__PURE__ */ jsx(CalendarPlusIcon, {}),
508
+ /* @__PURE__ */ jsx("span", { children: "Select a date to view available times" })
509
+ ] }) : slotsLoading ? /* @__PURE__ */ jsxs("div", { className: "bw-loading", children: [
510
+ /* @__PURE__ */ jsx(SpinnerIcon, {}),
511
+ " Loading times..."
512
+ ] }) : slots.length === 0 ? /* @__PURE__ */ jsx("div", { className: "bw-times-empty", children: "No available times on this date. Try another day." }) : /* @__PURE__ */ jsxs("div", { className: "bw-times-scroll", children: [
513
+ /* @__PURE__ */ jsx("p", { className: "bw-times-date", children: selectedDate.toLocaleDateString("en-US", { weekday: "long", month: "short", day: "numeric" }) }),
514
+ groupedSlots.morning.length > 0 && /* @__PURE__ */ jsxs("div", { className: "bw-time-group", children: [
515
+ /* @__PURE__ */ jsx("span", { className: "bw-time-label", children: "Morning" }),
516
+ groupedSlots.morning.map((slot) => /* @__PURE__ */ jsx(TimeButton, { slot, selected: selectedSlot?.start === slot.start, confirmed: confirmedSlot && selectedSlot?.start === slot.start, onClick: () => handleSlotSelect(slot), onConfirm: handleSlotConfirm, timezone, loading }, slot.start))
517
+ ] }),
518
+ groupedSlots.afternoon.length > 0 && /* @__PURE__ */ jsxs("div", { className: "bw-time-group", children: [
519
+ /* @__PURE__ */ jsx("span", { className: "bw-time-label", children: "Afternoon" }),
520
+ groupedSlots.afternoon.map((slot) => /* @__PURE__ */ jsx(TimeButton, { slot, selected: selectedSlot?.start === slot.start, confirmed: confirmedSlot && selectedSlot?.start === slot.start, onClick: () => handleSlotSelect(slot), onConfirm: handleSlotConfirm, timezone, loading }, slot.start))
521
+ ] }),
522
+ groupedSlots.evening.length > 0 && /* @__PURE__ */ jsxs("div", { className: "bw-time-group", children: [
523
+ /* @__PURE__ */ jsx("span", { className: "bw-time-label", children: "Evening" }),
524
+ groupedSlots.evening.map((slot) => /* @__PURE__ */ jsx(TimeButton, { slot, selected: selectedSlot?.start === slot.start, confirmed: confirmedSlot && selectedSlot?.start === slot.start, onClick: () => handleSlotSelect(slot), onConfirm: handleSlotConfirm, timezone, loading }, slot.start))
525
+ ] }),
526
+ (groupedSlots.afternoon.length > 0 || groupedSlots.evening.length > 0) && /* @__PURE__ */ jsx("p", { className: "bw-times-scroll-hint", children: "Scroll for more times" })
527
+ ] }) })
528
+ ] })
529
+ ] }),
530
+ step === "form" && selectedType && selectedSlot && /* @__PURE__ */ jsxs("div", { className: "bw-step bw-fade-in", children: [
531
+ /* @__PURE__ */ jsxs("div", { className: "bw-info-header", children: [
532
+ /* @__PURE__ */ jsx("button", { className: "bw-back", onClick: () => setStep("datetime"), children: /* @__PURE__ */ jsx(ArrowLeftIcon, {}) }),
533
+ /* @__PURE__ */ jsxs("div", { children: [
534
+ /* @__PURE__ */ jsx("h2", { className: "bw-heading", children: "Your Details" }),
535
+ /* @__PURE__ */ jsxs("div", { className: "bw-meta-row", children: [
536
+ /* @__PURE__ */ jsxs("span", { className: "bw-badge", children: [
537
+ /* @__PURE__ */ jsx(ClockIcon, {}),
538
+ " ",
539
+ formatDuration(selectedType.duration_minutes)
540
+ ] }),
541
+ /* @__PURE__ */ jsxs("span", { className: "bw-badge-accent", children: [
542
+ formatDate(selectedSlot.start, timezone),
543
+ " \xB7 ",
544
+ formatTime(selectedSlot.start, timezone)
545
+ ] })
546
+ ] })
547
+ ] })
548
+ ] }),
549
+ hold && /* @__PURE__ */ jsxs("div", { className: "bw-hold-notice", children: [
550
+ /* @__PURE__ */ jsx(SpinnerIcon, {}),
551
+ " Slot held for you \u2014 complete your details to confirm."
552
+ ] }),
553
+ /* @__PURE__ */ jsxs("form", { onSubmit: handleBookingSubmit, className: "bw-form", children: [
554
+ /* @__PURE__ */ jsxs("div", { className: "bw-field", children: [
555
+ /* @__PURE__ */ jsxs("label", { htmlFor: "bw-name", children: [
556
+ "Name ",
557
+ /* @__PURE__ */ jsx("span", { className: "bw-req", children: "*" })
558
+ ] }),
559
+ /* @__PURE__ */ jsx(
560
+ "input",
561
+ {
562
+ id: "bw-name",
563
+ type: "text",
564
+ required: true,
565
+ value: guestInfo.name,
566
+ onChange: (e) => setGuestInfo((p) => ({ ...p, name: e.target.value })),
567
+ placeholder: "Jane Smith",
568
+ autoComplete: "name"
569
+ }
570
+ )
571
+ ] }),
572
+ /* @__PURE__ */ jsxs("div", { className: "bw-field", children: [
573
+ /* @__PURE__ */ jsxs("label", { htmlFor: "bw-email", children: [
574
+ "Email ",
575
+ /* @__PURE__ */ jsx("span", { className: "bw-req", children: "*" })
576
+ ] }),
577
+ /* @__PURE__ */ jsx(
578
+ "input",
579
+ {
580
+ id: "bw-email",
581
+ type: "email",
582
+ required: true,
583
+ value: guestInfo.email,
584
+ onChange: (e) => setGuestInfo((p) => ({ ...p, email: e.target.value })),
585
+ placeholder: "jane@example.com",
586
+ autoComplete: "email"
587
+ }
588
+ )
589
+ ] }),
590
+ /* @__PURE__ */ jsxs("div", { className: "bw-field", children: [
591
+ /* @__PURE__ */ jsx("label", { htmlFor: "bw-phone", children: "Phone" }),
592
+ /* @__PURE__ */ jsx(
593
+ "input",
594
+ {
595
+ id: "bw-phone",
596
+ type: "tel",
597
+ value: guestInfo.phone || "",
598
+ onChange: (e) => setGuestInfo((p) => ({ ...p, phone: e.target.value })),
599
+ placeholder: "(555) 123-4567",
600
+ autoComplete: "tel"
601
+ }
602
+ )
603
+ ] }),
604
+ /* @__PURE__ */ jsxs("div", { className: "bw-field", children: [
605
+ /* @__PURE__ */ jsx("label", { htmlFor: "bw-notes", children: "Notes" }),
606
+ /* @__PURE__ */ jsx(
607
+ "textarea",
608
+ {
609
+ id: "bw-notes",
610
+ value: guestInfo.notes || "",
611
+ onChange: (e) => setGuestInfo((p) => ({ ...p, notes: e.target.value })),
612
+ placeholder: "Anything you'd like us to know...",
613
+ rows: 3
614
+ }
615
+ )
616
+ ] }),
617
+ /* @__PURE__ */ jsx("button", { type: "submit", className: "bw-submit", disabled: submitting || !guestInfo.name || !guestInfo.email, children: submitting ? /* @__PURE__ */ jsxs(Fragment, { children: [
618
+ /* @__PURE__ */ jsx(SpinnerIcon, {}),
619
+ " Confirming..."
620
+ ] }) : "Confirm Booking" })
621
+ ] })
622
+ ] }),
623
+ step === "success" && bookingResult && /* @__PURE__ */ jsxs("div", { className: "bw-step bw-fade-in bw-success", children: [
624
+ /* @__PURE__ */ jsx("div", { className: "bw-success-icon", children: /* @__PURE__ */ jsx(CheckCircleIcon, {}) }),
625
+ /* @__PURE__ */ jsx("h2", { className: "bw-heading", children: "You\u2019re Booked!" }),
626
+ /* @__PURE__ */ jsxs("div", { className: "bw-details-card", children: [
627
+ /* @__PURE__ */ jsxs("div", { className: "bw-detail-row", children: [
628
+ /* @__PURE__ */ jsx("span", { className: "bw-detail-label", children: "When" }),
629
+ /* @__PURE__ */ jsxs("span", { className: "bw-detail-value", children: [
630
+ formatDate(bookingResult.booking.scheduledAt, timezone),
631
+ /* @__PURE__ */ jsx("br", {}),
632
+ formatTime(bookingResult.booking.scheduledAt, timezone),
633
+ " (",
634
+ shortTz,
635
+ ")"
636
+ ] })
637
+ ] }),
638
+ /* @__PURE__ */ jsxs("div", { className: "bw-detail-row", children: [
639
+ /* @__PURE__ */ jsx("span", { className: "bw-detail-label", children: "Duration" }),
640
+ /* @__PURE__ */ jsx("span", { className: "bw-detail-value", children: formatDuration(bookingResult.booking.durationMinutes) })
641
+ ] }),
642
+ bookingResult.booking.hostName && /* @__PURE__ */ jsxs("div", { className: "bw-detail-row", children: [
643
+ /* @__PURE__ */ jsx("span", { className: "bw-detail-label", children: "With" }),
644
+ /* @__PURE__ */ jsx("span", { className: "bw-detail-value", children: bookingResult.booking.hostName })
645
+ ] })
646
+ ] }),
647
+ /* @__PURE__ */ jsx("p", { className: "bw-cal-links-label", children: "Add to your calendar" }),
648
+ /* @__PURE__ */ jsxs("div", { className: "bw-cal-links", children: [
649
+ /* @__PURE__ */ jsxs("a", { href: bookingResult.calendarLinks.google, target: "_blank", rel: "noopener noreferrer", className: "bw-cal-link", children: [
650
+ /* @__PURE__ */ jsx(CalendarPlusIcon, {}),
651
+ " Google"
652
+ ] }),
653
+ /* @__PURE__ */ jsxs("a", { href: bookingResult.calendarLinks.outlook, target: "_blank", rel: "noopener noreferrer", className: "bw-cal-link", children: [
654
+ /* @__PURE__ */ jsx(CalendarPlusIcon, {}),
655
+ " Outlook"
656
+ ] }),
657
+ /* @__PURE__ */ jsxs("a", { href: bookingResult.calendarLinks.ics, download: true, className: "bw-cal-link", children: [
658
+ /* @__PURE__ */ jsx(CalendarPlusIcon, {}),
659
+ " iCal"
660
+ ] })
661
+ ] }),
662
+ /* @__PURE__ */ jsxs("p", { className: "bw-email-notice", children: [
663
+ "If your host uses Google Calendar, a calendar invite will be sent to ",
664
+ /* @__PURE__ */ jsx("strong", { children: guestInfo.email }),
665
+ "."
666
+ ] })
667
+ ] }),
668
+ loading && step === "datetime" && !selectedType && /* @__PURE__ */ jsxs("div", { className: "bw-loading", children: [
669
+ /* @__PURE__ */ jsx(SpinnerIcon, {}),
670
+ " Loading..."
671
+ ] }),
672
+ /* @__PURE__ */ jsx("style", { children: WIDGET_CSS })
673
+ ] });
674
+ }
675
+ function TimeButton({
676
+ slot,
677
+ selected,
678
+ confirmed,
679
+ onClick,
680
+ onConfirm,
681
+ timezone,
682
+ loading
683
+ }) {
684
+ if (selected && !confirmed) {
685
+ return /* @__PURE__ */ jsxs("div", { className: "bw-time-btn-wrap selected", children: [
686
+ /* @__PURE__ */ jsx("span", { className: "bw-time-text", children: formatTime(slot.start, timezone) }),
687
+ /* @__PURE__ */ jsx("button", { className: "bw-time-confirm", onClick: onConfirm, disabled: loading, children: loading ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : "Confirm" })
688
+ ] });
689
+ }
690
+ return /* @__PURE__ */ jsx("button", { className: `bw-time-btn${selected ? " selected" : ""}`, onClick, disabled: loading, children: formatTime(slot.start, timezone) });
691
+ }
692
+ var WIDGET_CSS = `
693
+ /* \u2500\u2500 Base \u2500\u2500 */
694
+ .bw-root {
695
+ font-family: var(--bw-font);
696
+ color: #1a1a1a;
697
+ line-height: 1.5;
698
+ -webkit-font-smoothing: antialiased;
699
+ box-sizing: border-box;
700
+ }
701
+ .bw-root *, .bw-root *::before, .bw-root *::after { box-sizing: border-box; }
702
+
703
+ /* \u2500\u2500 Animation \u2500\u2500 */
704
+ @keyframes bw-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
705
+ @keyframes bw-spin { to { transform: rotate(360deg); } }
706
+ .bw-fade-in { animation: bw-fade-in 0.25s ease-out; }
707
+ .bw-spinner { animation: bw-spin 0.8s linear infinite; }
708
+
709
+ /* \u2500\u2500 Error \u2500\u2500 */
710
+ .bw-error {
711
+ display: flex; align-items: center; justify-content: space-between; gap: 12px;
712
+ background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
713
+ padding: 10px 14px; border-radius: var(--bw-radius); margin-bottom: 16px; font-size: 0.875rem;
714
+ }
715
+ .bw-error button { background: none; border: none; color: inherit; cursor: pointer; font-size: 1.25rem; line-height: 1; padding: 0; }
716
+
717
+ /* \u2500\u2500 Headings \u2500\u2500 */
718
+ .bw-heading { font-size: 1.125rem; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
719
+ .bw-meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
720
+ .bw-badge {
721
+ display: inline-flex; align-items: center; gap: 4px;
722
+ font-size: 0.8125rem; color: #6b7280; font-weight: 400;
723
+ }
724
+ .bw-badge-accent {
725
+ display: inline-flex; align-items: center; gap: 4px;
726
+ font-size: 0.8125rem; color: var(--bw-primary); font-weight: 500;
727
+ }
728
+
729
+ /* \u2500\u2500 Info Header \u2500\u2500 */
730
+ .bw-info-header { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 20px; }
731
+ .bw-back {
732
+ display: inline-flex; align-items: center; justify-content: center;
733
+ width: 32px; height: 32px; border-radius: 50%; border: 1px solid #e5e7eb;
734
+ background: #fff; cursor: pointer; color: #4b5563; flex-shrink: 0; margin-top: 1px;
735
+ transition: all 0.15s;
736
+ }
737
+ .bw-back:hover { background: #f3f4f6; border-color: #d1d5db; }
738
+
739
+ /* \u2500\u2500 Loading \u2500\u2500 */
740
+ .bw-loading {
741
+ display: flex; align-items: center; justify-content: center; gap: 8px;
742
+ padding: 32px; color: #6b7280; font-size: 0.875rem;
743
+ }
744
+
745
+ /* \u2500\u2500 Type Selection \u2500\u2500 */
746
+ .bw-type-list { display: flex; flex-direction: column; gap: 10px; }
747
+ .bw-type-card {
748
+ display: flex; flex-direction: column; text-align: left; gap: 4px;
749
+ padding: 16px; border: 1.5px solid #e5e7eb; border-radius: var(--bw-radius);
750
+ background: #fff; cursor: pointer; transition: all 0.15s;
751
+ }
752
+ .bw-type-card:hover { border-color: var(--bw-primary); box-shadow: 0 0 0 3px var(--bw-primary-light); }
753
+ .bw-type-name { font-weight: 600; font-size: 0.9375rem; }
754
+ .bw-type-desc { color: #6b7280; font-size: 0.8125rem; }
755
+ .bw-type-meta { display: flex; align-items: center; gap: 4px; font-size: 0.8125rem; color: #9ca3af; margin-top: 4px; }
756
+
757
+ /* \u2500\u2500 Date-Time Layout \u2500\u2500 */
758
+ .bw-datetime-layout {
759
+ display: flex; gap: 0; border-top: 1px solid #f0f0f0; padding-top: 16px;
760
+ }
761
+ @media (max-width: 559px) {
762
+ .bw-datetime-layout { flex-direction: column; }
763
+ }
764
+ @media (min-width: 560px) {
765
+ .bw-datetime-layout { min-height: 400px; }
766
+ .bw-calendar { flex: 1 1 auto; padding-right: 16px; border-right: 1px solid #f0f0f0; }
767
+ .bw-times { width: 180px; flex-shrink: 0; padding-left: 16px; }
768
+ }
769
+
770
+ /* \u2500\u2500 Calendar \u2500\u2500 */
771
+ .bw-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
772
+ .bw-cal-title { font-weight: 600; font-size: 0.9375rem; }
773
+ .bw-cal-nav {
774
+ display: inline-flex; align-items: center; justify-content: center;
775
+ width: 32px; height: 32px; border-radius: 50%; border: none;
776
+ background: transparent; cursor: pointer; color: #374151; transition: background 0.15s;
777
+ }
778
+ .bw-cal-nav:hover:not(:disabled) { background: #f3f4f6; }
779
+ .bw-cal-nav:disabled { opacity: 0.25; cursor: default; }
780
+
781
+ .bw-cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; text-align: center; margin-bottom: 4px; }
782
+ .bw-cal-wd { font-size: 0.6875rem; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 0; }
783
+
784
+ .bw-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
785
+ .bw-cal-empty { aspect-ratio: 1; }
786
+ .bw-cal-day {
787
+ aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
788
+ border: none; background: none; border-radius: 50%;
789
+ font-size: 0.8125rem; font-weight: 500; cursor: pointer;
790
+ color: #1a1a1a; transition: all 0.15s; position: relative;
791
+ }
792
+ .bw-cal-day:hover:not(.disabled):not(.selected) { background: #f3f4f6; }
793
+ .bw-cal-day.today:not(.selected)::after {
794
+ content: ''; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
795
+ width: 4px; height: 4px; border-radius: 50%; background: var(--bw-primary);
796
+ }
797
+ .bw-cal-day.selected {
798
+ background: var(--bw-primary); color: #fff; font-weight: 600;
799
+ }
800
+ .bw-cal-day.disabled { color: #d1d5db; cursor: default; }
801
+
802
+ /* \u2500\u2500 Time Slots \u2500\u2500 */
803
+ .bw-times { transition: opacity 0.2s; }
804
+ .bw-times:not(.visible) { opacity: 0.5; }
805
+ .bw-times.visible { opacity: 1; }
806
+ .bw-times-placeholder {
807
+ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
808
+ height: 100%; min-height: 160px; color: #9ca3af; font-size: 0.8125rem; text-align: center; padding: 16px;
809
+ }
810
+ .bw-times-empty {
811
+ display: flex; align-items: center; justify-content: center;
812
+ height: 100%; min-height: 160px; color: #9ca3af; font-size: 0.8125rem; text-align: center; padding: 16px;
813
+ }
814
+ .bw-times-scroll { overflow-y: auto; max-height: 400px; overflow-x: hidden; }
815
+ .bw-times-date { font-weight: 600; font-size: 0.8125rem; color: #374151; margin: 0 0 12px 0; }
816
+ .bw-time-group { margin-bottom: 16px; }
817
+ .bw-times-scroll-hint {
818
+ font-size: 0.6875rem; color: #9ca3af; text-align: center; margin: 8px 0 0 0; padding-bottom: 8px;
819
+ }
820
+ .bw-time-label { display: block; font-size: 0.6875rem; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
821
+
822
+ .bw-time-btn {
823
+ display: block; width: 100%;
824
+ padding: 10px 12px; margin-bottom: 6px;
825
+ border: 1.5px solid #e5e7eb; border-radius: var(--bw-radius);
826
+ background: #fff; cursor: pointer;
827
+ font-size: 0.875rem; font-weight: 500; color: var(--bw-primary); text-align: center;
828
+ transition: all 0.15s;
829
+ }
830
+ .bw-time-btn:hover:not(:disabled) {
831
+ border-color: var(--bw-primary); background: var(--bw-primary-light);
832
+ }
833
+ .bw-time-btn.selected {
834
+ border-color: var(--bw-primary); background: var(--bw-primary); color: #fff;
835
+ }
836
+ .bw-time-btn:disabled { opacity: 0.5; cursor: not-allowed; }
837
+
838
+ .bw-time-btn-wrap {
839
+ display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
840
+ border: 1.5px solid var(--bw-primary); border-radius: var(--bw-radius); overflow: hidden;
841
+ animation: bw-fade-in 0.15s ease-out;
842
+ }
843
+ .bw-time-btn-wrap .bw-time-text {
844
+ flex: 1; padding: 10px 12px; font-size: 0.875rem; font-weight: 500; color: #374151; text-align: center;
845
+ background: var(--bw-primary-light);
846
+ }
847
+ .bw-time-confirm {
848
+ display: inline-flex; align-items: center; justify-content: center; gap: 4px;
849
+ padding: 10px 16px; border: none;
850
+ background: var(--bw-primary); color: #fff;
851
+ font-size: 0.8125rem; font-weight: 600; cursor: pointer;
852
+ transition: background 0.15s;
853
+ }
854
+ .bw-time-confirm:hover:not(:disabled) { background: var(--bw-primary-hover); }
855
+ .bw-time-confirm:disabled { opacity: 0.7; cursor: not-allowed; }
856
+
857
+ /* \u2500\u2500 Form \u2500\u2500 */
858
+ .bw-hold-notice {
859
+ display: flex; align-items: center; gap: 8px;
860
+ background: var(--bw-primary-light); color: var(--bw-primary);
861
+ padding: 10px 14px; border-radius: var(--bw-radius);
862
+ font-size: 0.8125rem; font-weight: 500; margin-bottom: 20px;
863
+ }
864
+ .bw-form { display: flex; flex-direction: column; gap: 16px; }
865
+ .bw-field label {
866
+ display: block; font-size: 0.8125rem; font-weight: 500; color: #374151; margin-bottom: 4px;
867
+ }
868
+ .bw-req { color: #ef4444; }
869
+ .bw-field input, .bw-field textarea {
870
+ display: block; width: 100%;
871
+ padding: 10px 12px; border: 1.5px solid #e5e7eb; border-radius: var(--bw-radius);
872
+ font-size: 0.9375rem; font-family: inherit; color: #1a1a1a; background: #fff;
873
+ transition: border-color 0.15s, box-shadow 0.15s;
874
+ }
875
+ .bw-field input::placeholder, .bw-field textarea::placeholder { color: #c0c5cc; }
876
+ .bw-field input:focus, .bw-field textarea:focus {
877
+ outline: none; border-color: var(--bw-primary);
878
+ box-shadow: 0 0 0 3px var(--bw-primary-light);
879
+ }
880
+ .bw-submit {
881
+ display: inline-flex; align-items: center; justify-content: center; gap: 8px;
882
+ width: 100%; padding: 14px; margin-top: 4px;
883
+ background: var(--bw-primary); color: #fff; border: none;
884
+ border-radius: var(--bw-radius); font-size: 0.9375rem; font-weight: 600;
885
+ cursor: pointer; transition: background 0.15s;
886
+ }
887
+ .bw-submit:hover:not(:disabled) { background: var(--bw-primary-hover); }
888
+ .bw-submit:disabled { opacity: 0.55; cursor: not-allowed; }
889
+
890
+ /* \u2500\u2500 Success \u2500\u2500 */
891
+ .bw-success { text-align: center; }
892
+ .bw-success-icon { margin: 0 auto 16px; width: 56px; height: 56px; animation: bw-fade-in 0.4s ease-out; }
893
+ .bw-conf-code {
894
+ display: inline-block; font-family: 'SF Mono', 'Fira Code', monospace;
895
+ background: #f3f4f6; padding: 6px 14px; border-radius: 6px;
896
+ font-size: 0.8125rem; color: #6b7280; margin: 4px 0 20px; letter-spacing: 0.04em;
897
+ }
898
+
899
+ .bw-details-card {
900
+ text-align: left; background: #f9fafb; border: 1px solid #f0f0f0;
901
+ border-radius: var(--bw-radius); padding: 16px; margin-bottom: 20px;
902
+ }
903
+ .bw-detail-row { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
904
+ .bw-detail-row:last-child { border-bottom: none; }
905
+ .bw-detail-label { width: 70px; flex-shrink: 0; font-size: 0.8125rem; color: #9ca3af; font-weight: 500; }
906
+ .bw-detail-value { font-size: 0.875rem; font-weight: 500; color: #374151; }
907
+
908
+ .bw-cal-links-label { font-size: 0.8125rem; color: #6b7280; margin: 0 0 8px 0; }
909
+ .bw-cal-links { display: flex; gap: 8px; justify-content: center; margin-bottom: 20px; flex-wrap: wrap; }
910
+ .bw-cal-link {
911
+ display: inline-flex; align-items: center; gap: 6px;
912
+ padding: 8px 14px; border: 1.5px solid #e5e7eb; border-radius: var(--bw-radius);
913
+ text-decoration: none; color: #374151; font-size: 0.8125rem; font-weight: 500;
914
+ transition: all 0.15s;
915
+ }
916
+ .bw-cal-link:hover { border-color: var(--bw-primary); color: var(--bw-primary); }
917
+
918
+ .bw-email-notice { font-size: 0.8125rem; color: #9ca3af; margin: 0; }
919
+ .bw-email-notice strong { color: #374151; font-weight: 500; }
920
+ `;
921
+ var BookingWidget_default = BookingWidget;
922
+
923
+ export { BookingWidget, BookingWidget_default, createBooking, createSlotHold, detectTimezone, fetchAvailability, fetchAvailableDates, fetchBookingTypeDetails, fetchBookingTypes, formatDate, formatDuration, formatTime, releaseSlotHold };
924
+ //# sourceMappingURL=chunk-W2TZYAUL.mjs.map
925
+ //# sourceMappingURL=chunk-W2TZYAUL.mjs.map