mautourco-components 0.2.21 → 0.2.23

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

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import Icon from '../../atoms/Icon/Icon';
 import { Text } from '../../atoms/Typography/Typography';
 
@@ -18,6 +18,7 @@ export interface PaxData {
   childAges?: number[];
   /** Ages for infants (1-18 years) */
   infantAges?: number[];
+  /** Client type */
   clientType: ClientType;
 }
 
@@ -100,9 +101,17 @@ interface AgeSelectorProps {
   required?: boolean;
 }
 
-const AgeSelector: React.FC<AgeSelectorProps> = ({ label, value, onChange, ageRange, required }) => {
+const AgeSelector: React.FC<AgeSelectorProps> = ({
+  label,
+  value,
+  onChange,
+  ageRange,
+  required,
+}) => {
   const [isOpen, setIsOpen] = useState(false);
-  const [inputValue, setInputValue] = useState<string>(value !== undefined ? value.toString() : '');
+  const [inputValue, setInputValue] = useState<string>(
+    value !== undefined ? value.toString() : ''
+  );
   const containerRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -129,11 +138,11 @@ const AgeSelector: React.FC<AgeSelectorProps> = ({ label, value, onChange, ageRa
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = e.target.value;
-    
+
     // Only allow numeric input or empty string
     if (newValue === '' || /^\d+$/.test(newValue)) {
       setInputValue(newValue);
-      
+
       // Only update if it's a valid number within range
       const numValue = parseInt(newValue, 10);
       if (newValue === '') {
@@ -178,7 +187,7 @@ const AgeSelector: React.FC<AgeSelectorProps> = ({ label, value, onChange, ageRa
     setIsOpen(!isOpen);
   };
 
-  const ageOptions = ageRange.map(age => age.toString());
+  const ageOptions = ageRange.map((age) => age.toString());
   const displayValue = inputValue || undefined;
 
   return (
@@ -187,8 +196,9 @@ const AgeSelector: React.FC<AgeSelectorProps> = ({ label, value, onChange, ageRa
         {label}
         {required && <span className="pax-selector__age-required"> *</span>}
       </Text>
-        <div className="dropdown-container pax-selector__age-dropdown-container">
-        <div className={`dropdown-input ${isOpen ? 'dropdown-input--open pax-selector__age-dropdown-input--open' : ''} ${value !== undefined ? 'dropdown-input--selected' : 'dropdown-input--default'} pax-selector__age-dropdown-input`}>
+      <div className="dropdown-container pax-selector__age-dropdown-container">
+        <div
+          className={`dropdown-input ${isOpen ? 'dropdown-input--open pax-selector__age-dropdown-input--open' : ''} ${value !== undefined ? 'dropdown-input--selected' : 'dropdown-input--default'} pax-selector__age-dropdown-input`}>
           <input
             ref={inputRef}
             type="text"
@@ -201,12 +211,12 @@ const AgeSelector: React.FC<AgeSelectorProps> = ({ label, value, onChange, ageRa
             onFocus={() => setIsOpen(false)}
             placeholder="--"
             aria-label={`${label} age`}
-            style={{ 
-              background: 'transparent', 
-              border: 'none', 
+            style={{
+              background: 'transparent',
+              border: 'none',
               outline: 'none',
               width: '100%',
-              cursor: 'text'
+              cursor: 'text',
             }}
           />
           <button
@@ -226,13 +236,12 @@ const AgeSelector: React.FC<AgeSelectorProps> = ({ label, value, onChange, ageRa
               cursor: 'pointer',
               padding: 0,
               display: 'flex',
-              alignItems: 'center'
-            }}
-          >
-            <Icon 
-              name="chevron-down" 
-              size="sm" 
-              className="dropdown-input__icon dropdown-input__icon--chevron" 
+              alignItems: 'center',
+            }}>
+            <Icon
+              name="chevron-down"
+              size="sm"
+              className="dropdown-input__icon dropdown-input__icon--chevron"
             />
           </button>
         </div>
@@ -244,8 +253,7 @@ const AgeSelector: React.FC<AgeSelectorProps> = ({ label, value, onChange, ageRa
                 className={`dropdown-option ${value?.toString() === age ? 'dropdown-option--selected' : ''}`}
                 onClick={() => handleSelect(age)}
                 role="option"
-                aria-selected={value?.toString() === age}
-              >
+                aria-selected={value?.toString() === age}>
                 {age}
               </div>
             ))}
@@ -264,12 +272,12 @@ interface StepperRowProps {
   onChange: (value: number) => void;
 }
 
-const StepperRow: React.FC<StepperRowProps> = ({ 
-  label, 
-  value, 
-  min = 0, 
-  max = 99, 
-  onChange 
+const StepperRow: React.FC<StepperRowProps> = ({
+  label,
+  value,
+  min = 0,
+  max = 99,
+  onChange,
 }) => {
   const handleDecrement = () => {
     if (value > min) {
@@ -285,7 +293,11 @@ const StepperRow: React.FC<StepperRowProps> = ({
 
   return (
     <div className="pax-selector__stepper">
-      <Text size="base" variant="bold" color="default" className="pax-selector__stepper-label">
+      <Text
+        size="base"
+        variant="bold"
+        color="default"
+        className="pax-selector__stepper-label">
         {label}
       </Text>
       <div className="pax-selector__stepper-controls">
@@ -294,8 +306,7 @@ const StepperRow: React.FC<StepperRowProps> = ({
           className="pax-selector__stepper-btn"
           onClick={handleDecrement}
           disabled={value <= min}
-          aria-label={`Decrease ${label}`}
-        >
+          aria-label={`Decrease ${label}`}>
           <Icon name="minus" size="sm" />
         </button>
         <span className="pax-selector__stepper-count">{value}</span>
@@ -304,8 +315,7 @@ const StepperRow: React.FC<StepperRowProps> = ({
           className="pax-selector__stepper-btn"
           onClick={handleIncrement}
           disabled={value >= max}
-          aria-label={`Increase ${label}`}
-        >
+          aria-label={`Increase ${label}`}>
           <Icon name="plus" size="sm" />
         </button>
       </div>
@@ -354,19 +364,18 @@ const ClientTypeSelector: React.FC<ClientTypeSelectorProps> = ({ value, onChange
           className="pax-selector__client-type-trigger"
           onClick={() => setIsOpen(!isOpen)}
           aria-expanded={isOpen}
-          aria-haspopup="listbox"
-        >
+          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' : ''}`} 
+          <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) => (
@@ -376,8 +385,7 @@ const ClientTypeSelector: React.FC<ClientTypeSelectorProps> = ({ value, onChange
                 className={`pax-selector__client-type-option ${value === type ? 'pax-selector__client-type-option--selected' : ''}`}
                 onClick={() => handleSelect(type)}
                 role="option"
-                aria-selected={value === type}
-              >
+                aria-selected={value === type}>
                 <Icon name="user-icon" size="sm" />
                 {type}
               </button>
@@ -412,11 +420,18 @@ const RoomEditor: React.FC<RoomEditorProps> = ({
   onChange,
   onRemove,
 }) => {
-  const handleFieldChange = (field: keyof PaxData, value: number | ClientType | number[]) => {
+  const handleFieldChange = (
+    field: keyof PaxData,
+    value: number | ClientType | number[]
+  ) => {
     onChange({ ...room, [field]: value });
   };
 
-  const handleAgeChange = (category: 'teenAges' | 'childAges' | 'infantAges', index: number, age: number) => {
+  const handleAgeChange = (
+    category: 'teenAges' | 'childAges' | 'infantAges',
+    index: number,
+    age: number
+  ) => {
     const ages = [...(room[category] || [])];
     ages[index] = age;
     handleFieldChange(category, ages);
@@ -430,21 +445,30 @@ const RoomEditor: React.FC<RoomEditorProps> = ({
 
     // Adjust teen ages array
     if (teenAges.length < room.teens) {
-      handleFieldChange('teenAges', [...teenAges, ...Array(room.teens - teenAges.length).fill(undefined)]);
+      handleFieldChange('teenAges', [
+        ...teenAges,
+        ...Array(room.teens - teenAges.length).fill(undefined),
+      ]);
     } else if (teenAges.length > room.teens) {
       handleFieldChange('teenAges', teenAges.slice(0, room.teens));
     }
 
     // Adjust child ages array
     if (childAges.length < room.children) {
-      handleFieldChange('childAges', [...childAges, ...Array(room.children - childAges.length).fill(undefined)]);
+      handleFieldChange('childAges', [
+        ...childAges,
+        ...Array(room.children - childAges.length).fill(undefined),
+      ]);
     } else if (childAges.length > room.children) {
       handleFieldChange('childAges', childAges.slice(0, room.children));
     }
 
     // Adjust infant ages array
     if (infantAges.length < room.infants) {
-      handleFieldChange('infantAges', [...infantAges, ...Array(room.infants - infantAges.length).fill(undefined)]);
+      handleFieldChange('infantAges', [
+        ...infantAges,
+        ...Array(room.infants - infantAges.length).fill(undefined),
+      ]);
     } else if (infantAges.length > room.infants) {
       handleFieldChange('infantAges', infantAges.slice(0, room.infants));
     }
@@ -467,7 +491,11 @@ const RoomEditor: React.FC<RoomEditorProps> = ({
     <div className="pax-selector__room-container">
       <div className="pax-selector__room-header">
         <div className="pax-selector__room-title">
-          <Text size="lg" variant="bold" color="accent" className="pax-selector__room-name">
+          <Text
+            size="lg"
+            variant="bold"
+            color="accent"
+            className="pax-selector__room-name">
             Room {roomNumber}
           </Text>
           <Icon name="home" size="md" className="pax-selector__room-icon" />
@@ -477,8 +505,7 @@ const RoomEditor: React.FC<RoomEditorProps> = ({
             type="button"
             className="pax-selector__room-remove"
             onClick={onRemove}
-            aria-label={`Remove room ${roomNumber}`}
-          >
+            aria-label={`Remove room ${roomNumber}`}>
             <Icon name="close" size="sm" className="pax-selector__room-remove-icon" />
             <span className="pax-selector__room-remove-text">Remove</span>
           </button>
@@ -514,69 +541,86 @@ const RoomEditor: React.FC<RoomEditorProps> = ({
         </div>
 
         {/* Age specification section */}
-        {((room.teens > 0) || (room.children > 0) || (room.infants > 0)) && (
+        {(room.teens > 0 || room.children > 0 || room.infants > 0) && (
           <div className="pax-selector__age-section">
-            <Text size="base" variant="bold" color="default" className="pax-selector__age-section-title">
+            <Text
+              size="base"
+              variant="bold"
+              color="default"
+              className="pax-selector__age-section-title">
               Please specify the age :
             </Text>
-            
+
             <div className="pax-selector__age-groups">
               {/* Teen ages */}
-              {room.teens > 0 && teenAgeChunks.map((chunk, chunkIndex) => (
-                <div key={`teen-chunk-${chunkIndex}`} className="pax-selector__age-row">
-                  {chunk.map((age, ageIndex) => {
-                    const actualIndex = chunkIndex * 2 + ageIndex;
-                    return (
-                      <AgeSelector
-                        key={`teen-${actualIndex}`}
-                        label="Teen"
-                        value={age}
-                        onChange={(selectedAge) => handleAgeChange('teenAges', actualIndex, selectedAge)}
-                        ageRange={CHILD_CATEGORY_AGES}
-                        required
-                      />
-                    );
-                  })}
-                </div>
-              ))}
+              {room.teens > 0 &&
+                teenAgeChunks.map((chunk, chunkIndex) => (
+                  <div key={`teen-chunk-${chunkIndex}`} className="pax-selector__age-row">
+                    {chunk.map((age, ageIndex) => {
+                      const actualIndex = chunkIndex * 2 + ageIndex;
+                      return (
+                        <AgeSelector
+                          key={`teen-${actualIndex}`}
+                          label="Teen"
+                          value={age}
+                          onChange={(selectedAge) =>
+                            handleAgeChange('teenAges', actualIndex, selectedAge)
+                          }
+                          ageRange={CHILD_CATEGORY_AGES}
+                          required
+                        />
+                      );
+                    })}
+                  </div>
+                ))}
 
               {/* Child ages */}
-              {room.children > 0 && childAgeChunks.map((chunk, chunkIndex) => (
-                <div key={`child-chunk-${chunkIndex}`} className="pax-selector__age-row">
-                  {chunk.map((age, ageIndex) => {
-                    const actualIndex = chunkIndex * 2 + ageIndex;
-                    return (
-                      <AgeSelector
-                        key={`child-${actualIndex}`}
-                        label="Child"
-                        value={age}
-                        onChange={(selectedAge) => handleAgeChange('childAges', actualIndex, selectedAge)}
-                        ageRange={CHILD_CATEGORY_AGES}
-                        required
-                      />
-                    );
-                  })}
-                </div>
-              ))}
+              {room.children > 0 &&
+                childAgeChunks.map((chunk, chunkIndex) => (
+                  <div
+                    key={`child-chunk-${chunkIndex}`}
+                    className="pax-selector__age-row">
+                    {chunk.map((age, ageIndex) => {
+                      const actualIndex = chunkIndex * 2 + ageIndex;
+                      return (
+                        <AgeSelector
+                          key={`child-${actualIndex}`}
+                          label="Child"
+                          value={age}
+                          onChange={(selectedAge) =>
+                            handleAgeChange('childAges', actualIndex, selectedAge)
+                          }
+                          ageRange={CHILD_CATEGORY_AGES}
+                          required
+                        />
+                      );
+                    })}
+                  </div>
+                ))}
 
               {/* Infant ages */}
-              {room.infants > 0 && infantAgeChunks.map((chunk, chunkIndex) => (
-                <div key={`infant-chunk-${chunkIndex}`} className="pax-selector__age-row">
-                  {chunk.map((age, ageIndex) => {
-                    const actualIndex = chunkIndex * 2 + ageIndex;
-                    return (
-                      <AgeSelector
-                        key={`infant-${actualIndex}`}
-                        label="Infant"
-                        value={age}
-                        onChange={(selectedAge) => handleAgeChange('infantAges', actualIndex, selectedAge)}
-                        ageRange={CHILD_CATEGORY_AGES}
-                        required
-                      />
-                    );
-                  })}
-                </div>
-              ))}
+              {room.infants > 0 &&
+                infantAgeChunks.map((chunk, chunkIndex) => (
+                  <div
+                    key={`infant-chunk-${chunkIndex}`}
+                    className="pax-selector__age-row">
+                    {chunk.map((age, ageIndex) => {
+                      const actualIndex = chunkIndex * 2 + ageIndex;
+                      return (
+                        <AgeSelector
+                          key={`infant-${actualIndex}`}
+                          label="Infant"
+                          value={age}
+                          onChange={(selectedAge) =>
+                            handleAgeChange('infantAges', actualIndex, selectedAge)
+                          }
+                          ageRange={CHILD_CATEGORY_AGES}
+                          required
+                        />
+                      );
+                    })}
+                  </div>
+                ))}
             </div>
           </div>
         )}
@@ -610,7 +654,9 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
   defaultPaxData = DEFAULT_PAX_DATA_WITH_ADULTS,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
-  const [internalData, setInternalData] = useState<PaxData>(value || defaultPaxData || DEFAULT_PAX_DATA);
+  const [internalData, setInternalData] = useState<PaxData>(
+    value || defaultPaxData || DEFAULT_PAX_DATA
+  );
   const [rooms, setRooms] = useState<RoomData[]>(
     defaultRooms || [{ ...DEFAULT_PAX_DATA, roomId: '1' }]
   );
@@ -626,7 +672,13 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
 
   // Initialize with default pax data and trigger onChange on mount
   useEffect(() => {
-    if (!hasInitialized.current && !value && defaultPaxData && !multipleRooms && onChange) {
+    if (
+      !hasInitialized.current &&
+      !value &&
+      defaultPaxData &&
+      !multipleRooms &&
+      onChange
+    ) {
       hasInitialized.current = true;
       onChange(defaultPaxData);
     }
@@ -644,7 +696,10 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
 
       // Adjust teen ages array
       if (teenAges.length < internalData.teens) {
-        updatedData.teenAges = [...teenAges, ...Array(internalData.teens - teenAges.length).fill(undefined)];
+        updatedData.teenAges = [
+          ...teenAges,
+          ...Array(internalData.teens - teenAges.length).fill(undefined),
+        ];
         needsUpdate = true;
       } else if (teenAges.length > internalData.teens) {
         updatedData.teenAges = teenAges.slice(0, internalData.teens);
@@ -653,7 +708,10 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
 
       // Adjust child ages array
       if (childAges.length < internalData.children) {
-        updatedData.childAges = [...childAges, ...Array(internalData.children - childAges.length).fill(undefined)];
+        updatedData.childAges = [
+          ...childAges,
+          ...Array(internalData.children - childAges.length).fill(undefined),
+        ];
         needsUpdate = true;
       } else if (childAges.length > internalData.children) {
         updatedData.childAges = childAges.slice(0, internalData.children);
@@ -662,7 +720,10 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
 
       // Adjust infant ages array
       if (infantAges.length < internalData.infants) {
-        updatedData.infantAges = [...infantAges, ...Array(internalData.infants - infantAges.length).fill(undefined)];
+        updatedData.infantAges = [
+          ...infantAges,
+          ...Array(internalData.infants - infantAges.length).fill(undefined),
+        ];
         needsUpdate = true;
       } else if (infantAges.length > internalData.infants) {
         updatedData.infantAges = infantAges.slice(0, internalData.infants);
@@ -694,7 +755,10 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
     };
   }, [isOpen]);
 
-  const handleDataChange = (field: keyof PaxData, newValue: number | ClientType | number[]) => {
+  const handleDataChange = (
+    field: keyof PaxData,
+    newValue: number | ClientType | number[]
+  ) => {
     const newData = { ...internalData, [field]: newValue };
     setInternalData(newData);
     onChange?.(newData);
@@ -702,7 +766,10 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
 
   const handleClear = () => {
     if (multipleRooms) {
-      const clearedRooms = rooms.map(room => ({ ...DEFAULT_PAX_DATA, roomId: room.roomId }));
+      const clearedRooms = rooms.map((room) => ({
+        ...DEFAULT_PAX_DATA,
+        roomId: room.roomId,
+      }));
       setRooms(clearedRooms);
       onRoomsChange?.(clearedRooms);
     } else {
@@ -718,9 +785,9 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
   };
 
   const handleAddRoom = () => {
-    const newRoom: RoomData = { 
-      ...DEFAULT_PAX_DATA, 
-      roomId: `${rooms.length + 1}` 
+    const newRoom: RoomData = {
+      ...DEFAULT_PAX_DATA,
+      roomId: `${rooms.length + 1}`,
     };
     const updatedRooms = [...rooms, newRoom];
     setRooms(updatedRooms);
@@ -729,14 +796,14 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
   };
 
   const handleRemoveRoom = (roomId: string) => {
-    const updatedRooms = rooms.filter(room => room.roomId !== roomId);
+    const updatedRooms = rooms.filter((room) => room.roomId !== roomId);
     setRooms(updatedRooms);
     onRoomsChange?.(updatedRooms);
     onRemoveRoom?.(roomId);
   };
 
   const handleRoomChange = (roomId: string, updatedRoom: RoomData) => {
-    const updatedRooms = rooms.map(room => 
+    const updatedRooms = rooms.map((room) =>
       room.roomId === roomId ? updatedRoom : room
     );
     setRooms(updatedRooms);
@@ -745,8 +812,9 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
 
   const getTotalPax = () => {
     if (multipleRooms) {
-      return rooms.reduce((total, room) => 
-        total + room.adults + room.teens + room.children + room.infants, 0
+      return rooms.reduce(
+        (total, room) => total + room.adults + room.teens + room.children + room.infants,
+        0
       );
     }
     const { adults, teens, children, infants } = internalData;
@@ -770,22 +838,23 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
         className="pax-selector__trigger"
         onClick={() => setIsOpen(!isOpen)}
         aria-expanded={isOpen}
-        aria-haspopup="true"
-      >
+        aria-haspopup="true">
         <Text size="sm" variant="regular" className="pax-selector__label">
           {label}
         </Text>
-        <div className={`pax-selector__input ${isOpen ? 'pax-selector__input--active' : ''}`}>
+        <div
+          className={`pax-selector__input ${isOpen ? 'pax-selector__input--active' : ''}`}>
           <div className="pax-selector__input-content">
             <Icon name="user-icon" size="sm" className="pax-selector__input-icon" />
-            <span className={`pax-selector__input-text ${!hasPax ? 'pax-selector__input-placeholder' : ''}`}>
+            <span
+              className={`pax-selector__input-text ${!hasPax ? 'pax-selector__input-placeholder' : ''}`}>
               {getDisplayText()}
             </span>
           </div>
-          <Icon 
-            name="chevron-down" 
-            size="sm" 
-            className={`pax-selector__chevron ${isOpen ? 'pax-selector__chevron--open' : ''}`} 
+          <Icon
+            name="chevron-down"
+            size="sm"
+            className={`pax-selector__chevron ${isOpen ? 'pax-selector__chevron--open' : ''}`}
           />
         </div>
       </button>
@@ -799,8 +868,7 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
                 <button
                   type="button"
                   className="pax-selector__add-room"
-                  onClick={handleAddRoom}
-                >
+                  onClick={handleAddRoom}>
                   <Icon name="home" size="sm" className="pax-selector__add-room-icon" />
                   Add a room
                   <Icon name="plus" size="sm" className="pax-selector__add-room-icon" />
@@ -855,16 +923,25 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
               </div>
 
               {/* Age specification for single room */}
-              {((internalData.teens > 0) || (internalData.children > 0) || (internalData.infants > 0)) && (
+              {(internalData.teens > 0 ||
+                internalData.children > 0 ||
+                internalData.infants > 0) && (
                 <div className="pax-selector__age-section">
-                  <Text size="base" variant="bold" color="default" className="pax-selector__age-section-title">
+                  <Text
+                    size="base"
+                    variant="bold"
+                    color="default"
+                    className="pax-selector__age-section-title">
                     Please specify the age :
                   </Text>
-                  
+
                   <div className="pax-selector__age-groups">
                     {/* Helper function to chunk ages into rows of 2 */}
                     {(() => {
-                      const chunkAges = (ages: (number | undefined)[], category: string) => {
+                      const chunkAges = (
+                        ages: (number | undefined)[],
+                        category: string
+                      ) => {
                         const chunks: (number | undefined)[][] = [];
                         for (let i = 0; i < ages.length; i += 2) {
                           chunks.push(ages.slice(i, i + 2));
@@ -872,11 +949,24 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
                         return chunks;
                       };
 
-                      const teenAgeChunks = chunkAges(internalData.teenAges || [], 'Teen');
-                      const childAgeChunks = chunkAges(internalData.childAges || [], 'Child');
-                      const infantAgeChunks = chunkAges(internalData.infantAges || [], 'Infant');
+                      const teenAgeChunks = chunkAges(
+                        internalData.teenAges || [],
+                        'Teen'
+                      );
+                      const childAgeChunks = chunkAges(
+                        internalData.childAges || [],
+                        'Child'
+                      );
+                      const infantAgeChunks = chunkAges(
+                        internalData.infantAges || [],
+                        'Infant'
+                      );
 
-                      const handleAgeChange = (category: 'teenAges' | 'childAges' | 'infantAges', index: number, age: number) => {
+                      const handleAgeChange = (
+                        category: 'teenAges' | 'childAges' | 'infantAges',
+                        index: number,
+                        age: number
+                      ) => {
                         const ages = [...(internalData[category] || [])];
                         ages[index] = age;
                         handleDataChange(category, ages);
@@ -885,61 +975,88 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
                       return (
                         <>
                           {/* Teen ages */}
-                          {internalData.teens > 0 && teenAgeChunks.map((chunk, chunkIndex) => (
-                            <div key={`teen-chunk-${chunkIndex}`} className="pax-selector__age-row">
-                              {chunk.map((age, ageIndex) => {
-                                const actualIndex = chunkIndex * 2 + ageIndex;
-                                return (
-                                  <AgeSelector
-                                    key={`teen-${actualIndex}`}
-                                    label="Teen"
-                                    value={age}
-                                    onChange={(selectedAge) => handleAgeChange('teenAges', actualIndex, selectedAge)}
-                                    ageRange={CHILD_CATEGORY_AGES}
-                                    required
-                                  />
-                                );
-                              })}
-                            </div>
-                          ))}
+                          {internalData.teens > 0 &&
+                            teenAgeChunks.map((chunk, chunkIndex) => (
+                              <div
+                                key={`teen-chunk-${chunkIndex}`}
+                                className="pax-selector__age-row">
+                                {chunk.map((age, ageIndex) => {
+                                  const actualIndex = chunkIndex * 2 + ageIndex;
+                                  return (
+                                    <AgeSelector
+                                      key={`teen-${actualIndex}`}
+                                      label="Teen"
+                                      value={age}
+                                      onChange={(selectedAge) =>
+                                        handleAgeChange(
+                                          'teenAges',
+                                          actualIndex,
+                                          selectedAge
+                                        )
+                                      }
+                                      ageRange={CHILD_CATEGORY_AGES}
+                                      required
+                                    />
+                                  );
+                                })}
+                              </div>
+                            ))}
 
                           {/* Child ages */}
-                          {internalData.children > 0 && childAgeChunks.map((chunk, chunkIndex) => (
-                            <div key={`child-chunk-${chunkIndex}`} className="pax-selector__age-row">
-                              {chunk.map((age, ageIndex) => {
-                                const actualIndex = chunkIndex * 2 + ageIndex;
-                                return (
-                                  <AgeSelector
-                                    key={`child-${actualIndex}`}
-                                    label="Child"
-                                    value={age}
-                                    onChange={(selectedAge) => handleAgeChange('childAges', actualIndex, selectedAge)}
-                                    ageRange={CHILD_CATEGORY_AGES}
-                                    required
-                                  />
-                                );
-                              })}
-                            </div>
-                          ))}
+                          {internalData.children > 0 &&
+                            childAgeChunks.map((chunk, chunkIndex) => (
+                              <div
+                                key={`child-chunk-${chunkIndex}`}
+                                className="pax-selector__age-row">
+                                {chunk.map((age, ageIndex) => {
+                                  const actualIndex = chunkIndex * 2 + ageIndex;
+                                  return (
+                                    <AgeSelector
+                                      key={`child-${actualIndex}`}
+                                      label="Child"
+                                      value={age}
+                                      onChange={(selectedAge) =>
+                                        handleAgeChange(
+                                          'childAges',
+                                          actualIndex,
+                                          selectedAge
+                                        )
+                                      }
+                                      ageRange={CHILD_CATEGORY_AGES}
+                                      required
+                                    />
+                                  );
+                                })}
+                              </div>
+                            ))}
 
                           {/* Infant ages */}
-                          {internalData.infants > 0 && infantAgeChunks.map((chunk, chunkIndex) => (
-                            <div key={`infant-chunk-${chunkIndex}`} className="pax-selector__age-row">
-                              {chunk.map((age, ageIndex) => {
-                                const actualIndex = chunkIndex * 2 + ageIndex;
-                                return (
-                                  <AgeSelector
-                                    key={`infant-${actualIndex}`}
-                                    label="Infant"
-                                    value={age}
-                                    onChange={(selectedAge) => handleAgeChange('infantAges', actualIndex, selectedAge)}
-                                    ageRange={CHILD_CATEGORY_AGES}
-                                    required
-                                  />
-                                );
-                              })}
-                            </div>
-                          ))}
+                          {internalData.infants > 0 &&
+                            infantAgeChunks.map((chunk, chunkIndex) => (
+                              <div
+                                key={`infant-chunk-${chunkIndex}`}
+                                className="pax-selector__age-row">
+                                {chunk.map((age, ageIndex) => {
+                                  const actualIndex = chunkIndex * 2 + ageIndex;
+                                  return (
+                                    <AgeSelector
+                                      key={`infant-${actualIndex}`}
+                                      label="Infant"
+                                      value={age}
+                                      onChange={(selectedAge) =>
+                                        handleAgeChange(
+                                          'infantAges',
+                                          actualIndex,
+                                          selectedAge
+                                        )
+                                      }
+                                      ageRange={CHILD_CATEGORY_AGES}
+                                      required
+                                    />
+                                  );
+                                })}
+                              </div>
+                            ))}
                         </>
                       );
                     })()}
@@ -958,15 +1075,10 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
             <button
               type="button"
               className="pax-selector__clear-btn"
-              onClick={handleClear}
-            >
+              onClick={handleClear}>
               Clear Pax
             </button>
-            <button
-              type="button"
-              className="pax-selector__done-btn"
-              onClick={handleDone}
-            >
+            <button type="button" className="pax-selector__done-btn" onClick={handleDone}>
               Done
             </button>
           </div>