@planetaexo/design-system 0.3.14 → 0.3.16
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 +1906 -1109
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +137 -6
- package/dist/index.d.ts +137 -6
- package/dist/index.js +1887 -1094
- 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, MapIcon, MessageCircleIcon, UsersIcon, CreditCardIcon, AlertCircleIcon, MinusIcon, PlusIcon, CalendarIcon, ChevronLeftIcon, ClockIcon, ChevronUpIcon, UserIcon, MenuIcon, XIcon, SunIcon, MoonIcon, MapPinIcon, PackageIcon, InfoIcon, Loader2Icon, SendIcon, CheckCircleIcon, CheckIcon, CheckCircle2Icon, 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
|
{
|
|
@@ -1686,73 +1689,71 @@ function PaymentMethodSelector({
|
|
|
1686
1689
|
)) })
|
|
1687
1690
|
] });
|
|
1688
1691
|
}
|
|
1689
|
-
var
|
|
1690
|
-
{
|
|
1691
|
-
|
|
1692
|
-
|
|
1693
|
-
|
|
1694
|
-
|
|
1695
|
-
|
|
1696
|
-
body: '"PlanetaEXO" refere-se \xE0 empresa organizadora de viagens e experi\xEAncias. "Cliente" refere-se \xE0 pessoa que realiza a reserva. "Servi\xE7o" refere-se a qualquer pacote de viagem, aventura, passeio ou experi\xEAncia oferecida pela PlanetaEXO.'
|
|
1697
|
-
},
|
|
1698
|
-
{
|
|
1699
|
-
heading: "3. Reservas e Confirma\xE7\xE3o",
|
|
1700
|
-
body: "Uma reserva \xE9 considerada confirmada somente ap\xF3s o recebimento do pagamento (total ou dep\xF3sito conforme aplic\xE1vel) e o envio de confirma\xE7\xE3o por escrito pela PlanetaEXO. A PlanetaEXO reserva-se o direito de recusar ou cancelar reservas a seu crit\xE9rio."
|
|
1701
|
-
},
|
|
1702
|
-
{
|
|
1703
|
-
heading: "4. Pre\xE7os e Pagamento",
|
|
1704
|
-
body: "Todos os pre\xE7os s\xE3o expressos na moeda indicada na proposta e podem estar sujeitos a varia\xE7\xE3o cambial. O pagamento do dep\xF3sito ou valor total deve ser realizado nos prazos estipulados na proposta. A PlanetaEXO n\xE3o se responsabiliza por flutua\xE7\xF5es cambiais ap\xF3s a confirma\xE7\xE3o da reserva."
|
|
1705
|
-
},
|
|
1706
|
-
{
|
|
1707
|
-
heading: "5. Pol\xEDtica de Cancelamento",
|
|
1708
|
-
body: "Cancelamentos devem ser comunicados por escrito \xE0 PlanetaEXO. As penalidades de cancelamento variam conforme o prazo de anteced\xEAncia: cancelamentos com mais de 30 dias de anteced\xEAncia incorrem em perda do dep\xF3sito; cancelamentos com menos de 30 dias incorrem em perda de 50% do valor total; cancelamentos com menos de 15 dias incorrem em perda de 100% do valor total. Casos especiais (for\xE7a maior, emerg\xEAncias m\xE9dicas comprovadas) ser\xE3o avaliados individualmente."
|
|
1709
|
-
},
|
|
1710
|
-
{
|
|
1711
|
-
heading: "6. Altera\xE7\xF5es de Itiner\xE1rio",
|
|
1712
|
-
body: "A PlanetaEXO reserva-se o direito de modificar itiner\xE1rios, acomoda\xE7\xF5es ou atividades por raz\xF5es de seguran\xE7a, condi\xE7\xF5es clim\xE1ticas, for\xE7a maior ou outras circunst\xE2ncias fora de seu controle, sem que isso implique em responsabilidade por perdas ou danos. Em caso de altera\xE7\xF5es significativas, o cliente ser\xE1 notificado o mais brevemente poss\xEDvel."
|
|
1692
|
+
var TERMS_I18N = {
|
|
1693
|
+
en: {
|
|
1694
|
+
before: "I have read and accept the ",
|
|
1695
|
+
link: "terms and conditions",
|
|
1696
|
+
after: " of the reservation.",
|
|
1697
|
+
modalTitle: "Terms and Conditions",
|
|
1698
|
+
closeLabel: "Close"
|
|
1713
1699
|
},
|
|
1714
|
-
{
|
|
1715
|
-
|
|
1716
|
-
|
|
1700
|
+
pt: {
|
|
1701
|
+
before: "Li e aceito os ",
|
|
1702
|
+
link: "termos e condi\xE7\xF5es",
|
|
1703
|
+
after: " da reserva.",
|
|
1704
|
+
modalTitle: "Termos e Condi\xE7\xF5es",
|
|
1705
|
+
closeLabel: "Fechar"
|
|
1717
1706
|
},
|
|
1718
|
-
{
|
|
1719
|
-
|
|
1720
|
-
|
|
1707
|
+
fr: {
|
|
1708
|
+
before: "J'ai lu et j'accepte les ",
|
|
1709
|
+
link: "conditions g\xE9n\xE9rales",
|
|
1710
|
+
after: " de la r\xE9servation.",
|
|
1711
|
+
modalTitle: "Conditions G\xE9n\xE9rales",
|
|
1712
|
+
closeLabel: "Fermer"
|
|
1721
1713
|
},
|
|
1714
|
+
de: {
|
|
1715
|
+
before: "Ich habe die ",
|
|
1716
|
+
link: "Allgemeinen Gesch\xE4ftsbedingungen",
|
|
1717
|
+
after: " gelesen und akzeptiere sie.",
|
|
1718
|
+
modalTitle: "Allgemeine Gesch\xE4ftsbedingungen",
|
|
1719
|
+
closeLabel: "Schlie\xDFen"
|
|
1720
|
+
}
|
|
1721
|
+
};
|
|
1722
|
+
var TERMS_CONTENT = [
|
|
1722
1723
|
{
|
|
1723
|
-
|
|
1724
|
-
body: "A responsabilidade da PlanetaEXO limita-se ao valor total pago pelo cliente. A PlanetaEXO n\xE3o se responsabiliza por danos indiretos, perdas de receita, danos morais ou outras consequ\xEAncias decorrentes de falhas em servi\xE7os de terceiros (companhias a\xE9reas, hot\xE9is, operadores locais) ou eventos de for\xE7a maior."
|
|
1724
|
+
body: "These Terms and Conditions govern your booking with PlanetaEXO. By making a reservation, you agree to the following terms. Please read them carefully before confirming your booking."
|
|
1725
1725
|
},
|
|
1726
1726
|
{
|
|
1727
|
-
heading: "
|
|
1728
|
-
body: "
|
|
1727
|
+
heading: "1. Bookings and payments",
|
|
1728
|
+
body: "A booking is confirmed only upon receipt of the required deposit or full payment as specified in your proposal. Prices are quoted in the currency indicated in your proposal. Full payment is due prior to departure on the date stipulated in your booking confirmation. PlanetaEXO reserves the right to cancel unconfirmed reservations and is not responsible for exchange rate fluctuations after payment is received."
|
|
1729
1729
|
},
|
|
1730
1730
|
{
|
|
1731
|
-
heading: "
|
|
1732
|
-
body: "
|
|
1731
|
+
heading: "2. Cancellation policy",
|
|
1732
|
+
body: "All cancellations must be submitted in writing. The following fees apply: more than 30 days before departure \u2014 loss of deposit; 15\u201330 days before departure \u2014 50% of the total cost; fewer than 15 days before departure \u2014 100% of the total cost. Cases involving force majeure or documented medical emergencies will be evaluated individually."
|
|
1733
1733
|
},
|
|
1734
1734
|
{
|
|
1735
|
-
heading: "
|
|
1736
|
-
body: "
|
|
1735
|
+
heading: "3. Changes and modifications",
|
|
1736
|
+
body: "PlanetaEXO reserves the right to modify itineraries, accommodations, or activities for reasons of safety, weather conditions, force majeure, or other circumstances beyond our control. You will be notified of any significant changes as promptly as possible. Minor adjustments do not entitle the traveller to a refund or compensation."
|
|
1737
1737
|
},
|
|
1738
1738
|
{
|
|
1739
|
-
heading: "
|
|
1740
|
-
body: "
|
|
1739
|
+
heading: "4. Travel insurance",
|
|
1740
|
+
body: "We strongly recommend that all travellers obtain comprehensive travel insurance covering trip cancellation, medical emergencies, evacuation, and baggage loss prior to departure. PlanetaEXO is not liable for costs or losses that would have been covered by adequate travel insurance."
|
|
1741
1741
|
},
|
|
1742
1742
|
{
|
|
1743
|
-
heading: "
|
|
1744
|
-
body: "
|
|
1743
|
+
heading: "5. Liability",
|
|
1744
|
+
body: "PlanetaEXO's liability is limited to the total amount paid by the client for the services in question. We are not responsible for indirect losses, consequential damages, or service failures caused by third-party providers (airlines, hotels, local operators) or force majeure events. Participation in adventure activities carries inherent risks; travellers acknowledge and accept these risks by confirming their booking."
|
|
1745
1745
|
}
|
|
1746
1746
|
];
|
|
1747
1747
|
function TermsSection({
|
|
1748
1748
|
title = "Terms and conditions",
|
|
1749
1749
|
checked,
|
|
1750
1750
|
onChange,
|
|
1751
|
-
label,
|
|
1752
1751
|
warningMessage,
|
|
1753
|
-
|
|
1752
|
+
locale = "en"
|
|
1754
1753
|
}) {
|
|
1755
|
-
|
|
1754
|
+
var _a;
|
|
1755
|
+
const [modalOpen, setModalOpen] = React21.useState(false);
|
|
1756
|
+
const i18n = (_a = TERMS_I18N[locale]) != null ? _a : TERMS_I18N.en;
|
|
1756
1757
|
return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-border p-4 flex flex-col gap-3", children: [
|
|
1757
1758
|
/* @__PURE__ */ jsx("p", { className: "text-xs font-bold text-muted-foreground font-heading uppercase tracking-widest", children: title }),
|
|
1758
1759
|
/* @__PURE__ */ jsxs("label", { className: "flex items-start gap-2.5 cursor-pointer", children: [
|
|
@@ -1765,34 +1766,69 @@ function TermsSection({
|
|
|
1765
1766
|
className: "h-4 w-4 shrink-0 mt-0.5 rounded border-border accent-primary cursor-pointer"
|
|
1766
1767
|
}
|
|
1767
1768
|
),
|
|
1768
|
-
/* @__PURE__ */
|
|
1769
|
+
/* @__PURE__ */ jsxs("span", { className: "text-sm font-sans text-foreground/80 leading-snug", children: [
|
|
1770
|
+
i18n.before,
|
|
1771
|
+
/* @__PURE__ */ jsx(
|
|
1772
|
+
"button",
|
|
1773
|
+
{
|
|
1774
|
+
type: "button",
|
|
1775
|
+
onClick: () => setModalOpen(true),
|
|
1776
|
+
className: "text-primary underline underline-offset-2 hover:text-primary/80 transition-colors",
|
|
1777
|
+
children: i18n.link
|
|
1778
|
+
}
|
|
1779
|
+
),
|
|
1780
|
+
i18n.after
|
|
1781
|
+
] })
|
|
1769
1782
|
] }),
|
|
1770
|
-
/* @__PURE__ */ jsx(
|
|
1771
|
-
"button",
|
|
1772
|
-
{
|
|
1773
|
-
type: "button",
|
|
1774
|
-
onClick: () => setModalOpen(true),
|
|
1775
|
-
className: "self-start text-xs text-primary underline underline-offset-2 font-sans hover:text-primary/80 transition-colors",
|
|
1776
|
-
children: viewTermsLabel
|
|
1777
|
-
}
|
|
1778
|
-
),
|
|
1779
1783
|
!checked && warningMessage && /* @__PURE__ */ jsx("p", { className: "text-xs text-amber-400 flex items-center gap-1", children: warningMessage }),
|
|
1780
1784
|
/* @__PURE__ */ jsx(Dialog, { open: modalOpen, onOpenChange: setModalOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-2xl w-full max-h-[80vh] overflow-y-auto", children: [
|
|
1781
|
-
/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */
|
|
1782
|
-
|
|
1783
|
-
|
|
1785
|
+
/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsxs(DialogTitle, { className: "font-heading text-xl", children: [
|
|
1786
|
+
i18n.modalTitle,
|
|
1787
|
+
" \u2014 PlanetaEXO"
|
|
1788
|
+
] }) }),
|
|
1789
|
+
/* @__PURE__ */ jsx("div", { className: "mt-4 space-y-5 text-sm font-sans text-foreground/80 leading-relaxed", children: TERMS_CONTENT.map((section, i) => /* @__PURE__ */ jsxs("div", { children: [
|
|
1790
|
+
section.heading && /* @__PURE__ */ jsx("p", { className: "font-bold text-foreground font-heading mb-1", children: section.heading }),
|
|
1784
1791
|
/* @__PURE__ */ jsx("p", { children: section.body })
|
|
1785
|
-
] },
|
|
1792
|
+
] }, i)) }),
|
|
1786
1793
|
/* @__PURE__ */ jsx("div", { className: "mt-6 flex justify-end", children: /* @__PURE__ */ jsx(
|
|
1787
1794
|
DialogClose,
|
|
1788
1795
|
{
|
|
1789
1796
|
className: "px-4 py-2 rounded-lg bg-primary text-white text-sm font-heading font-semibold hover:bg-primary/90 transition-colors",
|
|
1790
|
-
children:
|
|
1797
|
+
children: i18n.closeLabel
|
|
1791
1798
|
}
|
|
1792
1799
|
) })
|
|
1793
1800
|
] }) })
|
|
1794
1801
|
] });
|
|
1795
1802
|
}
|
|
1803
|
+
function BookingConfirmedCard({
|
|
1804
|
+
title = "Booking confirmed!",
|
|
1805
|
+
email,
|
|
1806
|
+
message,
|
|
1807
|
+
onBack,
|
|
1808
|
+
backLabel = "Back to offer"
|
|
1809
|
+
}) {
|
|
1810
|
+
return /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border border-border bg-card p-8 flex flex-col items-center gap-6 text-center", children: [
|
|
1811
|
+
/* @__PURE__ */ jsx("div", { className: "flex h-20 w-20 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsx(CheckCircle2Icon, { className: "w-10 h-10 text-primary" }) }),
|
|
1812
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
1813
|
+
/* @__PURE__ */ jsx("h3", { className: "text-2xl font-black text-foreground font-heading", children: title }),
|
|
1814
|
+
/* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground font-sans max-w-sm mx-auto leading-relaxed", children: message != null ? message : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1815
|
+
"A confirmation email has been sent to",
|
|
1816
|
+
" ",
|
|
1817
|
+
/* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: email || "your email" }),
|
|
1818
|
+
". Our team will be in touch shortly."
|
|
1819
|
+
] }) })
|
|
1820
|
+
] }),
|
|
1821
|
+
onBack && /* @__PURE__ */ jsx(
|
|
1822
|
+
"button",
|
|
1823
|
+
{
|
|
1824
|
+
type: "button",
|
|
1825
|
+
onClick: onBack,
|
|
1826
|
+
className: "rounded-full border border-primary px-6 py-2.5 text-sm font-bold text-primary font-heading hover:bg-primary/10 transition-colors",
|
|
1827
|
+
children: backLabel
|
|
1828
|
+
}
|
|
1829
|
+
)
|
|
1830
|
+
] });
|
|
1831
|
+
}
|
|
1796
1832
|
var WIZARD_STEPS = [
|
|
1797
1833
|
{ id: "responsible", label: "Responsible party details" },
|
|
1798
1834
|
{ id: "travellers", label: "Travellers" },
|
|
@@ -1804,9 +1840,9 @@ function BookingWizard({
|
|
|
1804
1840
|
depositInfo,
|
|
1805
1841
|
onCancel
|
|
1806
1842
|
}) {
|
|
1807
|
-
const [step, setStep] =
|
|
1808
|
-
const [error, setError] =
|
|
1809
|
-
const [responsible, setResponsible] =
|
|
1843
|
+
const [step, setStep] = React21.useState("responsible");
|
|
1844
|
+
const [error, setError] = React21.useState(null);
|
|
1845
|
+
const [responsible, setResponsible] = React21.useState({
|
|
1810
1846
|
firstName: "",
|
|
1811
1847
|
lastName: "",
|
|
1812
1848
|
email: "",
|
|
@@ -1825,7 +1861,7 @@ function BookingWizard({
|
|
|
1825
1861
|
return s + ((_b = (_a = a.slots) == null ? void 0 : _a.children) != null ? _b : 0);
|
|
1826
1862
|
}, 0);
|
|
1827
1863
|
const totalPax = totalAdults + totalChildren;
|
|
1828
|
-
const [travellers, setTravellers] =
|
|
1864
|
+
const [travellers, setTravellers] = React21.useState(
|
|
1829
1865
|
Array.from({ length: Math.max(totalPax, 1) }, () => ({
|
|
1830
1866
|
firstName: "",
|
|
1831
1867
|
lastName: "",
|
|
@@ -1833,10 +1869,9 @@ function BookingWizard({
|
|
|
1833
1869
|
email: ""
|
|
1834
1870
|
}))
|
|
1835
1871
|
);
|
|
1836
|
-
const [payAmount, setPayAmount] =
|
|
1837
|
-
const [payMethod, setPayMethod] =
|
|
1838
|
-
const [termsAccepted, setTermsAccepted] =
|
|
1839
|
-
const [termsModalOpen, setTermsModalOpen] = React19.useState(false);
|
|
1872
|
+
const [payAmount, setPayAmount] = React21.useState("full");
|
|
1873
|
+
const [payMethod, setPayMethod] = React21.useState("stripe");
|
|
1874
|
+
const [termsAccepted, setTermsAccepted] = React21.useState(false);
|
|
1840
1875
|
const setR = (k, v) => setResponsible((p) => __spreadProps(__spreadValues({}, p), { [k]: v }));
|
|
1841
1876
|
const setT = (i, k, v) => setTravellers((prev) => prev.map((t, idx) => idx === i ? __spreadProps(__spreadValues({}, t), { [k]: v }) : t));
|
|
1842
1877
|
const setTDob = (i, v) => setTravellers((prev) => prev.map((t, idx) => idx === i ? __spreadProps(__spreadValues({}, t), { dateOfBirth: v }) : t));
|
|
@@ -1876,34 +1911,7 @@ function BookingWizard({
|
|
|
1876
1911
|
const depositLabel = depositInfo ? `Pay deposit (${depositInfo.depositPercent}%) \u2014 ${depositInfo.depositAmount}` : "Pay deposit";
|
|
1877
1912
|
const fullLabel = `Pay full amount \u2014 ${total}`;
|
|
1878
1913
|
if (step === "confirmed") {
|
|
1879
|
-
return /* @__PURE__ */
|
|
1880
|
-
/* @__PURE__ */ jsx("div", { className: "flex h-20 w-20 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsx(CheckCircle2Icon, { className: "w-10 h-10 text-primary" }) }),
|
|
1881
|
-
/* @__PURE__ */ jsxs("div", { children: [
|
|
1882
|
-
/* @__PURE__ */ jsx("h3", { className: "text-2xl font-black text-foreground font-heading", children: "Booking confirmed!" }),
|
|
1883
|
-
/* @__PURE__ */ jsxs("p", { className: "mt-2 text-sm text-muted-foreground font-sans max-w-sm mx-auto leading-relaxed", children: [
|
|
1884
|
-
"A confirmation email has been sent to",
|
|
1885
|
-
" ",
|
|
1886
|
-
/* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: responsible.email || "your email" }),
|
|
1887
|
-
". Our team will be in touch shortly."
|
|
1888
|
-
] })
|
|
1889
|
-
] }),
|
|
1890
|
-
/* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-border bg-muted/30 px-6 py-4 w-full max-w-xs", children: [
|
|
1891
|
-
/* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground font-sans uppercase tracking-wider", children: "Booking reference" }),
|
|
1892
|
-
/* @__PURE__ */ jsxs("p", { className: "text-lg font-black text-primary font-heading mt-1", children: [
|
|
1893
|
-
"PEX-",
|
|
1894
|
-
Math.random().toString(36).slice(2, 8).toUpperCase()
|
|
1895
|
-
] })
|
|
1896
|
-
] }),
|
|
1897
|
-
/* @__PURE__ */ jsx(
|
|
1898
|
-
"button",
|
|
1899
|
-
{
|
|
1900
|
-
type: "button",
|
|
1901
|
-
onClick: onCancel,
|
|
1902
|
-
className: "rounded-full border border-primary px-6 py-2.5 text-sm font-bold text-primary font-heading hover:bg-primary/10 transition-colors",
|
|
1903
|
-
children: "Back to offer"
|
|
1904
|
-
}
|
|
1905
|
-
)
|
|
1906
|
-
] });
|
|
1914
|
+
return /* @__PURE__ */ jsx(BookingConfirmedCard, { email: responsible.email, onBack: onCancel });
|
|
1907
1915
|
}
|
|
1908
1916
|
return /* @__PURE__ */ jsx(
|
|
1909
1917
|
BookingShell,
|
|
@@ -2034,53 +2042,9 @@ function BookingWizard({
|
|
|
2034
2042
|
TermsSection,
|
|
2035
2043
|
{
|
|
2036
2044
|
checked: termsAccepted,
|
|
2037
|
-
onChange: setTermsAccepted
|
|
2038
|
-
label: /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
2039
|
-
"I have read and accept the",
|
|
2040
|
-
" ",
|
|
2041
|
-
/* @__PURE__ */ jsx(
|
|
2042
|
-
"button",
|
|
2043
|
-
{
|
|
2044
|
-
type: "button",
|
|
2045
|
-
onClick: () => setTermsModalOpen(true),
|
|
2046
|
-
className: "underline underline-offset-2 text-primary hover:text-primary/80 transition-colors font-semibold",
|
|
2047
|
-
children: "terms and conditions"
|
|
2048
|
-
}
|
|
2049
|
-
),
|
|
2050
|
-
" ",
|
|
2051
|
-
"of the reservation."
|
|
2052
|
-
] })
|
|
2045
|
+
onChange: setTermsAccepted
|
|
2053
2046
|
}
|
|
2054
|
-
)
|
|
2055
|
-
/* @__PURE__ */ jsx(Dialog, { open: termsModalOpen, onOpenChange: setTermsModalOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "!max-w-[80vw] w-[80vw] max-h-[85vh] overflow-y-auto", children: [
|
|
2056
|
-
/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { className: "font-heading text-xl", children: "Terms and Conditions" }) }),
|
|
2057
|
-
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 text-sm font-sans text-foreground/80 leading-relaxed", children: [
|
|
2058
|
-
/* @__PURE__ */ jsx("p", { children: 'These terms and conditions ("Terms") govern the booking of travel experiences offered through Planeta EXO ("Company"). By confirming a booking, you agree to these Terms in full.' }),
|
|
2059
|
-
/* @__PURE__ */ jsx("h4", { className: "font-bold text-foreground font-heading text-base", children: "1. Bookings and payments" }),
|
|
2060
|
-
/* @__PURE__ */ jsx("p", { children: "A booking is confirmed upon receipt of the required deposit or full payment. The deposit amount is specified in your offer. The remaining balance must be paid by the balance due date stated in your offer." }),
|
|
2061
|
-
/* @__PURE__ */ jsx("h4", { className: "font-bold text-foreground font-heading text-base", children: "2. Cancellation policy" }),
|
|
2062
|
-
/* @__PURE__ */ jsx("p", { children: "Cancellations made more than 60 days before departure are eligible for a full refund of the deposit. Cancellations between 30 and 60 days forfeit 50% of the deposit. Cancellations within 30 days of departure are non-refundable." }),
|
|
2063
|
-
/* @__PURE__ */ jsx("h4", { className: "font-bold text-foreground font-heading text-base", children: "3. Changes and modifications" }),
|
|
2064
|
-
/* @__PURE__ */ jsx("p", { children: "The Company reserves the right to modify itineraries due to weather, safety, or operational reasons. Equivalent alternatives will be offered wherever possible." }),
|
|
2065
|
-
/* @__PURE__ */ jsx("h4", { className: "font-bold text-foreground font-heading text-base", children: "4. Travel insurance" }),
|
|
2066
|
-
/* @__PURE__ */ jsx("p", { children: "Comprehensive travel insurance is strongly recommended. The Company is not liable for costs arising from trip interruption, medical emergencies, or personal loss." }),
|
|
2067
|
-
/* @__PURE__ */ jsx("h4", { className: "font-bold text-foreground font-heading text-base", children: "5. Liability" }),
|
|
2068
|
-
/* @__PURE__ */ jsx("p", { children: "Participation in adventure activities carries inherent risk. By booking, you acknowledge and accept these risks. The Company's liability is limited to the total booking amount." }),
|
|
2069
|
-
/* @__PURE__ */ jsx("div", { className: "pt-2", children: /* @__PURE__ */ jsx(
|
|
2070
|
-
DialogClose,
|
|
2071
|
-
{
|
|
2072
|
-
render: /* @__PURE__ */ jsx(
|
|
2073
|
-
"button",
|
|
2074
|
-
{
|
|
2075
|
-
type: "button",
|
|
2076
|
-
className: "rounded-full bg-primary px-6 py-2.5 text-sm font-bold text-primary-foreground font-heading hover:bg-primary/90 transition-colors"
|
|
2077
|
-
}
|
|
2078
|
-
),
|
|
2079
|
-
children: "Close"
|
|
2080
|
-
}
|
|
2081
|
-
) })
|
|
2082
|
-
] })
|
|
2083
|
-
] }) })
|
|
2047
|
+
)
|
|
2084
2048
|
] })
|
|
2085
2049
|
] })
|
|
2086
2050
|
}
|
|
@@ -2108,7 +2072,7 @@ function Offer({
|
|
|
2108
2072
|
continueDisabled,
|
|
2109
2073
|
className
|
|
2110
2074
|
}) {
|
|
2111
|
-
const [showBooking, setShowBooking] =
|
|
2075
|
+
const [showBooking, setShowBooking] = React21.useState(false);
|
|
2112
2076
|
const isShowingCheckout = !!checkoutSlot || showBooking;
|
|
2113
2077
|
const handleBook = () => {
|
|
2114
2078
|
if (!checkoutSlot && !externalBookingFlow) setShowBooking(true);
|
|
@@ -2230,9 +2194,9 @@ function AdventureSection({
|
|
|
2230
2194
|
onAddSuggestedTraveller
|
|
2231
2195
|
}) {
|
|
2232
2196
|
var _a, _b, _c;
|
|
2233
|
-
const [detailsOpen, setDetailsOpen] =
|
|
2234
|
-
const [addModalOpen, setAddModalOpen] =
|
|
2235
|
-
const [newTraveller, setNewTraveller] =
|
|
2197
|
+
const [detailsOpen, setDetailsOpen] = React21.useState(false);
|
|
2198
|
+
const [addModalOpen, setAddModalOpen] = React21.useState(false);
|
|
2199
|
+
const [newTraveller, setNewTraveller] = React21.useState({
|
|
2236
2200
|
firstName: "",
|
|
2237
2201
|
lastName: "",
|
|
2238
2202
|
passport: "",
|
|
@@ -3352,465 +3316,1208 @@ function BookingConfirmationEmail({
|
|
|
3352
3316
|
/* @__PURE__ */ jsx("td", { className: "py-1 pr-4 text-muted-foreground font-ui", children: l.hostLabel }),
|
|
3353
3317
|
/* @__PURE__ */ jsx("td", { className: "py-1 font-medium text-foreground", children: host })
|
|
3354
3318
|
] })
|
|
3355
|
-
] }) }),
|
|
3356
|
-
/* @__PURE__ */ jsx("hr", { className: "border-t border-border mb-8" }),
|
|
3357
|
-
/* @__PURE__ */ jsx("p", { className: "mb-4", children: l.postCtaMessage }),
|
|
3358
|
-
/* @__PURE__ */ jsx("p", { children: l.closingMessage })
|
|
3359
|
-
]
|
|
3360
|
-
}
|
|
3361
|
-
);
|
|
3362
|
-
}
|
|
3363
|
-
function CounterField({
|
|
3364
|
-
label,
|
|
3365
|
-
sublabel,
|
|
3366
|
-
required,
|
|
3367
|
-
value,
|
|
3368
|
-
min = 0,
|
|
3369
|
-
max = 99,
|
|
3370
|
-
onChange,
|
|
3371
|
-
className
|
|
3372
|
-
}) {
|
|
3373
|
-
const decrement = () => {
|
|
3374
|
-
if (value > min) onChange(value - 1);
|
|
3375
|
-
};
|
|
3376
|
-
const increment = () => {
|
|
3377
|
-
if (value < max) onChange(value + 1);
|
|
3378
|
-
};
|
|
3379
|
-
return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2", className), children: [
|
|
3380
|
-
/* @__PURE__ */ jsxs("label", { className: "text-sm font-ui text-foreground", children: [
|
|
3381
|
-
label,
|
|
3382
|
-
sublabel && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-normal ml-1", children: sublabel }),
|
|
3383
|
-
required && /* @__PURE__ */ jsx("span", { className: "text-primary ml-0.5", children: "*" })
|
|
3384
|
-
] }),
|
|
3385
|
-
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded-lg border border-border bg-background px-4 py-3 h-14", children: [
|
|
3386
|
-
/* @__PURE__ */ jsx("span", { className: "text-xl font-semibold text-foreground tabular-nums w-8 font-ui", children: value }),
|
|
3387
|
-
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
3388
|
-
/* @__PURE__ */ jsx(
|
|
3389
|
-
"button",
|
|
3390
|
-
{
|
|
3391
|
-
type: "button",
|
|
3392
|
-
onClick: decrement,
|
|
3393
|
-
disabled: value <= min,
|
|
3394
|
-
"aria-label": `Diminuir ${label}`,
|
|
3395
|
-
className: cn(
|
|
3396
|
-
"inline-flex h-8 w-8 items-center justify-center rounded-full border border-border",
|
|
3397
|
-
"text-foreground transition-colors",
|
|
3398
|
-
"hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
|
3399
|
-
"disabled:pointer-events-none disabled:opacity-30"
|
|
3400
|
-
),
|
|
3401
|
-
children: /* @__PURE__ */ jsx(MinusIcon, { className: "h-3.5 w-3.5" })
|
|
3402
|
-
}
|
|
3403
|
-
),
|
|
3404
|
-
/* @__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(
|
|
3405
3779
|
"button",
|
|
3406
3780
|
{
|
|
3407
|
-
type: "
|
|
3408
|
-
|
|
3409
|
-
disabled: value >= max,
|
|
3410
|
-
"aria-label": `Aumentar ${label}`,
|
|
3781
|
+
type: "submit",
|
|
3782
|
+
disabled: loading,
|
|
3411
3783
|
className: cn(
|
|
3412
|
-
"inline-flex
|
|
3413
|
-
"text-foreground
|
|
3414
|
-
"hover:bg-
|
|
3415
|
-
"
|
|
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"
|
|
3416
3789
|
),
|
|
3417
|
-
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
|
|
3418
3814
|
}
|
|
3419
|
-
)
|
|
3420
|
-
]
|
|
3421
|
-
|
|
3422
|
-
|
|
3815
|
+
) })
|
|
3816
|
+
]
|
|
3817
|
+
}
|
|
3818
|
+
);
|
|
3423
3819
|
}
|
|
3424
|
-
|
|
3425
|
-
|
|
3426
|
-
|
|
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: "" };
|
|
3427
3846
|
}
|
|
3428
|
-
function
|
|
3429
|
-
|
|
3430
|
-
return /* @__PURE__ */ jsx(Popover$1.Trigger, __spreadValues({ "data-slot": "popover-trigger" }, props));
|
|
3847
|
+
function emptyPhone(country) {
|
|
3848
|
+
return { country, nationalNumber: "" };
|
|
3431
3849
|
}
|
|
3432
|
-
function
|
|
3433
|
-
|
|
3434
|
-
|
|
3435
|
-
|
|
3436
|
-
|
|
3437
|
-
|
|
3438
|
-
|
|
3439
|
-
|
|
3440
|
-
|
|
3441
|
-
|
|
3442
|
-
|
|
3443
|
-
|
|
3444
|
-
|
|
3445
|
-
|
|
3446
|
-
|
|
3447
|
-
|
|
3448
|
-
{
|
|
3449
|
-
|
|
3450
|
-
|
|
3451
|
-
|
|
3452
|
-
|
|
3453
|
-
|
|
3454
|
-
|
|
3455
|
-
|
|
3456
|
-
|
|
3457
|
-
|
|
3458
|
-
|
|
3459
|
-
|
|
3460
|
-
|
|
3461
|
-
|
|
3462
|
-
|
|
3463
|
-
|
|
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;
|
|
3464
3898
|
}
|
|
3465
|
-
|
|
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;
|
|
3466
3922
|
}
|
|
3467
|
-
function
|
|
3468
|
-
|
|
3469
|
-
|
|
3470
|
-
|
|
3471
|
-
|
|
3472
|
-
|
|
3473
|
-
|
|
3474
|
-
|
|
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,
|
|
3475
3934
|
className
|
|
3476
3935
|
}) {
|
|
3477
|
-
|
|
3478
|
-
|
|
3479
|
-
|
|
3480
|
-
|
|
3481
|
-
|
|
3482
|
-
|
|
3483
|
-
|
|
3484
|
-
|
|
3485
|
-
|
|
3486
|
-
|
|
3487
|
-
|
|
3488
|
-
|
|
3489
|
-
return /* @__PURE__ */ jsx("div", { ref: containerRef, className: cn("w-full", className), children: /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
|
|
3490
|
-
/* @__PURE__ */ jsxs(
|
|
3491
|
-
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,
|
|
3492
3948
|
{
|
|
3493
|
-
|
|
3494
|
-
|
|
3495
|
-
|
|
3496
|
-
"px-3 text-left text-base font-ui transition-colors h-14",
|
|
3497
|
-
"focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary",
|
|
3498
|
-
"disabled:pointer-events-none disabled:opacity-50",
|
|
3499
|
-
open && "border-primary ring-1 ring-primary"
|
|
3500
|
-
),
|
|
3501
|
-
children: [
|
|
3502
|
-
/* @__PURE__ */ jsxs(
|
|
3503
|
-
"span",
|
|
3504
|
-
{
|
|
3505
|
-
className: cn(
|
|
3506
|
-
"pointer-events-none absolute left-3 transition-all duration-150 font-ui",
|
|
3507
|
-
hasValue || open ? "top-2 text-xs text-primary" : "top-1/2 -translate-y-1/2 text-base text-muted-foreground"
|
|
3508
|
-
),
|
|
3509
|
-
children: [
|
|
3510
|
-
label,
|
|
3511
|
-
required && /* @__PURE__ */ jsx("span", { className: "text-primary ml-0.5", children: "*" })
|
|
3512
|
-
]
|
|
3513
|
-
}
|
|
3514
|
-
),
|
|
3515
|
-
/* @__PURE__ */ jsx(
|
|
3516
|
-
"span",
|
|
3517
|
-
{
|
|
3518
|
-
className: cn(
|
|
3519
|
-
"flex-1 truncate mt-3",
|
|
3520
|
-
hasValue ? "text-foreground" : "invisible"
|
|
3521
|
-
),
|
|
3522
|
-
children: hasValue ? format(value, "dd MMM yyyy") : placeholder
|
|
3523
|
-
}
|
|
3524
|
-
),
|
|
3525
|
-
/* @__PURE__ */ jsx(CalendarIcon, { className: "ml-2 h-4 w-4 shrink-0 text-muted-foreground" })
|
|
3526
|
-
]
|
|
3949
|
+
value: value.country,
|
|
3950
|
+
onChange: (country) => onChange(__spreadProps(__spreadValues({}, value), { country })),
|
|
3951
|
+
className: "shrink-0"
|
|
3527
3952
|
}
|
|
3528
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: [
|
|
3529
4000
|
/* @__PURE__ */ jsx(
|
|
3530
|
-
|
|
4001
|
+
"textarea",
|
|
3531
4002
|
{
|
|
3532
|
-
|
|
3533
|
-
|
|
3534
|
-
|
|
3535
|
-
|
|
3536
|
-
|
|
3537
|
-
|
|
3538
|
-
|
|
3539
|
-
|
|
3540
|
-
|
|
3541
|
-
|
|
3542
|
-
|
|
3543
|
-
},
|
|
3544
|
-
fromDate: fromDate != null ? fromDate : /* @__PURE__ */ new Date(),
|
|
3545
|
-
className: "font-ui w-full",
|
|
3546
|
-
autoFocus: true
|
|
3547
|
-
}
|
|
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"
|
|
3548
4014
|
)
|
|
3549
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
|
+
}
|
|
3550
4032
|
)
|
|
3551
|
-
] }) });
|
|
3552
|
-
}
|
|
3553
|
-
function FormSection({
|
|
3554
|
-
title,
|
|
3555
|
-
children,
|
|
3556
|
-
className
|
|
3557
|
-
}) {
|
|
3558
|
-
return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-5", className), children: [
|
|
3559
|
-
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
|
|
3560
|
-
/* @__PURE__ */ jsx("h3", { className: "text-base font-bold text-foreground whitespace-nowrap font-heading", children: title }),
|
|
3561
|
-
/* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-border" })
|
|
3562
|
-
] }),
|
|
3563
|
-
children
|
|
3564
4033
|
] });
|
|
3565
4034
|
}
|
|
3566
|
-
|
|
3567
|
-
|
|
3568
|
-
|
|
3569
|
-
|
|
3570
|
-
|
|
3571
|
-
|
|
3572
|
-
civility: "",
|
|
3573
|
-
phoneCountry: "BR",
|
|
3574
|
-
lastName: "",
|
|
3575
|
-
firstName: "",
|
|
3576
|
-
country: "France",
|
|
3577
|
-
phone: "",
|
|
3578
|
-
email: ""
|
|
3579
|
-
};
|
|
3580
|
-
function BookingForm({
|
|
3581
|
-
defaultValues,
|
|
3582
|
-
onSubmit,
|
|
3583
|
-
submitLabel = "Send my request",
|
|
3584
|
-
loading = false,
|
|
3585
|
-
showHeader = true,
|
|
3586
|
-
title = "Check availability for your trip",
|
|
3587
|
-
subtitle = "Free enquiry \u2013 no commitment",
|
|
3588
|
-
className
|
|
4035
|
+
function FieldRenderer({
|
|
4036
|
+
field,
|
|
4037
|
+
value,
|
|
4038
|
+
onChange,
|
|
4039
|
+
defaultPhoneCountry,
|
|
4040
|
+
labels
|
|
3589
4041
|
}) {
|
|
3590
|
-
|
|
3591
|
-
const
|
|
3592
|
-
|
|
3593
|
-
|
|
3594
|
-
|
|
3595
|
-
|
|
3596
|
-
|
|
3597
|
-
|
|
3598
|
-
|
|
3599
|
-
|
|
3600
|
-
|
|
3601
|
-
|
|
3602
|
-
|
|
3603
|
-
|
|
3604
|
-
|
|
3605
|
-
|
|
3606
|
-
|
|
3607
|
-
|
|
3608
|
-
|
|
3609
|
-
|
|
3610
|
-
|
|
3611
|
-
|
|
3612
|
-
|
|
3613
|
-
|
|
3614
|
-
|
|
3615
|
-
|
|
3616
|
-
|
|
3617
|
-
|
|
3618
|
-
|
|
3619
|
-
|
|
3620
|
-
|
|
3621
|
-
|
|
3622
|
-
|
|
3623
|
-
|
|
3624
|
-
|
|
3625
|
-
|
|
3626
|
-
|
|
3627
|
-
|
|
3628
|
-
|
|
3629
|
-
|
|
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: [
|
|
3630
4095
|
/* @__PURE__ */ jsx(
|
|
3631
|
-
|
|
4096
|
+
FloatingInput,
|
|
3632
4097
|
{
|
|
3633
|
-
label:
|
|
3634
|
-
required:
|
|
3635
|
-
value:
|
|
3636
|
-
onChange: (
|
|
3637
|
-
|
|
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
|
+
}))
|
|
3638
4106
|
}
|
|
3639
4107
|
),
|
|
3640
4108
|
/* @__PURE__ */ jsx(
|
|
3641
4109
|
FloatingInput,
|
|
3642
4110
|
{
|
|
3643
|
-
label:
|
|
3644
|
-
required:
|
|
3645
|
-
|
|
3646
|
-
|
|
3647
|
-
|
|
3648
|
-
|
|
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
|
+
}))
|
|
3649
4119
|
}
|
|
3650
4120
|
)
|
|
3651
|
-
] })
|
|
3652
|
-
/* @__PURE__ */ jsx(
|
|
3653
|
-
|
|
3654
|
-
|
|
3655
|
-
{
|
|
3656
|
-
|
|
3657
|
-
|
|
3658
|
-
|
|
3659
|
-
|
|
3660
|
-
|
|
3661
|
-
|
|
3662
|
-
|
|
3663
|
-
|
|
3664
|
-
|
|
3665
|
-
|
|
3666
|
-
|
|
3667
|
-
|
|
3668
|
-
|
|
3669
|
-
|
|
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(
|
|
3670
4178
|
"label",
|
|
3671
4179
|
{
|
|
3672
|
-
|
|
3673
|
-
className: cn(
|
|
3674
|
-
"pointer-events-none absolute left-3 top-4",
|
|
3675
|
-
"text-base text-muted-foreground font-ui transition-all duration-150",
|
|
3676
|
-
"peer-focus:top-2 peer-focus:text-xs peer-focus:text-primary",
|
|
3677
|
-
"peer-not-placeholder-shown:top-2 peer-not-placeholder-shown:text-xs peer-not-placeholder-shown:text-muted-foreground"
|
|
3678
|
-
),
|
|
4180
|
+
className: "flex min-h-9 cursor-pointer items-center gap-2.5 font-ui text-sm text-foreground",
|
|
3679
4181
|
children: [
|
|
3680
|
-
|
|
3681
|
-
|
|
3682
|
-
|
|
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
|
|
3683
4195
|
]
|
|
3684
|
-
}
|
|
3685
|
-
|
|
3686
|
-
|
|
3687
|
-
|
|
3688
|
-
|
|
3689
|
-
|
|
3690
|
-
|
|
3691
|
-
|
|
3692
|
-
|
|
3693
|
-
|
|
3694
|
-
|
|
3695
|
-
|
|
3696
|
-
|
|
3697
|
-
|
|
3698
|
-
|
|
3699
|
-
|
|
3700
|
-
|
|
3701
|
-
|
|
3702
|
-
|
|
3703
|
-
|
|
3704
|
-
|
|
3705
|
-
|
|
3706
|
-
|
|
3707
|
-
|
|
3708
|
-
|
|
3709
|
-
|
|
3710
|
-
|
|
3711
|
-
|
|
3712
|
-
|
|
3713
|
-
|
|
3714
|
-
|
|
3715
|
-
|
|
3716
|
-
|
|
3717
|
-
|
|
3718
|
-
|
|
3719
|
-
|
|
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",
|
|
3720
4395
|
{
|
|
3721
|
-
|
|
3722
|
-
|
|
3723
|
-
|
|
3724
|
-
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]"
|
|
3725
4399
|
}
|
|
3726
|
-
)
|
|
3727
|
-
/* @__PURE__ */ jsx(
|
|
3728
|
-
|
|
4400
|
+
),
|
|
4401
|
+
/* @__PURE__ */ jsx(
|
|
4402
|
+
"div",
|
|
3729
4403
|
{
|
|
3730
|
-
|
|
3731
|
-
|
|
3732
|
-
value: values.firstName,
|
|
3733
|
-
onChange: (e) => set("firstName", e.target.value)
|
|
4404
|
+
"aria-hidden": true,
|
|
4405
|
+
className: "absolute inset-0 bg-black/25"
|
|
3734
4406
|
}
|
|
3735
|
-
)
|
|
3736
|
-
/* @__PURE__ */ jsx("div", { className: "
|
|
3737
|
-
|
|
4407
|
+
),
|
|
4408
|
+
logo && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx(
|
|
4409
|
+
"img",
|
|
3738
4410
|
{
|
|
3739
|
-
|
|
3740
|
-
|
|
3741
|
-
|
|
3742
|
-
onChange: (e) => set("country", e.target.value),
|
|
3743
|
-
children: [
|
|
3744
|
-
/* @__PURE__ */ jsx("option", { value: "", disabled: true, hidden: true }),
|
|
3745
|
-
/* @__PURE__ */ jsx("option", { value: "France", children: "France" }),
|
|
3746
|
-
/* @__PURE__ */ jsx("option", { value: "Belgium", children: "Belgium" }),
|
|
3747
|
-
/* @__PURE__ */ jsx("option", { value: "Switzerland", children: "Switzerland" }),
|
|
3748
|
-
/* @__PURE__ */ jsx("option", { value: "Canada", children: "Canada" }),
|
|
3749
|
-
/* @__PURE__ */ jsx("option", { value: "Luxembourg", children: "Luxembourg" }),
|
|
3750
|
-
/* @__PURE__ */ jsx("option", { value: "United Kingdom", children: "United Kingdom" }),
|
|
3751
|
-
/* @__PURE__ */ jsx("option", { value: "United States", children: "United States" }),
|
|
3752
|
-
/* @__PURE__ */ jsx("option", { value: "Other", children: "Other" })
|
|
3753
|
-
]
|
|
4411
|
+
src: logo,
|
|
4412
|
+
alt: logoAlt,
|
|
4413
|
+
className: "block h-auto w-[120px] object-contain brightness-0 invert"
|
|
3754
4414
|
}
|
|
3755
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 })
|
|
3756
4434
|
] }),
|
|
3757
|
-
/* @__PURE__ */ jsxs(
|
|
3758
|
-
/* @__PURE__ */
|
|
3759
|
-
|
|
3760
|
-
|
|
3761
|
-
|
|
3762
|
-
|
|
3763
|
-
|
|
3764
|
-
|
|
3765
|
-
|
|
3766
|
-
|
|
3767
|
-
|
|
3768
|
-
|
|
3769
|
-
|
|
3770
|
-
|
|
3771
|
-
|
|
3772
|
-
|
|
3773
|
-
|
|
3774
|
-
|
|
3775
|
-
|
|
3776
|
-
|
|
3777
|
-
|
|
3778
|
-
|
|
3779
|
-
"transition-colors placeholder-transparent",
|
|
3780
|
-
"focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary"
|
|
3781
|
-
)
|
|
3782
|
-
}
|
|
3783
|
-
),
|
|
3784
|
-
/* @__PURE__ */ jsxs(
|
|
3785
|
-
"label",
|
|
3786
|
-
{
|
|
3787
|
-
htmlFor: "phone",
|
|
3788
|
-
className: cn(
|
|
3789
|
-
"pointer-events-none absolute left-3 top-1/2 -translate-y-1/2",
|
|
3790
|
-
"text-base text-muted-foreground font-ui transition-all duration-150",
|
|
3791
|
-
"peer-focus:top-3 peer-focus:translate-y-0 peer-focus:text-xs peer-focus:text-primary",
|
|
3792
|
-
"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"
|
|
3793
|
-
),
|
|
3794
|
-
children: [
|
|
3795
|
-
"Phone ",
|
|
3796
|
-
/* @__PURE__ */ jsx("span", { className: "text-primary", children: "*" })
|
|
3797
|
-
]
|
|
3798
|
-
}
|
|
3799
|
-
)
|
|
3800
|
-
] })
|
|
3801
|
-
] }),
|
|
3802
|
-
/* @__PURE__ */ jsx("div", { className: "min-w-0", children: /* @__PURE__ */ jsx(
|
|
3803
|
-
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,
|
|
3804
4457
|
{
|
|
3805
|
-
|
|
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,
|
|
3806
4476
|
required: true,
|
|
3807
|
-
|
|
3808
|
-
|
|
3809
|
-
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"
|
|
3810
4479
|
}
|
|
3811
|
-
)
|
|
3812
|
-
|
|
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
|
+
)
|
|
3813
4519
|
] }),
|
|
4520
|
+
error && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-sm text-destructive font-ui", children: error }),
|
|
3814
4521
|
/* @__PURE__ */ jsx("div", { className: "flex justify-center pt-2", children: /* @__PURE__ */ jsx(
|
|
3815
4522
|
"button",
|
|
3816
4523
|
{
|
|
@@ -3824,35 +4531,121 @@ function BookingForm({
|
|
|
3824
4531
|
"disabled:pointer-events-none disabled:opacity-60"
|
|
3825
4532
|
),
|
|
3826
4533
|
children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
3827
|
-
/* @__PURE__ */ jsxs(
|
|
3828
|
-
|
|
3829
|
-
|
|
3830
|
-
|
|
3831
|
-
|
|
3832
|
-
|
|
3833
|
-
|
|
3834
|
-
|
|
3835
|
-
|
|
3836
|
-
|
|
3837
|
-
|
|
3838
|
-
|
|
3839
|
-
|
|
3840
|
-
|
|
3841
|
-
|
|
3842
|
-
|
|
3843
|
-
|
|
3844
|
-
|
|
3845
|
-
|
|
3846
|
-
|
|
3847
|
-
|
|
3848
|
-
|
|
3849
|
-
|
|
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
|
|
3850
4565
|
}
|
|
3851
4566
|
) })
|
|
3852
4567
|
]
|
|
3853
4568
|
}
|
|
3854
4569
|
);
|
|
3855
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
|
+
}
|
|
3856
4649
|
function Checkbox(_a) {
|
|
3857
4650
|
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
3858
4651
|
return /* @__PURE__ */ jsx(
|
|
@@ -3878,7 +4671,7 @@ function Checkbox(_a) {
|
|
|
3878
4671
|
})
|
|
3879
4672
|
);
|
|
3880
4673
|
}
|
|
3881
|
-
var AccordionVariantContext =
|
|
4674
|
+
var AccordionVariantContext = React21.createContext("default");
|
|
3882
4675
|
function Accordion(_a) {
|
|
3883
4676
|
var _b = _a, { className, variant = "default" } = _b, props = __objRest(_b, ["className", "variant"]);
|
|
3884
4677
|
return /* @__PURE__ */ jsx(AccordionVariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsx(
|
|
@@ -3896,7 +4689,7 @@ function Accordion(_a) {
|
|
|
3896
4689
|
}
|
|
3897
4690
|
function AccordionItem(_a) {
|
|
3898
4691
|
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
3899
|
-
const variant =
|
|
4692
|
+
const variant = React21.useContext(AccordionVariantContext);
|
|
3900
4693
|
return /* @__PURE__ */ jsx(
|
|
3901
4694
|
Accordion$1.Item,
|
|
3902
4695
|
__spreadValues({
|
|
@@ -3917,7 +4710,7 @@ function AccordionTrigger(_a) {
|
|
|
3917
4710
|
"className",
|
|
3918
4711
|
"children"
|
|
3919
4712
|
]);
|
|
3920
|
-
const variant =
|
|
4713
|
+
const variant = React21.useContext(AccordionVariantContext);
|
|
3921
4714
|
return /* @__PURE__ */ jsx(Accordion$1.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
|
|
3922
4715
|
Accordion$1.Trigger,
|
|
3923
4716
|
__spreadProps(__spreadValues({
|
|
@@ -3971,7 +4764,7 @@ function AccordionContent(_a) {
|
|
|
3971
4764
|
"className",
|
|
3972
4765
|
"children"
|
|
3973
4766
|
]);
|
|
3974
|
-
const variant =
|
|
4767
|
+
const variant = React21.useContext(AccordionVariantContext);
|
|
3975
4768
|
return /* @__PURE__ */ jsx(
|
|
3976
4769
|
Accordion$1.Panel,
|
|
3977
4770
|
__spreadProps(__spreadValues({
|
|
@@ -4003,7 +4796,7 @@ function FilterPanel({
|
|
|
4003
4796
|
title = "Filters",
|
|
4004
4797
|
className
|
|
4005
4798
|
}) {
|
|
4006
|
-
const [internalValue, setInternalValue] =
|
|
4799
|
+
const [internalValue, setInternalValue] = React21.useState(
|
|
4007
4800
|
() => Object.fromEntries(groups.map((g) => [g.id, []]))
|
|
4008
4801
|
);
|
|
4009
4802
|
const selected = value != null ? value : internalValue;
|
|
@@ -4165,11 +4958,11 @@ function ItineraryModal({
|
|
|
4165
4958
|
onNext
|
|
4166
4959
|
}) {
|
|
4167
4960
|
var _a, _b, _c;
|
|
4168
|
-
const [imgIndex, setImgIndex] =
|
|
4961
|
+
const [imgIndex, setImgIndex] = React21.useState(0);
|
|
4169
4962
|
const images = stop ? [stop.coverImage, ...(_a = stop.images) != null ? _a : []] : [];
|
|
4170
4963
|
const isFirst = (stop == null ? void 0 : stop.dayNumber) === ((_b = allStops[0]) == null ? void 0 : _b.dayNumber);
|
|
4171
4964
|
const isLast = (stop == null ? void 0 : stop.dayNumber) === ((_c = allStops[allStops.length - 1]) == null ? void 0 : _c.dayNumber);
|
|
4172
|
-
|
|
4965
|
+
React21.useEffect(() => {
|
|
4173
4966
|
setImgIndex(0);
|
|
4174
4967
|
}, [stop == null ? void 0 : stop.dayNumber]);
|
|
4175
4968
|
if (!stop) return null;
|
|
@@ -4296,8 +5089,8 @@ function ItineraryModal({
|
|
|
4296
5089
|
) });
|
|
4297
5090
|
}
|
|
4298
5091
|
function Itinerary({ title, subtitle, stops, className }) {
|
|
4299
|
-
const [activeIndex, setActiveIndex] =
|
|
4300
|
-
const scrollRef =
|
|
5092
|
+
const [activeIndex, setActiveIndex] = React21.useState(null);
|
|
5093
|
+
const scrollRef = React21.useRef(null);
|
|
4301
5094
|
const activeStop = activeIndex !== null ? stops[activeIndex] : null;
|
|
4302
5095
|
const scrollBy = (dir) => {
|
|
4303
5096
|
if (!scrollRef.current) return;
|
|
@@ -4383,8 +5176,8 @@ function MenuTrip({
|
|
|
4383
5176
|
bold = true,
|
|
4384
5177
|
className
|
|
4385
5178
|
}) {
|
|
4386
|
-
const scrollRef =
|
|
4387
|
-
|
|
5179
|
+
const scrollRef = React21.useRef(null);
|
|
5180
|
+
React21.useEffect(() => {
|
|
4388
5181
|
if (!scrollRef.current || !activeSection) return;
|
|
4389
5182
|
const container = scrollRef.current;
|
|
4390
5183
|
const btn = container.querySelector(
|
|
@@ -4530,18 +5323,18 @@ function Lightbox({
|
|
|
4530
5323
|
onClose
|
|
4531
5324
|
}) {
|
|
4532
5325
|
var _a;
|
|
4533
|
-
const [index, setIndex] =
|
|
5326
|
+
const [index, setIndex] = React21.useState(initialIndex);
|
|
4534
5327
|
const total = photos.length;
|
|
4535
5328
|
const photo = photos[index];
|
|
4536
|
-
const prev =
|
|
5329
|
+
const prev = React21.useCallback(
|
|
4537
5330
|
() => setIndex((i) => (i - 1 + total) % total),
|
|
4538
5331
|
[total]
|
|
4539
5332
|
);
|
|
4540
|
-
const next =
|
|
5333
|
+
const next = React21.useCallback(
|
|
4541
5334
|
() => setIndex((i) => (i + 1) % total),
|
|
4542
5335
|
[total]
|
|
4543
5336
|
);
|
|
4544
|
-
|
|
5337
|
+
React21.useEffect(() => {
|
|
4545
5338
|
const onKey = (e) => {
|
|
4546
5339
|
if (e.key === "Escape") onClose();
|
|
4547
5340
|
if (e.key === "ArrowLeft") prev();
|
|
@@ -4735,7 +5528,7 @@ function GridGallery({
|
|
|
4735
5528
|
initialVisible,
|
|
4736
5529
|
onOpen
|
|
4737
5530
|
}) {
|
|
4738
|
-
const [expanded, setExpanded] =
|
|
5531
|
+
const [expanded, setExpanded] = React21.useState(false);
|
|
4739
5532
|
const cols = gridCols(photos.length);
|
|
4740
5533
|
const hasMore = photos.length > initialVisible;
|
|
4741
5534
|
const visible = expanded || !hasMore ? photos : photos.slice(0, initialVisible);
|
|
@@ -4765,7 +5558,7 @@ function MasonryGallery({
|
|
|
4765
5558
|
initialVisible,
|
|
4766
5559
|
onOpen
|
|
4767
5560
|
}) {
|
|
4768
|
-
const [expanded, setExpanded] =
|
|
5561
|
+
const [expanded, setExpanded] = React21.useState(false);
|
|
4769
5562
|
const hasMore = photos.length > initialVisible;
|
|
4770
5563
|
const visible = expanded || !hasMore ? photos : photos.slice(0, initialVisible);
|
|
4771
5564
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
@@ -4838,7 +5631,7 @@ function FeaturedGallery({
|
|
|
4838
5631
|
photos,
|
|
4839
5632
|
onOpen
|
|
4840
5633
|
}) {
|
|
4841
|
-
const [expanded, setExpanded] =
|
|
5634
|
+
const [expanded, setExpanded] = React21.useState(false);
|
|
4842
5635
|
const featured = photos.slice(0, 3);
|
|
4843
5636
|
const extra = photos.slice(3);
|
|
4844
5637
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
@@ -4915,8 +5708,8 @@ function PhotoGallery({
|
|
|
4915
5708
|
onPhotoClick,
|
|
4916
5709
|
className
|
|
4917
5710
|
}) {
|
|
4918
|
-
const [lightboxIndex, setLightboxIndex] =
|
|
4919
|
-
const normalised =
|
|
5711
|
+
const [lightboxIndex, setLightboxIndex] = React21.useState(null);
|
|
5712
|
+
const normalised = React21.useMemo(() => photos.map(normalise), [photos]);
|
|
4920
5713
|
const handleOpen = (index) => {
|
|
4921
5714
|
setLightboxIndex(index);
|
|
4922
5715
|
onPhotoClick == null ? void 0 : onPhotoClick(normalised[index].src, index);
|
|
@@ -5005,7 +5798,7 @@ function PricingTrip({
|
|
|
5005
5798
|
variant = "card",
|
|
5006
5799
|
className
|
|
5007
5800
|
}) {
|
|
5008
|
-
const [showPricing, setShowPricing] =
|
|
5801
|
+
const [showPricing, setShowPricing] = React21.useState(false);
|
|
5009
5802
|
if (variant === "compact") {
|
|
5010
5803
|
return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3", className), children: [
|
|
5011
5804
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
@@ -5328,14 +6121,14 @@ function SiteHeader({
|
|
|
5328
6121
|
className
|
|
5329
6122
|
}) {
|
|
5330
6123
|
const t = VARIANT[variant];
|
|
5331
|
-
const [openMenu, setOpenMenu] =
|
|
5332
|
-
const [langOpen, setLangOpen] =
|
|
5333
|
-
const [mobileOpen, setMobileOpen] =
|
|
5334
|
-
const [openMobileSection, setOpenMobileSection] =
|
|
5335
|
-
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);
|
|
5336
6129
|
const toggleMobileSection = (label) => setOpenMobileSection((prev) => prev === label ? null : label);
|
|
5337
|
-
const menuCloseTimer =
|
|
5338
|
-
const langCloseTimer =
|
|
6130
|
+
const menuCloseTimer = React21.useRef(void 0);
|
|
6131
|
+
const langCloseTimer = React21.useRef(void 0);
|
|
5339
6132
|
const handleMenuEnter = (label) => {
|
|
5340
6133
|
clearTimeout(menuCloseTimer.current);
|
|
5341
6134
|
setOpenMenu(label);
|
|
@@ -5356,7 +6149,7 @@ function SiteHeader({
|
|
|
5356
6149
|
setOpenMenu(null);
|
|
5357
6150
|
setLangOpen(false);
|
|
5358
6151
|
};
|
|
5359
|
-
|
|
6152
|
+
React21.useEffect(() => () => {
|
|
5360
6153
|
clearTimeout(menuCloseTimer.current);
|
|
5361
6154
|
clearTimeout(langCloseTimer.current);
|
|
5362
6155
|
}, []);
|
|
@@ -5621,7 +6414,7 @@ function SiteHeader({
|
|
|
5621
6414
|
), children: [
|
|
5622
6415
|
/* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5 flex-wrap", children: languages.map((lang, i) => {
|
|
5623
6416
|
const isActive = lang.code === activeLang;
|
|
5624
|
-
return /* @__PURE__ */ jsxs(
|
|
6417
|
+
return /* @__PURE__ */ jsxs(React21.Fragment, { children: [
|
|
5625
6418
|
i > 0 && /* @__PURE__ */ jsx("span", { className: cn(
|
|
5626
6419
|
"text-xs select-none",
|
|
5627
6420
|
variant === "white" ? "text-border" : "text-white/15"
|
|
@@ -5683,8 +6476,8 @@ function SiteHeader({
|
|
|
5683
6476
|
);
|
|
5684
6477
|
}
|
|
5685
6478
|
function ThemeToggle({ className }) {
|
|
5686
|
-
const [dark, setDark] =
|
|
5687
|
-
|
|
6479
|
+
const [dark, setDark] = React21.useState(false);
|
|
6480
|
+
React21.useEffect(() => {
|
|
5688
6481
|
const saved = localStorage.getItem("theme");
|
|
5689
6482
|
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
5690
6483
|
const isDark = saved === "dark" || !saved && prefersDark;
|
|
@@ -5713,7 +6506,7 @@ function ThemeToggle({ className }) {
|
|
|
5713
6506
|
}
|
|
5714
6507
|
);
|
|
5715
6508
|
}
|
|
5716
|
-
function
|
|
6509
|
+
function CalendarIcon6() {
|
|
5717
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: [
|
|
5718
6511
|
/* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }),
|
|
5719
6512
|
/* @__PURE__ */ jsx("line", { x1: "16", y1: "2", x2: "16", y2: "6" }),
|
|
@@ -5756,7 +6549,7 @@ var sizeConfig = {
|
|
|
5756
6549
|
var statusConfig = {
|
|
5757
6550
|
"sold-out": {
|
|
5758
6551
|
label: "All seats taken",
|
|
5759
|
-
icon: /* @__PURE__ */ jsx(
|
|
6552
|
+
icon: /* @__PURE__ */ jsx(CalendarIcon6, {})
|
|
5760
6553
|
},
|
|
5761
6554
|
trending: {
|
|
5762
6555
|
label: "Trending",
|
|
@@ -5835,7 +6628,7 @@ function TripCard({
|
|
|
5835
6628
|
);
|
|
5836
6629
|
}
|
|
5837
6630
|
function useHlsVideo(videoRef, src) {
|
|
5838
|
-
|
|
6631
|
+
React21.useEffect(() => {
|
|
5839
6632
|
if (!src || !videoRef.current) return;
|
|
5840
6633
|
const video = videoRef.current;
|
|
5841
6634
|
if (!src.includes(".m3u8")) return;
|
|
@@ -5877,11 +6670,11 @@ function TripHeader({
|
|
|
5877
6670
|
className
|
|
5878
6671
|
}) {
|
|
5879
6672
|
var _a;
|
|
5880
|
-
const [heroIndex, setHeroIndex] =
|
|
5881
|
-
const [videoReady, setVideoReady] =
|
|
5882
|
-
const videoRef =
|
|
6673
|
+
const [heroIndex, setHeroIndex] = React21.useState(0);
|
|
6674
|
+
const [videoReady, setVideoReady] = React21.useState(false);
|
|
6675
|
+
const videoRef = React21.useRef(null);
|
|
5883
6676
|
const isHls = !!(videoUrl == null ? void 0 : videoUrl.includes(".m3u8"));
|
|
5884
|
-
const validImages =
|
|
6677
|
+
const validImages = React21.useMemo(
|
|
5885
6678
|
() => images.map((u) => u == null ? void 0 : u.trim()).filter(Boolean),
|
|
5886
6679
|
[images]
|
|
5887
6680
|
);
|
|
@@ -5896,7 +6689,7 @@ function TripHeader({
|
|
|
5896
6689
|
const nights = duration ? (_a = duration.nights) != null ? _a : Math.max(duration.days - 1, 1) : null;
|
|
5897
6690
|
const hasMeta = !!(destination || duration);
|
|
5898
6691
|
useHlsVideo(videoRef, isHls ? videoUrl : void 0);
|
|
5899
|
-
|
|
6692
|
+
React21.useEffect(() => {
|
|
5900
6693
|
if (!videoUrl) return;
|
|
5901
6694
|
const el = videoRef.current;
|
|
5902
6695
|
if (!el) return;
|
|
@@ -6038,7 +6831,7 @@ function TripHeader({
|
|
|
6038
6831
|
siteHeader ? "-mt-44" : "-mt-36"
|
|
6039
6832
|
),
|
|
6040
6833
|
children: [
|
|
6041
|
-
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: [
|
|
6042
6835
|
i > 0 && /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3 text-white/50 shrink-0" }),
|
|
6043
6836
|
/* @__PURE__ */ jsx("span", { className: "text-xs text-white/70 font-ui hover:text-white/90 cursor-default", children: crumb.label })
|
|
6044
6837
|
] }, i)) }),
|
|
@@ -6138,19 +6931,19 @@ function TripPage({
|
|
|
6138
6931
|
features,
|
|
6139
6932
|
className
|
|
6140
6933
|
}) {
|
|
6141
|
-
const [activeSection, setActiveSection] =
|
|
6142
|
-
const [navFloating, setNavFloating] =
|
|
6143
|
-
const [navHidden, setNavHidden] =
|
|
6144
|
-
const [isFloating, setIsFloating] =
|
|
6145
|
-
const [sidebarPos, setSidebarPos] =
|
|
6146
|
-
const [pricingBarVisible, setPricingBarVisible] =
|
|
6147
|
-
const navRef =
|
|
6148
|
-
const navSentinelRef =
|
|
6149
|
-
const sentinelRef =
|
|
6150
|
-
const sidebarPlaceholderRef =
|
|
6151
|
-
const pricingBarRef =
|
|
6152
|
-
const galleryRef =
|
|
6153
|
-
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(
|
|
6154
6947
|
() => [
|
|
6155
6948
|
{ id: "key-info", label: "Key info", show: !!(infoGroups == null ? void 0 : infoGroups.length) },
|
|
6156
6949
|
{ id: "overview", label: "Overview", show: !!overview },
|
|
@@ -6165,7 +6958,7 @@ function TripPage({
|
|
|
6165
6958
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
6166
6959
|
[]
|
|
6167
6960
|
);
|
|
6168
|
-
|
|
6961
|
+
React21.useEffect(() => {
|
|
6169
6962
|
const sentinel = navSentinelRef.current;
|
|
6170
6963
|
if (!sentinel) return;
|
|
6171
6964
|
const update = () => setNavFloating(sentinel.getBoundingClientRect().top < 1);
|
|
@@ -6173,7 +6966,7 @@ function TripPage({
|
|
|
6173
6966
|
update();
|
|
6174
6967
|
return () => document.removeEventListener("scroll", update, { capture: true });
|
|
6175
6968
|
}, []);
|
|
6176
|
-
|
|
6969
|
+
React21.useEffect(() => {
|
|
6177
6970
|
const sentinel = sentinelRef.current;
|
|
6178
6971
|
if (!sentinel) return;
|
|
6179
6972
|
const update = () => setIsFloating(sentinel.getBoundingClientRect().top < 1);
|
|
@@ -6181,7 +6974,7 @@ function TripPage({
|
|
|
6181
6974
|
update();
|
|
6182
6975
|
return () => document.removeEventListener("scroll", update, { capture: true });
|
|
6183
6976
|
}, []);
|
|
6184
|
-
|
|
6977
|
+
React21.useEffect(() => {
|
|
6185
6978
|
const measure = () => {
|
|
6186
6979
|
if (!sidebarPlaceholderRef.current) return;
|
|
6187
6980
|
const rect = sidebarPlaceholderRef.current.getBoundingClientRect();
|
|
@@ -6191,7 +6984,7 @@ function TripPage({
|
|
|
6191
6984
|
window.addEventListener("resize", measure);
|
|
6192
6985
|
return () => window.removeEventListener("resize", measure);
|
|
6193
6986
|
}, [isFloating]);
|
|
6194
|
-
|
|
6987
|
+
React21.useEffect(() => {
|
|
6195
6988
|
const check = () => {
|
|
6196
6989
|
var _a;
|
|
6197
6990
|
const target = (_a = galleryRef.current) != null ? _a : pricingBarRef.current;
|
|
@@ -6202,7 +6995,7 @@ function TripPage({
|
|
|
6202
6995
|
check();
|
|
6203
6996
|
return () => document.removeEventListener("scroll", check, { capture: true });
|
|
6204
6997
|
}, []);
|
|
6205
|
-
|
|
6998
|
+
React21.useEffect(() => {
|
|
6206
6999
|
const check = () => {
|
|
6207
7000
|
if (!pricingBarRef.current) return;
|
|
6208
7001
|
setNavHidden(pricingBarRef.current.getBoundingClientRect().top < window.innerHeight * 0.92);
|
|
@@ -6211,7 +7004,7 @@ function TripPage({
|
|
|
6211
7004
|
check();
|
|
6212
7005
|
return () => document.removeEventListener("scroll", check, { capture: true });
|
|
6213
7006
|
}, []);
|
|
6214
|
-
|
|
7007
|
+
React21.useEffect(() => {
|
|
6215
7008
|
if (sections.length === 0) return;
|
|
6216
7009
|
setActiveSection(sections[0].id);
|
|
6217
7010
|
const update = () => {
|
|
@@ -7225,6 +8018,6 @@ function LeadCapturePopup({
|
|
|
7225
8018
|
);
|
|
7226
8019
|
}
|
|
7227
8020
|
|
|
7228
|
-
export { ActivityCard, Alert, BookingConfirmation, BookingConfirmationEmail, 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 };
|
|
7229
8022
|
//# sourceMappingURL=index.js.map
|
|
7230
8023
|
//# sourceMappingURL=index.js.map
|