mautourco-components 0.2.22 → 0.2.24

package/dist/components/organisms/Docket/Docket.d.ts

@@ -0,0 +1,126 @@
+import React from 'react';
+import '../../../styles/components/organism/docket.css';
+import { Docket as DocketType } from '../../../types/docket/docket.types';
+export interface DocketHeaderProps {
+    /**
+     * Title text for the docket header
+     */
+    title?: string;
+    /**
+     * Handler for the "More options" button click
+     */
+    onMoreOptionsClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+export interface DocketFooterProps {
+    /**
+     * Mode of the docket: 'single' shows only Save and Book now, 'multiple' shows all buttons
+     */
+    mode?: 'single' | 'multiple';
+    /**
+     * Handler for "Add new quote" button click
+     */
+    onAddNewQuoteClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Handler for "View" button click
+     */
+    onViewClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Handler for "Save" button click
+     */
+    onSaveClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Handler for "Book now" button click
+     */
+    onBookNowClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+export interface DocketProps {
+    /**
+     * Array of nested Docket objects
+     */
+    dockets?: DocketType[];
+    /**
+     * Title text for the docket header
+     */
+    title?: string;
+    /**
+     * Handler for the "More options" button click
+     */
+    onMoreOptionsClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Handler for "Add new quote" button click
+     */
+    onAddNewQuoteClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Handler for "View" button click
+     */
+    onViewClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Handler for "Save" button click
+     */
+    onSaveClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Handler for "Book now" button click
+     */
+    onBookNowClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Mode of the docket: 'single' shows only Save and Book now in footer, 'multiple' shows all buttons
+     */
+    mode?: 'single' | 'multiple';
+    /**
+     * Show the header section
+     */
+    showHeader?: boolean;
+    /**
+     * Show the footer section
+     */
+    showFooter?: boolean;
+    /**
+     * Additional CSS classes to apply to the docket container
+     */
+    className?: string;
+    /**
+     * Optional click handler
+     */
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Optional data attributes for testing or tracking
+     */
+    'data-testid'?: string;
+}
+/**
+ * Collapsed header component for mobile/tablet view
+ */
+export declare const DocketCollapsedHeader: React.FC<{
+    title?: string;
+    onClick?: () => void;
+    className?: string;
+}>;
+/**
+ * Empty state component for docket when no content is provided
+ */
+export declare const DocketEmptyState: React.FC<{
+    className?: string;
+}>;
+/**
+ * DocketHeader component for the docket title and more options button
+ */
+export declare const DocketHeader: React.FC<DocketHeaderProps>;
+/**
+ * DocketFooter component for action buttons
+ */
+export declare const DocketFooter: React.FC<DocketFooterProps>;
+/**
+ * Docket is a container component for displaying quotation/docket information.
+ * It provides a structured layout for travel booking summaries with sections
+ * for accommodation, services, pricing, and actions.
+ */
+export declare const Docket: React.FC<DocketProps>;
+export default Docket;

package/dist/components/organisms/Docket/Docket.js

@@ -0,0 +1,125 @@
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import '../../../styles/components/organism/docket.css';
+import Button from '../../atoms/Button/Button';
+import Chip from '../../atoms/Chip/Chip';
+import Icon from '../../atoms/Icon/Icon';
+import { AccomodationDocket } from '../../molecules/AccomodationDocket/AccomodationDocket';
+import { DocketPrices } from '../../molecules/DocketPrices/DocketPrices';
+import { ExcursionDocket } from '../../molecules/ExcursionDocket/ExcursionDocket';
+import { OtherServiceDocket } from '../../molecules/OtherServiceDocket/OtherServiceDocket';
+import { TransferDocket } from '../../molecules/TransferDocket/TransferDocket';
+/**
+ * Collapsed header component for mobile/tablet view
+ */
+export var DocketCollapsedHeader = function (_a) {
+    var _b = _a.title, title = _b === void 0 ? 'Your quotation' : _b, onClick = _a.onClick, _c = _a.className, className = _c === void 0 ? '' : _c;
+    return (_jsxs("div", __assign({ className: "docket__collapsed-header ".concat(className), onClick: onClick, role: "button", tabIndex: 0, onKeyDown: function (e) {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                onClick === null || onClick === void 0 ? void 0 : onClick();
+            }
+        } }, { children: [_jsxs("div", __assign({ className: "docket__collapsed-header-title" }, { children: [_jsx(Icon, { name: "quotation", size: "lg" }), _jsx("h2", __assign({ className: "docket__collapsed-header-title-text" }, { children: title }))] })), _jsx(Icon, { name: "eye", size: "lg" })] })));
+};
+/**
+ * Empty state component for docket when no content is provided
+ */
+export var DocketEmptyState = function (_a) {
+    var _b = _a.className, className = _b === void 0 ? '' : _b;
+    return (_jsx("div", __assign({ className: "docket__empty-state ".concat(className) }, { children: _jsxs("div", __assign({ className: "docket__empty-state-content" }, { children: [_jsx("div", __assign({ className: "docket__empty-state-illustration" }, { children: _jsx("img", { src: "/images/docket-empty-illustration.svg", alt: "Empty docket illustration", className: "docket__empty-state-image" }) })), _jsxs("p", __assign({ className: "docket__empty-state-text" }, { children: [_jsx("span", __assign({ className: "docket__empty-state-text-bold" }, { children: "Start by adding a service here\u2014" })), _jsx("span", __assign({ className: "docket__empty-state-text-regular" }, { children: "you'll be able to create and compare multiple quotations." }))] }))] })) })));
+};
+/**
+ * DocketHeader component for the docket title and more options button
+ */
+export var DocketHeader = function (_a) {
+    var _b = _a.title, title = _b === void 0 ? 'Your quotation' : _b, onMoreOptionsClick = _a.onMoreOptionsClick, _c = _a.className, className = _c === void 0 ? '' : _c;
+    return (_jsxs("div", __assign({ className: "docket__header ".concat(className) }, { children: [_jsxs("div", __assign({ className: "docket__header-title" }, { children: [_jsx(Icon, { name: "quotation", size: "lg" }), _jsx("h2", __assign({ className: "docket__header-title-text" }, { children: title }))] })), onMoreOptionsClick && (_jsx(Chip, __assign({ onClick: onMoreOptionsClick, trailingIcon: "chevron-down", className: "docket__header-more-options" }, { children: "More options" })))] })));
+};
+/**
+ * DocketFooter component for action buttons
+ */
+export var DocketFooter = function (_a) {
+    var _b = _a.mode, mode = _b === void 0 ? 'multiple' : _b, onAddNewQuoteClick = _a.onAddNewQuoteClick, onViewClick = _a.onViewClick, onSaveClick = _a.onSaveClick, onBookNowClick = _a.onBookNowClick, _c = _a.className, className = _c === void 0 ? '' : _c;
+    var isSingleMode = mode === 'single';
+    return (_jsxs("div", __assign({ className: "docket__footer ".concat(className) }, { children: [!isSingleMode && onAddNewQuoteClick && (_jsx(Button, __assign({ variant: "outline-secondary", size: "sm", leadingIcon: "plus", onClick: onAddNewQuoteClick, className: "docket__footer-button docket__footer-button--full" }, { children: "Add new quote" }))), _jsxs("div", __assign({ className: "docket__footer-actions" }, { children: [!isSingleMode && onViewClick && (_jsx(Button, __assign({ variant: "outline-secondary", size: "sm", onClick: onViewClick, className: "docket__footer-button" }, { children: "View" }))), onSaveClick && (_jsx(Button, __assign({ variant: "outline-secondary", size: "sm", onClick: onSaveClick, className: "docket__footer-button" }, { children: "Save" }))), onBookNowClick && (_jsx(Button, __assign({ variant: "secondary", size: "sm", onClick: onBookNowClick, className: "docket__footer-button docket__footer-button--primary" }, { children: "Book now" })))] }))] })));
+};
+/**
+ * Docket is a container component for displaying quotation/docket information.
+ * It provides a structured layout for travel booking summaries with sections
+ * for accommodation, services, pricing, and actions.
+ */
+export var Docket = function (_a) {
+    var dockets = _a.dockets, _b = _a.title, title = _b === void 0 ? 'Your quotation' : _b, onMoreOptionsClick = _a.onMoreOptionsClick, onAddNewQuoteClick = _a.onAddNewQuoteClick, onViewClick = _a.onViewClick, onSaveClick = _a.onSaveClick, onBookNowClick = _a.onBookNowClick, _c = _a.mode, mode = _c === void 0 ? 'multiple' : _c, _d = _a.showHeader, showHeader = _d === void 0 ? true : _d, _e = _a.showFooter, showFooter = _e === void 0 ? true : _e, _f = _a.className, className = _f === void 0 ? '' : _f, onClick = _a.onClick, testId = _a["data-testid"];
+    var _g = useState(false), isOpen = _g[0], setIsOpen = _g[1];
+    var _h = useState(false), isMobile = _h[0], setIsMobile = _h[1];
+    useEffect(function () {
+        var checkMobile = function () {
+            setIsMobile(window.innerWidth < 1024); // Tablet and mobile breakpoint
+        };
+        checkMobile();
+        window.addEventListener('resize', checkMobile);
+        return function () { return window.removeEventListener('resize', checkMobile); };
+    }, []);
+    var handleToggle = function () {
+        setIsOpen(!isOpen);
+    };
+    var handleClose = function (e) {
+        e.stopPropagation();
+        setIsOpen(false);
+    };
+    var baseClass = 'docket';
+    var classes = [
+        baseClass,
+        isMobile && !isOpen ? 'docket--collapsed' : '',
+        isMobile && isOpen ? 'docket--open' : '',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    var renderService = function (service, index) {
+        switch (service.type) {
+            case 'accommodation':
+                return (_jsx(AccomodationDocket, { data: service }, "service-".concat(index)));
+            case 'transfer':
+                return (_jsx(TransferDocket, { data: service }, "service-".concat(index)));
+            case 'excursion':
+                return (_jsx(ExcursionDocket, { data: service }, "service-".concat(index)));
+            case 'otherService':
+                return (_jsx(OtherServiceDocket, { data: service }, "service-".concat(index)));
+            default:
+                return null;
+        }
+    };
+    var renderContent = function () {
+        if (!dockets || dockets.length === 0) {
+            return _jsx(DocketEmptyState, {});
+        }
+        // Collect all services from all dockets
+        var allServices = dockets.flatMap(function (docket) { return docket.services || []; });
+        if (allServices.length === 0) {
+            return _jsx(DocketEmptyState, {});
+        }
+        var renderedServices = allServices
+            .map(function (service, index) { return renderService(service, index); })
+            .filter(Boolean);
+        if (renderedServices.length === 0) {
+            return _jsx(DocketEmptyState, {});
+        }
+        return _jsx("div", __assign({ className: "docket__services" }, { children: renderedServices }));
+    };
+    // Collect all prices from all dockets
+    var allPrices = dockets ? dockets.flatMap(function (docket) { return docket.prices || []; }) : [];
+    return (_jsxs(_Fragment, { children: [isMobile && !isOpen && (_jsx(DocketCollapsedHeader, { title: title, onClick: handleToggle })), isMobile && isOpen && (_jsxs("div", __assign({ className: "docket__mobile-wrapper" }, { children: [_jsx("div", __assign({ className: "docket__close-header" }, { children: _jsxs("div", __assign({ className: "docket__close-header-content" }, { children: [_jsx("h2", __assign({ className: "docket__close-header-text" }, { children: "Close" })), _jsx("button", __assign({ className: "docket__close-button", onClick: handleClose, "aria-label": "Close docket" }, { children: _jsx(Icon, { name: "close", size: "lg" }) }))] })) })), _jsxs("div", __assign({ className: classes, onClick: onClick, "data-testid": testId }, { children: [showHeader && (_jsx(DocketHeader, { title: title, onMoreOptionsClick: onMoreOptionsClick })), _jsx("div", __assign({ className: "docket__content" }, { children: renderContent() })), allPrices.length > 0 && (_jsx("div", __assign({ className: "docket__prices-section" }, { children: _jsx(DocketPrices, { prices: allPrices }) }))), showFooter && (_jsx(DocketFooter, { mode: mode, onAddNewQuoteClick: onAddNewQuoteClick, onViewClick: onViewClick, onSaveClick: onSaveClick, onBookNowClick: onBookNowClick }))] }))] }))), !isMobile && (_jsxs("div", __assign({ className: classes, onClick: onClick, "data-testid": testId }, { children: [showHeader && (_jsx(DocketHeader, { title: title, onMoreOptionsClick: onMoreOptionsClick })), _jsx("div", __assign({ className: "docket__content" }, { children: renderContent() })), allPrices.length > 0 && (_jsxs("div", __assign({ className: "docket__prices-section" }, { children: [_jsx(Icon, { name: "line", size: "lg" }), _jsx(DocketPrices, { prices: allPrices }), _jsx(Icon, { name: "line", size: "lg" })] }))), showFooter && (_jsx(DocketFooter, { mode: mode, onAddNewQuoteClick: onAddNewQuoteClick, onViewClick: onViewClick, onSaveClick: onSaveClick, onBookNowClick: onBookNowClick }))] })))] }));
+};
+export default Docket;

package/dist/components/organisms/PaxSelector/PaxSelector.d.ts

@@ -14,6 +14,7 @@ export interface PaxData {
     childAges?: number[];
     /** Ages for infants (1-18 years) */
     infantAges?: number[];
+    /** Client type */
     clientType: ClientType;
 }
 /**

package/dist/components/organisms/PaxSelector/PaxSelector.js

@@ -19,7 +19,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import Icon from '../../atoms/Icon/Icon';
 import { Text } from '../../atoms/Typography/Typography';
 var DEFAULT_PAX_DATA = {
@@ -123,7 +123,7 @@ var AgeSelector = function (_a) {
                                     border: 'none',
                                     outline: 'none',
                                     width: '100%',
-                                    cursor: 'text'
+                                    cursor: 'text',
                                 } }), _jsx("button", __assign({ type: "button", className: "pax-selector__age-dropdown-btn", onClick: function (e) {
                                     e.preventDefault();
                                     e.stopPropagation();
@@ -134,7 +134,7 @@ var AgeSelector = function (_a) {
                                     cursor: 'pointer',
                                     padding: 0,
                                     display: 'flex',
-                                    alignItems: 'center'
+                                    alignItems: 'center',
                                 } }, { children: _jsx(Icon, { name: "chevron-down", size: "sm", className: "dropdown-input__icon dropdown-input__icon--chevron" }) }))] })), isOpen && (_jsx("div", __assign({ className: "dropdown-menu", role: "listbox" }, { children: ageOptions.map(function (age) { return (_jsx("div", __assign({ className: "dropdown-option ".concat((value === null || value === void 0 ? void 0 : value.toString()) === age ? 'dropdown-option--selected' : ''), onClick: function () { return handleSelect(age); }, role: "option", "aria-selected": (value === null || value === void 0 ? void 0 : value.toString()) === age }, { children: age }), age)); }) })))] }))] })));
 };
 var StepperRow = function (_a) {
@@ -223,16 +223,25 @@ var RoomEditor = function (_a) {
     var teenAgeChunks = chunkAges(room.teenAges || [], 'Teen');
     var childAgeChunks = chunkAges(room.childAges || [], 'Child');
     var infantAgeChunks = chunkAges(room.infantAges || [], 'Infant');
-    return (_jsxs("div", __assign({ className: "pax-selector__room-container" }, { children: [_jsxs("div", __assign({ className: "pax-selector__room-header" }, { children: [_jsxs("div", __assign({ className: "pax-selector__room-title" }, { children: [_jsxs(Text, __assign({ size: "lg", variant: "bold", color: "accent", className: "pax-selector__room-name" }, { children: ["Room ", roomNumber] })), _jsx(Icon, { name: "home", size: "md", className: "pax-selector__room-icon" })] })), showRemove && (_jsxs("button", __assign({ type: "button", className: "pax-selector__room-remove", onClick: onRemove, "aria-label": "Remove room ".concat(roomNumber) }, { children: [_jsx(Icon, { name: "close", size: "sm", className: "pax-selector__room-remove-icon" }), _jsx("span", __assign({ className: "pax-selector__room-remove-text" }, { children: "Remove" }))] })))] })), _jsxs("div", __assign({ className: "pax-selector__room-content" }, { children: [_jsxs("div", __assign({ className: "pax-selector__steppers" }, { children: [_jsx(StepperRow, { label: "Adult", value: room.adults, max: maxAdults, onChange: function (val) { return handleFieldChange('adults', val); } }), _jsx(StepperRow, { label: "Teen", value: room.teens, max: maxTeens, onChange: function (val) { return handleFieldChange('teens', val); } }), _jsx(StepperRow, { label: "Child", value: room.children, max: maxChildren, onChange: function (val) { return handleFieldChange('children', val); } }), _jsx(StepperRow, { label: "Infant", value: room.infants, max: maxInfants, onChange: function (val) { return handleFieldChange('infants', val); } })] })), ((room.teens > 0) || (room.children > 0) || (room.infants > 0)) && (_jsxs("div", __assign({ className: "pax-selector__age-section" }, { children: [_jsx(Text, __assign({ size: "base", variant: "bold", color: "default", className: "pax-selector__age-section-title" }, { children: "Please specify the age :" })), _jsxs("div", __assign({ className: "pax-selector__age-groups" }, { children: [room.teens > 0 && teenAgeChunks.map(function (chunk, chunkIndex) { return (_jsx("div", __assign({ className: "pax-selector__age-row" }, { children: chunk.map(function (age, ageIndex) {
-                                            var actualIndex = chunkIndex * 2 + ageIndex;
-                                            return (_jsx(AgeSelector, { label: "Teen", value: age, onChange: function (selectedAge) { return handleAgeChange('teenAges', actualIndex, selectedAge); }, ageRange: CHILD_CATEGORY_AGES, required: true }, "teen-".concat(actualIndex)));
-                                        }) }), "teen-chunk-".concat(chunkIndex))); }), room.children > 0 && childAgeChunks.map(function (chunk, chunkIndex) { return (_jsx("div", __assign({ className: "pax-selector__age-row" }, { children: chunk.map(function (age, ageIndex) {
-                                            var actualIndex = chunkIndex * 2 + ageIndex;
-                                            return (_jsx(AgeSelector, { label: "Child", value: age, onChange: function (selectedAge) { return handleAgeChange('childAges', actualIndex, selectedAge); }, ageRange: CHILD_CATEGORY_AGES, required: true }, "child-".concat(actualIndex)));
-                                        }) }), "child-chunk-".concat(chunkIndex))); }), room.infants > 0 && infantAgeChunks.map(function (chunk, chunkIndex) { return (_jsx("div", __assign({ className: "pax-selector__age-row" }, { children: chunk.map(function (age, ageIndex) {
-                                            var actualIndex = chunkIndex * 2 + ageIndex;
-                                            return (_jsx(AgeSelector, { label: "Infant", value: age, onChange: function (selectedAge) { return handleAgeChange('infantAges', actualIndex, selectedAge); }, ageRange: CHILD_CATEGORY_AGES, required: true }, "infant-".concat(actualIndex)));
-                                        }) }), "infant-chunk-".concat(chunkIndex))); })] }))] }))), _jsx(ClientTypeSelector, { value: room.clientType, onChange: function (val) { return handleFieldChange('clientType', val); } })] }))] })));
+    return (_jsxs("div", __assign({ className: "pax-selector__room-container" }, { children: [_jsxs("div", __assign({ className: "pax-selector__room-header" }, { children: [_jsxs("div", __assign({ className: "pax-selector__room-title" }, { children: [_jsxs(Text, __assign({ size: "lg", variant: "bold", color: "accent", className: "pax-selector__room-name" }, { children: ["Room ", roomNumber] })), _jsx(Icon, { name: "home", size: "md", className: "pax-selector__room-icon" })] })), showRemove && (_jsxs("button", __assign({ type: "button", className: "pax-selector__room-remove", onClick: onRemove, "aria-label": "Remove room ".concat(roomNumber) }, { children: [_jsx(Icon, { name: "close", size: "sm", className: "pax-selector__room-remove-icon" }), _jsx("span", __assign({ className: "pax-selector__room-remove-text" }, { children: "Remove" }))] })))] })), _jsxs("div", __assign({ className: "pax-selector__room-content" }, { children: [_jsxs("div", __assign({ className: "pax-selector__steppers" }, { children: [_jsx(StepperRow, { label: "Adult", value: room.adults, max: maxAdults, onChange: function (val) { return handleFieldChange('adults', val); } }), _jsx(StepperRow, { label: "Teen", value: room.teens, max: maxTeens, onChange: function (val) { return handleFieldChange('teens', val); } }), _jsx(StepperRow, { label: "Child", value: room.children, max: maxChildren, onChange: function (val) { return handleFieldChange('children', val); } }), _jsx(StepperRow, { label: "Infant", value: room.infants, max: maxInfants, onChange: function (val) { return handleFieldChange('infants', val); } })] })), (room.teens > 0 || room.children > 0 || room.infants > 0) && (_jsxs("div", __assign({ className: "pax-selector__age-section" }, { children: [_jsx(Text, __assign({ size: "base", variant: "bold", color: "default", className: "pax-selector__age-section-title" }, { children: "Please specify the age :" })), _jsxs("div", __assign({ className: "pax-selector__age-groups" }, { children: [room.teens > 0 &&
+                                        teenAgeChunks.map(function (chunk, chunkIndex) { return (_jsx("div", __assign({ className: "pax-selector__age-row" }, { children: chunk.map(function (age, ageIndex) {
+                                                var actualIndex = chunkIndex * 2 + ageIndex;
+                                                return (_jsx(AgeSelector, { label: "Teen", value: age, onChange: function (selectedAge) {
+                                                        return handleAgeChange('teenAges', actualIndex, selectedAge);
+                                                    }, ageRange: CHILD_CATEGORY_AGES, required: true }, "teen-".concat(actualIndex)));
+                                            }) }), "teen-chunk-".concat(chunkIndex))); }), room.children > 0 &&
+                                        childAgeChunks.map(function (chunk, chunkIndex) { return (_jsx("div", __assign({ className: "pax-selector__age-row" }, { children: chunk.map(function (age, ageIndex) {
+                                                var actualIndex = chunkIndex * 2 + ageIndex;
+                                                return (_jsx(AgeSelector, { label: "Child", value: age, onChange: function (selectedAge) {
+                                                        return handleAgeChange('childAges', actualIndex, selectedAge);
+                                                    }, ageRange: CHILD_CATEGORY_AGES, required: true }, "child-".concat(actualIndex)));
+                                            }) }), "child-chunk-".concat(chunkIndex))); }), room.infants > 0 &&
+                                        infantAgeChunks.map(function (chunk, chunkIndex) { return (_jsx("div", __assign({ className: "pax-selector__age-row" }, { children: chunk.map(function (age, ageIndex) {
+                                                var actualIndex = chunkIndex * 2 + ageIndex;
+                                                return (_jsx(AgeSelector, { label: "Infant", value: age, onChange: function (selectedAge) {
+                                                        return handleAgeChange('infantAges', actualIndex, selectedAge);
+                                                    }, ageRange: CHILD_CATEGORY_AGES, required: true }, "infant-".concat(actualIndex)));
+                                            }) }), "infant-chunk-".concat(chunkIndex))); })] }))] }))), _jsx(ClientTypeSelector, { value: room.clientType, onChange: function (val) { return handleFieldChange('clientType', val); } })] }))] })));
 };
 var PaxSelector = function (_a) {
     var _b = _a.label, label = _b === void 0 ? 'Number of pax' : _b, value = _a.value, onChange = _a.onChange, onAddRoom = _a.onAddRoom, onDone = _a.onDone, _c = _a.placeholder, placeholder = _c === void 0 ? 'Select pax' : _c, _d = _a.className, className = _d === void 0 ? '' : _d, _e = _a.maxAdults, maxAdults = _e === void 0 ? 10 : _e, _f = _a.maxTeens, maxTeens = _f === void 0 ? 10 : _f, _g = _a.maxChildren, maxChildren = _g === void 0 ? 10 : _g, _h = _a.maxInfants, maxInfants = _h === void 0 ? 10 : _h, _j = _a.showAddRoom, showAddRoom = _j === void 0 ? true : _j, _k = _a.multipleRooms, multipleRooms = _k === void 0 ? false : _k, defaultRooms = _a.defaultRooms, onRoomsChange = _a.onRoomsChange, onRemoveRoom = _a.onRemoveRoom, _l = _a.defaultPaxData, defaultPaxData = _l === void 0 ? DEFAULT_PAX_DATA_WITH_ADULTS : _l;
@@ -249,7 +258,11 @@ var PaxSelector = function (_a) {
     }, [value, multipleRooms]);
     // Initialize with default pax data and trigger onChange on mount
     useEffect(function () {
-        if (!hasInitialized.current && !value && defaultPaxData && !multipleRooms && onChange) {
+        if (!hasInitialized.current &&
+            !value &&
+            defaultPaxData &&
+            !multipleRooms &&
+            onChange) {
             hasInitialized.current = true;
             onChange(defaultPaxData);
         }
@@ -354,9 +367,7 @@ var PaxSelector = function (_a) {
     };
     var getTotalPax = function () {
         if (multipleRooms) {
-            return rooms.reduce(function (total, room) {
-                return total + room.adults + room.teens + room.children + room.infants;
-            }, 0);
+            return rooms.reduce(function (total, room) { return total + room.adults + room.teens + room.children + room.infants; }, 0);
         }
         var adults = internalData.adults, teens = internalData.teens, children = internalData.children, infants = internalData.infants;
         return adults + teens + children + infants;
@@ -371,7 +382,9 @@ var PaxSelector = function (_a) {
     var hasPax = getTotalPax() > 0;
     return (_jsxs("div", __assign({ className: "pax-selector ".concat(className), ref: containerRef }, { children: [_jsxs("button", __assign({ type: "button", className: "pax-selector__trigger", onClick: function () { return setIsOpen(!isOpen); }, "aria-expanded": isOpen, "aria-haspopup": "true" }, { children: [_jsx(Text, __assign({ size: "sm", variant: "regular", className: "pax-selector__label" }, { children: label })), _jsxs("div", __assign({ className: "pax-selector__input ".concat(isOpen ? 'pax-selector__input--active' : '') }, { children: [_jsxs("div", __assign({ className: "pax-selector__input-content" }, { children: [_jsx(Icon, { name: "user-icon", size: "sm", className: "pax-selector__input-icon" }), _jsx("span", __assign({ className: "pax-selector__input-text ".concat(!hasPax ? 'pax-selector__input-placeholder' : '') }, { children: getDisplayText() }))] })), _jsx(Icon, { name: "chevron-down", size: "sm", className: "pax-selector__chevron ".concat(isOpen ? 'pax-selector__chevron--open' : '') })] }))] })), isOpen && (_jsxs("div", __assign({ className: "pax-selector__dropdown" }, { children: [multipleRooms ? (_jsxs(_Fragment, { children: [showAddRoom && (_jsxs("button", __assign({ type: "button", className: "pax-selector__add-room", onClick: handleAddRoom }, { children: [_jsx(Icon, { name: "home", size: "sm", className: "pax-selector__add-room-icon" }), "Add a room", _jsx(Icon, { name: "plus", size: "sm", className: "pax-selector__add-room-icon" })] }))), _jsx("div", __assign({ className: "pax-selector__rooms" }, { children: rooms.map(function (room, index) { return (_jsx(RoomEditor, { room: room, roomNumber: index + 1, showRemove: rooms.length > 1, maxAdults: maxAdults, maxTeens: maxTeens, maxChildren: maxChildren, maxInfants: maxInfants, onChange: function (updatedRoom) { return handleRoomChange(room.roomId, updatedRoom); }, onRemove: function () { return handleRemoveRoom(room.roomId); } }, room.roomId)); }) }))] })) : (
                     /* Single Room Mode */
-                    _jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: "pax-selector__steppers" }, { children: [_jsx(StepperRow, { label: "Adult", value: internalData.adults, max: maxAdults, onChange: function (val) { return handleDataChange('adults', val); } }), _jsx(StepperRow, { label: "Teen", value: internalData.teens, max: maxTeens, onChange: function (val) { return handleDataChange('teens', val); } }), _jsx(StepperRow, { label: "Child", value: internalData.children, max: maxChildren, onChange: function (val) { return handleDataChange('children', val); } }), _jsx(StepperRow, { label: "Infant", value: internalData.infants, max: maxInfants, onChange: function (val) { return handleDataChange('infants', val); } })] })), ((internalData.teens > 0) || (internalData.children > 0) || (internalData.infants > 0)) && (_jsxs("div", __assign({ className: "pax-selector__age-section" }, { children: [_jsx(Text, __assign({ size: "base", variant: "bold", color: "default", className: "pax-selector__age-section-title" }, { children: "Please specify the age :" })), _jsx("div", __assign({ className: "pax-selector__age-groups" }, { children: (function () {
+                    _jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: "pax-selector__steppers" }, { children: [_jsx(StepperRow, { label: "Adult", value: internalData.adults, max: maxAdults, onChange: function (val) { return handleDataChange('adults', val); } }), _jsx(StepperRow, { label: "Teen", value: internalData.teens, max: maxTeens, onChange: function (val) { return handleDataChange('teens', val); } }), _jsx(StepperRow, { label: "Child", value: internalData.children, max: maxChildren, onChange: function (val) { return handleDataChange('children', val); } }), _jsx(StepperRow, { label: "Infant", value: internalData.infants, max: maxInfants, onChange: function (val) { return handleDataChange('infants', val); } })] })), (internalData.teens > 0 ||
+                                internalData.children > 0 ||
+                                internalData.infants > 0) && (_jsxs("div", __assign({ className: "pax-selector__age-section" }, { children: [_jsx(Text, __assign({ size: "base", variant: "bold", color: "default", className: "pax-selector__age-section-title" }, { children: "Please specify the age :" })), _jsx("div", __assign({ className: "pax-selector__age-groups" }, { children: (function () {
                                             var chunkAges = function (ages, category) {
                                                 var chunks = [];
                                                 for (var i = 0; i < ages.length; i += 2) {
@@ -387,16 +400,25 @@ var PaxSelector = function (_a) {
                                                 ages[index] = age;
                                                 handleDataChange(category, ages);
                                             };
-                                            return (_jsxs(_Fragment, { children: [internalData.teens > 0 && teenAgeChunks.map(function (chunk, chunkIndex) { return (_jsx("div", __assign({ className: "pax-selector__age-row" }, { children: chunk.map(function (age, ageIndex) {
-                                                            var actualIndex = chunkIndex * 2 + ageIndex;
-                                                            return (_jsx(AgeSelector, { label: "Teen", value: age, onChange: function (selectedAge) { return handleAgeChange('teenAges', actualIndex, selectedAge); }, ageRange: CHILD_CATEGORY_AGES, required: true }, "teen-".concat(actualIndex)));
-                                                        }) }), "teen-chunk-".concat(chunkIndex))); }), internalData.children > 0 && childAgeChunks.map(function (chunk, chunkIndex) { return (_jsx("div", __assign({ className: "pax-selector__age-row" }, { children: chunk.map(function (age, ageIndex) {
-                                                            var actualIndex = chunkIndex * 2 + ageIndex;
-                                                            return (_jsx(AgeSelector, { label: "Child", value: age, onChange: function (selectedAge) { return handleAgeChange('childAges', actualIndex, selectedAge); }, ageRange: CHILD_CATEGORY_AGES, required: true }, "child-".concat(actualIndex)));
-                                                        }) }), "child-chunk-".concat(chunkIndex))); }), internalData.infants > 0 && infantAgeChunks.map(function (chunk, chunkIndex) { return (_jsx("div", __assign({ className: "pax-selector__age-row" }, { children: chunk.map(function (age, ageIndex) {
-                                                            var actualIndex = chunkIndex * 2 + ageIndex;
-                                                            return (_jsx(AgeSelector, { label: "Infant", value: age, onChange: function (selectedAge) { return handleAgeChange('infantAges', actualIndex, selectedAge); }, ageRange: CHILD_CATEGORY_AGES, required: true }, "infant-".concat(actualIndex)));
-                                                        }) }), "infant-chunk-".concat(chunkIndex))); })] }));
+                                            return (_jsxs(_Fragment, { children: [internalData.teens > 0 &&
+                                                        teenAgeChunks.map(function (chunk, chunkIndex) { return (_jsx("div", __assign({ className: "pax-selector__age-row" }, { children: chunk.map(function (age, ageIndex) {
+                                                                var actualIndex = chunkIndex * 2 + ageIndex;
+                                                                return (_jsx(AgeSelector, { label: "Teen", value: age, onChange: function (selectedAge) {
+                                                                        return handleAgeChange('teenAges', actualIndex, selectedAge);
+                                                                    }, ageRange: CHILD_CATEGORY_AGES, required: true }, "teen-".concat(actualIndex)));
+                                                            }) }), "teen-chunk-".concat(chunkIndex))); }), internalData.children > 0 &&
+                                                        childAgeChunks.map(function (chunk, chunkIndex) { return (_jsx("div", __assign({ className: "pax-selector__age-row" }, { children: chunk.map(function (age, ageIndex) {
+                                                                var actualIndex = chunkIndex * 2 + ageIndex;
+                                                                return (_jsx(AgeSelector, { label: "Child", value: age, onChange: function (selectedAge) {
+                                                                        return handleAgeChange('childAges', actualIndex, selectedAge);
+                                                                    }, ageRange: CHILD_CATEGORY_AGES, required: true }, "child-".concat(actualIndex)));
+                                                            }) }), "child-chunk-".concat(chunkIndex))); }), internalData.infants > 0 &&
+                                                        infantAgeChunks.map(function (chunk, chunkIndex) { return (_jsx("div", __assign({ className: "pax-selector__age-row" }, { children: chunk.map(function (age, ageIndex) {
+                                                                var actualIndex = chunkIndex * 2 + ageIndex;
+                                                                return (_jsx(AgeSelector, { label: "Infant", value: age, onChange: function (selectedAge) {
+                                                                        return handleAgeChange('infantAges', actualIndex, selectedAge);
+                                                                    }, ageRange: CHILD_CATEGORY_AGES, required: true }, "infant-".concat(actualIndex)));
+                                                            }) }), "infant-chunk-".concat(chunkIndex))); })] }));
                                         })() }))] }))), _jsx(ClientTypeSelector, { value: internalData.clientType, onChange: function (val) { return handleDataChange('clientType', val); } })] })), _jsxs("div", __assign({ className: "pax-selector__actions" }, { children: [_jsx("button", __assign({ type: "button", className: "pax-selector__clear-btn", onClick: handleClear }, { children: "Clear Pax" })), _jsx("button", __assign({ type: "button", className: "pax-selector__done-btn", onClick: handleDone }, { children: "Done" }))] }))] })))] })));
 };
 export default PaxSelector;

