@devtravelcode/widget-native 1.0.0

package/dist/modules/search-form/hotel/GuestSelector.js

@@ -0,0 +1,272 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } 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 { Colors, Spacing, BorderRadius, FontSize } from "../../../theme/colors";
+import { CloseIcon } from "../../../store";
+import { formStyles } from "../../../theme/formStyles";
+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 MAX_GUESTS = 20;
+const AGE_OPTIONS = Array.from({ length: 18 }, (_, i) => i);
+const GuestSelector = ({ value = [{ adults: 2, children: 0, childrenAges: [] }], onChange, translations, }) => {
+    const insets = useSafeAreaInsets();
+    const [rooms, setRooms] = useState(value);
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    useEffect(() => {
+        onChange(rooms);
+    }, [rooms]);
+    const totalAdults = rooms.reduce((s, r) => s + r.adults, 0);
+    const totalChildren = rooms.reduce((s, r) => s + r.children, 0);
+    const totalGuests = totalAdults + totalChildren;
+    const buttonText = `${totalAdults} ${translations["hotel_adults_text"] || "adults"}, ${totalChildren} ${translations["hotel_children_text"] || "children"}, ${rooms.length} ${translations["hotel_rooms_text"] || "room"}${rooms.length > 1 ? "s" : ""}`;
+    const updateRoom = (index, field, delta) => {
+        setRooms((prev) => prev.map((room, i) => {
+            if (i !== index)
+                return room;
+            const currentValue = room[field];
+            const newValue = currentValue + delta;
+            if (field === "adults" && newValue < 1)
+                return room;
+            if (field === "children" && newValue < 0)
+                return room;
+            const newTotal = totalGuests - currentValue + newValue;
+            if (newTotal > MAX_GUESTS)
+                return room;
+            if (field === "children") {
+                let ages = [...room.childrenAges];
+                if (newValue > room.children)
+                    ages.push(5);
+                if (newValue < room.children)
+                    ages.pop();
+                return { ...room, children: newValue, childrenAges: ages };
+            }
+            return { ...room, [field]: newValue };
+        }));
+    };
+    const updateChildAge = (roomIndex, childIndex, newAge) => {
+        setRooms((prev) => prev.map((r, ri) => ri === roomIndex
+            ? {
+                ...r,
+                childrenAges: r.childrenAges.map((a, ai) => ai === childIndex ? newAge : a),
+            }
+            : r));
+    };
+    const addRoom = () => {
+        if (totalGuests >= MAX_GUESTS)
+            return;
+        setRooms((prev) => [
+            ...prev,
+            { adults: 1, children: 0, childrenAges: [] },
+        ]);
+    };
+    const removeRoom = (index) => setRooms((prev) => prev.filter((_, i) => i !== index));
+    const handleSave = () => {
+        setIsModalOpen(false);
+    };
+    return (_jsxs(View, { children: [_jsxs(TouchableOpacity, { style: formStyles.inputTrigger, onPress: () => setIsModalOpen(true), activeOpacity: 0.8, children: [_jsx(Text, { style: formStyles.label, children: translations["hotel_form_guests"] || "Guests" }), _jsxs(View, { style: formStyles.inputTriggerRow, children: [_jsx(Text, { style: styles.selectorText, numberOfLines: 1, children: buttonText }), _jsx(ChevronDown, {})] })] }), _jsx(Modal, { visible: isModalOpen, animationType: "slide", presentationStyle: "fullScreen", onRequestClose: () => setIsModalOpen(false), children: _jsxs(View, { style: [styles.modalContainer, { paddingTop: insets.top }], children: [_jsx(TouchableOpacity, { style: styles.closeButton, onPress: () => setIsModalOpen(false), hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }, children: _jsx(CloseIcon, { size: 16 }) }), _jsx(View, { style: styles.modalHeaderRow, children: _jsx(Text, { style: styles.modalTitle, children: translations["hotel_form_guests"] || "Guests" }) }), _jsxs(ScrollView, { style: styles.scrollView, contentContainerStyle: styles.scrollContent, showsVerticalScrollIndicator: false, children: [rooms.map((room, index) => (_jsxs(View, { style: styles.roomBlock, children: [_jsxs(View, { style: styles.roomHeader, children: [_jsxs(Text, { style: styles.roomTitle, children: [translations["hotel_room_label"] || "Room", " ", index + 1] }), rooms.length > 1 && (_jsx(TouchableOpacity, { onPress: () => removeRoom(index), activeOpacity: 0.7, children: _jsx(Text, { style: styles.removeText, children: translations["hotel_remove_room"] || "Remove" }) }))] }), _jsxs(View, { style: styles.counterRow, children: [_jsx(Text, { style: styles.counterLabel, children: translations["hotel_adults_title"] || "Adults" }), _jsxs(View, { style: styles.counterControls, children: [_jsx(TouchableOpacity, { style: [
+                                                                styles.counterButton,
+                                                                room.adults <= 1 && styles.counterButtonDisabled,
+                                                            ], onPress: () => updateRoom(index, "adults", -1), disabled: room.adults <= 1, activeOpacity: 0.7, children: _jsx(Text, { style: styles.counterButtonText, children: "-" }) }), _jsx(Text, { style: styles.counterValue, children: room.adults }), _jsx(TouchableOpacity, { style: [
+                                                                styles.counterButton,
+                                                                totalGuests >= MAX_GUESTS && styles.counterButtonDisabled,
+                                                            ], onPress: () => updateRoom(index, "adults", 1), disabled: totalGuests >= MAX_GUESTS, activeOpacity: 0.7, children: _jsx(Text, { style: styles.counterButtonText, children: "+" }) })] })] }), _jsxs(View, { style: styles.counterRow, children: [_jsx(Text, { style: styles.counterLabel, children: translations["hotel_children_title"] || "Children" }), _jsxs(View, { style: styles.counterControls, children: [_jsx(TouchableOpacity, { style: [
+                                                                styles.counterButton,
+                                                                room.children <= 0 && styles.counterButtonDisabled,
+                                                            ], onPress: () => updateRoom(index, "children", -1), disabled: room.children <= 0, activeOpacity: 0.7, children: _jsx(Text, { style: styles.counterButtonText, children: "-" }) }), _jsx(Text, { style: styles.counterValue, children: room.children }), _jsx(TouchableOpacity, { style: [
+                                                                styles.counterButton,
+                                                                totalGuests >= MAX_GUESTS && styles.counterButtonDisabled,
+                                                            ], onPress: () => updateRoom(index, "children", 1), disabled: totalGuests >= MAX_GUESTS, activeOpacity: 0.7, children: _jsx(Text, { style: styles.counterButtonText, children: "+" }) })] })] }), room.children > 0 && (_jsxs(View, { style: styles.agesContainer, children: [_jsx(Text, { style: styles.agesTitle, children: translations["hotel_children_age_title"] ||
+                                                        "Specify children ages" }), _jsx(View, { style: styles.agesGrid, children: room.childrenAges.map((age, childIdx) => (_jsxs(View, { style: styles.ageSelector, children: [_jsxs(Text, { style: styles.ageLabel, children: [translations["hotel_child_label"] || "Child", " ", childIdx + 1] }), _jsxs(View, { style: styles.ageButtonsRow, children: [_jsx(TouchableOpacity, { style: [
+                                                                            styles.ageAdjustButton,
+                                                                            age <= 0 && styles.counterButtonDisabled,
+                                                                        ], onPress: () => age > 0 && updateChildAge(index, childIdx, age - 1), disabled: age <= 0, activeOpacity: 0.7, children: _jsx(Text, { style: styles.counterButtonText, children: "-" }) }), _jsx(Text, { style: styles.ageValue, children: age }), _jsx(TouchableOpacity, { style: [
+                                                                            styles.ageAdjustButton,
+                                                                            age >= 17 && styles.counterButtonDisabled,
+                                                                        ], onPress: () => age < 17 && updateChildAge(index, childIdx, age + 1), disabled: age >= 17, activeOpacity: 0.7, children: _jsx(Text, { style: styles.counterButtonText, children: "+" }) })] })] }, childIdx))) })] }))] }, index))), _jsx(TouchableOpacity, { style: [
+                                        styles.addRoomButton,
+                                        totalGuests >= MAX_GUESTS && styles.addRoomButtonDisabled,
+                                    ], onPress: addRoom, disabled: totalGuests >= MAX_GUESTS, activeOpacity: 0.7, children: _jsxs(Text, { style: styles.addRoomText, children: ["+ ", translations["hotel_add_room"] || "Add room"] }) })] }), _jsx(View, { style: styles.modalFooter, children: _jsx(TouchableOpacity, { style: styles.saveButton, onPress: handleSave, activeOpacity: 0.8, children: _jsx(Text, { style: styles.saveButtonText, children: translations["hotel_save_button"] || "Done" }) }) })] }) })] }));
+};
+const styles = StyleSheet.create({
+    selectorText: {
+        fontSize: FontSize.md,
+        color: Colors.text,
+        flex: 1,
+        fontWeight: "500",
+    },
+    modalContainer: {
+        flex: 1,
+        backgroundColor: Colors.surface,
+    },
+    closeButton: {
+        alignSelf: "flex-end",
+        padding: Spacing.lg,
+    },
+    modalHeaderRow: {
+        paddingHorizontal: Spacing.lg,
+        paddingBottom: Spacing.md,
+        borderBottomWidth: 1,
+        borderBottomColor: Colors.border,
+    },
+    modalTitle: {
+        fontSize: FontSize.lg,
+        fontWeight: "700",
+        color: Colors.text,
+    },
+    scrollView: {
+        flex: 1,
+    },
+    scrollContent: {
+        padding: Spacing.lg,
+    },
+    roomBlock: {
+        marginBottom: Spacing.xl,
+        backgroundColor: Colors.surfaceSecondary,
+        borderRadius: BorderRadius.lg,
+        padding: Spacing.lg,
+    },
+    roomHeader: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        marginBottom: Spacing.md,
+    },
+    roomTitle: {
+        fontSize: FontSize.lg,
+        fontWeight: "600",
+        color: Colors.text,
+    },
+    removeText: {
+        fontSize: FontSize.sm,
+        color: Colors.error,
+        fontWeight: "500",
+    },
+    counterRow: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        paddingVertical: Spacing.md,
+        borderBottomWidth: StyleSheet.hairlineWidth,
+        borderBottomColor: Colors.borderLight,
+    },
+    counterLabel: {
+        fontSize: FontSize.md,
+        color: Colors.text,
+        fontWeight: "500",
+    },
+    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.3,
+    },
+    counterButtonText: {
+        fontSize: FontSize.xl,
+        color: Colors.primary,
+        fontWeight: "500",
+        lineHeight: FontSize.xl * 1.1,
+    },
+    counterValue: {
+        fontSize: FontSize.lg,
+        fontWeight: "600",
+        color: Colors.text,
+        minWidth: 24,
+        textAlign: "center",
+    },
+    agesContainer: {
+        marginTop: Spacing.md,
+    },
+    agesTitle: {
+        fontSize: FontSize.sm,
+        color: Colors.textSecondary,
+        marginBottom: Spacing.sm,
+    },
+    agesGrid: {
+        flexDirection: "row",
+        flexWrap: "wrap",
+        gap: Spacing.sm,
+    },
+    ageSelector: {
+        backgroundColor: Colors.surface,
+        borderRadius: BorderRadius.md,
+        padding: Spacing.sm,
+        borderWidth: 1,
+        borderColor: Colors.borderLight,
+        alignItems: "center",
+        minWidth: 100,
+    },
+    ageLabel: {
+        fontSize: FontSize.xs,
+        color: Colors.textTertiary,
+        marginBottom: Spacing.xs,
+    },
+    ageButtonsRow: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: Spacing.md,
+    },
+    ageAdjustButton: {
+        width: 28,
+        height: 28,
+        borderRadius: BorderRadius.full,
+        borderWidth: 1,
+        borderColor: Colors.border,
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: Colors.surface,
+    },
+    ageValue: {
+        fontSize: FontSize.md,
+        fontWeight: "600",
+        color: Colors.text,
+        minWidth: 20,
+        textAlign: "center",
+    },
+    addRoomButton: {
+        paddingVertical: Spacing.md,
+        borderRadius: BorderRadius.md,
+        borderWidth: 1,
+        borderColor: Colors.primary,
+        borderStyle: "dashed",
+        alignItems: "center",
+        marginBottom: Spacing.lg,
+    },
+    addRoomButtonDisabled: {
+        opacity: 0.4,
+    },
+    addRoomText: {
+        fontSize: FontSize.md,
+        color: Colors.primary,
+        fontWeight: "600",
+    },
+    modalFooter: {
+        padding: Spacing.lg,
+        borderTopWidth: 1,
+        borderTopColor: Colors.borderLight,
+    },
+    saveButton: {
+        backgroundColor: Colors.primary,
+        borderRadius: BorderRadius.md,
+        paddingVertical: Spacing.md,
+        alignItems: "center",
+    },
+    saveButtonText: {
+        fontSize: FontSize.lg,
+        fontWeight: "600",
+        color: Colors.textOnPrimary,
+    },
+});
+export default GuestSelector;

