@devtravelcode/widget-native 1.0.0

package/dist/modules/search-form/SkeletonWidget.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, StyleSheet } from "react-native";
+import { Skeleton } from "../../components/ui/Skeleton";
+import { Colors, Spacing, BorderRadius } from "../../theme/colors";
+export const SkeletonWidget = () => {
+    return (_jsxs(View, { style: styles.container, children: [_jsx(Skeleton, { width: "100%", height: 120, borderRadius: BorderRadius.lg, style: styles.banner }), _jsxs(View, { style: styles.inner, children: [_jsxs(View, { style: styles.tabs, children: [_jsx(Skeleton, { width: 80, height: 36, borderRadius: BorderRadius.md }), _jsx(Skeleton, { width: 80, height: 36, borderRadius: BorderRadius.md }), _jsx(Skeleton, { width: 80, height: 36, borderRadius: BorderRadius.md })] }), _jsxs(View, { style: styles.form, children: [_jsxs(View, { style: styles.row, children: [_jsx(Skeleton, { width: "30%", height: 44, borderRadius: BorderRadius.md }), _jsx(Skeleton, { width: "30%", height: 44, borderRadius: BorderRadius.md }), _jsx(Skeleton, { width: "30%", height: 44, borderRadius: BorderRadius.md })] }), _jsxs(View, { style: styles.row, children: [_jsx(Skeleton, { width: "30%", height: 44, borderRadius: BorderRadius.md }), _jsx(Skeleton, { width: "30%", height: 44, borderRadius: BorderRadius.md }), _jsx(Skeleton, { width: "30%", height: 44, borderRadius: BorderRadius.md })] }), _jsxs(View, { style: styles.row, children: [_jsx(Skeleton, { width: "30%", height: 44, borderRadius: BorderRadius.md }), _jsx(Skeleton, { width: "30%", height: 44, borderRadius: BorderRadius.md }), _jsx(Skeleton, { width: "30%", height: 44, borderRadius: BorderRadius.md })] })] })] })] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        padding: Spacing.lg,
+    },
+    banner: {
+        marginBottom: Spacing.lg,
+    },
+    inner: {
+        backgroundColor: Colors.surface,
+        borderRadius: BorderRadius.lg,
+        padding: Spacing.lg,
+    },
+    tabs: {
+        flexDirection: "row",
+        gap: Spacing.sm,
+        marginBottom: Spacing.lg,
+    },
+    form: {
+        gap: Spacing.md,
+    },
+    row: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        gap: Spacing.sm,
+    },
+});

package/dist/modules/search-form/TimePicker.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+type TimePickerProps = {
+    value: [string, string];
+    onChange: (val: [string, string]) => void;
+    lang?: "ru" | "en";
+    translations: Record<string, string>;
+};
+declare const TimePicker: React.FC<TimePickerProps>;
+export default TimePicker;

package/dist/modules/search-form/TimePicker.js

