@devtravelcode/widget-native 1.0.0

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

@@ -0,0 +1,235 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from "react";
+import { View, Text, TextInput, TouchableOpacity, Modal, FlatList, StyleSheet, ActivityIndicator, } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import Svg, { Circle, Path } from "react-native-svg";
+import { useApiToken } from "../../../utils/getToken";
+import { Colors, Spacing, BorderRadius, FontSize } from "../../../theme/colors";
+import { CloseIcon } from "../../../store";
+import { formStyles } from "../../../theme/formStyles";
+const POPULAR_AIRLINES = [
+    { id: 1, code: "LH", title: "Lufthansa" },
+    { id: 2, code: "AF", title: "Air France" },
+    { id: 3, code: "TK", title: "Turkish Airlines" },
+    { id: 4, code: "FZ", title: "FlyDubai" },
+    { id: 5, code: "EK", title: "Emirates" },
+    { id: 6, code: "W6", title: "Wizz Air" },
+];
+const API_URL = "https://api.travel-code.com/v1/data/airlines";
+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 AirlinesSelector = ({ value, onChange, translations, }) => {
+    const token = useApiToken();
+    const insets = useSafeAreaInsets();
+    const [query, setQuery] = useState("");
+    const [airlines, setAirlines] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const debounceTimer = useRef(null);
+    useEffect(() => {
+        if (query.length < 2) {
+            setAirlines([]);
+            return;
+        }
+        if (debounceTimer.current)
+            clearTimeout(debounceTimer.current);
+        const controller = new AbortController();
+        debounceTimer.current = setTimeout(async () => {
+            setLoading(true);
+            try {
+                const res = await fetch(`${API_URL}?limit=50&search=${encodeURIComponent(query)}`, {
+                    headers: {
+                        "Content-Type": "application/json",
+                        Authorization: `Bearer ${token}`,
+                    },
+                    signal: controller.signal,
+                });
+                if (!res.ok)
+                    throw new Error(`Error ${res.status}`);
+                const data = await res.json();
+                setAirlines(Array.isArray(data) ? data : data.data || []);
+            }
+            catch (e) {
+                if (e?.name !== "AbortError") {
+                    console.error("Error loading airlines:", e);
+                }
+            }
+            finally {
+                setLoading(false);
+            }
+        }, 300);
+        return () => {
+            if (debounceTimer.current)
+                clearTimeout(debounceTimer.current);
+            controller.abort();
+        };
+    }, [query, token]);
+    const toggleAirline = (code) => {
+        const updated = value.includes(code)
+            ? value.filter((c) => c !== code)
+            : [...value, code];
+        onChange(updated);
+    };
+    const showPopular = !loading && (!query.trim() || query.length < 2) && airlines.length === 0;
+    const displayList = showPopular ? POPULAR_AIRLINES : airlines;
+    const selectedAirlines = value
+        .map((code) => POPULAR_AIRLINES.find((a) => a.code === code) ||
+        airlines.find((a) => a.code === code))
+        .filter(Boolean);
+    const renderAirlineItem = ({ item: airline }) => {
+        const isSelected = value.includes(airline.code);
+        return (_jsx(TouchableOpacity, { style: [styles.airlineItem, isSelected && styles.airlineItemSelected], onPress: () => toggleAirline(airline.code), activeOpacity: 0.7, children: _jsxs(View, { style: styles.airlineItemContent, children: [_jsx(View, { style: styles.airlineInfo, children: _jsxs(Text, { style: styles.airlineTitle, children: [airline.title, _jsx(Text, { style: styles.airlineCode, children: `  ${airline.code}` })] }) }), _jsx(View, { style: [
+                            styles.checkbox,
+                            isSelected && styles.checkboxSelected,
+                        ], children: isSelected && _jsx(Text, { style: styles.checkmark, children: "\u2713" }) })] }) }));
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs(TouchableOpacity, { style: formStyles.inputTrigger, onPress: () => setIsModalOpen(true), activeOpacity: 0.8, children: [_jsx(Text, { style: formStyles.label, children: translations["airlines_label"] || "Airlines" }), value.length > 0 ? (_jsx(View, { style: styles.chipsRow, children: value.map((code) => {
+                            const airline = POPULAR_AIRLINES.find((a) => a.code === code) ||
+                                airlines.find((a) => a.code === code);
+                            return (_jsxs(View, { style: styles.chip, children: [_jsx(Text, { style: styles.chipText, children: airline?.title || code }), _jsx(TouchableOpacity, { onPress: () => toggleAirline(code), hitSlop: { top: 4, bottom: 4, left: 4, right: 4 }, children: _jsx(Text, { style: styles.chipRemove, children: "x" }) })] }, code));
+                        }) })) : (_jsx(Text, { style: formStyles.inputTriggerPlaceholder, children: translations["all_airlines_placeholder"] || "All airlines" }))] }), _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 }) }), _jsxs(View, { style: styles.searchHeader, children: [_jsx(SearchIcon, {}), _jsx(TextInput, { autoFocus: true, style: styles.searchInput, value: query, onChangeText: setQuery, placeholder: translations["airlines_popup_placeholder"] ||
+                                        "Search airlines", placeholderTextColor: Colors.textTertiary, returnKeyType: "search" })] }), selectedAirlines.length > 0 && (_jsx(View, { style: styles.selectedChipsContainer, children: selectedAirlines.map((airline) => (_jsxs(View, { style: styles.chip, children: [_jsx(Text, { style: styles.chipText, children: airline.title }), _jsx(TouchableOpacity, { onPress: () => toggleAirline(airline.code), hitSlop: { top: 4, bottom: 4, left: 4, right: 4 }, children: _jsx(Text, { style: styles.chipRemove, children: "x" }) })] }, airline.code))) })), _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["airlines_popup_loading"] || "Loading..." })] })), !loading &&
+                                    !showPopular &&
+                                    airlines.length === 0 &&
+                                    query.length >= 2 && (_jsx(Text, { style: styles.noResults, children: translations["airlines_popup_no_results"] ||
+                                        "Nothing found" })), !loading && (_jsxs(_Fragment, { children: [showPopular && (_jsx(Text, { style: styles.sectionTitle, children: translations["airlines_popup_popular_title"] ||
+                                                "Popular airlines" })), _jsx(FlatList, { data: displayList, renderItem: renderAirlineItem, keyExtractor: (item) => String(item.id), keyboardShouldPersistTaps: "handled", showsVerticalScrollIndicator: false })] }))] })] }) })] }));
+};
+const styles = StyleSheet.create({
+    chipsRow: {
+        flexDirection: "row",
+        flexWrap: "wrap",
+        gap: Spacing.sm,
+    },
+    chip: {
+        flexDirection: "row",
+        alignItems: "center",
+        backgroundColor: Colors.primaryLight,
+        borderRadius: BorderRadius.sm,
+        paddingHorizontal: Spacing.sm,
+        paddingVertical: Spacing.xs,
+        gap: Spacing.xs,
+    },
+    chipText: {
+        fontSize: FontSize.sm,
+        color: Colors.primary,
+        fontWeight: "500",
+    },
+    chipRemove: {
+        fontSize: FontSize.sm,
+        color: Colors.primary,
+        fontWeight: "600",
+        paddingLeft: Spacing.xs,
+    },
+    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,
+    },
+    selectedChipsContainer: {
+        flexDirection: "row",
+        flexWrap: "wrap",
+        paddingHorizontal: Spacing.lg,
+        paddingVertical: Spacing.sm,
+        gap: Spacing.sm,
+        borderBottomWidth: 1,
+        borderBottomColor: Colors.border,
+    },
+    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",
+        letterSpacing: 0.5,
+        paddingVertical: Spacing.md,
+    },
+    airlineItem: {
+        paddingVertical: Spacing.md,
+        borderBottomWidth: StyleSheet.hairlineWidth,
+        borderBottomColor: Colors.borderLight,
+    },
+    airlineItemSelected: {
+        backgroundColor: Colors.primaryLight,
+        marginHorizontal: -Spacing.lg,
+        paddingHorizontal: Spacing.lg,
+        borderRadius: BorderRadius.sm,
+    },
+    airlineItemContent: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+    },
+    airlineInfo: {
+        flex: 1,
+    },
+    airlineTitle: {
+        fontSize: FontSize.md,
+        color: Colors.text,
+        fontWeight: "500",
+    },
+    airlineCode: {
+        fontSize: FontSize.md,
+        color: Colors.textSecondary,
+        fontWeight: "400",
+    },
+    checkbox: {
+        width: 22,
+        height: 22,
+        borderRadius: BorderRadius.sm,
+        borderWidth: 2,
+        borderColor: Colors.border,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    checkboxSelected: {
+        backgroundColor: Colors.primary,
+        borderColor: Colors.primary,
+    },
+    checkmark: {
+        color: Colors.textOnPrimary,
+        fontSize: FontSize.sm,
+        fontWeight: "700",
+    },
+});
+export default AirlinesSelector;

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

