mautourco-components 0.2.18 → 0.2.20

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

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import { CheckboxProps } from '@radix-ui/react-checkbox';
+import './BookingPaxClient.css';
+export interface BookingPaxClientInfo {
+    firstName: string;
+    lastName: string;
+    age: number;
+    clientType: 'Adult' | 'Teen' | 'Child' | 'Infant';
+    clientId: string;
+}
+export interface BookingPaxClientOptions {
+    clientId: string;
+    checked: CheckboxProps['checked'];
+    selectedIndex: number;
+    selectedPaxIndex?: number;
+    paxCount?: number;
+    selectedClientsInfoIds?: Record<string | number, string[]>;
+    selectedClients?: Record<string | number, BookingPaxClientInfo[]>;
+}
+export interface BookingPaxClientProps {
+    clients: BookingPaxClientInfo[];
+    id: string;
+    selectedClientsInfoIds?: Record<string | number, string[]>;
+    selectedIndex: number;
+    selectedPaxIndex?: number;
+    paxCount?: number;
+    isSubmitted?: boolean;
+    onPaxChange?: (options: BookingPaxClientOptions) => void;
+    onError?: (hasError: boolean) => void;
+}
+export declare const BookingPaxClient: React.FC<BookingPaxClientProps>;

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

@@ -0,0 +1,96 @@
+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 { Text } from '@/src/components/atoms/Typography/Typography';
+import { Checkbox } from '@/src/components/ui/checkbox';
+import useBookingPax from '@/src/hooks/useBookingPax';
+import { cn } from '@/src/lib/utils';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import './BookingPaxClient.css';
+export var BookingPaxClient = function (props) {
+    var clients = props.clients, id = props.id, defaultSelectedClientsInfoIds = props.selectedClientsInfoIds, selectedIndex = props.selectedIndex, _a = props.paxCount, paxCount = _a === void 0 ? 0 : _a, isSubmitted = props.isSubmitted, onPaxChange = props.onPaxChange, onError = props.onError;
+    var _b = useState({}), selectedClientsInfoIds = _b[0], setSelectedClientsInfoIds = _b[1];
+    var isSelectedClient = useBookingPax(selectedClientsInfoIds).isSelectedClient;
+    // Calculate selected count for current index
+    var selectedCount = useMemo(function () { var _a, _b; return (_b = (_a = selectedClientsInfoIds[selectedIndex]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0; }, [selectedClientsInfoIds, selectedIndex]);
+    // Calculate error state using useMemo for better performance
+    var hasError = useMemo(function () {
+        if (!isSubmitted || paxCount === 0) {
+            return false;
+        }
+        // Error if selected count is less than required pax count
+        var isInsufficientSelection = selectedCount < paxCount;
+        // Check if there are unselected clients
+        var hasUnselectedClients = clients.some(function (client) { return !isSelectedClient(selectedIndex, client.clientId); });
+        return isInsufficientSelection && hasUnselectedClients;
+    }, [isSubmitted, paxCount, selectedCount, clients, selectedIndex, isSelectedClient]);
+    var handlePaxChange = useCallback(function (options) {
+        setSelectedClientsInfoIds(function (prev) {
+            var _a, _b, _c;
+            var currentRoomSelection = prev[options.selectedIndex] || [];
+            var currentLength = currentRoomSelection.length;
+            var newState;
+            // If all pax are selected and trying to select another, clear and select only this one
+            if (options.checked && options.paxCount === currentLength) {
+                newState = __assign(__assign({}, prev), (_a = {}, _a[options.selectedIndex] = [options.clientId], _a));
+            }
+            else if (options.checked) {
+                // Add client if checked (prevent duplicate selection)
+                if (currentRoomSelection.includes(options.clientId)) {
+                    return prev; // No change needed
+                }
+                newState = __assign(__assign({}, prev), (_b = {}, _b[options.selectedIndex] = __spreadArray(__spreadArray([], currentRoomSelection, true), [options.clientId], false), _b));
+            }
+            else {
+                // Remove client if unchecked
+                newState = __assign(__assign({}, prev), (_c = {}, _c[options.selectedIndex] = currentRoomSelection.filter(function (id) { return id !== options.clientId; }), _c));
+            }
+            // Call callback with updated state (not stale closure)
+            onPaxChange === null || onPaxChange === void 0 ? void 0 : onPaxChange(__assign(__assign({}, options), { selectedClientsInfoIds: newState }));
+            return newState;
+        });
+    }, [onPaxChange, selectedClientsInfoIds]);
+    // Sync external state prop to internal state
+    useEffect(function () {
+        if (defaultSelectedClientsInfoIds !== undefined) {
+            setSelectedClientsInfoIds(defaultSelectedClientsInfoIds);
+        }
+    }, [defaultSelectedClientsInfoIds]);
+    useEffect(function () {
+        onError === null || onError === void 0 ? void 0 : onError(hasError);
+    }, [hasError, onError]);
+    return (_jsxs("div", __assign({ className: "space-y-2" }, { children: [_jsxs(Text, { children: ["Please confirm the pax which applies on this service (", paxCount, " Pax)", ' ', _jsx(Text, __assign({ color: "state-error", as: "span" }, { children: "*" }))] }), _jsx("div", __assign({ className: cn('booking-pax-client', {
+                    'booking-pax-accom--error': hasError,
+                }) }, { children: clients.map(function (client) {
+                    var isSelected = isSelectedClient(selectedIndex, client.clientId);
+                    var showError = hasError && !isSelected && clients.length !== paxCount;
+                    return (_jsx("div", { children: _jsxs("div", __assign({ className: "flex items-center gap-x-2" }, { children: [_jsx(Checkbox, { "data-error": showError, id: "pc-".concat(id, "-").concat(selectedIndex, "-").concat(client.clientId), checked: isSelected || clients.length === paxCount, disabled: clients.length === paxCount, onCheckedChange: function (checked) {
+                                        handlePaxChange({
+                                            clientId: client.clientId,
+                                            checked: checked,
+                                            paxCount: paxCount,
+                                            selectedIndex: selectedIndex,
+                                        });
+                                    } }), _jsx("label", __assign({ htmlFor: "pc-".concat(id, "-").concat(selectedIndex, "-").concat(client.clientId), className: cn('cursor-pointer', {
+                                        'pointer-events-none': clients.length === paxCount,
+                                    }) }, { children: _jsxs(Text, __assign({ size: "sm", leading: "4", as: "span", color: showError ? 'state-error' : undefined }, { children: [client.firstName, " ", client.lastName, " (", client.clientType, client.clientType !== 'Adult' && " - ".concat(client.age, " years old"), ")"] })) }))] })) }, client.clientId));
+                }) }))] })));
+};

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { BookingPaxClientInfo, BookingPaxClientProps } from './BookingPaxClient/BookingPaxClient';
+export type ExcursionType = 'sea' | 'land' | 'catamaran';
+export interface BookingPaxExcursionProps extends Pick<BookingPaxClientProps, 'selectedClientsInfoIds' | 'onPaxChange'> {
+    clientsInfo: BookingPaxClientInfo[];
+    name: string;
+    type: ExcursionType;
+    isSubmitted?: boolean;
+    paxCount: number;
+    maxPaxCount?: number;
+    onRemarkChange?: (value: string) => void;
+    onError?: (hasError: boolean) => void;
+}
+export declare const BookingPaxExcursion: React.FC<BookingPaxExcursionProps>;

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

@@ -0,0 +1,31 @@
+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 } from "react/jsx-runtime";
+import useBookingPax from '@/src/hooks/useBookingPax';
+import { useEffect } from 'react';
+import { BookingPaxClient, } from './BookingPaxClient/BookingPaxClient';
+import { BookingPaxHeader } from './BookingPaxHeader';
+import { BookingPaxLayout } from './BookingPaxLayout/BookingPaxLayout';
+import { BookingPaxRemarks } from './BookingPaxRemarks';
+var mapType = {
+    sea: 'Sea excursion',
+    land: 'Land excursion',
+    catamaran: 'Cruise excursion',
+};
+export var BookingPaxExcursion = function (props) {
+    var name = props.name, type = props.type, clientsInfo = props.clientsInfo, paxCount = props.paxCount, selectedClientsInfoIds = props.selectedClientsInfoIds, isSubmitted = props.isSubmitted, onPaxChange = props.onPaxChange, onRemarkChange = props.onRemarkChange, onError = props.onError;
+    var _a = useBookingPax(selectedClientsInfoIds), changeOptions = _a.changeOptions, onPaxOptionsChange = _a.onPaxOptionsChange, onSelectedClients = _a.onSelectedClients;
+    useEffect(function () {
+        onSelectedClients(clientsInfo, onPaxChange);
+    }, [changeOptions, onPaxChange]);
+    return (_jsxs(BookingPaxLayout, __assign({ title: "Excursion", icon: "map", className: "booking-pax-accom", header: _jsx(BookingPaxHeader, { children: _jsx(BookingPaxHeader.Name, { name: name, icon: type, location: mapType[type] }) }) }, { children: [_jsx(BookingPaxClient, { id: "excursion", clients: clientsInfo, selectedClientsInfoIds: selectedClientsInfoIds, selectedIndex: 0, paxCount: paxCount, onPaxChange: onPaxOptionsChange, isSubmitted: isSubmitted, onError: onError }), _jsx(BookingPaxRemarks, { onChange: onRemarkChange })] })));
+};

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { IconName } from '../../atoms/Icon/Icon';
+export interface BookingPaxWithNameProps {
+    name: string;
+    icon: IconName;
+    location: string;
+}
+export interface BookingPaxWithLocationProps {
+    from: string;
+    to: string;
+}
+export declare const BookingPaxHeader: {
+    (props: React.PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+    Name: React.FC<BookingPaxWithNameProps>;
+    Location: React.FC<BookingPaxWithLocationProps>;
+};

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

@@ -0,0 +1,28 @@
+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 } from "react/jsx-runtime";
+import Icon from '../../atoms/Icon/Icon';
+import { Text } from '../../atoms/Typography/Typography';
+import TextWithIcon from '../TextWithIcon/TextWithIcon';
+var BookingPaxWithName = function (props) {
+    var name = props.name, icon = props.icon, location = props.location;
+    return (_jsxs("div", __assign({ className: "space-y-1" }, { children: [_jsx(Text, __assign({ variant: "bold", size: "sm", leading: "4" }, { children: name })), _jsx(TextWithIcon, __assign({ icon: icon, textLeading: "4" }, { children: location }))] })));
+};
+var BookingPaxWithLocation = function (props) {
+    var from = props.from, to = props.to;
+    return (_jsxs("div", __assign({ className: "flex items-center gap-x-1" }, { children: [_jsx(Text, __assign({ size: "sm" }, { children: from })), _jsx(Icon, { name: "arrow-right-outline", size: "sm" }), _jsx(Text, __assign({ size: "sm" }, { children: to }))] })));
+};
+export var BookingPaxHeader = function (props) {
+    return _jsx("div", __assign({ className: "booking-pax-header" }, props));
+};
+BookingPaxHeader.Name = BookingPaxWithName;
+BookingPaxHeader.Location = BookingPaxWithLocation;