related-ui-components 1.3.4 → 1.3.5

package/src/components/TravelBooking/FlightSummary.tsx

@@ -0,0 +1,388 @@
+import { ThemeType, useTheme } from "@/theme";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  StyleProp,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+  TextStyle, // Import TextStyle
+} from "react-native";
+import { NumericStepper, NumericStepperProps } from "../NumericStepper";
+
+export interface PassengerConfig {
+  key: string;
+  name: string;
+  description: string;
+  defaultValue: number;
+  minValue: number;
+  maxValue?: number;
+}
+
+export interface FlightSelection {
+  flightType: string;
+  flightClass: string;
+  passengers: Record<string, number>;
+}
+
+const DEFAULT_PASSENGERS: PassengerConfig[] = [
+  {
+    key: "adults",
+    name: "Adults",
+    description: "12+ years old",
+    defaultValue: 1,
+    minValue: 1,
+    maxValue: 9,
+  },
+  {
+    key: "children",
+    name: "Children",
+    description: "2 - 11 years old",
+    defaultValue: 0,
+    minValue: 0,
+    maxValue: 9,
+  },
+  {
+    key: "infants",
+    name: "Infants",
+    description: "0 - 1 years old",
+    defaultValue: 0,
+    minValue: 0,
+    maxValue: 9,
+  },
+];
+const DEFAULT_FLIGHT_TYPES = ["Round trip", "One way"];
+const DEFAULT_FLIGHT_CLASSES = ["Economy", "Business", "First"];
+
+const getInitialPassengerCounts = (
+  config: PassengerConfig[]
+): Record<string, number> => {
+  return config.reduce((acc, passenger) => {
+    acc[passenger.key] = passenger.defaultValue;
+    return acc;
+  }, {} as Record<string, number>);
+};
+
+// --- Component Props ---
+export interface FlightSummaryProps {
+  // Data Props
+  passengersData?: PassengerConfig[];
+  flightTypesData?: string[];
+  flightClassesData?: string[];
+
+  // State & Callbacks
+  selection?: FlightSelection; // Renamed from 'selection' for clarity
+  onSelectionChange?: (details: FlightSelection) => void;
+
+  // Style Props
+  containerStyle?: StyleProp<ViewStyle>;
+  buttonGroupContainerStyle?: StyleProp<ViewStyle>;
+  buttonStyle?: StyleProp<ViewStyle>;
+  selectedButtonStyle?: StyleProp<ViewStyle>;
+  buttonTextStyle?: StyleProp<TextStyle>;
+  selectedButtonTextStyle?: StyleProp<TextStyle>;
+  passengerSectionStyle?: StyleProp<ViewStyle>;
+  passengerRowStyle?: StyleProp<ViewStyle>;
+  passengerLabelContainerStyle?: StyleProp<ViewStyle>;
+  passengerNameStyle?: StyleProp<TextStyle>;
+  passengerDescriptionStyle?: StyleProp<TextStyle>;
+  // Pass-through styles for NumericStepper
+  stepperContainerStyle?: NumericStepperProps["style"];
+  stepperButtonStyle?: NumericStepperProps["buttonStyle"];
+  stepperButtonTextStyle?: NumericStepperProps["buttonTextStyle"];
+  stepperValueTextStyle?: NumericStepperProps["valueTextStyle"];
+}
+
+// --- Component Implementation ---
+const FlightSummary: React.FC<FlightSummaryProps> = ({
+  // Data
+  passengersData: passengersProp = DEFAULT_PASSENGERS,
+  flightTypesData: flightTypesProp = DEFAULT_FLIGHT_TYPES,
+  flightClassesData: flightClassesProp = DEFAULT_FLIGHT_CLASSES,
+  // State & Callbacks
+  selection,
+  onSelectionChange,
+  // Styles
+  containerStyle,
+  buttonGroupContainerStyle,
+  buttonStyle,
+  selectedButtonStyle,
+  buttonTextStyle,
+  selectedButtonTextStyle,
+  passengerSectionStyle,
+  passengerRowStyle,
+  passengerLabelContainerStyle,
+  passengerNameStyle,
+  passengerDescriptionStyle,
+  stepperContainerStyle,
+  stepperButtonStyle,
+  stepperButtonTextStyle,
+  stepperValueTextStyle,
+}) => {
+  const { theme, isRTL } = useTheme();
+  const styles = useMemo(() => themedStyles(theme, isRTL), [theme, isRTL]);
+
+  const passengersConfig = useMemo(() => passengersProp, [passengersProp]);
+  const flightTypes = useMemo(() => flightTypesProp, [flightTypesProp]);
+  const flightClasses = useMemo(() => flightClassesProp, [flightClassesProp]);
+
+  const [selectedFlightType, setSelectedFlightType] = useState<string>(
+    selection?.flightType ?? flightTypes[0]
+  );
+  const [selectedFlightClass, setSelectedFlightClass] = useState<string>(
+    selection?.flightClass ?? flightClasses[0]
+  );
+  const [passengerCounts, setPassengerCounts] = useState<Record<string, number>>(
+    selection?.passengers ?? getInitialPassengerCounts(passengersConfig)
+  );
+
+  const handleFlightTypeSelect = useCallback(
+    (type: string) => {
+      setSelectedFlightType(type);
+
+      const newState: FlightSelection = {
+        flightType: type,
+        flightClass: selectedFlightClass,
+        passengers: passengerCounts,
+      };
+      onSelectionChange?.(newState);
+    },
+    [selectedFlightClass, passengerCounts, onSelectionChange]
+  );
+
+  const handlePassengerChange = useCallback(
+    (passengerKey: string, action: "increment" | "decrement") => {
+      setPassengerCounts((prevCounts) => {
+        const passengerInfo = passengersConfig.find(
+          (p) => p.key === passengerKey
+        );
+        if (!passengerInfo) return prevCounts;
+
+        const currentVal = prevCounts[passengerKey];
+        const minValue = passengerInfo.minValue;
+
+        const maxValue =
+           passengerInfo.maxValue ?? 99;
+
+        let newValue = currentVal;
+        if (action === "increment") {
+          newValue = Math.min(maxValue, currentVal + 1);
+        } else if (action === "decrement") {
+          newValue = Math.max(minValue, currentVal - 1);
+        }
+
+        // Only update if value changed
+        if (newValue === currentVal) {
+          return prevCounts;
+        }
+
+        const newCounts = { ...prevCounts, [passengerKey]: newValue };
+        const newState: FlightSelection = {
+          flightType: selectedFlightType,
+          flightClass: selectedFlightClass,
+          passengers: newCounts,
+        };
+        onSelectionChange?.(newState);
+        return newCounts;
+      });
+    },
+    [
+      passengersConfig,
+      selectedFlightType,
+      selectedFlightClass,
+      onSelectionChange,
+      // No dependency on passengerCounts due to updater function usage
+    ]
+  );
+
+  const handleFlightClassSelect = useCallback(
+    (fClass: string) => {
+      setSelectedFlightClass(fClass);
+      const newState: FlightSelection = {
+        flightType: selectedFlightType,
+        flightClass: fClass,
+        passengers: passengerCounts,
+      };
+      onSelectionChange?.(newState);
+    },
+    [selectedFlightType, passengerCounts, onSelectionChange]
+  );
+
+  // --- Render Helpers ---
+  const renderButtonGroup = (
+    items: string[],
+    selectedValue: string,
+    onSelect: (item: string) => void
+  ) => (
+    <View style={[styles.buttonGroupContainer, buttonGroupContainerStyle]}>
+      {items.map((item) => {
+        const isSelected = item === selectedValue;
+        return (
+          <TouchableOpacity
+            key={item}
+            style={[
+              styles.button,
+              buttonStyle,
+              isSelected && styles.selectedButton,
+              isSelected && selectedButtonStyle,
+            ]}
+            onPress={() => onSelect(item)}
+            activeOpacity={0.7}
+          >
+            <Text
+              style={[
+                styles.buttonText,
+                buttonTextStyle, 
+                isSelected && styles.selectedButtonText,
+                isSelected && selectedButtonTextStyle,
+              ]}
+            >
+              {item}
+            </Text>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+
+  useEffect(() => {
+    onSelectionChange?.({
+      flightType: selectedFlightType,
+      flightClass: selectedFlightClass,
+      passengers: passengerCounts,
+    });
+  }, []);
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      {/* Flight Type */}
+      {renderButtonGroup(
+        flightTypes,
+        selectedFlightType,
+        handleFlightTypeSelect
+      )}
+
+      {/* 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,
+                ]}
+              >
+                {passenger.description}
+              </Text>
+            </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}
+            />
+          </View>
+        ))}
+      </View>
+
+      {/* Flight Class */}
+      {renderButtonGroup(
+        flightClasses,
+        selectedFlightClass,
+        handleFlightClassSelect
+      )}
+    </View>
+  );
+};
+
+const themedStyles = (theme: ThemeType, isRTL: boolean) =>
+  StyleSheet.create({
+    container: {
+      backgroundColor: theme.surface,
+      padding: 16,
+    },
+    buttonGroupContainer: {
+      flexDirection: isRTL ? "row-reverse" : "row",
+      // marginBottom: 10, 
+      marginTop: 5,
+      justifyContent: "flex-start",
+      flexWrap: "wrap",
+      gap: 8,
+    },
+    button: {
+      paddingVertical: 8,
+      paddingHorizontal: 16,
+      borderRadius: 16,
+      borderWidth: 1,
+      borderColor: theme.border,
+      backgroundColor: theme.surface,
+    },
+    selectedButton: {
+      borderColor: theme.primary,
+      backgroundColor: theme.primary,
+    },
+    buttonText: {
+      color: theme.onSurface,
+      fontWeight: "500",
+      fontSize: 14, 
+    },
+    selectedButtonText: {
+      color: theme.onPrimary,
+      fontWeight: "bold",
+      fontSize: 14,
+    },
+    passengerSection: {
+      marginVertical: 15,
+    },
+    passengerRow: {
+      flexDirection: isRTL ? "row-reverse" : "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      paddingVertical: 10,
+      borderBottomWidth: StyleSheet.hairlineWidth,
+      borderBottomColor: theme.divider,
+      // Remove width: '100%' unless absolutely necessary
+    },
+    passengerLabelContainer: {
+      flexDirection: "column",
+      alignItems: isRTL ? "flex-end" : "flex-start",
+      flexShrink: 1,
+      marginRight: isRTL ? 0 : 8,
+      marginLeft: isRTL ? 8 : 0,
+    },
+    passengerName: {
+      fontSize: 16,
+      fontWeight: "bold",
+      color: theme.onSurface,
+    },
+    passengerDescription: {
+      fontSize: 12,
+      color: theme.secondaryText || theme.onSurface,
+      opacity: 0.8,
+    },
+  });
+
+export default FlightSummary;