mautourco-components 0.2.4 → 0.2.7

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

@@ -1,335 +1,335 @@
-import React, { useState, 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/round-trip.css";
-
-// Re-export LocationData for convenience
-export type { LocationData };
-
-export interface RoundTripTransfer {
-  type: "arrival" | "departure";
-  paxData?: PaxData;
-  transferDate?: string;
-  pickupPoint?: LocationData;
-  dropoffPoint?: LocationData;
-}
-
-export interface RoundTripData {
-  id: string;
-  paxData?: PaxData;
-  arrivalDate?: string;
-  departureDate?: string;
-  pickupDropoffPoint?: LocationData;
-  accommodation?: LocationData;
-  transfers: [RoundTripTransfer, RoundTripTransfer];
-}
-
-export interface RoundTripProps {
-  /** Unique identifier for this round trip */
-  id: string;
-  /** Pax data */
-  paxData?: PaxData;
-  /** Arrival date */
-  arrivalDate?: string;
-  /** Departure date */
-  departureDate?: string;
-  /** Selected pickup/dropoff point ID (for initial value) */
-  pickupDropoffPoint?: string;
-  /** Selected accommodation ID (for initial value) */
-  accommodation?: string;
-  /** All location options */
-  locations?: {
-    options?: LocationOption[];
-    groups?: LocationGroup[];
-  };
-  /** Callback when pax data changes */
-  onPaxChange?: (paxData: PaxData) => void;
-  /** Callback when dates change */
-  onDatesChange?: (arrivalDate: string, departureDate: string) => void;
-  /** Callback when pickup/dropoff point changes */
-  onPickupDropoffChange?: (location: LocationData | null) => void;
-  /** Callback when accommodation changes */
-  onAccommodationChange?: (location: LocationData | null) => void;
-  /** Callback when any data changes - returns array of 2 transfers */
-  onChange?: (data: RoundTripData) => void;
-  /** Additional CSS classes */
-  className?: string;
-}
-
-const RoundTrip: React.FC<RoundTripProps> = ({
-  id,
-  paxData,
-  arrivalDate,
-  departureDate,
-  pickupDropoffPoint,
-  accommodation,
-  locations = { options: [], groups: [] },
-  onPaxChange,
-  onDatesChange,
-  onPickupDropoffChange,
-  onAccommodationChange,
-  onChange,
-  className = "",
-}) => {
-  const [internalPaxData, setInternalPaxData] = useState<PaxData | undefined>(
-    paxData
-  );
-  const [internalArrivalDate, setInternalArrivalDate] = useState<
-    string | undefined
-  >(arrivalDate);
-  const [internalDepartureDate, setInternalDepartureDate] = useState<
-    string | undefined
-  >(departureDate);
-  const [internalPickupDropoffPoint, setInternalPickupDropoffPoint] =
-    useState<LocationData | null>(null);
-  const [internalAccommodation, setInternalAccommodation] =
-    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];
-  };
-
-  // Get airport/port options and accommodation options
-  const getPickupDropoffOptions = () => {
-    const allOptions = locations.options || [];
-    const allGroups = locations.groups || [];
-
-    // Filter for airport and port
-    const airportPortOptions = allOptions.filter(
-      (opt) => opt.type === "airport" || opt.type === "port"
-    );
-
-    // Filter for accommodations
-    const accommodationOptions = allOptions.filter(
-      (opt) => opt.type === "accommodation"
-    );
-
-    // Create groups
-    const airportPortGroup: LocationGroup = {
-      id: "airport-port-group",
-      label: "Airport & Port",
-      options: airportPortOptions,
-    };
-
-    const accommodationGroup: LocationGroup = {
-      id: "accommodation-group",
-      label: "Accommodations",
-      options: accommodationOptions,
-    };
-
-    return {
-      options: [],
-      groups: [airportPortGroup, accommodationGroup].filter(
-        (g) => g.options.length > 0
-      ),
-    };
-  };
-
-  const getAccommodationOptions = () => {
-    const allOptions = locations.options || [];
-    const allGroups = locations.groups || [];
-
-    // Filter for accommodations only
-    const accommodationOptions = allOptions.filter(
-      (opt) => opt.type === "accommodation"
-    );
-
-    // Extract accommodation groups if they exist
-    const accommodationGroups = allGroups
-      .map((group) => ({
-        ...group,
-        options: group.options.filter((opt) => opt.type === "accommodation"),
-      }))
-      .filter((group) => group.options.length > 0);
-
-    return {
-      options: accommodationOptions,
-      groups: accommodationGroups,
-    };
-  };
-
-  // Initialize location data from IDs
-  useEffect(() => {
-    const { options, groups } = getPickupDropoffOptions();
-    const allLocations = getAllLocations(options, groups);
-
-    if (pickupDropoffPoint) {
-      const location = allLocations.find(
-        (loc) => loc.id === pickupDropoffPoint
-      );
-      if (location) {
-        setInternalPickupDropoffPoint({
-          id: location.id,
-          locationName: location.label,
-        });
-      }
-    } else {
-      // Set default to first airport if available
-      const defaultAirport = allLocations.find((loc) => loc.type === "airport");
-      if (defaultAirport) {
-        const defaultData: LocationData = {
-          id: defaultAirport.id,
-          locationName: defaultAirport.label,
-        };
-        setInternalPickupDropoffPoint(defaultData);
-        onPickupDropoffChange?.(defaultData);
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pickupDropoffPoint, locations]);
-
-  useEffect(() => {
-    const { options, groups } = getAccommodationOptions();
-    const allLocations = getAllLocations(options, groups);
-
-    if (accommodation) {
-      const location = allLocations.find((loc) => loc.id === accommodation);
-      if (location) {
-        setInternalAccommodation({
-          id: location.id,
-          locationName: location.label,
-        });
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [accommodation, locations]);
-
-  // Update complete data whenever any field changes
-  useEffect(() => {
-    // Create arrival transfer
-    const arrivalTransfer: RoundTripTransfer = {
-      type: "arrival",
-      paxData: internalPaxData,
-      transferDate: internalArrivalDate,
-      pickupPoint: internalPickupDropoffPoint || undefined,
-      dropoffPoint: internalAccommodation || undefined,
-    };
-
-    // Create departure transfer
-    const departureTransfer: RoundTripTransfer = {
-      type: "departure",
-      paxData: internalPaxData,
-      transferDate: internalDepartureDate,
-      pickupPoint: internalAccommodation || undefined,
-      dropoffPoint: internalPickupDropoffPoint || undefined,
-    };
-
-    const completeData: RoundTripData = {
-      id,
-      paxData: internalPaxData,
-      arrivalDate: internalArrivalDate,
-      departureDate: internalDepartureDate,
-      pickupDropoffPoint: internalPickupDropoffPoint || undefined,
-      accommodation: internalAccommodation || undefined,
-      transfers: [arrivalTransfer, departureTransfer],
-    };
-
-    onChange?.(completeData);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    id,
-    internalPaxData,
-    internalArrivalDate,
-    internalDepartureDate,
-    internalPickupDropoffPoint,
-    internalAccommodation,
-  ]);
-
-  const handlePaxChange = (newPaxData: PaxData) => {
-    setInternalPaxData(newPaxData);
-    onPaxChange?.(newPaxData);
-  };
-
-  const handleDateRangeChange = (dates: string | string[]) => {
-    if (Array.isArray(dates) && dates.length === 2) {
-      setInternalArrivalDate(dates[0]);
-      setInternalDepartureDate(dates[1]);
-      onDatesChange?.(dates[0], dates[1]);
-    }
-  };
-
-  const handlePickupDropoffChange = (location: LocationData | null) => {
-    setInternalPickupDropoffPoint(location);
-    onPickupDropoffChange?.(location);
-  };
-
-  const handleAccommodationChange = (location: LocationData | null) => {
-    setInternalAccommodation(location);
-    onAccommodationChange?.(location);
-  };
-
-  const pickupDropoffOptions = getPickupDropoffOptions();
-  const accommodationOptions = getAccommodationOptions();
-
-  return (
-    <div className={`round-trip ${className}`} data-round-trip-id={id}>
-      <div className="round-trip__content">
-        <div className="round-trip__field round-trip__field--pax">
-          <PaxSelector
-            label="Number of pax"
-            value={internalPaxData}
-            onChange={handlePaxChange}
-            placeholder="2 pax"
-          />
-        </div>
-
-        <div className="round-trip__field round-trip__field--dates">
-          <Text size="sm" variant="regular" className="round-trip__field-label">
-            Arrival date - Departure date
-          </Text>
-          <DateTimePicker
-            placeholder="DD/MM/YYYY - DD/MM/YYYY"
-            mode="calendar"
-            iconPosition="left"
-            numberOfMonths={2}
-            iconBGFull={false}
-            showChevron={true}
-            onValueChange={handleDateRangeChange}
-            selectionMode="range"
-          />
-        </div>
-        <div className="round-trip__field round-trip__field--pickup-dropoff">
-          <LocationDropdown
-            label="Pick up / Drop-off point"
-            options={pickupDropoffOptions.options}
-            groups={pickupDropoffOptions.groups}
-            selectedValue={internalPickupDropoffPoint?.id || null}
-            onSelectionChange={handlePickupDropoffChange}
-            placeholder="Select pick-up / drop-off point"
-            direction={undefined}
-            type="airport-port"
-            showGroupTitles={true}
-          />
-        </div>
-
-        <div className="round-trip__field round-trip__field--accommodation">
-          <LocationDropdown
-            label="Accommodation"
-            options={accommodationOptions.options}
-            groups={accommodationOptions.groups}
-            selectedValue={internalAccommodation?.id || null}
-            onSelectionChange={handleAccommodationChange}
-            placeholder="Select accommodation"
-            direction="dropoff"
-            type="accommodation"
-            showGroupTitles={false}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default RoundTrip;
+import React, { useState, 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/round-trip.css";
+
+// Re-export LocationData for convenience
+export type { LocationData };
+
+export interface RoundTripTransfer {
+  type: "arrival" | "departure";
+  paxData?: PaxData;
+  transferDate?: string;
+  pickupPoint?: LocationData;
+  dropoffPoint?: LocationData;
+}
+
+export interface RoundTripData {
+  id: string;
+  paxData?: PaxData;
+  arrivalDate?: string;
+  departureDate?: string;
+  pickupDropoffPoint?: LocationData;
+  accommodation?: LocationData;
+  transfers: [RoundTripTransfer, RoundTripTransfer];
+}
+
+export interface RoundTripProps {
+  /** Unique identifier for this round trip */
+  id: string;
+  /** Pax data */
+  paxData?: PaxData;
+  /** Arrival date */
+  arrivalDate?: string;
+  /** Departure date */
+  departureDate?: string;
+  /** Selected pickup/dropoff point ID (for initial value) */
+  pickupDropoffPoint?: string;
+  /** Selected accommodation ID (for initial value) */
+  accommodation?: string;
+  /** All location options */
+  locations?: {
+    options?: LocationOption[];
+    groups?: LocationGroup[];
+  };
+  /** Callback when pax data changes */
+  onPaxChange?: (paxData: PaxData) => void;
+  /** Callback when dates change */
+  onDatesChange?: (arrivalDate: string, departureDate: string) => void;
+  /** Callback when pickup/dropoff point changes */
+  onPickupDropoffChange?: (location: LocationData | null) => void;
+  /** Callback when accommodation changes */
+  onAccommodationChange?: (location: LocationData | null) => void;
+  /** Callback when any data changes - returns array of 2 transfers */
+  onChange?: (data: RoundTripData) => void;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const RoundTrip: React.FC<RoundTripProps> = ({
+  id,
+  paxData,
+  arrivalDate,
+  departureDate,
+  pickupDropoffPoint,
+  accommodation,
+  locations = { options: [], groups: [] },
+  onPaxChange,
+  onDatesChange,
+  onPickupDropoffChange,
+  onAccommodationChange,
+  onChange,
+  className = "",
+}) => {
+  const [internalPaxData, setInternalPaxData] = useState<PaxData | undefined>(
+    paxData
+  );
+  const [internalArrivalDate, setInternalArrivalDate] = useState<
+    string | undefined
+  >(arrivalDate);
+  const [internalDepartureDate, setInternalDepartureDate] = useState<
+    string | undefined
+  >(departureDate);
+  const [internalPickupDropoffPoint, setInternalPickupDropoffPoint] =
+    useState<LocationData | null>(null);
+  const [internalAccommodation, setInternalAccommodation] =
+    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];
+  };
+
+  // Get airport/port options and accommodation options
+  const getPickupDropoffOptions = () => {
+    const allOptions = locations.options || [];
+    const allGroups = locations.groups || [];
+
+    // Filter for airport and port
+    const airportPortOptions = allOptions.filter(
+      (opt) => opt.type === "airport" || opt.type === "port"
+    );
+
+    // Filter for accommodations
+    const accommodationOptions = allOptions.filter(
+      (opt) => opt.type === "accommodation"
+    );
+
+    // Create groups
+    const airportPortGroup: LocationGroup = {
+      id: "airport-port-group",
+      label: "Airport & Port",
+      options: airportPortOptions,
+    };
+
+    const accommodationGroup: LocationGroup = {
+      id: "accommodation-group",
+      label: "Accommodations",
+      options: accommodationOptions,
+    };
+
+    return {
+      options: [],
+      groups: [airportPortGroup, accommodationGroup].filter(
+        (g) => g.options.length > 0
+      ),
+    };
+  };
+
+  const getAccommodationOptions = () => {
+    const allOptions = locations.options || [];
+    const allGroups = locations.groups || [];
+
+    // Filter for accommodations only
+    const accommodationOptions = allOptions.filter(
+      (opt) => opt.type === "accommodation"
+    );
+
+    // Extract accommodation groups if they exist
+    const accommodationGroups = allGroups
+      .map((group) => ({
+        ...group,
+        options: group.options.filter((opt) => opt.type === "accommodation"),
+      }))
+      .filter((group) => group.options.length > 0);
+
+    return {
+      options: accommodationOptions,
+      groups: accommodationGroups,
+    };
+  };
+
+  // Initialize location data from IDs
+  useEffect(() => {
+    const { options, groups } = getPickupDropoffOptions();
+    const allLocations = getAllLocations(options, groups);
+
+    if (pickupDropoffPoint) {
+      const location = allLocations.find(
+        (loc) => loc.id === pickupDropoffPoint
+      );
+      if (location) {
+        setInternalPickupDropoffPoint({
+          id: location.id,
+          locationName: location.label,
+        });
+      }
+    } else {
+      // Set default to first airport if available
+      const defaultAirport = allLocations.find((loc) => loc.type === "airport");
+      if (defaultAirport) {
+        const defaultData: LocationData = {
+          id: defaultAirport.id,
+          locationName: defaultAirport.label,
+        };
+        setInternalPickupDropoffPoint(defaultData);
+        onPickupDropoffChange?.(defaultData);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pickupDropoffPoint, locations]);
+
+  useEffect(() => {
+    const { options, groups } = getAccommodationOptions();
+    const allLocations = getAllLocations(options, groups);
+
+    if (accommodation) {
+      const location = allLocations.find((loc) => loc.id === accommodation);
+      if (location) {
+        setInternalAccommodation({
+          id: location.id,
+          locationName: location.label,
+        });
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [accommodation, locations]);
+
+  // Update complete data whenever any field changes
+  useEffect(() => {
+    // Create arrival transfer
+    const arrivalTransfer: RoundTripTransfer = {
+      type: "arrival",
+      paxData: internalPaxData,
+      transferDate: internalArrivalDate,
+      pickupPoint: internalPickupDropoffPoint || undefined,
+      dropoffPoint: internalAccommodation || undefined,
+    };
+
+    // Create departure transfer
+    const departureTransfer: RoundTripTransfer = {
+      type: "departure",
+      paxData: internalPaxData,
+      transferDate: internalDepartureDate,
+      pickupPoint: internalAccommodation || undefined,
+      dropoffPoint: internalPickupDropoffPoint || undefined,
+    };
+
+    const completeData: RoundTripData = {
+      id,
+      paxData: internalPaxData,
+      arrivalDate: internalArrivalDate,
+      departureDate: internalDepartureDate,
+      pickupDropoffPoint: internalPickupDropoffPoint || undefined,
+      accommodation: internalAccommodation || undefined,
+      transfers: [arrivalTransfer, departureTransfer],
+    };
+
+    onChange?.(completeData);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    id,
+    internalPaxData,
+    internalArrivalDate,
+    internalDepartureDate,
+    internalPickupDropoffPoint,
+    internalAccommodation,
+  ]);
+
+  const handlePaxChange = (newPaxData: PaxData) => {
+    setInternalPaxData(newPaxData);
+    onPaxChange?.(newPaxData);
+  };
+
+  const handleDateRangeChange = (dates: string | string[]) => {
+    if (Array.isArray(dates) && dates.length === 2) {
+      setInternalArrivalDate(dates[0]);
+      setInternalDepartureDate(dates[1]);
+      onDatesChange?.(dates[0], dates[1]);
+    }
+  };
+
+  const handlePickupDropoffChange = (location: LocationData | null) => {
+    setInternalPickupDropoffPoint(location);
+    onPickupDropoffChange?.(location);
+  };
+
+  const handleAccommodationChange = (location: LocationData | null) => {
+    setInternalAccommodation(location);
+    onAccommodationChange?.(location);
+  };
+
+  const pickupDropoffOptions = getPickupDropoffOptions();
+  const accommodationOptions = getAccommodationOptions();
+
+  return (
+    <div className={`round-trip ${className}`} data-round-trip-id={id}>
+      <div className="round-trip__content">
+        <div className="round-trip__field round-trip__field--pax">
+          <PaxSelector
+            label="Number of pax"
+            value={internalPaxData}
+            onChange={handlePaxChange}
+            placeholder="2 pax"
+          />
+        </div>
+
+        <div className="round-trip__field round-trip__field--dates">
+          <Text size="sm" variant="regular" className="round-trip__field-label">
+            Arrival date - Departure date
+          </Text>
+          <DateTimePicker
+            placeholder="DD/MM/YYYY - DD/MM/YYYY"
+            mode="calendar"
+            iconPosition="left"
+            numberOfMonths={2}
+            iconBGFull={false}
+            showChevron={true}
+            onValueChange={handleDateRangeChange}
+            selectionMode="range"
+          />
+        </div>
+        <div className="round-trip__field round-trip__field--pickup-dropoff">
+          <LocationDropdown
+            label="Pick up / Drop-off point"
+            options={pickupDropoffOptions.options}
+            groups={pickupDropoffOptions.groups}
+            selectedValue={internalPickupDropoffPoint?.id || null}
+            onSelectionChange={handlePickupDropoffChange}
+            placeholder="Select pick-up / drop-off point"
+            direction={undefined}
+            type="airport-port"
+            showGroupTitles={true}
+          />
+        </div>
+
+        <div className="round-trip__field round-trip__field--accommodation">
+          <LocationDropdown
+            label="Accommodation"
+            options={accommodationOptions.options}
+            groups={accommodationOptions.groups}
+            selectedValue={internalAccommodation?.id || null}
+            onSelectionChange={handleAccommodationChange}
+            placeholder="Select accommodation"
+            direction="dropoff"
+            type="accommodation"
+            showGroupTitles={false}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RoundTrip;

package/src/components/organisms/RoundTrip/index.ts

@@ -1,2 +1,2 @@
-export { default } from './RoundTrip';
-export type { RoundTripProps, RoundTripData, RoundTripTransfer } from './RoundTrip';
+export { default } from './RoundTrip';
+export type { RoundTripProps, RoundTripData, RoundTripTransfer } from './RoundTrip';