mautourco-components 0.2.21 → 0.2.23

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/organisms/TabCancellationPolicy/CancellationAccom.d.ts

@@ -1,11 +1,36 @@
 import { HeaderAccomProps } from './HeaderAccom';
 import { Policy } from './PolicyAccom/PolicyAccom';
 export interface CancellationAccomProps extends HeaderAccomProps {
+    /**
+     * The image of the cancellation accommodation.
+     */
     image: string;
+    /**
+     * Whether the cancellation accommodation is on request.
+     */
     isOnRequest?: boolean;
+    /**
+     * The room policies of the cancellation accommodation.
+     */
     roomPolicies: Array<{
         roomName: string;
         policies: Policy[];
     }>;
 }
+/**
+ * CancellationAccom is a component that allows the user to display the cancellation accommodation.
+ *
+ * @example
+ * <CancellationAccom
+ *  hotelName="Hotel Name"
+ *  pax="8 pax"
+ *  dates={['2024-01-01', '2024-01-02']}
+ *  image="/images/accom.png"
+ *  roomPolicies={roomPolicies}
+ *  isOnRequest={false}
+ * />
+ *
+ * @param props - The props for the CancellationAccom component.
+ * @returns The CancellationAccom component.
+ */
 export default function CancellationAccom(props: CancellationAccomProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/organisms/TabCancellationPolicy/CancellationAccom.js

@@ -13,6 +13,22 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import CancellationBody from './CancellationBody';
 import CancellationHeader from './CancellationHeader';
 import DetailsCancellationPolicy from './TabCancellationPolicy';
+/**
+ * CancellationAccom is a component that allows the user to display the cancellation accommodation.
+ *
+ * @example
+ * <CancellationAccom
+ *  hotelName="Hotel Name"
+ *  pax="8 pax"
+ *  dates={['2024-01-01', '2024-01-02']}
+ *  image="/images/accom.png"
+ *  roomPolicies={roomPolicies}
+ *  isOnRequest={false}
+ * />
+ *
+ * @param props - The props for the CancellationAccom component.
+ * @returns The CancellationAccom component.
+ */
 export default function CancellationAccom(props) {
     var hotelName = props.hotelName, pax = props.pax, dates = props.dates, image = props.image, roomPolicies = props.roomPolicies, isOnRequest = props.isOnRequest;
     return (_jsx(DetailsCancellationPolicy.Layout, __assign({ title: "Accommodation", icon: "accom", isOnRequest: isOnRequest, image: image, header: _jsx(CancellationHeader, { children: _jsx(CancellationHeader.Accom, { hotelName: hotelName, pax: pax, dates: dates }) }) }, { children: _jsx(CancellationBody, { children: roomPolicies.map(function (roomPolicy, index) { return (_jsx(CancellationBody.Accom, { roomName: roomPolicy.roomName, policies: roomPolicy.policies }, index)); }) }) })));

package/dist/components/organisms/TabCancellationPolicy/CancellationBody.d.ts

@@ -2,6 +2,30 @@ import React from 'react';
 import PolicyAccom from './PolicyAccom/PolicyAccom';
 import PolicyExcursion from './PolicyExcursion';
 import PolicyTransfer from './PolicyTransfer';
+/**
+ * CancellationBody is a component that allows the user to display the cancellation body.
+ *
+ * @example
+ * <CancellationBody>
+ *  <CancellationBody.Accom
+ *    roomName="Room Name"
+ *    policies={policies}
+ *  />
+ *  <CancellationBody.Excursion
+ *    name="Excursion Name"
+ *    date="2024-01-01"
+ *    pickUpPoint="Pick Up Point"
+ *    policies={policies}
+ *  />
+ *  <CancellationBody.Transfer
+ *    carName="Car Name"
+ *    transferData={transferData}
+ *  />
+ * </CancellationBody>
+ *
+ * @param props - The props for the CancellationBody component.
+ * @returns The CancellationBody component.
+ */
 declare function CancellationBody(props: React.PropsWithChildren): import("react/jsx-runtime").JSX.Element;
 declare namespace CancellationBody {
     var Accom: typeof PolicyAccom;

package/dist/components/organisms/TabCancellationPolicy/CancellationBody.js

@@ -13,6 +13,30 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import PolicyAccom from './PolicyAccom/PolicyAccom';
 import PolicyExcursion from './PolicyExcursion';
 import PolicyTransfer from './PolicyTransfer';
+/**
+ * CancellationBody is a component that allows the user to display the cancellation body.
+ *
+ * @example
+ * <CancellationBody>
+ *  <CancellationBody.Accom
+ *    roomName="Room Name"
+ *    policies={policies}
+ *  />
+ *  <CancellationBody.Excursion
+ *    name="Excursion Name"
+ *    date="2024-01-01"
+ *    pickUpPoint="Pick Up Point"
+ *    policies={policies}
+ *  />
+ *  <CancellationBody.Transfer
+ *    carName="Car Name"
+ *    transferData={transferData}
+ *  />
+ * </CancellationBody>
+ *
+ * @param props - The props for the CancellationBody component.
+ * @returns The CancellationBody component.
+ */
 export default function CancellationBody(props) {
     return _jsx("div", __assign({ className: "cancellation-body" }, props));
 }

package/dist/components/organisms/TabCancellationPolicy/CancellationExcursion.d.ts

@@ -1,8 +1,38 @@
 export interface CancellationExcursionProps {
+    /**
+     * The name of the cancellation excursion.
+     */
     name: string;
+    /**
+     * The date of the cancellation excursion.
+     */
     date: string;
+    /**
+     * The image of the cancellation excursion.
+     */
     image: string;
+    /**
+     * The pick up point of the cancellation excursion.
+     */
     pickUpPoint: string;
+    /**
+     * The policies of the cancellation excursion.
+     */
     policies: string;
 }
+/**
+ * CancellationExcursion is a component that allows the user to display the cancellation excursion.
+ *
+ * @example
+ * <CancellationExcursion
+ *  name="Excursion Name"
+ *  date="2024-01-01"
+ *  image="/images/excursion.png"
+ *  pickUpPoint="Pick Up Point"
+ *  policies="Policies"
+ * />
+ *
+ * @param props - The props for the CancellationExcursion component.
+ * @returns The CancellationExcursion component.
+ */
 export default function CancellationExcursion(props: CancellationExcursionProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/organisms/TabCancellationPolicy/CancellationExcursion.js

@@ -13,6 +13,21 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import CancellationBody from './CancellationBody';
 import CancellationHeader from './CancellationHeader';
 import DetailsCancellationPolicy from './TabCancellationPolicy';
+/**
+ * CancellationExcursion is a component that allows the user to display the cancellation excursion.
+ *
+ * @example
+ * <CancellationExcursion
+ *  name="Excursion Name"
+ *  date="2024-01-01"
+ *  image="/images/excursion.png"
+ *  pickUpPoint="Pick Up Point"
+ *  policies="Policies"
+ * />
+ *
+ * @param props - The props for the CancellationExcursion component.
+ * @returns The CancellationExcursion component.
+ */
 export default function CancellationExcursion(props) {
     var name = props.name, date = props.date, image = props.image, pickUpPoint = props.pickUpPoint, policies = props.policies;
     return (_jsx(DetailsCancellationPolicy.Layout, __assign({ title: "Excursion", icon: "map", isOnRequest: false, image: image, header: _jsx(CancellationHeader, { children: _jsx(CancellationHeader.Excursion, { name: name, date: date }) }) }, { children: _jsx(CancellationBody, { children: _jsx(CancellationBody.Excursion, { pickUpPoint: pickUpPoint, policies: policies }) }) })));

package/dist/components/organisms/TabCancellationPolicy/CancellationHeader.d.ts

@@ -2,6 +2,29 @@
 import HeaderAccom from './HeaderAccom';
 import HeaderExcursion from './HeaderExcursion';
 import HeaderTransfer from './HeaderExcursion/HeaderTransfer';
+/**
+ * CancellationHeader is a component that allows the user to display the cancellation header.
+ *
+ * @example
+ * <CancellationHeader>
+ *  <CancellationHeader.Accom
+ *    hotelName="Hotel Name"
+ *    pax="8 pax"
+ *    dates={['2024-01-01', '2024-01-02']}
+ *  />
+ *  <CancellationHeader.Excursion
+ *    name="Excursion Name"
+ *    date="2024-01-01"
+ *  />
+ *  <CancellationHeader.Transfer
+ *    carName="Car Name"
+ *    transferData={transferData}
+ *  />
+ * </CancellationHeader>
+ *
+ * @param props - The props for the CancellationHeader component.
+ * @returns The CancellationHeader component.
+ */
 declare function CancellationHeader(props: React.PropsWithChildren): import("react/jsx-runtime").JSX.Element;
 declare namespace CancellationHeader {
     var Accom: typeof HeaderAccom;

package/dist/components/organisms/TabCancellationPolicy/CancellationHeader.js

@@ -13,6 +13,29 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import HeaderAccom from './HeaderAccom';
 import HeaderExcursion from './HeaderExcursion';
 import HeaderTransfer from './HeaderExcursion/HeaderTransfer';
+/**
+ * CancellationHeader is a component that allows the user to display the cancellation header.
+ *
+ * @example
+ * <CancellationHeader>
+ *  <CancellationHeader.Accom
+ *    hotelName="Hotel Name"
+ *    pax="8 pax"
+ *    dates={['2024-01-01', '2024-01-02']}
+ *  />
+ *  <CancellationHeader.Excursion
+ *    name="Excursion Name"
+ *    date="2024-01-01"
+ *  />
+ *  <CancellationHeader.Transfer
+ *    carName="Car Name"
+ *    transferData={transferData}
+ *  />
+ * </CancellationHeader>
+ *
+ * @param props - The props for the CancellationHeader component.
+ * @returns The CancellationHeader component.
+ */
 export default function CancellationHeader(props) {
     return _jsx("div", __assign({ className: "cancellation-header" }, props));
 }

package/dist/components/organisms/TabCancellationPolicy/CancellationTransfer.d.ts

@@ -1,7 +1,29 @@
 import { TransferData } from './HeaderExcursion/HeaderTransfer';
 export interface CancellationTransferProps {
+    /**
+     * The image of the cancellation transfer.
+     */
     image: string;
+    /**
+     * The car name of the cancellation transfer.
+     */
     carName: string;
+    /**
+     * The transfer data of the cancellation transfer.
+     */
     transferData: TransferData[];
 }
+/**
+ * CancellationTransfer is a component that allows the user to display the cancellation transfer.
+ *
+ * @example
+ * <CancellationTransfer
+ *  image="/images/transfer.png"
+ *  carName="Car Name"
+ *  transferData={transferData}
+ * />
+ *
+ * @param props - The props for the CancellationTransfer component.
+ * @returns The CancellationTransfer component.
+ */
 export default function CancellationTransfer(props: CancellationTransferProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/organisms/TabCancellationPolicy/CancellationTransfer.js

@@ -13,6 +13,19 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import CancellationBody from './CancellationBody';
 import CancellationHeader from './CancellationHeader';
 import DetailsCancellationPolicy from './TabCancellationPolicy';
+/**
+ * CancellationTransfer is a component that allows the user to display the cancellation transfer.
+ *
+ * @example
+ * <CancellationTransfer
+ *  image="/images/transfer.png"
+ *  carName="Car Name"
+ *  transferData={transferData}
+ * />
+ *
+ * @param props - The props for the CancellationTransfer component.
+ * @returns The CancellationTransfer component.
+ */
 export default function CancellationTransfer(props) {
     var image = props.image, carName = props.carName, transferData = props.transferData;
     return (_jsx(DetailsCancellationPolicy.Layout, __assign({ title: "Transfer", icon: "car", isOnRequest: false, image: image, header: _jsx(CancellationHeader, { children: _jsx(CancellationHeader.Transfer, { data: transferData }) }) }, { children: _jsx(CancellationBody, { children: _jsx(CancellationBody.Transfer, { carName: carName }) }) })));

package/dist/components/organisms/TabCancellationPolicy/HeaderAccom.d.ts

@@ -1,6 +1,28 @@
 export interface HeaderAccomProps {
+    /**
+     * The hotel name of the header accommodation.
+     */
     hotelName: string;
+    /**
+     * The pax of the header accommodation.
+     */
     pax: number | string;
+    /**
+     * The dates of the header accommodation.
+     */
     dates: string[];
 }
+/**
+ * HeaderAccom is a component that allows the user to display the header accommodation.
+ *
+ * @example
+ * <HeaderAccom
+ *  hotelName="Hotel Name"
+ *  pax="8 pax"
+ *  dates={['2024-01-01', '2024-01-02']}
+ * />
+ *
+ * @param props - The props for the HeaderAccom component.
+ * @returns
+ */
 export default function HeaderAccom(props: HeaderAccomProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/organisms/TabCancellationPolicy/HeaderAccom.js

@@ -14,6 +14,19 @@ import useStays from '@/src/hooks/useStays';
 import { DateDisplay } from '../../molecules/DateDisplay/DateDisplay';
 import { ServiceTitle } from '../../molecules/ServiceTitle/ServiceTitle';
 import TextWithIcon from '../../molecules/TextWithIcon/TextWithIcon';
+/**
+ * HeaderAccom is a component that allows the user to display the header accommodation.
+ *
+ * @example
+ * <HeaderAccom
+ *  hotelName="Hotel Name"
+ *  pax="8 pax"
+ *  dates={['2024-01-01', '2024-01-02']}
+ * />
+ *
+ * @param props - The props for the HeaderAccom component.
+ * @returns
+ */
 export default function HeaderAccom(props) {
     var hotelName = props.hotelName, pax = props.pax, dates = props.dates;
     var stay = useStays(dates);

package/dist/components/organisms/TabCancellationPolicy/HeaderExcursion.d.ts

@@ -1,5 +1,23 @@
 export interface HeaderExcursionProps {
+    /**
+     * The name of the header excursion.
+     */
     name: string;
+    /**
+     * The date of the header excursion.
+     */
     date: string;
 }
+/**
+ * HeaderExcursion is a component that allows the user to display the header excursion.
+ *
+ * @example
+ * <HeaderExcursion
+ *  name="Excursion Name"
+ *  date="2024-01-01"
+ * />
+ *
+ * @param props - The props for the HeaderExcursion component.
+ * @returns The HeaderExcursion component.
+ */
 export default function HeaderExcursion(props: HeaderExcursionProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/organisms/TabCancellationPolicy/HeaderExcursion.js

@@ -1,6 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DateDisplay } from '../../molecules/DateDisplay/DateDisplay';
 import { ServiceTitle } from '../../molecules/ServiceTitle/ServiceTitle';
+/**
+ * HeaderExcursion is a component that allows the user to display the header excursion.
+ *
+ * @example
+ * <HeaderExcursion
+ *  name="Excursion Name"
+ *  date="2024-01-01"
+ * />
+ *
+ * @param props - The props for the HeaderExcursion component.
+ * @returns The HeaderExcursion component.
+ */
 export default function HeaderExcursion(props) {
     var name = props.name, date = props.date;
     return (_jsxs("div", { children: [_jsx(ServiceTitle, { title: name, textSize: "sm" }), _jsx(DateDisplay, { dates: [date], arrowSize: "xs", calendarSize: "xs" })] }));

package/dist/components/organisms/TabCancellationPolicy/PolicyAccom/PolicyAccom.css

@@ -2081,6 +2081,13 @@
   margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
 }
 
+
+.policy-accom {
+  .chip__label {
+    column-gap: 1rem;
+  }
+}
+
 .policy-accom__period {
   display: inline-flex;
   align-items: center;

package/dist/components/organisms/TabCancellationPolicy/PolicyAccom/PolicyAccom.js

@@ -10,6 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import Chip from '@/src/components/atoms/Chip/Chip';
 import { Fragment } from 'react';
 import { Text } from '../../../atoms/Typography/Typography';
 import { DateDisplay } from '../../../molecules/DateDisplay/DateDisplay';
@@ -17,5 +18,5 @@ import TextWithIcon from '../../../molecules/TextWithIcon/TextWithIcon';
 import './PolicyAccom.css';
 export default function PolicyAccom(props) {
     var roomName = props.roomName, policies = props.policies, index = props.index;
-    return (_jsxs("div", __assign({ className: "policy-accom" }, { children: [_jsxs("div", __assign({ className: "grid gap-y-1" }, { children: [_jsxs(TextWithIcon, __assign({ icon: "accom" }, { children: ["Room ", index !== undefined && index + 1] })), _jsx(Text, __assign({ size: "sm" }, { children: roomName }))] })), policies.map(function (policy, index) { return (_jsxs(Fragment, { children: [_jsxs(Text, __assign({ size: "xs", variant: "medium", leading: "4", className: "policy-accom__period" }, { children: ["Policy period applies", ' ', _jsx(DateDisplay, { dates: [policy.ValidFrom, policy.ValidTo], textSize: "xs" })] })), _jsxs("div", __assign({ className: "space-y-2" }, { children: [_jsxs(Text, __assign({ variant: "bold", size: "xs", leading: "4" }, { children: [policy.Value, " % of total price"] })), _jsx(Text, __assign({ size: "xs", leading: "4" }, { children: policy.Description }))] }))] }, "policy-".concat(index))); })] })));
+    return (_jsxs("div", __assign({ className: "policy-accom" }, { children: [_jsxs("div", __assign({ className: "grid gap-y-1" }, { children: [_jsxs(TextWithIcon, __assign({ icon: "accom" }, { children: ["Room ", index !== undefined && index + 1] })), _jsx(Text, __assign({ size: "sm" }, { children: roomName }))] })), policies.map(function (policy, index) { return (_jsxs(Fragment, { children: [_jsxs(Chip, __assign({ type: "outline", color: "brand", isBlackText: true }, { children: ["Policy period applies", ' ', _jsx(DateDisplay, { dates: [policy.ValidFrom, policy.ValidTo], textSize: "xs" })] })), _jsxs("div", __assign({ className: "space-y-2" }, { children: [_jsxs(Text, __assign({ variant: "bold", size: "xs", leading: "4" }, { children: [policy.Value, " % of total price"] })), _jsx(Text, __assign({ size: "xs", leading: "4" }, { children: policy.Description }))] }))] }, "policy-".concat(index))); })] })));
 }

package/dist/components/organisms/TabCancellationPolicy/PolicyExcursion.d.ts

@@ -1,5 +1,23 @@
 export interface PolicyExcursionProps {
+    /**
+     * The pick up point of the policy excursion.
+     */
     pickUpPoint: string;
+    /**
+     * The policies of the policy excursion.
+     */
     policies: string;
 }
+/**
+ * PolicyExcursion is a component that allows the user to display the policy excursion.
+ *
+ * @example
+ * <PolicyExcursion
+ *  pickUpPoint="Pick Up Point"
+ *  policies="Policies"
+ * />
+ *
+ * @param props - The props for the PolicyExcursion component.
+ * @returns
+ */
 export default function PolicyExcursion(props: PolicyExcursionProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/organisms/TabCancellationPolicy/PolicyExcursion.js

@@ -11,6 +11,18 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Text } from '../../atoms/Typography/Typography';
+/**
+ * PolicyExcursion is a component that allows the user to display the policy excursion.
+ *
+ * @example
+ * <PolicyExcursion
+ *  pickUpPoint="Pick Up Point"
+ *  policies="Policies"
+ * />
+ *
+ * @param props - The props for the PolicyExcursion component.
+ * @returns
+ */
 export default function PolicyExcursion(props) {
     var pickUpPoint = props.pickUpPoint, policies = props.policies;
     return (_jsxs("div", __assign({ className: "policy-excursion space-y-6" }, { children: [_jsxs("div", __assign({ className: "space-y-2" }, { children: [_jsx(Text, __assign({ variant: "bold", size: "xs", leading: "4" }, { children: "Pick-up point:" })), _jsx(Text, __assign({ size: "xs", leading: "4" }, { children: pickUpPoint }))] })), _jsx(Text, __assign({ size: "xs", leading: "4" }, { children: policies }))] })));