@devtravelcode/widget-native 1.0.0

package/dist/modules/search-form/flight/FlightSearchForm.js

@@ -0,0 +1,147 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { View, Text, TouchableOpacity, StyleSheet, ScrollView, ActivityIndicator, } from "react-native";
+import { format, addDays } from "date-fns";
+import LocationInput from "./LocationInput";
+import DatePicker from "./DatePicker";
+import PassengersPicker from "./PassengersPicker";
+import AirlinesSelector from "./AirlinesSelector";
+import SwitchLocationBtn from "./SwitchLocationBtn";
+import { useWidget } from "../../../context/WidgetContext";
+import SearchExpiredPopup from "../../search-form/SearchExpiredPopup";
+import { Colors, Spacing, BorderRadius, FontSize } from "../../../theme/colors";
+import { formStyles } from "../../../theme/formStyles";
+const FlightSearchForm = ({ startSearch, loading, error, translations = {}, defaults = null, isPreview, expiration, hasSearched, }) => {
+    const { lang, currency, config, colors } = useWidget();
+    const defaultFromLocation = config?.defaults?.flights?.from || "VNO";
+    const defaultToLocation = config?.defaults?.flights?.to || "BCN";
+    const today = new Date();
+    const defaultFrom = format(addDays(today, 3), "yyyy-MM-dd");
+    const defaultTo = format(addDays(today, 10), "yyyy-MM-dd");
+    const [userEdited, setUserEdited] = useState(false);
+    const [locationFrom, setLocationFrom] = useState("");
+    const [locationTo, setLocationTo] = useState("");
+    const [dates, setDates] = useState([defaultFrom, defaultTo]);
+    const [passengers, setPassengers] = useState({
+        adults: 1,
+        children: 0,
+        infants: 0,
+    });
+    const [cabinClass, setCabinClass] = useState("economy");
+    const [airlines, setAirlines] = useState([]);
+    const [formErrors, setFormErrors] = useState({
+        locationFrom: "",
+        locationTo: "",
+        date: "",
+    });
+    useEffect(() => {
+        if (config?.defaults?.flights) {
+            const from = config.defaults.flights.from || "VNO";
+            const to = config.defaults.flights.to || "BCN";
+            setLocationFrom(from);
+            setLocationTo(to);
+        }
+    }, [config]);
+    useEffect(() => {
+        setLocationFrom(defaultFromLocation);
+        setLocationTo(defaultToLocation);
+    }, []);
+    const { isExpired: isFlightSearchExpired, startTimer, ignore, reset, } = expiration;
+    const refreshFlightSearch = () => {
+        startTimer();
+        ignore();
+        handleSearchClick();
+    };
+    const handleSearchClick = async () => {
+        startTimer();
+        const errors = {
+            locationFrom: !locationFrom
+                ? translations["error_location_from"] || "Enter departure city"
+                : "",
+            locationTo: !locationTo
+                ? translations["error_location_to"] || "Enter arrival city"
+                : "",
+            date: !dates[0]
+                ? translations["error_date"] || "Select departure date"
+                : "",
+        };
+        setFormErrors(errors);
+        if (Object.values(errors).some((err) => err !== ""))
+            return;
+        const toApiDate = (d) => d.split("-").reverse().join(".");
+        const params = {
+            locationFrom,
+            locationTo,
+            date: toApiDate(dates[0]),
+            dateEnd: dates[1] ? toApiDate(dates[1]) : null,
+            cabinClass,
+            adults: passengers.adults,
+            children: passengers.children,
+            infants: passengers.infants,
+            airlines: airlines.length ? airlines : undefined,
+        };
+        await startSearch(params);
+    };
+    useEffect(() => {
+        if (!config?.defaults?.flights)
+            return;
+        if (userEdited)
+            return;
+        const from = config.defaults.flights.from || "VNO";
+        const to = config.defaults.flights.to || "BCN";
+        setLocationFrom(from);
+        setLocationTo(to);
+    }, [config?.defaults?.flights]);
+    return (_jsxs(ScrollView, { style: local.container, showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled", children: [_jsxs(View, { style: [formStyles.formCard, { backgroundColor: colors.form || Colors.surface }], children: [_jsxs(View, { children: [_jsxs(View, { style: local.locationCard, children: [_jsx(Text, { style: local.labelInner, children: translations["from_label_flight"] || "From" }), _jsx(LocationInput, { label: translations["from_label_flight"] || "From", value: locationFrom, onChange: (val) => {
+                                            setLocationFrom(val);
+                                            setUserEdited(true);
+                                            if (formErrors.locationFrom)
+                                                setFormErrors((p) => ({ ...p, locationFrom: "" }));
+                                        }, lang: lang, translations: translations, minimal: true }), _jsx(View, { style: local.locationDivider, children: _jsx(SwitchLocationBtn, { from: locationFrom, to: locationTo, setFrom: (val) => {
+                                                setLocationFrom(val);
+                                                setUserEdited(true);
+                                            }, setTo: (val) => {
+                                                setLocationTo(val);
+                                                setUserEdited(true);
+                                            } }) }), _jsxs(View, { children: [_jsx(Text, { style: local.labelInner, children: translations["to_label_flight"] || "To" }), _jsx(LocationInput, { label: translations["to_label_flight"] || "To", value: locationTo, onChange: (val) => {
+                                                    setLocationTo(val);
+                                                    setUserEdited(true);
+                                                    if (formErrors.locationTo)
+                                                        setFormErrors((p) => ({ ...p, locationTo: "" }));
+                                                }, lang: lang, translations: translations, minimal: true })] })] }), formErrors.locationFrom ? (_jsx(Text, { style: formStyles.errorText, children: formErrors.locationFrom })) : null, formErrors.locationTo ? (_jsx(Text, { style: formStyles.errorText, children: formErrors.locationTo })) : null] }), _jsxs(View, { children: [_jsx(DatePicker, { value: dates, onChange: (val) => {
+                                    setDates(val);
+                                    if (formErrors.date)
+                                        setFormErrors((p) => ({ ...p, date: "" }));
+                                }, lang: lang, translations: translations, mode: "flight" }), formErrors.date ? (_jsx(Text, { style: formStyles.errorText, children: formErrors.date })) : null] }), _jsx(PassengersPicker, { value: passengers, onChange: setPassengers, cabinClass: cabinClass, onCabinClassChange: setCabinClass, translations: translations }), _jsx(AirlinesSelector, { value: airlines, onChange: setAirlines, translations: translations }), _jsx(TouchableOpacity, { style: [
+                            formStyles.searchButton,
+                            { backgroundColor: colors.primary || Colors.primary },
+                            loading && formStyles.searchButtonDisabled,
+                        ], onPress: handleSearchClick, disabled: loading, activeOpacity: 0.8, children: loading ? (_jsxs(View, { style: formStyles.searchButtonContent, children: [_jsx(ActivityIndicator, { size: "small", color: Colors.textOnPrimary }), _jsx(Text, { style: formStyles.searchButtonText, children: translations?.["search_btn_label_start"] || "Searching..." })] })) : (_jsx(Text, { style: formStyles.searchButtonText, children: translations?.["search_btn_label"] || "Search flights" })) }), error ? _jsx(Text, { style: formStyles.searchError, children: error }) : null] }), !isPreview && hasSearched && (_jsx(SearchExpiredPopup, { isOpen: isFlightSearchExpired, onRefresh: refreshFlightSearch, onClose: ignore, translations: translations, type: "flight" }))] }));
+};
+const local = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    locationCard: {
+        backgroundColor: Colors.inputBg,
+        borderRadius: BorderRadius.lg,
+        overflow: "hidden",
+    },
+    locationDivider: {
+        borderTopWidth: 1,
+        borderTopColor: Colors.border,
+        height: 0,
+        alignItems: "flex-end",
+        paddingRight: Spacing.md,
+        zIndex: 2,
+    },
+    labelInner: {
+        color: Colors.label,
+        fontWeight: "600",
+        fontSize: FontSize.sm,
+        marginBottom: 2,
+        paddingTop: Spacing.sm,
+        paddingHorizontal: Spacing.lg,
+    },
+});
+export default FlightSearchForm;