@@ -0,0 +1,182 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { View, Text, TouchableOpacity, Modal, StyleSheet, } from "react-native";
+import { useWidget } from "../../context/WidgetContext";
+import { Colors, Spacing, FontSize, BorderRadius } from "../../theme/colors";
+import { formStyles } from "../../theme/formStyles";
+const TimePicker = ({ value, onChange, lang = "ru", translations, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [activeField, setActiveField] = useState("from");
+    const [hours, setHours] = useState(10);
+    const [minutes, setMinutes] = useState(0);
+    const [period, setPeriod] = useState("AM");
+    const { dateTimeFormat } = useWidget();
+    const to24h = (h12, p) => {
+        if (p === "AM")
+            return h12 === 12 ? 0 : h12;
+        return h12 === 12 ? 12 : h12 + 12;
+    };
+    const to12h = (h24) => {
+        const p = h24 >= 12 ? "PM" : "AM";
+        let h = h24 % 12;
+        if (h === 0)
+            h = 12;
+        return { h, p };
+    };
+    const formatValue = (h24, m) => `${String(h24).padStart(2, "0")}:${String(m).padStart(2, "0")}`;
+    const formatInputTime = (time) => {
+        if (!time)
+            return "";
+        if (dateTimeFormat !== "usa")
+            return time;
+        const [h24, m] = time.split(":").map(Number);
+        const { h, p } = to12h(h24);
+        return `${h}:${String(m).padStart(2, "0")} ${p.toLowerCase()}`;
+    };
+    const applyTime = (h, m, p = period) => {
+        const h24 = dateTimeFormat === "usa" ? to24h(h, p) : h;
+        const next = formatValue(h24, m);
+        if (activeField === "from")
+            onChange([next, value[1]]);
+        if (activeField === "to")
+            onChange([value[0], next]);
+    };
+    const openPicker = (field) => {
+        setActiveField(field);
+        const current = field === "from" ? value[0] : value[1];
+        const [h24, m] = current.split(":").map(Number);
+        if (dateTimeFormat === "usa") {
+            const { h, p } = to12h(h24);
+            setHours(h);
+            setPeriod(p);
+        }
+        else {
+            setHours(h24);
+        }
+        setMinutes(m);
+        setIsOpen(true);
+    };
+    const adjustHours = (delta) => {
+        let h = hours + delta;
+        if (dateTimeFormat === "usa") {
+            if (h > 12)
+                h = 1;
+            if (h < 1)
+                h = 12;
+        }
+        else {
+            h = (h + 24) % 24;
+        }
+        setHours(h);
+        applyTime(h, minutes);
+    };
+    const adjustMinutes = (delta) => {
+        let m = minutes + delta;
+        let h = hours;
+        if (m >= 60) {
+            m = 0;
+            h =
+                dateTimeFormat === "usa"
+                    ? h === 12
+                        ? 1
+                        : h + 1
+                    : (h + 1) % 24;
+        }
+        if (m < 0) {
+            m = 45;
+            h =
+                dateTimeFormat === "usa"
+                    ? h === 1
+                        ? 12
+                        : h - 1
+                    : (h + 23) % 24;
+        }
+        setHours(h);
+        setMinutes(m);
+        applyTime(h, m);
+    };
+    return (_jsxs(View, { children: [_jsxs(View, { style: styles.fieldsRow, children: [_jsx(View, { style: styles.fieldContainer, children: _jsxs(TouchableOpacity, { style: formStyles.inputTrigger, onPress: () => openPicker("from"), activeOpacity: 0.7, children: [_jsx(Text, { style: formStyles.label, children: translations.timepicker_pickup_label ||
+                                        (lang === "en" ? "Pick-up time" : "\u0412\u0440\u0435\u043C\u044F \u043F\u043E\u043B\u0443\u0447\u0435\u043D\u0438\u044F") }), _jsx(Text, { style: styles.fieldValue, children: formatInputTime(value[0]) })] }) }), _jsx(View, { style: styles.fieldContainer, children: _jsxs(TouchableOpacity, { style: formStyles.inputTrigger, onPress: () => openPicker("to"), activeOpacity: 0.7, children: [_jsx(Text, { style: formStyles.label, children: translations.timepicker_dropoff_label ||
+                                        (lang === "en" ? "Drop-off time" : "\u0412\u0440\u0435\u043C\u044F \u0432\u043E\u0437\u0432\u0440\u0430\u0442\u0430") }), _jsx(Text, { style: styles.fieldValue, children: formatInputTime(value[1]) })] }) })] }), _jsx(Modal, { visible: isOpen, transparent: true, animationType: "fade", onRequestClose: () => setIsOpen(false), children: _jsx(TouchableOpacity, { style: styles.overlay, activeOpacity: 1, onPress: () => setIsOpen(false), children: _jsxs(View, { style: styles.pickerContainer, onStartShouldSetResponder: () => true, children: [_jsxs(View, { style: styles.pickerContent, children: [_jsxs(View, { style: styles.timeColumn, children: [_jsx(TouchableOpacity, { style: styles.arrowButton, onPress: () => adjustHours(1), children: _jsx(Text, { style: styles.arrowText, children: "\u25B2" }) }), _jsx(Text, { style: styles.timeValue, children: String(hours).padStart(2, "0") }), _jsx(TouchableOpacity, { style: styles.arrowButton, onPress: () => adjustHours(-1), children: _jsx(Text, { style: styles.arrowText, children: "\u25BC" }) })] }), _jsx(Text, { style: styles.timeSeparator, children: ":" }), _jsxs(View, { style: styles.timeColumn, children: [_jsx(TouchableOpacity, { style: styles.arrowButton, onPress: () => adjustMinutes(15), children: _jsx(Text, { style: styles.arrowText, children: "\u25B2" }) }), _jsx(Text, { style: styles.timeValue, children: String(minutes).padStart(2, "0") }), _jsx(TouchableOpacity, { style: styles.arrowButton, onPress: () => adjustMinutes(-15), children: _jsx(Text, { style: styles.arrowText, children: "\u25BC" }) })] }), dateTimeFormat === "usa" && (_jsxs(_Fragment, { children: [_jsx(View, { style: styles.timeSeparatorSpace }), _jsxs(View, { style: styles.timeColumn, children: [_jsx(TouchableOpacity, { style: styles.arrowButton, onPress: () => {
+                                                            const p = period === "AM" ? "PM" : "AM";
+                                                            setPeriod(p);
+                                                            applyTime(hours, minutes, p);
+                                                        }, children: _jsx(Text, { style: styles.arrowText, children: "\u25B2" }) }), _jsx(Text, { style: styles.timeValue, children: period }), _jsx(TouchableOpacity, { style: styles.arrowButton, onPress: () => {
+                                                            const p = period === "AM" ? "PM" : "AM";
+                                                            setPeriod(p);
+                                                            applyTime(hours, minutes, p);
+                                                        }, children: _jsx(Text, { style: styles.arrowText, children: "\u25BC" }) })] })] }))] }), _jsx(TouchableOpacity, { style: styles.doneButton, onPress: () => setIsOpen(false), activeOpacity: 0.8, children: _jsx(Text, { style: styles.doneButtonText, children: translations["done"] || "Done" }) })] }) }) })] }));
+};
+const styles = StyleSheet.create({
+    fieldsRow: {
+        flexDirection: "row",
+        gap: Spacing.md,
+    },
+    fieldContainer: {
+        flex: 1,
+    },
+    fieldValue: {
+        fontSize: FontSize.md,
+        color: Colors.text,
+    },
+    overlay: {
+        flex: 1,
+        backgroundColor: Colors.overlay,
+        justifyContent: "center",
+        alignItems: "center",
+        padding: Spacing.xxl,
+    },
+    pickerContainer: {
+        backgroundColor: Colors.surface,
+        borderRadius: BorderRadius.xl,
+        padding: Spacing.xxl,
+        width: "100%",
+        maxWidth: 320,
+        alignItems: "center",
+    },
+    pickerContent: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        marginBottom: Spacing.xxl,
+    },
+    timeColumn: {
+        alignItems: "center",
+        minWidth: 50,
+    },
+    arrowButton: {
+        padding: Spacing.sm,
+    },
+    arrowText: {
+        fontSize: FontSize.md,
+        color: Colors.textTertiary,
+    },
+    timeValue: {
+        fontSize: FontSize.xxxl,
+        fontWeight: "700",
+        color: Colors.text,
+        paddingVertical: Spacing.sm,
+    },
+    timeSeparator: {
+        fontSize: FontSize.xxxl,
+        fontWeight: "700",
+        color: Colors.text,
+        paddingHorizontal: Spacing.xs,
+    },
+    timeSeparatorSpace: {
+        width: Spacing.md,
+    },
+    doneButton: {
+        backgroundColor: Colors.primary,
+        borderRadius: BorderRadius.md,
+        paddingVertical: Spacing.md,
+        paddingHorizontal: Spacing.xxxl,
+        alignItems: "center",
+    },
+    doneButtonText: {
+        fontSize: FontSize.md,
+        fontWeight: "600",
+        color: Colors.textOnPrimary,
+    },
+});
+export default TimePicker;

