@devtravelcode/widget-native 1.0.0

package/dist/modules/search-form/cars/car-filters/CarFilters.js

@@ -0,0 +1,318 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useMemo, useCallback } from "react";
+import { View, Text, TouchableOpacity, StyleSheet, } from "react-native";
+import Svg, { Path } from "react-native-svg";
+import { Modal } from "../../../../components/ui/Modal";
+import { FilterSection } from "./FilterSection";
+import { useCarFilters } from "./useCarFilters";
+import { useWidget } from "../../../../context/WidgetContext";
+import { Colors, Spacing, FontSize, BorderRadius } from "../../../../theme/colors";
+const CURRENCY_SIGNS = {
+    USD: "$",
+    EUR: "\u20AC",
+    GBP: "\u00A3",
+    CHF: "\u20A3",
+};
+const CheckboxItem = ({ checked, label, onPress, description, }) => (_jsxs(TouchableOpacity, { style: styles.checkboxRow, onPress: onPress, activeOpacity: 0.7, children: [_jsx(View, { style: [styles.checkbox, checked && styles.checkboxChecked], children: checked ? _jsx(Text, { style: styles.checkmark, children: "\u2713" }) : null }), _jsxs(View, { style: styles.checkboxLabelContainer, children: [_jsx(Text, { style: styles.checkboxLabel, children: label }), description ? (_jsx(Text, { style: styles.checkboxDescription, children: description })) : null] })] }));
+const SelectClearButtons = ({ onSelectAll, onClearAll, translations, }) => (_jsxs(View, { style: styles.selectClearRow, children: [_jsx(TouchableOpacity, { onPress: onSelectAll, activeOpacity: 0.7, children: _jsx(Text, { style: styles.selectAllText, children: translations["filter_select_all"] || "Select all" }) }), _jsx(TouchableOpacity, { onPress: onClearAll, activeOpacity: 0.7, children: _jsx(Text, { style: styles.clearAllText, children: translations["filter_remove_all"] || "Remove all" }) })] }));
+export const CarFilters = ({ offers, onFilterChange, onFiltersApplied, translations, }) => {
+    const { currency } = useWidget();
+    const currencySign = CURRENCY_SIGNS[currency] || currency;
+    const { filters, setFilters, resetFilters, filteredOffers, UI_MIN_PRICE, UI_MAX_PRICE, handleRangeChange, toggle, } = useCarFilters(offers);
+    const [openSections, setOpenSections] = useState([]);
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const toggleSection = useCallback((key) => {
+        setOpenSections((prev) => prev.includes(key)
+            ? prev.filter((k) => k !== key)
+            : [...prev, key]);
+    }, []);
+    useEffect(() => {
+        if (offers.length > 0) {
+            onFiltersApplied?.();
+        }
+    }, [filters]);
+    useEffect(() => {
+        onFilterChange?.(filteredOffers);
+    }, [filteredOffers]);
+    const uniqueSuppliers = useMemo(() => {
+        const map = new Map();
+        (offers || []).forEach((o) => {
+            const id = o?.supplier?.id;
+            const name = o?.supplier?.name;
+            if (id != null && name)
+                map.set(String(id), String(name));
+        });
+        return Array.from(map.entries()).sort((a, b) => a[1].localeCompare(b[1]));
+    }, [offers]);
+    const uniqueBrands = useMemo(() => {
+        const set = new Set();
+        (offers || []).forEach((o) => {
+            const rawBrand = String(o?.car?.name || "").split(" ")[0];
+            const brand = rawBrand.trim().replace(/\s+/g, " ");
+            if (brand)
+                set.add(brand);
+        });
+        return Array.from(set).sort((a, b) => a.localeCompare(b));
+    }, [offers]);
+    const includedOptionIds = useMemo(() => {
+        const map = new Map();
+        (offers || []).forEach((o) => {
+            (o?.included_options || []).forEach((opt) => {
+                if (opt?.id != null) {
+                    map.set(String(opt.id), String(opt?.name || `Option ${opt.id}`));
+                }
+            });
+        });
+        return Array.from(map.entries()).sort((a, b) => a[1].localeCompare(b[1]));
+    }, [offers]);
+    useEffect(() => {
+        if (filters.suppliers.length === 0 && uniqueSuppliers.length > 0) {
+            setFilters((prev) => ({
+                ...prev,
+                suppliers: uniqueSuppliers.map(([id]) => Number(id)),
+            }));
+        }
+        if (filters.brands.length === 0 && uniqueBrands.length > 0) {
+            setFilters((prev) => ({
+                ...prev,
+                brands: uniqueBrands,
+            }));
+        }
+    }, [uniqueSuppliers, uniqueBrands]);
+    const normalizeKey = (name) => name
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "_")
+        .replace(/_+/g, "_")
+        .replace(/^_|_$/g, "");
+    const renderFiltersContent = () => (_jsxs(View, { style: styles.filtersContent, children: [_jsx(Text, { style: styles.filtersTitle, children: translations["filters_title"] || "Filters" }), _jsxs(View, { style: styles.priceSection, children: [_jsx(Text, { style: styles.sectionTitle, children: translations["filter_price"] || "Price" }), _jsxs(View, { style: styles.priceRange, children: [_jsxs(Text, { style: styles.priceText, children: [Math.round(filters.price.min), " ", currencySign] }), _jsx(Text, { style: styles.priceText, children: filters.price.max >= UI_MAX_PRICE
+                                    ? `${UI_MAX_PRICE}+ ${currencySign}`
+                                    : `${Math.round(filters.price.max)} ${currencySign}` })] }), _jsx(View, { style: styles.priceBar, children: _jsx(View, { style: [
+                                styles.priceBarFill,
+                                {
+                                    left: `${((filters.price.min - UI_MIN_PRICE) / (UI_MAX_PRICE - UI_MIN_PRICE)) * 100}%`,
+                                    right: `${100 - ((filters.price.max - UI_MIN_PRICE) / (UI_MAX_PRICE - UI_MIN_PRICE)) * 100}%`,
+                                },
+                            ] }) }), _jsxs(View, { style: styles.priceButtonsRow, children: [_jsx(TouchableOpacity, { style: styles.priceAdjustBtn, onPress: () => handleRangeChange("min", Math.max(UI_MIN_PRICE, filters.price.min - 100)), activeOpacity: 0.7, children: _jsx(Text, { style: styles.priceAdjustText, children: "- Min" }) }), _jsx(TouchableOpacity, { style: styles.priceAdjustBtn, onPress: () => handleRangeChange("min", Math.min(filters.price.max - 20, filters.price.min + 100)), activeOpacity: 0.7, children: _jsx(Text, { style: styles.priceAdjustText, children: "+ Min" }) }), _jsx(TouchableOpacity, { style: styles.priceAdjustBtn, onPress: () => handleRangeChange("max", Math.max(filters.price.min + 20, filters.price.max - 100)), activeOpacity: 0.7, children: _jsx(Text, { style: styles.priceAdjustText, children: "- Max" }) }), _jsx(TouchableOpacity, { style: styles.priceAdjustBtn, onPress: () => handleRangeChange("max", Math.min(UI_MAX_PRICE, filters.price.max + 100)), activeOpacity: 0.7, children: _jsx(Text, { style: styles.priceAdjustText, children: "+ Max" }) })] })] }), _jsx(FilterSection, { title: translations["car_filters_transmission"] || "Transmission", isOpen: openSections.includes("transmission"), onToggle: () => toggleSection("transmission"), children: ["automatic", "manual"].map((val) => (_jsx(CheckboxItem, { checked: filters.transmission.includes(val), label: val === "automatic"
+                        ? translations["car_filters_transmission_auto"] || "Automatic"
+                        : translations["car_filters_transmission_manual"] || "Manual", onPress: () => toggle("transmission", val) }, val))) }), _jsx(FilterSection, { title: translations["car_filters_seats"] || "Seats", isOpen: openSections.includes("seats"), onToggle: () => toggleSection("seats"), children: [4, 5, 6].map((seat) => (_jsx(CheckboxItem, { checked: filters.seats.includes(seat), label: seat === 6 ? "6+" : String(seat), onPress: () => toggle("seats", seat) }, seat))) }), _jsx(FilterSection, { title: translations["car_filters_options"] || "Options", isOpen: openSections.includes("includedOptions"), onToggle: () => toggleSection("includedOptions"), children: includedOptionIds.map(([id, name]) => {
+                    const key = "car_option_" + normalizeKey(name);
+                    const label = translations[key] || name;
+                    return (_jsx(CheckboxItem, { checked: filters.includedOptions.includes(id), label: label, onPress: () => toggle("includedOptions", id) }, id));
+                }) }), _jsx(FilterSection, { title: translations["car_filters_fuel_policy"] || "Fuel policy", isOpen: openSections.includes("fuelPolicy"), onToggle: () => toggleSection("fuelPolicy"), children: [
+                    {
+                        value: "full_to_full",
+                        title: translations["car_filters_fuel_policy_full_to_full_title"] ||
+                            "Full to full",
+                        description: translations["car_filters_fuel_policy_full_to_full_desc"] ||
+                            "Pick up and return with a full tank.",
+                    },
+                    {
+                        value: "same_to_same",
+                        title: translations["car_filters_fuel_policy_same_to_same_title"] ||
+                            "Same to same",
+                        description: translations["car_filters_fuel_policy_same_to_same_desc"] ||
+                            "Return the car with the same fuel level.",
+                    },
+                ].map((item) => (_jsx(CheckboxItem, { checked: filters.fuelPolicy.includes(item.value), label: item.title, description: item.description, onPress: () => toggle("fuelPolicy", item.value) }, item.value))) }), _jsx(FilterSection, { title: translations["car_filters_mileage"] || "Mileage", isOpen: openSections.includes("mileage"), onToggle: () => toggleSection("mileage"), children: [
+                    {
+                        value: "unlimited",
+                        title: translations["car_filters_mileage_unlimited_title"] ||
+                            "Unlimited",
+                        description: translations["car_filters_mileage_unlimited_desc"] ||
+                            "Drive as much as you want.",
+                    },
+                    {
+                        value: "limited",
+                        title: translations["car_filters_mileage_limited_title"] || "Limited",
+                        description: translations["car_filters_mileage_limited_desc"] ||
+                            "There is a kilometer limit.",
+                    },
+                ].map((item) => (_jsx(CheckboxItem, { checked: filters.mileage.includes(item.value), label: item.title, description: item.description, onPress: () => toggle("mileage", item.value) }, item.value))) }), _jsxs(FilterSection, { title: translations["car_filters_suppliers"] || "Suppliers", isOpen: openSections.includes("suppliers"), onToggle: () => toggleSection("suppliers"), children: [uniqueSuppliers.map(([id, name]) => (_jsx(CheckboxItem, { checked: filters.suppliers.includes(Number(id)), label: name, onPress: () => toggle("suppliers", Number(id)) }, id))), _jsx(SelectClearButtons, { onSelectAll: () => setFilters((prev) => ({
+                            ...prev,
+                            suppliers: uniqueSuppliers.map(([id]) => Number(id)),
+                        })), onClearAll: () => setFilters((prev) => ({ ...prev, suppliers: [] })), translations: translations })] }), _jsxs(FilterSection, { title: translations["car_filters_brand"] || "Car brand", isOpen: openSections.includes("brands"), onToggle: () => toggleSection("brands"), children: [uniqueBrands.map((brand) => (_jsx(CheckboxItem, { checked: filters.brands.includes(brand), label: brand, onPress: () => toggle("brands", brand) }, brand))), _jsx(SelectClearButtons, { onSelectAll: () => setFilters((prev) => ({
+                            ...prev,
+                            brands: uniqueBrands,
+                        })), onClearAll: () => setFilters((prev) => ({ ...prev, brands: [] })), translations: translations })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(TouchableOpacity, { style: styles.openButton, onPress: () => setIsModalOpen(true), activeOpacity: 0.8, 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.openButtonText, children: translations["filters_title"] || "Filters" })] }), _jsx(Modal, { visible: isModalOpen, onClose: () => setIsModalOpen(false), title: translations["filters_title"] || "Filters", fullScreen: true, children: _jsxs(View, { style: styles.modalInner, children: [renderFiltersContent(), _jsxs(View, { style: styles.footerButtons, children: [_jsx(TouchableOpacity, { style: styles.resetButton, onPress: () => {
+                                        resetFilters();
+                                    }, activeOpacity: 0.7, children: _jsx(Text, { style: styles.resetButtonText, children: translations["filter_reset_btn"] || "Reset" }) }), _jsx(TouchableOpacity, { style: styles.applyButton, onPress: () => {
+                                        onFiltersApplied?.();
+                                        setIsModalOpen(false);
+                                    }, activeOpacity: 0.8, children: _jsx(Text, { style: styles.applyButtonText, children: translations["filter_apply_btn"] || "Apply" }) })] })] }) })] }));
+};
+const styles = StyleSheet.create({
+    openButton: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: Spacing.sm,
+        backgroundColor: Colors.surface,
+        borderRadius: BorderRadius.md,
+        paddingVertical: Spacing.md,
+        paddingHorizontal: Spacing.lg,
+        marginHorizontal: Spacing.lg,
+        marginBottom: Spacing.md,
+        borderWidth: 1,
+        borderColor: Colors.border,
+        shadowColor: Colors.black,
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.05,
+        shadowRadius: 2,
+        elevation: 1,
+    },
+    openButtonText: {
+        fontSize: FontSize.md,
+        color: Colors.text,
+        fontWeight: "500",
+    },
+    modalInner: {
+        flex: 1,
+    },
+    filtersContent: {
+        gap: Spacing.xs,
+    },
+    filtersTitle: {
+        fontSize: FontSize.xl,
+        fontWeight: "700",
+        color: Colors.text,
+        marginBottom: Spacing.md,
+    },
+    priceSection: {
+        paddingBottom: Spacing.md,
+        borderBottomWidth: StyleSheet.hairlineWidth,
+        borderBottomColor: Colors.borderLight,
+    },
+    sectionTitle: {
+        fontSize: FontSize.md,
+        fontWeight: "600",
+        color: Colors.text,
+        marginBottom: Spacing.sm,
+    },
+    priceRange: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        marginBottom: Spacing.sm,
+    },
+    priceText: {
+        fontSize: FontSize.sm,
+        color: Colors.textSecondary,
+        fontWeight: "500",
+    },
+    priceBar: {
+        height: 4,
+        backgroundColor: Colors.borderLight,
+        borderRadius: 2,
+        marginBottom: Spacing.md,
+        position: "relative",
+    },
+    priceBarFill: {
+        position: "absolute",
+        top: 0,
+        bottom: 0,
+        backgroundColor: Colors.primary,
+        borderRadius: 2,
+    },
+    priceButtonsRow: {
+        flexDirection: "row",
+        gap: Spacing.sm,
+        flexWrap: "wrap",
+    },
+    priceAdjustBtn: {
+        paddingVertical: Spacing.xs,
+        paddingHorizontal: Spacing.md,
+        borderRadius: BorderRadius.sm,
+        borderWidth: 1,
+        borderColor: Colors.border,
+        backgroundColor: Colors.surfaceSecondary,
+    },
+    priceAdjustText: {
+        fontSize: FontSize.xs,
+        color: Colors.textSecondary,
+        fontWeight: "500",
+    },
+    checkboxRow: {
+        flexDirection: "row",
+        alignItems: "flex-start",
+        gap: Spacing.sm,
+        paddingVertical: Spacing.xs,
+    },
+    checkbox: {
+        width: 22,
+        height: 22,
+        borderRadius: BorderRadius.sm,
+        borderWidth: 2,
+        borderColor: Colors.border,
+        alignItems: "center",
+        justifyContent: "center",
+        marginTop: 1,
+    },
+    checkboxChecked: {
+        backgroundColor: Colors.primary,
+        borderColor: Colors.primary,
+    },
+    checkmark: {
+        color: Colors.textOnPrimary,
+        fontSize: FontSize.xs,
+        fontWeight: "700",
+    },
+    checkboxLabelContainer: {
+        flex: 1,
+    },
+    checkboxLabel: {
+        fontSize: FontSize.md,
+        color: Colors.text,
+    },
+    checkboxDescription: {
+        fontSize: FontSize.xs,
+        color: Colors.textTertiary,
+        marginTop: 2,
+    },
+    selectClearRow: {
+        flexDirection: "row",
+        gap: Spacing.lg,
+        marginTop: Spacing.xs,
+    },
+    selectAllText: {
+        fontSize: FontSize.sm,
+        color: Colors.primary,
+        fontWeight: "500",
+    },
+    clearAllText: {
+        fontSize: FontSize.sm,
+        color: Colors.textTertiary,
+        fontWeight: "500",
+    },
+    footerButtons: {
+        flexDirection: "row",
+        gap: Spacing.md,
+        marginTop: Spacing.xl,
+        paddingTop: Spacing.md,
+        borderTopWidth: 1,
+        borderTopColor: Colors.borderLight,
+    },
+    resetButton: {
+        flex: 1,
+        paddingVertical: Spacing.md,
+        borderRadius: BorderRadius.md,
+        borderWidth: 1,
+        borderColor: Colors.border,
+        alignItems: "center",
+    },
+    resetButtonText: {
+        fontSize: FontSize.md,
+        color: Colors.textSecondary,
+        fontWeight: "600",
+    },
+    applyButton: {
+        flex: 1,
+        paddingVertical: Spacing.md,
+        borderRadius: BorderRadius.md,
+        backgroundColor: Colors.primary,
+        alignItems: "center",
+    },
+    applyButtonText: {
+        fontSize: FontSize.md,
+        color: Colors.textOnPrimary,
+        fontWeight: "600",
+    },
+});