package/dist/modules/search-form/hotel/GuestSelectorMobilePopup.d.ts

@@ -0,0 +1,2 @@
+declare const _default: null;
+export default _default;

package/dist/modules/search-form/hotel/GuestSelectorMobilePopup.js

@@ -0,0 +1 @@
+export default null;

package/dist/modules/search-form/hotel/HotelLocation.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+type HotelLocationProps = {
+    label: string;
+    value: string;
+    onChange: (val: {
+        id: string;
+    }) => void;
+    lang?: "ru" | "en";
+    translations: Record<string, string>;
+    defaultItem?: {
+        id: string;
+        name: string;
+        nameEn?: string;
+    } | null;
+};
+declare const HotelLocation: React.FC<HotelLocationProps>;
+export default HotelLocation;

package/dist/modules/search-form/hotel/HotelLocation.js

@@ -0,0 +1,178 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { View, Text, TextInput, TouchableOpacity, Modal, FlatList, SectionList, StyleSheet, ActivityIndicator, } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import Svg, { Circle, Path, Rect } from "react-native-svg";
+import { SvgUri } from "react-native-svg";
+import { useHotelLocations } from "../../hooks/useHotelLocations";
+import { CloseIcon } from "../../../store";
+import { Colors, Spacing, FontSize } from "../../../theme/colors";
+import { formStyles } from "../../../theme/formStyles";
+const POPULAR_HOTEL_LOCATIONS = [
+    { id: "82", partner: "11160", nameEn: "Paris", addressEn: "France", countryCode: "FR", name: "\u041F\u0430\u0440\u0438\u0436", address: "\u0424\u0440\u0430\u043D\u0446\u0438\u044F" },
+    { id: "103030", partner: "11160", nameEn: "New York", addressEn: "United States", countryCode: "US", name: "\u041D\u044C\u044E-\u0419\u043E\u0440\u043A", address: "\u0421\u0428\u0410" },
+    { id: "763", partner: "11160", nameEn: "Istanbul", addressEn: "Turkey", countryCode: "TR", name: "\u0421\u0442\u0430\u043C\u0431\u0443\u043B", address: "\u0422\u0443\u0440\u0446\u0438\u044F" },
+    { id: "965", partner: "11160", nameEn: "Rome", addressEn: "Italy", countryCode: "IT", name: "\u0420\u0438\u043C", address: "\u0418\u0442\u0430\u043B\u0438\u044F" },
+    { id: "483", partner: "11160", nameEn: "Barcelona", addressEn: "Spain", countryCode: "ES", name: "\u0411\u0430\u0440\u0441\u0435\u043B\u043E\u043D\u0430", address: "\u0418\u0441\u043F\u0430\u043D\u0438\u044F" },
+];
+const FLAG_BASE = "https://cdn.travel-code.com/images/remaster/flags";
+const RegionIcon = () => (_jsxs(Svg, { width: 20, height: 20, viewBox: "0 0 20 20", fill: "none", children: [_jsx(Path, { d: "M15.625 8.125C15.625 6.63316 15.0324 5.20242 13.9775 4.14752C12.9226 3.09263 11.4918 2.5 10 2.5C8.50816 2.5 7.07742 3.09263 6.02252 4.14752C4.96763 5.20242 4.375 6.63316 4.375 8.125C4.375 10.4325 6.22125 13.44 10 17.0425C13.7788 13.44 15.625 10.4325 15.625 8.125ZM10 18.75C5.41625 14.5838 3.125 11.0412 3.125 8.125C3.125 6.30164 3.84933 4.55295 5.13864 3.26364C6.42795 1.97433 8.17664 1.25 10 1.25C11.8234 1.25 13.572 1.97433 14.8614 3.26364C16.1507 4.55295 16.875 6.30164 16.875 8.125C16.875 11.0412 14.5838 14.5838 10 18.75Z", fill: "#ABABC8", stroke: "#ABABC8", strokeWidth: 0.25 }), _jsx(Path, { d: "M10 10C10.4973 10 10.9742 9.80246 11.3258 9.45083C11.6775 9.09919 11.875 8.62228 11.875 8.125C11.875 7.62772 11.6775 7.15081 11.3258 6.79917C10.9742 6.44754 10.4973 6.25 10 6.25C9.50272 6.25 9.02581 6.44754 8.67417 6.79917C8.32254 7.15081 8.125 7.62772 8.125 8.125C8.125 8.62228 8.32254 9.09919 8.67417 9.45083C9.02581 9.80246 9.50272 10 10 10ZM10 11.25C9.1712 11.25 8.37634 10.9208 7.79029 10.3347C7.20424 9.74866 6.875 8.9538 6.875 8.125C6.875 7.2962 7.20424 6.50134 7.79029 5.91529C8.37634 5.32924 9.1712 5 10 5C10.8288 5 11.6237 5.32924 12.2097 5.91529C12.7958 6.50134 13.125 7.2962 13.125 8.125C13.125 8.9538 12.7958 9.74866 12.2097 10.3347C11.6237 10.9208 10.8288 11.25 10 11.25Z", fill: "#ABABC8", stroke: "#ABABC8", strokeWidth: 0.25 })] }));
+const HotelBuildingIcon = () => (_jsxs(Svg, { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", children: [_jsx(Path, { d: "M16.8153 18.2691V3.72727C16.8153 2.22104 15.5942 1 14.088 1H5.72727C4.22104 1 3 2.22104 3 3.72727V22.5863", stroke: "#ABABC8", strokeWidth: 0.681818, strokeLinecap: "round" }), _jsx(Rect, { x: 7.32031, y: 5.31738, width: 1.72691, height: 1.72691, rx: 0.170455, fill: "#ABABC8" }), _jsx(Rect, { x: 7.32031, y: 8.771, width: 1.72691, height: 1.72691, rx: 0.170455, fill: "#ABABC8" }), _jsx(Rect, { x: 7.32031, y: 12.2249, width: 1.72691, height: 1.72691, rx: 0.170455, fill: "#ABABC8" }), _jsx(Rect, { x: 7.32031, y: 15.6787, width: 1.72691, height: 1.72691, rx: 0.170455, fill: "#ABABC8" }), _jsx(Rect, { x: 7.32031, y: 19.1323, width: 1.72691, height: 1.72691, rx: 0.170455, fill: "#ABABC8" }), _jsx(Path, { d: "M13.6822 5.31714C12.5525 5.31714 11.6367 6.23292 11.6367 7.36259V21.9044C11.6367 22.2809 11.942 22.5862 12.3185 22.5862H15.0977V19.3028C15.0977 19.2086 15.174 19.1323 15.2681 19.1323H18.381C18.4752 19.1323 18.5515 19.2086 18.5515 19.3028V22.5862H21.3163C21.6929 22.5862 21.9982 22.2809 21.9982 21.9044V7.36259C21.9982 6.23292 21.0824 5.31714 19.9527 5.31714H13.6822ZM14.2305 8.07793C14.2305 7.98379 14.3068 7.90747 14.4009 7.90747H15.7869C15.8811 7.90747 15.9574 7.98379 15.9574 8.07793V9.46392C15.9574 9.55806 15.8811 9.63438 15.7869 9.63438H14.4009C14.3068 9.63438 14.2305 9.55806 14.2305 9.46392V8.07793ZM17.8538 7.90747C17.7597 7.90747 17.6834 7.98379 17.6834 8.07793V9.46392C17.6834 9.55806 17.7597 9.63438 17.8538 9.63438H19.2398C19.334 9.63438 19.4103 9.55806 19.4103 9.46392V8.07793C19.4103 7.98379 19.334 7.90747 19.2398 7.90747H17.8538ZM14.2305 11.5318C14.2305 11.4376 14.3068 11.3613 14.4009 11.3613H15.7869C15.8811 11.3613 15.9574 11.4376 15.9574 11.5318V12.9178C15.9574 13.0119 15.8811 13.0882 15.7869 13.0882H14.4009C14.3068 13.0882 14.2305 13.0119 14.2305 12.9178V11.5318ZM17.8538 11.3613C17.7597 11.3613 17.6834 11.4376 17.6834 11.5318V12.9178C17.6834 13.0119 17.7597 13.0882 17.8538 13.0882H19.2398C19.334 13.0882 19.4103 13.0119 19.4103 12.9178V11.5318C19.4103 11.4376 19.334 11.3613 19.2398 11.3613H17.8538ZM14.2305 14.9856C14.2305 14.8915 14.3068 14.8152 14.4009 14.8152H15.7869C15.8811 14.8152 15.9574 14.8915 15.9574 14.9856V16.3716C15.9574 16.4657 15.8811 16.5421 15.7869 16.5421H14.4009C14.3068 16.5421 14.2305 16.4657 14.2305 16.3716V14.9856ZM17.8538 14.8152C17.7597 14.8152 17.6834 14.8915 17.6834 14.9856V16.3716C17.6834 16.4657 17.7597 16.5421 17.8538 16.5421H19.2398C19.334 16.5421 19.4103 16.4657 19.4103 16.3716V14.9856C19.4103 14.8915 19.334 14.8152 19.2398 14.8152H17.8538Z", fill: "#ABABC8", fillRule: "evenodd", clipRule: "evenodd" })] }));
+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 HotelLocation = ({ label, value, onChange, lang = "ru", translations, defaultItem, }) => {
+    const getLabel = (item) => lang === "en" ? item.nameEn || item.name : item.name;
+    const getAddress = (item) => lang === "en" ? item.addressEn || item.address : item.address;
+    const insets = useSafeAreaInsets();
+    const [query, setQuery] = useState("");
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [selectedItem, setSelectedItem] = useState(null);
+    const { results, loading } = useHotelLocations(isModalOpen ? query : "");
+    useEffect(() => {
+        if (!defaultItem)
+            return;
+        setQuery(defaultItem.name);
+        onChange({ id: defaultItem.id });
+    }, [defaultItem]);
+    useEffect(() => {
+        if (!query)
+            return;
+        if (defaultItem && defaultItem.name) {
+            setQuery(getLabel(defaultItem));
+            return;
+        }
+        if (selectedItem) {
+            setQuery(getLabel(selectedItem));
+        }
+    }, [lang]);
+    const handleSelect = (item) => {
+        setQuery(getLabel(item));
+        setSelectedItem(item);
+        onChange({ id: item.id });
+        setIsModalOpen(false);
+    };
+    const handleClose = () => {
+        if (!query.trim() && selectedItem) {
+            setQuery(getLabel(selectedItem));
+        }
+        setIsModalOpen(false);
+    };
+    const sections = (results || [])
+        .filter((cat) => cat.children?.length > 0)
+        .map((cat) => ({
+        type: cat.type,
+        title: cat.type === "hotels"
+            ? translations["hotel_locations_hotels"] || "Hotels"
+            : translations["hotel_locations_regions"] || "Regions",
+        data: cat.children,
+    }));
+    const hasSearchResults = sections.length > 0;
+    const isSearching = query.trim().length >= 2;
+    const showPopular = !isSearching;
+    const renderLocationItem = (loc, isHotel) => {
+        const cityName = getLabel(loc);
+        const countryName = getAddress(loc);
+        return (_jsx(TouchableOpacity, { style: styles.locationItem, onPress: () => handleSelect(loc), activeOpacity: 0.7, children: _jsxs(View, { style: styles.locationItemContent, children: [_jsx(View, { style: styles.iconContainer, children: isHotel ? _jsx(HotelBuildingIcon, {}) : _jsx(RegionIcon, {}) }), _jsxs(View, { style: styles.locationInfo, children: [_jsx(Text, { style: styles.locationCity, numberOfLines: 1, children: cityName }), _jsxs(View, { style: styles.addressRow, children: [_jsx(SvgUri, { uri: `${FLAG_BASE}/${loc.countryCode}.svg`, width: 20, height: 14 }), _jsx(Text, { style: styles.locationAddress, numberOfLines: 1, children: countryName })] })] })] }) }));
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs(TouchableOpacity, { style: formStyles.inputTrigger, onPress: () => setIsModalOpen(true), activeOpacity: 0.8, children: [_jsx(Text, { style: formStyles.label, children: label }), _jsx(View, { style: formStyles.inputTriggerRow, children: _jsx(Text, { style: [formStyles.inputTriggerText, !query && formStyles.inputTriggerPlaceholder], numberOfLines: 1, children: query || label }) })] }), _jsx(Modal, { visible: isModalOpen, 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: setQuery, placeholder: translations["location_popup_placeholder"] ||
+                                        "Enter city or hotel", 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 && !hasSearchResults && (_jsx(Text, { style: styles.noResults, children: translations["location_popup_no_results"] ||
+                                        "Nothing found" })), !loading && showPopular && (_jsxs(_Fragment, { children: [_jsx(Text, { style: styles.sectionTitle, children: translations["popular_locations"] || "Popular destinations" }), _jsx(FlatList, { data: POPULAR_HOTEL_LOCATIONS, renderItem: ({ item }) => renderLocationItem(item, false), keyExtractor: (item) => item.id, keyboardShouldPersistTaps: "handled", showsVerticalScrollIndicator: false })] })), !loading && isSearching && hasSearchResults && (_jsx(SectionList, { sections: sections, renderSectionHeader: ({ section }) => (_jsx(Text, { style: styles.sectionTitle, children: section.title })), renderItem: ({ item, section }) => renderLocationItem(item, section.type === "hotels"), keyExtractor: (item) => item.id, keyboardShouldPersistTaps: "handled", showsVerticalScrollIndicator: false, stickySectionHeadersEnabled: false }))] })] }) })] }));
+};
+const styles = StyleSheet.create({
+    inputText: {
+        fontSize: FontSize.lg,
+        color: Colors.text,
+        flex: 1,
+        fontWeight: "500",
+    },
+    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",
+    },
+    iconContainer: {
+        width: 24,
+        height: 24,
+        alignItems: "center",
+        justifyContent: "center",
+        marginRight: Spacing.sm,
+    },
+    locationInfo: {
+        flex: 1,
+    },
+    locationCity: {
+        fontSize: FontSize.md,
+        color: Colors.text,
+        fontWeight: "500",
+    },
+    addressRow: {
+        flexDirection: "row",
+        alignItems: "center",
+        marginTop: 2,
+        gap: 6,
+    },
+    locationAddress: {
+        fontSize: FontSize.sm,
+        color: Colors.textSecondary,
+        flex: 1,
+    },
+});
+export default HotelLocation;

package/dist/modules/search-form/hotel/HotelLocationMobilePopup.d.ts

@@ -0,0 +1,2 @@
+declare const _default: null;
+export default _default;

package/dist/modules/search-form/hotel/HotelLocationMobilePopup.js

@@ -0,0 +1 @@
+export default null;

package/dist/modules/search-form/hotel/HotelResults.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+type Props = {
+    offers: any[];
+    allHotels?: any[];
+    loading: boolean;
+    isStreaming?: boolean;
+    isPageLoading?: boolean;
+    error?: string | null;
+    translations: Record<string, string>;
+    lang: string;
+    searchParams?: Record<string, any> | null;
+    total?: number;
+    offset?: number;
+    limit?: number;
+    fetchPage?: (page: number) => void;
+    filterSearch?: (params: Record<string, any>) => void;
+    currency?: string;
+    headerComponent?: React.ReactElement;
+};
+declare const HotelResults: React.FC<Props>;
+export default HotelResults;