package/dist/modules/search-form/flight/LocationInput.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+type LocationInputProps = {
+    label: string;
+    value: string;
+    onChange: (val: string) => void;
+    lang: string;
+    translations: Record<string, string>;
+    minimal?: boolean;
+};
+declare const LocationInput: React.FC<LocationInputProps>;
+export default LocationInput;

package/dist/modules/search-form/flight/LocationInput.js

@@ -0,0 +1,294 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from "react";
+import { View, Text, TextInput, TouchableOpacity, Modal, FlatList, StyleSheet, ActivityIndicator, } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import Svg, { Circle, Path } from "react-native-svg";
+import { useAirportSearch } from "../../hooks/useAirportSearch";
+import { useApiToken } from "../../../utils/getToken";
+import { Colors, Spacing, FontSize } from "../../../theme/colors";
+import { formStyles } from "../../../theme/formStyles";
+import { CloseIcon } from "../../../store";
+const POPULAR_LOCATIONS = [
+    {
+        id: 1,
+        code: "WAW",
+        title: "Варшава",
+        titleEn: "Warsaw",
+        country: { id: 1001, title: "Польша", titleEn: "Poland" },
+        isAirport: true,
+    },
+    {
+        id: 2,
+        code: "BER",
+        title: "Берлин",
+        titleEn: "Berlin",
+        country: { id: 1002, title: "Германия", titleEn: "Germany" },
+        isAirport: true,
+    },
+    {
+        id: 3,
+        code: "VNO",
+        title: "Вильнюс",
+        titleEn: "Vilnius",
+        country: { id: 1003, title: "Литва", titleEn: "Lithuania" },
+        isAirport: true,
+    },
+    {
+        id: 4,
+        code: "IST",
+        title: "Стамбул",
+        titleEn: "Istanbul",
+        country: { id: 1004, title: "Турция", titleEn: "Turkey" },
+        isAirport: true,
+    },
+    {
+        id: 5,
+        code: "CDG",
+        title: "Париж",
+        titleEn: "Paris",
+        country: { id: 1005, title: "Франция", titleEn: "France" },
+        isAirport: true,
+    },
+];
+const API_URL = "https://api.travel-code.com/v1/data/airports";
+const SearchIcon = () => (_jsxs(Svg, { width: 19, height: 18, viewBox: "0 0 19 18", fill: "none", children: [_jsx(Circle, { cx: 7, cy: 7, r: 6, stroke: Colors.primary, strokeWidth: 2 }), _jsx(Path, { d: "M12 11L17.2857 16.0902", stroke: Colors.primary, strokeWidth: 2, strokeLinecap: "round" })] }));
+const LocationInput = ({ label, value, onChange, lang, translations, minimal = false, }) => {
+    const token = useApiToken();
+    const insets = useSafeAreaInsets();
+    const getLabel = (loc) => lang === "en" ? loc.titleEn || loc.title : loc.title;
+    const [query, setQuery] = useState("");
+    const [savedValue, setSavedValue] = useState({
+        code: value || "",
+        title: "",
+        titleEn: "",
+        country: undefined,
+    });
+    const [isPopupOpen, setIsPopupOpen] = useState(false);
+    const [allowSearch, setAllowSearch] = useState(false);
+    const { locations, loading } = useAirportSearch(allowSearch ? query : "");
+    const fetchLocationByIata = useCallback(async (iata) => {
+        try {
+            const res = await fetch(`${API_URL}/${iata}?type=iata&scope=country`, {
+                headers: {
+                    "Content-Type": "application/json",
+                    Authorization: `Bearer ${token}`,
+                },
+            });
+            if (!res.ok)
+                throw new Error(`Error ${res.status}`);
+            const data = await res.json();
+            if (data?.title) {
+                const country = data.country
+                    ? {
+                        id: data.country.id ?? 0,
+                        title: data.country.title,
+                        titleEn: data.country.titleEn || data.country.title,
+                    }
+                    : undefined;
+                setSavedValue({
+                    code: iata,
+                    title: data.title,
+                    titleEn: data.titleEn || "",
+                    country,
+                });
+                setQuery(getLabel(data));
+            }
+            else {
+                setQuery(iata);
+            }
+        }
+        catch (e) {
+            console.warn("Error loading location by IATA:", iata, e);
+            setQuery(iata);
+        }
+        finally {
+            setAllowSearch(true);
+        }
+    }, [token, lang]);
+    useEffect(() => {
+        if (value && value !== savedValue.code) {
+            setAllowSearch(false);
+            fetchLocationByIata(value);
+        }
+    }, [value]);
+    useEffect(() => {
+        if (!savedValue.code)
+            return;
+        const newLabel = getLabel(savedValue);
+        setQuery(newLabel);
+    }, [lang]);
+    const handleSelect = (loc) => {
+        const country = loc.country
+            ? {
+                id: loc.country.id ?? 0,
+                title: loc.country.title,
+                titleEn: loc.country.titleEn || loc.country.title,
+            }
+            : undefined;
+        onChange(loc.code);
+        setQuery(getLabel(loc));
+        setSavedValue({
+            code: loc.code,
+            title: loc.title,
+            titleEn: loc.titleEn,
+            country,
+        });
+        setIsPopupOpen(false);
+    };
+    const handleClose = () => {
+        if (!query.trim()) {
+            setQuery(savedValue.title || savedValue.code);
+        }
+        setIsPopupOpen(false);
+    };
+    const isEmpty = !query.trim();
+    const isSelected = !!savedValue.title &&
+        query.trim() === (lang === "en" ? savedValue.titleEn || savedValue.title : savedValue.title);
+    const isSearching = query.trim() && !isSelected;
+    const renderLocationItem = ({ item: loc }) => {
+        if (!loc.code)
+            return null;
+        const cityName = getLabel(loc);
+        const countryName = loc.country ? getLabel(loc.country) : "";
+        return (_jsx(TouchableOpacity, { style: styles.locationItem, onPress: () => handleSelect(loc), activeOpacity: 0.7, children: _jsx(View, { style: styles.locationItemContent, children: _jsxs(View, { style: styles.locationInfo, children: [_jsxs(Text, { style: styles.locationCity, children: [cityName, countryName ? (_jsx(Text, { style: styles.locationCountry, children: `  ${countryName}` })) : null] }), _jsx(Text, { style: styles.locationCode, children: loc.code })] }) }) }));
+    };
+    const getListData = () => {
+        if (loading)
+            return { data: [] };
+        if (isEmpty) {
+            return {
+                header: translations["popular_locations"] || "Popular destinations",
+                data: POPULAR_LOCATIONS,
+            };
+        }
+        if (isSelected) {
+            const selectedItem = {
+                id: "selected",
+                code: savedValue.code,
+                title: savedValue.title,
+                titleEn: savedValue.titleEn || "",
+                country: savedValue.country,
+                isAirport: true,
+            };
+            return {
+                header: translations["popular_locations"] || "Popular destinations",
+                data: [selectedItem, ...POPULAR_LOCATIONS],
+            };
+        }
+        return { data: locations };
+    };
+    const listInfo = getListData();
+    const triggerContent = (_jsxs(View, { style: minimal ? styles.minimalRow : formStyles.inputTriggerRow, children: [_jsx(Text, { style: [
+                    minimal ? styles.minimalText : formStyles.inputTriggerText,
+                    !query && formStyles.inputTriggerPlaceholder,
+                ], numberOfLines: 1, children: query || label }), savedValue.code ? (_jsx(Text, { style: formStyles.inputTriggerCode, children: savedValue.code })) : null] }));
+    return (_jsxs(_Fragment, { children: [minimal ? (_jsx(TouchableOpacity, { style: styles.minimalContainer, onPress: () => setIsPopupOpen(true), activeOpacity: 0.8, children: triggerContent })) : (_jsxs(TouchableOpacity, { style: formStyles.inputTrigger, onPress: () => setIsPopupOpen(true), activeOpacity: 0.8, children: [_jsx(Text, { style: formStyles.label, children: label }), triggerContent] })), _jsx(Modal, { visible: isPopupOpen, animationType: "slide", presentationStyle: "fullScreen", onRequestClose: handleClose, children: _jsxs(View, { style: [styles.modalContainer, { paddingTop: insets.top }], children: [_jsx(TouchableOpacity, { style: styles.closeButton, onPress: handleClose, hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }, children: _jsx(CloseIcon, { size: 16 }) }), _jsxs(View, { style: styles.searchHeader, children: [_jsx(SearchIcon, {}), _jsx(TextInput, { autoFocus: true, style: styles.searchInput, value: query, onChangeText: (text) => {
+                                        setQuery(text);
+                                        setAllowSearch(true);
+                                    }, placeholder: translations["location_popup_placeholder"] ||
+                                        "Enter city or airport", placeholderTextColor: Colors.textTertiary, returnKeyType: "search" })] }), _jsxs(View, { style: styles.modalContent, children: [loading && (_jsxs(View, { style: styles.loadingContainer, children: [_jsx(ActivityIndicator, { size: "small", color: Colors.primary }), _jsx(Text, { style: styles.loadingText, children: translations["location_popup_loading"] || "Loading..." })] })), !loading && isSearching && locations.length === 0 && (_jsx(Text, { style: styles.noResults, children: translations["location_popup_no_results"] ||
+                                        "Nothing found" })), !loading && (_jsxs(_Fragment, { children: [listInfo.header && (_jsx(Text, { style: styles.sectionTitle, children: listInfo.header })), _jsx(FlatList, { data: listInfo.data, renderItem: renderLocationItem, keyExtractor: (item) => String(item.id), keyboardShouldPersistTaps: "handled", showsVerticalScrollIndicator: false })] }))] })] }) })] }));
+};
+const styles = StyleSheet.create({
+    minimalContainer: {
+        paddingHorizontal: Spacing.lg,
+        paddingVertical: Spacing.sm,
+        minHeight: 56,
+        justifyContent: "center",
+        marginBottom: 10,
+    },
+    minimalRow: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+    },
+    minimalText: {
+        fontSize: FontSize.md,
+        color: Colors.text,
+        flex: 1,
+        fontWeight: "400",
+    },
+    modalContainer: {
+        flex: 1,
+        backgroundColor: Colors.surface,
+    },
+    closeButton: {
+        alignSelf: "flex-end",
+        padding: Spacing.lg,
+    },
+    closeButtonText: {
+        fontSize: FontSize.xl,
+        color: Colors.textSecondary,
+        fontWeight: "600",
+    },
+    searchHeader: {
+        flexDirection: "row",
+        alignItems: "center",
+        paddingHorizontal: Spacing.lg,
+        paddingVertical: Spacing.md,
+        borderBottomWidth: 1,
+        borderBottomColor: Colors.border,
+        gap: Spacing.md,
+    },
+    searchInput: {
+        flex: 1,
+        fontSize: FontSize.lg,
+        color: Colors.text,
+        paddingVertical: Spacing.sm,
+    },
+    modalContent: {
+        flex: 1,
+        paddingHorizontal: Spacing.lg,
+    },
+    loadingContainer: {
+        flexDirection: "row",
+        alignItems: "center",
+        padding: Spacing.lg,
+        gap: Spacing.sm,
+    },
+    loadingText: {
+        fontSize: FontSize.md,
+        color: Colors.textSecondary,
+    },
+    noResults: {
+        padding: Spacing.lg,
+        fontSize: FontSize.md,
+        color: Colors.textTertiary,
+    },
+    sectionTitle: {
+        fontSize: FontSize.sm,
+        color: Colors.textTertiary,
+        fontWeight: "600",
+        textTransform: "uppercase",
+        paddingVertical: Spacing.md,
+        letterSpacing: 0.5,
+    },
+    locationItem: {
+        paddingVertical: Spacing.md,
+        borderBottomWidth: StyleSheet.hairlineWidth,
+        borderBottomColor: Colors.borderLight,
+    },
+    locationItemContent: {
+        flexDirection: "row",
+        alignItems: "center",
+    },
+    locationInfo: {
+        flex: 1,
+    },
+    locationCity: {
+        fontSize: FontSize.md,
+        color: Colors.text,
+        fontWeight: "500",
+    },
+    locationCountry: {
+        fontSize: FontSize.md,
+        color: Colors.textSecondary,
+        fontWeight: "400",
+    },
+    locationCode: {
+        fontSize: FontSize.sm,
+        color: Colors.textTertiary,
+        marginTop: 2,
+    },
+});
+export default LocationInput;

