@devtravelcode/widget-native 1.0.0

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

@@ -0,0 +1,9 @@
+import React from "react";
+type SwitchLocationBtnProps = {
+    from: string;
+    to: string;
+    setFrom: (val: string) => void;
+    setTo: (val: string) => void;
+};
+declare const SwitchLocationBtn: React.FC<SwitchLocationBtnProps>;
+export default SwitchLocationBtn;

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

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { TouchableOpacity, StyleSheet, Animated, Easing, } from "react-native";
+import Svg, { Path } from "react-native-svg";
+import { Colors, BorderRadius } from "../../../theme/colors";
+const SwitchLocationBtn = ({ from, to, setFrom, setTo, }) => {
+    const rotation = useRef(new Animated.Value(0)).current;
+    const handleSwitch = () => {
+        const prevFrom = from;
+        setFrom(to);
+        setTo(prevFrom);
+        Animated.timing(rotation, {
+            toValue: 1,
+            duration: 300,
+            easing: Easing.ease,
+            useNativeDriver: true,
+        }).start(() => {
+            rotation.setValue(0);
+        });
+    };
+    const rotateInterpolate = rotation.interpolate({
+        inputRange: [0, 1],
+        outputRange: ["0deg", "180deg"],
+    });
+    return (_jsx(Animated.View, { style: [
+            styles.container,
+            { transform: [{ rotate: rotateInterpolate }] },
+        ], children: _jsx(TouchableOpacity, { onPress: handleSwitch, style: styles.button, activeOpacity: 0.7, hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }, children: _jsxs(Svg, { width: 20, height: 20, viewBox: "0 0 20 20", fill: "none", children: [_jsx(Path, { opacity: 0.3, d: "M13.3334 14.1667C13.7937 14.1667 14.1667 13.7936 14.1667 13.3333C14.1667 12.8731 13.7937 12.5 13.3334 12.5L5.00008 12.5C4.53984 12.5 4.16675 12.8731 4.16675 13.3333C4.16675 13.7936 4.53984 14.1667 5.00008 14.1667L13.3334 14.1667Z", fill: Colors.primary }), _jsx(Path, { d: "M11.9108 11.4224C11.5854 11.097 11.5854 10.5694 11.9108 10.2439C12.2363 9.91848 12.7639 9.91848 13.0893 10.2439L15.5893 12.7439C15.9148 13.0694 15.9148 13.597 15.5893 13.9224L13.0893 16.4224C12.7639 16.7479 12.2363 16.7479 11.9108 16.4224C11.5854 16.097 11.5854 15.5694 11.9108 15.2439L13.8216 13.3332L11.9108 11.4224Z", fill: Colors.primary }), _jsx(Path, { opacity: 0.3, d: "M6.66659 7.50016C6.20635 7.50016 5.83325 7.12707 5.83325 6.66683C5.83325 6.20659 6.20635 5.8335 6.66659 5.8335L14.9999 5.8335C15.4602 5.8335 15.8333 6.20659 15.8333 6.66683C15.8333 7.12707 15.4602 7.50016 14.9999 7.50016L6.66659 7.50016Z", fill: Colors.primary }), _jsx(Path, { d: "M8.08917 4.75592C8.41461 4.43049 8.41461 3.90285 8.08917 3.57741C7.76374 3.25197 7.2361 3.25197 6.91066 3.57741L4.41066 6.07741C4.08523 6.40285 4.08523 6.93049 4.41066 7.25592L6.91066 9.75592C7.2361 10.0814 7.76374 10.0814 8.08917 9.75592C8.41461 9.43049 8.41461 8.90285 8.08917 8.57741L6.17843 6.66667L8.08917 4.75592Z", fill: Colors.primary })] }) }) }));
+};
+const styles = StyleSheet.create({
+    container: {
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 2,
+        marginTop: -16,
+    },
+    button: {
+        width: 50,
+        height: 50,
+        borderRadius: BorderRadius.full,
+        backgroundColor: Colors.surface,
+        borderWidth: 1,
+        borderColor: Colors.border,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+});
+export default SwitchLocationBtn;

package/dist/modules/search-form/flight/flight-filters/FiltersContent.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+type FiltersContentProps = {
+    has: (key: string) => boolean;
+    openSections: string[];
+    toggleSection: (key: string) => void;
+    getValue: (name: string, fallback: any) => any;
+    handleRangeChange: (name: string, value: number) => void;
+    handleInputChange: (name: string, value: any) => void;
+    getRangeStyle: (minName: string, maxName: string, maxValue: number) => any;
+    formatTime: (v: number) => string;
+    formatDuration: (v: number) => string;
+    airlines: Record<string, string>;
+    translations: Record<string, string>;
+    currencySign: string;
+    dateTimeFormat: string;
+    maxDayMinutes: number;
+    onRangeDragStart?: () => void;
+    onRangeDragEnd?: () => void;
+};
+declare const FiltersContent: React.FC<FiltersContentProps>;
+export default FiltersContent;

package/dist/modules/search-form/flight/flight-filters/FiltersContent.js

@@ -0,0 +1,145 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Text, TouchableOpacity, Switch, StyleSheet, } from "react-native";
+import RangeBlock from "./RangeBlock";
+import { Colors, Spacing, FontSize, BorderRadius } from "../../../../theme/colors";
+const SectionTitle = ({ title }) => (_jsx(View, { style: styles.sectionHeader, children: _jsx(Text, { style: styles.sectionTitle, children: title }) }));
+const RadioOption = ({ label, selected, onPress }) => (_jsxs(TouchableOpacity, { style: styles.radioRow, onPress: onPress, activeOpacity: 0.7, children: [_jsx(View, { style: [styles.radioOuter, selected && styles.radioOuterSelected], children: selected && _jsx(View, { style: styles.radioInner }) }), _jsx(Text, { style: styles.radioLabel, children: label })] }));
+const CheckboxOption = ({ label, checked, onPress }) => (_jsxs(TouchableOpacity, { style: styles.checkboxRow, onPress: onPress, activeOpacity: 0.7, children: [_jsx(View, { style: [styles.checkboxOuter, checked && styles.checkboxChecked], children: checked && _jsx(Text, { style: styles.checkboxMark, children: "\u2713" }) }), _jsx(Text, { style: styles.checkboxLabel, children: label })] }));
+const FiltersContent = ({ has, openSections, toggleSection, getValue, handleRangeChange, handleInputChange, getRangeStyle, formatTime, formatDuration, airlines, translations, currencySign, dateTimeFormat, maxDayMinutes, onRangeDragStart, onRangeDragEnd, }) => {
+    const transferLabels = [
+        translations["filter_any"] || "Any",
+        translations["filter_nonstop"] || "Nonstop",
+        "1 " + (translations["filter_stop"] || "stop"),
+        "2 " + (translations["filter_stops"] || "stops"),
+        "3 " + (translations["filter_stops"] || "stops"),
+    ];
+    const baggageLabels = [
+        translations["filter_baggage_any"] || "Any",
+        translations["filter_baggage_with"] || "With baggage",
+        translations["filter_baggage_without"] || "Without baggage",
+    ];
+    const baggageValues = ["all", "1", "0"];
+    const transferValues = ["all", "0", "1", "2", "3"];
+    return (_jsxs(View, { style: styles.container, children: [_jsx(Text, { style: styles.title, children: translations["filters_title"] || "Filters" }), (has("minprice") || has("maxprice")) && (_jsx(RangeBlock, { title: translations["filter_price"] || "Price", minName: "minprice", maxName: "maxprice", maxValue: 1000, step: 10, open: openSections.includes("price"), toggle: () => toggleSection("price"), getValue: getValue, handleRangeChange: handleRangeChange, getRangeStyle: getRangeStyle, formatter: (v) => `${v} ${currencySign}`, isShow: true, onDragStart: onRangeDragStart, onDragEnd: onRangeDragEnd })), has("baggage") && (_jsxs(View, { style: styles.section, children: [_jsx(SectionTitle, { title: translations["filter_baggage"] || "Baggage" }), _jsx(View, { style: styles.sectionContent, children: baggageLabels.map((label, i) => (_jsx(RadioOption, { label: label, selected: getValue("baggage", "all") === baggageValues[i], onPress: () => handleInputChange("baggage", baggageValues[i]) }, i))) })] })), has("transfer") && (_jsxs(View, { style: styles.section, children: [_jsx(SectionTitle, { title: translations["filter_transfer_outbound"] || "Stops (outbound)" }), _jsx(View, { style: styles.sectionContent, children: transferLabels.map((label, i) => (_jsx(RadioOption, { label: label, selected: getValue("transfer", "all") === transferValues[i], onPress: () => handleInputChange("transfer", transferValues[i]) }, i))) })] })), has("transferReturn") && (_jsxs(View, { style: styles.section, children: [_jsx(SectionTitle, { title: translations["filter_transfer_return"] || "Stops (return)" }), _jsx(View, { style: styles.sectionContent, children: transferLabels.map((label, i) => (_jsx(RadioOption, { label: label, selected: getValue("transferReturn", "all") === transferValues[i], onPress: () => handleInputChange("transferReturn", transferValues[i]) }, i))) })] })), has("charter") && (_jsxs(View, { style: styles.section, children: [_jsx(SectionTitle, { title: translations["filter_charter"] || "Charter" }), _jsxs(View, { style: styles.toggleRow, children: [_jsx(Text, { style: styles.toggleLabel, children: translations["filter_charter_toggle"] || "Charter" }), _jsx(Switch, { value: !!getValue("charter", 0), onValueChange: (val) => handleInputChange("charter", val ? 1 : 0), trackColor: { false: Colors.border, true: Colors.primary }, thumbColor: Colors.white, ios_backgroundColor: Colors.border })] })] })), has("changeAirport") && (_jsxs(View, { style: styles.section, children: [_jsx(SectionTitle, { title: translations["filter_no_airport_change"] || "No airport change" }), _jsxs(View, { style: styles.toggleRow, children: [_jsx(Text, { style: styles.toggleLabel, children: translations["filter_no_airport_change"] ||
+                                    "No airport change" }), _jsx(Switch, { value: !!getValue("changeAirport", 0), onValueChange: (val) => handleInputChange("changeAirport", val ? 1 : 0), trackColor: { false: Colors.border, true: Colors.primary }, thumbColor: Colors.white, ios_backgroundColor: Colors.border })] })] })), (has("departureMin") || has("departureMax")) && (_jsx(RangeBlock, { title: translations["filter_departure_outbound"] ||
+                    "Departure time (outbound)", minName: "departureMin", maxName: "departureMax", maxValue: maxDayMinutes, step: 15, open: openSections.includes("departure"), toggle: () => toggleSection("departure"), getValue: getValue, handleRangeChange: handleRangeChange, getRangeStyle: getRangeStyle, formatter: formatTime, isShow: false, onDragStart: onRangeDragStart, onDragEnd: onRangeDragEnd })), (has("arrivalMin") || has("arrivalMax")) && (_jsx(RangeBlock, { title: translations["filter_arrival_outbound"] ||
+                    "Arrival time (outbound)", minName: "arrivalMin", maxName: "arrivalMax", maxValue: maxDayMinutes, step: 15, open: openSections.includes("arrival"), toggle: () => toggleSection("arrival"), getValue: getValue, handleRangeChange: handleRangeChange, getRangeStyle: getRangeStyle, formatter: formatTime, isShow: false, onDragStart: onRangeDragStart, onDragEnd: onRangeDragEnd })), (has("returnMin") || has("returnMax")) && (_jsx(RangeBlock, { title: translations["filter_departure_return"] ||
+                    "Departure time (return)", minName: "returnMin", maxName: "returnMax", maxValue: maxDayMinutes, step: 15, open: openSections.includes("return"), toggle: () => toggleSection("return"), getValue: getValue, handleRangeChange: handleRangeChange, getRangeStyle: getRangeStyle, formatter: formatTime, isShow: false, onDragStart: onRangeDragStart, onDragEnd: onRangeDragEnd })), (has("returnArrivalMin") || has("returnArrivalMax")) && (_jsx(RangeBlock, { title: translations["filter_arrival_return"] ||
+                    "Arrival time (return)", minName: "returnArrivalMin", maxName: "returnArrivalMax", maxValue: maxDayMinutes, step: 15, open: openSections.includes("returnArrival"), toggle: () => toggleSection("returnArrival"), getValue: getValue, handleRangeChange: handleRangeChange, getRangeStyle: getRangeStyle, formatter: formatTime, isShow: false, onDragStart: onRangeDragStart, onDragEnd: onRangeDragEnd })), (has("outboundStopTimeMin") || has("outboundStopTimeMax")) && (_jsx(RangeBlock, { title: translations["filter_stop_duration_outbound"] ||
+                    "Stop duration (outbound)", minName: "outboundStopTimeMin", maxName: "outboundStopTimeMax", maxValue: maxDayMinutes, step: 15, open: openSections.includes("outbound"), toggle: () => toggleSection("outbound"), getValue: getValue, handleRangeChange: handleRangeChange, getRangeStyle: getRangeStyle, formatter: formatDuration, isShow: false, onDragStart: onRangeDragStart, onDragEnd: onRangeDragEnd })), (has("inboundStopTimeMin") || has("inboundStopTimeMax")) && (_jsx(RangeBlock, { title: translations["filter_stop_duration_inbound"] ||
+                    "Stop duration (return)", minName: "inboundStopTimeMin", maxName: "inboundStopTimeMax", maxValue: maxDayMinutes, step: 15, open: openSections.includes("inbound"), toggle: () => toggleSection("inbound"), getValue: getValue, handleRangeChange: handleRangeChange, getRangeStyle: getRangeStyle, formatter: formatDuration, isShow: false, onDragStart: onRangeDragStart, onDragEnd: onRangeDragEnd })), (has("durationMin") || has("durationMax")) && (_jsx(RangeBlock, { title: translations["filter_total_stop_duration"] ||
+                    "Total stop duration", minName: "durationMin", maxName: "durationMax", maxValue: maxDayMinutes, step: 15, open: openSections.includes("duration"), toggle: () => toggleSection("duration"), getValue: getValue, handleRangeChange: handleRangeChange, getRangeStyle: getRangeStyle, formatter: formatDuration, isShow: false, onDragStart: onRangeDragStart, onDragEnd: onRangeDragEnd })), has("airline") && (_jsxs(View, { style: styles.section, children: [_jsx(SectionTitle, { title: translations["filter_airlines"] || "Airlines" }), _jsxs(View, { style: styles.sectionContent, children: [Object.entries(airlines).map(([code, name]) => (_jsx(CheckboxOption, { label: name, checked: Array.isArray(getValue("airline", [])) &&
+                                    getValue("airline", []).includes(code), onPress: () => handleInputChange("airline", {
+                                    code,
+                                    checked: !(Array.isArray(getValue("airline", [])) &&
+                                        getValue("airline", []).includes(code)),
+                                }) }, code))), _jsx(TouchableOpacity, { style: styles.clearButton, onPress: () => handleInputChange("airline", []), activeOpacity: 0.7, children: _jsx(Text, { style: styles.clearButtonText, children: translations["clear_all"] || "Clear all" }) })] })] }))] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        paddingBottom: Spacing.lg,
+    },
+    title: {
+        fontSize: FontSize.xl,
+        fontWeight: "700",
+        color: Colors.text,
+        marginBottom: Spacing.lg,
+    },
+    section: {
+        marginBottom: Spacing.sm,
+        borderBottomWidth: 1,
+        borderBottomColor: Colors.borderLight,
+    },
+    sectionHeader: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        paddingVertical: Spacing.md,
+    },
+    sectionTitle: {
+        fontSize: FontSize.md,
+        fontWeight: "600",
+        color: Colors.text,
+    },
+    sectionContent: {
+        paddingBottom: Spacing.md,
+    },
+    radioRow: {
+        flexDirection: "row",
+        alignItems: "center",
+        paddingVertical: Spacing.sm,
+    },
+    radioOuter: {
+        width: 20,
+        height: 20,
+        borderRadius: 10,
+        borderWidth: 2,
+        borderColor: Colors.border,
+        justifyContent: "center",
+        alignItems: "center",
+        marginRight: Spacing.sm,
+    },
+    radioOuterSelected: {
+        borderColor: Colors.primary,
+    },
+    radioInner: {
+        width: 10,
+        height: 10,
+        borderRadius: 5,
+        backgroundColor: Colors.primary,
+    },
+    radioLabel: {
+        fontSize: FontSize.md,
+        color: Colors.text,
+    },
+    checkboxRow: {
+        flexDirection: "row",
+        alignItems: "center",
+        paddingVertical: Spacing.sm,
+    },
+    checkboxOuter: {
+        width: 20,
+        height: 20,
+        borderRadius: BorderRadius.sm,
+        borderWidth: 2,
+        borderColor: Colors.border,
+        justifyContent: "center",
+        alignItems: "center",
+        marginRight: Spacing.sm,
+    },
+    checkboxChecked: {
+        backgroundColor: Colors.primary,
+        borderColor: Colors.primary,
+    },
+    checkboxMark: {
+        color: Colors.white,
+        fontSize: FontSize.xs,
+        fontWeight: "700",
+    },
+    checkboxLabel: {
+        fontSize: FontSize.md,
+        color: Colors.text,
+    },
+    toggleRow: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        paddingVertical: Spacing.sm,
+        paddingBottom: Spacing.md,
+    },
+    toggleLabel: {
+        fontSize: FontSize.md,
+        color: Colors.text,
+        flex: 1,
+    },
+    clearButton: {
+        marginTop: Spacing.sm,
+        alignSelf: "flex-start",
+    },
+    clearButtonText: {
+        fontSize: FontSize.sm,
+        color: Colors.primary,
+        fontWeight: "500",
+    },
+});
+export default FiltersContent;