@@ -0,0 +1,9 @@
+import React from "react";
+type CabinClassSelectorProps = {
+    label: string;
+    value: string;
+    onChange: (val: string) => void;
+    translations: Record<string, string>;
+};
+declare const CabinClassSelector: React.FC<CabinClassSelectorProps>;
+export default CabinClassSelector;

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

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Text, TouchableOpacity, StyleSheet, } from "react-native";
+import { Colors, Spacing, BorderRadius, FontSize } from "../../../theme/colors";
+import { formStyles } from "../../../theme/formStyles";
+const CABIN_OPTIONS = [
+    { value: "economy", labelKey: "cabin_economy", fallback: "Economy" },
+    { value: "economy_premium", labelKey: "cabin_premium", fallback: "Premium Economy" },
+    { value: "business", labelKey: "cabin_business", fallback: "Business" },
+];
+const CabinClassSelector = ({ label, value, onChange, translations, }) => {
+    return (_jsxs(View, { style: styles.container, children: [label ? _jsx(Text, { style: formStyles.label, children: label }) : null, _jsx(View, { style: styles.optionsRow, children: CABIN_OPTIONS.map((option) => {
+                    const isSelected = value === option.value;
+                    return (_jsxs(TouchableOpacity, { style: styles.option, onPress: () => onChange(option.value), activeOpacity: 0.7, children: [_jsx(View, { style: [
+                                    styles.radio,
+                                    isSelected && styles.radioSelected,
+                                ], children: isSelected && _jsx(View, { style: styles.radioInner }) }), _jsx(Text, { style: [
+                                    styles.optionText,
+                                    isSelected && styles.optionTextSelected,
+                                ], children: translations[option.labelKey] || option.fallback })] }, option.value));
+                }) })] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        marginTop: Spacing.sm,
+    },
+    optionsRow: {
+        flexDirection: "row",
+        flexWrap: "wrap",
+        gap: Spacing.lg,
+    },
+    option: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: Spacing.sm,
+    },
+    radio: {
+        width: 20,
+        height: 20,
+        borderRadius: BorderRadius.full,
+        borderWidth: 2,
+        borderColor: Colors.border,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    radioSelected: {
+        borderColor: Colors.primary,
+    },
+    radioInner: {
+        width: 10,
+        height: 10,
+        borderRadius: BorderRadius.full,
+        backgroundColor: Colors.primary,
+    },
+    optionText: {
+        fontSize: FontSize.md,
+        color: Colors.textSecondary,
+    },
+    optionTextSelected: {
+        color: Colors.text,
+        fontWeight: "500",
+    },
+});
+export default CabinClassSelector;

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

@@ -0,0 +1,12 @@
+import React from "react";
+type DatePickerProps = {
+    value: [string, string];
+    onChange: (val: [string, string]) => void;
+    minDate?: string;
+    maxDate?: string;
+    lang: string;
+    translations: Record<string, string>;
+    mode?: "flight" | "hotel" | "car";
+};
+declare const DatePicker: React.FC<DatePickerProps>;
+export default DatePicker;