package/dist/modules/search-form/cars/car-filters/FilterSection.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export type FilterSectionProps = {
+    id?: string;
+    title: string;
+    isOpen: boolean;
+    onToggle: () => void;
+    children: React.ReactNode;
+};
+export declare const FilterSection: React.FC<FilterSectionProps>;

package/dist/modules/search-form/cars/car-filters/FilterSection.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Text, TouchableOpacity, StyleSheet, } from "react-native";
+import Svg, { Path } from "react-native-svg";
+import { Colors, Spacing, FontSize } from "../../../../theme/colors";
+const ChevronIcon = ({ rotated }) => (_jsx(Svg, { width: 20, height: 20, viewBox: "0 0 24 24", fill: Colors.textSecondary, style: rotated ? { transform: [{ rotate: "-90deg" }] } : undefined, children: _jsx(Path, { d: "M16 19.5 14.5 21 6 12.5v-1L14.5 3 16 4.5 8.5 12l7.5 7.5Z" }) }));
+export const FilterSection = ({ title, isOpen, onToggle, children, }) => (_jsxs(View, { style: styles.container, children: [_jsxs(TouchableOpacity, { style: styles.header, onPress: onToggle, activeOpacity: 0.7, children: [_jsx(Text, { style: styles.title, children: title }), _jsx(ChevronIcon, { rotated: isOpen })] }), isOpen ? _jsx(View, { style: styles.content, children: children }) : null] }));
+const styles = StyleSheet.create({
+    container: {
+        borderBottomWidth: StyleSheet.hairlineWidth,
+        borderBottomColor: Colors.borderLight,
+    },
+    header: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        paddingVertical: Spacing.md,
+        paddingHorizontal: Spacing.sm,
+    },
+    title: {
+        fontSize: FontSize.md,
+        fontWeight: "600",
+        color: Colors.text,
+        flex: 1,
+    },
+    content: {
+        paddingHorizontal: Spacing.sm,
+        paddingBottom: Spacing.md,
+        gap: Spacing.sm,
+    },
+});

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

