mautourco-components 0.2.118 → 0.2.120

package/dist/components/organisms/TransferLine/TransferLine.js

@@ -19,6 +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 } from "react/jsx-runtime";
+import useTransferAge from '../../../hooks/useTransferAge';
 import React, { useState } from 'react';
 import '../../../styles/components/organism/transfer-line.css';
 import Icon from '../../atoms/Icon/Icon';
@@ -32,6 +33,7 @@ var TransferLine = function (_a) {
     var _k = useState(transferDate), internalTransferDate = _k[0], setInternalTransferDate = _k[1];
     var _l = useState(null), internalPickupPoint = _l[0], setInternalPickupPoint = _l[1];
     var _m = useState(null), internalDropoffPoint = _m[0], setInternalDropoffPoint = _m[1];
+    var _o = useTransferAge(internalPaxData), setIsInvalidPax = _o.setIsInvalidPax, areAllAgesValid = _o.areAllAgesValid;
     // Helper function to get all locations (from options and groups)
     var getAllLocations = function (options, groups) {
         var groupOptions = groups.flatMap(function (group) { return group.options; });
@@ -229,6 +231,7 @@ var TransferLine = function (_a) {
     // Check if inputs are empty (when checkEmpty is true)
     var isPaxEmpty = checkEmpty &&
         (!internalPaxData ||
+            areAllAgesValid ||
             (internalPaxData.adults === 0 &&
                 internalPaxData.teens === 0 &&
                 internalPaxData.children === 0 &&
@@ -251,7 +254,7 @@ var TransferLine = function (_a) {
     };
     var defaultPickupOption = findLocationOption(pickupPoint, 'pickup');
     var defaultDropoffOption = findLocationOption(dropoffPoint, 'dropoff');
-    return (_jsxs("div", { className: "transfer-line transfer-line--".concat(type, " ").concat(disabled ? 'transfer-line--disabled' : '', " ").concat(className), "data-transfer-id": id, children: [showTitle && (_jsxs("div", { className: "transfer-line__header", children: [_jsx(Icon, { name: getTypeIcon(), size: "sm", className: "transfer-line__header-icon" }), _jsx(Text, { size: "sm", variant: "medium", className: "transfer-line__header-label", children: getTypeLabel() })] })), _jsxs("div", { className: "transfer-line__content-container", children: [_jsxs("div", { className: "transfer-line__content", children: [_jsx("div", { className: "transfer-line__field transfer-line__field--pax ".concat(isPaxEmpty ? 'transfer-line__field--error' : ''), children: _jsx(PaxSelector, { label: "Number of pax", value: internalPaxData, onChange: handlePaxChange, placeholder: "2 pax", className: isPaxEmpty ? 'pax-selector--error' : '', disabled: disabled, scrollOnOpen: scrollOnOpen, checkEmpty: checkEmpty, onPaxOpenChange: onPaxOpenChange }) }), _jsxs("div", { className: "transfer-line__field transfer-line__field--date", children: [_jsx(Text, { size: "sm", variant: "regular", className: "transfer-line__field-label", children: "Transfer date" }), _jsx(DateTimePicker, { placeholder: "DD/MM/YYYY", mode: "calendar", iconPosition: "left", numberOfMonths: 1, iconBGFull: false, showChevron: true, onValueChange: handleDateChange, selectionMode: "single", defaultValue: internalTransferDate, inputClassName: "transfer-line__date-picker", state: isDateEmpty ? 'error' : undefined, disabled: disabled, scrollOnOpen: scrollOnOpen })] }), _jsx("div", { className: "transfer-line__field transfer-line__field--pickup", children: _jsx(LocationDropdown, { label: "Pick-up point", options: filterLocations('pickup').options, groups: filterLocations('pickup').groups, selectedValue: (internalPickupPoint === null || internalPickupPoint === void 0 ? void 0 : internalPickupPoint.id) || null, onSelectionChange: handlePickupChange, placeholder: "Select a pick-up point", direction: "pickup", type: type === 'inter-hotel'
+    return (_jsxs("div", { className: "transfer-line transfer-line--".concat(type, " ").concat(disabled ? 'transfer-line--disabled' : '', " ").concat(className), "data-transfer-id": id, children: [showTitle && (_jsxs("div", { className: "transfer-line__header", children: [_jsx(Icon, { name: getTypeIcon(), size: "sm", className: "transfer-line__header-icon" }), _jsx(Text, { size: "sm", variant: "medium", className: "transfer-line__header-label", children: getTypeLabel() })] })), _jsxs("div", { className: "transfer-line__content-container", children: [_jsxs("div", { className: "transfer-line__content", children: [_jsx("div", { className: "transfer-line__field transfer-line__field--pax ".concat(isPaxEmpty ? 'transfer-line__field--error' : ''), children: _jsx(PaxSelector, { label: "Number of pax", value: internalPaxData, onChange: handlePaxChange, placeholder: "2 pax", className: isPaxEmpty ? 'pax-selector--error' : '', disabled: disabled, scrollOnOpen: scrollOnOpen, checkEmpty: checkEmpty, onPaxOpenChange: onPaxOpenChange, onPaxInvalid: function (isInvalid) { return setIsInvalidPax(isInvalid); } }) }), _jsxs("div", { className: "transfer-line__field transfer-line__field--date", children: [_jsx(Text, { size: "sm", variant: "regular", className: "transfer-line__field-label", children: "Transfer date" }), _jsx(DateTimePicker, { placeholder: "DD/MM/YYYY", mode: "calendar", iconPosition: "left", numberOfMonths: 1, iconBGFull: false, showChevron: true, onValueChange: handleDateChange, selectionMode: "single", defaultValue: internalTransferDate, inputClassName: "transfer-line__date-picker", state: isDateEmpty ? 'error' : undefined, disabled: disabled, scrollOnOpen: scrollOnOpen })] }), _jsx("div", { className: "transfer-line__field transfer-line__field--pickup", children: _jsx(LocationDropdown, { label: "Pick-up point", options: filterLocations('pickup').options, groups: filterLocations('pickup').groups, selectedValue: (internalPickupPoint === null || internalPickupPoint === void 0 ? void 0 : internalPickupPoint.id) || null, onSelectionChange: handlePickupChange, placeholder: "Select a pick-up point", direction: "pickup", type: type === 'inter-hotel'
                                         ? 'accommodation'
                                         : type === 'arrival'
                                             ? 'airport-port'

package/dist/hooks/useTransferAge.d.ts

@@ -0,0 +1,5 @@
+import { PaxData } from '../components/organisms/PaxSelector/PaxSelector';
+export default function useTransferAge(internalPaxData?: PaxData): {
+    setIsInvalidPax: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    areAllAgesValid: boolean;
+};

package/dist/hooks/useTransferAge.js

@@ -0,0 +1,26 @@
+import { useState } from 'react';
+export default function useTransferAge(internalPaxData) {
+    var _a = useState(false), isInvalidPax = _a[0], setIsInvalidPax = _a[1];
+    var checkAgeIsValid = function (key) {
+        if (internalPaxData && Array.isArray(internalPaxData[key])) {
+            var age = internalPaxData[key];
+            return age.some(function (age) { return !age; });
+        }
+    };
+    var checkAllAgesAreValid = function () {
+        var _a, _b, _c;
+        if ((_a = internalPaxData === null || internalPaxData === void 0 ? void 0 : internalPaxData.teenAges) === null || _a === void 0 ? void 0 : _a.length) {
+            return checkAgeIsValid('teenAges');
+        }
+        if ((_b = internalPaxData === null || internalPaxData === void 0 ? void 0 : internalPaxData.childAges) === null || _b === void 0 ? void 0 : _b.length) {
+            return checkAgeIsValid('childAges');
+        }
+        if ((_c = internalPaxData === null || internalPaxData === void 0 ? void 0 : internalPaxData.infantAges) === null || _c === void 0 ? void 0 : _c.length) {
+            return checkAgeIsValid('infantAges');
+        }
+    };
+    return {
+        setIsInvalidPax: setIsInvalidPax,
+        areAllAgesValid: checkAllAgesAreValid() || isInvalidPax,
+    };
+}

package/dist/index.d.ts

@@ -98,8 +98,9 @@ export type { DateTimePickerProps } from './components/organisms/DateTimePicker/
 export type { DialogProps, DialogSize } from './components/organisms/Dialog/Dialog';
 export type { FooterProps } from './components/organisms/Footer/Footer';
 export type { DocketDetailsData, DocketServiceType, MultipleQuotationDocketProps, } from './components/organisms/MultipleQuotationDocket';
+export type { ClientType } from './components/organisms/PaxSelector/ClientTypeSelector';
 export { CHILD_CATEGORY_AGES } from './components/organisms/PaxSelector/PaxSelector';
-export type { ClientType, PaxData, PaxSelectorProps, } from './components/organisms/PaxSelector/PaxSelector';
+export type { PaxData, PaxSelectorProps, } from './components/organisms/PaxSelector/PaxSelector';
 export type { RoundTripData, RoundTripProps, RoundTripTransfer, } from './components/organisms/RoundTrip/RoundTrip';
 export type { SearchBarTransferData, SearchBarTransferProps, TransferMode, } from './components/organisms/SearchBarTransfer/SearchBarTransfer';
 export type { TopNavigationProps } from './components/organisms/TopNavigation/TopNavigation';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mautourco-components",
-  "version": "0.2.118",
+  "version": "0.2.120",
   "private": false,
   "description": "Bibliothèque de composants Mautourco pour le redesign",
   "main": "dist/index.js",

package/src/components/molecules/AgeSelector/AgeSelector.tsx

@@ -9,7 +9,7 @@ export interface AgeSelectorProps {
   /** Current selected age value */
   value: number | undefined;
   /** Callback when age changes */
-  onChange: (age: number) => void;
+  onChange: (age: number | undefined) => void;
   /** Available age range */
   ageRange: number[];
   /** Whether the field is required */
@@ -71,7 +71,7 @@ const AgeSelector: React.FC<AgeSelectorProps> = ({
       const numValue = parseInt(newValue, 10);
       if (newValue === '') {
         // Allow empty input - don't update onChange
-        return;
+        return onChange(undefined);
       } else if (!isNaN(numValue) && ageRange.includes(numValue)) {
         onChange(numValue);
       }

package/src/components/organisms/PaxSelector/ClientTypeSelector.tsx

@@ -0,0 +1,83 @@
+import { useEffect, useRef, useState } from 'react';
+import Icon from '../../atoms/Icon/Icon';
+import { Text } from '../../atoms/Typography/Typography';
+
+export type ClientType = 'Standard client' | 'VIP' | 'VVIP' | 'Honeymooners';
+
+interface ClientTypeSelectorProps {
+  value: ClientType;
+  onChange: (value: ClientType) => void;
+}
+
+const CLIENT_TYPES: ClientType[] = ['Standard client', 'VIP', 'VVIP', 'Honeymooners'];
+
+const ClientTypeSelector: React.FC<ClientTypeSelectorProps> = ({ value, onChange }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen]);
+
+  const handleSelect = (type: ClientType) => {
+    onChange(type);
+    setIsOpen(false);
+  };
+
+  return (
+    <div className="pax-selector__client-type">
+      <Text size="sm" variant="regular" className="pax-selector__client-type-label">
+        Client type
+      </Text>
+      <div className="pax-selector__client-type-select" ref={containerRef}>
+        <button
+          type="button"
+          className="pax-selector__client-type-trigger"
+          onClick={() => setIsOpen(!isOpen)}
+          aria-expanded={isOpen}
+          aria-haspopup="listbox">
+          <div className="pax-selector__client-type-content">
+            <Icon name="user-icon" size="sm" className="pax-selector__client-type-icon" />
+            <span className="pax-selector__client-type-text">{value}</span>
+          </div>
+          <Icon
+            name="chevron-down"
+            size="sm"
+            className={`pax-selector__client-type-chevron ${isOpen ? 'pax-selector__client-type-chevron--open' : ''}`}
+          />
+        </button>
+
+        {isOpen && (
+          <div className="pax-selector__client-type-dropdown" role="listbox">
+            {CLIENT_TYPES.map((type) => (
+              <button
+                key={type}
+                type="button"
+                className={`pax-selector__client-type-option ${value === type ? 'pax-selector__client-type-option--selected' : ''}`}
+                onClick={() => handleSelect(type)}
+                role="option"
+                aria-selected={value === type}>
+                <Icon name="user-icon" size="sm" />
+                {type}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ClientTypeSelector;