package/dist/modules/search-form/cars/CarEmptyState.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type Props = {
+    translations: Record<string, string>;
+};
+declare const CarEmptyState: React.FC<Props>;
+export default CarEmptyState;

package/dist/modules/search-form/cars/CarEmptyState.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Text, StyleSheet } from "react-native";
+import { Colors, Spacing, FontSize, BorderRadius } from "../../../theme/colors";
+const CarEmptyState = ({ translations }) => (_jsxs(View, { style: styles.container, children: [_jsx(Text, { style: styles.title, children: translations["car_not_found_title"] || "No cars found" }), _jsxs(View, { style: styles.content, children: [_jsx(Text, { style: styles.hint, children: translations["car_not_found_hint"] ||
+                        "Try adjusting your search parameters:" }), _jsxs(Text, { style: styles.option, children: ["\u2022", " ", translations["car_not_found_option_1"] || "Change the dates"] }), _jsxs(Text, { style: styles.option, children: ["\u2022", " ", translations["car_not_found_option_2"] || "Choose a different location"] }), _jsxs(Text, { style: styles.option, children: ["\u2022", " ", translations["car_not_found_option_3"] || "Remove some filters"] })] })] }));
+const styles = StyleSheet.create({
+    container: {
+        padding: Spacing.xxl,
+        alignItems: "center",
+        backgroundColor: Colors.surface,
+        borderRadius: BorderRadius.lg,
+        marginHorizontal: Spacing.lg,
+        marginVertical: Spacing.md,
+        shadowColor: Colors.black,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.05,
+        shadowRadius: 4,
+        elevation: 2,
+    },
+    title: {
+        fontSize: FontSize.xl,
+        fontWeight: "600",
+        color: Colors.text,
+        marginBottom: Spacing.md,
+        textAlign: "center",
+    },
+    content: {
+        alignItems: "flex-start",
+    },
+    hint: {
+        fontSize: FontSize.md,
+        color: Colors.textSecondary,
+        marginBottom: Spacing.sm,
+    },
+    option: {
+        fontSize: FontSize.md,
+        color: Colors.textSecondary,
+        marginBottom: Spacing.xs,
+        paddingLeft: Spacing.sm,
+    },
+});
+export default CarEmptyState;

