mautourco-components 0.2.46 → 0.2.48

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

@@ -1,7 +1,8 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { Fragment, useEffect, useRef, useState } from 'react';
 import { scrollIntoViewOnOpen } from '../../../lib/utils';
 import Icon from '../../atoms/Icon/Icon';
 import { Text } from '../../atoms/Typography/Typography';
+import AgeSelector from '../../molecules/AgeSelector/AgeSelector';
 
 export type ClientType = 'Standard client' | 'VIP' | 'VVIP' | 'Honeymooners';
 
@@ -65,8 +66,12 @@ export interface PaxSelectorProps {
   onRemoveRoom?: (roomId: string) => void;
   /** Default pax data for single room mode (will trigger onChange on mount) */
   defaultPaxData?: PaxData;
+  /** Whether the selector is disabled */
+  disabled?: boolean;
   /** Whether to scroll to the input when the dropdown opens */
   scrollOnOpen?: boolean;
+  /** Age range for child categories */
+  ageRange?: number[];
 }
 
 const DEFAULT_PAX_DATA: PaxData = {
@@ -94,178 +99,7 @@ export const DEFAULT_PAX_DATA_WITH_ADULTS: PaxData = {
 const CLIENT_TYPES: ClientType[] = ['Standard client', 'VIP', 'VVIP', 'Honeymooners'];
 
 // Age range for all child categories (teens, children, infants)
-const CHILD_CATEGORY_AGES = Array.from({ length: 18 }, (_, i) => i + 1); // 1-18 years
-
-interface AgeSelectorProps {
-  label: string;
-  value: number | undefined;
-  onChange: (age: number) => void;
-  ageRange: number[];
-  required?: boolean;
-}
-
-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 containerRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  // Sync input value when prop value changes
-  useEffect(() => {
-    setInputValue(value !== undefined ? value.toString() : '');
-  }, [value]);
-
-  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 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 === '') {
-        // Allow empty input - don't update onChange
-        return;
-      } else if (!isNaN(numValue) && ageRange.includes(numValue)) {
-        onChange(numValue);
-      }
-    }
-  };
-
-  const handleInputBlur = () => {
-    // Validate and set to valid value or clear if invalid
-    const numValue = parseInt(inputValue, 10);
-    if (inputValue === '') {
-      // Keep empty if user cleared it
-      return;
-    } else if (isNaN(numValue) || !ageRange.includes(numValue)) {
-      // Reset to current value if invalid
-      setInputValue(value !== undefined ? value.toString() : '');
-    } else {
-      // Ensure the input value matches the validated value
-      setInputValue(numValue.toString());
-    }
-  };
-
-  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      inputRef.current?.blur();
-    }
-  };
-
-  const handleSelect = (age: string) => {
-    const numAge = parseInt(age, 10);
-    onChange(numAge);
-    setIsOpen(false);
-    setInputValue(age);
-  };
-
-  const handleDropdownToggle = () => {
-    setIsOpen(!isOpen);
-  };
-
-  const ageOptions = ageRange.map((age) => age.toString());
-  const displayValue = inputValue || undefined;
-
-  return (
-    <div className="pax-selector__age-selector" ref={containerRef}>
-      <Text size="sm" variant="regular" className="pax-selector__age-label">
-        {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`}>
-          <input
-            ref={inputRef}
-            type="text"
-            inputMode="numeric"
-            className="dropdown-input__text pax-selector__age-input-text"
-            value={inputValue}
-            onChange={handleInputChange}
-            onBlur={handleInputBlur}
-            onKeyDown={handleInputKeyDown}
-            onFocus={() => setIsOpen(false)}
-            placeholder="--"
-            aria-label={`${label} age`}
-            style={{
-              background: 'transparent',
-              border: 'none',
-              outline: 'none',
-              width: '100%',
-              cursor: 'text',
-            }}
-          />
-          <button
-            type="button"
-            className="pax-selector__age-dropdown-btn"
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              handleDropdownToggle();
-            }}
-            aria-expanded={isOpen}
-            aria-haspopup="listbox"
-            aria-label="Open age dropdown"
-            style={{
-              background: 'transparent',
-              border: 'none',
-              cursor: 'pointer',
-              padding: 0,
-              display: 'flex',
-              alignItems: 'center',
-            }}>
-            <Icon
-              name="chevron-down"
-              size="sm"
-              className="dropdown-input__icon dropdown-input__icon--chevron"
-            />
-          </button>
-        </div>
-        {isOpen && (
-          <div className="dropdown-menu" role="listbox">
-            {ageOptions.map((age) => (
-              <div
-                key={age}
-                className={`dropdown-option ${value?.toString() === age ? 'dropdown-option--selected' : ''}`}
-                onClick={() => handleSelect(age)}
-                role="option"
-                aria-selected={value?.toString() === age}>
-                {age}
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
+export const CHILD_CATEGORY_AGES = Array.from({ length: 18 }, (_, i) => i + 1); // 1-18 years
 
 interface StepperRowProps {
   label: string;
@@ -410,6 +244,8 @@ interface RoomEditorProps {
   maxInfants: number;
   onChange: (room: RoomData) => void;
   onRemove: () => void;
+  scrollToRef?: React.RefObject<HTMLDivElement | null>;
+  ageRange: number[];
 }
 
 const RoomEditor: React.FC<RoomEditorProps> = ({
@@ -422,7 +258,12 @@ const RoomEditor: React.FC<RoomEditorProps> = ({
   maxInfants,
   onChange,
   onRemove,
+  scrollToRef,
+  ageRange,
 }) => {
+  const roomAgesSectionRef = useRef<HTMLDivElement>(null);
+  const previousRoomCounts = useRef({ teens: 0, children: 0, infants: 0 });
+
   const handleFieldChange = (
     field: keyof PaxData,
     value: number | ClientType | number[]
@@ -440,6 +281,38 @@ const RoomEditor: React.FC<RoomEditorProps> = ({
     handleFieldChange(category, ages);
   };
 
+  // Scroll to age section when new age inputs are added in this room
+  useEffect(() => {
+    const prev = previousRoomCounts.current;
+    const curr = {
+      teens: room.teens,
+      children: room.children,
+      infants: room.infants,
+    };
+
+    // Check if any count increased
+    const hasIncrease =
+      curr.teens > prev.teens ||
+      curr.children > prev.children ||
+      curr.infants > prev.infants;
+
+    if (hasIncrease && roomAgesSectionRef.current) {
+      // Scroll to the age section after a short delay to ensure DOM is updated
+      setTimeout(() => {
+        if (roomAgesSectionRef.current) {
+          roomAgesSectionRef.current.scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest',
+            inline: 'nearest',
+          });
+        }
+      }, 100);
+    }
+
+    // Update previous counts
+    previousRoomCounts.current = curr;
+  }, [room.teens, room.children, room.infants]);
+
   // Generate age arrays based on counts
   useEffect(() => {
     const teenAges = room.teenAges || [];
@@ -491,7 +364,7 @@ const RoomEditor: React.FC<RoomEditorProps> = ({
   const infantAgeChunks = chunkAges(room.infantAges || [], 'Infant');
 
   return (
-    <div className="pax-selector__room-container">
+    <div className="pax-selector__room-container" ref={scrollToRef}>
       <div className="pax-selector__room-header">
         <div className="pax-selector__room-title">
           <Text
@@ -545,7 +418,7 @@ const RoomEditor: React.FC<RoomEditorProps> = ({
 
         {/* Age specification section */}
         {(room.teens > 0 || room.children > 0 || room.infants > 0) && (
-          <div className="pax-selector__age-section">
+          <div className="pax-selector__age-section" ref={roomAgesSectionRef}>
             <Text
               size="base"
               variant="bold"
@@ -558,7 +431,7 @@ const RoomEditor: React.FC<RoomEditorProps> = ({
               {/* Teen ages */}
               {room.teens > 0 &&
                 teenAgeChunks.map((chunk, chunkIndex) => (
-                  <div key={`teen-chunk-${chunkIndex}`} className="pax-selector__age-row">
+                  <Fragment key={`teen-chunk-${chunkIndex}`}>
                     {chunk.map((age, ageIndex) => {
                       const actualIndex = chunkIndex * 2 + ageIndex;
                       return (
@@ -569,20 +442,18 @@ const RoomEditor: React.FC<RoomEditorProps> = ({
                           onChange={(selectedAge) =>
                             handleAgeChange('teenAges', actualIndex, selectedAge)
                           }
-                          ageRange={CHILD_CATEGORY_AGES}
+                          ageRange={ageRange}
                           required
                         />
                       );
                     })}
-                  </div>
+                  </Fragment>
                 ))}
 
               {/* Child ages */}
               {room.children > 0 &&
                 childAgeChunks.map((chunk, chunkIndex) => (
-                  <div
-                    key={`child-chunk-${chunkIndex}`}
-                    className="pax-selector__age-row">
+                  <Fragment key={`child-chunk-${chunkIndex}`}>
                     {chunk.map((age, ageIndex) => {
                       const actualIndex = chunkIndex * 2 + ageIndex;
                       return (
@@ -593,20 +464,18 @@ const RoomEditor: React.FC<RoomEditorProps> = ({
                           onChange={(selectedAge) =>
                             handleAgeChange('childAges', actualIndex, selectedAge)
                           }
-                          ageRange={CHILD_CATEGORY_AGES}
+                          ageRange={ageRange}
                           required
                         />
                       );
                     })}
-                  </div>
+                  </Fragment>
                 ))}
 
               {/* Infant ages */}
               {room.infants > 0 &&
                 infantAgeChunks.map((chunk, chunkIndex) => (
-                  <div
-                    key={`infant-chunk-${chunkIndex}`}
-                    className="pax-selector__age-row">
+                  <Fragment key={`infant-chunk-${chunkIndex}`}>
                     {chunk.map((age, ageIndex) => {
                       const actualIndex = chunkIndex * 2 + ageIndex;
                       return (
@@ -617,12 +486,12 @@ const RoomEditor: React.FC<RoomEditorProps> = ({
                           onChange={(selectedAge) =>
                             handleAgeChange('infantAges', actualIndex, selectedAge)
                           }
-                          ageRange={CHILD_CATEGORY_AGES}
+                          ageRange={ageRange}
                           required
                         />
                       );
                     })}
-                  </div>
+                  </Fragment>
                 ))}
             </div>
           </div>
@@ -655,7 +524,9 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
   onRoomsChange,
   onRemoveRoom,
   defaultPaxData = DEFAULT_PAX_DATA_WITH_ADULTS,
+  ageRange = CHILD_CATEGORY_AGES,
   scrollOnOpen = false,
+  disabled = false,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [internalData, setInternalData] = useState<PaxData>(
@@ -667,6 +538,9 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
   const containerRef = useRef<HTMLDivElement>(null);
   const triggerRef = useRef<HTMLButtonElement>(null);
   const hasInitialized = useRef(false);
+  const lastRoomRef = useRef<HTMLDivElement>(null);
+  const agesSectionRef = useRef<HTMLDivElement>(null);
+  const previousCounts = useRef({ teens: 0, children: 0, infants: 0 });
 
   // Sync internal data with external value prop
   useEffect(() => {
@@ -765,6 +639,46 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
     scrollIntoViewOnOpen(triggerRef, isOpen, scrollOnOpen);
   }, [isOpen, scrollOnOpen]);
 
+  // Scroll to age section when new age inputs are added (single room mode)
+  useEffect(() => {
+    if (!multipleRooms && isOpen) {
+      const prev = previousCounts.current;
+      const curr = {
+        teens: internalData.teens,
+        children: internalData.children,
+        infants: internalData.infants,
+      };
+
+      // Check if any count increased
+      const hasIncrease =
+        curr.teens > prev.teens ||
+        curr.children > prev.children ||
+        curr.infants > prev.infants;
+
+      if (hasIncrease && agesSectionRef.current) {
+        // Scroll to the age section after a short delay to ensure DOM is updated
+        setTimeout(() => {
+          if (agesSectionRef.current) {
+            agesSectionRef.current.scrollIntoView({
+              behavior: 'smooth',
+              block: 'nearest',
+              inline: 'nearest',
+            });
+          }
+        }, 100);
+      }
+
+      // Update previous counts
+      previousCounts.current = curr;
+    }
+  }, [
+    internalData.teens,
+    internalData.children,
+    internalData.infants,
+    multipleRooms,
+    isOpen,
+  ]);
+
   const handleDataChange = (
     field: keyof PaxData,
     newValue: number | ClientType | number[]
@@ -803,6 +717,17 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
     setRooms(updatedRooms);
     onRoomsChange?.(updatedRooms);
     onAddRoom?.();
+
+    // Scroll to the newly added room after a short delay
+    setTimeout(() => {
+      if (lastRoomRef.current) {
+        lastRoomRef.current.scrollIntoView({
+          behavior: 'smooth',
+          block: 'nearest',
+          inline: 'nearest',
+        });
+      }
+    }, 100);
   };
 
   const handleRemoveRoom = (roomId: string) => {
@@ -842,19 +767,22 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
   const hasPax = getTotalPax() > 0;
 
   return (
-    <div className={`pax-selector ${className}`} ref={containerRef}>
+    <div
+      className={`pax-selector ${disabled ? 'pax-selector--disabled' : ''} ${className}`}
+      ref={containerRef}>
       <button
         ref={triggerRef}
         type="button"
         className="pax-selector__trigger"
-        onClick={() => setIsOpen(!isOpen)}
+        onClick={() => !disabled && setIsOpen(!isOpen)}
         aria-expanded={isOpen}
-        aria-haspopup="true">
+        aria-haspopup="true"
+        disabled={disabled}>
         <Text size="sm" variant="regular" className="pax-selector__label">
           {label}
         </Text>
         <div
-          className={`pax-selector__input ${isOpen ? 'pax-selector__input--active' : ''}`}>
+          className={`pax-selector__input ${isOpen ? 'pax-selector__input--active' : ''} ${disabled ? 'pax-selector__input--disabled' : ''}`}>
           <div className="pax-selector__input-content">
             <Icon name="user-icon" size="sm" className="pax-selector__input-icon" />
             <span
@@ -899,6 +827,8 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
                     maxInfants={maxInfants}
                     onChange={(updatedRoom) => handleRoomChange(room.roomId, updatedRoom)}
                     onRemove={() => handleRemoveRoom(room.roomId)}
+                    scrollToRef={index === rooms.length - 1 ? lastRoomRef : undefined}
+                    ageRange={ageRange}
                   />
                 ))}
               </div>
@@ -937,7 +867,7 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
               {(internalData.teens > 0 ||
                 internalData.children > 0 ||
                 internalData.infants > 0) && (
-                <div className="pax-selector__age-section">
+                <div className="pax-selector__age-section" ref={agesSectionRef}>
                   <Text
                     size="base"
                     variant="bold"
@@ -988,9 +918,7 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
                           {/* Teen ages */}
                           {internalData.teens > 0 &&
                             teenAgeChunks.map((chunk, chunkIndex) => (
-                              <div
-                                key={`teen-chunk-${chunkIndex}`}
-                                className="pax-selector__age-row">
+                              <Fragment key={`teen-chunk-${chunkIndex}`}>
                                 {chunk.map((age, ageIndex) => {
                                   const actualIndex = chunkIndex * 2 + ageIndex;
                                   return (
@@ -1005,20 +933,18 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
                                           selectedAge
                                         )
                                       }
-                                      ageRange={CHILD_CATEGORY_AGES}
+                                      ageRange={ageRange}
                                       required
                                     />
                                   );
                                 })}
-                              </div>
+                              </Fragment>
                             ))}
 
                           {/* Child ages */}
                           {internalData.children > 0 &&
                             childAgeChunks.map((chunk, chunkIndex) => (
-                              <div
-                                key={`child-chunk-${chunkIndex}`}
-                                className="pax-selector__age-row">
+                              <Fragment key={`child-chunk-${chunkIndex}`}>
                                 {chunk.map((age, ageIndex) => {
                                   const actualIndex = chunkIndex * 2 + ageIndex;
                                   return (
@@ -1033,20 +959,18 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
                                           selectedAge
                                         )
                                       }
-                                      ageRange={CHILD_CATEGORY_AGES}
+                                      ageRange={ageRange}
                                       required
                                     />
                                   );
                                 })}
-                              </div>
+                              </Fragment>
                             ))}
 
                           {/* Infant ages */}
                           {internalData.infants > 0 &&
                             infantAgeChunks.map((chunk, chunkIndex) => (
-                              <div
-                                key={`infant-chunk-${chunkIndex}`}
-                                className="pax-selector__age-row">
+                              <Fragment key={`infant-chunk-${chunkIndex}`}>
                                 {chunk.map((age, ageIndex) => {
                                   const actualIndex = chunkIndex * 2 + ageIndex;
                                   return (
@@ -1061,12 +985,12 @@ const PaxSelector: React.FC<PaxSelectorProps> = ({
                                           selectedAge
                                         )
                                       }
-                                      ageRange={CHILD_CATEGORY_AGES}
+                                      ageRange={ageRange}
                                       required
                                     />
                                   );
                                 })}
-                              </div>
+                              </Fragment>
                             ))}
                         </>
                       );

package/src/components/organisms/RoundTrip/RoundTrip.tsx

@@ -62,6 +62,8 @@ export interface RoundTripProps {
   className?: string;
   /** Whether to check if inputs are empty */
   checkEmpty?: boolean;
+  /** Whether to scroll to the input when the calendar opens */
+  scrollOnOpen?: boolean;
 }
 
 const RoundTrip: React.FC<RoundTripProps> = ({
@@ -79,6 +81,7 @@ const RoundTrip: React.FC<RoundTripProps> = ({
   onChange,
   className = "",
   checkEmpty = false,
+  scrollOnOpen = false,
 }) => {
   const [internalPaxData, setInternalPaxData] = useState<PaxData | undefined>(
     paxData
@@ -299,6 +302,7 @@ const RoundTrip: React.FC<RoundTripProps> = ({
             onChange={handlePaxChange}
             placeholder="2 pax"
             className={isPaxEmpty ? 'pax-selector--error' : ''}
+            scrollOnOpen={scrollOnOpen}
           />
         </div>
 
@@ -318,6 +322,7 @@ const RoundTrip: React.FC<RoundTripProps> = ({
             defaultValue={internalArrivalDate && internalDepartureDate ? [internalArrivalDate, internalDepartureDate] : undefined}
             inputClassName="round-trip__date-picker--input"
             state={isDateEmpty ? 'error' : undefined}
+            scrollOnOpen={scrollOnOpen}
           />
         </div>
         <div className="round-trip__field round-trip__field--pickup-dropoff">
@@ -332,6 +337,7 @@ const RoundTrip: React.FC<RoundTripProps> = ({
             type="airport-port"
             showGroupTitles={true}
             error={isPickupDropoffEmpty}
+            scrollOnOpen={scrollOnOpen}
           />
         </div>
 
@@ -347,6 +353,7 @@ const RoundTrip: React.FC<RoundTripProps> = ({
             type="accommodation"
             showGroupTitles={false}
             error={isAccommodationEmpty}
+            scrollOnOpen={scrollOnOpen}
           />
         </div>
       </div>