@@ -0,0 +1,6 @@
+export { CarFilters } from "./CarFilters";
+export type { CarFiltersProps } from "./CarFilters";
+export { FilterSection } from "./FilterSection";
+export type { FilterSectionProps } from "./FilterSection";
+export { useCarFilters } from "./useCarFilters";
+export type { CarFiltersState } from "./useCarFilters";

package/dist/modules/search-form/cars/car-filters/index.js

@@ -0,0 +1,3 @@
+export { CarFilters } from "./CarFilters";
+export { FilterSection } from "./FilterSection";
+export { useCarFilters } from "./useCarFilters";

package/dist/modules/search-form/cars/car-filters/useCarFilters.d.ts

@@ -0,0 +1,24 @@
+export type CarFiltersState = {
+    price: {
+        min: number;
+        max: number;
+    };
+    transmission: string[];
+    seats: number[];
+    fuelPolicy: string[];
+    mileage: string[];
+    suppliers: number[];
+    brands: string[];
+    includedOptions: string[];
+    category: string[];
+};
+export declare const useCarFilters: (offers: any[]) => {
+    filters: CarFiltersState;
+    setFilters: import("react").Dispatch<import("react").SetStateAction<CarFiltersState>>;
+    resetFilters: () => void;
+    filteredOffers: any[];
+    UI_MIN_PRICE: number;
+    UI_MAX_PRICE: number;
+    handleRangeChange: (type: "min" | "max", value: number) => void;
+    toggle: (name: keyof CarFiltersState, value: string | number) => void;
+};

