mautourco-components 0.2.5 → 0.2.7

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

@@ -1,369 +1,369 @@
-import React, { useState, useCallback, useRef, useEffect } from "react";
-import Icon from "../../atoms/Icon/Icon";
-import { Text } from "../../atoms/Typography/Typography";
-import PaxSelector, { PaxData } from "../PaxSelector/PaxSelector";
-import DateTimePicker from "../DateTimePicker/DateTimePicker";
-import LocationDropdown, {
-  LocationOption,
-  LocationGroup,
-  LocationData,
-} from "../../molecules/LocationDropdown/LocationDropdown";
-import "../../../styles/components/organism/transfer-line.css";
-
-export type TransferType = "arrival" | "departure" | "inter-hotel";
-
-// Re-export LocationData for convenience
-export type { LocationData };
-
-export interface TransferLineData {
-  id: string;
-  type: TransferType;
-  paxData?: PaxData;
-  transferDate?: string;
-  pickupPoint?: LocationData;
-  dropoffPoint?: LocationData;
-}
-
-export interface TransferLineProps {
-  /** Unique identifier for this transfer line */
-  id: string;
-  /** Type of transfer: arrival, departure, or inter-hotel */
-  type: TransferType;
-  /** Pax data */
-  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;
-  /** All location options - will be filtered based on transfer type */
-  locations?: {
-    options?: LocationOption[];
-    groups?: LocationGroup[];
-  };
-  /** Callback when pax data changes */
-  onPaxChange?: (paxData: PaxData) => void;
-  /** Callback when transfer date changes */
-  onDateChange?: (date: string) => void;
-  /** Callback when pickup point changes */
-  onPickupChange?: (location: LocationData | null) => void;
-  /** Callback when dropoff point changes */
-  onDropoffChange?: (location: LocationData | null) => void;
-  /** Callback when any data changes - returns complete TransferLineData */
-  onDataChange?: (data: TransferLineData) => void;
-  /** Callback when delete button is clicked */
-  onDelete?: () => void;
-  /** Whether to show the delete button */
-  showDelete?: boolean;
-  /** Whether to show the title (Arrival, Departure, Inter-Hotel) */
-  showTitle?: boolean;
-  /** Additional CSS classes */
-  className?: string;
-}
-
-const TransferLine: React.FC<TransferLineProps> = ({
-  id,
-  type,
-  paxData,
-  transferDate,
-  pickupPoint,
-  dropoffPoint,
-  locations = { options: [], groups: [] },
-  onPaxChange,
-  onDateChange,
-  onPickupChange,
-  onDropoffChange,
-  onDataChange,
-  onDelete,
-  showDelete = true,
-  showTitle = false,
-  className = "",
-}) => {
-  const [internalPaxData, setInternalPaxData] = useState<PaxData | undefined>(
-    paxData
-  );
-  const [internalTransferDate, setInternalTransferDate] = useState<
-    string | undefined
-  >(transferDate);
-  const [internalPickupPoint, setInternalPickupPoint] = useState<
-    LocationData | null
-  >(null);
-  const [internalDropoffPoint, setInternalDropoffPoint] = useState<
-    LocationData | null
-  >(null);
-
-  // Helper function to get all locations (from options and groups)
-  const getAllLocations = (
-    options: LocationOption[],
-    groups: LocationGroup[]
-  ): LocationOption[] => {
-    const groupOptions = groups.flatMap((group) => group.options);
-    return [...options, ...groupOptions];
-  };
-
-  // Filter locations based on transfer type and position (pickup/dropoff)
-  const filterLocations = (position: 'pickup' | 'dropoff') => {
-    const allOptions = locations.options || [];
-    const allGroups = locations.groups || [];
-    
-    let filterTypes: Array<'airport' | 'port' | 'accommodation'> = [];
-    
-    if (type === 'arrival') {
-      filterTypes = position === 'pickup' ? ['airport', 'port'] : ['accommodation'];
-    } else if (type === 'departure') {
-      filterTypes = position === 'pickup' ? ['accommodation'] : ['airport', 'port'];
-    } else if (type === 'inter-hotel') {
-      filterTypes = ['accommodation'];
-    }
-    
-    const filteredOptions = allOptions.filter(opt => filterTypes.includes(opt.type));
-    const filteredGroups = allGroups
-      .map(group => ({
-        ...group,
-        options: group.options.filter(opt => filterTypes.includes(opt.type))
-      }))
-      .filter(group => group.options.length > 0);
-    
-    return { options: filteredOptions, groups: filteredGroups };
-  };
-
-  // Get default location (first airport for arrival/departure)
-  const getDefaultLocation = (position: 'pickup' | 'dropoff'): LocationOption | null => {
-    const { options, groups } = filterLocations(position);
-    const allLocations = getAllLocations(options, groups);
-    
-    // For arrival pickup or departure dropoff, default to first airport
-    if ((type === 'arrival' && position === 'pickup') || (type === 'departure' && position === 'dropoff')) {
-      return allLocations.find(loc => loc.type === 'airport') || allLocations[0] || null;
-    }
-    
-    return null;
-  };
-
-  // Initialize location data from IDs or set defaults
-  React.useEffect(() => {
-    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,
-        });
-      }
-    } else {
-      // Set default location if applicable
-      const defaultLocation = getDefaultLocation('pickup');
-      if (defaultLocation) {
-        const defaultData: LocationData = {
-          id: defaultLocation.id,
-          locationName: defaultLocation.label,
-        };
-        setInternalPickupPoint(defaultData);
-        onPickupChange?.(defaultData);
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pickupPoint, type, locations]);
-
-  React.useEffect(() => {
-    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,
-        });
-      }
-    } else {
-      // Set default location if applicable
-      const defaultLocation = getDefaultLocation('dropoff');
-      if (defaultLocation) {
-        const defaultData: LocationData = {
-          id: defaultLocation.id,
-          locationName: defaultLocation.label,
-        };
-        setInternalDropoffPoint(defaultData);
-        onDropoffChange?.(defaultData);
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dropoffPoint, type, locations]);
-
-  // Update complete data whenever any field changes
-  React.useEffect(() => {
-    const completeData: TransferLineData = {
-      id,
-      type,
-      paxData: internalPaxData,
-      transferDate: internalTransferDate,
-      pickupPoint: internalPickupPoint || undefined,
-      dropoffPoint: internalDropoffPoint || undefined,
-    };
-    onDataChange?.(completeData);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [id, type, internalPaxData, internalTransferDate, internalPickupPoint, internalDropoffPoint]);
-
-  const getTypeIcon = () => {
-    switch (type) {
-      case "arrival":
-        return "arrival";
-      case "departure":
-        return "departure";
-      case "inter-hotel":
-        return "building";
-      default:
-        return "arrival";
-    }
-  };
-
-  const getTypeLabel = () => {
-    switch (type) {
-      case "arrival":
-        return "Arrival";
-      case "departure":
-        return "Departure";
-      case "inter-hotel":
-        return "Inter-Hotel";
-      default:
-        return "Transfer";
-    }
-  };
-
-  const handlePaxChange = (newPaxData: PaxData) => {
-    setInternalPaxData(newPaxData);
-    onPaxChange?.(newPaxData);
-  };
-
-  const handleDateChange = (newDate: string | string[]) => {
-    const dateValue = Array.isArray(newDate) ? newDate[0] : newDate;
-    setInternalTransferDate(dateValue);
-    onDateChange?.(dateValue);
-  };
-
-  const handlePickupChange = (location: LocationData | null) => {
-    setInternalPickupPoint(location);
-    onPickupChange?.(location);
-  };
-
-  const handleDropoffChange = (location: LocationData | null) => {
-    setInternalDropoffPoint(location);
-    onDropoffChange?.(location);
-  };
-
-  return (
-    <div
-      className={`transfer-line transfer-line--${type} ${className}`}
-      data-transfer-id={id}
-    >
-      {/* Transfer type header */}
-      {showTitle && (
-        <div className="transfer-line__header">
-          <Icon
-            name={getTypeIcon()}
-            size="sm"
-            className="transfer-line__header-icon"
-          />
-          <Text
-            size="sm"
-            variant="medium"
-            className="transfer-line__header-label"
-          >
-            {getTypeLabel()}
-          </Text>
-        </div>
-      )}
-
-      {/* Transfer line content */}
-      <div className="transfer-line__content-container">
-        <div className="transfer-line__content">
-          {/* Number of pax */}
-          <div className="transfer-line__field transfer-line__field--pax">
-            <PaxSelector
-              label="Number of pax"
-              value={internalPaxData}
-              onChange={handlePaxChange}
-              placeholder="2 pax"
-            />
-          </div>
-
-          {/* Transfer date */}
-          <div className="transfer-line__field transfer-line__field--date">
-            <Text
-              size="sm"
-              variant="regular"
-              className="transfer-line__field-label"
-            >
-              Transfer date
-            </Text>
-            <DateTimePicker
-              placeholder="DD/MM/YYYY"
-              mode="calendar"
-              iconPosition="left"
-              numberOfMonths={1}
-              iconBGFull={false}
-              showChevron={true}
-              onValueChange={handleDateChange}
-              selectionMode="single"
-            />
-          </div>
-
-          {/* Pick-up point */}
-          <div className="transfer-line__field transfer-line__field--pickup">
-            <LocationDropdown
-              label="Pick-up point"
-              options={filterLocations('pickup').options}
-              groups={filterLocations('pickup').groups}
-              selectedValue={internalPickupPoint?.id || null}
-              onSelectionChange={handlePickupChange}
-              placeholder="Select a pick-up point"
-              direction="pickup"
-              type={type === 'inter-hotel' ? 'accommodation' : type === 'arrival' ? 'airport-port' : 'accommodation'}
-              showGroupTitles={false}
-            />
-          </div>
-
-          {/* Drop-off point */}
-          <div className="transfer-line__field transfer-line__field--dropoff">
-            <LocationDropdown
-              label="Drop-off point"
-              options={filterLocations('dropoff').options}
-              groups={filterLocations('dropoff').groups}
-              selectedValue={internalDropoffPoint?.id || null}
-              onSelectionChange={handleDropoffChange}
-              placeholder="Select a drop-off point"
-              direction="dropoff"
-              type={type === 'inter-hotel' ? 'accommodation' : type === 'departure' ? 'airport-port' : 'accommodation'}
-              showGroupTitles={false}
-            />
-          </div>
-        </div>
-        {/* Delete button */}
-        {showDelete && (
-          <div className="transfer-line__delete">
-            <button
-              type="button"
-              className="transfer-line__delete-btn"
-              onClick={onDelete}
-              aria-label="Delete transfer line"
-            >
-              <Icon
-                name="delete"
-                size="sm"
-                className="transfer-line__delete-icon"
-              />
-            </button>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default TransferLine;
+import React, { useState, useCallback, useRef, useEffect } from "react";
+import Icon from "../../atoms/Icon/Icon";
+import { Text } from "../../atoms/Typography/Typography";
+import PaxSelector, { PaxData } from "../PaxSelector/PaxSelector";
+import DateTimePicker from "../DateTimePicker/DateTimePicker";
+import LocationDropdown, {
+  LocationOption,
+  LocationGroup,
+  LocationData,
+} from "../../molecules/LocationDropdown/LocationDropdown";
+import "../../../styles/components/organism/transfer-line.css";
+
+export type TransferType = "arrival" | "departure" | "inter-hotel";
+
+// Re-export LocationData for convenience
+export type { LocationData };
+
+export interface TransferLineData {
+  id: string;
+  type: TransferType;
+  paxData?: PaxData;
+  transferDate?: string;
+  pickupPoint?: LocationData;
+  dropoffPoint?: LocationData;
+}
+
+export interface TransferLineProps {
+  /** Unique identifier for this transfer line */
+  id: string;
+  /** Type of transfer: arrival, departure, or inter-hotel */
+  type: TransferType;
+  /** Pax data */
+  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;
+  /** All location options - will be filtered based on transfer type */
+  locations?: {
+    options?: LocationOption[];
+    groups?: LocationGroup[];
+  };
+  /** Callback when pax data changes */
+  onPaxChange?: (paxData: PaxData) => void;
+  /** Callback when transfer date changes */
+  onDateChange?: (date: string) => void;
+  /** Callback when pickup point changes */
+  onPickupChange?: (location: LocationData | null) => void;
+  /** Callback when dropoff point changes */
+  onDropoffChange?: (location: LocationData | null) => void;
+  /** Callback when any data changes - returns complete TransferLineData */
+  onDataChange?: (data: TransferLineData) => void;
+  /** Callback when delete button is clicked */
+  onDelete?: () => void;
+  /** Whether to show the delete button */
+  showDelete?: boolean;
+  /** Whether to show the title (Arrival, Departure, Inter-Hotel) */
+  showTitle?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const TransferLine: React.FC<TransferLineProps> = ({
+  id,
+  type,
+  paxData,
+  transferDate,
+  pickupPoint,
+  dropoffPoint,
+  locations = { options: [], groups: [] },
+  onPaxChange,
+  onDateChange,
+  onPickupChange,
+  onDropoffChange,
+  onDataChange,
+  onDelete,
+  showDelete = true,
+  showTitle = false,
+  className = "",
+}) => {
+  const [internalPaxData, setInternalPaxData] = useState<PaxData | undefined>(
+    paxData
+  );
+  const [internalTransferDate, setInternalTransferDate] = useState<
+    string | undefined
+  >(transferDate);
+  const [internalPickupPoint, setInternalPickupPoint] = useState<
+    LocationData | null
+  >(null);
+  const [internalDropoffPoint, setInternalDropoffPoint] = useState<
+    LocationData | null
+  >(null);
+
+  // Helper function to get all locations (from options and groups)
+  const getAllLocations = (
+    options: LocationOption[],
+    groups: LocationGroup[]
+  ): LocationOption[] => {
+    const groupOptions = groups.flatMap((group) => group.options);
+    return [...options, ...groupOptions];
+  };
+
+  // Filter locations based on transfer type and position (pickup/dropoff)
+  const filterLocations = (position: 'pickup' | 'dropoff') => {
+    const allOptions = locations.options || [];
+    const allGroups = locations.groups || [];
+    
+    let filterTypes: Array<'airport' | 'port' | 'accommodation'> = [];
+    
+    if (type === 'arrival') {
+      filterTypes = position === 'pickup' ? ['airport', 'port'] : ['accommodation'];
+    } else if (type === 'departure') {
+      filterTypes = position === 'pickup' ? ['accommodation'] : ['airport', 'port'];
+    } else if (type === 'inter-hotel') {
+      filterTypes = ['accommodation'];
+    }
+    
+    const filteredOptions = allOptions.filter(opt => filterTypes.includes(opt.type));
+    const filteredGroups = allGroups
+      .map(group => ({
+        ...group,
+        options: group.options.filter(opt => filterTypes.includes(opt.type))
+      }))
+      .filter(group => group.options.length > 0);
+    
+    return { options: filteredOptions, groups: filteredGroups };
+  };
+
+  // Get default location (first airport for arrival/departure)
+  const getDefaultLocation = (position: 'pickup' | 'dropoff'): LocationOption | null => {
+    const { options, groups } = filterLocations(position);
+    const allLocations = getAllLocations(options, groups);
+    
+    // For arrival pickup or departure dropoff, default to first airport
+    if ((type === 'arrival' && position === 'pickup') || (type === 'departure' && position === 'dropoff')) {
+      return allLocations.find(loc => loc.type === 'airport') || allLocations[0] || null;
+    }
+    
+    return null;
+  };
+
+  // Initialize location data from IDs or set defaults
+  React.useEffect(() => {
+    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,
+        });
+      }
+    } else {
+      // Set default location if applicable
+      const defaultLocation = getDefaultLocation('pickup');
+      if (defaultLocation) {
+        const defaultData: LocationData = {
+          id: defaultLocation.id,
+          locationName: defaultLocation.label,
+        };
+        setInternalPickupPoint(defaultData);
+        onPickupChange?.(defaultData);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pickupPoint, type, locations]);
+
+  React.useEffect(() => {
+    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,
+        });
+      }
+    } else {
+      // Set default location if applicable
+      const defaultLocation = getDefaultLocation('dropoff');
+      if (defaultLocation) {
+        const defaultData: LocationData = {
+          id: defaultLocation.id,
+          locationName: defaultLocation.label,
+        };
+        setInternalDropoffPoint(defaultData);
+        onDropoffChange?.(defaultData);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dropoffPoint, type, locations]);
+
+  // Update complete data whenever any field changes
+  React.useEffect(() => {
+    const completeData: TransferLineData = {
+      id,
+      type,
+      paxData: internalPaxData,
+      transferDate: internalTransferDate,
+      pickupPoint: internalPickupPoint || undefined,
+      dropoffPoint: internalDropoffPoint || undefined,
+    };
+    onDataChange?.(completeData);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id, type, internalPaxData, internalTransferDate, internalPickupPoint, internalDropoffPoint]);
+
+  const getTypeIcon = () => {
+    switch (type) {
+      case "arrival":
+        return "arrival";
+      case "departure":
+        return "departure";
+      case "inter-hotel":
+        return "building";
+      default:
+        return "arrival";
+    }
+  };
+
+  const getTypeLabel = () => {
+    switch (type) {
+      case "arrival":
+        return "Arrival";
+      case "departure":
+        return "Departure";
+      case "inter-hotel":
+        return "Inter-Hotel";
+      default:
+        return "Transfer";
+    }
+  };
+
+  const handlePaxChange = (newPaxData: PaxData) => {
+    setInternalPaxData(newPaxData);
+    onPaxChange?.(newPaxData);
+  };
+
+  const handleDateChange = (newDate: string | string[]) => {
+    const dateValue = Array.isArray(newDate) ? newDate[0] : newDate;
+    setInternalTransferDate(dateValue);
+    onDateChange?.(dateValue);
+  };
+
+  const handlePickupChange = (location: LocationData | null) => {
+    setInternalPickupPoint(location);
+    onPickupChange?.(location);
+  };
+
+  const handleDropoffChange = (location: LocationData | null) => {
+    setInternalDropoffPoint(location);
+    onDropoffChange?.(location);
+  };
+
+  return (
+    <div
+      className={`transfer-line transfer-line--${type} ${className}`}
+      data-transfer-id={id}
+    >
+      {/* Transfer type header */}
+      {showTitle && (
+        <div className="transfer-line__header">
+          <Icon
+            name={getTypeIcon()}
+            size="sm"
+            className="transfer-line__header-icon"
+          />
+          <Text
+            size="sm"
+            variant="medium"
+            className="transfer-line__header-label"
+          >
+            {getTypeLabel()}
+          </Text>
+        </div>
+      )}
+
+      {/* Transfer line content */}
+      <div className="transfer-line__content-container">
+        <div className="transfer-line__content">
+          {/* Number of pax */}
+          <div className="transfer-line__field transfer-line__field--pax">
+            <PaxSelector
+              label="Number of pax"
+              value={internalPaxData}
+              onChange={handlePaxChange}
+              placeholder="2 pax"
+            />
+          </div>
+
+          {/* Transfer date */}
+          <div className="transfer-line__field transfer-line__field--date">
+            <Text
+              size="sm"
+              variant="regular"
+              className="transfer-line__field-label"
+            >
+              Transfer date
+            </Text>
+            <DateTimePicker
+              placeholder="DD/MM/YYYY"
+              mode="calendar"
+              iconPosition="left"
+              numberOfMonths={1}
+              iconBGFull={false}
+              showChevron={true}
+              onValueChange={handleDateChange}
+              selectionMode="single"
+            />
+          </div>
+
+          {/* Pick-up point */}
+          <div className="transfer-line__field transfer-line__field--pickup">
+            <LocationDropdown
+              label="Pick-up point"
+              options={filterLocations('pickup').options}
+              groups={filterLocations('pickup').groups}
+              selectedValue={internalPickupPoint?.id || null}
+              onSelectionChange={handlePickupChange}
+              placeholder="Select a pick-up point"
+              direction="pickup"
+              type={type === 'inter-hotel' ? 'accommodation' : type === 'arrival' ? 'airport-port' : 'accommodation'}
+              showGroupTitles={false}
+            />
+          </div>
+
+          {/* Drop-off point */}
+          <div className="transfer-line__field transfer-line__field--dropoff">
+            <LocationDropdown
+              label="Drop-off point"
+              options={filterLocations('dropoff').options}
+              groups={filterLocations('dropoff').groups}
+              selectedValue={internalDropoffPoint?.id || null}
+              onSelectionChange={handleDropoffChange}
+              placeholder="Select a drop-off point"
+              direction="dropoff"
+              type={type === 'inter-hotel' ? 'accommodation' : type === 'departure' ? 'airport-port' : 'accommodation'}
+              showGroupTitles={false}
+            />
+          </div>
+        </div>
+        {/* Delete button */}
+        {showDelete && (
+          <div className="transfer-line__delete">
+            <button
+              type="button"
+              className="transfer-line__delete-btn"
+              onClick={onDelete}
+              aria-label="Delete transfer line"
+            >
+              <Icon
+                name="delete"
+                size="sm"
+                className="transfer-line__delete-icon"
+              />
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default TransferLine;