package/dist/modules/search-form/flight/flight-filters/FlightFiltersDynamic.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export type FlightFiltersDynamicProps = {
+    filters?: string[];
+    airlines?: Record<string, string>;
+    loading?: boolean;
+    sessionId?: string | null;
+    onApplyFilters?: (sid: string | null, filters?: Record<string, any>) => Promise<void>;
+    translations: Record<string, string>;
+};
+declare const FlightFiltersDynamic: React.FC<FlightFiltersDynamicProps>;
+export default FlightFiltersDynamic;

package/dist/modules/search-form/flight/flight-filters/FlightFiltersDynamic.js

@@ -0,0 +1,213 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { View, Text, TouchableOpacity, Modal, ScrollView, StyleSheet, } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import Svg, { Path } from "react-native-svg";
+import FiltersContent from "./FiltersContent";
+import { useWidget } from "../../../../context/WidgetContext";
+import { Colors, Spacing, FontSize, BorderRadius } from "../../../../theme/colors";
+import { CloseIcon } from "../../../../store";
+const FlightFiltersDynamic = ({ filters = [], airlines = {}, loading = false, sessionId = null, onApplyFilters, translations, }) => {
+    const insets = useSafeAreaInsets();
+    const [values, setValues] = useState({});
+    const [openSections, setOpenSections] = useState([]);
+    const [isPopupOpen, setIsPopupOpen] = useState(false);
+    const [scrollEnabled, setScrollEnabled] = useState(true);
+    const { currency, dateTimeFormat } = useWidget();
+    const currencySigns = {
+        USD: "$",
+        EUR: "\u20AC",
+        GBP: "\u00A3",
+        CHF: "\u20A3",
+    };
+    const currencySign = currencySigns[currency] || currency;
+    const MAX_DAY_MINUTES = 1440;
+    const normalizeMinutes = (name, value) => {
+        const timeKeys = [
+            "departureMin",
+            "departureMax",
+            "arrivalMin",
+            "arrivalMax",
+            "returnMin",
+            "returnMax",
+            "returnArrivalMin",
+            "returnArrivalMax",
+        ];
+        if (timeKeys.includes(name) && value >= 1440) {
+            return 1439;
+        }
+        return value;
+    };
+    const formatTime = (minutes) => {
+        const safeMinutes = minutes >= 1440 ? 1439 : minutes;
+        const h24 = Math.floor(safeMinutes / 60);
+        const m = safeMinutes % 60;
+        if (dateTimeFormat !== "usa") {
+            return `${String(h24).padStart(2, "0")}:${String(m).padStart(2, "0")}`;
+        }
+        const period = h24 >= 12 ? "PM" : "AM";
+        let h12 = h24 % 12;
+        if (h12 === 0)
+            h12 = 12;
+        return `${h12}:${String(m).padStart(2, "0")} ${period}`;
+    };
+    const formatDuration = (minutes) => {
+        const h = Math.floor(minutes / 60);
+        const m = minutes % 60;
+        const hLabel = translations["hours_label"] || "h";
+        const mLabel = translations["minutes_label"] || "m";
+        return `${h}${hLabel} ${m}${mLabel}`;
+    };
+    const has = (key) => filters.includes(key);
+    const handleRangeChange = (name, value) => {
+        updateFilterValue(name, value);
+    };
+    const handleInputChange = (name, value) => {
+        if (name === "airline") {
+            setValues((prev) => {
+                const current = Array.isArray(prev.airline) ? prev.airline : [];
+                let updated;
+                if (Array.isArray(value)) {
+                    updated = [];
+                }
+                else if (value.checked) {
+                    updated = [...current, value.code];
+                }
+                else {
+                    updated = current.filter((code) => code !== value.code);
+                }
+                return { ...prev, airline: updated };
+            });
+        }
+        else {
+            const normalizedValue = typeof value === "boolean" ? (value ? 1 : 0) : value;
+            updateFilterValue(name, normalizedValue);
+        }
+    };
+    const updateFilterValue = (name, value) => {
+        setValues((prev) => {
+            let normalizedValue = value;
+            if (typeof value === "number") {
+                normalizedValue = normalizeMinutes(name, value);
+            }
+            return { ...prev, [name]: normalizedValue };
+        });
+    };
+    const getValue = (name, fallback) => values[name] ?? fallback;
+    const getRangeStyle = (minName, maxName, maxValue) => {
+        const min = getValue(minName, 0);
+        const max = getValue(maxName, maxValue);
+        const left = (min / maxValue) * 100;
+        const right = 100 - (max / maxValue) * 100;
+        return { left: `${left}%`, right: `${right}%` };
+    };
+    const toggleSection = (key) => {
+        setOpenSections((prev) => prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key]);
+    };
+    const handleApply = () => {
+        if (sessionId && onApplyFilters) {
+            onApplyFilters(sessionId, values);
+        }
+        setIsPopupOpen(false);
+    };
+    const handleReset = () => {
+        setValues({});
+        setOpenSections([]);
+        if (sessionId && onApplyFilters) {
+            onApplyFilters(sessionId, {});
+        }
+    };
+    if (loading) {
+        return (_jsx(View, { style: styles.loadingContainer, children: _jsx(Text, { style: styles.loadingText, children: translations["loading_filters"] || "Loading filters..." }) }));
+    }
+    if (!filters?.length || !sessionId)
+        return null;
+    return (_jsxs(View, { children: [_jsxs(TouchableOpacity, { style: styles.filterButton, onPress: () => setIsPopupOpen(true), activeOpacity: 0.7, children: [_jsxs(Svg, { width: 24, height: 20, viewBox: "0 0 24 20", fill: "none", children: [_jsx(Path, { d: "M18.5 4.1665H5.5C4.67157 4.1665 4 4.72615 4 5.4165C4 6.10686 4.67157 6.6665 5.5 6.6665H18.5C19.3284 6.6665 20 6.10686 20 5.4165C20 4.72615 19.3284 4.1665 18.5 4.1665Z", fill: Colors.primary }), _jsx(Path, { opacity: 0.3, fillRule: "evenodd", clipRule: "evenodd", d: "M7.5 9.1665H16.5C17.3284 9.1665 18 9.72615 18 10.4165C18 11.1069 17.3284 11.6665 16.5 11.6665H7.5C6.67157 11.6665 6 11.1069 6 10.4165C6 9.72615 6.67157 9.1665 7.5 9.1665ZM10.5 14.1665H13.5C14.3284 14.1665 15 14.7261 15 15.4165C15 16.1069 14.3284 16.6665 13.5 16.6665H10.5C9.67157 16.6665 9 16.1069 9 15.4165C9 14.7261 9.67157 14.1665 10.5 14.1665Z", fill: Colors.primary })] }), _jsx(Text, { style: styles.filterButtonText, children: translations["filters_title"] || "Filters" })] }), _jsx(Modal, { visible: isPopupOpen, animationType: "slide", presentationStyle: "fullScreen", onRequestClose: () => setIsPopupOpen(false), children: _jsxs(View, { style: [styles.modalContainer, { paddingTop: insets.top }], children: [_jsx(TouchableOpacity, { style: styles.closeButton, onPress: () => setIsPopupOpen(false), hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }, children: _jsx(CloseIcon, { size: 16 }) }), _jsx(View, { style: styles.modalHeader, children: _jsx(Text, { style: styles.modalTitle, children: translations["filters_title"] || "Filters" }) }), _jsx(ScrollView, { style: styles.modalContent, contentContainerStyle: styles.modalContentInner, showsVerticalScrollIndicator: false, scrollEnabled: scrollEnabled, children: _jsx(FiltersContent, { has: has, openSections: openSections, toggleSection: toggleSection, getValue: getValue, handleRangeChange: handleRangeChange, handleInputChange: handleInputChange, getRangeStyle: getRangeStyle, formatTime: formatTime, formatDuration: formatDuration, airlines: airlines, translations: translations, currencySign: currencySign, dateTimeFormat: dateTimeFormat, maxDayMinutes: MAX_DAY_MINUTES, onRangeDragStart: () => setScrollEnabled(false), onRangeDragEnd: () => setScrollEnabled(true) }) }), _jsxs(View, { style: styles.modalFooter, children: [_jsx(TouchableOpacity, { style: styles.resetButton, onPress: handleReset, activeOpacity: 0.7, children: _jsx(Text, { style: styles.resetButtonText, children: translations["filter_reset_btn"] || "Reset" }) }), _jsx(TouchableOpacity, { style: styles.applyButton, onPress: handleApply, activeOpacity: 0.8, children: _jsx(Text, { style: styles.applyButtonText, children: translations["filter_apply_btn"] || "Apply" }) })] })] }) })] }));
+};
+const styles = StyleSheet.create({
+    loadingContainer: {
+        padding: Spacing.lg,
+        alignItems: "center",
+    },
+    loadingText: {
+        fontSize: FontSize.md,
+        color: Colors.textSecondary,
+    },
+    filterButton: {
+        flexDirection: "row",
+        alignItems: "center",
+        backgroundColor: Colors.surface,
+        borderRadius: BorderRadius.md,
+        paddingVertical: Spacing.md,
+        paddingHorizontal: Spacing.lg,
+        marginHorizontal: Spacing.lg,
+        marginBottom: Spacing.md,
+        borderWidth: 1,
+        borderColor: Colors.border,
+    },
+    filterButtonText: {
+        marginLeft: Spacing.sm,
+        fontSize: FontSize.md,
+        fontWeight: "500",
+        color: Colors.text,
+    },
+    modalContainer: {
+        flex: 1,
+        backgroundColor: Colors.surface,
+    },
+    closeButton: {
+        alignSelf: "flex-end",
+        padding: Spacing.lg,
+    },
+    modalHeader: {
+        paddingHorizontal: Spacing.lg,
+        paddingBottom: Spacing.md,
+        borderBottomWidth: 1,
+        borderBottomColor: Colors.border,
+    },
+    modalTitle: {
+        fontSize: FontSize.lg,
+        fontWeight: "700",
+        color: Colors.text,
+    },
+    modalContent: {
+        flex: 1,
+    },
+    modalContentInner: {
+        padding: Spacing.lg,
+    },
+    modalFooter: {
+        flexDirection: "row",
+        paddingHorizontal: Spacing.lg,
+        paddingVertical: Spacing.md,
+        borderTopWidth: 1,
+        borderTopColor: Colors.borderLight,
+        gap: Spacing.md,
+    },
+    resetButton: {
+        flex: 1,
+        paddingVertical: Spacing.md,
+        borderRadius: BorderRadius.md,
+        borderWidth: 1,
+        borderColor: Colors.border,
+        alignItems: "center",
+    },
+    resetButtonText: {
+        fontSize: FontSize.md,
+        fontWeight: "600",
+        color: Colors.textSecondary,
+    },
+    applyButton: {
+        flex: 1,
+        paddingVertical: Spacing.md,
+        borderRadius: BorderRadius.md,
+        backgroundColor: Colors.primary,
+        alignItems: "center",
+    },
+    applyButtonText: {
+        fontSize: FontSize.md,
+        fontWeight: "600",
+        color: Colors.textOnPrimary,
+    },
+});
+export default FlightFiltersDynamic;

