mautourco-components 0.2.21 → 0.2.23

package/dist/components/molecules/BookingPax/BookingPaxTransfer.js

@@ -19,11 +19,28 @@ import { BookingPaxClient, } from './BookingPaxClient/BookingPaxClient';
 import { BookingPaxHeader } from './BookingPaxHeader';
 import { BookingPaxLayout } from './BookingPaxLayout/BookingPaxLayout';
 import { BookingPaxRemarks } from './BookingPaxRemarks';
-var mapType = {
+export var mapTransferType = {
     ARV: 'Arrival',
     DEP: 'Departure',
     INH: 'Inter-Hotel',
 };
+/**
+ * BookingPaxTransfer is a component that allows the user to display the booking pax transfer.
+ *
+ * @example
+ * <BookingPaxTransfer
+ *  type="ARV"
+ *  from="Plaisance Airport"
+ *  to="Grand Paradise Hotel"
+ *  clientsInfo={clientsInfo}
+ *  paxCount={2}
+ *  selectedClientsInfoIds={{ 0: [] }}
+ *  isSubmitted={false}
+ *  onPaxChange={onPaxChange}
+ *
+ * @param props - The props for the BookingPaxTransfer component.
+ * @returns The BookingPaxTransfer component.
+ */
 export var BookingPaxTransfer = function (props) {
     var from = props.from, to = props.to, type = props.type, clientsInfo = props.clientsInfo, paxCount = props.paxCount, selectedClientsInfoIds = props.selectedClientsInfoIds, isSubmitted = props.isSubmitted, onPaxChange = props.onPaxChange, onRemarkChange = props.onRemarkChange, onTimeChange = props.onTimeChange, onError = props.onError, onFlightNumberChange = props.onFlightNumberChange;
     var _a = useBookingPax(selectedClientsInfoIds), changeOptions = _a.changeOptions, onPaxOptionsChange = _a.onPaxOptionsChange, onSelectedClients = _a.onSelectedClients;
@@ -36,5 +53,5 @@ export var BookingPaxTransfer = function (props) {
     useEffect(function () {
         onSelectedClients(clientsInfo, onPaxChange);
     }, [changeOptions, onPaxChange]);
-    return (_jsxs(BookingPaxLayout, __assign({ title: _jsxs(_Fragment, { children: ["Transfer", ' ', _jsxs(Text, __assign({ as: "span", color: "accent", variant: "bold", size: "xl", className: "italic" }, { children: ["(", mapType[type], ")"] }))] }), icon: "car", className: "booking-pax-accom", header: _jsx(BookingPaxHeader, { children: _jsx(BookingPaxHeader.Location, { from: from, to: to }) }) }, { children: [type === 'INH' ? (_jsx(DateTimePicker, { icon: "clock", mode: "time", onValueChange: onTimeChange, placeholder: "Time of Transfer" })) : (_jsx(Input, { icon: "arrival", iconPosition: "leading", placeholder: "Flight number", onChange: handleFlightNumberChange })), _jsx(BookingPaxClient, { id: id, clients: clientsInfo, selectedClientsInfoIds: selectedClientsInfoIds, selectedIndex: 0, paxCount: paxCount, isSubmitted: isSubmitted, onPaxChange: onPaxOptionsChange, onError: onError }), _jsx(BookingPaxRemarks, { onChange: onRemarkChange })] })));
+    return (_jsxs(BookingPaxLayout, __assign({ title: _jsxs(_Fragment, { children: ["Transfer", ' ', _jsxs(Text, __assign({ as: "span", color: "accent", variant: "bold", size: "xl", className: "italic" }, { children: ["(", mapTransferType[type], ")"] }))] }), icon: "car", className: "booking-pax-accom", header: _jsx(BookingPaxHeader, { children: _jsx(BookingPaxHeader.Location, { from: from, to: to }) }) }, { children: [type === 'INH' ? (_jsx(DateTimePicker, { icon: "clock", mode: "time", onValueChange: onTimeChange, placeholder: "Time of Transfer" })) : (_jsx(Input, { icon: "arrival", iconPosition: "leading", placeholder: "Flight number", onChange: handleFlightNumberChange })), _jsx(BookingPaxClient, { id: id, clients: clientsInfo, selectedClientsInfoIds: selectedClientsInfoIds, selectedIndex: 0, paxCount: paxCount, isSubmitted: isSubmitted, onPaxChange: onPaxOptionsChange, onError: onError }), _jsx(BookingPaxRemarks, { onChange: onRemarkChange })] })));
 };

package/dist/components/molecules/BookingPax/index.d.ts

@@ -2,4 +2,5 @@ export type { BookingPaxAccomProps, RoomData } from './BookingPaxAccom';
 export type { BookingPaxClientInfo, BookingPaxClientProps, } from './BookingPaxClient/BookingPaxClient';
 export type { BookingPaxExcursionProps } from './BookingPaxExcursion';
 export type { BookingPaxTransferProps } from './BookingPaxTransfer';
+export { mapTransferType } from './BookingPaxTransfer';
 export * from './BookingPax';

package/dist/components/molecules/BookingPax/index.js

@@ -1 +1,2 @@
+export { mapTransferType } from './BookingPaxTransfer';
 export * from './BookingPax';

package/dist/components/molecules/Calendar/DateTime.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { DateRange } from "react-day-picker";
+import { DateRange } from 'react-day-picker';
 export interface DateTimeProps {
-    mode?: "calendar" | "time" | "both";
-    selectionMode?: "single" | "range";
+    mode?: 'calendar' | 'time' | 'both';
+    selectionMode?: 'single' | 'range';
     numberOfMonths?: 1 | 2;
     disableBeforeToday?: boolean;
     disableToday?: boolean;
@@ -10,14 +10,14 @@ export interface DateTimeProps {
     defaultTime?: {
         hour: string;
         minute: string;
-        meridiem: "AM" | "PM";
+        meridiem: 'AM' | 'PM';
     };
     onChange?: (payload: {
         dateRange?: DateRange;
         time?: {
             hour: string;
             minute: string;
-            meridiem: "AM" | "PM";
+            meridiem: 'AM' | 'PM';
         };
     }) => void;
 }

package/dist/components/molecules/Calendar/DateTime.js

@@ -10,23 +10,26 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
-import { Calendar } from "../../ui/calendar";
-import { Button } from "../../ui/button";
-import TimePicker from "./TimePicker";
-import Icon from "../../atoms/Icon/Icon";
+import { useEffect, useState } from 'react';
+import Icon from '../../atoms/Icon/Icon';
+import { Button } from '../../ui/button';
+import { Calendar } from '../../ui/calendar';
+import TimePicker from './TimePicker';
 var DateTime = function (_a) {
     var _b, _c, _d;
-    var _e = _a.mode, mode = _e === void 0 ? "both" : _e, _f = _a.selectionMode, selectionMode = _f === void 0 ? "range" : _f, _g = _a.numberOfMonths, numberOfMonths = _g === void 0 ? 2 : _g, _h = _a.disableBeforeToday, disableBeforeToday = _h === void 0 ? true : _h, _j = _a.disableToday, disableToday = _j === void 0 ? false : _j, defaultDateRange = _a.defaultDateRange, defaultTime = _a.defaultTime, onChange = _a.onChange;
+    var _e = _a.mode, mode = _e === void 0 ? 'both' : _e, _f = _a.selectionMode, selectionMode = _f === void 0 ? 'range' : _f, _g = _a.numberOfMonths, numberOfMonths = _g === void 0 ? 2 : _g, _h = _a.disableBeforeToday, disableBeforeToday = _h === void 0 ? true : _h, _j = _a.disableToday, disableToday = _j === void 0 ? false : _j, defaultDateRange = _a.defaultDateRange, defaultTime = _a.defaultTime, onChange = _a.onChange;
     var _k = useState(defaultDateRange), dateRange = _k[0], setDateRange = _k[1];
-    var _l = useState((_b = defaultTime === null || defaultTime === void 0 ? void 0 : defaultTime.hour) !== null && _b !== void 0 ? _b : "12"), hours = _l[0], setHours = _l[1];
-    var _m = useState((_c = defaultTime === null || defaultTime === void 0 ? void 0 : defaultTime.minute) !== null && _c !== void 0 ? _c : "00"), minutes = _m[0], setMinutes = _m[1];
-    var _o = useState((_d = defaultTime === null || defaultTime === void 0 ? void 0 : defaultTime.meridiem) !== null && _d !== void 0 ? _d : "AM"), amPm = _o[0], setAmPm = _o[1];
+    var _l = useState(defaultDateRange === null || defaultDateRange === void 0 ? void 0 : defaultDateRange.from), month = _l[0], setMonth = _l[1];
+    var _m = useState((_b = defaultTime === null || defaultTime === void 0 ? void 0 : defaultTime.hour) !== null && _b !== void 0 ? _b : '12'), hours = _m[0], setHours = _m[1];
+    var _o = useState((_c = defaultTime === null || defaultTime === void 0 ? void 0 : defaultTime.minute) !== null && _c !== void 0 ? _c : '00'), minutes = _o[0], setMinutes = _o[1];
+    var _p = useState((_d = defaultTime === null || defaultTime === void 0 ? void 0 : defaultTime.meridiem) !== null && _d !== void 0 ? _d : 'AM'), amPm = _p[0], setAmPm = _p[1];
     // notify parent when date or time changes
     useEffect(function () {
         onChange === null || onChange === void 0 ? void 0 : onChange({
             dateRange: dateRange !== null && dateRange !== void 0 ? dateRange : undefined,
-            time: mode === "calendar" ? undefined : { hour: hours, minute: minutes, meridiem: amPm },
+            time: mode === 'calendar'
+                ? undefined
+                : { hour: hours, minute: minutes, meridiem: amPm },
         });
     }, [dateRange, hours, minutes, amPm, onChange, mode]);
     var handleSelect = function (val) {
@@ -46,9 +49,9 @@ var DateTime = function (_a) {
         setDateRange(val);
     };
     var resetTime = function () {
-        setHours("12");
-        setMinutes("00");
-        setAmPm("AM");
+        setHours('12');
+        setMinutes('00');
+        setAmPm('AM');
     };
     var clearSelection = function () {
         setDateRange(undefined);
@@ -59,7 +62,7 @@ var DateTime = function (_a) {
         today.setHours(0, 0, 0, 0);
         setDateRange({ from: today, to: today });
     };
-    var calendarMode = selectionMode === "single" ? "single" : "range";
+    var calendarMode = selectionMode === 'single' ? 'single' : 'range';
     var buildDisabled = function () {
         var disabled = [];
         if (disableBeforeToday) {
@@ -75,32 +78,40 @@ var DateTime = function (_a) {
         return disabled.length ? disabled : undefined;
     };
     var disabledDays = buildDisabled();
-    return (_jsxs("div", __assign({ className: "calendar--dropdown" }, { children: [mode !== "time" && (function () {
-                var calendarProps = {
-                    mode: calendarMode,
-                    selected: dateRange,
-                    onSelect: handleSelect,
-                    weekStartsOn: 1,
-                    showOutsideDays: false,
-                    numberOfMonths: numberOfMonths,
-                    disabled: disabledDays,
-                    className: "p-0",
-                    formatters: {
-                        formatWeekdayName: function (weekday, options) {
-                            var _a;
-                            return weekday
-                                .toLocaleDateString((_a = options === null || options === void 0 ? void 0 : options.locale) === null || _a === void 0 ? void 0 : _a.code, { weekday: "short" })
-                                .toUpperCase();
+    useEffect(function () {
+        if (defaultDateRange) {
+            setMonth(defaultDateRange === null || defaultDateRange === void 0 ? void 0 : defaultDateRange.from);
+        }
+    }, [defaultDateRange]);
+    return (_jsxs("div", __assign({ className: "calendar--dropdown" }, { children: [mode !== 'time' &&
+                (function () {
+                    var calendarProps = {
+                        mode: calendarMode,
+                        selected: dateRange,
+                        onSelect: handleSelect,
+                        weekStartsOn: 1,
+                        month: month,
+                        onMonthChange: setMonth,
+                        showOutsideDays: false,
+                        numberOfMonths: numberOfMonths,
+                        disabled: disabledDays,
+                        className: 'p-0',
+                        formatters: {
+                            formatWeekdayName: function (weekday, options) {
+                                var _a;
+                                return weekday
+                                    .toLocaleDateString((_a = options === null || options === void 0 ? void 0 : options.locale) === null || _a === void 0 ? void 0 : _a.code, { weekday: 'short' })
+                                    .toUpperCase();
+                            },
                         },
-                    },
-                };
-                return _jsx(Calendar, __assign({}, calendarProps));
-            })(), mode !== "calendar" && (_jsx("div", __assign({ className: "".concat(mode === "both" ? "calendar--time_container_separated" : "") }, { children: _jsx(TimePicker, { label: "Time", hour: hours, minute: minutes, meridiem: amPm, onChange: function (h, m, mm) {
-                        var hh = String(Math.max(0, Math.min(12, Number(h || 0)))).padStart(2, "0");
-                        var mmn = String(Math.max(0, Math.min(59, Number(m || 0)))).padStart(2, "0");
+                    };
+                    return _jsx(Calendar, __assign({}, calendarProps));
+                })(), mode !== 'calendar' && (_jsx("div", __assign({ className: "".concat(mode === 'both' ? 'calendar--time_container_separated' : '') }, { children: _jsx(TimePicker, { label: "Time", hour: hours, minute: minutes, meridiem: amPm, onChange: function (h, m, mm) {
+                        var hh = String(Math.max(0, Math.min(12, Number(h || 0)))).padStart(2, '0');
+                        var mmn = String(Math.max(0, Math.min(59, Number(m || 0)))).padStart(2, '0');
                         setHours(hh);
                         setMinutes(mmn);
                         setAmPm(mm);
-                    } }) }))), mode !== "time" && (_jsxs("div", __assign({ className: "calendar--footer" }, { children: [_jsxs(Button, __assign({ variant: "ghost", size: "sm", onClick: selectToday, type: "button", className: "calendar--footer--button", disabled: disableToday }, { children: [_jsx(Icon, { name: "calendar-outline", size: "sm" }), "Today"] })), _jsx(Button, __assign({ variant: "ghost", size: "sm", onClick: clearSelection, type: "button", className: "calendar--footer--button" }, { children: "Clear" }))] })))] })));
+                    } }) }))), mode !== 'time' && (_jsxs("div", __assign({ className: "calendar--footer" }, { children: [_jsxs(Button, __assign({ variant: "ghost", size: "sm", onClick: selectToday, type: "button", className: "calendar--footer--button", disabled: disableToday }, { children: [_jsx(Icon, { name: "calendar-outline", size: "sm" }), "Today"] })), _jsx(Button, __assign({ variant: "ghost", size: "sm", onClick: clearSelection, type: "button", className: "calendar--footer--button" }, { children: "Clear" }))] })))] })));
 };
 export default DateTime;

package/dist/components/molecules/DialogContentPolicy/DialogCancellationList.d.ts

@@ -2,10 +2,30 @@ import React from 'react';
 import { DialogCancellationAccomProps } from './DialogCancellationAccom';
 import { DialogCancellationExcursionProps } from './DialogCancellationExcursion';
 export interface CancellationItem {
+    /**
+     * The type of the cancellation.
+     */
     type: 'accommodation' | 'excursion';
+    /**
+     * The data of the cancellation.
+     */
     data: DialogCancellationAccomProps | DialogCancellationExcursionProps;
 }
 export interface DialogCancellationListProps {
+    /**
+     * The cancellations to display.
+     */
     cancellations: CancellationItem[];
 }
+/**
+ * DialogCancellationList is a component that allows the user to display the cancellations.
+ *
+ * @example
+ * <DialogCancellationList
+ *  cancellations={cancellations}
+ * />
+ *
+ * @param props - The props for the DialogCancellationList component.
+ * @returns The DialogCancellationList component.
+ */
 export declare const DialogCancellationList: React.FC<DialogCancellationListProps>;

package/dist/components/molecules/DialogContentPolicy/DialogCancellationList.js

@@ -13,14 +13,25 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { DialogCancellationAccom, } from './DialogCancellationAccom';
 import { DialogCancellationExcursion, } from './DialogCancellationExcursion';
 import { DialogContentPolicy } from './DialogContentPolicy';
+var isAccommodation = function (data) {
+    return 'hotelName' in data;
+};
+var isExcursion = function (data) {
+    return 'excursionName' in data;
+};
+/**
+ * DialogCancellationList is a component that allows the user to display the cancellations.
+ *
+ * @example
+ * <DialogCancellationList
+ *  cancellations={cancellations}
+ * />
+ *
+ * @param props - The props for the DialogCancellationList component.
+ * @returns The DialogCancellationList component.
+ */
 export var DialogCancellationList = function (props) {
     var cancellations = props.cancellations;
-    var isAccommodation = function (data) {
-        return 'hotelName' in data;
-    };
-    var isExcursion = function (data) {
-        return 'excursionName' in data;
-    };
     return (_jsx(DialogContentPolicy, { children: cancellations.map(function (c, index) {
             if (c.type === 'accommodation' && isAccommodation(c.data)) {
                 return _jsx(DialogCancellationAccom, __assign({}, c.data), "acc-".concat(index));

package/dist/components/molecules/DialogContentPolicy/DialogContentPolicy.d.ts

@@ -1,8 +1,26 @@
 import React from 'react';
 export interface DialogContentPolicyProps {
+    /**
+     * The children to display.
+     */
     children: React.ReactNode;
+    /**
+     * The callback function to call when the submit button is clicked.
+     */
     onSubmit?: () => void;
 }
+/**
+ * DialogContentPolicy is a component that allows the user to display the cancellation policy.
+ *
+ * @example
+ * <DialogContentPolicy
+ *  children={children}
+ *  onSubmit={onSubmit}
+ * />
+ *
+ * @param props - The props for the DialogContentPolicy component.
+ * @returns The DialogContentPolicy component.
+ */
 export declare const DialogContentPolicy: {
     (props: DialogContentPolicyProps): import("react/jsx-runtime").JSX.Element;
     Accommodation: React.FC<import("./DialogCancellationAccom").DialogCancellationAccomProps>;

package/dist/components/molecules/DialogContentPolicy/DialogContentPolicy.js

@@ -12,15 +12,26 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import Button from '../../atoms/Button/Button';
-import { Text } from '../../atoms/Typography/Typography';
-import { Checkbox } from '../../ui/checkbox';
+import Checkbox from '../../atoms/Checkbox/Checkbox';
 import { DialogCancellationAccom } from './DialogCancellationAccom';
 import { DialogCancellationExcursion } from './DialogCancellationExcursion';
 import { DialogCancellationList } from './DialogCancellationList';
+/**
+ * DialogContentPolicy is a component that allows the user to display the cancellation policy.
+ *
+ * @example
+ * <DialogContentPolicy
+ *  children={children}
+ *  onSubmit={onSubmit}
+ * />
+ *
+ * @param props - The props for the DialogContentPolicy component.
+ * @returns The DialogContentPolicy component.
+ */
 export var DialogContentPolicy = function (props) {
     var children = props.children, onSubmit = props.onSubmit;
     var _a = useState(false), accepted = _a[0], setAccepted = _a[1];
-    return (_jsxs("div", __assign({ className: "cancellation-policy" }, { children: [children, _jsxs("div", __assign({ className: "flex justify-end gap-x-8 py-9" }, { children: [_jsxs("div", __assign({ className: "flex gap-x-2.5 items-center" }, { children: [_jsx("label", __assign({ htmlFor: "accept-terms" }, { children: _jsx(Text, __assign({ size: "sm", as: "span" }, { children: "I've read and accept the cancellation policy." })) })), _jsx(Checkbox, { id: "accept-terms", checked: accepted, onCheckedChange: setAccepted })] })), _jsx(Button, __assign({ className: "w-[250px]", variant: "secondary", disabled: !accepted, onClick: onSubmit }, { children: "Next" }))] }))] })));
+    return (_jsxs("div", __assign({ className: "cancellation-policy" }, { children: [children, _jsxs("div", __assign({ className: "flex justify-end gap-x-5 py-9" }, { children: [_jsx("div", __assign({ className: "flex gap-x-2.5 items-center" }, { children: _jsx(Checkbox, { checked: accepted, onChange: setAccepted, label: "I've read and accept the cancellation policy.", labelPosition: "leading" }) })), _jsx(Button, __assign({ className: "w-[250px]", variant: "secondary", disabled: !accepted, onClick: onSubmit }, { children: "Next" }))] }))] })));
 };
 DialogContentPolicy.Accommodation = DialogCancellationAccom;
 DialogContentPolicy.Excursion = DialogCancellationExcursion;

package/dist/components/molecules/ServiceSelector/ServiceSelector.d.ts

@@ -17,6 +17,9 @@ export interface ServiceSelectorProps {
     disabled?: boolean;
     /** Additional CSS classes */
     className?: string;
+    /** Options to display */
+    options?: ServiceOption[];
 }
+export declare const DEFAULT_SERVICE_SELECTOR_OPTIONS: ServiceOption[];
 declare const ServiceSelector: React.FC<ServiceSelectorProps>;
 export default ServiceSelector;

package/dist/components/molecules/ServiceSelector/ServiceSelector.js

@@ -10,10 +10,12 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from 'react';
+import { cn } from '@/src/lib/utils';
+import { useEffect, useRef, useState } from 'react';
+import '../../../styles/components/molecule/service-selector.css';
 import Icon from '../../atoms/Icon/Icon';
 import { Text } from '../../atoms/Typography/Typography';
-import '../../../styles/components/molecule/service-selector.css';
+import { Popover, PopoverContent, PopoverTrigger } from '../../ui/popover';
 var DEFAULT_OPTIONS = [
     {
         value: 'accommodation',
@@ -33,9 +35,11 @@ var DEFAULT_OPTIONS = [
         badge: 'Coming soon',
     },
 ];
+export var DEFAULT_SERVICE_SELECTOR_OPTIONS = DEFAULT_OPTIONS;
 var ServiceSelector = function (_a) {
-    var value = _a.value, onChange = _a.onChange, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.className, className = _c === void 0 ? '' : _c;
-    var _d = useState(false), isOpen = _d[0], setIsOpen = _d[1];
+    var value = _a.value, onChange = _a.onChange, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.options, options = _c === void 0 ? DEFAULT_OPTIONS : _c, _d = _a.className, className = _d === void 0 ? '' : _d;
+    var _e = useState(value), selectedValue = _e[0], setSelectedValue = _e[1];
+    var _f = useState(false), isOpen = _f[0], setIsOpen = _f[1];
     var dropdownRef = useRef(null);
     // Close dropdown when clicking outside
     useEffect(function () {
@@ -59,27 +63,34 @@ var ServiceSelector = function (_a) {
             return;
         onChange(option.value);
         setIsOpen(false);
+        setSelectedValue(option.value);
     };
     var getDropdownState = function () {
         if (disabled)
             return 'disabled';
         // If a service is selected, always show selected state (even if open)
-        if (value)
+        if (selectedValue)
             return 'selected';
         if (isOpen)
             return 'open';
         return 'default';
     };
-    var selectedOption = value ? DEFAULT_OPTIONS.find(function (opt) { return opt.value === value; }) : null;
+    var defaultOptions = options.length > 0 ? options : DEFAULT_OPTIONS;
+    var selectedOption = selectedValue
+        ? defaultOptions.find(function (opt) { return opt.value === selectedValue; })
+        : null;
     var displayText = selectedOption ? selectedOption.label : 'Select a service';
-    return (_jsxs("div", __assign({ ref: dropdownRef, className: "service-selector ".concat(className) }, { children: [_jsxs("button", __assign({ type: "button", className: "service-selector__trigger service-selector__trigger--".concat(getDropdownState()), onClick: handleToggleDropdown, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "listbox" }, { children: [_jsxs("div", __assign({ className: "service-selector__trigger-content" }, { children: [selectedOption && (_jsx(Icon, { name: selectedOption.icon, size: "md", className: "service-selector__trigger-icon" })), _jsx(Text, __assign({ size: "base", variant: "bold", className: "service-selector__trigger-text" }, { children: displayText }))] })), _jsx(Icon, { name: "chevron-down-new", size: "sm", className: "service-selector__trigger-chevron", style: {
-                            transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
-                            transition: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-                            transformOrigin: 'center'
-                        } })] })), isOpen && (_jsx("div", __assign({ className: "service-selector__panel", role: "listbox" }, { children: _jsx("div", __assign({ className: "service-selector__content" }, { children: _jsx("div", __assign({ className: "service-selector__options-wrapper" }, { children: DEFAULT_OPTIONS.map(function (option) {
+    useEffect(function () {
+        setSelectedValue(value);
+    }, [value]);
+    return (_jsxs(Popover, __assign({ open: isOpen, onOpenChange: setIsOpen }, { children: [_jsx(PopoverTrigger, __assign({ asChild: true }, { children: _jsxs("button", __assign({ type: "button", className: cn("service-selector__trigger service-selector__trigger--".concat(getDropdownState()), className), onClick: handleToggleDropdown, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "listbox" }, { children: [_jsxs("div", __assign({ className: "service-selector__trigger-content" }, { children: [selectedOption && (_jsx(Icon, { name: selectedOption.icon, size: "md", className: "service-selector__trigger-icon" })), _jsx(Text, __assign({ size: "base", variant: "bold", className: "service-selector__trigger-text" }, { children: displayText }))] })), _jsx(Icon, { name: "chevron-down-new", size: "sm", className: "service-selector__trigger-chevron", style: {
+                                transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+                                transition: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+                                transformOrigin: 'center',
+                            } })] })) })), _jsx(PopoverContent, __assign({ className: "service-selector__panel", align: "start" }, { children: _jsx("div", __assign({ className: "service-selector__content" }, { children: _jsx("div", __assign({ className: "service-selector__options-wrapper" }, { children: defaultOptions.map(function (option) {
                             var isSelected = value === option.value;
                             var isDisabled = option.disabled || disabled;
                             return (_jsxs("button", __assign({ type: "button", className: "service-selector__option ".concat(isSelected ? 'service-selector__option--selected' : '', " ").concat(isDisabled ? 'service-selector__option--disabled' : ''), onClick: function () { return handleOptionSelect(option); }, disabled: isDisabled, role: "option", "aria-selected": isSelected }, { children: [_jsx(Icon, { name: option.icon, size: "md", className: "service-selector__option-icon ".concat(isSelected ? 'service-selector__option-icon--selected' : '') }), _jsx(Text, __assign({ size: "base", variant: "bold", color: isSelected ? 'inverted' : 'default', className: "service-selector__option-text" }, { children: option.label })), option.badge && (_jsx("span", __assign({ className: "service-selector__option-badge" }, { children: option.badge })))] }), option.value));
-                        }) })) })) })))] })));
+                        }) })) })) }))] })));
 };
 export default ServiceSelector;

package/dist/components/organisms/Booking/BookingPaxList.d.ts

@@ -2,24 +2,88 @@ import React from 'react';
 import { BookingPaxAccomProps, BookingPaxExcursionProps, BookingPaxTransferProps } from '../../molecules/BookingPax';
 import { BookingPaxClientInfo, BookingPaxClientOptions } from '../../molecules/BookingPax/BookingPaxClient/BookingPaxClient';
 export interface BookingPaxData {
+    /**
+     * The type of the booking pax.
+     */
     type: 'accommodation' | 'excursion' | 'transfer';
+    /**
+     * The data of the booking pax.
+     */
     data: Omit<BookingPaxAccomProps, 'clientsInfo'> | Omit<BookingPaxExcursionProps, 'clientsInfo'> | Omit<BookingPaxTransferProps, 'clientsInfo'>;
 }
 export interface BookingPaxAutoFilledData {
+    /**
+     * The type of the booking pax.
+     */
     type: BookingPaxData['type'];
+    /**
+     * The parent index of the booking pax.
+     */
     parentIndex: number;
+    /**
+     * The room index of the booking pax.
+     */
     roomIndex?: number;
+    /**
+     * The selected clients of the booking pax.
+     */
     selectedClients: BookingPaxClientInfo[];
 }
 export interface BookingPaxProps {
+    /**
+     * The data of the booking pax.
+     */
     data: BookingPaxData[];
+    /**
+     * The clients info of the booking pax.
+     */
     clientsInfo: BookingPaxClientInfo[];
+    /**
+     * Whether the booking pax is submitted.
+     */
     isSubmitted?: boolean;
+    /**
+     * The callback function to call when the pax changes.
+     */
     onPaxChange?: (index: number, type: BookingPaxData['type'], options: BookingPaxClientOptions) => void;
+    /**
+     * The callback function to call when the remark changes.
+     */
     onRemarkChange?: (index: number, type: BookingPaxData['type'], value: string) => void;
+    /**
+     * The callback function to call when the error changes.
+     */
     onError?: (index: number, type: BookingPaxData['type'], hasError: boolean) => void;
+    /**
+     * The callback function to call when the time changes.
+     */
     onTimeChange?: (index: number, value: string | string[]) => void;
+    /**
+     * The callback function to call when the flight number changes.
+     */
     onFlightNumberChange?: (index: number, value: string) => void;
+    /**
+     * The callback function to call when the auto filled data changes.
+     */
     onAutoFilled?: (data: BookingPaxAutoFilledData[]) => void;
 }
+/**
+ * BookingPaxList is a component that allows the user to select the pax for a booking.
+ *
+ * @example
+ * <BookingPaxList
+ *  data={data}
+ *  clientsInfo={clientsInfo}
+ *  isSubmitted={isSubmitted}
+ *  onPaxChange={onPaxChange}
+ *  onRemarkChange={onRemarkChange}
+ *  onError={onError}
+ *  onTimeChange={onTimeChange}
+ *  onFlightNumberChange={onFlightNumberChange}
+ *  onAutoFilled={onAutoFilled}
+ * />
+ *
+ * @param props - The props for the BookingPaxList component.
+ * @returns The BookingPaxList component.
+ */
 export declare const BookingPaxList: React.FC<BookingPaxProps>;

package/dist/components/organisms/Booking/BookingPaxList.js

@@ -31,6 +31,25 @@ var isExcursionData = function (data) {
 var isTransferData = function (data) {
     return 'from' in data && 'to' in data && 'type' in data;
 };
+/**
+ * BookingPaxList is a component that allows the user to select the pax for a booking.
+ *
+ * @example
+ * <BookingPaxList
+ *  data={data}
+ *  clientsInfo={clientsInfo}
+ *  isSubmitted={isSubmitted}
+ *  onPaxChange={onPaxChange}
+ *  onRemarkChange={onRemarkChange}
+ *  onError={onError}
+ *  onTimeChange={onTimeChange}
+ *  onFlightNumberChange={onFlightNumberChange}
+ *  onAutoFilled={onAutoFilled}
+ * />
+ *
+ * @param props - The props for the BookingPaxList component.
+ * @returns The BookingPaxList component.
+ */
 export var BookingPaxList = function (props) {
     var data = props.data, isSubmitted = props.isSubmitted, clientsInfo = props.clientsInfo, onPaxChange = props.onPaxChange, onRemarkChange = props.onRemarkChange, onError = props.onError, onTimeChange = props.onTimeChange, onFlightNumberChange = props.onFlightNumberChange, onAutoFilled = props.onAutoFilled;
     var _a = useState([]), autoFilledData = _a[0], setAutoFilledData = _a[1];

package/dist/components/organisms/BookingAddItem/AddItemNewService.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { BookingPaxClientInfo } from '../../molecules/BookingPax';
+import { ServiceOption, ServiceType } from '../../molecules/ServiceSelector';
+export interface AddItemNewServiceProps {
+    options?: ServiceOption[];
+    date: string | string[];
+    clients: BookingPaxClientInfo[];
+    onServiceChange: (service: ServiceType) => void;
+    onNext: (selectedClients: BookingPaxClientInfo[]) => void;
+    onBack: () => void;
+}
+export declare const AddItemNewService: React.FC<AddItemNewServiceProps>;

package/dist/components/organisms/BookingAddItem/AddItemNewService.js

@@ -0,0 +1,48 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import Button from '../../atoms/Button/Button';
+import Checkbox from '../../atoms/Checkbox/Checkbox';
+import { Text } from '../../atoms/Typography/Typography';
+import ServiceSelector from '../../molecules/ServiceSelector';
+import DateTimePicker from '../DateTimePicker/DateTimePicker';
+export var AddItemNewService = function (props) {
+    var date = props.date, options = props.options, clients = props.clients, onServiceChange = props.onServiceChange, onNext = props.onNext, onBack = props.onBack;
+    var _a = useState('accommodation'), service = _a[0], setService = _a[1];
+    var _b = useState([]), selectedClients = _b[0], setSelectedClients = _b[1];
+    var handleServiceChange = function (service) {
+        onServiceChange(service);
+        setService(service);
+    };
+    var isAccommodation = service === 'accommodation';
+    var selectionMode = isAccommodation ? 'range' : 'single';
+    var numberOfMonths = isAccommodation ? 2 : 1;
+    var handleClientChange = useCallback(function (client) {
+        if (selectedClients.includes(client)) {
+            setSelectedClients(selectedClients.filter(function (c) { return c.clientId !== client.clientId; }));
+        }
+        else {
+            setSelectedClients(__spreadArray(__spreadArray([], selectedClients, true), [client], false));
+        }
+    }, [selectedClients]);
+    return (_jsxs("div", __assign({ className: "space-y-9" }, { children: [_jsxs("div", __assign({ className: "flex sm:items-center gap-4 flex-col sm:flex-row" }, { children: [_jsx(ServiceSelector, { className: "sm:basis-[245px] xl:basis-[260px] shrink-0 grow-0", value: service, onChange: handleServiceChange, options: options }), _jsx("div", __assign({ className: "sm:basis-[245px] xl:basis-[260px] shrink-0 grow-0" }, { children: _jsx(DateTimePicker, { mode: "calendar", selectionMode: selectionMode, defaultValue: date, placeholder: "Select date", numberOfMonths: numberOfMonths, iconPosition: "left", iconBGFull: false, showChevron: true }) }))] })), _jsxs("div", __assign({ className: "space-y-4" }, { children: [_jsx(Text, __assign({ variant: "bold" }, { children: "Please select the pax affected by the new service" })), _jsx("ul", { children: clients.map(function (client, index) { return (_jsx("li", { children: _jsx(Checkbox, { id: "cl-".concat(index), label: "".concat(client.firstName, " ").concat(client.lastName, " (").concat(client.clientType).concat(client.clientType !== 'Adult' ? " - ".concat(client.age, " years old") : '', ")"), checked: selectedClients.some(function (c) { return c.clientId === client.clientId; }), onChange: function () { return handleClientChange(client); } }) }, "cl-".concat(index))); }) })] })), _jsxs("div", __assign({ className: "flex justify-end gap-x-4 [&>*]:w-[250px] pb-2" }, { children: [_jsx(Button, __assign({ variant: "outline-secondary", onClick: onBack }, { children: "Back" })), _jsx(Button, __assign({ variant: "secondary", onClick: function () { return onNext(selectedClients); }, disabled: selectedClients.length === 0 }, { children: "Next" }))] }))] })));
+};

package/dist/components/organisms/BookingAddItem/AddItemSelector.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare enum AddItemType {
+    NEW = "NEW",
+    EXISTING = "EXISTING"
+}
+export interface AddItemSelectorProps {
+    onAddItem?: (type: AddItemType) => void;
+}
+export declare const AddItemSelector: React.FC<AddItemSelectorProps>;