related-ui-components 2.7.5 → 2.7.7

package/src/components/TravelBooking/FlightSummary.tsx

@@ -3,37 +3,49 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import {
   StyleProp,
   StyleSheet,
+  Text,
   TouchableOpacity,
   View,
   ViewStyle,
   TextStyle,
 } from "react-native";
 import { NumericStepper, NumericStepperProps } from "../NumericStepper";
-import { ThemedText as Text } from "../ui";
+import RNPickerSelect from "react-native-picker-select";
+import { Ionicons } from "@expo/vector-icons";
+
+// --- TYPE DEFINITIONS (Updated) ---
 
 export interface PassengerConfig {
-  key: string;
+  key: "adults" | "children" | "infants";
   name: string;
   description: string;
   defaultValue: number;
   minValue: number;
   maxValue?: number;
+  // Age range for children/infants
+  ageRange?: { min: number; max: number };
+  defaultAge?: number;
 }
-export interface FlightTypeConfig {
-  value: string;
-  name: string;
-}
-export interface FlightClassConfig {
-  value: string;
-  name: string;
+
+// Represents an individual child or infant with a selectable age
+export interface IndividualPassenger {
+  id: string;
+  age: number;
 }
 
+// Updated FlightSelection to handle individual passengers
 export interface FlightSelection {
   flightType: string;
   flightClass: string;
-  passengers: Record<string, number>;
+  passengers: {
+    adults: number;
+    children: IndividualPassenger[];
+    infants: IndividualPassenger[];
+  };
 }
 
+// --- CONFIGURATION ---
+
 const DEFAULT_PASSENGERS: PassengerConfig[] = [
   {
     key: "adults",
@@ -49,7 +61,9 @@ const DEFAULT_PASSENGERS: PassengerConfig[] = [
     description: "2 - 11 years old",
     defaultValue: 0,
     minValue: 0,
-    maxValue: 9,
+    maxValue: 6,
+    ageRange: { min: 2, max: 11 },
+    defaultAge: 5,
   },
   {
     key: "infants",
@@ -57,43 +71,55 @@ const DEFAULT_PASSENGERS: PassengerConfig[] = [
     description: "0 - 1 years old",
     defaultValue: 0,
     minValue: 0,
-    maxValue: 9,
+    maxValue: 4,
+    ageRange: { min: 0, max: 1 },
+    defaultAge: 0,
   },
 ];
-const DEFAULT_FLIGHT_TYPES: FlightTypeConfig[] = [
+
+const DEFAULT_FLIGHT_TYPES = [
   { value: "ROUND_TRIP", name: "Round trip" },
   { value: "ONE_WAY", name: "One way" },
 ];
-const DEFAULT_FLIGHT_CLASSES: FlightClassConfig[] = [
+const DEFAULT_FLIGHT_CLASSES = [
   { value: "ECONOMY", name: "Economy" },
   { value: "BUSINESS", name: "Business" },
   { value: "FIRST", name: "First" },
 ];
 
-const getInitialPassengerCounts = (
+// --- HELPER FUNCTION ---
+const getInitialPassengerState = (
   config: PassengerConfig[]
-): Record<string, number> => {
-  return config.reduce((acc, passenger) => {
-    acc[passenger.key] = passenger.defaultValue;
-    return acc;
-  }, {} as Record<string, number>);
+): FlightSelection["passengers"] => {
+  return {
+    adults: config.find((p) => p.key === "adults")?.defaultValue ?? 1,
+    children: Array.from(
+      { length: config.find((p) => p.key === "children")?.defaultValue ?? 0 },
+      (_, i) => ({
+        id: `child_${i}_${Date.now()}`,
+        age: config.find((p) => p.key === "children")?.defaultAge ?? 2,
+      })
+    ),
+    infants: Array.from(
+      { length: config.find((p) => p.key === "infants")?.defaultValue ?? 0 },
+      (_, i) => ({
+        id: `infant_${i}_${Date.now()}`,
+        age: config.find((p) => p.key === "infants")?.defaultAge ?? 0,
+      })
+    ),
+  };
 };
 
-// --- Component Props ---
+// --- PROPS INTERFACE ---
 export interface FlightSummaryProps {
-  // Data Props
   passengersData?: PassengerConfig[];
-  flightTypesData?: FlightTypeConfig[];
-  flightClassesData?: FlightClassConfig[];
-
+  flightTypesData?: { value: string; name: string }[];
+  flightClassesData?: { value: string; name: string }[];
   flightTypeLabel?: string;
   flightClassLabel?: string;
-
-  // State & Callbacks
-  selection?: FlightSelection; // Renamed from 'selection' for clarity
+  selection?: FlightSelection;
   onSelectionChange?: (details: FlightSelection) => void;
-
-  // Style Props
+  formatPassengerAgeLabel?: (passengerType: string, index: number) => string;
   containerStyle?: StyleProp<ViewStyle>;
   buttonGroupContainerStyle?: StyleProp<ViewStyle>;
   buttonStyle?: StyleProp<ViewStyle>;
@@ -106,26 +132,24 @@ export interface FlightSummaryProps {
   passengerNameStyle?: StyleProp<TextStyle>;
   passengerDescriptionStyle?: StyleProp<TextStyle>;
   labelStyle?: StyleProp<TextStyle>;
-
-  // Pass-through styles for NumericStepper
+  agePickerRowStyle?: StyleProp<ViewStyle>;
+  agePickerLabelStyle?: StyleProp<TextStyle>;
   stepperContainerStyle?: NumericStepperProps["style"];
   stepperButtonStyle?: NumericStepperProps["buttonStyle"];
   stepperButtonTextStyle?: NumericStepperProps["buttonTextStyle"];
   stepperValueTextStyle?: NumericStepperProps["valueTextStyle"];
 }
 
-// --- Component Implementation ---
+// --- COMPONENT IMPLEMENTATION ---
 const FlightSummary: React.FC<FlightSummaryProps> = ({
-  // Data
   passengersData: passengersProp = DEFAULT_PASSENGERS,
   flightTypesData: flightTypesProp = DEFAULT_FLIGHT_TYPES,
   flightClassesData: flightClassesProp = DEFAULT_FLIGHT_CLASSES,
   flightClassLabel = "Class",
   flightTypeLabel = "Type",
-  // State & Callbacks
   selection,
   onSelectionChange,
-  // Styles
+  formatPassengerAgeLabel = (passengerType, index) => `${passengerType} ${index} Age`, 
   containerStyle,
   buttonGroupContainerStyle,
   buttonStyle,
@@ -137,11 +161,13 @@ const FlightSummary: React.FC<FlightSummaryProps> = ({
   passengerLabelContainerStyle,
   passengerNameStyle,
   passengerDescriptionStyle,
+  labelStyle,
+  agePickerRowStyle,
+  agePickerLabelStyle,
   stepperContainerStyle,
   stepperButtonStyle,
   stepperButtonTextStyle,
   stepperValueTextStyle,
-  labelStyle,
 }) => {
   const { theme, isRTL } = useTheme();
   const styles = useMemo(() => themedStyles(theme, isRTL), [theme, isRTL]);
@@ -156,97 +182,90 @@ const FlightSummary: React.FC<FlightSummaryProps> = ({
   const [selectedFlightClass, setSelectedFlightClass] = useState<string>(
     selection?.flightClass ?? flightClasses[0].value
   );
-  const [passengerCounts, setPassengerCounts] = useState<
-    Record<string, number>
-  >(selection?.passengers ?? getInitialPassengerCounts(passengersConfig));
-
-  const handleFlightTypeSelect = useCallback(
-    (type: FlightTypeConfig) => {
-      setSelectedFlightType(type.value);
-
-      const newState: FlightSelection = {
-        flightType: type.value,
-        flightClass: selectedFlightClass,
-        passengers: passengerCounts,
-      };
-      onSelectionChange?.(newState);
-    },
-    [selectedFlightClass, passengerCounts, onSelectionChange]
+  const [passengers, setPassengers] = useState<FlightSelection["passengers"]>(
+    selection?.passengers ?? getInitialPassengerState(passengersConfig)
   );
 
-  const handlePassengerChange = useCallback(
-    (passengerKey: string, action: "increment" | "decrement") => {
-      setPassengerCounts((prevCounts) => {
-        const passengerInfo = passengersConfig.find(
-          (p) => p.key === passengerKey
-        );
-        if (!passengerInfo) return prevCounts;
+  // Memoize the state to be sent upwards
+  const currentSelection = useMemo(
+    () => ({
+      flightType: selectedFlightType,
+      flightClass: selectedFlightClass,
+      passengers,
+    }),
+    [selectedFlightType, selectedFlightClass, passengers]
+  );
 
-        const currentVal = prevCounts[passengerKey];
-        const minValue = passengerInfo.minValue;
+  // Effect to call onSelectionChange when the memoized state changes
+  useEffect(() => {
+    onSelectionChange?.(currentSelection);
+  }, [currentSelection, onSelectionChange]);
 
-        const maxValue = passengerInfo.maxValue ?? 99;
+  const handlePassengerCountChange = useCallback(
+    (
+      key: "adults" | "children" | "infants",
+      action: "increment" | "decrement"
+    ) => {
+      setPassengers((prev) => {
+        const config = passengersConfig.find((p) => p.key === key);
+        if (!config) return prev;
 
-        let newValue = currentVal;
-        if (action === "increment") {
-          newValue = Math.min(maxValue, currentVal + 1);
-        } else if (action === "decrement") {
-          newValue = Math.max(minValue, currentVal - 1);
-        }
+        let newPassengersState = { ...prev };
 
-        // Only update if value changed
-        if (newValue === currentVal) {
-          return prevCounts;
+        if (key === "adults") {
+          const currentVal = prev.adults;
+          const min = config.minValue;
+          const max = config.maxValue ?? 99;
+          let newValue = currentVal;
+          if (action === "increment") newValue = Math.min(max, currentVal + 1);
+          else newValue = Math.max(min, currentVal - 1);
+          newPassengersState.adults = newValue;
+        } else {
+          // Handle children and infants (arrays)
+          const currentArray = prev[key];
+          if (action === "increment") {
+            if (currentArray.length < (config.maxValue ?? 99)) {
+              const newPassenger: IndividualPassenger = {
+                id: `${key}_${Date.now()}`,
+                age: config.defaultAge ?? 0,
+              };
+              newPassengersState[key] = [...currentArray, newPassenger];
+            }
+          } else {
+            if (currentArray.length > config.minValue) {
+              newPassengersState[key] = currentArray.slice(0, -1);
+            }
+          }
         }
-
-        const newCounts = { ...prevCounts, [passengerKey]: newValue };
-        const newState: FlightSelection = {
-          flightType: selectedFlightType,
-          flightClass: selectedFlightClass,
-          passengers: newCounts,
-        };
-        onSelectionChange?.(newState);
-        return newCounts;
+        return newPassengersState;
       });
     },
-    [
-      passengersConfig,
-      selectedFlightType,
-      selectedFlightClass,
-      onSelectionChange,
-      // No dependency on passengerCounts due to updater function usage
-    ]
+    [passengersConfig]
   );
 
-  const handleFlightClassSelect = useCallback(
-    (fClass: FlightClassConfig) => {
-      setSelectedFlightClass(fClass.value);
-      const newState: FlightSelection = {
-        flightType: selectedFlightType,
-        flightClass: fClass.value,
-        passengers: passengerCounts,
-      };
-      onSelectionChange?.(newState);
+  const handleIndividualAgeChange = useCallback(
+    (key: "children" | "infants", id: string, newAge: number) => {
+      // Prevent update if newAge is null/undefined (from picker placeholder)
+      if (newAge === null || newAge === undefined) return;
+
+      setPassengers((prev) => {
+        const newArray = prev[key].map((p) =>
+          p.id === id ? { ...p, age: newAge } : p
+        );
+        return { ...prev, [key]: newArray };
+      });
     },
-    [selectedFlightType, passengerCounts, onSelectionChange]
+    []
   );
 
-  // --- Render Helpers ---
   const renderButtonGroup = (
-    items: FlightClassConfig[] | FlightTypeConfig[],
+    items: any[],
     selectedValue: string,
-    onSelect: (item: { value: string; name: string }) => void,
+    onSelect: (item: any) => void,
     label?: string
   ) => (
-    <View>
-      <Text
-        style={[
-          { color: theme.labelText, fontSize: 12, marginBottom: 6 },
-          labelStyle,
-        ]}
-      >
-        {label}
-      </Text>
+    <View style={styles.sectionContainer}>
+      <Text style={[styles.sectionLabel, labelStyle]}>{label}</Text>
       <View style={[styles.buttonGroupContainer, buttonGroupContainerStyle]}>
         {items.map((item) => {
           const isSelected = item.value === selectedValue;
@@ -279,71 +298,117 @@ const FlightSummary: React.FC<FlightSummaryProps> = ({
     </View>
   );
 
-  useEffect(() => {
-    onSelectionChange?.({
-      flightType: selectedFlightType,
-      flightClass: selectedFlightClass,
-      passengers: passengerCounts,
-    });
-  }, []);
+  // Helper to generate age items for the picker
+  const getAgePickerItems = (config: PassengerConfig | undefined) => {
+    if (!config?.ageRange) return [];
+    const { min, max } = config.ageRange;
+    return Array.from({ length: max - min + 1 }, (_, i) => ({
+      label: `${min + i}`,
+      value: min + i,
+    }));
+  };
 
   return (
     <View style={[styles.container, containerStyle]}>
-      {/* Flight Type */}
       {renderButtonGroup(
         flightTypes,
         selectedFlightType,
-        handleFlightTypeSelect,
+        (item) => setSelectedFlightType(item.value),
         flightTypeLabel
       )}
 
-      {/* Passengers */}
       <View style={[styles.passengerSection, passengerSectionStyle]}>
-        {passengersConfig.map((passenger) => (
-          <View
-            key={passenger.key}
-            style={[styles.passengerRow, passengerRowStyle]}
-          >
-            <View
-              style={[
-                styles.passengerLabelContainer,
-                passengerLabelContainerStyle,
-              ]}
-            >
-              <Text style={[styles.passengerName, passengerNameStyle]}>
-                {passenger.name}
-              </Text>
-              <Text
-                style={[styles.passengerDescription, passengerDescriptionStyle]}
+        {passengersConfig.map((config) => (
+          <View key={config.key}>
+            <View style={[styles.passengerRow, passengerRowStyle]}>
+              <View
+                style={[
+                  styles.passengerLabelContainer,
+                  passengerLabelContainerStyle,
+                ]}
               >
-                {passenger.description}
-              </Text>
+                <Text style={[styles.passengerName, passengerNameStyle]}>
+                  {config.name}
+                </Text>
+                <Text
+                  style={[
+                    styles.passengerDescription,
+                    passengerDescriptionStyle,
+                  ]}
+                >
+                  {config.description}
+                </Text>
+              </View>
+              <NumericStepper
+                value={
+                  config.key === "adults"
+                    ? passengers.adults
+                    : passengers[config.key].length
+                }
+                minValue={config.minValue}
+                maxValue={config.maxValue}
+                onIncrement={() =>
+                  handlePassengerCountChange(config.key, "increment")
+                }
+                onDecrement={() =>
+                  handlePassengerCountChange(config.key, "decrement")
+                }
+                style={stepperContainerStyle}
+                buttonStyle={stepperButtonStyle}
+                buttonTextStyle={stepperButtonTextStyle}
+                valueTextStyle={stepperValueTextStyle}
+              />
             </View>
-            <NumericStepper
-              value={passengerCounts[passenger.key]}
-              minValue={passenger.minValue}
-              maxValue={passenger.maxValue ?? 99}
-              onIncrement={() =>
-                handlePassengerChange(passenger.key, "increment")
-              }
-              onDecrement={() =>
-                handlePassengerChange(passenger.key, "decrement")
-              }
-              // Pass through stepper styles
-              style={stepperContainerStyle}
-              buttonStyle={stepperButtonStyle}
-              buttonTextStyle={stepperButtonTextStyle}
-              valueTextStyle={stepperValueTextStyle}
-            />
+
+            {/* Render age pickers for each child/infant */}
+            {(config.key === "children" || config.key === "infants") &&
+              passengers[config.key].map((passenger, index) => (
+                <View
+                  key={passenger.id}
+                  style={[styles.agePickerRow, agePickerRowStyle]}
+                >
+                  <Text style={[styles.agePickerLabel, agePickerLabelStyle]}>
+                    {" "}
+                    {formatPassengerAgeLabel(config.name, index + 1)}
+                  </Text>
+                  <View style={styles.pickerContainer}>
+                    <RNPickerSelect
+                      value={passenger.age}
+                      onValueChange={(value) =>
+                        handleIndividualAgeChange(
+                          config.key as any,
+                          passenger.id,
+                          value
+                        )
+                      }
+                      items={getAgePickerItems(config)}
+                      placeholder={{}}
+                      style={{
+                        inputIOS: styles.pickerInput,
+                        inputAndroid: styles.pickerInput,
+                        iconContainer: styles.pickerIconContainer,
+                      }}
+                      textInputProps={{ pointerEvents: "none" }}
+                      useNativeAndroidPickerStyle={false}
+                      Icon={() => (
+                        <Ionicons
+                          name="chevron-down"
+                          size={20}
+                          color={theme.helper}
+                        />
+                      )}
+                    />
+                  </View>
+                </View>
+              ))}
           </View>
         ))}
       </View>
 
-      {/* Flight Class */}
       {renderButtonGroup(
         flightClasses,
         selectedFlightClass,
-        handleFlightClassSelect,
+        (item) => setSelectedFlightClass(item.value),
         flightClassLabel
       )}
     </View>
@@ -356,11 +421,18 @@ const themedStyles = (theme: ThemeType, isRTL: boolean) =>
       backgroundColor: theme.surface,
       padding: 16,
     },
+    sectionContainer: {
+      marginBottom: 20,
+    },
+    sectionLabel: {
+      color: theme.labelText,
+      fontSize: 12,
+      fontWeight: "600",
+      textTransform: "uppercase",
+      marginBottom: 8,
+    },
     buttonGroupContainer: {
       flexDirection: "row",
-      // marginBottom: 10,
-      marginTop: 5,
-      justifyContent: "flex-start",
       flexWrap: "wrap",
       gap: 8,
     },
@@ -384,7 +456,6 @@ const themedStyles = (theme: ThemeType, isRTL: boolean) =>
     selectedButtonText: {
       color: theme.onPrimary,
       fontWeight: "bold",
-      fontSize: 14,
     },
     passengerSection: {
       marginVertical: 15,
@@ -396,14 +467,11 @@ const themedStyles = (theme: ThemeType, isRTL: boolean) =>
       paddingVertical: 10,
       borderBottomWidth: StyleSheet.hairlineWidth,
       borderBottomColor: theme.divider,
-      // Remove width: '100%' unless absolutely necessary
     },
     passengerLabelContainer: {
       flexDirection: "column",
       alignItems: "flex-start",
       flexShrink: 1,
-      // marginRight: isRTL ? 0 : 8,
-      // marginLeft: isRTL ? 8 : 0,
     },
     passengerName: {
       fontSize: 16,
@@ -412,9 +480,41 @@ const themedStyles = (theme: ThemeType, isRTL: boolean) =>
     },
     passengerDescription: {
       fontSize: 12,
-      color: theme.text || theme.onSurface,
+      color: theme.helper,
       opacity: 0.8,
     },
+    agePickerRow: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      paddingVertical: 8,
+      paddingHorizontal: 16,
+      backgroundColor: theme.background,
+      borderBottomWidth: StyleSheet.hairlineWidth,
+      borderColor: theme.divider,
+    },
+    agePickerLabel: {
+      fontSize: 14,
+      color: theme.onBackground,
+    },
+    pickerContainer: {
+      width: 120,
+      height: 40,
+      borderWidth: 1,
+      borderColor: theme.border,
+      borderRadius: 8,
+      justifyContent: "center",
+    },
+    pickerInput: {
+      fontSize: 14,
+      paddingHorizontal: 10,
+      paddingVertical: 8,
+      color: theme.onSurface,
+    },
+    pickerIconContainer: {
+      top: 10,
+      right: 10,
+    },
   });
 
 export default FlightSummary;