package/dist/modules/search-form/flight/flight-filters/RangeBlock.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+type RangeBlockProps = {
+    title: string;
+    minName: string;
+    maxName: string;
+    maxValue: number;
+    step: number;
+    open: boolean;
+    toggle: () => void;
+    getValue: (name: string, fallback: number) => number | string;
+    handleRangeChange: (name: string, value: number) => void;
+    getRangeStyle: (minName: string, maxName: string, maxValue: number) => {
+        left: string;
+        right: string;
+    };
+    formatter: (value: number) => string;
+    isShow: boolean;
+    onDragStart?: () => void;
+    onDragEnd?: () => void;
+};
+declare const RangeBlock: React.FC<RangeBlockProps>;
+export default RangeBlock;

package/dist/modules/search-form/flight/flight-filters/RangeBlock.js

@@ -0,0 +1,164 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useCallback } from "react";
+import { View, Text, PanResponder, StyleSheet, } from "react-native";
+import { Colors, Spacing, FontSize, BorderRadius } from "../../../../theme/colors";
+const THUMB_SIZE = 28;
+const TRACK_HEIGHT = 4;
+const RangeBlock = ({ title, minName, maxName, maxValue, step, getValue, handleRangeChange, formatter, onDragStart, onDragEnd, }) => {
+    const rawMin = getValue(minName, 0);
+    const rawMax = getValue(maxName, maxValue);
+    const currentMin = typeof rawMin === "string" ? parseFloat(rawMin) : rawMin;
+    const currentMax = typeof rawMax === "string" ? parseFloat(rawMax) : rawMax;
+    const isPriceFilter = title.toLowerCase().includes("price") ||
+        title.toLowerCase().includes("\u0446\u0435\u043D");
+    const isMaxPlus = isPriceFilter && currentMax >= maxValue;
+    const showMaxLabel = isMaxPlus
+        ? `${formatter(maxValue)}+`
+        : formatter(currentMax);
+    const minRef = useRef(currentMin);
+    const maxRef = useRef(currentMax);
+    minRef.current = currentMin;
+    maxRef.current = currentMax;
+    const onDragStartRef = useRef(onDragStart);
+    const onDragEndRef = useRef(onDragEnd);
+    onDragStartRef.current = onDragStart;
+    onDragEndRef.current = onDragEnd;
+    const trackLayoutRef = useRef({ x: 0, width: 0 });
+    const startValueRef = useRef(0);
+    const onTrackLayout = useCallback((e) => {
+        e.target.measureInWindow((x, _y, width) => {
+            trackLayoutRef.current = { x, width };
+        });
+    }, []);
+    const pageXToValue = (pageX) => {
+        const { x, width } = trackLayoutRef.current;
+        if (width === 0)
+            return 0;
+        const ratio = Math.max(0, Math.min(1, (pageX - x) / width));
+        return Math.round((ratio * maxValue) / step) * step;
+    };
+    const minPanResponder = useRef(PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponderCapture: () => true,
+        onPanResponderTerminationRequest: () => false,
+        onPanResponderGrant: () => {
+            startValueRef.current = minRef.current;
+            onDragStartRef.current?.();
+        },
+        onPanResponderMove: (evt) => {
+            const val = pageXToValue(evt.nativeEvent.pageX);
+            const clamped = Math.min(val, maxRef.current - step);
+            if (clamped >= 0 && clamped !== minRef.current) {
+                handleRangeChange(minName, clamped);
+            }
+        },
+        onPanResponderRelease: () => {
+            onDragEndRef.current?.();
+        },
+        onPanResponderTerminate: () => {
+            onDragEndRef.current?.();
+        },
+    })).current;
+    const maxPanResponder = useRef(PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponderCapture: () => true,
+        onPanResponderTerminationRequest: () => false,
+        onPanResponderGrant: () => {
+            startValueRef.current = maxRef.current;
+            onDragStartRef.current?.();
+        },
+        onPanResponderMove: (evt) => {
+            const val = pageXToValue(evt.nativeEvent.pageX);
+            const clamped = Math.max(val, minRef.current + step);
+            const final = Math.min(clamped, maxValue);
+            if (final !== maxRef.current) {
+                handleRangeChange(maxName, final);
+            }
+        },
+        onPanResponderRelease: () => {
+            onDragEndRef.current?.();
+        },
+        onPanResponderTerminate: () => {
+            onDragEndRef.current?.();
+        },
+    })).current;
+    const minPercent = (currentMin / maxValue) * 100;
+    const maxPercent = (currentMax / maxValue) * 100;
+    return (_jsxs(View, { style: styles.section, children: [_jsx(View, { style: styles.sectionHeader, children: _jsx(Text, { style: styles.sectionTitle, children: title }) }), _jsxs(View, { style: styles.rangeContainer, children: [_jsxs(View, { style: styles.rangeLabels, children: [_jsx(Text, { style: styles.rangeLabel, children: formatter(currentMin) }), _jsx(Text, { style: styles.rangeLabel, children: showMaxLabel })] }), _jsxs(View, { style: styles.trackContainer, onLayout: onTrackLayout, children: [_jsx(View, { style: styles.track }), _jsx(View, { style: [
+                                    styles.selectedRange,
+                                    {
+                                        left: `${minPercent}%`,
+                                        right: `${100 - maxPercent}%`,
+                                    },
+                                ] }), _jsx(View, { style: [
+                                    styles.thumb,
+                                    { left: `${minPercent}%`, marginLeft: -THUMB_SIZE / 2 },
+                                ], hitSlop: { top: 12, bottom: 12, left: 12, right: 12 }, ...minPanResponder.panHandlers }), _jsx(View, { style: [
+                                    styles.thumb,
+                                    { left: `${maxPercent}%`, marginLeft: -THUMB_SIZE / 2 },
+                                ], hitSlop: { top: 12, bottom: 12, left: 12, right: 12 }, ...maxPanResponder.panHandlers })] })] })] }));
+};
+const styles = StyleSheet.create({
+    section: {
+        marginBottom: Spacing.md,
+    },
+    sectionHeader: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        paddingVertical: Spacing.md,
+    },
+    sectionTitle: {
+        fontSize: FontSize.md,
+        fontWeight: "600",
+        color: Colors.text,
+    },
+    rangeContainer: {
+        paddingHorizontal: Spacing.xs,
+        paddingBottom: Spacing.md,
+    },
+    rangeLabels: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        marginBottom: Spacing.sm,
+    },
+    rangeLabel: {
+        fontSize: FontSize.sm,
+        color: Colors.textSecondary,
+    },
+    trackContainer: {
+        height: THUMB_SIZE + 8,
+        justifyContent: "center",
+        position: "relative",
+    },
+    track: {
+        height: TRACK_HEIGHT,
+        backgroundColor: Colors.borderLight,
+        borderRadius: BorderRadius.full,
+    },
+    selectedRange: {
+        position: "absolute",
+        height: TRACK_HEIGHT,
+        backgroundColor: Colors.primary,
+        borderRadius: BorderRadius.full,
+        top: (THUMB_SIZE + 8 - TRACK_HEIGHT) / 2,
+    },
+    thumb: {
+        position: "absolute",
+        width: THUMB_SIZE,
+        height: THUMB_SIZE,
+        borderRadius: THUMB_SIZE / 2,
+        backgroundColor: Colors.surface,
+        borderWidth: 2,
+        borderColor: Colors.primary,
+        top: 4,
+        shadowColor: Colors.black,
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.15,
+        shadowRadius: 3,
+        elevation: 3,
+    },
+});
+export default RangeBlock;

package/dist/modules/search-form/flight/flight-filters/index.d.ts

@@ -0,0 +1 @@
+export { default as FlightFilters } from "./FlightFiltersDynamic";

package/dist/modules/search-form/flight/flight-filters/index.js

@@ -0,0 +1 @@
+export { default as FlightFilters } from "./FlightFiltersDynamic";