package/dist/modules/search-form/flight/PassengersPicker.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+type Passengers = {
+    adults: number;
+    children: number;
+    infants: number;
+};
+type PassengersPickerProps = {
+    label?: string;
+    value: Passengers;
+    onChange: (val: Passengers) => void;
+    cabinClass: string;
+    onCabinClassChange: (val: string) => void;
+    translations: Record<string, string>;
+};
+declare const PassengersPicker: React.FC<PassengersPickerProps>;
+export default PassengersPicker;

package/dist/modules/search-form/flight/PassengersPicker.js

@@ -0,0 +1,203 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { View, Text, TouchableOpacity, Modal, StyleSheet, ScrollView, } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import Svg, { Path } from "react-native-svg";
+import { Colors, Spacing, BorderRadius, FontSize } from "../../../theme/colors";
+import { formStyles } from "../../../theme/formStyles";
+const MAX_COUNT = 10;
+const PASSENGER_TYPES = [
+    { key: "adults", labelKey: "adults_label_full", fallback: "Adults (12+)", min: 1 },
+    { key: "children", labelKey: "children_label_full", fallback: "Children (2-12)", min: 0 },
+    { key: "infants", labelKey: "infants_label_full", fallback: "Infants (0-2)", min: 0 },
+];
+const CABIN_OPTIONS = [
+    { value: "economy", labelKey: "cabin_economy_label", fallback: "Economy" },
+    { value: "economy_premium", labelKey: "cabin_premium_label", fallback: "Premium Economy" },
+    { value: "business", labelKey: "cabin_business_label", fallback: "Business" },
+];
+const ChevronDown = () => (_jsx(Svg, { width: 20, height: 20, viewBox: "0 0 20 20", fill: "none", children: _jsx(Path, { d: "M5 8L10 12.5L15 8", stroke: Colors.primary, strokeWidth: 2, strokeLinecap: "round" }) }));
+const PassengersPicker = ({ label, value, onChange, cabinClass, onCabinClassChange, translations, }) => {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const insets = useSafeAreaInsets();
+    const updateCount = (key, delta, min, max) => {
+        const newValue = Math.min(max, Math.max(min, value[key] + delta));
+        onChange({ ...value, [key]: newValue });
+    };
+    const total = value.adults + value.children + value.infants;
+    const labelText = total === 1
+        ? translations["passenger_label"] || "Passenger"
+        : translations["passengers_label"] || "Passengers";
+    const labelFinal = label || translations["passengers_label"] || "Passengers";
+    const cabinLabel = cabinClass === "business"
+        ? translations["cabin_business"] || "Business"
+        : cabinClass === "economy_premium"
+            ? translations["cabin_premium"] || "Premium Economy"
+            : translations["cabin_economy"] || "Economy";
+    return (_jsxs(_Fragment, { children: [_jsxs(TouchableOpacity, { style: formStyles.inputTrigger, onPress: () => setIsModalOpen(true), activeOpacity: 0.8, children: [_jsx(Text, { style: formStyles.label, children: labelFinal }), _jsxs(View, { style: formStyles.inputTriggerRow, children: [_jsxs(Text, { style: styles.triggerText, children: [_jsxs(Text, { style: styles.triggerCount, children: [total, " "] }), _jsxs(Text, { children: [labelText, ", "] }), _jsx(Text, { children: cabinLabel })] }), _jsx(ChevronDown, {})] })] }), _jsx(Modal, { visible: isModalOpen, animationType: "slide", presentationStyle: "fullScreen", onRequestClose: () => setIsModalOpen(false), children: _jsxs(View, { style: [styles.modalContainer, { paddingTop: insets.top }], children: [_jsxs(View, { style: styles.modalHeader, children: [_jsx(TouchableOpacity, { onPress: () => setIsModalOpen(false), hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }, children: _jsx(Svg, { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", children: _jsx(Path, { d: "M15 18L9 12L15 6", stroke: Colors.textSecondary, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _jsxs(View, { style: styles.modalHeaderInfo, children: [_jsx(Text, { style: styles.modalTitle, children: translations["passengers_popup_title"] || "Passengers & Class" }), _jsxs(Text, { style: styles.modalSubtitle, children: [total, " ", labelText, ", ", cabinLabel] })] })] }), _jsxs(ScrollView, { style: styles.modalContent, showsVerticalScrollIndicator: false, children: [_jsx(Text, { style: styles.sectionTitle, children: translations["passengers_label"] || "Passengers" }), PASSENGER_TYPES.map(({ key, labelKey, fallback, min }) => (_jsxs(View, { style: styles.counterRow, children: [_jsx(Text, { style: styles.counterLabel, children: translations[labelKey] || fallback }), _jsxs(View, { style: styles.counterControls, children: [_jsx(TouchableOpacity, { style: [
+                                                        styles.counterButton,
+                                                        value[key] <= min && styles.counterButtonDisabled,
+                                                    ], onPress: () => updateCount(key, -1, min, MAX_COUNT), disabled: value[key] <= min, activeOpacity: 0.7, children: _jsx(Text, { style: [
+                                                            styles.counterButtonText,
+                                                            value[key] <= min && styles.counterButtonTextDisabled,
+                                                        ], children: "-" }) }), _jsx(Text, { style: styles.counterValue, children: value[key] }), _jsx(TouchableOpacity, { style: [
+                                                        styles.counterButton,
+                                                        value[key] >= MAX_COUNT && styles.counterButtonDisabled,
+                                                    ], onPress: () => updateCount(key, 1, min, MAX_COUNT), disabled: value[key] >= MAX_COUNT, activeOpacity: 0.7, children: _jsx(Text, { style: [
+                                                            styles.counterButtonText,
+                                                            value[key] >= MAX_COUNT && styles.counterButtonTextDisabled,
+                                                        ], children: "+" }) })] })] }, key))), _jsx(Text, { style: [styles.sectionTitle, { marginTop: Spacing.xxl }], children: translations["cabin_label"] || "Class" }), CABIN_OPTIONS.map((option) => {
+                                    const isSelected = cabinClass === option.value;
+                                    return (_jsxs(TouchableOpacity, { style: styles.radioRow, onPress: () => onCabinClassChange(option.value), activeOpacity: 0.7, children: [_jsx(View, { style: [styles.radio, isSelected && styles.radioSelected], children: isSelected && _jsx(View, { style: styles.radioInner }) }), _jsx(Text, { style: [
+                                                    styles.radioLabel,
+                                                    isSelected && styles.radioLabelSelected,
+                                                ], children: translations[option.labelKey] || option.fallback })] }, option.value));
+                                })] }), _jsx(View, { style: styles.modalFooter, children: _jsx(TouchableOpacity, { style: styles.saveButton, onPress: () => setIsModalOpen(false), activeOpacity: 0.8, children: _jsx(Text, { style: styles.saveButtonText, children: translations["save_button"] || "Save" }) }) })] }) })] }));
+};
+const styles = StyleSheet.create({
+    triggerText: {
+        fontSize: FontSize.md,
+        color: Colors.text,
+        flex: 1,
+    },
+    triggerCount: {
+        fontWeight: "600",
+    },
+    modalContainer: {
+        flex: 1,
+        backgroundColor: Colors.surface,
+    },
+    modalHeader: {
+        flexDirection: "row",
+        alignItems: "center",
+        paddingHorizontal: Spacing.lg,
+        paddingVertical: Spacing.md,
+        borderBottomWidth: 1,
+        borderBottomColor: Colors.border,
+        gap: Spacing.md,
+    },
+    modalHeaderInfo: {
+        flex: 1,
+    },
+    modalTitle: {
+        fontSize: FontSize.lg,
+        fontWeight: "600",
+        color: Colors.text,
+    },
+    modalSubtitle: {
+        fontSize: FontSize.sm,
+        color: Colors.textSecondary,
+        marginTop: 2,
+    },
+    modalContent: {
+        flex: 1,
+        paddingHorizontal: Spacing.lg,
+        paddingTop: Spacing.lg,
+    },
+    sectionTitle: {
+        fontSize: FontSize.sm,
+        color: Colors.textTertiary,
+        fontWeight: "600",
+        textTransform: "uppercase",
+        letterSpacing: 0.5,
+        marginBottom: Spacing.md,
+    },
+    counterRow: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        paddingVertical: Spacing.md,
+        borderBottomWidth: StyleSheet.hairlineWidth,
+        borderBottomColor: Colors.borderLight,
+    },
+    counterLabel: {
+        fontSize: FontSize.md,
+        color: Colors.text,
+        flex: 1,
+    },
+    counterControls: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: Spacing.lg,
+    },
+    counterButton: {
+        width: 36,
+        height: 36,
+        borderRadius: BorderRadius.full,
+        borderWidth: 1,
+        borderColor: Colors.border,
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: Colors.surface,
+    },
+    counterButtonDisabled: {
+        opacity: 0.4,
+    },
+    counterButtonText: {
+        fontSize: FontSize.xl,
+        color: Colors.primary,
+        fontWeight: "500",
+    },
+    counterButtonTextDisabled: {
+        color: Colors.textTertiary,
+    },
+    counterValue: {
+        fontSize: FontSize.lg,
+        fontWeight: "600",
+        color: Colors.text,
+        minWidth: 24,
+        textAlign: "center",
+    },
+    radioRow: {
+        flexDirection: "row",
+        alignItems: "center",
+        paddingVertical: Spacing.md,
+        gap: Spacing.md,
+        borderBottomWidth: StyleSheet.hairlineWidth,
+        borderBottomColor: Colors.borderLight,
+    },
+    radio: {
+        width: 22,
+        height: 22,
+        borderRadius: BorderRadius.full,
+        borderWidth: 2,
+        borderColor: Colors.border,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    radioSelected: {
+        borderColor: Colors.primary,
+    },
+    radioInner: {
+        width: 12,
+        height: 12,
+        borderRadius: BorderRadius.full,
+        backgroundColor: Colors.primary,
+    },
+    radioLabel: {
+        fontSize: FontSize.md,
+        color: Colors.textSecondary,
+    },
+    radioLabelSelected: {
+        color: Colors.text,
+        fontWeight: "500",
+    },
+    modalFooter: {
+        paddingHorizontal: Spacing.lg,
+        paddingVertical: Spacing.md,
+        borderTopWidth: 1,
+        borderTopColor: Colors.border,
+    },
+    saveButton: {
+        backgroundColor: Colors.primary,
+        borderRadius: BorderRadius.md,
+        paddingVertical: Spacing.md,
+        alignItems: "center",
+    },
+    saveButtonText: {
+        color: Colors.textOnPrimary,
+        fontSize: FontSize.lg,
+        fontWeight: "600",
+    },
+});
+export default PassengersPicker;