mautourco-components 0.2.85 → 0.2.87

package/src/components/organisms/TransferLine/TransferLine.tsx

@@ -12,16 +12,16 @@ import PaxSelector, { PaxData } from '../PaxSelector/PaxSelector';
 
 export type TransferType = 'arrival' | 'departure' | 'inter-hotel';
 
-// Re-export LocationData for convenience
-export type { LocationData };
+// Re-export LocationOption for convenience
+export type { LocationOption };
 
 export interface TransferLineData {
   id: string;
   type: TransferType;
   paxData?: PaxData;
   transferDate?: string;
-  pickupPoint?: LocationData;
-  dropoffPoint?: LocationData;
+  pickupPoint?: LocationOption;
+  dropoffPoint?: LocationOption;
 }
 
 export interface TransferLineProps {
@@ -33,10 +33,10 @@ export interface TransferLineProps {
   paxData?: PaxData;
   /** Transfer date */
   transferDate?: string;
-  /** Selected pickup point ID (for initial value) */
-  pickupPoint?: string | number;
-  /** Selected dropoff point ID (for initial value) */
-  dropoffPoint?: string | number;
+  /** Selected pickup point - can be an ID (string/number) or LocationOption object */
+  pickupPoint?: string | number | LocationOption;
+  /** Selected dropoff point - can be an ID (string/number) or LocationOption object */
+  dropoffPoint?: string | number | LocationOption;
   /** All location options - will be filtered based on transfer type */
   locations?: {
     options?: LocationOption[];
@@ -47,9 +47,9 @@ export interface TransferLineProps {
   /** Callback when transfer date changes */
   onDateChange?: (date: string) => void;
   /** Callback when pickup point changes */
-  onPickupChange?: (location: LocationData | null) => void;
+  onPickupChange?: (location: LocationOption | null) => void;
   /** Callback when dropoff point changes */
-  onDropoffChange?: (location: LocationData | null) => void;
+  onDropoffChange?: (location: LocationOption | null) => void;
   /** Callback when any data changes - returns complete TransferLineData */
   onDataChange?: (data: TransferLineData) => void;
   /** Callback when delete button is clicked */
@@ -93,10 +93,10 @@ const TransferLine: React.FC<TransferLineProps> = ({
   const [internalTransferDate, setInternalTransferDate] = useState<string | undefined>(
     transferDate
   );
-  const [internalPickupPoint, setInternalPickupPoint] = useState<LocationData | null>(
+  const [internalPickupPoint, setInternalPickupPoint] = useState<LocationOption | null>(
     null
   );
-  const [internalDropoffPoint, setInternalDropoffPoint] = useState<LocationData | null>(
+  const [internalDropoffPoint, setInternalDropoffPoint] = useState<LocationOption | null>(
     null
   );
 
@@ -153,56 +153,65 @@ const TransferLine: React.FC<TransferLineProps> = ({
     return null;
   };
 
-  // Initialize location data from IDs or set defaults
+  // Helper to check if value is LocationOption
+  const isLocationOption = (value: string | number | LocationOption | undefined): value is LocationOption => {
+    return typeof value === 'object' && value !== null && 'id' in value && 'label' in value && 'type' in value;
+  };
+
+  // Initialize location data from IDs, LocationOption objects, or set defaults
   React.useEffect(() => {
+    // If pickupPoint is already a LocationOption object, use it directly
+    if (isLocationOption(pickupPoint)) {
+      // Only update if the ID is different to prevent infinite loops
+      if (internalPickupPoint?.id !== pickupPoint.id) {
+        setInternalPickupPoint(pickupPoint);
+      }
+      return;
+    }
+
     const { options, groups } = filterLocations('pickup');
     const allPickupLocations = getAllLocations(options, groups);
 
     if (pickupPoint) {
       const location = allPickupLocations.find((loc) => loc.id === pickupPoint);
-      if (location) {
-        setInternalPickupPoint({
-          id: location.id,
-          locationName: location.label,
-        });
+      if (location && internalPickupPoint?.id !== location.id) {
+        setInternalPickupPoint(location);
       }
-    } else {
-      // Set default location if applicable
+    } else if (!internalPickupPoint) {
+      // Set default location if applicable (only if not already set)
       const defaultLocation = getDefaultLocation('pickup');
       if (defaultLocation) {
-        const defaultData: LocationData = {
-          id: defaultLocation.id,
-          locationName: defaultLocation.label,
-        };
-        setInternalPickupPoint(defaultData);
-        onPickupChange?.(defaultData);
+        setInternalPickupPoint(defaultLocation);
+        onPickupChange?.(defaultLocation);
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pickupPoint, type, locations]);
 
   React.useEffect(() => {
+    // If dropoffPoint is already a LocationOption object, use it directly
+    if (isLocationOption(dropoffPoint)) {
+      // Only update if the ID is different to prevent infinite loops
+      if (internalDropoffPoint?.id !== dropoffPoint.id) {
+        setInternalDropoffPoint(dropoffPoint);
+      }
+      return;
+    }
+
     const { options, groups } = filterLocations('dropoff');
     const allDropoffLocations = getAllLocations(options, groups);
 
     if (dropoffPoint) {
       const location = allDropoffLocations.find((loc) => loc.id === dropoffPoint);
-      if (location) {
-        setInternalDropoffPoint({
-          id: location.id,
-          locationName: location.label,
-        });
+      if (location && internalDropoffPoint?.id !== location.id) {
+        setInternalDropoffPoint(location);
       }
-    } else {
-      // Set default location if applicable
+    } else if (!internalDropoffPoint) {
+      // Set default location if applicable (only if not already set)
       const defaultLocation = getDefaultLocation('dropoff');
       if (defaultLocation) {
-        const defaultData: LocationData = {
-          id: defaultLocation.id,
-          locationName: defaultLocation.label,
-        };
-        setInternalDropoffPoint(defaultData);
-        onDropoffChange?.(defaultData);
+        setInternalDropoffPoint(defaultLocation);
+        onDropoffChange?.(defaultLocation);
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -266,14 +275,43 @@ const TransferLine: React.FC<TransferLineProps> = ({
     onDateChange?.(dateValue);
   };
 
+  // Helper to convert LocationData to LocationOption
+  const toLocationOption = (locationData: LocationData | null, position: 'pickup' | 'dropoff'): LocationOption | null => {
+    if (!locationData) return null;
+    
+    // Try to find in the options to get the type
+    const { options, groups } = filterLocations(position);
+    const allLocations = getAllLocations(options, groups);
+    const found = allLocations.find((loc) => loc.id === locationData.id);
+    if (found) return found;
+    
+    // If not found, infer the type
+    const name = locationData.locationName.toLowerCase();
+    const id = String(locationData.id).toLowerCase();
+    let locType: 'airport' | 'port' | 'accommodation' = 'accommodation';
+    if (name.includes('harbour') || name.includes('port') || id.includes('harbour') || id.includes('port')) {
+      locType = 'port';
+    } else if (name.includes('airport') || id.includes('airport')) {
+      locType = 'airport';
+    }
+    
+    return {
+      id: locationData.id,
+      label: locationData.locationName,
+      type: locType,
+    };
+  };
+
   const handlePickupChange = (location: LocationData | null) => {
-    setInternalPickupPoint(location);
-    onPickupChange?.(location);
+    const locationOption = toLocationOption(location, 'pickup');
+    setInternalPickupPoint(locationOption);
+    onPickupChange?.(locationOption);
   };
 
   const handleDropoffChange = (location: LocationData | null) => {
-    setInternalDropoffPoint(location);
-    onDropoffChange?.(location);
+    const locationOption = toLocationOption(location, 'dropoff');
+    setInternalDropoffPoint(locationOption);
+    onDropoffChange?.(locationOption);
   };
 
   // Check if inputs are empty (when checkEmpty is true)
@@ -292,6 +330,24 @@ const TransferLine: React.FC<TransferLineProps> = ({
 
   const isDropoffEmpty = checkEmpty && !internalDropoffPoint;
 
+  // Helper function to find LocationOption from ID or LocationOption for defaultValue
+  const findLocationOption = (value: string | number | LocationOption | undefined, position: 'pickup' | 'dropoff'): LocationOption | undefined => {
+    if (!value) return undefined;
+    
+    // If value is already a LocationOption object, use it directly
+    if (isLocationOption(value)) {
+      return value;
+    }
+    
+    // Otherwise, look up by ID in the locations
+    const { options, groups } = filterLocations(position);
+    const allLocations = getAllLocations(options, groups);
+    return allLocations.find((loc) => loc.id === value);
+  };
+
+  const defaultPickupOption = findLocationOption(pickupPoint, 'pickup');
+  const defaultDropoffOption = findLocationOption(dropoffPoint, 'dropoff');
+
   return (
     <div
       className={`transfer-line transfer-line--${type} ${disabled ? 'transfer-line--disabled' : ''} ${className}`}
@@ -367,6 +423,7 @@ const TransferLine: React.FC<TransferLineProps> = ({
               error={isPickupEmpty}
               disabled={disabled}
               scrollOnOpen={scrollOnOpen}
+              defaultValue={defaultPickupOption}
             />
           </div>
 
@@ -391,6 +448,7 @@ const TransferLine: React.FC<TransferLineProps> = ({
               error={isDropoffEmpty}
               disabled={disabled}
               scrollOnOpen={scrollOnOpen}
+              defaultValue={defaultDropoffOption}
             />
           </div>
         </div>