package/dist/modules/search-form/cars/CarFiltersSkeleton.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type Props = {
+    translations: Record<string, string>;
+};
+declare const CarFiltersSkeleton: React.FC<Props>;
+export default CarFiltersSkeleton;

package/dist/modules/search-form/cars/CarFiltersSkeleton.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Text, ActivityIndicator, StyleSheet } from "react-native";
+import { Skeleton } from "../../../components/ui/Skeleton";
+import { Colors, Spacing, FontSize, BorderRadius } from "../../../theme/colors";
+const CarFiltersSkeleton = ({ translations }) => {
+    return (_jsx(View, { style: styles.container, children: _jsx(View, { style: styles.card, children: _jsxs(View, { style: styles.content, children: [_jsx(Text, { style: styles.loadingText, children: translations["loading_filters"] || "Loading filters..." }), _jsx(ActivityIndicator, { size: "small", color: Colors.primary, style: styles.loader }), _jsx(Skeleton, { width: "100%", height: 16, style: { marginTop: Spacing.lg } }), _jsx(Skeleton, { width: "80%", height: 16, style: { marginTop: Spacing.sm } }), _jsx(Skeleton, { width: "60%", height: 16, style: { marginTop: Spacing.sm } }), _jsx(Skeleton, { width: "100%", height: 40, style: { marginTop: Spacing.lg } }), _jsx(Skeleton, { width: "100%", height: 16, style: { marginTop: Spacing.lg } }), _jsx(Skeleton, { width: "70%", height: 16, style: { marginTop: Spacing.sm } }), _jsx(Skeleton, { width: "90%", height: 16, style: { marginTop: Spacing.sm } })] }) }) }));
+};
+const styles = StyleSheet.create({
+    container: {
+        paddingHorizontal: Spacing.lg,
+        marginBottom: Spacing.md,
+    },
+    card: {
+        backgroundColor: Colors.surface,
+        borderRadius: BorderRadius.lg,
+        padding: Spacing.lg,
+        shadowColor: Colors.black,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.05,
+        shadowRadius: 4,
+        elevation: 2,
+    },
+    content: {
+        alignItems: "center",
+    },
+    loadingText: {
+        fontSize: FontSize.md,
+        color: Colors.textSecondary,
+        marginBottom: Spacing.sm,
+    },
+    loader: {
+        marginBottom: Spacing.md,
+    },
+});
+export default CarFiltersSkeleton;