package/dist/modules/search-form/cars/car-filters/useCarFilters.js

@@ -0,0 +1,121 @@
+import { useEffect, useState } from "react";
+const UI_MIN_PRICE = 0;
+const UI_MAX_PRICE = 4000;
+const DEFAULT_STATE = {
+    price: { min: UI_MIN_PRICE, max: UI_MAX_PRICE },
+    transmission: [],
+    seats: [],
+    fuelPolicy: [],
+    mileage: [],
+    suppliers: [],
+    brands: [],
+    includedOptions: [],
+    category: [],
+};
+export const useCarFilters = (offers) => {
+    const [filters, setFilters] = useState(DEFAULT_STATE);
+    const [filteredOffers, setFilteredOffers] = useState(offers);
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            let filtered = [...offers];
+            const maxCap = filters.price.max >= UI_MAX_PRICE
+                ? Infinity
+                : filters.price.max;
+            const minCap = Math.max(UI_MIN_PRICE, filters.price.min);
+            filtered = filtered.filter((o) => {
+                const total = Number(o?.price?.total) || 0;
+                return total >= minCap && total <= maxCap;
+            });
+            if (filters.transmission.length) {
+                filtered = filtered.filter((o) => filters.transmission.includes(o?.car?.transmission));
+            }
+            if (filters.seats.length) {
+                filtered = filtered.filter((o) => {
+                    const s = Number(o?.car?.seats) || 0;
+                    return filters.seats.some((want) => want >= 6 ? s >= 6 : s === want);
+                });
+            }
+            if (filters.fuelPolicy.length) {
+                filtered = filtered.filter((o) => filters.fuelPolicy.includes(o?.car?.fuel));
+            }
+            if (filters.mileage.length) {
+                filtered = filtered.filter((o) => {
+                    const type = o?.mileage?.unlimited ? "unlimited" : "limited";
+                    return filters.mileage.includes(type);
+                });
+            }
+            if (filters.suppliers.length) {
+                filtered = filtered.filter((o) => filters.suppliers.includes(Number(o?.supplier?.id)));
+            }
+            if (filters.brands.length) {
+                filtered = filtered.filter((o) => {
+                    const brand = String(o?.car?.name || "").split(" ")[0].trim();
+                    return filters.brands.includes(brand);
+                });
+            }
+            if (filters.category.length) {
+                filtered = filtered.filter((o) => {
+                    const cat = String(o?.car?.category || "").toLowerCase();
+                    return filters.category.includes(cat);
+                });
+            }
+            if (filters.includedOptions.length) {
+                filtered = filtered.filter((o) => {
+                    const includedIds = (o?.included_options || []).map((opt) => String(opt?.id));
+                    return filters.includedOptions.every((id) => includedIds.includes(id));
+                });
+            }
+            console.log("🔍 Активные фильтры:", filters);
+            console.log("✅ Найдено офферов:", filtered.length);
+            setFilteredOffers(filtered);
+        }, 120);
+        return () => clearTimeout(timer);
+    }, [filters, offers]);
+    const resetFilters = () => setFilters(DEFAULT_STATE);
+    const SLIDER_GAP = 20;
+    const handleRangeChange = (type, value) => {
+        setFilters(prev => {
+            let nextMin = prev.price.min;
+            let nextMax = prev.price.max;
+            if (type === "min") {
+                nextMin = value;
+                if (nextMin > nextMax - SLIDER_GAP) {
+                    nextMin = nextMax - SLIDER_GAP;
+                }
+                nextMin = Math.max(UI_MIN_PRICE, nextMin);
+            }
+            if (type === "max") {
+                nextMax = value;
+                if (nextMax < nextMin + SLIDER_GAP) {
+                    nextMax = nextMin + SLIDER_GAP;
+                }
+                nextMax = Math.min(UI_MAX_PRICE, nextMax);
+            }
+            return {
+                ...prev,
+                price: { min: nextMin, max: nextMax }
+            };
+        });
+    };
+    const toggle = (name, value) => {
+        setFilters((prev) => {
+            const arr = prev[name];
+            return {
+                ...prev,
+                [name]: arr.includes(value)
+                    ? arr.filter((v) => v !== value)
+                    : [...arr, value],
+            };
+        });
+    };
+    return {
+        filters,
+        setFilters,
+        resetFilters,
+        filteredOffers,
+        UI_MIN_PRICE,
+        UI_MAX_PRICE,
+        handleRangeChange,
+        toggle,
+    };
+};

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

@@ -0,0 +1,8 @@
+import React from "react";
+type AirlinesSelectorProps = {
+    value: string[];
+    onChange: (val: string[]) => void;
+    translations: Record<string, string>;
+};
+declare const AirlinesSelector: React.FC<AirlinesSelectorProps>;
+export default AirlinesSelector;