package/dist/components/ui/popover.js

@@ -33,7 +33,7 @@ function PopoverTrigger(_a) {
 }
 function PopoverContent(_a) {
     var className = _a.className, _b = _a.align, align = _b === void 0 ? 'center' : _b, _c = _a.sideOffset, sideOffset = _c === void 0 ? 4 : _c, props = __rest(_a, ["className", "align", "sideOffset"]);
-    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, __assign({ "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-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 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden border-[var(--color-elevation-state-hover-subtle)]', className) }, props)) }));
+    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, __assign({ "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-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 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden border-[var(--color-elevation-state-hover-subtle)] z-[99999]', className) }, props)) }));
 }
 function PopoverAnchor(_a) {
     var props = __rest(_a, []);

package/dist/index.d.ts

@@ -14,7 +14,11 @@ export { default as Slider } from './components/atoms/Slider/Slider';
 export { default as Spinner } from './components/atoms/Spinner/Spinner';
 export { Heading, Text } from './components/atoms/Typography/Typography';
 export { DateDisplay } from './components/molecules/DateDisplay/DateDisplay';
+export { DocketPrices } from './components/molecules/DocketPrices/DocketPrices';
+export { PriceDisplay } from './components/molecules/PriceDisplay/PriceDisplay';
+export { TransferDocket } from './components/molecules/TransferDocket/TransferDocket';
 export { ActionDropdown, type ActionDropdownItem, } from './components/molecules/ActionDropdown/ActionDropdown';
+export { AddItemButton } from './components/molecules/AddItemButton/AddItemButton';
 export * from './components/molecules/BookingResume';
 export { Breadcrumbs } from './components/molecules/Breadcrumbs/Breadcrumbs';
 export { default as CalendarInput } from './components/molecules/Calendar/CalendarInput';
@@ -39,6 +43,7 @@ export * from './components/molecules/BookingPax';
 export { DetailsClientInfo } from './components/molecules/DetailsInfo/DetailsClient/DetailsClient';
 export { default as TableServiceItem } from './components/molecules/TableServiceItem';
 export * from './components/organisms/Booking';
+export * from './components/organisms/BookingAddItem';
 export { default as CarBookingCard } from './components/organisms/CarBookingCard/CarBookingCard';
 export { CardContainer } from './components/organisms/CardContainer/CardContainer';
 export { default as DateTimePicker } from './components/organisms/DateTimePicker/DateTimePicker';
@@ -85,9 +90,13 @@ export type { TopNavigationProps } from './components/organisms/TopNavigation/To
 export type { TransferLineData, TransferLineProps, TransferType, } from './components/organisms/TransferLine/TransferLine';
 export type { CheckboxProps } from './components/atoms/Checkbox/Checkbox';
 export type { InputProps } from './components/atoms/Inputs/Input/Input';
+export type { AddItemButtonProps } from './components/molecules/AddItemButton/AddItemButton';
 export type { BreadcrumbsItem, BreadcrumbsProps, } from './components/molecules/Breadcrumbs/Breadcrumbs';
 export type { FromToProps } from './components/molecules/FromTo/FromTo';
 export type { SectionTitleProps } from './components/molecules/SectionTitle/SectionTitle';
+export type { DocketPricesProps } from './components/molecules/DocketPrices/DocketPrices';
+export type { PriceDisplayProps } from './components/molecules/PriceDisplay/PriceDisplay';
+export type { TransferDocketProps } from './components/molecules/TransferDocket/TransferDocket';
 export type { DetailsColProps, ItemColProps, RowAccommodationProps, RowExcursionProps, RowTransferProps, } from './components/molecules/TableServiceItem';
 export type { ServiceAccommodationProps } from './components/molecules/TimelineItem/ServiceAccommodation';
 export type { ServiceExcursionProps } from './components/molecules/TimelineItem/ServiceExcursion';

package/dist/index.js

@@ -15,8 +15,12 @@ export { default as Slider } from './components/atoms/Slider/Slider';
 export { default as Spinner } from './components/atoms/Spinner/Spinner';
 export { Heading, Text } from './components/atoms/Typography/Typography';
 export { DateDisplay } from './components/molecules/DateDisplay/DateDisplay';
+export { DocketPrices } from './components/molecules/DocketPrices/DocketPrices';
+export { PriceDisplay } from './components/molecules/PriceDisplay/PriceDisplay';
+export { TransferDocket } from './components/molecules/TransferDocket/TransferDocket';
 // Molecules - Composed components
 export { ActionDropdown, } from './components/molecules/ActionDropdown/ActionDropdown';
+export { AddItemButton } from './components/molecules/AddItemButton/AddItemButton';
 export * from './components/molecules/BookingResume';
 export { Breadcrumbs } from './components/molecules/Breadcrumbs/Breadcrumbs';
 export { default as CalendarInput } from './components/molecules/Calendar/CalendarInput';
@@ -42,6 +46,7 @@ export * from './components/molecules/BookingPax';
 export { DetailsClientInfo } from './components/molecules/DetailsInfo/DetailsClient/DetailsClient';
 export { default as TableServiceItem } from './components/molecules/TableServiceItem';
 export * from './components/organisms/Booking';
+export * from './components/organisms/BookingAddItem';
 export { default as CarBookingCard } from './components/organisms/CarBookingCard/CarBookingCard';
 export { CardContainer } from './components/organisms/CardContainer/CardContainer';
 export { default as DateTimePicker } from './components/organisms/DateTimePicker/DateTimePicker';

package/dist/styles/components/checkbox.css

@@ -2079,7 +2079,8 @@
 .checkbox-container {
   display: inline-flex;
   align-items: center;
-  width: 100%;
+  width: auto;
+  min-height: 33px;
 }
 
 .checkbox-input {
@@ -2103,7 +2104,7 @@
   -webkit-user-select: none;
           user-select: none;
   width: 100%;
-  padding: var(--checkbox-spacing-label-padding, 0.5rem 0.75rem);
+  /* padding: var(--checkbox-spacing-label-padding, 0.5rem 0.75rem); */
   border-radius: var(--checkbox-border-radius, 0.375rem);
   transition: all var(--checkbox-transition-duration, 0.2s)
     var(--checkbox-transition-timing, ease-in-out);
@@ -2117,8 +2118,8 @@
   border-radius: var(--checkbox-size-box-border-radius, 0.125rem);
   background-color: var(--color-white);
   opacity: var(--opacity-opacity-100);
-  top: var(--checkbox-position-top, 0.125rem);
-  left: var(--checkbox-position-left, 0.125rem);
+  /* top: var(--checkbox-position-top, 0.125rem);
+  left: var(--checkbox-position-left, 0.125rem); */
   display: flex;
   align-items: center;
   justify-content: center;