package/dist/modules/search-form/cars/CarOffersList.d.ts

@@ -0,0 +1,43 @@
+import React from "react";
+type CarOffer = {
+    offer_id: string;
+    car?: {
+        name?: string;
+        image?: string;
+        category?: string;
+        transmission?: string;
+        seats?: number;
+        bags?: number;
+    };
+    price?: {
+        total?: number;
+        currency?: string;
+    };
+    supplier?: {
+        name?: string;
+        logo?: string;
+    };
+    included_options?: {
+        id?: string | number;
+        name: string;
+    }[];
+    pickup?: {
+        location?: string;
+    };
+    url?: {
+        web?: string;
+    };
+};
+type Props = {
+    offers: CarOffer[];
+    days?: number;
+    searchParams?: {
+        country?: string;
+        nationality?: string;
+        age?: number;
+    };
+    translations: Record<string, string>;
+    lang: string;
+};
+declare const CarOffersList: React.FC<Props>;
+export default CarOffersList;

package/dist/modules/search-form/cars/CarOffersList.js

@@ -0,0 +1,214 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { View, Text, Image, TouchableOpacity, FlatList, Linking, StyleSheet, } from "react-native";
+import { useWidget } from "../../../context/WidgetContext";
+import { useApiToken } from "../../../utils/getToken";
+import { Colors, Spacing, FontSize, BorderRadius } from "../../../theme/colors";
+const CURRENCY_SIGNS = {
+    USD: "$",
+    EUR: "\u20AC",
+    GBP: "\u00A3",
+    CHF: "\u20A3",
+};
+const normalizeOptionKey = (name) => name
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "_")
+    .replace(/^_+|_+$/g, "");
+function declineDays(n, translations, lang) {
+    if (lang === "en") {
+        return n === 1
+            ? translations["car_offers_day_singular"] || "day"
+            : translations["car_offers_day_plural"] || "days";
+    }
+    const mod10 = n % 10;
+    const mod100 = n % 100;
+    if (mod10 === 1 && mod100 !== 11)
+        return translations["car_offers_day_1"] || "day";
+    if (mod10 >= 2 && mod10 <= 4 && (mod100 < 10 || mod100 >= 20))
+        return translations["car_offers_day_2_4"] || "days";
+    return translations["car_offers_day_5"] || "days";
+}
+const CarOffersList = ({ offers, days = 1, searchParams, translations, lang, }) => {
+    const { config } = useWidget();
+    const token = useApiToken();
+    const HOST_URL = config?.additional?.basket_link ?? "https://travel-code.com";
+    const [expanded, setExpanded] = useState({});
+    const toggleExpand = useCallback((id) => {
+        setExpanded((prev) => ({ ...prev, [id]: !prev[id] }));
+    }, []);
+    const handleBook = useCallback((offer) => {
+        const { country, nationality, age } = searchParams || {};
+        const bookingUrl = `${HOST_URL}/site/add-service-to-cart?offerId=${encodeURIComponent(offer.offer_id)}&type=car&serviceName=discoverCars&country=${country || "France"}&nationality=${nationality || "US"}&age=${age || 30}&accessToken=${token}&language=${lang}`;
+        Linking.openURL(bookingUrl);
+    }, [HOST_URL, searchParams, token, lang]);
+    const renderItem = useCallback(({ item: offer }) => {
+        const car = offer.car || {};
+        const price = offer.price || {};
+        const included = offer.included_options || [];
+        const visibleOptions = included.map((opt) => ({
+            ...opt,
+            key: normalizeOptionKey(opt.name),
+        }));
+        const basePrice = price.total || 0;
+        const currencyCode = price.currency || "USD";
+        const currencySign = CURRENCY_SIGNS[currencyCode] || currencyCode;
+        const isExpanded = expanded[offer.offer_id] || false;
+        const maxVisible = 3;
+        return (_jsxs(View, { style: styles.card, children: [_jsxs(View, { style: styles.cardTop, children: [_jsx(Image, { source: { uri: car.image || undefined }, style: styles.carImage, resizeMode: "contain" }), _jsxs(View, { style: styles.cardInfo, children: [car.category ? (_jsx(Text, { style: styles.category, children: translations[`car_category_${normalizeOptionKey(car.category)}`] || car.category })) : null, _jsx(Text, { style: styles.carName, numberOfLines: 2, children: car.name ||
+                                        translations["car_offers_no_name"] ||
+                                        "No name" }), offer.supplier?.logo ? (_jsx(Image, { source: { uri: offer.supplier.logo }, style: styles.supplierLogo, resizeMode: "contain" })) : null] })] }), _jsxs(View, { style: styles.featuresRow, children: [_jsxs(View, { style: styles.featureItem, children: [_jsx(Text, { style: styles.featureIcon, children: "\u{1F464}" }), _jsxs(Text, { style: styles.featureText, children: [car.seats || "-", " ", translations["car_offers_seats"] || "seats"] })] }), _jsxs(View, { style: styles.featureItem, children: [_jsx(Text, { style: styles.featureIcon, children: "\u{1F4BC}" }), _jsxs(Text, { style: styles.featureText, children: [car.bags || "-", " ", translations["car_offers_bags"] || "bags"] })] }), _jsxs(View, { style: styles.featureItem, children: [_jsx(Text, { style: styles.featureIcon, children: "\u2699" }), _jsx(Text, { style: styles.featureText, children: car.transmission === "manual"
+                                        ? translations["car_offers_transmission_manual"] || "Manual"
+                                        : translations["car_offers_transmission_auto"] || "Auto" })] })] }), included.length > 0 ? (_jsxs(View, { style: styles.optionsSection, children: [visibleOptions
+                            .slice(0, isExpanded ? undefined : maxVisible)
+                            .map((opt, i) => (_jsxs(View, { style: styles.optionItem, children: [_jsx(Text, { style: styles.optionCheck, children: "\u2713" }), _jsx(Text, { style: styles.optionText, children: translations[`car_option_${opt.key}`] || opt.name })] }, i))), included.length > maxVisible ? (_jsx(TouchableOpacity, { onPress: () => toggleExpand(offer.offer_id), activeOpacity: 0.7, children: _jsx(Text, { style: styles.toggleText, children: isExpanded
+                                    ? translations["car_offers_hide_options"] || "Hide"
+                                    : translations["car_offers_show_more"] || "Show more" }) })) : null] })) : null, offer.pickup?.location ? (_jsxs(View, { style: styles.locationRow, children: [_jsx(Text, { style: styles.locationIcon, children: "\uD83D\uDCCD" }), _jsx(Text, { style: styles.locationText, numberOfLines: 1, children: offer.pickup.location })] })) : null, _jsxs(View, { style: styles.priceSection, children: [_jsxs(Text, { style: styles.priceLabel, children: [translations["car_offers_price_for"] || "Price for", " ", days, " ", declineDays(days, translations, lang)] }), _jsxs(Text, { style: styles.priceValue, children: [currencySign, basePrice ? basePrice.toFixed(2) : "-"] }), _jsx(Text, { style: styles.priceNote, children: translations["car_offers_taxes_included"] ||
+                                "(taxes & fees included)" }), _jsx(TouchableOpacity, { style: styles.bookButton, onPress: () => handleBook(offer), activeOpacity: 0.8, children: _jsx(Text, { style: styles.bookButtonText, children: translations["car_offers_book_now"] || "Book now" }) })] })] }));
+    }, [expanded, days, searchParams, translations, lang, token, HOST_URL, handleBook, toggleExpand]);
+    const keyExtractor = useCallback((item) => item.offer_id, []);
+    return (_jsx(FlatList, { data: offers, renderItem: renderItem, keyExtractor: keyExtractor, scrollEnabled: false, contentContainerStyle: styles.listContent, showsVerticalScrollIndicator: false }));
+};
+const styles = StyleSheet.create({
+    listContent: {
+        paddingHorizontal: Spacing.lg,
+        gap: Spacing.md,
+    },
+    card: {
+        backgroundColor: Colors.surface,
+        borderRadius: BorderRadius.lg,
+        padding: Spacing.lg,
+        shadowColor: Colors.black,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.06,
+        shadowRadius: 6,
+        elevation: 3,
+    },
+    cardTop: {
+        flexDirection: "row",
+        gap: Spacing.md,
+    },
+    carImage: {
+        width: 120,
+        height: 80,
+        borderRadius: BorderRadius.md,
+        backgroundColor: Colors.surfaceSecondary,
+    },
+    cardInfo: {
+        flex: 1,
+        justifyContent: "center",
+    },
+    category: {
+        fontSize: FontSize.xs,
+        color: Colors.textSecondary,
+        fontWeight: "500",
+        textTransform: "uppercase",
+        letterSpacing: 0.5,
+        marginBottom: Spacing.xs,
+    },
+    carName: {
+        fontSize: FontSize.lg,
+        fontWeight: "600",
+        color: Colors.text,
+    },
+    supplierLogo: {
+        width: 60,
+        height: 20,
+        marginTop: Spacing.xs,
+    },
+    featuresRow: {
+        flexDirection: "row",
+        gap: Spacing.lg,
+        marginTop: Spacing.md,
+        paddingVertical: Spacing.sm,
+        borderTopWidth: StyleSheet.hairlineWidth,
+        borderTopColor: Colors.borderLight,
+    },
+    featureItem: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: Spacing.xs,
+    },
+    featureIcon: {
+        fontSize: FontSize.sm,
+    },
+    featureText: {
+        fontSize: FontSize.sm,
+        color: Colors.textSecondary,
+    },
+    optionsSection: {
+        marginTop: Spacing.sm,
+        gap: Spacing.xs,
+    },
+    optionItem: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: Spacing.sm,
+    },
+    optionCheck: {
+        fontSize: FontSize.sm,
+        color: Colors.success,
+        fontWeight: "700",
+    },
+    optionText: {
+        fontSize: FontSize.sm,
+        color: Colors.textSecondary,
+        flex: 1,
+    },
+    toggleText: {
+        fontSize: FontSize.sm,
+        color: Colors.primary,
+        fontWeight: "500",
+        marginTop: Spacing.xs,
+    },
+    locationRow: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: Spacing.xs,
+        marginTop: Spacing.sm,
+    },
+    locationIcon: {
+        fontSize: FontSize.sm,
+    },
+    locationText: {
+        fontSize: FontSize.sm,
+        color: Colors.textTertiary,
+        flex: 1,
+    },
+    priceSection: {
+        borderTopWidth: 1,
+        borderTopColor: Colors.borderLight,
+        marginTop: Spacing.md,
+        paddingTop: Spacing.md,
+        alignItems: "center",
+    },
+    priceLabel: {
+        fontSize: FontSize.sm,
+        color: Colors.textSecondary,
+        marginBottom: Spacing.xs,
+    },
+    priceValue: {
+        fontSize: FontSize.xxl,
+        fontWeight: "700",
+        color: Colors.text,
+    },
+    priceNote: {
+        fontSize: FontSize.xs,
+        color: Colors.textTertiary,
+        marginTop: 2,
+        marginBottom: Spacing.md,
+    },
+    bookButton: {
+        backgroundColor: Colors.primary,
+        borderRadius: BorderRadius.md,
+        paddingVertical: Spacing.md,
+        paddingHorizontal: Spacing.xxl,
+        width: "100%",
+        alignItems: "center",
+    },
+    bookButtonText: {
+        color: Colors.textOnPrimary,
+        fontSize: FontSize.lg,
+        fontWeight: "600",
+    },
+});
+export default CarOffersList;

package/dist/modules/search-form/cars/CarResults.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+type Props = {
+    offers: any[];
+    filteredOffers: any[];
+    paginatedOffers: any[];
+    loading: boolean;
+    error?: string | null;
+    isFiltering: boolean;
+    hasAppliedFilters: boolean;
+    onFilterChange: (filtered: any[]) => void;
+    onFiltersApplied: () => void;
+    days: number;
+    searchParams: any;
+    translations: Record<string, string>;
+    hasCarSearched: boolean;
+    lang: string;
+    currency: string;
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    isPageLoading: boolean;
+    headerComponent?: React.ReactElement;
+};
+declare const CarResults: React.FC<Props>;
+export default CarResults;