@planetaexo/design-system 0.3.15 → 0.3.17
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/index.cjs +1811 -976
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +121 -1
- package/dist/index.d.ts +121 -1
- package/dist/index.js +1793 -961
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as React21 from 'react';
|
|
2
2
|
import { useState, useRef, useCallback, useEffect } from 'react';
|
|
3
3
|
import { cva } from 'class-variance-authority';
|
|
4
4
|
import { clsx } from 'clsx';
|
|
5
5
|
import { twMerge } from 'tailwind-merge';
|
|
6
6
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
7
|
-
import {
|
|
8
|
-
import { ChevronDownIcon, SearchIcon, ChevronRightIcon, ArrowLeftIcon, CheckCircle2Icon, MapIcon, MessageCircleIcon, UsersIcon, CreditCardIcon, AlertCircleIcon, MinusIcon, PlusIcon, CalendarIcon, ChevronLeftIcon, ClockIcon, ChevronUpIcon, UserIcon, MenuIcon, XIcon, SunIcon, MoonIcon, MapPinIcon, PackageIcon, InfoIcon, Loader2Icon, SendIcon, CheckCircleIcon, CheckIcon, MailIcon, PhoneIcon, CompassIcon, UserPlusIcon, ExternalLinkIcon, CopyIcon, PencilIcon, Trash2Icon, UserMinusIcon, AlertTriangleIcon, CarIcon, ZoomInIcon, StarIcon, LayoutGridIcon } from 'lucide-react';
|
|
7
|
+
import { ChevronDownIcon, CalendarIcon, SearchIcon, ChevronRightIcon, ArrowLeftIcon, CheckCircle2Icon, MapIcon, MessageCircleIcon, UsersIcon, CreditCardIcon, AlertCircleIcon, MinusIcon, PlusIcon, CircleCheckIcon, ChevronLeftIcon, ClockIcon, ChevronUpIcon, UserIcon, MenuIcon, XIcon, SunIcon, MoonIcon, MapPinIcon, PackageIcon, InfoIcon, Loader2Icon, SendIcon, CheckCircleIcon, CheckIcon, MailIcon, PhoneIcon, CompassIcon, UserPlusIcon, ExternalLinkIcon, CopyIcon, PencilIcon, Trash2Icon, UserMinusIcon, AlertTriangleIcon, CarIcon, ZoomInIcon, StarIcon, LayoutGridIcon } from 'lucide-react';
|
|
9
8
|
import { Separator as Separator$1 } from '@base-ui/react/separator';
|
|
10
9
|
import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
|
|
11
10
|
import { Button as Button$1 } from '@base-ui/react/button';
|
|
11
|
+
import { format } from 'date-fns';
|
|
12
12
|
import { getDefaultClassNames, DayPicker } from 'react-day-picker';
|
|
13
13
|
import { Popover as Popover$1 } from '@base-ui/react/popover';
|
|
14
14
|
import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
|
|
@@ -80,7 +80,7 @@ var buttonVariants = cva(
|
|
|
80
80
|
}
|
|
81
81
|
}
|
|
82
82
|
);
|
|
83
|
-
var Button =
|
|
83
|
+
var Button = React21.forwardRef(
|
|
84
84
|
(_a, ref) => {
|
|
85
85
|
var _b = _a, { className, variant, size } = _b, props = __objRest(_b, ["className", "variant", "size"]);
|
|
86
86
|
return /* @__PURE__ */ jsx(
|
|
@@ -275,201 +275,10 @@ function DialogDescription(_a) {
|
|
|
275
275
|
}, props)
|
|
276
276
|
);
|
|
277
277
|
}
|
|
278
|
-
|
|
279
|
-
var _b = _a, {
|
|
280
|
-
className,
|
|
281
|
-
classNames,
|
|
282
|
-
showOutsideDays = true,
|
|
283
|
-
captionLayout = "label",
|
|
284
|
-
buttonVariant = "ghost",
|
|
285
|
-
locale,
|
|
286
|
-
formatters,
|
|
287
|
-
components
|
|
288
|
-
} = _b, props = __objRest(_b, [
|
|
289
|
-
"className",
|
|
290
|
-
"classNames",
|
|
291
|
-
"showOutsideDays",
|
|
292
|
-
"captionLayout",
|
|
293
|
-
"buttonVariant",
|
|
294
|
-
"locale",
|
|
295
|
-
"formatters",
|
|
296
|
-
"components"
|
|
297
|
-
]);
|
|
298
|
-
const defaultClassNames = getDefaultClassNames();
|
|
299
|
-
return /* @__PURE__ */ jsx(
|
|
300
|
-
DayPicker,
|
|
301
|
-
__spreadValues({
|
|
302
|
-
showOutsideDays,
|
|
303
|
-
className: cn(
|
|
304
|
-
"group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
|
|
305
|
-
String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
|
|
306
|
-
String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
|
|
307
|
-
className
|
|
308
|
-
),
|
|
309
|
-
captionLayout,
|
|
310
|
-
locale,
|
|
311
|
-
formatters: __spreadValues({
|
|
312
|
-
formatMonthDropdown: (date) => date.toLocaleString(locale == null ? void 0 : locale.code, { month: "short" })
|
|
313
|
-
}, formatters),
|
|
314
|
-
classNames: __spreadValues({
|
|
315
|
-
root: cn("w-fit", defaultClassNames.root),
|
|
316
|
-
months: cn(
|
|
317
|
-
"relative flex flex-col gap-4 md:flex-row",
|
|
318
|
-
defaultClassNames.months
|
|
319
|
-
),
|
|
320
|
-
month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
|
|
321
|
-
nav: cn(
|
|
322
|
-
"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
|
|
323
|
-
defaultClassNames.nav
|
|
324
|
-
),
|
|
325
|
-
button_previous: cn(
|
|
326
|
-
buttonVariants2({ variant: buttonVariant }),
|
|
327
|
-
"size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
|
|
328
|
-
defaultClassNames.button_previous
|
|
329
|
-
),
|
|
330
|
-
button_next: cn(
|
|
331
|
-
buttonVariants2({ variant: buttonVariant }),
|
|
332
|
-
"size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
|
|
333
|
-
defaultClassNames.button_next
|
|
334
|
-
),
|
|
335
|
-
month_caption: cn(
|
|
336
|
-
"flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
|
|
337
|
-
defaultClassNames.month_caption
|
|
338
|
-
),
|
|
339
|
-
dropdowns: cn(
|
|
340
|
-
"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
|
|
341
|
-
defaultClassNames.dropdowns
|
|
342
|
-
),
|
|
343
|
-
dropdown_root: cn(
|
|
344
|
-
"relative rounded-(--cell-radius)",
|
|
345
|
-
defaultClassNames.dropdown_root
|
|
346
|
-
),
|
|
347
|
-
dropdown: cn(
|
|
348
|
-
"absolute inset-0 bg-popover opacity-0",
|
|
349
|
-
defaultClassNames.dropdown
|
|
350
|
-
),
|
|
351
|
-
caption_label: cn(
|
|
352
|
-
"font-medium select-none",
|
|
353
|
-
captionLayout === "label" ? "text-sm" : "flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
|
|
354
|
-
defaultClassNames.caption_label
|
|
355
|
-
),
|
|
356
|
-
table: "w-full border-collapse",
|
|
357
|
-
weekdays: cn("flex", defaultClassNames.weekdays),
|
|
358
|
-
weekday: cn(
|
|
359
|
-
"flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none",
|
|
360
|
-
defaultClassNames.weekday
|
|
361
|
-
),
|
|
362
|
-
week: cn("mt-2 flex w-full", defaultClassNames.week),
|
|
363
|
-
week_number_header: cn(
|
|
364
|
-
"w-(--cell-size) select-none",
|
|
365
|
-
defaultClassNames.week_number_header
|
|
366
|
-
),
|
|
367
|
-
week_number: cn(
|
|
368
|
-
"text-[0.8rem] text-muted-foreground select-none",
|
|
369
|
-
defaultClassNames.week_number
|
|
370
|
-
),
|
|
371
|
-
day: cn(
|
|
372
|
-
"group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)",
|
|
373
|
-
props.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)" : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)",
|
|
374
|
-
defaultClassNames.day
|
|
375
|
-
),
|
|
376
|
-
range_start: cn(
|
|
377
|
-
"relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted",
|
|
378
|
-
defaultClassNames.range_start
|
|
379
|
-
),
|
|
380
|
-
range_middle: cn("rounded-none", defaultClassNames.range_middle),
|
|
381
|
-
range_end: cn(
|
|
382
|
-
"relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted",
|
|
383
|
-
defaultClassNames.range_end
|
|
384
|
-
),
|
|
385
|
-
today: cn(
|
|
386
|
-
"rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none",
|
|
387
|
-
defaultClassNames.today
|
|
388
|
-
),
|
|
389
|
-
outside: cn(
|
|
390
|
-
"text-muted-foreground aria-selected:text-muted-foreground",
|
|
391
|
-
defaultClassNames.outside
|
|
392
|
-
),
|
|
393
|
-
disabled: cn(
|
|
394
|
-
"text-muted-foreground opacity-50",
|
|
395
|
-
defaultClassNames.disabled
|
|
396
|
-
),
|
|
397
|
-
hidden: cn("invisible", defaultClassNames.hidden)
|
|
398
|
-
}, classNames),
|
|
399
|
-
components: __spreadValues({
|
|
400
|
-
Root: (_a2) => {
|
|
401
|
-
var _b2 = _a2, { className: className2, rootRef } = _b2, props2 = __objRest(_b2, ["className", "rootRef"]);
|
|
402
|
-
return /* @__PURE__ */ jsx(
|
|
403
|
-
"div",
|
|
404
|
-
__spreadValues({
|
|
405
|
-
"data-slot": "calendar",
|
|
406
|
-
ref: rootRef,
|
|
407
|
-
className: cn(className2)
|
|
408
|
-
}, props2)
|
|
409
|
-
);
|
|
410
|
-
},
|
|
411
|
-
Chevron: (_c) => {
|
|
412
|
-
var _d = _c, { className: className2, orientation } = _d, props2 = __objRest(_d, ["className", "orientation"]);
|
|
413
|
-
if (orientation === "left") {
|
|
414
|
-
return /* @__PURE__ */ jsx(ChevronLeftIcon, __spreadValues({ className: cn("size-4", className2) }, props2));
|
|
415
|
-
}
|
|
416
|
-
if (orientation === "right") {
|
|
417
|
-
return /* @__PURE__ */ jsx(ChevronRightIcon, __spreadValues({ className: cn("size-4", className2) }, props2));
|
|
418
|
-
}
|
|
419
|
-
return /* @__PURE__ */ jsx(ChevronDownIcon, __spreadValues({ className: cn("size-4", className2) }, props2));
|
|
420
|
-
},
|
|
421
|
-
DayButton: (_e) => {
|
|
422
|
-
var props2 = __objRest(_e, []);
|
|
423
|
-
return /* @__PURE__ */ jsx(CalendarDayButton, __spreadValues({ locale }, props2));
|
|
424
|
-
},
|
|
425
|
-
WeekNumber: (_f) => {
|
|
426
|
-
var _g = _f, { children } = _g, props2 = __objRest(_g, ["children"]);
|
|
427
|
-
return /* @__PURE__ */ jsx("td", __spreadProps(__spreadValues({}, props2), { children: /* @__PURE__ */ jsx("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children }) }));
|
|
428
|
-
}
|
|
429
|
-
}, components)
|
|
430
|
-
}, props)
|
|
431
|
-
);
|
|
432
|
-
}
|
|
433
|
-
function CalendarDayButton(_a) {
|
|
434
|
-
var _b = _a, {
|
|
435
|
-
className,
|
|
436
|
-
day,
|
|
437
|
-
modifiers,
|
|
438
|
-
locale
|
|
439
|
-
} = _b, props = __objRest(_b, [
|
|
440
|
-
"className",
|
|
441
|
-
"day",
|
|
442
|
-
"modifiers",
|
|
443
|
-
"locale"
|
|
444
|
-
]);
|
|
445
|
-
const defaultClassNames = getDefaultClassNames();
|
|
446
|
-
const ref = React19.useRef(null);
|
|
447
|
-
React19.useEffect(() => {
|
|
448
|
-
var _a2;
|
|
449
|
-
if (modifiers.focused) (_a2 = ref.current) == null ? void 0 : _a2.focus();
|
|
450
|
-
}, [modifiers.focused]);
|
|
451
|
-
return /* @__PURE__ */ jsx(
|
|
452
|
-
Button2,
|
|
453
|
-
__spreadValues({
|
|
454
|
-
variant: "ghost",
|
|
455
|
-
size: "icon",
|
|
456
|
-
"data-day": day.date.toLocaleDateString(locale == null ? void 0 : locale.code),
|
|
457
|
-
"data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
|
|
458
|
-
"data-range-start": modifiers.range_start,
|
|
459
|
-
"data-range-end": modifiers.range_end,
|
|
460
|
-
"data-range-middle": modifiers.range_middle,
|
|
461
|
-
className: cn(
|
|
462
|
-
"relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70",
|
|
463
|
-
defaultClassNames.day,
|
|
464
|
-
className
|
|
465
|
-
)
|
|
466
|
-
}, props)
|
|
467
|
-
);
|
|
468
|
-
}
|
|
469
|
-
var FloatingInput = React19.forwardRef(
|
|
278
|
+
var FloatingInput = React21.forwardRef(
|
|
470
279
|
(_a, ref) => {
|
|
471
280
|
var _b = _a, { label, error, id, className, required } = _b, props = __objRest(_b, ["label", "error", "id", "className", "required"]);
|
|
472
|
-
const inputId = id != null ? id :
|
|
281
|
+
const inputId = id != null ? id : React21.useId();
|
|
473
282
|
return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
|
|
474
283
|
/* @__PURE__ */ jsx(
|
|
475
284
|
"input",
|
|
@@ -509,10 +318,10 @@ var FloatingInput = React19.forwardRef(
|
|
|
509
318
|
}
|
|
510
319
|
);
|
|
511
320
|
FloatingInput.displayName = "FloatingInput";
|
|
512
|
-
var FloatingSelect =
|
|
321
|
+
var FloatingSelect = React21.forwardRef(
|
|
513
322
|
(_a, ref) => {
|
|
514
323
|
var _b = _a, { label, error, id, className, required, children } = _b, props = __objRest(_b, ["label", "error", "id", "className", "required", "children"]);
|
|
515
|
-
const inputId = id != null ? id :
|
|
324
|
+
const inputId = id != null ? id : React21.useId();
|
|
516
325
|
return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
|
|
517
326
|
/* @__PURE__ */ jsx(
|
|
518
327
|
"select",
|
|
@@ -773,11 +582,11 @@ function PhoneCountrySelect({
|
|
|
773
582
|
className
|
|
774
583
|
}) {
|
|
775
584
|
var _a;
|
|
776
|
-
const [open, setOpen] =
|
|
777
|
-
const containerRef =
|
|
778
|
-
const listRef =
|
|
585
|
+
const [open, setOpen] = React21.useState(false);
|
|
586
|
+
const containerRef = React21.useRef(null);
|
|
587
|
+
const listRef = React21.useRef(null);
|
|
779
588
|
const selected = (_a = PHONE_COUNTRIES.find((c) => c.code === value)) != null ? _a : PHONE_COUNTRIES[0];
|
|
780
|
-
|
|
589
|
+
React21.useEffect(() => {
|
|
781
590
|
if (!open) return;
|
|
782
591
|
const handler = (e) => {
|
|
783
592
|
var _a2;
|
|
@@ -788,7 +597,7 @@ function PhoneCountrySelect({
|
|
|
788
597
|
document.addEventListener("mousedown", handler);
|
|
789
598
|
return () => document.removeEventListener("mousedown", handler);
|
|
790
599
|
}, [open]);
|
|
791
|
-
|
|
600
|
+
React21.useEffect(() => {
|
|
792
601
|
if (!open || !listRef.current) return;
|
|
793
602
|
const activeEl = listRef.current.querySelector("[data-selected=true]");
|
|
794
603
|
activeEl == null ? void 0 : activeEl.scrollIntoView({ block: "nearest" });
|
|
@@ -884,145 +693,442 @@ function PhoneCountrySelect({
|
|
|
884
693
|
)
|
|
885
694
|
] });
|
|
886
695
|
}
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
696
|
+
function Calendar(_a) {
|
|
697
|
+
var _b = _a, {
|
|
698
|
+
className,
|
|
699
|
+
classNames,
|
|
700
|
+
showOutsideDays = true,
|
|
701
|
+
captionLayout = "label",
|
|
702
|
+
buttonVariant = "ghost",
|
|
703
|
+
locale,
|
|
704
|
+
formatters,
|
|
705
|
+
components
|
|
706
|
+
} = _b, props = __objRest(_b, [
|
|
707
|
+
"className",
|
|
708
|
+
"classNames",
|
|
709
|
+
"showOutsideDays",
|
|
710
|
+
"captionLayout",
|
|
711
|
+
"buttonVariant",
|
|
712
|
+
"locale",
|
|
713
|
+
"formatters",
|
|
714
|
+
"components"
|
|
715
|
+
]);
|
|
716
|
+
const defaultClassNames = getDefaultClassNames();
|
|
717
|
+
return /* @__PURE__ */ jsx(
|
|
718
|
+
DayPicker,
|
|
719
|
+
__spreadValues({
|
|
720
|
+
showOutsideDays,
|
|
721
|
+
className: cn(
|
|
722
|
+
"group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
|
|
723
|
+
String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
|
|
724
|
+
String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
|
|
725
|
+
className
|
|
726
|
+
),
|
|
727
|
+
captionLayout,
|
|
728
|
+
locale,
|
|
729
|
+
formatters: __spreadValues({
|
|
730
|
+
formatMonthDropdown: (date) => date.toLocaleString(locale == null ? void 0 : locale.code, { month: "short" })
|
|
731
|
+
}, formatters),
|
|
732
|
+
classNames: __spreadValues({
|
|
733
|
+
root: cn("w-fit", defaultClassNames.root),
|
|
734
|
+
months: cn(
|
|
735
|
+
"relative flex flex-col gap-4 md:flex-row",
|
|
736
|
+
defaultClassNames.months
|
|
737
|
+
),
|
|
738
|
+
month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
|
|
739
|
+
nav: cn(
|
|
740
|
+
"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
|
|
741
|
+
defaultClassNames.nav
|
|
742
|
+
),
|
|
743
|
+
button_previous: cn(
|
|
744
|
+
buttonVariants2({ variant: buttonVariant }),
|
|
745
|
+
"size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
|
|
746
|
+
defaultClassNames.button_previous
|
|
747
|
+
),
|
|
748
|
+
button_next: cn(
|
|
749
|
+
buttonVariants2({ variant: buttonVariant }),
|
|
750
|
+
"size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
|
|
751
|
+
defaultClassNames.button_next
|
|
752
|
+
),
|
|
753
|
+
month_caption: cn(
|
|
754
|
+
"flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
|
|
755
|
+
defaultClassNames.month_caption
|
|
756
|
+
),
|
|
757
|
+
dropdowns: cn(
|
|
758
|
+
"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
|
|
759
|
+
defaultClassNames.dropdowns
|
|
760
|
+
),
|
|
761
|
+
dropdown_root: cn(
|
|
762
|
+
"relative rounded-(--cell-radius)",
|
|
763
|
+
defaultClassNames.dropdown_root
|
|
764
|
+
),
|
|
765
|
+
dropdown: cn(
|
|
766
|
+
"absolute inset-0 bg-popover opacity-0",
|
|
767
|
+
defaultClassNames.dropdown
|
|
768
|
+
),
|
|
769
|
+
caption_label: cn(
|
|
770
|
+
"font-medium select-none",
|
|
771
|
+
captionLayout === "label" ? "text-sm" : "flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
|
|
772
|
+
defaultClassNames.caption_label
|
|
773
|
+
),
|
|
774
|
+
table: "w-full border-collapse",
|
|
775
|
+
weekdays: cn("flex", defaultClassNames.weekdays),
|
|
776
|
+
weekday: cn(
|
|
777
|
+
"flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none",
|
|
778
|
+
defaultClassNames.weekday
|
|
779
|
+
),
|
|
780
|
+
week: cn("mt-2 flex w-full", defaultClassNames.week),
|
|
781
|
+
week_number_header: cn(
|
|
782
|
+
"w-(--cell-size) select-none",
|
|
783
|
+
defaultClassNames.week_number_header
|
|
784
|
+
),
|
|
785
|
+
week_number: cn(
|
|
786
|
+
"text-[0.8rem] text-muted-foreground select-none",
|
|
787
|
+
defaultClassNames.week_number
|
|
788
|
+
),
|
|
789
|
+
day: cn(
|
|
790
|
+
"group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)",
|
|
791
|
+
props.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)" : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)",
|
|
792
|
+
defaultClassNames.day
|
|
793
|
+
),
|
|
794
|
+
range_start: cn(
|
|
795
|
+
"relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted",
|
|
796
|
+
defaultClassNames.range_start
|
|
797
|
+
),
|
|
798
|
+
range_middle: cn("rounded-none", defaultClassNames.range_middle),
|
|
799
|
+
range_end: cn(
|
|
800
|
+
"relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted",
|
|
801
|
+
defaultClassNames.range_end
|
|
802
|
+
),
|
|
803
|
+
today: cn(
|
|
804
|
+
"rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none",
|
|
805
|
+
defaultClassNames.today
|
|
806
|
+
),
|
|
807
|
+
outside: cn(
|
|
808
|
+
"text-muted-foreground aria-selected:text-muted-foreground",
|
|
809
|
+
defaultClassNames.outside
|
|
810
|
+
),
|
|
811
|
+
disabled: cn(
|
|
812
|
+
"text-muted-foreground opacity-50",
|
|
813
|
+
defaultClassNames.disabled
|
|
814
|
+
),
|
|
815
|
+
hidden: cn("invisible", defaultClassNames.hidden)
|
|
816
|
+
}, classNames),
|
|
817
|
+
components: __spreadValues({
|
|
818
|
+
Root: (_a2) => {
|
|
819
|
+
var _b2 = _a2, { className: className2, rootRef } = _b2, props2 = __objRest(_b2, ["className", "rootRef"]);
|
|
820
|
+
return /* @__PURE__ */ jsx(
|
|
821
|
+
"div",
|
|
822
|
+
__spreadValues({
|
|
823
|
+
"data-slot": "calendar",
|
|
824
|
+
ref: rootRef,
|
|
825
|
+
className: cn(className2)
|
|
826
|
+
}, props2)
|
|
827
|
+
);
|
|
828
|
+
},
|
|
829
|
+
Chevron: (_c) => {
|
|
830
|
+
var _d = _c, { className: className2, orientation } = _d, props2 = __objRest(_d, ["className", "orientation"]);
|
|
831
|
+
if (orientation === "left") {
|
|
832
|
+
return /* @__PURE__ */ jsx(ChevronLeftIcon, __spreadValues({ className: cn("size-4", className2) }, props2));
|
|
833
|
+
}
|
|
834
|
+
if (orientation === "right") {
|
|
835
|
+
return /* @__PURE__ */ jsx(ChevronRightIcon, __spreadValues({ className: cn("size-4", className2) }, props2));
|
|
836
|
+
}
|
|
837
|
+
return /* @__PURE__ */ jsx(ChevronDownIcon, __spreadValues({ className: cn("size-4", className2) }, props2));
|
|
838
|
+
},
|
|
839
|
+
DayButton: (_e) => {
|
|
840
|
+
var props2 = __objRest(_e, []);
|
|
841
|
+
return /* @__PURE__ */ jsx(CalendarDayButton, __spreadValues({ locale }, props2));
|
|
842
|
+
},
|
|
843
|
+
WeekNumber: (_f) => {
|
|
844
|
+
var _g = _f, { children } = _g, props2 = __objRest(_g, ["children"]);
|
|
845
|
+
return /* @__PURE__ */ jsx("td", __spreadProps(__spreadValues({}, props2), { children: /* @__PURE__ */ jsx("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children }) }));
|
|
846
|
+
}
|
|
847
|
+
}, components)
|
|
848
|
+
}, props)
|
|
849
|
+
);
|
|
850
|
+
}
|
|
851
|
+
function CalendarDayButton(_a) {
|
|
852
|
+
var _b = _a, {
|
|
853
|
+
className,
|
|
854
|
+
day,
|
|
855
|
+
modifiers,
|
|
856
|
+
locale
|
|
857
|
+
} = _b, props = __objRest(_b, [
|
|
858
|
+
"className",
|
|
859
|
+
"day",
|
|
860
|
+
"modifiers",
|
|
861
|
+
"locale"
|
|
862
|
+
]);
|
|
863
|
+
const defaultClassNames = getDefaultClassNames();
|
|
864
|
+
const ref = React21.useRef(null);
|
|
865
|
+
React21.useEffect(() => {
|
|
866
|
+
var _a2;
|
|
867
|
+
if (modifiers.focused) (_a2 = ref.current) == null ? void 0 : _a2.focus();
|
|
868
|
+
}, [modifiers.focused]);
|
|
869
|
+
return /* @__PURE__ */ jsx(
|
|
870
|
+
Button2,
|
|
871
|
+
__spreadValues({
|
|
872
|
+
variant: "ghost",
|
|
873
|
+
size: "icon",
|
|
874
|
+
"data-day": day.date.toLocaleDateString(locale == null ? void 0 : locale.code),
|
|
875
|
+
"data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
|
|
876
|
+
"data-range-start": modifiers.range_start,
|
|
877
|
+
"data-range-end": modifiers.range_end,
|
|
878
|
+
"data-range-middle": modifiers.range_middle,
|
|
879
|
+
className: cn(
|
|
880
|
+
"relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70",
|
|
881
|
+
defaultClassNames.day,
|
|
882
|
+
className
|
|
883
|
+
)
|
|
884
|
+
}, props)
|
|
885
|
+
);
|
|
886
|
+
}
|
|
887
|
+
function BirthDateField({
|
|
888
|
+
label,
|
|
889
|
+
required,
|
|
990
890
|
value,
|
|
991
891
|
onChange,
|
|
992
|
-
required,
|
|
993
|
-
label = "Country",
|
|
994
|
-
countries,
|
|
995
|
-
placeholder = "Search country\u2026",
|
|
996
892
|
className
|
|
997
893
|
}) {
|
|
998
|
-
|
|
999
|
-
const
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
const containerRef =
|
|
1003
|
-
const
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
894
|
+
const [open, setOpen] = React21.useState(false);
|
|
895
|
+
const [text, setText] = React21.useState(
|
|
896
|
+
value ? format(value, "dd/MM/yyyy") : ""
|
|
897
|
+
);
|
|
898
|
+
const containerRef = React21.useRef(null);
|
|
899
|
+
const inputId = React21.useId();
|
|
900
|
+
React21.useEffect(() => {
|
|
901
|
+
setText(value ? format(value, "dd/MM/yyyy") : "");
|
|
902
|
+
}, [value]);
|
|
903
|
+
React21.useEffect(() => {
|
|
1008
904
|
if (!open) return;
|
|
1009
905
|
const handler = (e) => {
|
|
1010
|
-
var
|
|
1011
|
-
if (!((
|
|
1012
|
-
setOpen(false);
|
|
1013
|
-
setQuery("");
|
|
1014
|
-
}
|
|
906
|
+
var _a;
|
|
907
|
+
if (!((_a = containerRef.current) == null ? void 0 : _a.contains(e.target))) setOpen(false);
|
|
1015
908
|
};
|
|
1016
909
|
document.addEventListener("mousedown", handler);
|
|
1017
910
|
return () => document.removeEventListener("mousedown", handler);
|
|
1018
911
|
}, [open]);
|
|
1019
|
-
const
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
912
|
+
const handleTextChange = (e) => {
|
|
913
|
+
const digits = e.target.value.replace(/\D/g, "").slice(0, 8);
|
|
914
|
+
let formatted = digits.slice(0, 2);
|
|
915
|
+
if (digits.length > 2) formatted += "/" + digits.slice(2, 4);
|
|
916
|
+
if (digits.length > 4) formatted += "/" + digits.slice(4, 8);
|
|
917
|
+
setText(formatted);
|
|
918
|
+
if (formatted.length === 10) {
|
|
919
|
+
const [dd, mm, yyyy] = formatted.split("/").map(Number);
|
|
920
|
+
const d = new Date(yyyy, mm - 1, dd);
|
|
921
|
+
if (!isNaN(d.getTime()) && d.getFullYear() === yyyy && d <= /* @__PURE__ */ new Date()) {
|
|
922
|
+
onChange(d);
|
|
923
|
+
return;
|
|
924
|
+
}
|
|
925
|
+
}
|
|
926
|
+
onChange(void 0);
|
|
927
|
+
};
|
|
928
|
+
return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: cn("relative w-full", className), children: [
|
|
929
|
+
/* @__PURE__ */ jsxs(
|
|
930
|
+
"div",
|
|
931
|
+
{
|
|
932
|
+
className: cn(
|
|
933
|
+
"flex items-center rounded-lg border border-border bg-background h-14 transition-colors",
|
|
934
|
+
open ? "border-primary ring-1 ring-primary" : "focus-within:border-primary focus-within:ring-1 focus-within:ring-primary"
|
|
935
|
+
),
|
|
936
|
+
children: [
|
|
937
|
+
/* @__PURE__ */ jsxs("div", { className: "relative flex-1 h-full", children: [
|
|
938
|
+
/* @__PURE__ */ jsxs(
|
|
939
|
+
"label",
|
|
940
|
+
{
|
|
941
|
+
htmlFor: inputId,
|
|
942
|
+
className: "pointer-events-none absolute left-3 top-2 text-xs text-muted-foreground font-ui",
|
|
943
|
+
children: [
|
|
944
|
+
label,
|
|
945
|
+
required && /* @__PURE__ */ jsx("span", { className: "text-primary ml-0.5", children: "*" })
|
|
946
|
+
]
|
|
947
|
+
}
|
|
948
|
+
),
|
|
949
|
+
/* @__PURE__ */ jsx(
|
|
950
|
+
"input",
|
|
951
|
+
{
|
|
952
|
+
id: inputId,
|
|
953
|
+
type: "text",
|
|
954
|
+
inputMode: "numeric",
|
|
955
|
+
value: text,
|
|
956
|
+
onChange: handleTextChange,
|
|
957
|
+
placeholder: "dd/mm/yyyy",
|
|
958
|
+
className: "block h-full w-full bg-transparent px-3 pt-5 pb-2 text-base text-foreground font-ui focus:outline-none placeholder:text-muted-foreground/50"
|
|
959
|
+
}
|
|
960
|
+
)
|
|
961
|
+
] }),
|
|
962
|
+
/* @__PURE__ */ jsx(
|
|
963
|
+
"button",
|
|
964
|
+
{
|
|
965
|
+
type: "button",
|
|
966
|
+
onClick: () => setOpen((v) => !v),
|
|
967
|
+
tabIndex: -1,
|
|
968
|
+
"aria-label": "Open calendar",
|
|
969
|
+
className: "px-3 h-full flex items-center text-muted-foreground hover:text-primary transition-colors focus:outline-none",
|
|
970
|
+
children: /* @__PURE__ */ jsx(CalendarIcon, { className: "h-4 w-4" })
|
|
971
|
+
}
|
|
972
|
+
)
|
|
973
|
+
]
|
|
974
|
+
}
|
|
975
|
+
),
|
|
976
|
+
open && /* @__PURE__ */ jsx("div", { className: "absolute top-[calc(100%+4px)] left-0 right-0 z-50 rounded-xl border border-border bg-background shadow-lg overflow-hidden", children: /* @__PURE__ */ jsx(
|
|
977
|
+
Calendar,
|
|
978
|
+
{
|
|
979
|
+
mode: "single",
|
|
980
|
+
selected: value,
|
|
981
|
+
onSelect: (date) => {
|
|
982
|
+
onChange(date);
|
|
983
|
+
setOpen(false);
|
|
984
|
+
},
|
|
985
|
+
defaultMonth: value != null ? value : new Date(1990, 0, 1),
|
|
986
|
+
disabled: { after: /* @__PURE__ */ new Date() },
|
|
987
|
+
className: "font-ui w-full",
|
|
988
|
+
autoFocus: true
|
|
989
|
+
}
|
|
990
|
+
) })
|
|
991
|
+
] });
|
|
992
|
+
}
|
|
993
|
+
var COUNTRIES = [
|
|
994
|
+
{ code: "AF", name: "Afghanistan" },
|
|
995
|
+
{ code: "AL", name: "Albania" },
|
|
996
|
+
{ code: "DZ", name: "Algeria" },
|
|
997
|
+
{ code: "AO", name: "Angola" },
|
|
998
|
+
{ code: "AR", name: "Argentina" },
|
|
999
|
+
{ code: "AM", name: "Armenia" },
|
|
1000
|
+
{ code: "AU", name: "Australia" },
|
|
1001
|
+
{ code: "AT", name: "Austria" },
|
|
1002
|
+
{ code: "AZ", name: "Azerbaijan" },
|
|
1003
|
+
{ code: "BE", name: "Belgium" },
|
|
1004
|
+
{ code: "BO", name: "Bolivia" },
|
|
1005
|
+
{ code: "BA", name: "Bosnia" },
|
|
1006
|
+
{ code: "BR", name: "Brazil" },
|
|
1007
|
+
{ code: "BG", name: "Bulgaria" },
|
|
1008
|
+
{ code: "KH", name: "Cambodia" },
|
|
1009
|
+
{ code: "CA", name: "Canada" },
|
|
1010
|
+
{ code: "CL", name: "Chile" },
|
|
1011
|
+
{ code: "CN", name: "China" },
|
|
1012
|
+
{ code: "CO", name: "Colombia" },
|
|
1013
|
+
{ code: "CR", name: "Costa Rica" },
|
|
1014
|
+
{ code: "HR", name: "Croatia" },
|
|
1015
|
+
{ code: "CU", name: "Cuba" },
|
|
1016
|
+
{ code: "CZ", name: "Czech Republic" },
|
|
1017
|
+
{ code: "DK", name: "Denmark" },
|
|
1018
|
+
{ code: "DO", name: "Dominican Republic" },
|
|
1019
|
+
{ code: "EC", name: "Ecuador" },
|
|
1020
|
+
{ code: "EG", name: "Egypt" },
|
|
1021
|
+
{ code: "SV", name: "El Salvador" },
|
|
1022
|
+
{ code: "ET", name: "Ethiopia" },
|
|
1023
|
+
{ code: "FI", name: "Finland" },
|
|
1024
|
+
{ code: "FR", name: "France" },
|
|
1025
|
+
{ code: "GE", name: "Georgia" },
|
|
1026
|
+
{ code: "DE", name: "Germany" },
|
|
1027
|
+
{ code: "GH", name: "Ghana" },
|
|
1028
|
+
{ code: "GR", name: "Greece" },
|
|
1029
|
+
{ code: "GT", name: "Guatemala" },
|
|
1030
|
+
{ code: "HN", name: "Honduras" },
|
|
1031
|
+
{ code: "HK", name: "Hong Kong" },
|
|
1032
|
+
{ code: "HU", name: "Hungary" },
|
|
1033
|
+
{ code: "IS", name: "Iceland" },
|
|
1034
|
+
{ code: "IN", name: "India" },
|
|
1035
|
+
{ code: "ID", name: "Indonesia" },
|
|
1036
|
+
{ code: "IR", name: "Iran" },
|
|
1037
|
+
{ code: "IQ", name: "Iraq" },
|
|
1038
|
+
{ code: "IE", name: "Ireland" },
|
|
1039
|
+
{ code: "IL", name: "Israel" },
|
|
1040
|
+
{ code: "IT", name: "Italy" },
|
|
1041
|
+
{ code: "JM", name: "Jamaica" },
|
|
1042
|
+
{ code: "JP", name: "Japan" },
|
|
1043
|
+
{ code: "JO", name: "Jordan" },
|
|
1044
|
+
{ code: "KZ", name: "Kazakhstan" },
|
|
1045
|
+
{ code: "KE", name: "Kenya" },
|
|
1046
|
+
{ code: "KW", name: "Kuwait" },
|
|
1047
|
+
{ code: "LB", name: "Lebanon" },
|
|
1048
|
+
{ code: "LY", name: "Libya" },
|
|
1049
|
+
{ code: "MY", name: "Malaysia" },
|
|
1050
|
+
{ code: "MX", name: "Mexico" },
|
|
1051
|
+
{ code: "MA", name: "Morocco" },
|
|
1052
|
+
{ code: "MZ", name: "Mozambique" },
|
|
1053
|
+
{ code: "NP", name: "Nepal" },
|
|
1054
|
+
{ code: "NL", name: "Netherlands" },
|
|
1055
|
+
{ code: "NZ", name: "New Zealand" },
|
|
1056
|
+
{ code: "NI", name: "Nicaragua" },
|
|
1057
|
+
{ code: "NG", name: "Nigeria" },
|
|
1058
|
+
{ code: "NO", name: "Norway" },
|
|
1059
|
+
{ code: "PK", name: "Pakistan" },
|
|
1060
|
+
{ code: "PA", name: "Panama" },
|
|
1061
|
+
{ code: "PY", name: "Paraguay" },
|
|
1062
|
+
{ code: "PE", name: "Peru" },
|
|
1063
|
+
{ code: "PH", name: "Philippines" },
|
|
1064
|
+
{ code: "PL", name: "Poland" },
|
|
1065
|
+
{ code: "PT", name: "Portugal" },
|
|
1066
|
+
{ code: "QA", name: "Qatar" },
|
|
1067
|
+
{ code: "RO", name: "Romania" },
|
|
1068
|
+
{ code: "RU", name: "Russia" },
|
|
1069
|
+
{ code: "SA", name: "Saudi Arabia" },
|
|
1070
|
+
{ code: "SN", name: "Senegal" },
|
|
1071
|
+
{ code: "RS", name: "Serbia" },
|
|
1072
|
+
{ code: "SG", name: "Singapore" },
|
|
1073
|
+
{ code: "ZA", name: "South Africa" },
|
|
1074
|
+
{ code: "KR", name: "South Korea" },
|
|
1075
|
+
{ code: "ES", name: "Spain" },
|
|
1076
|
+
{ code: "LK", name: "Sri Lanka" },
|
|
1077
|
+
{ code: "SE", name: "Sweden" },
|
|
1078
|
+
{ code: "CH", name: "Switzerland" },
|
|
1079
|
+
{ code: "TW", name: "Taiwan" },
|
|
1080
|
+
{ code: "TZ", name: "Tanzania" },
|
|
1081
|
+
{ code: "TH", name: "Thailand" },
|
|
1082
|
+
{ code: "TN", name: "Tunisia" },
|
|
1083
|
+
{ code: "TR", name: "Turkey" },
|
|
1084
|
+
{ code: "UA", name: "Ukraine" },
|
|
1085
|
+
{ code: "AE", name: "United Arab Emirates" },
|
|
1086
|
+
{ code: "GB", name: "United Kingdom" },
|
|
1087
|
+
{ code: "US", name: "United States" },
|
|
1088
|
+
{ code: "UY", name: "Uruguay" },
|
|
1089
|
+
{ code: "UZ", name: "Uzbekistan" },
|
|
1090
|
+
{ code: "VE", name: "Venezuela" },
|
|
1091
|
+
{ code: "VN", name: "Vietnam" },
|
|
1092
|
+
{ code: "YE", name: "Yemen" },
|
|
1093
|
+
{ code: "ZW", name: "Zimbabwe" }
|
|
1094
|
+
];
|
|
1095
|
+
function CountrySearchField({
|
|
1096
|
+
value,
|
|
1097
|
+
onChange,
|
|
1098
|
+
required,
|
|
1099
|
+
label = "Country",
|
|
1100
|
+
countries,
|
|
1101
|
+
placeholder = "Search country\u2026",
|
|
1102
|
+
className
|
|
1103
|
+
}) {
|
|
1104
|
+
var _a;
|
|
1105
|
+
const list = countries != null ? countries : COUNTRIES;
|
|
1106
|
+
const [query, setQuery] = React21.useState("");
|
|
1107
|
+
const [open, setOpen] = React21.useState(false);
|
|
1108
|
+
const containerRef = React21.useRef(null);
|
|
1109
|
+
const searchRef = React21.useRef(null);
|
|
1110
|
+
const selected = list.find((c) => c.code === value);
|
|
1111
|
+
const isFloated = open || !!selected;
|
|
1112
|
+
const filtered = query.trim() ? list.filter((c) => c.name.toLowerCase().includes(query.toLowerCase())) : list;
|
|
1113
|
+
React21.useEffect(() => {
|
|
1114
|
+
if (!open) return;
|
|
1115
|
+
const handler = (e) => {
|
|
1116
|
+
var _a2;
|
|
1117
|
+
if (!((_a2 = containerRef.current) == null ? void 0 : _a2.contains(e.target))) {
|
|
1118
|
+
setOpen(false);
|
|
1119
|
+
setQuery("");
|
|
1120
|
+
}
|
|
1121
|
+
};
|
|
1122
|
+
document.addEventListener("mousedown", handler);
|
|
1123
|
+
return () => document.removeEventListener("mousedown", handler);
|
|
1124
|
+
}, [open]);
|
|
1125
|
+
const handleOpen = () => {
|
|
1126
|
+
setOpen(true);
|
|
1127
|
+
setQuery("");
|
|
1128
|
+
setTimeout(() => {
|
|
1129
|
+
var _a2;
|
|
1130
|
+
return (_a2 = searchRef.current) == null ? void 0 : _a2.focus();
|
|
1131
|
+
}, 0);
|
|
1026
1132
|
};
|
|
1027
1133
|
const handleSelect = (code) => {
|
|
1028
1134
|
onChange(code);
|
|
@@ -1111,7 +1217,7 @@ function Alert({ variant = "info", children, className }) {
|
|
|
1111
1217
|
function AdventureCard({ adventure }) {
|
|
1112
1218
|
var _a, _b, _c, _d, _e, _f;
|
|
1113
1219
|
const isControlled = (_b = (_a = adventure.optionals) == null ? void 0 : _a.some((o) => o.onCheckedChange !== void 0)) != null ? _b : false;
|
|
1114
|
-
const [checkedInternal, setCheckedInternal] =
|
|
1220
|
+
const [checkedInternal, setCheckedInternal] = React21.useState(
|
|
1115
1221
|
new Set((_d = (_c = adventure.optionals) == null ? void 0 : _c.filter((o) => o.defaultChecked).map((o) => o.id)) != null ? _d : [])
|
|
1116
1222
|
);
|
|
1117
1223
|
const isChecked = (opt) => {
|
|
@@ -1429,129 +1535,26 @@ function OfferSummarySection({
|
|
|
1429
1535
|
)
|
|
1430
1536
|
] });
|
|
1431
1537
|
}
|
|
1432
|
-
function
|
|
1433
|
-
|
|
1434
|
-
|
|
1435
|
-
|
|
1436
|
-
|
|
1437
|
-
|
|
1438
|
-
|
|
1439
|
-
|
|
1440
|
-
|
|
1441
|
-
|
|
1442
|
-
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
|
|
1446
|
-
|
|
1447
|
-
const handler = (e) => {
|
|
1448
|
-
var _a;
|
|
1449
|
-
if (!((_a = containerRef.current) == null ? void 0 : _a.contains(e.target))) setOpen(false);
|
|
1450
|
-
};
|
|
1451
|
-
document.addEventListener("mousedown", handler);
|
|
1452
|
-
return () => document.removeEventListener("mousedown", handler);
|
|
1453
|
-
}, [open]);
|
|
1454
|
-
const handleTextChange = (e) => {
|
|
1455
|
-
const digits = e.target.value.replace(/\D/g, "").slice(0, 8);
|
|
1456
|
-
let formatted = digits.slice(0, 2);
|
|
1457
|
-
if (digits.length > 2) formatted += "/" + digits.slice(2, 4);
|
|
1458
|
-
if (digits.length > 4) formatted += "/" + digits.slice(4, 8);
|
|
1459
|
-
setText(formatted);
|
|
1460
|
-
if (formatted.length === 10) {
|
|
1461
|
-
const [dd, mm, yyyy] = formatted.split("/").map(Number);
|
|
1462
|
-
const d = new Date(yyyy, mm - 1, dd);
|
|
1463
|
-
if (!isNaN(d.getTime()) && d.getFullYear() === yyyy && d <= /* @__PURE__ */ new Date()) {
|
|
1464
|
-
onChange(d);
|
|
1465
|
-
return;
|
|
1466
|
-
}
|
|
1467
|
-
}
|
|
1468
|
-
onChange(void 0);
|
|
1469
|
-
};
|
|
1470
|
-
return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative w-full", children: [
|
|
1471
|
-
/* @__PURE__ */ jsxs(
|
|
1472
|
-
"div",
|
|
1473
|
-
{
|
|
1474
|
-
className: cn(
|
|
1475
|
-
"flex items-center rounded-lg border border-border bg-background h-14 transition-colors",
|
|
1476
|
-
open ? "border-primary ring-1 ring-primary" : "focus-within:border-primary focus-within:ring-1 focus-within:ring-primary"
|
|
1477
|
-
),
|
|
1478
|
-
children: [
|
|
1479
|
-
/* @__PURE__ */ jsxs("div", { className: "relative flex-1 h-full", children: [
|
|
1480
|
-
/* @__PURE__ */ jsxs(
|
|
1481
|
-
"label",
|
|
1482
|
-
{
|
|
1483
|
-
htmlFor: inputId,
|
|
1484
|
-
className: "pointer-events-none absolute left-3 top-2 text-xs text-muted-foreground font-ui",
|
|
1485
|
-
children: [
|
|
1486
|
-
label,
|
|
1487
|
-
required && /* @__PURE__ */ jsx("span", { className: "text-primary ml-0.5", children: "*" })
|
|
1488
|
-
]
|
|
1489
|
-
}
|
|
1490
|
-
),
|
|
1491
|
-
/* @__PURE__ */ jsx(
|
|
1492
|
-
"input",
|
|
1493
|
-
{
|
|
1494
|
-
id: inputId,
|
|
1495
|
-
type: "text",
|
|
1496
|
-
inputMode: "numeric",
|
|
1497
|
-
value: text,
|
|
1498
|
-
onChange: handleTextChange,
|
|
1499
|
-
placeholder: "dd/mm/yyyy",
|
|
1500
|
-
className: "block h-full w-full bg-transparent px-3 pt-5 pb-2 text-base text-foreground font-ui focus:outline-none placeholder:text-muted-foreground/50"
|
|
1501
|
-
}
|
|
1502
|
-
)
|
|
1503
|
-
] }),
|
|
1504
|
-
/* @__PURE__ */ jsx(
|
|
1505
|
-
"button",
|
|
1506
|
-
{
|
|
1507
|
-
type: "button",
|
|
1508
|
-
onClick: () => setOpen((v) => !v),
|
|
1509
|
-
tabIndex: -1,
|
|
1510
|
-
"aria-label": "Open calendar",
|
|
1511
|
-
className: "px-3 h-full flex items-center text-muted-foreground hover:text-primary transition-colors focus:outline-none",
|
|
1512
|
-
children: /* @__PURE__ */ jsx(CalendarIcon, { className: "h-4 w-4" })
|
|
1513
|
-
}
|
|
1514
|
-
)
|
|
1515
|
-
]
|
|
1516
|
-
}
|
|
1517
|
-
),
|
|
1518
|
-
open && /* @__PURE__ */ jsx("div", { className: "absolute top-[calc(100%+4px)] left-0 right-0 z-50 rounded-xl border border-border bg-background shadow-lg overflow-hidden", children: /* @__PURE__ */ jsx(
|
|
1519
|
-
Calendar,
|
|
1520
|
-
{
|
|
1521
|
-
mode: "single",
|
|
1522
|
-
selected: value,
|
|
1523
|
-
onSelect: (date) => {
|
|
1524
|
-
onChange(date);
|
|
1525
|
-
setOpen(false);
|
|
1526
|
-
},
|
|
1527
|
-
defaultMonth: value != null ? value : new Date(1990, 0, 1),
|
|
1528
|
-
disabled: { after: /* @__PURE__ */ new Date() },
|
|
1529
|
-
className: "font-ui w-full",
|
|
1530
|
-
autoFocus: true
|
|
1531
|
-
}
|
|
1532
|
-
) })
|
|
1533
|
-
] });
|
|
1534
|
-
}
|
|
1535
|
-
function BookingShell({
|
|
1536
|
-
steps,
|
|
1537
|
-
currentStep,
|
|
1538
|
-
title = "Booking details",
|
|
1539
|
-
children,
|
|
1540
|
-
onNext,
|
|
1541
|
-
onBack,
|
|
1542
|
-
onCancel,
|
|
1543
|
-
nextLabel = "Next",
|
|
1544
|
-
backLabel = "Back",
|
|
1545
|
-
cancelLabel = "Cancel",
|
|
1546
|
-
nextDisabled,
|
|
1547
|
-
nextBlockedMessage,
|
|
1548
|
-
error,
|
|
1549
|
-
successMessage
|
|
1538
|
+
function BookingShell({
|
|
1539
|
+
steps,
|
|
1540
|
+
currentStep,
|
|
1541
|
+
title = "Booking details",
|
|
1542
|
+
children,
|
|
1543
|
+
onNext,
|
|
1544
|
+
onBack,
|
|
1545
|
+
onCancel,
|
|
1546
|
+
nextLabel = "Next",
|
|
1547
|
+
backLabel = "Back",
|
|
1548
|
+
cancelLabel = "Cancel",
|
|
1549
|
+
nextDisabled,
|
|
1550
|
+
nextBlockedMessage,
|
|
1551
|
+
error,
|
|
1552
|
+
successMessage
|
|
1550
1553
|
}) {
|
|
1551
1554
|
return /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border border-border bg-card overflow-hidden", children: [
|
|
1552
1555
|
/* @__PURE__ */ jsxs("div", { className: "border-b border-border px-5 py-4 bg-muted/20", children: [
|
|
1553
1556
|
/* @__PURE__ */ jsx("h3", { className: "text-base font-bold text-foreground font-heading mb-2", children: title }),
|
|
1554
|
-
/* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5 flex-wrap", children: steps.map((label, i) => /* @__PURE__ */ jsxs(
|
|
1557
|
+
/* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5 flex-wrap", children: steps.map((label, i) => /* @__PURE__ */ jsxs(React21.Fragment, { children: [
|
|
1555
1558
|
/* @__PURE__ */ jsx(
|
|
1556
1559
|
"span",
|
|
1557
1560
|
{
|
|
@@ -1749,7 +1752,7 @@ function TermsSection({
|
|
|
1749
1752
|
locale = "en"
|
|
1750
1753
|
}) {
|
|
1751
1754
|
var _a;
|
|
1752
|
-
const [modalOpen, setModalOpen] =
|
|
1755
|
+
const [modalOpen, setModalOpen] = React21.useState(false);
|
|
1753
1756
|
const i18n = (_a = TERMS_I18N[locale]) != null ? _a : TERMS_I18N.en;
|
|
1754
1757
|
return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-border p-4 flex flex-col gap-3", children: [
|
|
1755
1758
|
/* @__PURE__ */ jsx("p", { className: "text-xs font-bold text-muted-foreground font-heading uppercase tracking-widest", children: title }),
|
|
@@ -1778,7 +1781,7 @@ function TermsSection({
|
|
|
1778
1781
|
] })
|
|
1779
1782
|
] }),
|
|
1780
1783
|
!checked && warningMessage && /* @__PURE__ */ jsx("p", { className: "text-xs text-amber-400 flex items-center gap-1", children: warningMessage }),
|
|
1781
|
-
/* @__PURE__ */ jsx(Dialog, { open: modalOpen, onOpenChange: setModalOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-
|
|
1784
|
+
/* @__PURE__ */ jsx(Dialog, { open: modalOpen, onOpenChange: setModalOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-[90vw] w-full max-h-[80vh] overflow-y-auto", children: [
|
|
1782
1785
|
/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsxs(DialogTitle, { className: "font-heading text-xl", children: [
|
|
1783
1786
|
i18n.modalTitle,
|
|
1784
1787
|
" \u2014 PlanetaEXO"
|
|
@@ -1837,9 +1840,9 @@ function BookingWizard({
|
|
|
1837
1840
|
depositInfo,
|
|
1838
1841
|
onCancel
|
|
1839
1842
|
}) {
|
|
1840
|
-
const [step, setStep] =
|
|
1841
|
-
const [error, setError] =
|
|
1842
|
-
const [responsible, setResponsible] =
|
|
1843
|
+
const [step, setStep] = React21.useState("responsible");
|
|
1844
|
+
const [error, setError] = React21.useState(null);
|
|
1845
|
+
const [responsible, setResponsible] = React21.useState({
|
|
1843
1846
|
firstName: "",
|
|
1844
1847
|
lastName: "",
|
|
1845
1848
|
email: "",
|
|
@@ -1858,7 +1861,7 @@ function BookingWizard({
|
|
|
1858
1861
|
return s + ((_b = (_a = a.slots) == null ? void 0 : _a.children) != null ? _b : 0);
|
|
1859
1862
|
}, 0);
|
|
1860
1863
|
const totalPax = totalAdults + totalChildren;
|
|
1861
|
-
const [travellers, setTravellers] =
|
|
1864
|
+
const [travellers, setTravellers] = React21.useState(
|
|
1862
1865
|
Array.from({ length: Math.max(totalPax, 1) }, () => ({
|
|
1863
1866
|
firstName: "",
|
|
1864
1867
|
lastName: "",
|
|
@@ -1866,9 +1869,9 @@ function BookingWizard({
|
|
|
1866
1869
|
email: ""
|
|
1867
1870
|
}))
|
|
1868
1871
|
);
|
|
1869
|
-
const [payAmount, setPayAmount] =
|
|
1870
|
-
const [payMethod, setPayMethod] =
|
|
1871
|
-
const [termsAccepted, setTermsAccepted] =
|
|
1872
|
+
const [payAmount, setPayAmount] = React21.useState("full");
|
|
1873
|
+
const [payMethod, setPayMethod] = React21.useState("stripe");
|
|
1874
|
+
const [termsAccepted, setTermsAccepted] = React21.useState(false);
|
|
1872
1875
|
const setR = (k, v) => setResponsible((p) => __spreadProps(__spreadValues({}, p), { [k]: v }));
|
|
1873
1876
|
const setT = (i, k, v) => setTravellers((prev) => prev.map((t, idx) => idx === i ? __spreadProps(__spreadValues({}, t), { [k]: v }) : t));
|
|
1874
1877
|
const setTDob = (i, v) => setTravellers((prev) => prev.map((t, idx) => idx === i ? __spreadProps(__spreadValues({}, t), { dateOfBirth: v }) : t));
|
|
@@ -2069,7 +2072,7 @@ function Offer({
|
|
|
2069
2072
|
continueDisabled,
|
|
2070
2073
|
className
|
|
2071
2074
|
}) {
|
|
2072
|
-
const [showBooking, setShowBooking] =
|
|
2075
|
+
const [showBooking, setShowBooking] = React21.useState(false);
|
|
2073
2076
|
const isShowingCheckout = !!checkoutSlot || showBooking;
|
|
2074
2077
|
const handleBook = () => {
|
|
2075
2078
|
if (!checkoutSlot && !externalBookingFlow) setShowBooking(true);
|
|
@@ -2191,9 +2194,9 @@ function AdventureSection({
|
|
|
2191
2194
|
onAddSuggestedTraveller
|
|
2192
2195
|
}) {
|
|
2193
2196
|
var _a, _b, _c;
|
|
2194
|
-
const [detailsOpen, setDetailsOpen] =
|
|
2195
|
-
const [addModalOpen, setAddModalOpen] =
|
|
2196
|
-
const [newTraveller, setNewTraveller] =
|
|
2197
|
+
const [detailsOpen, setDetailsOpen] = React21.useState(false);
|
|
2198
|
+
const [addModalOpen, setAddModalOpen] = React21.useState(false);
|
|
2199
|
+
const [newTraveller, setNewTraveller] = React21.useState({
|
|
2197
2200
|
firstName: "",
|
|
2198
2201
|
lastName: "",
|
|
2199
2202
|
passport: "",
|
|
@@ -3313,465 +3316,1208 @@ function BookingConfirmationEmail({
|
|
|
3313
3316
|
/* @__PURE__ */ jsx("td", { className: "py-1 pr-4 text-muted-foreground font-ui", children: l.hostLabel }),
|
|
3314
3317
|
/* @__PURE__ */ jsx("td", { className: "py-1 font-medium text-foreground", children: host })
|
|
3315
3318
|
] })
|
|
3316
|
-
] }) }),
|
|
3317
|
-
/* @__PURE__ */ jsx("hr", { className: "border-t border-border mb-8" }),
|
|
3318
|
-
/* @__PURE__ */ jsx("p", { className: "mb-4", children: l.postCtaMessage }),
|
|
3319
|
-
/* @__PURE__ */ jsx("p", { children: l.closingMessage })
|
|
3320
|
-
]
|
|
3321
|
-
}
|
|
3322
|
-
);
|
|
3323
|
-
}
|
|
3324
|
-
function CounterField({
|
|
3325
|
-
label,
|
|
3326
|
-
sublabel,
|
|
3327
|
-
required,
|
|
3328
|
-
value,
|
|
3329
|
-
min = 0,
|
|
3330
|
-
max = 99,
|
|
3331
|
-
onChange,
|
|
3332
|
-
className
|
|
3333
|
-
}) {
|
|
3334
|
-
const decrement = () => {
|
|
3335
|
-
if (value > min) onChange(value - 1);
|
|
3336
|
-
};
|
|
3337
|
-
const increment = () => {
|
|
3338
|
-
if (value < max) onChange(value + 1);
|
|
3339
|
-
};
|
|
3340
|
-
return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2", className), children: [
|
|
3341
|
-
/* @__PURE__ */ jsxs("label", { className: "text-sm font-ui text-foreground", children: [
|
|
3342
|
-
label,
|
|
3343
|
-
sublabel && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-normal ml-1", children: sublabel }),
|
|
3344
|
-
required && /* @__PURE__ */ jsx("span", { className: "text-primary ml-0.5", children: "*" })
|
|
3345
|
-
] }),
|
|
3346
|
-
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded-lg border border-border bg-background px-4 py-3 h-14", children: [
|
|
3347
|
-
/* @__PURE__ */ jsx("span", { className: "text-xl font-semibold text-foreground tabular-nums w-8 font-ui", children: value }),
|
|
3348
|
-
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
3349
|
-
/* @__PURE__ */ jsx(
|
|
3350
|
-
"button",
|
|
3351
|
-
{
|
|
3352
|
-
type: "button",
|
|
3353
|
-
onClick: decrement,
|
|
3354
|
-
disabled: value <= min,
|
|
3355
|
-
"aria-label": `Diminuir ${label}`,
|
|
3356
|
-
className: cn(
|
|
3357
|
-
"inline-flex h-8 w-8 items-center justify-center rounded-full border border-border",
|
|
3358
|
-
"text-foreground transition-colors",
|
|
3359
|
-
"hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
|
3360
|
-
"disabled:pointer-events-none disabled:opacity-30"
|
|
3361
|
-
),
|
|
3362
|
-
children: /* @__PURE__ */ jsx(MinusIcon, { className: "h-3.5 w-3.5" })
|
|
3363
|
-
}
|
|
3364
|
-
),
|
|
3365
|
-
/* @__PURE__ */ jsx(
|
|
3319
|
+
] }) }),
|
|
3320
|
+
/* @__PURE__ */ jsx("hr", { className: "border-t border-border mb-8" }),
|
|
3321
|
+
/* @__PURE__ */ jsx("p", { className: "mb-4", children: l.postCtaMessage }),
|
|
3322
|
+
/* @__PURE__ */ jsx("p", { children: l.closingMessage })
|
|
3323
|
+
]
|
|
3324
|
+
}
|
|
3325
|
+
);
|
|
3326
|
+
}
|
|
3327
|
+
function CounterField({
|
|
3328
|
+
label,
|
|
3329
|
+
sublabel,
|
|
3330
|
+
required,
|
|
3331
|
+
value,
|
|
3332
|
+
min = 0,
|
|
3333
|
+
max = 99,
|
|
3334
|
+
onChange,
|
|
3335
|
+
className
|
|
3336
|
+
}) {
|
|
3337
|
+
const decrement = () => {
|
|
3338
|
+
if (value > min) onChange(value - 1);
|
|
3339
|
+
};
|
|
3340
|
+
const increment = () => {
|
|
3341
|
+
if (value < max) onChange(value + 1);
|
|
3342
|
+
};
|
|
3343
|
+
return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2", className), children: [
|
|
3344
|
+
/* @__PURE__ */ jsxs("label", { className: "text-sm font-ui text-foreground", children: [
|
|
3345
|
+
label,
|
|
3346
|
+
sublabel && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-normal ml-1", children: sublabel }),
|
|
3347
|
+
required && /* @__PURE__ */ jsx("span", { className: "text-primary ml-0.5", children: "*" })
|
|
3348
|
+
] }),
|
|
3349
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded-lg border border-border bg-background px-4 py-3 h-14", children: [
|
|
3350
|
+
/* @__PURE__ */ jsx("span", { className: "text-xl font-semibold text-foreground tabular-nums w-8 font-ui", children: value }),
|
|
3351
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
3352
|
+
/* @__PURE__ */ jsx(
|
|
3353
|
+
"button",
|
|
3354
|
+
{
|
|
3355
|
+
type: "button",
|
|
3356
|
+
onClick: decrement,
|
|
3357
|
+
disabled: value <= min,
|
|
3358
|
+
"aria-label": `Diminuir ${label}`,
|
|
3359
|
+
className: cn(
|
|
3360
|
+
"inline-flex h-8 w-8 items-center justify-center rounded-full border border-border",
|
|
3361
|
+
"text-foreground transition-colors",
|
|
3362
|
+
"hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
|
3363
|
+
"disabled:pointer-events-none disabled:opacity-30"
|
|
3364
|
+
),
|
|
3365
|
+
children: /* @__PURE__ */ jsx(MinusIcon, { className: "h-3.5 w-3.5" })
|
|
3366
|
+
}
|
|
3367
|
+
),
|
|
3368
|
+
/* @__PURE__ */ jsx(
|
|
3369
|
+
"button",
|
|
3370
|
+
{
|
|
3371
|
+
type: "button",
|
|
3372
|
+
onClick: increment,
|
|
3373
|
+
disabled: value >= max,
|
|
3374
|
+
"aria-label": `Aumentar ${label}`,
|
|
3375
|
+
className: cn(
|
|
3376
|
+
"inline-flex h-8 w-8 items-center justify-center rounded-full border border-border",
|
|
3377
|
+
"text-foreground transition-colors",
|
|
3378
|
+
"hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
|
3379
|
+
"disabled:pointer-events-none disabled:opacity-30"
|
|
3380
|
+
),
|
|
3381
|
+
children: /* @__PURE__ */ jsx(PlusIcon, { className: "h-3.5 w-3.5" })
|
|
3382
|
+
}
|
|
3383
|
+
)
|
|
3384
|
+
] })
|
|
3385
|
+
] })
|
|
3386
|
+
] });
|
|
3387
|
+
}
|
|
3388
|
+
function Popover(_a) {
|
|
3389
|
+
var props = __objRest(_a, []);
|
|
3390
|
+
return /* @__PURE__ */ jsx(Popover$1.Root, __spreadValues({ "data-slot": "popover" }, props));
|
|
3391
|
+
}
|
|
3392
|
+
function PopoverTrigger(_a) {
|
|
3393
|
+
var props = __objRest(_a, []);
|
|
3394
|
+
return /* @__PURE__ */ jsx(Popover$1.Trigger, __spreadValues({ "data-slot": "popover-trigger" }, props));
|
|
3395
|
+
}
|
|
3396
|
+
function PopoverContent(_a) {
|
|
3397
|
+
var _b = _a, {
|
|
3398
|
+
className,
|
|
3399
|
+
align = "center",
|
|
3400
|
+
alignOffset = 0,
|
|
3401
|
+
side = "bottom",
|
|
3402
|
+
sideOffset = 4
|
|
3403
|
+
} = _b, props = __objRest(_b, [
|
|
3404
|
+
"className",
|
|
3405
|
+
"align",
|
|
3406
|
+
"alignOffset",
|
|
3407
|
+
"side",
|
|
3408
|
+
"sideOffset"
|
|
3409
|
+
]);
|
|
3410
|
+
return /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(
|
|
3411
|
+
Popover$1.Positioner,
|
|
3412
|
+
{
|
|
3413
|
+
align,
|
|
3414
|
+
alignOffset,
|
|
3415
|
+
side,
|
|
3416
|
+
sideOffset,
|
|
3417
|
+
className: "isolate z-50",
|
|
3418
|
+
children: /* @__PURE__ */ jsx(
|
|
3419
|
+
Popover$1.Popup,
|
|
3420
|
+
__spreadValues({
|
|
3421
|
+
"data-slot": "popover-content",
|
|
3422
|
+
className: cn(
|
|
3423
|
+
"z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
|
3424
|
+
className
|
|
3425
|
+
)
|
|
3426
|
+
}, props)
|
|
3427
|
+
)
|
|
3428
|
+
}
|
|
3429
|
+
) });
|
|
3430
|
+
}
|
|
3431
|
+
function DatePickerField({
|
|
3432
|
+
label,
|
|
3433
|
+
required,
|
|
3434
|
+
value,
|
|
3435
|
+
onChange,
|
|
3436
|
+
placeholder = "Select a date",
|
|
3437
|
+
disabled,
|
|
3438
|
+
fromDate,
|
|
3439
|
+
className
|
|
3440
|
+
}) {
|
|
3441
|
+
const [open, setOpen] = React21.useState(false);
|
|
3442
|
+
const containerRef = React21.useRef(null);
|
|
3443
|
+
const [calendarWidth, setCalendarWidth] = React21.useState();
|
|
3444
|
+
const hasValue = !!value;
|
|
3445
|
+
React21.useEffect(() => {
|
|
3446
|
+
if (!containerRef.current) return;
|
|
3447
|
+
const observer = new ResizeObserver(([entry]) => {
|
|
3448
|
+
setCalendarWidth(entry.contentRect.width);
|
|
3449
|
+
});
|
|
3450
|
+
observer.observe(containerRef.current);
|
|
3451
|
+
return () => observer.disconnect();
|
|
3452
|
+
}, []);
|
|
3453
|
+
return /* @__PURE__ */ jsx("div", { ref: containerRef, className: cn("w-full", className), children: /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
|
|
3454
|
+
/* @__PURE__ */ jsxs(
|
|
3455
|
+
PopoverTrigger,
|
|
3456
|
+
{
|
|
3457
|
+
disabled,
|
|
3458
|
+
className: cn(
|
|
3459
|
+
"relative flex w-full items-center rounded-lg border border-border bg-background",
|
|
3460
|
+
"px-3 text-left text-base font-ui transition-colors h-14",
|
|
3461
|
+
"focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary",
|
|
3462
|
+
"disabled:pointer-events-none disabled:opacity-50",
|
|
3463
|
+
open && "border-primary ring-1 ring-primary"
|
|
3464
|
+
),
|
|
3465
|
+
children: [
|
|
3466
|
+
/* @__PURE__ */ jsxs(
|
|
3467
|
+
"span",
|
|
3468
|
+
{
|
|
3469
|
+
className: cn(
|
|
3470
|
+
"pointer-events-none absolute left-3 transition-all duration-150 font-ui",
|
|
3471
|
+
hasValue || open ? "top-2 text-xs text-primary" : "top-1/2 -translate-y-1/2 text-base text-muted-foreground"
|
|
3472
|
+
),
|
|
3473
|
+
children: [
|
|
3474
|
+
label,
|
|
3475
|
+
required && /* @__PURE__ */ jsx("span", { className: "text-primary ml-0.5", children: "*" })
|
|
3476
|
+
]
|
|
3477
|
+
}
|
|
3478
|
+
),
|
|
3479
|
+
/* @__PURE__ */ jsx(
|
|
3480
|
+
"span",
|
|
3481
|
+
{
|
|
3482
|
+
className: cn(
|
|
3483
|
+
"flex-1 truncate mt-3",
|
|
3484
|
+
hasValue ? "text-foreground" : "invisible"
|
|
3485
|
+
),
|
|
3486
|
+
children: hasValue ? format(value, "dd MMM yyyy") : placeholder
|
|
3487
|
+
}
|
|
3488
|
+
),
|
|
3489
|
+
/* @__PURE__ */ jsx(CalendarIcon, { className: "ml-2 h-4 w-4 shrink-0 text-muted-foreground" })
|
|
3490
|
+
]
|
|
3491
|
+
}
|
|
3492
|
+
),
|
|
3493
|
+
/* @__PURE__ */ jsx(
|
|
3494
|
+
PopoverContent,
|
|
3495
|
+
{
|
|
3496
|
+
className: "p-0",
|
|
3497
|
+
align: "start",
|
|
3498
|
+
style: calendarWidth ? { width: calendarWidth } : void 0,
|
|
3499
|
+
children: /* @__PURE__ */ jsx(
|
|
3500
|
+
Calendar,
|
|
3501
|
+
{
|
|
3502
|
+
mode: "single",
|
|
3503
|
+
selected: value,
|
|
3504
|
+
onSelect: (date) => {
|
|
3505
|
+
onChange == null ? void 0 : onChange(date);
|
|
3506
|
+
setOpen(false);
|
|
3507
|
+
},
|
|
3508
|
+
fromDate: fromDate != null ? fromDate : /* @__PURE__ */ new Date(),
|
|
3509
|
+
className: "font-ui w-full",
|
|
3510
|
+
autoFocus: true
|
|
3511
|
+
}
|
|
3512
|
+
)
|
|
3513
|
+
}
|
|
3514
|
+
)
|
|
3515
|
+
] }) });
|
|
3516
|
+
}
|
|
3517
|
+
function FormSection({
|
|
3518
|
+
title,
|
|
3519
|
+
children,
|
|
3520
|
+
className
|
|
3521
|
+
}) {
|
|
3522
|
+
return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-5", className), children: [
|
|
3523
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
|
|
3524
|
+
/* @__PURE__ */ jsx("h3", { className: "text-base font-bold text-foreground whitespace-nowrap font-heading", children: title }),
|
|
3525
|
+
/* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-border" })
|
|
3526
|
+
] }),
|
|
3527
|
+
children
|
|
3528
|
+
] });
|
|
3529
|
+
}
|
|
3530
|
+
var defaultInitial = {
|
|
3531
|
+
adults: 2,
|
|
3532
|
+
children: 0,
|
|
3533
|
+
travelDate: void 0,
|
|
3534
|
+
budget: "",
|
|
3535
|
+
project: "",
|
|
3536
|
+
civility: "",
|
|
3537
|
+
phoneCountry: "BR",
|
|
3538
|
+
lastName: "",
|
|
3539
|
+
firstName: "",
|
|
3540
|
+
country: "France",
|
|
3541
|
+
phone: "",
|
|
3542
|
+
email: ""
|
|
3543
|
+
};
|
|
3544
|
+
function BookingForm({
|
|
3545
|
+
defaultValues,
|
|
3546
|
+
onSubmit,
|
|
3547
|
+
submitLabel = "Send my request",
|
|
3548
|
+
loading = false,
|
|
3549
|
+
showHeader = true,
|
|
3550
|
+
title = "Check availability for your trip",
|
|
3551
|
+
subtitle = "Free enquiry \u2013 no commitment",
|
|
3552
|
+
className
|
|
3553
|
+
}) {
|
|
3554
|
+
const [values, setValues] = React21.useState(__spreadValues(__spreadValues({}, defaultInitial), defaultValues));
|
|
3555
|
+
const set = (key, value) => setValues((prev) => __spreadProps(__spreadValues({}, prev), { [key]: value }));
|
|
3556
|
+
const handleSubmit = (e) => {
|
|
3557
|
+
e.preventDefault();
|
|
3558
|
+
onSubmit == null ? void 0 : onSubmit(values);
|
|
3559
|
+
};
|
|
3560
|
+
return /* @__PURE__ */ jsxs(
|
|
3561
|
+
"form",
|
|
3562
|
+
{
|
|
3563
|
+
onSubmit: handleSubmit,
|
|
3564
|
+
className: cn("flex flex-col gap-10", className),
|
|
3565
|
+
noValidate: true,
|
|
3566
|
+
children: [
|
|
3567
|
+
showHeader && /* @__PURE__ */ jsxs("div", { children: [
|
|
3568
|
+
/* @__PURE__ */ jsx("h2", { className: "text-2xl font-black uppercase tracking-wide text-foreground font-heading leading-tight", children: title }),
|
|
3569
|
+
/* @__PURE__ */ jsx("p", { className: "mt-1.5 text-sm text-muted-foreground font-ui", children: subtitle })
|
|
3570
|
+
] }),
|
|
3571
|
+
/* @__PURE__ */ jsx(FormSection, { title: "Who's joining the adventure?", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [
|
|
3572
|
+
/* @__PURE__ */ jsx(
|
|
3573
|
+
CounterField,
|
|
3574
|
+
{
|
|
3575
|
+
label: "Adults",
|
|
3576
|
+
required: true,
|
|
3577
|
+
value: values.adults,
|
|
3578
|
+
min: 1,
|
|
3579
|
+
onChange: (v) => set("adults", v)
|
|
3580
|
+
}
|
|
3581
|
+
),
|
|
3582
|
+
/* @__PURE__ */ jsx(
|
|
3583
|
+
CounterField,
|
|
3584
|
+
{
|
|
3585
|
+
label: "Children",
|
|
3586
|
+
sublabel: "(under 12)",
|
|
3587
|
+
value: values.children,
|
|
3588
|
+
min: 0,
|
|
3589
|
+
onChange: (v) => set("children", v)
|
|
3590
|
+
}
|
|
3591
|
+
)
|
|
3592
|
+
] }) }),
|
|
3593
|
+
/* @__PURE__ */ jsx(FormSection, { title: "Your next trip", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [
|
|
3594
|
+
/* @__PURE__ */ jsx(
|
|
3595
|
+
DatePickerField,
|
|
3596
|
+
{
|
|
3597
|
+
label: "Travel date",
|
|
3598
|
+
required: true,
|
|
3599
|
+
value: values.travelDate,
|
|
3600
|
+
onChange: (d) => set("travelDate", d),
|
|
3601
|
+
placeholder: "Pick a date"
|
|
3602
|
+
}
|
|
3603
|
+
),
|
|
3604
|
+
/* @__PURE__ */ jsx(
|
|
3605
|
+
FloatingInput,
|
|
3606
|
+
{
|
|
3607
|
+
label: "Budget (per person)",
|
|
3608
|
+
required: true,
|
|
3609
|
+
type: "number",
|
|
3610
|
+
min: 0,
|
|
3611
|
+
value: values.budget,
|
|
3612
|
+
onChange: (e) => set("budget", e.target.value)
|
|
3613
|
+
}
|
|
3614
|
+
)
|
|
3615
|
+
] }) }),
|
|
3616
|
+
/* @__PURE__ */ jsx(FormSection, { title: "Tell us about your trip", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
|
|
3617
|
+
/* @__PURE__ */ jsx(
|
|
3618
|
+
"textarea",
|
|
3619
|
+
{
|
|
3620
|
+
id: "project",
|
|
3621
|
+
placeholder: " ",
|
|
3622
|
+
rows: 5,
|
|
3623
|
+
value: values.project,
|
|
3624
|
+
onChange: (e) => set("project", e.target.value),
|
|
3625
|
+
className: cn(
|
|
3626
|
+
"peer block w-full resize-none rounded-lg border border-border bg-background",
|
|
3627
|
+
"px-3 pt-6 pb-3 text-base text-foreground font-ui",
|
|
3628
|
+
"transition-colors placeholder-transparent",
|
|
3629
|
+
"focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary"
|
|
3630
|
+
)
|
|
3631
|
+
}
|
|
3632
|
+
),
|
|
3633
|
+
/* @__PURE__ */ jsxs(
|
|
3634
|
+
"label",
|
|
3635
|
+
{
|
|
3636
|
+
htmlFor: "project",
|
|
3637
|
+
className: cn(
|
|
3638
|
+
"pointer-events-none absolute left-3 top-4",
|
|
3639
|
+
"text-base text-muted-foreground font-ui transition-all duration-150",
|
|
3640
|
+
"peer-focus:top-2 peer-focus:text-xs peer-focus:text-primary",
|
|
3641
|
+
"peer-not-placeholder-shown:top-2 peer-not-placeholder-shown:text-xs peer-not-placeholder-shown:text-muted-foreground"
|
|
3642
|
+
),
|
|
3643
|
+
children: [
|
|
3644
|
+
"Your trip in a few words",
|
|
3645
|
+
" ",
|
|
3646
|
+
/* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-normal", children: "(optional)" })
|
|
3647
|
+
]
|
|
3648
|
+
}
|
|
3649
|
+
)
|
|
3650
|
+
] }) }),
|
|
3651
|
+
/* @__PURE__ */ jsxs(FormSection, { title: "Contact details", children: [
|
|
3652
|
+
/* @__PURE__ */ jsx(
|
|
3653
|
+
"div",
|
|
3654
|
+
{
|
|
3655
|
+
role: "radiogroup",
|
|
3656
|
+
"aria-label": "Title",
|
|
3657
|
+
className: "flex flex-wrap items-center gap-x-6 gap-y-3",
|
|
3658
|
+
children: ["ms", "mr"].map((c) => /* @__PURE__ */ jsxs(
|
|
3659
|
+
"label",
|
|
3660
|
+
{
|
|
3661
|
+
className: "flex min-h-9 cursor-pointer items-center gap-2.5 font-ui text-sm text-foreground",
|
|
3662
|
+
children: [
|
|
3663
|
+
/* @__PURE__ */ jsx(
|
|
3664
|
+
"input",
|
|
3665
|
+
{
|
|
3666
|
+
type: "radio",
|
|
3667
|
+
name: "civility",
|
|
3668
|
+
value: c,
|
|
3669
|
+
checked: values.civility === c,
|
|
3670
|
+
onChange: () => set("civility", c),
|
|
3671
|
+
className: "h-4 w-4 shrink-0 accent-primary cursor-pointer"
|
|
3672
|
+
}
|
|
3673
|
+
),
|
|
3674
|
+
c === "ms" ? "Ms." : "Mr."
|
|
3675
|
+
]
|
|
3676
|
+
},
|
|
3677
|
+
c
|
|
3678
|
+
))
|
|
3679
|
+
}
|
|
3680
|
+
),
|
|
3681
|
+
/* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 min-w-0", children: [
|
|
3682
|
+
/* @__PURE__ */ jsx("div", { className: "min-w-0", children: /* @__PURE__ */ jsx(
|
|
3683
|
+
FloatingInput,
|
|
3684
|
+
{
|
|
3685
|
+
label: "Last name",
|
|
3686
|
+
required: true,
|
|
3687
|
+
value: values.lastName,
|
|
3688
|
+
onChange: (e) => set("lastName", e.target.value)
|
|
3689
|
+
}
|
|
3690
|
+
) }),
|
|
3691
|
+
/* @__PURE__ */ jsx("div", { className: "min-w-0", children: /* @__PURE__ */ jsx(
|
|
3692
|
+
FloatingInput,
|
|
3693
|
+
{
|
|
3694
|
+
label: "First name",
|
|
3695
|
+
required: true,
|
|
3696
|
+
value: values.firstName,
|
|
3697
|
+
onChange: (e) => set("firstName", e.target.value)
|
|
3698
|
+
}
|
|
3699
|
+
) }),
|
|
3700
|
+
/* @__PURE__ */ jsx("div", { className: "min-w-0 sm:col-span-2 lg:col-span-1", children: /* @__PURE__ */ jsxs(
|
|
3701
|
+
FloatingSelect,
|
|
3702
|
+
{
|
|
3703
|
+
label: "Country of residence",
|
|
3704
|
+
required: true,
|
|
3705
|
+
value: values.country,
|
|
3706
|
+
onChange: (e) => set("country", e.target.value),
|
|
3707
|
+
children: [
|
|
3708
|
+
/* @__PURE__ */ jsx("option", { value: "", disabled: true, hidden: true }),
|
|
3709
|
+
/* @__PURE__ */ jsx("option", { value: "France", children: "France" }),
|
|
3710
|
+
/* @__PURE__ */ jsx("option", { value: "Belgium", children: "Belgium" }),
|
|
3711
|
+
/* @__PURE__ */ jsx("option", { value: "Switzerland", children: "Switzerland" }),
|
|
3712
|
+
/* @__PURE__ */ jsx("option", { value: "Canada", children: "Canada" }),
|
|
3713
|
+
/* @__PURE__ */ jsx("option", { value: "Luxembourg", children: "Luxembourg" }),
|
|
3714
|
+
/* @__PURE__ */ jsx("option", { value: "United Kingdom", children: "United Kingdom" }),
|
|
3715
|
+
/* @__PURE__ */ jsx("option", { value: "United States", children: "United States" }),
|
|
3716
|
+
/* @__PURE__ */ jsx("option", { value: "Other", children: "Other" })
|
|
3717
|
+
]
|
|
3718
|
+
}
|
|
3719
|
+
) })
|
|
3720
|
+
] }),
|
|
3721
|
+
/* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 lg:grid-cols-2", children: [
|
|
3722
|
+
/* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0", children: [
|
|
3723
|
+
/* @__PURE__ */ jsx(
|
|
3724
|
+
PhoneCountrySelect,
|
|
3725
|
+
{
|
|
3726
|
+
value: values.phoneCountry,
|
|
3727
|
+
onChange: (code) => set("phoneCountry", code),
|
|
3728
|
+
className: "shrink-0"
|
|
3729
|
+
}
|
|
3730
|
+
),
|
|
3731
|
+
/* @__PURE__ */ jsxs("div", { className: "relative min-w-0 flex-1", children: [
|
|
3732
|
+
/* @__PURE__ */ jsx(
|
|
3733
|
+
"input",
|
|
3734
|
+
{
|
|
3735
|
+
id: "phone",
|
|
3736
|
+
type: "tel",
|
|
3737
|
+
placeholder: " ",
|
|
3738
|
+
value: values.phone,
|
|
3739
|
+
onChange: (e) => set("phone", e.target.value),
|
|
3740
|
+
className: cn(
|
|
3741
|
+
"peer block h-14 w-full rounded-r-lg border border-border bg-background",
|
|
3742
|
+
"px-3 pt-5 pb-2 text-base text-foreground font-ui",
|
|
3743
|
+
"transition-colors placeholder-transparent",
|
|
3744
|
+
"focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary"
|
|
3745
|
+
)
|
|
3746
|
+
}
|
|
3747
|
+
),
|
|
3748
|
+
/* @__PURE__ */ jsxs(
|
|
3749
|
+
"label",
|
|
3750
|
+
{
|
|
3751
|
+
htmlFor: "phone",
|
|
3752
|
+
className: cn(
|
|
3753
|
+
"pointer-events-none absolute left-3 top-1/2 -translate-y-1/2",
|
|
3754
|
+
"text-base text-muted-foreground font-ui transition-all duration-150",
|
|
3755
|
+
"peer-focus:top-3 peer-focus:translate-y-0 peer-focus:text-xs peer-focus:text-primary",
|
|
3756
|
+
"peer-not-placeholder-shown:top-3 peer-not-placeholder-shown:translate-y-0 peer-not-placeholder-shown:text-xs peer-not-placeholder-shown:text-muted-foreground"
|
|
3757
|
+
),
|
|
3758
|
+
children: [
|
|
3759
|
+
"Phone ",
|
|
3760
|
+
/* @__PURE__ */ jsx("span", { className: "text-primary", children: "*" })
|
|
3761
|
+
]
|
|
3762
|
+
}
|
|
3763
|
+
)
|
|
3764
|
+
] })
|
|
3765
|
+
] }),
|
|
3766
|
+
/* @__PURE__ */ jsx("div", { className: "min-w-0", children: /* @__PURE__ */ jsx(
|
|
3767
|
+
FloatingInput,
|
|
3768
|
+
{
|
|
3769
|
+
label: "Email",
|
|
3770
|
+
required: true,
|
|
3771
|
+
type: "email",
|
|
3772
|
+
value: values.email,
|
|
3773
|
+
onChange: (e) => set("email", e.target.value)
|
|
3774
|
+
}
|
|
3775
|
+
) })
|
|
3776
|
+
] })
|
|
3777
|
+
] }),
|
|
3778
|
+
/* @__PURE__ */ jsx("div", { className: "flex justify-center pt-2", children: /* @__PURE__ */ jsx(
|
|
3366
3779
|
"button",
|
|
3367
3780
|
{
|
|
3368
|
-
type: "
|
|
3369
|
-
|
|
3370
|
-
disabled: value >= max,
|
|
3371
|
-
"aria-label": `Aumentar ${label}`,
|
|
3781
|
+
type: "submit",
|
|
3782
|
+
disabled: loading,
|
|
3372
3783
|
className: cn(
|
|
3373
|
-
"inline-flex
|
|
3374
|
-
"text-foreground
|
|
3375
|
-
"hover:bg-
|
|
3376
|
-
"
|
|
3784
|
+
"inline-flex items-center justify-center gap-2 rounded-full px-10 py-3.5",
|
|
3785
|
+
"bg-primary text-primary-foreground font-ui font-semibold text-sm",
|
|
3786
|
+
"transition-colors hover:bg-primary/90 focus-visible:outline-none",
|
|
3787
|
+
"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
3788
|
+
"disabled:pointer-events-none disabled:opacity-60"
|
|
3377
3789
|
),
|
|
3378
|
-
children: /* @__PURE__ */
|
|
3790
|
+
children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
3791
|
+
/* @__PURE__ */ jsxs("svg", { className: "h-4 w-4 animate-spin", viewBox: "0 0 24 24", fill: "none", children: [
|
|
3792
|
+
/* @__PURE__ */ jsx(
|
|
3793
|
+
"circle",
|
|
3794
|
+
{
|
|
3795
|
+
className: "opacity-25",
|
|
3796
|
+
cx: "12",
|
|
3797
|
+
cy: "12",
|
|
3798
|
+
r: "10",
|
|
3799
|
+
stroke: "currentColor",
|
|
3800
|
+
strokeWidth: "4"
|
|
3801
|
+
}
|
|
3802
|
+
),
|
|
3803
|
+
/* @__PURE__ */ jsx(
|
|
3804
|
+
"path",
|
|
3805
|
+
{
|
|
3806
|
+
className: "opacity-75",
|
|
3807
|
+
fill: "currentColor",
|
|
3808
|
+
d: "M4 12a8 8 0 018-8v4l3-3-3-3v4a8 8 0 00-8 8h4z"
|
|
3809
|
+
}
|
|
3810
|
+
)
|
|
3811
|
+
] }),
|
|
3812
|
+
"Sending\u2026"
|
|
3813
|
+
] }) : submitLabel
|
|
3379
3814
|
}
|
|
3380
|
-
)
|
|
3381
|
-
]
|
|
3382
|
-
|
|
3383
|
-
|
|
3815
|
+
) })
|
|
3816
|
+
]
|
|
3817
|
+
}
|
|
3818
|
+
);
|
|
3384
3819
|
}
|
|
3385
|
-
|
|
3386
|
-
|
|
3387
|
-
|
|
3820
|
+
var DEFAULT_LABELS3 = {
|
|
3821
|
+
formSubtitle: "Free enquiry \u2013 no commitment",
|
|
3822
|
+
detailsSectionTitle: "Your details",
|
|
3823
|
+
tripInfoSectionTitle: "Trip info",
|
|
3824
|
+
termsSectionTitle: "Terms & conditions",
|
|
3825
|
+
termsAccept: "I read and accept the terms",
|
|
3826
|
+
termsDecline: "I decline",
|
|
3827
|
+
submitButton: "Submit answers",
|
|
3828
|
+
submitting: "Sending\u2026",
|
|
3829
|
+
adventureLabel: "Adventure",
|
|
3830
|
+
bookingLabel: "Booking",
|
|
3831
|
+
partnerLabel: "Partner",
|
|
3832
|
+
travellerLabel: "Traveller",
|
|
3833
|
+
firstNameLabel: "First name",
|
|
3834
|
+
lastNameLabel: "Last name",
|
|
3835
|
+
phoneLabel: "Phone",
|
|
3836
|
+
emergencyContactFirstName: "Contact first name",
|
|
3837
|
+
emergencyContactLastName: "Contact last name",
|
|
3838
|
+
emergencyContactPhoneLabel: "Contact phone",
|
|
3839
|
+
nationalityLabel: "Nationality",
|
|
3840
|
+
selectPlaceholder: "Select an option\u2026",
|
|
3841
|
+
optionalLabel: "(optional)"
|
|
3842
|
+
};
|
|
3843
|
+
var TERMS_ACCEPT_KEY = "__registrationTermsAccepted";
|
|
3844
|
+
function emptyName() {
|
|
3845
|
+
return { firstName: "", lastName: "" };
|
|
3388
3846
|
}
|
|
3389
|
-
function
|
|
3390
|
-
|
|
3391
|
-
return /* @__PURE__ */ jsx(Popover$1.Trigger, __spreadValues({ "data-slot": "popover-trigger" }, props));
|
|
3847
|
+
function emptyPhone(country) {
|
|
3848
|
+
return { country, nationalNumber: "" };
|
|
3392
3849
|
}
|
|
3393
|
-
function
|
|
3394
|
-
|
|
3395
|
-
|
|
3396
|
-
|
|
3397
|
-
|
|
3398
|
-
|
|
3399
|
-
|
|
3400
|
-
|
|
3401
|
-
|
|
3402
|
-
|
|
3403
|
-
|
|
3404
|
-
|
|
3405
|
-
|
|
3406
|
-
|
|
3407
|
-
|
|
3408
|
-
|
|
3409
|
-
{
|
|
3410
|
-
|
|
3411
|
-
|
|
3412
|
-
|
|
3413
|
-
|
|
3414
|
-
|
|
3415
|
-
|
|
3416
|
-
|
|
3417
|
-
|
|
3418
|
-
|
|
3419
|
-
|
|
3420
|
-
|
|
3421
|
-
|
|
3422
|
-
|
|
3423
|
-
|
|
3424
|
-
|
|
3850
|
+
function emptyEmergency(country) {
|
|
3851
|
+
return { contactName: emptyName(), phone: emptyPhone(country) };
|
|
3852
|
+
}
|
|
3853
|
+
function asName(v) {
|
|
3854
|
+
if (v && typeof v === "object" && "firstName" in v && "lastName" in v) {
|
|
3855
|
+
const o = v;
|
|
3856
|
+
return {
|
|
3857
|
+
firstName: typeof o.firstName === "string" ? o.firstName : "",
|
|
3858
|
+
lastName: typeof o.lastName === "string" ? o.lastName : ""
|
|
3859
|
+
};
|
|
3860
|
+
}
|
|
3861
|
+
return emptyName();
|
|
3862
|
+
}
|
|
3863
|
+
function asPhone(v, defaultCountry) {
|
|
3864
|
+
if (v && typeof v === "object" && "country" in v && "nationalNumber" in v) {
|
|
3865
|
+
const o = v;
|
|
3866
|
+
return {
|
|
3867
|
+
country: typeof o.country === "string" ? o.country : defaultCountry,
|
|
3868
|
+
nationalNumber: typeof o.nationalNumber === "string" ? o.nationalNumber : ""
|
|
3869
|
+
};
|
|
3870
|
+
}
|
|
3871
|
+
return emptyPhone(defaultCountry);
|
|
3872
|
+
}
|
|
3873
|
+
function asEmergency(v, defaultCountry) {
|
|
3874
|
+
if (v && typeof v === "object" && "contactName" in v && "phone" in v) {
|
|
3875
|
+
const o = v;
|
|
3876
|
+
return {
|
|
3877
|
+
contactName: asName(o.contactName),
|
|
3878
|
+
phone: asPhone(o.phone, defaultCountry)
|
|
3879
|
+
};
|
|
3880
|
+
}
|
|
3881
|
+
return emptyEmergency(defaultCountry);
|
|
3882
|
+
}
|
|
3883
|
+
function asDate(v) {
|
|
3884
|
+
if (v instanceof Date && !Number.isNaN(v.getTime())) return v;
|
|
3885
|
+
if (typeof v === "string" && v.trim()) {
|
|
3886
|
+
const parsed = new Date(v);
|
|
3887
|
+
if (!Number.isNaN(parsed.getTime())) return parsed;
|
|
3888
|
+
}
|
|
3889
|
+
return void 0;
|
|
3890
|
+
}
|
|
3891
|
+
function initializeValues(fields, seed, defaultCountry, includeTerms) {
|
|
3892
|
+
var _a, _b;
|
|
3893
|
+
const next = {};
|
|
3894
|
+
for (const f of fields) {
|
|
3895
|
+
if (Object.prototype.hasOwnProperty.call(seed, f.id)) {
|
|
3896
|
+
next[f.id] = seed[f.id];
|
|
3897
|
+
continue;
|
|
3425
3898
|
}
|
|
3426
|
-
|
|
3899
|
+
switch (f.type) {
|
|
3900
|
+
case "name":
|
|
3901
|
+
next[f.id] = emptyName();
|
|
3902
|
+
break;
|
|
3903
|
+
case "phone":
|
|
3904
|
+
next[f.id] = emptyPhone(defaultCountry);
|
|
3905
|
+
break;
|
|
3906
|
+
case "emergencyContact":
|
|
3907
|
+
next[f.id] = emptyEmergency(defaultCountry);
|
|
3908
|
+
break;
|
|
3909
|
+
case "checkbox":
|
|
3910
|
+
next[f.id] = ((_b = (_a = f.options) == null ? void 0 : _a.length) != null ? _b : 0) > 0 ? [] : false;
|
|
3911
|
+
break;
|
|
3912
|
+
case "date":
|
|
3913
|
+
case "birthDate":
|
|
3914
|
+
next[f.id] = void 0;
|
|
3915
|
+
break;
|
|
3916
|
+
default:
|
|
3917
|
+
next[f.id] = "";
|
|
3918
|
+
}
|
|
3919
|
+
}
|
|
3920
|
+
if (includeTerms) next[TERMS_ACCEPT_KEY] = false;
|
|
3921
|
+
return next;
|
|
3427
3922
|
}
|
|
3428
|
-
function
|
|
3429
|
-
|
|
3430
|
-
|
|
3431
|
-
|
|
3432
|
-
|
|
3433
|
-
|
|
3434
|
-
|
|
3435
|
-
|
|
3923
|
+
function formatDateRange(adventure, fmt) {
|
|
3924
|
+
var _a, _b;
|
|
3925
|
+
if (!(adventure == null ? void 0 : adventure.startDate) && !(adventure == null ? void 0 : adventure.endDate)) return null;
|
|
3926
|
+
const start = fmt ? fmt(adventure.startDate) : (_a = adventure.startDate) != null ? _a : "";
|
|
3927
|
+
const end = fmt ? fmt(adventure.endDate) : (_b = adventure.endDate) != null ? _b : "";
|
|
3928
|
+
if (start && end) return `${start} \u2014 ${end}`;
|
|
3929
|
+
return start || end || null;
|
|
3930
|
+
}
|
|
3931
|
+
function FormSection2({
|
|
3932
|
+
title,
|
|
3933
|
+
children,
|
|
3436
3934
|
className
|
|
3437
3935
|
}) {
|
|
3438
|
-
|
|
3439
|
-
|
|
3440
|
-
|
|
3441
|
-
|
|
3442
|
-
|
|
3443
|
-
|
|
3444
|
-
|
|
3445
|
-
|
|
3446
|
-
|
|
3447
|
-
|
|
3448
|
-
|
|
3449
|
-
|
|
3450
|
-
return /* @__PURE__ */ jsx("div", { ref: containerRef, className: cn("w-full", className), children: /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
|
|
3451
|
-
/* @__PURE__ */ jsxs(
|
|
3452
|
-
PopoverTrigger,
|
|
3936
|
+
return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-5", className), children: [
|
|
3937
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
|
|
3938
|
+
/* @__PURE__ */ jsx("h3", { className: "text-base font-bold text-foreground whitespace-nowrap font-heading", children: title }),
|
|
3939
|
+
/* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-border" })
|
|
3940
|
+
] }),
|
|
3941
|
+
children
|
|
3942
|
+
] });
|
|
3943
|
+
}
|
|
3944
|
+
function PhoneInput({ id, label, required, value, onChange }) {
|
|
3945
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0", children: [
|
|
3946
|
+
/* @__PURE__ */ jsx(
|
|
3947
|
+
PhoneCountrySelect,
|
|
3453
3948
|
{
|
|
3454
|
-
|
|
3455
|
-
|
|
3456
|
-
|
|
3457
|
-
"px-3 text-left text-base font-ui transition-colors h-14",
|
|
3458
|
-
"focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary",
|
|
3459
|
-
"disabled:pointer-events-none disabled:opacity-50",
|
|
3460
|
-
open && "border-primary ring-1 ring-primary"
|
|
3461
|
-
),
|
|
3462
|
-
children: [
|
|
3463
|
-
/* @__PURE__ */ jsxs(
|
|
3464
|
-
"span",
|
|
3465
|
-
{
|
|
3466
|
-
className: cn(
|
|
3467
|
-
"pointer-events-none absolute left-3 transition-all duration-150 font-ui",
|
|
3468
|
-
hasValue || open ? "top-2 text-xs text-primary" : "top-1/2 -translate-y-1/2 text-base text-muted-foreground"
|
|
3469
|
-
),
|
|
3470
|
-
children: [
|
|
3471
|
-
label,
|
|
3472
|
-
required && /* @__PURE__ */ jsx("span", { className: "text-primary ml-0.5", children: "*" })
|
|
3473
|
-
]
|
|
3474
|
-
}
|
|
3475
|
-
),
|
|
3476
|
-
/* @__PURE__ */ jsx(
|
|
3477
|
-
"span",
|
|
3478
|
-
{
|
|
3479
|
-
className: cn(
|
|
3480
|
-
"flex-1 truncate mt-3",
|
|
3481
|
-
hasValue ? "text-foreground" : "invisible"
|
|
3482
|
-
),
|
|
3483
|
-
children: hasValue ? format(value, "dd MMM yyyy") : placeholder
|
|
3484
|
-
}
|
|
3485
|
-
),
|
|
3486
|
-
/* @__PURE__ */ jsx(CalendarIcon, { className: "ml-2 h-4 w-4 shrink-0 text-muted-foreground" })
|
|
3487
|
-
]
|
|
3949
|
+
value: value.country,
|
|
3950
|
+
onChange: (country) => onChange(__spreadProps(__spreadValues({}, value), { country })),
|
|
3951
|
+
className: "shrink-0"
|
|
3488
3952
|
}
|
|
3489
3953
|
),
|
|
3954
|
+
/* @__PURE__ */ jsxs("div", { className: "relative min-w-0 flex-1", children: [
|
|
3955
|
+
/* @__PURE__ */ jsx(
|
|
3956
|
+
"input",
|
|
3957
|
+
{
|
|
3958
|
+
id,
|
|
3959
|
+
type: "tel",
|
|
3960
|
+
placeholder: " ",
|
|
3961
|
+
value: value.nationalNumber,
|
|
3962
|
+
required,
|
|
3963
|
+
onChange: (e) => onChange(__spreadProps(__spreadValues({}, value), { nationalNumber: e.target.value })),
|
|
3964
|
+
className: cn(
|
|
3965
|
+
"peer block h-14 w-full rounded-r-lg border border-border bg-background",
|
|
3966
|
+
"px-3 pt-5 pb-2 text-base text-foreground font-ui",
|
|
3967
|
+
"transition-colors placeholder-transparent",
|
|
3968
|
+
"focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary"
|
|
3969
|
+
)
|
|
3970
|
+
}
|
|
3971
|
+
),
|
|
3972
|
+
/* @__PURE__ */ jsxs(
|
|
3973
|
+
"label",
|
|
3974
|
+
{
|
|
3975
|
+
htmlFor: id,
|
|
3976
|
+
className: cn(
|
|
3977
|
+
"pointer-events-none absolute left-3 top-1/2 -translate-y-1/2",
|
|
3978
|
+
"text-base text-muted-foreground font-ui transition-all duration-150",
|
|
3979
|
+
"peer-focus:top-3 peer-focus:translate-y-0 peer-focus:text-xs peer-focus:text-primary",
|
|
3980
|
+
"peer-not-placeholder-shown:top-3 peer-not-placeholder-shown:translate-y-0 peer-not-placeholder-shown:text-xs peer-not-placeholder-shown:text-muted-foreground"
|
|
3981
|
+
),
|
|
3982
|
+
children: [
|
|
3983
|
+
label,
|
|
3984
|
+
required && /* @__PURE__ */ jsx("span", { className: "text-primary ml-0.5", children: "*" })
|
|
3985
|
+
]
|
|
3986
|
+
}
|
|
3987
|
+
)
|
|
3988
|
+
] })
|
|
3989
|
+
] });
|
|
3990
|
+
}
|
|
3991
|
+
function FloatingTextarea({
|
|
3992
|
+
id,
|
|
3993
|
+
label,
|
|
3994
|
+
required,
|
|
3995
|
+
optionalHint,
|
|
3996
|
+
value,
|
|
3997
|
+
onChange
|
|
3998
|
+
}) {
|
|
3999
|
+
return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
|
|
3490
4000
|
/* @__PURE__ */ jsx(
|
|
3491
|
-
|
|
4001
|
+
"textarea",
|
|
3492
4002
|
{
|
|
3493
|
-
|
|
3494
|
-
|
|
3495
|
-
|
|
3496
|
-
|
|
3497
|
-
|
|
3498
|
-
|
|
3499
|
-
|
|
3500
|
-
|
|
3501
|
-
|
|
3502
|
-
|
|
3503
|
-
|
|
3504
|
-
},
|
|
3505
|
-
fromDate: fromDate != null ? fromDate : /* @__PURE__ */ new Date(),
|
|
3506
|
-
className: "font-ui w-full",
|
|
3507
|
-
autoFocus: true
|
|
3508
|
-
}
|
|
4003
|
+
id,
|
|
4004
|
+
placeholder: " ",
|
|
4005
|
+
rows: 5,
|
|
4006
|
+
value,
|
|
4007
|
+
required,
|
|
4008
|
+
onChange: (e) => onChange(e.target.value),
|
|
4009
|
+
className: cn(
|
|
4010
|
+
"peer block w-full resize-none rounded-lg border border-border bg-background",
|
|
4011
|
+
"px-3 pt-6 pb-3 text-base text-foreground font-ui",
|
|
4012
|
+
"transition-colors placeholder-transparent",
|
|
4013
|
+
"focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary"
|
|
3509
4014
|
)
|
|
3510
4015
|
}
|
|
4016
|
+
),
|
|
4017
|
+
/* @__PURE__ */ jsxs(
|
|
4018
|
+
"label",
|
|
4019
|
+
{
|
|
4020
|
+
htmlFor: id,
|
|
4021
|
+
className: cn(
|
|
4022
|
+
"pointer-events-none absolute left-3 top-4",
|
|
4023
|
+
"text-base text-muted-foreground font-ui transition-all duration-150",
|
|
4024
|
+
"peer-focus:top-2 peer-focus:text-xs peer-focus:text-primary",
|
|
4025
|
+
"peer-not-placeholder-shown:top-2 peer-not-placeholder-shown:text-xs peer-not-placeholder-shown:text-muted-foreground"
|
|
4026
|
+
),
|
|
4027
|
+
children: [
|
|
4028
|
+
label,
|
|
4029
|
+
required ? /* @__PURE__ */ jsx("span", { className: "text-primary ml-0.5", children: "*" }) : optionalHint ? /* @__PURE__ */ jsx("span", { className: "ml-1 text-muted-foreground font-normal", children: optionalHint }) : null
|
|
4030
|
+
]
|
|
4031
|
+
}
|
|
3511
4032
|
)
|
|
3512
|
-
] }) });
|
|
3513
|
-
}
|
|
3514
|
-
function FormSection({
|
|
3515
|
-
title,
|
|
3516
|
-
children,
|
|
3517
|
-
className
|
|
3518
|
-
}) {
|
|
3519
|
-
return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-5", className), children: [
|
|
3520
|
-
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
|
|
3521
|
-
/* @__PURE__ */ jsx("h3", { className: "text-base font-bold text-foreground whitespace-nowrap font-heading", children: title }),
|
|
3522
|
-
/* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-border" })
|
|
3523
|
-
] }),
|
|
3524
|
-
children
|
|
3525
4033
|
] });
|
|
3526
4034
|
}
|
|
3527
|
-
|
|
3528
|
-
|
|
3529
|
-
|
|
3530
|
-
|
|
3531
|
-
|
|
3532
|
-
|
|
3533
|
-
civility: "",
|
|
3534
|
-
phoneCountry: "BR",
|
|
3535
|
-
lastName: "",
|
|
3536
|
-
firstName: "",
|
|
3537
|
-
country: "France",
|
|
3538
|
-
phone: "",
|
|
3539
|
-
email: ""
|
|
3540
|
-
};
|
|
3541
|
-
function BookingForm({
|
|
3542
|
-
defaultValues,
|
|
3543
|
-
onSubmit,
|
|
3544
|
-
submitLabel = "Send my request",
|
|
3545
|
-
loading = false,
|
|
3546
|
-
showHeader = true,
|
|
3547
|
-
title = "Check availability for your trip",
|
|
3548
|
-
subtitle = "Free enquiry \u2013 no commitment",
|
|
3549
|
-
className
|
|
4035
|
+
function FieldRenderer({
|
|
4036
|
+
field,
|
|
4037
|
+
value,
|
|
4038
|
+
onChange,
|
|
4039
|
+
defaultPhoneCountry,
|
|
4040
|
+
labels
|
|
3550
4041
|
}) {
|
|
3551
|
-
|
|
3552
|
-
const
|
|
3553
|
-
|
|
3554
|
-
|
|
3555
|
-
|
|
3556
|
-
|
|
3557
|
-
|
|
3558
|
-
|
|
3559
|
-
|
|
3560
|
-
|
|
3561
|
-
|
|
3562
|
-
|
|
3563
|
-
|
|
3564
|
-
|
|
3565
|
-
|
|
3566
|
-
|
|
3567
|
-
|
|
3568
|
-
|
|
3569
|
-
|
|
3570
|
-
|
|
3571
|
-
|
|
3572
|
-
|
|
3573
|
-
|
|
3574
|
-
|
|
3575
|
-
|
|
3576
|
-
|
|
3577
|
-
|
|
3578
|
-
|
|
3579
|
-
|
|
3580
|
-
|
|
3581
|
-
|
|
3582
|
-
|
|
3583
|
-
|
|
3584
|
-
|
|
3585
|
-
|
|
3586
|
-
|
|
3587
|
-
|
|
3588
|
-
|
|
3589
|
-
|
|
3590
|
-
|
|
4042
|
+
var _a, _b, _c;
|
|
4043
|
+
const fieldId = `rf-${field.id}`;
|
|
4044
|
+
if (field.type === "name") {
|
|
4045
|
+
const v = asName(value);
|
|
4046
|
+
return /* @__PURE__ */ jsxs("div", { children: [
|
|
4047
|
+
/* @__PURE__ */ jsxs("p", { className: "mb-3 text-sm font-ui font-medium text-foreground", children: [
|
|
4048
|
+
field.label,
|
|
4049
|
+
field.required && /* @__PURE__ */ jsx("span", { className: "text-primary ml-0.5", children: "*" })
|
|
4050
|
+
] }),
|
|
4051
|
+
/* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [
|
|
4052
|
+
/* @__PURE__ */ jsx(
|
|
4053
|
+
FloatingInput,
|
|
4054
|
+
{
|
|
4055
|
+
label: labels.firstNameLabel,
|
|
4056
|
+
required: field.required,
|
|
4057
|
+
value: v.firstName,
|
|
4058
|
+
onChange: (e) => onChange(__spreadProps(__spreadValues({}, v), { firstName: e.target.value }))
|
|
4059
|
+
}
|
|
4060
|
+
),
|
|
4061
|
+
/* @__PURE__ */ jsx(
|
|
4062
|
+
FloatingInput,
|
|
4063
|
+
{
|
|
4064
|
+
label: labels.lastNameLabel,
|
|
4065
|
+
required: field.required,
|
|
4066
|
+
value: v.lastName,
|
|
4067
|
+
onChange: (e) => onChange(__spreadProps(__spreadValues({}, v), { lastName: e.target.value }))
|
|
4068
|
+
}
|
|
4069
|
+
)
|
|
4070
|
+
] })
|
|
4071
|
+
] });
|
|
4072
|
+
}
|
|
4073
|
+
if (field.type === "phone") {
|
|
4074
|
+
const v = asPhone(value, defaultPhoneCountry);
|
|
4075
|
+
return /* @__PURE__ */ jsx(
|
|
4076
|
+
PhoneInput,
|
|
4077
|
+
{
|
|
4078
|
+
id: fieldId,
|
|
4079
|
+
label: field.label,
|
|
4080
|
+
required: field.required,
|
|
4081
|
+
value: v,
|
|
4082
|
+
onChange
|
|
4083
|
+
}
|
|
4084
|
+
);
|
|
4085
|
+
}
|
|
4086
|
+
if (field.type === "emergencyContact") {
|
|
4087
|
+
const v = asEmergency(value, defaultPhoneCountry);
|
|
4088
|
+
return /* @__PURE__ */ jsxs("div", { children: [
|
|
4089
|
+
/* @__PURE__ */ jsxs("p", { className: "mb-3 text-sm font-ui font-medium text-foreground", children: [
|
|
4090
|
+
field.label,
|
|
4091
|
+
field.required && /* @__PURE__ */ jsx("span", { className: "text-primary ml-0.5", children: "*" })
|
|
4092
|
+
] }),
|
|
4093
|
+
/* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
|
|
4094
|
+
/* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [
|
|
3591
4095
|
/* @__PURE__ */ jsx(
|
|
3592
|
-
|
|
4096
|
+
FloatingInput,
|
|
3593
4097
|
{
|
|
3594
|
-
label:
|
|
3595
|
-
required:
|
|
3596
|
-
value:
|
|
3597
|
-
onChange: (
|
|
3598
|
-
|
|
4098
|
+
label: labels.emergencyContactFirstName,
|
|
4099
|
+
required: field.required,
|
|
4100
|
+
value: v.contactName.firstName,
|
|
4101
|
+
onChange: (e) => onChange(__spreadProps(__spreadValues({}, v), {
|
|
4102
|
+
contactName: __spreadProps(__spreadValues({}, v.contactName), {
|
|
4103
|
+
firstName: e.target.value
|
|
4104
|
+
})
|
|
4105
|
+
}))
|
|
3599
4106
|
}
|
|
3600
4107
|
),
|
|
3601
4108
|
/* @__PURE__ */ jsx(
|
|
3602
4109
|
FloatingInput,
|
|
3603
4110
|
{
|
|
3604
|
-
label:
|
|
3605
|
-
required:
|
|
3606
|
-
|
|
3607
|
-
|
|
3608
|
-
|
|
3609
|
-
|
|
4111
|
+
label: labels.emergencyContactLastName,
|
|
4112
|
+
required: field.required,
|
|
4113
|
+
value: v.contactName.lastName,
|
|
4114
|
+
onChange: (e) => onChange(__spreadProps(__spreadValues({}, v), {
|
|
4115
|
+
contactName: __spreadProps(__spreadValues({}, v.contactName), {
|
|
4116
|
+
lastName: e.target.value
|
|
4117
|
+
})
|
|
4118
|
+
}))
|
|
3610
4119
|
}
|
|
3611
4120
|
)
|
|
3612
|
-
] })
|
|
3613
|
-
/* @__PURE__ */ jsx(
|
|
3614
|
-
|
|
3615
|
-
|
|
3616
|
-
{
|
|
3617
|
-
|
|
3618
|
-
|
|
3619
|
-
|
|
3620
|
-
|
|
3621
|
-
|
|
3622
|
-
|
|
3623
|
-
|
|
3624
|
-
|
|
3625
|
-
|
|
3626
|
-
|
|
3627
|
-
|
|
3628
|
-
|
|
3629
|
-
|
|
3630
|
-
|
|
4121
|
+
] }),
|
|
4122
|
+
/* @__PURE__ */ jsx(
|
|
4123
|
+
PhoneInput,
|
|
4124
|
+
{
|
|
4125
|
+
id: `${fieldId}-phone`,
|
|
4126
|
+
label: labels.emergencyContactPhoneLabel,
|
|
4127
|
+
required: field.required,
|
|
4128
|
+
value: v.phone,
|
|
4129
|
+
onChange: (phone) => onChange(__spreadProps(__spreadValues({}, v), { phone }))
|
|
4130
|
+
}
|
|
4131
|
+
)
|
|
4132
|
+
] })
|
|
4133
|
+
] });
|
|
4134
|
+
}
|
|
4135
|
+
if (field.type === "textarea") {
|
|
4136
|
+
return /* @__PURE__ */ jsx(
|
|
4137
|
+
FloatingTextarea,
|
|
4138
|
+
{
|
|
4139
|
+
id: fieldId,
|
|
4140
|
+
label: field.label,
|
|
4141
|
+
required: field.required,
|
|
4142
|
+
optionalHint: !field.required ? labels.optionalLabel : void 0,
|
|
4143
|
+
value: typeof value === "string" ? value : "",
|
|
4144
|
+
onChange
|
|
4145
|
+
}
|
|
4146
|
+
);
|
|
4147
|
+
}
|
|
4148
|
+
if (field.type === "select") {
|
|
4149
|
+
const options = (_a = field.options) != null ? _a : [];
|
|
4150
|
+
return /* @__PURE__ */ jsxs(
|
|
4151
|
+
FloatingSelect,
|
|
4152
|
+
{
|
|
4153
|
+
label: field.label,
|
|
4154
|
+
required: field.required,
|
|
4155
|
+
value: typeof value === "string" ? value : "",
|
|
4156
|
+
onChange: (e) => onChange(e.target.value),
|
|
4157
|
+
children: [
|
|
4158
|
+
/* @__PURE__ */ jsx("option", { value: "", disabled: true, hidden: true }),
|
|
4159
|
+
options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
|
|
4160
|
+
]
|
|
4161
|
+
}
|
|
4162
|
+
);
|
|
4163
|
+
}
|
|
4164
|
+
if (field.type === "radio") {
|
|
4165
|
+
const options = (_b = field.options) != null ? _b : [];
|
|
4166
|
+
return /* @__PURE__ */ jsxs("div", { children: [
|
|
4167
|
+
/* @__PURE__ */ jsxs("p", { className: "mb-3 text-sm font-ui font-medium text-foreground", children: [
|
|
4168
|
+
field.label,
|
|
4169
|
+
field.required && /* @__PURE__ */ jsx("span", { className: "text-primary ml-0.5", children: "*" })
|
|
4170
|
+
] }),
|
|
4171
|
+
/* @__PURE__ */ jsx(
|
|
4172
|
+
"div",
|
|
4173
|
+
{
|
|
4174
|
+
role: "radiogroup",
|
|
4175
|
+
"aria-label": field.label,
|
|
4176
|
+
className: "flex flex-wrap items-center gap-x-6 gap-y-3",
|
|
4177
|
+
children: options.map((opt) => /* @__PURE__ */ jsxs(
|
|
3631
4178
|
"label",
|
|
3632
4179
|
{
|
|
3633
|
-
|
|
3634
|
-
className: cn(
|
|
3635
|
-
"pointer-events-none absolute left-3 top-4",
|
|
3636
|
-
"text-base text-muted-foreground font-ui transition-all duration-150",
|
|
3637
|
-
"peer-focus:top-2 peer-focus:text-xs peer-focus:text-primary",
|
|
3638
|
-
"peer-not-placeholder-shown:top-2 peer-not-placeholder-shown:text-xs peer-not-placeholder-shown:text-muted-foreground"
|
|
3639
|
-
),
|
|
4180
|
+
className: "flex min-h-9 cursor-pointer items-center gap-2.5 font-ui text-sm text-foreground",
|
|
3640
4181
|
children: [
|
|
3641
|
-
|
|
3642
|
-
|
|
3643
|
-
|
|
4182
|
+
/* @__PURE__ */ jsx(
|
|
4183
|
+
"input",
|
|
4184
|
+
{
|
|
4185
|
+
type: "radio",
|
|
4186
|
+
name: field.id,
|
|
4187
|
+
value: opt.value,
|
|
4188
|
+
checked: value === opt.value,
|
|
4189
|
+
required: field.required,
|
|
4190
|
+
onChange: () => onChange(opt.value),
|
|
4191
|
+
className: "h-4 w-4 shrink-0 accent-primary cursor-pointer"
|
|
4192
|
+
}
|
|
4193
|
+
),
|
|
4194
|
+
opt.label
|
|
3644
4195
|
]
|
|
3645
|
-
}
|
|
3646
|
-
|
|
3647
|
-
|
|
3648
|
-
|
|
3649
|
-
|
|
3650
|
-
|
|
3651
|
-
|
|
3652
|
-
|
|
3653
|
-
|
|
3654
|
-
|
|
3655
|
-
|
|
3656
|
-
|
|
3657
|
-
|
|
3658
|
-
|
|
3659
|
-
|
|
3660
|
-
|
|
3661
|
-
|
|
3662
|
-
|
|
3663
|
-
|
|
3664
|
-
|
|
3665
|
-
|
|
3666
|
-
|
|
3667
|
-
|
|
3668
|
-
|
|
3669
|
-
|
|
3670
|
-
|
|
3671
|
-
|
|
3672
|
-
|
|
3673
|
-
|
|
3674
|
-
|
|
3675
|
-
|
|
3676
|
-
|
|
3677
|
-
|
|
3678
|
-
|
|
3679
|
-
|
|
3680
|
-
|
|
4196
|
+
},
|
|
4197
|
+
opt.value
|
|
4198
|
+
))
|
|
4199
|
+
}
|
|
4200
|
+
)
|
|
4201
|
+
] });
|
|
4202
|
+
}
|
|
4203
|
+
if (field.type === "checkbox") {
|
|
4204
|
+
const options = (_c = field.options) != null ? _c : [];
|
|
4205
|
+
if (options.length === 0) {
|
|
4206
|
+
return /* @__PURE__ */ jsxs("label", { className: "flex min-h-9 cursor-pointer items-center gap-2.5 font-ui text-sm text-foreground", children: [
|
|
4207
|
+
/* @__PURE__ */ jsx(
|
|
4208
|
+
"input",
|
|
4209
|
+
{
|
|
4210
|
+
type: "checkbox",
|
|
4211
|
+
checked: value === true,
|
|
4212
|
+
onChange: (e) => onChange(e.target.checked),
|
|
4213
|
+
className: "h-4 w-4 shrink-0 accent-primary cursor-pointer"
|
|
4214
|
+
}
|
|
4215
|
+
),
|
|
4216
|
+
field.label
|
|
4217
|
+
] });
|
|
4218
|
+
}
|
|
4219
|
+
const selected = Array.isArray(value) ? value : [];
|
|
4220
|
+
return /* @__PURE__ */ jsxs("div", { children: [
|
|
4221
|
+
/* @__PURE__ */ jsxs("p", { className: "mb-3 text-sm font-ui font-medium text-foreground", children: [
|
|
4222
|
+
field.label,
|
|
4223
|
+
field.required && /* @__PURE__ */ jsx("span", { className: "text-primary ml-0.5", children: "*" })
|
|
4224
|
+
] }),
|
|
4225
|
+
/* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: options.map((opt) => {
|
|
4226
|
+
const checked = selected.includes(opt.value);
|
|
4227
|
+
return /* @__PURE__ */ jsxs(
|
|
4228
|
+
"label",
|
|
4229
|
+
{
|
|
4230
|
+
className: "flex min-h-9 cursor-pointer items-center gap-2.5 font-ui text-sm text-foreground",
|
|
4231
|
+
children: [
|
|
4232
|
+
/* @__PURE__ */ jsx(
|
|
4233
|
+
"input",
|
|
4234
|
+
{
|
|
4235
|
+
type: "checkbox",
|
|
4236
|
+
checked,
|
|
4237
|
+
onChange: (e) => onChange(
|
|
4238
|
+
e.target.checked ? [...selected, opt.value] : selected.filter((x) => x !== opt.value)
|
|
4239
|
+
),
|
|
4240
|
+
className: "h-4 w-4 shrink-0 accent-primary cursor-pointer"
|
|
4241
|
+
}
|
|
4242
|
+
),
|
|
4243
|
+
opt.label
|
|
4244
|
+
]
|
|
4245
|
+
},
|
|
4246
|
+
opt.value
|
|
4247
|
+
);
|
|
4248
|
+
}) })
|
|
4249
|
+
] });
|
|
4250
|
+
}
|
|
4251
|
+
if (field.type === "nationality") {
|
|
4252
|
+
return /* @__PURE__ */ jsx(
|
|
4253
|
+
CountrySearchField,
|
|
4254
|
+
{
|
|
4255
|
+
label: field.label,
|
|
4256
|
+
required: field.required,
|
|
4257
|
+
value: typeof value === "string" ? value : "",
|
|
4258
|
+
onChange: (code) => onChange(code)
|
|
4259
|
+
}
|
|
4260
|
+
);
|
|
4261
|
+
}
|
|
4262
|
+
if (field.type === "date") {
|
|
4263
|
+
return /* @__PURE__ */ jsx(
|
|
4264
|
+
DatePickerField,
|
|
4265
|
+
{
|
|
4266
|
+
label: field.label,
|
|
4267
|
+
required: field.required,
|
|
4268
|
+
value: asDate(value),
|
|
4269
|
+
onChange: (d) => onChange(d)
|
|
4270
|
+
}
|
|
4271
|
+
);
|
|
4272
|
+
}
|
|
4273
|
+
if (field.type === "birthDate") {
|
|
4274
|
+
return /* @__PURE__ */ jsx(
|
|
4275
|
+
BirthDateField,
|
|
4276
|
+
{
|
|
4277
|
+
label: field.label,
|
|
4278
|
+
required: field.required,
|
|
4279
|
+
value: asDate(value),
|
|
4280
|
+
onChange: (d) => onChange(d)
|
|
4281
|
+
}
|
|
4282
|
+
);
|
|
4283
|
+
}
|
|
4284
|
+
if (field.type === "number") {
|
|
4285
|
+
return /* @__PURE__ */ jsx(
|
|
4286
|
+
FloatingInput,
|
|
4287
|
+
{
|
|
4288
|
+
label: field.label,
|
|
4289
|
+
required: field.required,
|
|
4290
|
+
type: "number",
|
|
4291
|
+
value: value == null ? "" : String(value),
|
|
4292
|
+
onChange: (e) => onChange(e.target.value)
|
|
4293
|
+
}
|
|
4294
|
+
);
|
|
4295
|
+
}
|
|
4296
|
+
const htmlType = field.label.toLowerCase().includes("mail") ? "email" : "text";
|
|
4297
|
+
return /* @__PURE__ */ jsx(
|
|
4298
|
+
FloatingInput,
|
|
4299
|
+
{
|
|
4300
|
+
label: field.label,
|
|
4301
|
+
required: field.required,
|
|
4302
|
+
type: htmlType,
|
|
4303
|
+
value: typeof value === "string" ? value : "",
|
|
4304
|
+
onChange: (e) => onChange(e.target.value)
|
|
4305
|
+
}
|
|
4306
|
+
);
|
|
4307
|
+
}
|
|
4308
|
+
function RegistrationForm({
|
|
4309
|
+
logo = "/logo-planetaexo.png",
|
|
4310
|
+
logoAlt = "Planeta EXO",
|
|
4311
|
+
heroImage,
|
|
4312
|
+
heroImageAlt = "",
|
|
4313
|
+
title,
|
|
4314
|
+
subtitle,
|
|
4315
|
+
adventure,
|
|
4316
|
+
booking,
|
|
4317
|
+
traveller,
|
|
4318
|
+
fields,
|
|
4319
|
+
values,
|
|
4320
|
+
defaultValues,
|
|
4321
|
+
onChange,
|
|
4322
|
+
onSubmit,
|
|
4323
|
+
terms,
|
|
4324
|
+
includeTerms = false,
|
|
4325
|
+
loading = false,
|
|
4326
|
+
error,
|
|
4327
|
+
defaultPhoneCountry = "BR",
|
|
4328
|
+
dateFormatter,
|
|
4329
|
+
labels,
|
|
4330
|
+
className
|
|
4331
|
+
}) {
|
|
4332
|
+
var _a;
|
|
4333
|
+
const L = React21.useMemo(
|
|
4334
|
+
() => __spreadValues(__spreadValues({}, DEFAULT_LABELS3), labels != null ? labels : {}),
|
|
4335
|
+
[labels]
|
|
4336
|
+
);
|
|
4337
|
+
const sortedFields = React21.useMemo(
|
|
4338
|
+
() => [...fields].sort((a, b) => {
|
|
4339
|
+
var _a2, _b;
|
|
4340
|
+
return ((_a2 = a.order) != null ? _a2 : 0) - ((_b = b.order) != null ? _b : 0);
|
|
4341
|
+
}),
|
|
4342
|
+
[fields]
|
|
4343
|
+
);
|
|
4344
|
+
const isControlled = values !== void 0;
|
|
4345
|
+
const [internal, setInternal] = React21.useState(
|
|
4346
|
+
() => initializeValues(
|
|
4347
|
+
sortedFields,
|
|
4348
|
+
defaultValues != null ? defaultValues : {},
|
|
4349
|
+
defaultPhoneCountry,
|
|
4350
|
+
includeTerms
|
|
4351
|
+
)
|
|
4352
|
+
);
|
|
4353
|
+
React21.useEffect(() => {
|
|
4354
|
+
if (isControlled) return;
|
|
4355
|
+
setInternal((prev) => {
|
|
4356
|
+
const next = initializeValues(
|
|
4357
|
+
sortedFields,
|
|
4358
|
+
defaultValues != null ? defaultValues : {},
|
|
4359
|
+
defaultPhoneCountry,
|
|
4360
|
+
includeTerms
|
|
4361
|
+
);
|
|
4362
|
+
for (const k of Object.keys(prev)) {
|
|
4363
|
+
if (Object.prototype.hasOwnProperty.call(next, k)) next[k] = prev[k];
|
|
4364
|
+
}
|
|
4365
|
+
return next;
|
|
4366
|
+
});
|
|
4367
|
+
}, [sortedFields.length, includeTerms]);
|
|
4368
|
+
const current = isControlled ? values : internal;
|
|
4369
|
+
const setField = (id, value) => {
|
|
4370
|
+
const next = __spreadProps(__spreadValues({}, current), { [id]: value });
|
|
4371
|
+
if (!isControlled) setInternal(next);
|
|
4372
|
+
onChange == null ? void 0 : onChange(next);
|
|
4373
|
+
};
|
|
4374
|
+
const handleSubmit = (e) => {
|
|
4375
|
+
e.preventDefault();
|
|
4376
|
+
onSubmit == null ? void 0 : onSubmit(current);
|
|
4377
|
+
};
|
|
4378
|
+
const termsAccepted = current[TERMS_ACCEPT_KEY] === true;
|
|
4379
|
+
const termsEnabled = includeTerms && !!terms;
|
|
4380
|
+
const acceptControl = (_a = terms == null ? void 0 : terms.acceptControl) != null ? _a : "checkbox";
|
|
4381
|
+
const dateRange = formatDateRange(adventure, dateFormatter);
|
|
4382
|
+
const hasTripInfo = !!adventure || !!booking || !!traveller;
|
|
4383
|
+
return /* @__PURE__ */ jsxs(
|
|
4384
|
+
"form",
|
|
4385
|
+
{
|
|
4386
|
+
onSubmit: handleSubmit,
|
|
4387
|
+
noValidate: true,
|
|
4388
|
+
className: cn("flex flex-col gap-10", className),
|
|
4389
|
+
children: [
|
|
4390
|
+
heroImage ? (
|
|
4391
|
+
/* ── Hero image (full-width) with centered white logo ─────────── */
|
|
4392
|
+
/* @__PURE__ */ jsxs("div", { className: "relative", children: [
|
|
4393
|
+
/* @__PURE__ */ jsx(
|
|
4394
|
+
"img",
|
|
3681
4395
|
{
|
|
3682
|
-
|
|
3683
|
-
|
|
3684
|
-
|
|
3685
|
-
onChange: (e) => set("lastName", e.target.value)
|
|
4396
|
+
src: heroImage,
|
|
4397
|
+
alt: heroImageAlt,
|
|
4398
|
+
className: "block h-[190px] w-full object-cover sm:h-[220px]"
|
|
3686
4399
|
}
|
|
3687
|
-
)
|
|
3688
|
-
/* @__PURE__ */ jsx(
|
|
3689
|
-
|
|
4400
|
+
),
|
|
4401
|
+
/* @__PURE__ */ jsx(
|
|
4402
|
+
"div",
|
|
3690
4403
|
{
|
|
3691
|
-
|
|
3692
|
-
|
|
3693
|
-
value: values.firstName,
|
|
3694
|
-
onChange: (e) => set("firstName", e.target.value)
|
|
4404
|
+
"aria-hidden": true,
|
|
4405
|
+
className: "absolute inset-0 bg-black/25"
|
|
3695
4406
|
}
|
|
3696
|
-
)
|
|
3697
|
-
/* @__PURE__ */ jsx("div", { className: "
|
|
3698
|
-
|
|
4407
|
+
),
|
|
4408
|
+
logo && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx(
|
|
4409
|
+
"img",
|
|
3699
4410
|
{
|
|
3700
|
-
|
|
3701
|
-
|
|
3702
|
-
|
|
3703
|
-
onChange: (e) => set("country", e.target.value),
|
|
3704
|
-
children: [
|
|
3705
|
-
/* @__PURE__ */ jsx("option", { value: "", disabled: true, hidden: true }),
|
|
3706
|
-
/* @__PURE__ */ jsx("option", { value: "France", children: "France" }),
|
|
3707
|
-
/* @__PURE__ */ jsx("option", { value: "Belgium", children: "Belgium" }),
|
|
3708
|
-
/* @__PURE__ */ jsx("option", { value: "Switzerland", children: "Switzerland" }),
|
|
3709
|
-
/* @__PURE__ */ jsx("option", { value: "Canada", children: "Canada" }),
|
|
3710
|
-
/* @__PURE__ */ jsx("option", { value: "Luxembourg", children: "Luxembourg" }),
|
|
3711
|
-
/* @__PURE__ */ jsx("option", { value: "United Kingdom", children: "United Kingdom" }),
|
|
3712
|
-
/* @__PURE__ */ jsx("option", { value: "United States", children: "United States" }),
|
|
3713
|
-
/* @__PURE__ */ jsx("option", { value: "Other", children: "Other" })
|
|
3714
|
-
]
|
|
4411
|
+
src: logo,
|
|
4412
|
+
alt: logoAlt,
|
|
4413
|
+
className: "block h-auto w-[120px] object-contain brightness-0 invert"
|
|
3715
4414
|
}
|
|
3716
4415
|
) })
|
|
4416
|
+
] })
|
|
4417
|
+
) : logo && /* eslint-disable-next-line @next/next/no-img-element */
|
|
4418
|
+
/* @__PURE__ */ jsx(
|
|
4419
|
+
"img",
|
|
4420
|
+
{
|
|
4421
|
+
src: logo,
|
|
4422
|
+
alt: logoAlt,
|
|
4423
|
+
className: "mx-auto block h-auto w-[150px] object-contain"
|
|
4424
|
+
}
|
|
4425
|
+
),
|
|
4426
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
4427
|
+
/* @__PURE__ */ jsx("h2", { className: "text-2xl font-black uppercase tracking-wide text-foreground font-heading leading-tight", children: title }),
|
|
4428
|
+
/* @__PURE__ */ jsx("p", { className: "mt-1.5 text-sm text-muted-foreground font-ui", children: subtitle != null ? subtitle : L.formSubtitle })
|
|
4429
|
+
] }),
|
|
4430
|
+
hasTripInfo && /* @__PURE__ */ jsx(FormSection2, { title: L.tripInfoSectionTitle, children: /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-1 gap-x-6 gap-y-3 text-sm font-ui sm:grid-cols-[max-content_1fr]", children: [
|
|
4431
|
+
adventure && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
4432
|
+
/* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: L.adventureLabel }),
|
|
4433
|
+
/* @__PURE__ */ jsx("dd", { className: "text-foreground font-medium", children: adventure.name })
|
|
3717
4434
|
] }),
|
|
3718
|
-
/* @__PURE__ */ jsxs(
|
|
3719
|
-
/* @__PURE__ */
|
|
3720
|
-
|
|
3721
|
-
|
|
3722
|
-
|
|
3723
|
-
|
|
3724
|
-
|
|
3725
|
-
|
|
3726
|
-
|
|
3727
|
-
|
|
3728
|
-
|
|
3729
|
-
|
|
3730
|
-
|
|
3731
|
-
|
|
3732
|
-
|
|
3733
|
-
|
|
3734
|
-
|
|
3735
|
-
|
|
3736
|
-
|
|
3737
|
-
|
|
3738
|
-
|
|
3739
|
-
|
|
3740
|
-
"transition-colors placeholder-transparent",
|
|
3741
|
-
"focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary"
|
|
3742
|
-
)
|
|
3743
|
-
}
|
|
3744
|
-
),
|
|
3745
|
-
/* @__PURE__ */ jsxs(
|
|
3746
|
-
"label",
|
|
3747
|
-
{
|
|
3748
|
-
htmlFor: "phone",
|
|
3749
|
-
className: cn(
|
|
3750
|
-
"pointer-events-none absolute left-3 top-1/2 -translate-y-1/2",
|
|
3751
|
-
"text-base text-muted-foreground font-ui transition-all duration-150",
|
|
3752
|
-
"peer-focus:top-3 peer-focus:translate-y-0 peer-focus:text-xs peer-focus:text-primary",
|
|
3753
|
-
"peer-not-placeholder-shown:top-3 peer-not-placeholder-shown:translate-y-0 peer-not-placeholder-shown:text-xs peer-not-placeholder-shown:text-muted-foreground"
|
|
3754
|
-
),
|
|
3755
|
-
children: [
|
|
3756
|
-
"Phone ",
|
|
3757
|
-
/* @__PURE__ */ jsx("span", { className: "text-primary", children: "*" })
|
|
3758
|
-
]
|
|
3759
|
-
}
|
|
3760
|
-
)
|
|
3761
|
-
] })
|
|
3762
|
-
] }),
|
|
3763
|
-
/* @__PURE__ */ jsx("div", { className: "min-w-0", children: /* @__PURE__ */ jsx(
|
|
3764
|
-
FloatingInput,
|
|
4435
|
+
dateRange && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
4436
|
+
/* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: (adventure == null ? void 0 : adventure.startDate) && (adventure == null ? void 0 : adventure.endDate) ? "Dates" : "Date" }),
|
|
4437
|
+
/* @__PURE__ */ jsx("dd", { className: "text-foreground", children: dateRange })
|
|
4438
|
+
] }),
|
|
4439
|
+
(adventure == null ? void 0 : adventure.partnerName) && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
4440
|
+
/* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: L.partnerLabel }),
|
|
4441
|
+
/* @__PURE__ */ jsx("dd", { className: "text-foreground", children: adventure.partnerName })
|
|
4442
|
+
] }),
|
|
4443
|
+
booking && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
4444
|
+
/* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: L.bookingLabel }),
|
|
4445
|
+
/* @__PURE__ */ jsx("dd", { className: "text-foreground font-mono tabular-nums", children: booking.id })
|
|
4446
|
+
] }),
|
|
4447
|
+
traveller && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
4448
|
+
/* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: L.travellerLabel }),
|
|
4449
|
+
/* @__PURE__ */ jsx("dd", { className: "text-foreground font-medium", children: traveller.fullName })
|
|
4450
|
+
] })
|
|
4451
|
+
] }) }),
|
|
4452
|
+
/* @__PURE__ */ jsx(FormSection2, { title: L.detailsSectionTitle, children: sortedFields.map((field) => {
|
|
4453
|
+
var _a2;
|
|
4454
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
|
|
4455
|
+
/* @__PURE__ */ jsx(
|
|
4456
|
+
FieldRenderer,
|
|
3765
4457
|
{
|
|
3766
|
-
|
|
4458
|
+
field,
|
|
4459
|
+
value: current[field.id],
|
|
4460
|
+
onChange: (v) => setField(field.id, v),
|
|
4461
|
+
defaultPhoneCountry,
|
|
4462
|
+
labels: L
|
|
4463
|
+
}
|
|
4464
|
+
),
|
|
4465
|
+
((_a2 = field.helpText) == null ? void 0 : _a2.trim()) && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground font-ui leading-relaxed", children: field.helpText.trim() })
|
|
4466
|
+
] }, field.id);
|
|
4467
|
+
}) }),
|
|
4468
|
+
termsEnabled && terms && /* @__PURE__ */ jsxs(FormSection2, { title: L.termsSectionTitle, children: [
|
|
4469
|
+
/* @__PURE__ */ jsx("div", { className: "max-h-72 overflow-y-auto rounded-lg border border-border bg-muted/30 p-4", children: /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap text-sm leading-relaxed text-foreground font-ui", children: terms.markdown }) }),
|
|
4470
|
+
acceptControl === "checkbox" ? /* @__PURE__ */ jsxs("label", { className: "flex cursor-pointer items-start gap-2.5 font-ui text-sm text-foreground", children: [
|
|
4471
|
+
/* @__PURE__ */ jsx(
|
|
4472
|
+
"input",
|
|
4473
|
+
{
|
|
4474
|
+
type: "checkbox",
|
|
4475
|
+
checked: termsAccepted,
|
|
3767
4476
|
required: true,
|
|
3768
|
-
|
|
3769
|
-
|
|
3770
|
-
onChange: (e) => set("email", e.target.value)
|
|
4477
|
+
onChange: (e) => setField(TERMS_ACCEPT_KEY, e.target.checked),
|
|
4478
|
+
className: "mt-0.5 h-4 w-4 shrink-0 accent-primary cursor-pointer"
|
|
3771
4479
|
}
|
|
3772
|
-
)
|
|
3773
|
-
|
|
4480
|
+
),
|
|
4481
|
+
/* @__PURE__ */ jsx("span", { children: L.termsAccept })
|
|
4482
|
+
] }) : /* @__PURE__ */ jsxs(
|
|
4483
|
+
"div",
|
|
4484
|
+
{
|
|
4485
|
+
role: "radiogroup",
|
|
4486
|
+
"aria-label": L.termsSectionTitle,
|
|
4487
|
+
className: "flex flex-wrap items-center gap-x-6 gap-y-3",
|
|
4488
|
+
children: [
|
|
4489
|
+
/* @__PURE__ */ jsxs("label", { className: "flex min-h-9 cursor-pointer items-center gap-2.5 font-ui text-sm text-foreground", children: [
|
|
4490
|
+
/* @__PURE__ */ jsx(
|
|
4491
|
+
"input",
|
|
4492
|
+
{
|
|
4493
|
+
type: "radio",
|
|
4494
|
+
name: "registration-terms-accept",
|
|
4495
|
+
checked: termsAccepted,
|
|
4496
|
+
required: true,
|
|
4497
|
+
onChange: () => setField(TERMS_ACCEPT_KEY, true),
|
|
4498
|
+
className: "h-4 w-4 shrink-0 accent-primary cursor-pointer"
|
|
4499
|
+
}
|
|
4500
|
+
),
|
|
4501
|
+
L.termsAccept
|
|
4502
|
+
] }),
|
|
4503
|
+
/* @__PURE__ */ jsxs("label", { className: "flex min-h-9 cursor-pointer items-center gap-2.5 font-ui text-sm text-muted-foreground", children: [
|
|
4504
|
+
/* @__PURE__ */ jsx(
|
|
4505
|
+
"input",
|
|
4506
|
+
{
|
|
4507
|
+
type: "radio",
|
|
4508
|
+
name: "registration-terms-accept",
|
|
4509
|
+
checked: current[TERMS_ACCEPT_KEY] === false,
|
|
4510
|
+
onChange: () => setField(TERMS_ACCEPT_KEY, false),
|
|
4511
|
+
className: "h-4 w-4 shrink-0 accent-primary cursor-pointer"
|
|
4512
|
+
}
|
|
4513
|
+
),
|
|
4514
|
+
L.termsDecline
|
|
4515
|
+
] })
|
|
4516
|
+
]
|
|
4517
|
+
}
|
|
4518
|
+
)
|
|
3774
4519
|
] }),
|
|
4520
|
+
error && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-sm text-destructive font-ui", children: error }),
|
|
3775
4521
|
/* @__PURE__ */ jsx("div", { className: "flex justify-center pt-2", children: /* @__PURE__ */ jsx(
|
|
3776
4522
|
"button",
|
|
3777
4523
|
{
|
|
@@ -3785,35 +4531,121 @@ function BookingForm({
|
|
|
3785
4531
|
"disabled:pointer-events-none disabled:opacity-60"
|
|
3786
4532
|
),
|
|
3787
4533
|
children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
3788
|
-
/* @__PURE__ */ jsxs(
|
|
3789
|
-
|
|
3790
|
-
|
|
3791
|
-
|
|
3792
|
-
|
|
3793
|
-
|
|
3794
|
-
|
|
3795
|
-
|
|
3796
|
-
|
|
3797
|
-
|
|
3798
|
-
|
|
3799
|
-
|
|
3800
|
-
|
|
3801
|
-
|
|
3802
|
-
|
|
3803
|
-
|
|
3804
|
-
|
|
3805
|
-
|
|
3806
|
-
|
|
3807
|
-
|
|
3808
|
-
|
|
3809
|
-
|
|
3810
|
-
|
|
4534
|
+
/* @__PURE__ */ jsxs(
|
|
4535
|
+
"svg",
|
|
4536
|
+
{
|
|
4537
|
+
className: "h-4 w-4 animate-spin",
|
|
4538
|
+
viewBox: "0 0 24 24",
|
|
4539
|
+
fill: "none",
|
|
4540
|
+
children: [
|
|
4541
|
+
/* @__PURE__ */ jsx(
|
|
4542
|
+
"circle",
|
|
4543
|
+
{
|
|
4544
|
+
className: "opacity-25",
|
|
4545
|
+
cx: "12",
|
|
4546
|
+
cy: "12",
|
|
4547
|
+
r: "10",
|
|
4548
|
+
stroke: "currentColor",
|
|
4549
|
+
strokeWidth: "4"
|
|
4550
|
+
}
|
|
4551
|
+
),
|
|
4552
|
+
/* @__PURE__ */ jsx(
|
|
4553
|
+
"path",
|
|
4554
|
+
{
|
|
4555
|
+
className: "opacity-75",
|
|
4556
|
+
fill: "currentColor",
|
|
4557
|
+
d: "M4 12a8 8 0 018-8v4l3-3-3-3v4a8 8 0 00-8 8h4z"
|
|
4558
|
+
}
|
|
4559
|
+
)
|
|
4560
|
+
]
|
|
4561
|
+
}
|
|
4562
|
+
),
|
|
4563
|
+
L.submitting
|
|
4564
|
+
] }) : L.submitButton
|
|
3811
4565
|
}
|
|
3812
4566
|
) })
|
|
3813
4567
|
]
|
|
3814
4568
|
}
|
|
3815
4569
|
);
|
|
3816
4570
|
}
|
|
4571
|
+
function phoneCountryDial(code) {
|
|
4572
|
+
var _a, _b;
|
|
4573
|
+
return (_b = (_a = PHONE_COUNTRIES.find((c) => c.code === code)) == null ? void 0 : _a.dial) != null ? _b : code;
|
|
4574
|
+
}
|
|
4575
|
+
function defaultFormatAnswer(field, value, fmtDate) {
|
|
4576
|
+
var _a, _b, _c, _d, _e, _f;
|
|
4577
|
+
if (value == null || value === "") return "\u2014";
|
|
4578
|
+
if (value instanceof Date) return fmtDate(value);
|
|
4579
|
+
if (Array.isArray(value)) {
|
|
4580
|
+
if (field.type === "checkbox" && field.options) {
|
|
4581
|
+
return field.options.filter((o) => value.includes(o.value)).map((o) => o.label).join(", ") || "\u2014";
|
|
4582
|
+
}
|
|
4583
|
+
return value.filter(Boolean).join(", ") || "\u2014";
|
|
4584
|
+
}
|
|
4585
|
+
if (typeof value === "boolean") return value ? "Yes" : "No";
|
|
4586
|
+
if (typeof value === "object") {
|
|
4587
|
+
if ("contactName" in value) {
|
|
4588
|
+
const ec = value;
|
|
4589
|
+
const name = [ec.contactName.firstName, ec.contactName.lastName].filter(Boolean).join(" ");
|
|
4590
|
+
const phone = [phoneCountryDial(ec.phone.country), ec.phone.nationalNumber].filter(Boolean).join(" ");
|
|
4591
|
+
return [name, phone].filter(Boolean).join(" \xB7 ") || "\u2014";
|
|
4592
|
+
}
|
|
4593
|
+
if ("firstName" in value || "lastName" in value) {
|
|
4594
|
+
const n = value;
|
|
4595
|
+
return [n.firstName, n.lastName].filter(Boolean).join(" ") || "\u2014";
|
|
4596
|
+
}
|
|
4597
|
+
if ("country" in value && "nationalNumber" in value) {
|
|
4598
|
+
const p = value;
|
|
4599
|
+
return [phoneCountryDial(p.country), p.nationalNumber].filter(Boolean).join(" ") || "\u2014";
|
|
4600
|
+
}
|
|
4601
|
+
}
|
|
4602
|
+
if (field.type === "nationality" && typeof value === "string") {
|
|
4603
|
+
return (_b = (_a = COUNTRIES.find((c) => c.code === value)) == null ? void 0 : _a.name) != null ? _b : value;
|
|
4604
|
+
}
|
|
4605
|
+
if (field.type === "select" && field.options) {
|
|
4606
|
+
return (_d = (_c = field.options.find((o) => o.value === value)) == null ? void 0 : _c.label) != null ? _d : String(value);
|
|
4607
|
+
}
|
|
4608
|
+
if (field.type === "radio" && field.options) {
|
|
4609
|
+
return (_f = (_e = field.options.find((o) => o.value === value)) == null ? void 0 : _e.label) != null ? _f : String(value);
|
|
4610
|
+
}
|
|
4611
|
+
if (field.type === "date" && typeof value === "string") return fmtDate(value);
|
|
4612
|
+
return String(value);
|
|
4613
|
+
}
|
|
4614
|
+
function isoOrDateToString(v) {
|
|
4615
|
+
if (!v) return "\u2014";
|
|
4616
|
+
const d = v instanceof Date ? v : new Date(v);
|
|
4617
|
+
if (Number.isNaN(d.getTime())) return typeof v === "string" ? v : "\u2014";
|
|
4618
|
+
return d.toISOString().slice(0, 10);
|
|
4619
|
+
}
|
|
4620
|
+
function RegistrationSuccessCard({
|
|
4621
|
+
title = "Thanks \u2014 your answers have been received.",
|
|
4622
|
+
message = "We'll get in touch if anything else is needed.",
|
|
4623
|
+
answersTitle = "Your submitted answers",
|
|
4624
|
+
fields,
|
|
4625
|
+
answers,
|
|
4626
|
+
dateFormatter = isoOrDateToString,
|
|
4627
|
+
formatAnswer,
|
|
4628
|
+
className
|
|
4629
|
+
}) {
|
|
4630
|
+
const sorted = [...fields].sort((a, b) => {
|
|
4631
|
+
var _a, _b;
|
|
4632
|
+
return ((_a = a.order) != null ? _a : 0) - ((_b = b.order) != null ? _b : 0);
|
|
4633
|
+
}).filter((f) => Object.prototype.hasOwnProperty.call(answers, f.id));
|
|
4634
|
+
return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-10", className), children: [
|
|
4635
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3 text-center", children: [
|
|
4636
|
+
/* @__PURE__ */ jsx("div", { className: "inline-flex h-14 w-14 items-center justify-center rounded-full bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(CircleCheckIcon, { size: 28 }) }),
|
|
4637
|
+
/* @__PURE__ */ jsx("h2", { className: "text-2xl font-black uppercase tracking-wide text-foreground font-heading leading-tight", children: title }),
|
|
4638
|
+
/* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground font-ui", children: message })
|
|
4639
|
+
] }),
|
|
4640
|
+
sorted.length > 0 && /* @__PURE__ */ jsx(FormSection2, { title: answersTitle, children: /* @__PURE__ */ jsx("dl", { className: "grid grid-cols-1 gap-x-6 gap-y-3 text-sm font-ui sm:grid-cols-[max-content_1fr]", children: sorted.map((f) => /* @__PURE__ */ jsxs(React21.Fragment, { children: [
|
|
4641
|
+
/* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: f.label }),
|
|
4642
|
+
/* @__PURE__ */ jsx("dd", { className: "text-foreground", children: (formatAnswer != null ? formatAnswer : ((field, v) => defaultFormatAnswer(field, v, dateFormatter)))(
|
|
4643
|
+
f,
|
|
4644
|
+
answers[f.id]
|
|
4645
|
+
) })
|
|
4646
|
+
] }, f.id)) }) })
|
|
4647
|
+
] });
|
|
4648
|
+
}
|
|
3817
4649
|
function Checkbox(_a) {
|
|
3818
4650
|
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
3819
4651
|
return /* @__PURE__ */ jsx(
|
|
@@ -3839,7 +4671,7 @@ function Checkbox(_a) {
|
|
|
3839
4671
|
})
|
|
3840
4672
|
);
|
|
3841
4673
|
}
|
|
3842
|
-
var AccordionVariantContext =
|
|
4674
|
+
var AccordionVariantContext = React21.createContext("default");
|
|
3843
4675
|
function Accordion(_a) {
|
|
3844
4676
|
var _b = _a, { className, variant = "default" } = _b, props = __objRest(_b, ["className", "variant"]);
|
|
3845
4677
|
return /* @__PURE__ */ jsx(AccordionVariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsx(
|
|
@@ -3857,7 +4689,7 @@ function Accordion(_a) {
|
|
|
3857
4689
|
}
|
|
3858
4690
|
function AccordionItem(_a) {
|
|
3859
4691
|
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
3860
|
-
const variant =
|
|
4692
|
+
const variant = React21.useContext(AccordionVariantContext);
|
|
3861
4693
|
return /* @__PURE__ */ jsx(
|
|
3862
4694
|
Accordion$1.Item,
|
|
3863
4695
|
__spreadValues({
|
|
@@ -3878,7 +4710,7 @@ function AccordionTrigger(_a) {
|
|
|
3878
4710
|
"className",
|
|
3879
4711
|
"children"
|
|
3880
4712
|
]);
|
|
3881
|
-
const variant =
|
|
4713
|
+
const variant = React21.useContext(AccordionVariantContext);
|
|
3882
4714
|
return /* @__PURE__ */ jsx(Accordion$1.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
|
|
3883
4715
|
Accordion$1.Trigger,
|
|
3884
4716
|
__spreadProps(__spreadValues({
|
|
@@ -3932,7 +4764,7 @@ function AccordionContent(_a) {
|
|
|
3932
4764
|
"className",
|
|
3933
4765
|
"children"
|
|
3934
4766
|
]);
|
|
3935
|
-
const variant =
|
|
4767
|
+
const variant = React21.useContext(AccordionVariantContext);
|
|
3936
4768
|
return /* @__PURE__ */ jsx(
|
|
3937
4769
|
Accordion$1.Panel,
|
|
3938
4770
|
__spreadProps(__spreadValues({
|
|
@@ -3964,7 +4796,7 @@ function FilterPanel({
|
|
|
3964
4796
|
title = "Filters",
|
|
3965
4797
|
className
|
|
3966
4798
|
}) {
|
|
3967
|
-
const [internalValue, setInternalValue] =
|
|
4799
|
+
const [internalValue, setInternalValue] = React21.useState(
|
|
3968
4800
|
() => Object.fromEntries(groups.map((g) => [g.id, []]))
|
|
3969
4801
|
);
|
|
3970
4802
|
const selected = value != null ? value : internalValue;
|
|
@@ -4126,11 +4958,11 @@ function ItineraryModal({
|
|
|
4126
4958
|
onNext
|
|
4127
4959
|
}) {
|
|
4128
4960
|
var _a, _b, _c;
|
|
4129
|
-
const [imgIndex, setImgIndex] =
|
|
4961
|
+
const [imgIndex, setImgIndex] = React21.useState(0);
|
|
4130
4962
|
const images = stop ? [stop.coverImage, ...(_a = stop.images) != null ? _a : []] : [];
|
|
4131
4963
|
const isFirst = (stop == null ? void 0 : stop.dayNumber) === ((_b = allStops[0]) == null ? void 0 : _b.dayNumber);
|
|
4132
4964
|
const isLast = (stop == null ? void 0 : stop.dayNumber) === ((_c = allStops[allStops.length - 1]) == null ? void 0 : _c.dayNumber);
|
|
4133
|
-
|
|
4965
|
+
React21.useEffect(() => {
|
|
4134
4966
|
setImgIndex(0);
|
|
4135
4967
|
}, [stop == null ? void 0 : stop.dayNumber]);
|
|
4136
4968
|
if (!stop) return null;
|
|
@@ -4257,8 +5089,8 @@ function ItineraryModal({
|
|
|
4257
5089
|
) });
|
|
4258
5090
|
}
|
|
4259
5091
|
function Itinerary({ title, subtitle, stops, className }) {
|
|
4260
|
-
const [activeIndex, setActiveIndex] =
|
|
4261
|
-
const scrollRef =
|
|
5092
|
+
const [activeIndex, setActiveIndex] = React21.useState(null);
|
|
5093
|
+
const scrollRef = React21.useRef(null);
|
|
4262
5094
|
const activeStop = activeIndex !== null ? stops[activeIndex] : null;
|
|
4263
5095
|
const scrollBy = (dir) => {
|
|
4264
5096
|
if (!scrollRef.current) return;
|
|
@@ -4344,8 +5176,8 @@ function MenuTrip({
|
|
|
4344
5176
|
bold = true,
|
|
4345
5177
|
className
|
|
4346
5178
|
}) {
|
|
4347
|
-
const scrollRef =
|
|
4348
|
-
|
|
5179
|
+
const scrollRef = React21.useRef(null);
|
|
5180
|
+
React21.useEffect(() => {
|
|
4349
5181
|
if (!scrollRef.current || !activeSection) return;
|
|
4350
5182
|
const container = scrollRef.current;
|
|
4351
5183
|
const btn = container.querySelector(
|
|
@@ -4491,18 +5323,18 @@ function Lightbox({
|
|
|
4491
5323
|
onClose
|
|
4492
5324
|
}) {
|
|
4493
5325
|
var _a;
|
|
4494
|
-
const [index, setIndex] =
|
|
5326
|
+
const [index, setIndex] = React21.useState(initialIndex);
|
|
4495
5327
|
const total = photos.length;
|
|
4496
5328
|
const photo = photos[index];
|
|
4497
|
-
const prev =
|
|
5329
|
+
const prev = React21.useCallback(
|
|
4498
5330
|
() => setIndex((i) => (i - 1 + total) % total),
|
|
4499
5331
|
[total]
|
|
4500
5332
|
);
|
|
4501
|
-
const next =
|
|
5333
|
+
const next = React21.useCallback(
|
|
4502
5334
|
() => setIndex((i) => (i + 1) % total),
|
|
4503
5335
|
[total]
|
|
4504
5336
|
);
|
|
4505
|
-
|
|
5337
|
+
React21.useEffect(() => {
|
|
4506
5338
|
const onKey = (e) => {
|
|
4507
5339
|
if (e.key === "Escape") onClose();
|
|
4508
5340
|
if (e.key === "ArrowLeft") prev();
|
|
@@ -4696,7 +5528,7 @@ function GridGallery({
|
|
|
4696
5528
|
initialVisible,
|
|
4697
5529
|
onOpen
|
|
4698
5530
|
}) {
|
|
4699
|
-
const [expanded, setExpanded] =
|
|
5531
|
+
const [expanded, setExpanded] = React21.useState(false);
|
|
4700
5532
|
const cols = gridCols(photos.length);
|
|
4701
5533
|
const hasMore = photos.length > initialVisible;
|
|
4702
5534
|
const visible = expanded || !hasMore ? photos : photos.slice(0, initialVisible);
|
|
@@ -4726,7 +5558,7 @@ function MasonryGallery({
|
|
|
4726
5558
|
initialVisible,
|
|
4727
5559
|
onOpen
|
|
4728
5560
|
}) {
|
|
4729
|
-
const [expanded, setExpanded] =
|
|
5561
|
+
const [expanded, setExpanded] = React21.useState(false);
|
|
4730
5562
|
const hasMore = photos.length > initialVisible;
|
|
4731
5563
|
const visible = expanded || !hasMore ? photos : photos.slice(0, initialVisible);
|
|
4732
5564
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
@@ -4799,7 +5631,7 @@ function FeaturedGallery({
|
|
|
4799
5631
|
photos,
|
|
4800
5632
|
onOpen
|
|
4801
5633
|
}) {
|
|
4802
|
-
const [expanded, setExpanded] =
|
|
5634
|
+
const [expanded, setExpanded] = React21.useState(false);
|
|
4803
5635
|
const featured = photos.slice(0, 3);
|
|
4804
5636
|
const extra = photos.slice(3);
|
|
4805
5637
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
@@ -4876,8 +5708,8 @@ function PhotoGallery({
|
|
|
4876
5708
|
onPhotoClick,
|
|
4877
5709
|
className
|
|
4878
5710
|
}) {
|
|
4879
|
-
const [lightboxIndex, setLightboxIndex] =
|
|
4880
|
-
const normalised =
|
|
5711
|
+
const [lightboxIndex, setLightboxIndex] = React21.useState(null);
|
|
5712
|
+
const normalised = React21.useMemo(() => photos.map(normalise), [photos]);
|
|
4881
5713
|
const handleOpen = (index) => {
|
|
4882
5714
|
setLightboxIndex(index);
|
|
4883
5715
|
onPhotoClick == null ? void 0 : onPhotoClick(normalised[index].src, index);
|
|
@@ -4966,7 +5798,7 @@ function PricingTrip({
|
|
|
4966
5798
|
variant = "card",
|
|
4967
5799
|
className
|
|
4968
5800
|
}) {
|
|
4969
|
-
const [showPricing, setShowPricing] =
|
|
5801
|
+
const [showPricing, setShowPricing] = React21.useState(false);
|
|
4970
5802
|
if (variant === "compact") {
|
|
4971
5803
|
return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3", className), children: [
|
|
4972
5804
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
@@ -5289,14 +6121,14 @@ function SiteHeader({
|
|
|
5289
6121
|
className
|
|
5290
6122
|
}) {
|
|
5291
6123
|
const t = VARIANT[variant];
|
|
5292
|
-
const [openMenu, setOpenMenu] =
|
|
5293
|
-
const [langOpen, setLangOpen] =
|
|
5294
|
-
const [mobileOpen, setMobileOpen] =
|
|
5295
|
-
const [openMobileSection, setOpenMobileSection] =
|
|
5296
|
-
const [activeLang, setActiveLang] =
|
|
6124
|
+
const [openMenu, setOpenMenu] = React21.useState(null);
|
|
6125
|
+
const [langOpen, setLangOpen] = React21.useState(false);
|
|
6126
|
+
const [mobileOpen, setMobileOpen] = React21.useState(false);
|
|
6127
|
+
const [openMobileSection, setOpenMobileSection] = React21.useState(null);
|
|
6128
|
+
const [activeLang, setActiveLang] = React21.useState(currentLanguage);
|
|
5297
6129
|
const toggleMobileSection = (label) => setOpenMobileSection((prev) => prev === label ? null : label);
|
|
5298
|
-
const menuCloseTimer =
|
|
5299
|
-
const langCloseTimer =
|
|
6130
|
+
const menuCloseTimer = React21.useRef(void 0);
|
|
6131
|
+
const langCloseTimer = React21.useRef(void 0);
|
|
5300
6132
|
const handleMenuEnter = (label) => {
|
|
5301
6133
|
clearTimeout(menuCloseTimer.current);
|
|
5302
6134
|
setOpenMenu(label);
|
|
@@ -5317,7 +6149,7 @@ function SiteHeader({
|
|
|
5317
6149
|
setOpenMenu(null);
|
|
5318
6150
|
setLangOpen(false);
|
|
5319
6151
|
};
|
|
5320
|
-
|
|
6152
|
+
React21.useEffect(() => () => {
|
|
5321
6153
|
clearTimeout(menuCloseTimer.current);
|
|
5322
6154
|
clearTimeout(langCloseTimer.current);
|
|
5323
6155
|
}, []);
|
|
@@ -5582,7 +6414,7 @@ function SiteHeader({
|
|
|
5582
6414
|
), children: [
|
|
5583
6415
|
/* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5 flex-wrap", children: languages.map((lang, i) => {
|
|
5584
6416
|
const isActive = lang.code === activeLang;
|
|
5585
|
-
return /* @__PURE__ */ jsxs(
|
|
6417
|
+
return /* @__PURE__ */ jsxs(React21.Fragment, { children: [
|
|
5586
6418
|
i > 0 && /* @__PURE__ */ jsx("span", { className: cn(
|
|
5587
6419
|
"text-xs select-none",
|
|
5588
6420
|
variant === "white" ? "text-border" : "text-white/15"
|
|
@@ -5644,8 +6476,8 @@ function SiteHeader({
|
|
|
5644
6476
|
);
|
|
5645
6477
|
}
|
|
5646
6478
|
function ThemeToggle({ className }) {
|
|
5647
|
-
const [dark, setDark] =
|
|
5648
|
-
|
|
6479
|
+
const [dark, setDark] = React21.useState(false);
|
|
6480
|
+
React21.useEffect(() => {
|
|
5649
6481
|
const saved = localStorage.getItem("theme");
|
|
5650
6482
|
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
5651
6483
|
const isDark = saved === "dark" || !saved && prefersDark;
|
|
@@ -5674,7 +6506,7 @@ function ThemeToggle({ className }) {
|
|
|
5674
6506
|
}
|
|
5675
6507
|
);
|
|
5676
6508
|
}
|
|
5677
|
-
function
|
|
6509
|
+
function CalendarIcon6() {
|
|
5678
6510
|
return /* @__PURE__ */ jsxs("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
5679
6511
|
/* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }),
|
|
5680
6512
|
/* @__PURE__ */ jsx("line", { x1: "16", y1: "2", x2: "16", y2: "6" }),
|
|
@@ -5717,7 +6549,7 @@ var sizeConfig = {
|
|
|
5717
6549
|
var statusConfig = {
|
|
5718
6550
|
"sold-out": {
|
|
5719
6551
|
label: "All seats taken",
|
|
5720
|
-
icon: /* @__PURE__ */ jsx(
|
|
6552
|
+
icon: /* @__PURE__ */ jsx(CalendarIcon6, {})
|
|
5721
6553
|
},
|
|
5722
6554
|
trending: {
|
|
5723
6555
|
label: "Trending",
|
|
@@ -5796,7 +6628,7 @@ function TripCard({
|
|
|
5796
6628
|
);
|
|
5797
6629
|
}
|
|
5798
6630
|
function useHlsVideo(videoRef, src) {
|
|
5799
|
-
|
|
6631
|
+
React21.useEffect(() => {
|
|
5800
6632
|
if (!src || !videoRef.current) return;
|
|
5801
6633
|
const video = videoRef.current;
|
|
5802
6634
|
if (!src.includes(".m3u8")) return;
|
|
@@ -5838,11 +6670,11 @@ function TripHeader({
|
|
|
5838
6670
|
className
|
|
5839
6671
|
}) {
|
|
5840
6672
|
var _a;
|
|
5841
|
-
const [heroIndex, setHeroIndex] =
|
|
5842
|
-
const [videoReady, setVideoReady] =
|
|
5843
|
-
const videoRef =
|
|
6673
|
+
const [heroIndex, setHeroIndex] = React21.useState(0);
|
|
6674
|
+
const [videoReady, setVideoReady] = React21.useState(false);
|
|
6675
|
+
const videoRef = React21.useRef(null);
|
|
5844
6676
|
const isHls = !!(videoUrl == null ? void 0 : videoUrl.includes(".m3u8"));
|
|
5845
|
-
const validImages =
|
|
6677
|
+
const validImages = React21.useMemo(
|
|
5846
6678
|
() => images.map((u) => u == null ? void 0 : u.trim()).filter(Boolean),
|
|
5847
6679
|
[images]
|
|
5848
6680
|
);
|
|
@@ -5857,7 +6689,7 @@ function TripHeader({
|
|
|
5857
6689
|
const nights = duration ? (_a = duration.nights) != null ? _a : Math.max(duration.days - 1, 1) : null;
|
|
5858
6690
|
const hasMeta = !!(destination || duration);
|
|
5859
6691
|
useHlsVideo(videoRef, isHls ? videoUrl : void 0);
|
|
5860
|
-
|
|
6692
|
+
React21.useEffect(() => {
|
|
5861
6693
|
if (!videoUrl) return;
|
|
5862
6694
|
const el = videoRef.current;
|
|
5863
6695
|
if (!el) return;
|
|
@@ -5999,7 +6831,7 @@ function TripHeader({
|
|
|
5999
6831
|
siteHeader ? "-mt-44" : "-mt-36"
|
|
6000
6832
|
),
|
|
6001
6833
|
children: [
|
|
6002
|
-
breadcrumb && breadcrumb.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-3 flex items-center gap-1.5 flex-wrap", children: breadcrumb.map((crumb, i) => /* @__PURE__ */ jsxs(
|
|
6834
|
+
breadcrumb && breadcrumb.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-3 flex items-center gap-1.5 flex-wrap", children: breadcrumb.map((crumb, i) => /* @__PURE__ */ jsxs(React21.Fragment, { children: [
|
|
6003
6835
|
i > 0 && /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3 text-white/50 shrink-0" }),
|
|
6004
6836
|
/* @__PURE__ */ jsx("span", { className: "text-xs text-white/70 font-ui hover:text-white/90 cursor-default", children: crumb.label })
|
|
6005
6837
|
] }, i)) }),
|
|
@@ -6099,19 +6931,19 @@ function TripPage({
|
|
|
6099
6931
|
features,
|
|
6100
6932
|
className
|
|
6101
6933
|
}) {
|
|
6102
|
-
const [activeSection, setActiveSection] =
|
|
6103
|
-
const [navFloating, setNavFloating] =
|
|
6104
|
-
const [navHidden, setNavHidden] =
|
|
6105
|
-
const [isFloating, setIsFloating] =
|
|
6106
|
-
const [sidebarPos, setSidebarPos] =
|
|
6107
|
-
const [pricingBarVisible, setPricingBarVisible] =
|
|
6108
|
-
const navRef =
|
|
6109
|
-
const navSentinelRef =
|
|
6110
|
-
const sentinelRef =
|
|
6111
|
-
const sidebarPlaceholderRef =
|
|
6112
|
-
const pricingBarRef =
|
|
6113
|
-
const galleryRef =
|
|
6114
|
-
const sections =
|
|
6934
|
+
const [activeSection, setActiveSection] = React21.useState("");
|
|
6935
|
+
const [navFloating, setNavFloating] = React21.useState(false);
|
|
6936
|
+
const [navHidden, setNavHidden] = React21.useState(false);
|
|
6937
|
+
const [isFloating, setIsFloating] = React21.useState(false);
|
|
6938
|
+
const [sidebarPos, setSidebarPos] = React21.useState(null);
|
|
6939
|
+
const [pricingBarVisible, setPricingBarVisible] = React21.useState(false);
|
|
6940
|
+
const navRef = React21.useRef(null);
|
|
6941
|
+
const navSentinelRef = React21.useRef(null);
|
|
6942
|
+
const sentinelRef = React21.useRef(null);
|
|
6943
|
+
const sidebarPlaceholderRef = React21.useRef(null);
|
|
6944
|
+
const pricingBarRef = React21.useRef(null);
|
|
6945
|
+
const galleryRef = React21.useRef(null);
|
|
6946
|
+
const sections = React21.useMemo(
|
|
6115
6947
|
() => [
|
|
6116
6948
|
{ id: "key-info", label: "Key info", show: !!(infoGroups == null ? void 0 : infoGroups.length) },
|
|
6117
6949
|
{ id: "overview", label: "Overview", show: !!overview },
|
|
@@ -6126,7 +6958,7 @@ function TripPage({
|
|
|
6126
6958
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
6127
6959
|
[]
|
|
6128
6960
|
);
|
|
6129
|
-
|
|
6961
|
+
React21.useEffect(() => {
|
|
6130
6962
|
const sentinel = navSentinelRef.current;
|
|
6131
6963
|
if (!sentinel) return;
|
|
6132
6964
|
const update = () => setNavFloating(sentinel.getBoundingClientRect().top < 1);
|
|
@@ -6134,7 +6966,7 @@ function TripPage({
|
|
|
6134
6966
|
update();
|
|
6135
6967
|
return () => document.removeEventListener("scroll", update, { capture: true });
|
|
6136
6968
|
}, []);
|
|
6137
|
-
|
|
6969
|
+
React21.useEffect(() => {
|
|
6138
6970
|
const sentinel = sentinelRef.current;
|
|
6139
6971
|
if (!sentinel) return;
|
|
6140
6972
|
const update = () => setIsFloating(sentinel.getBoundingClientRect().top < 1);
|
|
@@ -6142,7 +6974,7 @@ function TripPage({
|
|
|
6142
6974
|
update();
|
|
6143
6975
|
return () => document.removeEventListener("scroll", update, { capture: true });
|
|
6144
6976
|
}, []);
|
|
6145
|
-
|
|
6977
|
+
React21.useEffect(() => {
|
|
6146
6978
|
const measure = () => {
|
|
6147
6979
|
if (!sidebarPlaceholderRef.current) return;
|
|
6148
6980
|
const rect = sidebarPlaceholderRef.current.getBoundingClientRect();
|
|
@@ -6152,7 +6984,7 @@ function TripPage({
|
|
|
6152
6984
|
window.addEventListener("resize", measure);
|
|
6153
6985
|
return () => window.removeEventListener("resize", measure);
|
|
6154
6986
|
}, [isFloating]);
|
|
6155
|
-
|
|
6987
|
+
React21.useEffect(() => {
|
|
6156
6988
|
const check = () => {
|
|
6157
6989
|
var _a;
|
|
6158
6990
|
const target = (_a = galleryRef.current) != null ? _a : pricingBarRef.current;
|
|
@@ -6163,7 +6995,7 @@ function TripPage({
|
|
|
6163
6995
|
check();
|
|
6164
6996
|
return () => document.removeEventListener("scroll", check, { capture: true });
|
|
6165
6997
|
}, []);
|
|
6166
|
-
|
|
6998
|
+
React21.useEffect(() => {
|
|
6167
6999
|
const check = () => {
|
|
6168
7000
|
if (!pricingBarRef.current) return;
|
|
6169
7001
|
setNavHidden(pricingBarRef.current.getBoundingClientRect().top < window.innerHeight * 0.92);
|
|
@@ -6172,7 +7004,7 @@ function TripPage({
|
|
|
6172
7004
|
check();
|
|
6173
7005
|
return () => document.removeEventListener("scroll", check, { capture: true });
|
|
6174
7006
|
}, []);
|
|
6175
|
-
|
|
7007
|
+
React21.useEffect(() => {
|
|
6176
7008
|
if (sections.length === 0) return;
|
|
6177
7009
|
setActiveSection(sections[0].id);
|
|
6178
7010
|
const update = () => {
|
|
@@ -7186,6 +8018,6 @@ function LeadCapturePopup({
|
|
|
7186
8018
|
);
|
|
7187
8019
|
}
|
|
7188
8020
|
|
|
7189
|
-
export { ActivityCard, Alert, BookingConfirmation, BookingConfirmationEmail, BookingConfirmedCard, BookingDetails, BookingForm, BookingShell, Button, COUNTRIES, CounterField, CountrySearchField, DEFAULT_HEADER_LINKS, DEFAULT_LANGUAGES, DatePickerField, FilterPanel, FloatingInput, FloatingSelect, Itinerary, LeadCapturePopup, MenuTrip, Offer, OfferAdventureCard, PaymentAmountSelector, PaymentMethodSelector, PaymentModalShell, PhoneCountrySelect, PhotoGallery, PricingTrip, SiteHeader, TermsSection, ThemeToggle, TripCard, TripHeader, TripPage, buttonVariants, cn, getStripeAppearance, stripeAppearance };
|
|
8021
|
+
export { ActivityCard, Alert, BirthDateField, BookingConfirmation, BookingConfirmationEmail, BookingConfirmedCard, BookingDetails, BookingForm, BookingShell, Button, COUNTRIES, CounterField, CountrySearchField, DEFAULT_HEADER_LINKS, DEFAULT_LANGUAGES, DatePickerField, FilterPanel, FloatingInput, FloatingSelect, Itinerary, LeadCapturePopup, MenuTrip, Offer, OfferAdventureCard, PaymentAmountSelector, PaymentMethodSelector, PaymentModalShell, PhoneCountrySelect, PhotoGallery, PricingTrip, RegistrationForm, RegistrationSuccessCard, SiteHeader, TermsSection, ThemeToggle, TripCard, TripHeader, TripPage, buttonVariants, cn, getStripeAppearance, stripeAppearance };
|
|
7190
8022
|
//# sourceMappingURL=index.js.map
|
|
7191
8023
|
//# sourceMappingURL=index.js.map
|