@devtravelcode/widget-native 1.0.0

package/dist/modules/search-form/flight/flight-results/FlightAdditionalInfo.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+type FlightAdditionalInfoProps = {
+    itineraries: any[];
+    airlines: Record<string, {
+        logo: string;
+        name: string;
+    }>;
+    includeBaggage?: boolean;
+    baggageText?: string;
+    baggageImage?: string;
+    show: boolean;
+    translations: Record<string, string>;
+    lang: string;
+};
+declare const FlightAdditionalInfo: React.FC<FlightAdditionalInfoProps>;
+export default FlightAdditionalInfo;

package/dist/modules/search-form/flight/flight-results/FlightAdditionalInfo.js

@@ -0,0 +1,229 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { View, Text, Image, StyleSheet } from "react-native";
+import Svg, { Path, Rect } from "react-native-svg";
+import { useWidget } from "../../../../context/WidgetContext";
+import { formatTimeByDateTimeFormat } from "../../../../utils/dateTime";
+import { Colors, Spacing, FontSize, BorderRadius } from "../../../../theme/colors";
+const BaggageIncludedIcon = () => (_jsxs(Svg, { width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", children: [_jsx(Rect, { width: 24, height: 24, rx: 12, fill: "#29AD56" }), _jsx(Path, { d: "M7 12L10.5 15.5L17.5 8", stroke: "white", strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round" })] }));
+const NoBaggageIcon = () => (_jsxs(Svg, { width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", children: [_jsx(Path, { d: "M24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24C18.6274 24 24 18.6274 24 12Z", fill: "#FF0505" }), _jsx(Path, { d: "M12.0001 13.0496L8.3251 16.7246C8.1876 16.8621 8.0126 16.9309 7.8001 16.9309C7.5876 16.9309 7.4126 16.8621 7.2751 16.7246C7.1376 16.5871 7.06885 16.4121 7.06885 16.1996C7.06885 15.9871 7.1376 15.8121 7.2751 15.6746L10.9501 11.9996L7.2751 8.32461C7.1376 8.18711 7.06885 8.01211 7.06885 7.79961C7.06885 7.58711 7.1376 7.41211 7.2751 7.27461C7.4126 7.13711 7.5876 7.06836 7.8001 7.06836C8.0126 7.06836 8.1876 7.13711 8.3251 7.27461L12.0001 10.9496L15.6751 7.27461C15.8126 7.13711 15.9876 7.06836 16.2001 7.06836C16.4126 7.06836 16.5876 7.13711 16.7251 7.27461C16.8626 7.41211 16.9313 7.58711 16.9313 7.79961C16.9313 8.01211 16.8626 8.18711 16.7251 8.32461L13.0501 11.9996L16.7251 15.6746C16.8626 15.8121 16.9313 15.9871 16.9313 16.1996C16.9313 16.4121 16.8626 16.5871 16.7251 16.7246C16.5876 16.8621 16.4126 16.9309 16.2001 16.9309C15.9876 16.9309 15.8126 16.8621 15.6751 16.7246L12.0001 13.0496Z", fill: "white" })] }));
+const TransferIcon = () => (_jsxs(Svg, { width: 13, height: 22, viewBox: "0 0 13 22", fill: "none", children: [_jsx(Path, { d: "M3.79288 7.4764C3.18768 7.75078 2.64136 7.98926 2.10883 8.25466C2.03616 8.29184 1.99982 8.47006 1.99731 8.58289C1.98478 9.32397 1.99731 10.065 1.98103 10.8061C1.97471 11.0186 1.90173 11.2233 1.77287 11.39C1.64402 11.5567 1.46614 11.6766 1.26556 11.7318C1.05856 11.7895 0.838872 11.7768 0.639553 11.6956C0.440234 11.6144 0.272077 11.4692 0.160399 11.2818C0.0691791 11.1164 0.0192533 10.9306 0.0150495 10.7407C1.33873e-05 9.89709 -0.0100107 9.05344 0.0163025 8.21107C0.0438688 7.30716 0.526278 6.65198 1.31192 6.30581C2.62758 5.725 3.96956 5.20316 5.30777 4.67749C6.20744 4.3249 6.9843 4.54927 7.56319 5.34163C7.97524 5.90377 8.35834 6.48751 8.71095 7.09048C9.45148 8.37262 10.5604 9.08934 11.9362 9.45218C12.1776 9.50809 12.4072 9.60798 12.6141 9.74707C12.8027 9.89052 12.9343 10.099 12.9845 10.3339C13.0347 10.5688 13.0002 10.8145 12.8872 11.0254C12.6805 11.4536 12.2845 11.6331 11.7971 11.5382C10.2746 11.2463 8.88684 10.4535 7.84512 9.28038C7.78301 9.20037 7.72847 9.11451 7.68223 9.02395L7.58825 9.08293C7.39905 10.042 7.20609 11.0061 7.03066 11.9639C7.01563 12.046 7.10209 12.169 7.17226 12.2421C7.59076 12.6819 8.01678 13.114 8.44281 13.5448C8.6562 13.7516 8.82487 14.0018 8.93796 14.2794C9.05104 14.557 9.10604 14.8558 9.09939 15.1564C9.08811 17.0489 9.09939 18.94 9.09939 20.8325C9.09939 21.5197 8.70093 21.9864 8.12204 21.9954C7.52185 21.9954 7.09206 21.53 7.08956 20.835C7.08956 19.276 7.08956 17.7156 7.07703 16.1565C7.06611 15.9637 6.98732 15.7816 6.85524 15.6436C6.22874 15.0359 5.58845 14.4551 4.90806 13.8243C4.74893 14.5461 4.59857 15.2141 4.45322 15.8834C4.07731 17.6374 3.70141 19.3939 3.31423 21.1479C3.17515 21.789 2.66266 22.1018 2.00734 21.9749C1.44098 21.8646 1.10266 21.3864 1.21669 20.7491C1.45977 19.3824 1.73669 18.0207 2.00358 16.6578C2.4413 14.4201 2.87944 12.1827 3.31799 9.94581C3.4696 9.14575 3.62372 8.34826 3.79288 7.4764Z", fill: Colors.textSecondary }), _jsx(Path, { d: "M7.48515 4.08362C7.2227 4.08381 6.96283 4.03073 6.72056 3.92746C6.4783 3.82419 6.25846 3.67279 6.07376 3.482C5.88905 3.29122 5.74317 3.06485 5.64453 2.81599C5.5459 2.56713 5.49647 2.30073 5.49912 2.0322C5.50668 1.49142 5.72161 0.97533 6.09757 0.595188C6.47353 0.215045 6.98041 0.00129005 7.50896 0C7.77122 0.00167067 8.03057 0.0563769 8.27209 0.160973C8.51362 0.265568 8.73256 0.41799 8.91631 0.609471C9.10006 0.800953 9.24501 1.02772 9.34282 1.27672C9.44062 1.52573 9.48935 1.79206 9.48621 2.0604C9.4881 2.3287 9.43745 2.59466 9.33726 2.8426C9.23706 3.09054 9.08935 3.31543 8.90284 3.50401C8.71633 3.69259 8.49479 3.84103 8.2513 3.94058C8.00781 4.04013 7.74731 4.08877 7.48515 4.08362Z", fill: Colors.textSecondary })] }));
+const FlightAdditionalInfo = ({ itineraries, airlines, includeBaggage = false, baggageText, baggageImage, show, translations, lang, }) => {
+    const { dateTimeFormat } = useWidget();
+    const locale = lang === "ru" ? "ru-RU" : "en-US";
+    const getTransferDuration = (prevSeg, nextSeg) => {
+        if (!prevSeg || !nextSeg)
+            return null;
+        if (nextSeg.transfer_duration) {
+            return nextSeg.transfer_duration;
+        }
+        const arrTime = new Date(prevSeg.arrival.at).getTime();
+        const depTime = new Date(nextSeg.departure.at).getTime();
+        let diffMin = Math.round((depTime - arrTime) / 60000);
+        if (diffMin < 0)
+            return null;
+        const h = Math.floor(diffMin / 60);
+        const m = diffMin % 60;
+        return `${h}:${m.toString().padStart(2, "0")}`;
+    };
+    const getItineraryTravelTime = (segments) => {
+        if (!segments || segments.length === 0)
+            return null;
+        let totalMinutes = 0;
+        for (const seg of segments) {
+            if (!seg.duration)
+                continue;
+            const [h, m] = seg.duration.split(":").map(Number);
+            totalMinutes += h * 60 + m;
+        }
+        for (let i = 0; i < segments.length - 1; i++) {
+            const current = segments[i];
+            const next = segments[i + 1];
+            const transferDuration = getTransferDuration(current, next);
+            if (!transferDuration)
+                continue;
+            const [th, tm] = transferDuration.split(":").map(Number);
+            totalMinutes += th * 60 + tm;
+        }
+        const hours = Math.floor(totalMinutes / 60);
+        const minutes = totalMinutes % 60;
+        return `${hours}${translations["hours_label"] || "h"} ${minutes
+            .toString()
+            .padStart(2, "0")}${translations["minutes_label"] || "m"}`;
+    };
+    return (_jsx(View, { style: [
+            styles.container,
+            { display: show ? "flex" : "none" },
+        ], children: itineraries.map((itinerary, itinIndex) => {
+            const travelTime = getItineraryTravelTime(itinerary.segments);
+            return (_jsxs(React.Fragment, { children: [_jsx(View, { style: styles.itineraryBlock, children: itinerary.segments.map((segment, segIndex) => {
+                            const nextSeg = itinerary.segments[segIndex + 1];
+                            const transferDuration = getTransferDuration(segment, nextSeg);
+                            const airlineCode = segment.operating?.iata_code ||
+                                segment.operating?.carrier_code ||
+                                segment.carrier_code ||
+                                "";
+                            const airlineName = segment.operating?.[`name_${lang}`] ||
+                                airlines[airlineCode]?.name ||
+                                airlineCode ||
+                                (lang === "ru"
+                                    ? "\u041D\u0435\u0438\u0437\u0432\u0435\u0441\u0442\u043D\u0430\u044F \u0430\u0432\u0438\u0430\u043A\u043E\u043C\u043F\u0430\u043D\u0438\u044F"
+                                    : "Unknown Airline");
+                            const airlineLogo = airlineCode
+                                ? `https://cdn.travel-code.com/prod/uploads/airlines/${airlineCode.toUpperCase()}.png`
+                                : "https://cdn.travel-code.com/prod/images/airline-default.png";
+                            const [hours, minutes] = segment.duration?.split(":") || [
+                                "1",
+                                "00",
+                            ];
+                            const departureTime = formatTimeByDateTimeFormat(segment.departure?.at, dateTimeFormat);
+                            const arrivalTime = formatTimeByDateTimeFormat(segment.arrival?.at, dateTimeFormat);
+                            const departureDate = new Date(segment.departure.at).toLocaleDateString(locale, {
+                                day: "2-digit",
+                                month: "long",
+                                weekday: "short",
+                            });
+                            const arrivalDate = new Date(segment.arrival.at).toLocaleDateString(locale, {
+                                day: "2-digit",
+                                month: "long",
+                                weekday: "short",
+                            });
+                            return (_jsxs(React.Fragment, { children: [_jsxs(View, { style: styles.segmentBlock, children: [_jsxs(View, { style: styles.segmentHeader, children: [_jsx(Image, { source: { uri: airlineLogo }, style: styles.segmentAirlineLogo, defaultSource: {
+                                                            uri: "https://cdn.travel-code.com/prod/images/airline-default.png",
+                                                        } }), _jsxs(View, { style: styles.segmentHeaderInfo, children: [_jsx(Text, { style: styles.segmentAirlineName, children: airlineName }), _jsxs(Text, { style: styles.segmentDuration, children: [hours, translations["hours_label"] || "h", " ", minutes, translations["minutes_label"] || "m", " ", translations["in_flight"] || "in flight"] })] }), _jsx(View, { style: styles.flightNumberBadge, children: _jsxs(Text, { style: styles.flightNumberText, children: [translations["flight"] || "Flight", ":", " ", segment.carrier_code, segment.number] }) })] }), _jsxs(View, { style: styles.timingBlock, children: [_jsxs(View, { style: styles.timingRow, children: [_jsx(View, { style: styles.timelineDot }), _jsx(View, { style: styles.timelineConnector }), _jsxs(View, { style: styles.timingInfo, children: [_jsx(Text, { style: styles.timingTime, children: departureTime }), _jsx(Text, { style: styles.timingDate, children: departureDate })] }), _jsx(Text, { style: styles.timingIata, children: segment.departure.iata_code })] }), _jsxs(View, { style: styles.timingRow, children: [_jsx(View, { style: styles.timelineDot }), _jsxs(View, { style: styles.timingInfo, children: [_jsx(Text, { style: styles.timingTime, children: arrivalTime }), _jsx(Text, { style: styles.timingDate, children: arrivalDate })] }), _jsx(Text, { style: styles.timingIata, children: segment.arrival.iata_code })] })] })] }), nextSeg && transferDuration && (_jsxs(View, { style: styles.transferBlock, children: [_jsx(TransferIcon, {}), _jsxs(Text, { style: styles.transferText, children: [translations["transfer"] || "Transfer", " ", transferDuration.replace(":", `${translations["hours_label"] || "h"} `), translations["minutes_label"] || "m"] })] }))] }, segIndex));
+                        }) }), _jsxs(View, { style: styles.travelTimeBlock, children: [_jsxs(Text, { style: styles.travelTimeText, children: [translations["travel_time"] || "Travel time", ": ", travelTime] }), _jsxs(View, { style: styles.baggageInfo, children: [includeBaggage ? _jsx(BaggageIncludedIcon, {}) : _jsx(NoBaggageIcon, {}), _jsx(Text, { style: styles.baggageStatusText, children: baggageText ||
+                                            (includeBaggage
+                                                ? translations["baggage_included"] || "Baggage included"
+                                                : translations["no_baggage"] || "No baggage") })] })] })] }, itinIndex));
+        }) }));
+};
+const styles = StyleSheet.create({
+    container: {
+        overflow: "hidden",
+        borderTopWidth: 1,
+        borderTopColor: Colors.borderLight,
+        marginTop: Spacing.sm,
+        paddingTop: Spacing.md,
+    },
+    itineraryBlock: {
+        marginBottom: Spacing.md,
+    },
+    segmentBlock: {
+        marginBottom: Spacing.md,
+    },
+    segmentHeader: {
+        flexDirection: "row",
+        alignItems: "center",
+        marginBottom: Spacing.md,
+    },
+    segmentAirlineLogo: {
+        width: 40,
+        height: 40,
+        borderRadius: BorderRadius.full,
+        marginRight: Spacing.sm,
+    },
+    segmentHeaderInfo: {
+        flex: 1,
+    },
+    segmentAirlineName: {
+        fontSize: FontSize.md,
+        fontWeight: "600",
+        color: Colors.text,
+    },
+    segmentDuration: {
+        fontSize: FontSize.sm,
+        color: Colors.textSecondary,
+        marginTop: 2,
+    },
+    flightNumberBadge: {
+        backgroundColor: Colors.surfaceSecondary,
+        paddingHorizontal: Spacing.sm,
+        paddingVertical: Spacing.xs,
+        borderRadius: BorderRadius.sm,
+    },
+    flightNumberText: {
+        fontSize: FontSize.xs,
+        color: Colors.textSecondary,
+        fontWeight: "500",
+    },
+    timingBlock: {
+        paddingLeft: Spacing.lg,
+    },
+    timingRow: {
+        flexDirection: "row",
+        alignItems: "center",
+        marginBottom: Spacing.md,
+    },
+    timelineDot: {
+        width: 10,
+        height: 10,
+        borderRadius: 5,
+        backgroundColor: Colors.primary,
+        marginRight: Spacing.sm,
+        zIndex: 1,
+    },
+    timelineConnector: {
+        position: "absolute",
+        left: 4,
+        top: 17,
+        width: 2,
+        height: 40,
+        backgroundColor: Colors.borderLight,
+    },
+    timingInfo: {
+        flex: 1,
+    },
+    timingTime: {
+        fontSize: FontSize.lg,
+        fontWeight: "600",
+        color: Colors.text,
+    },
+    timingDate: {
+        fontSize: FontSize.xs,
+        color: Colors.textSecondary,
+        marginTop: 2,
+    },
+    timingIata: {
+        fontSize: FontSize.md,
+        fontWeight: "700",
+        color: Colors.text,
+    },
+    transferBlock: {
+        flexDirection: "row",
+        alignItems: "center",
+        backgroundColor: Colors.surfaceSecondary,
+        padding: Spacing.md,
+        borderRadius: BorderRadius.md,
+        marginBottom: Spacing.md,
+        gap: Spacing.sm,
+    },
+    transferIconWrap: {
+        marginRight: Spacing.sm,
+    },
+    transferText: {
+        fontSize: FontSize.sm,
+        color: Colors.textSecondary,
+    },
+    travelTimeBlock: {
+        borderTopWidth: 1,
+        borderTopColor: Colors.borderLight,
+        paddingTop: Spacing.md,
+        marginBottom: Spacing.md,
+    },
+    travelTimeText: {
+        fontSize: FontSize.md,
+        color: Colors.text,
+        fontWeight: "500",
+        marginBottom: Spacing.sm,
+    },
+    baggageInfo: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: Spacing.xs,
+    },
+    baggageStatusText: {
+        fontSize: FontSize.sm,
+        color: Colors.textSecondary,
+    },
+});
+export default FlightAdditionalInfo;

package/dist/modules/search-form/flight/flight-results/FlightBaggageToggle.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+type FlightBaggageToggleProps = {
+    flight: any;
+    includeBaggage: boolean;
+    setIncludeBaggage: React.Dispatch<React.SetStateAction<boolean>>;
+    setDynamicPrice: React.Dispatch<React.SetStateAction<string | number>>;
+    setBaggageText: React.Dispatch<React.SetStateAction<string | undefined>>;
+    setBaggageImage: React.Dispatch<React.SetStateAction<string | undefined>>;
+    setBuyHref: React.Dispatch<React.SetStateAction<string | null>>;
+    sessionId?: string | null;
+    translations: Record<string, string>;
+    lang: string;
+};
+declare const FlightBaggageToggle: React.FC<FlightBaggageToggleProps>;
+export default FlightBaggageToggle;

package/dist/modules/search-form/flight/flight-results/FlightBaggageToggle.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { View, Text, TouchableOpacity, Switch, StyleSheet } from "react-native";
+import { useWidget } from "../../../../context/WidgetContext";
+import { useApiToken } from "../../../../utils/getToken";
+import { Colors, Spacing, FontSize } from "../../../../theme/colors";
+const translateBaggageText = (text, translations) => {
+    if (!text)
+        return "";
+    const lower = text.toLowerCase().trim();
+    if (lower.includes("no luggage"))
+        return translations["baggage_toggle_not_included"] || "No baggage";
+    if (lower.includes("luggage included"))
+        return translations["baggage_toggle_included"] || "Baggage included";
+    if (lower === "luggage")
+        return translations["baggage_toggle_not_included"] || "Baggage";
+    return text;
+};
+const FlightBaggageToggle = ({ flight, includeBaggage, sessionId, setIncludeBaggage, setDynamicPrice, setBaggageText, setBaggageImage, setBuyHref, translations, lang, }) => {
+    const token = useApiToken();
+    const [isChecked, setIsChecked] = useState(includeBaggage);
+    const [labelText, setLabelText] = useState("");
+    const [priceDiffText, setPriceDiffText] = useState("");
+    const currentSessionId = sessionId || flight.sessionId || "no-session";
+    const { config } = useWidget();
+    const HOST_URL = config?.additional?.basket_link?.trim() || "https://travel-code.com";
+    useEffect(() => {
+        if (flight.upgrade) {
+            const baggageLabel = translateBaggageText(flight.upgrade.withoutBaggage.baggageText, translations);
+            setLabelText(baggageLabel);
+            setPriceDiffText(`+${flight.upgrade.priceDiff}`);
+        }
+    }, [flight, translations]);
+    const handleChange = (checked) => {
+        setIsChecked(checked);
+        setIncludeBaggage(checked);
+        if (!flight.upgrade)
+            return;
+        const data = checked
+            ? flight.upgrade.withBaggage
+            : flight.upgrade.withoutBaggage;
+        const translatedText = translateBaggageText(data.baggageText, translations);
+        if (checked) {
+            setLabelText(translatedText);
+            setPriceDiffText("");
+        }
+        else {
+            setLabelText(translateBaggageText(flight.upgrade.withoutBaggage.baggageText, translations));
+            setPriceDiffText(`+${flight.upgrade.priceDiff}`);
+        }
+        const cleanPrice = Number(String(data.totalPrice)
+            .replace(/[^0-9.,]/g, "")
+            .replace(",", "."));
+        setDynamicPrice(cleanPrice || 0);
+        setBaggageText(data.bottomBaggageText);
+        setBaggageImage(data.image);
+        setBuyHref(`${HOST_URL}/flights/add-to-cart?itemIds=${data.id}&sessionId=${currentSessionId}&accessToken=${token}&language=${lang}`);
+    };
+    if (!flight.upgrade) {
+        return (_jsx(View, { style: styles.simpleBaggage, children: _jsx(Text, { style: [
+                    styles.simpleBaggageText,
+                    flight.includeBaggage ? styles.baggageGreen : styles.baggageRed,
+                ], children: flight.includeBaggage
+                    ? translations["baggage_toggle_included"] || "Baggage included"
+                    : translations["baggage_toggle_not_included"] || "No baggage" }) }));
+    }
+    return (_jsxs(TouchableOpacity, { style: styles.toggleContainer, onPress: () => handleChange(!isChecked), activeOpacity: 0.7, children: [_jsxs(View, { style: styles.labelRow, children: [_jsx(Text, { style: styles.labelText, children: labelText }), priceDiffText ? (_jsx(Text, { style: styles.priceDiffText, children: priceDiffText })) : null] }), _jsx(Switch, { value: isChecked, onValueChange: handleChange, trackColor: {
+                    false: Colors.border,
+                    true: Colors.primary,
+                }, thumbColor: Colors.white, ios_backgroundColor: Colors.border })] }));
+};
+const styles = StyleSheet.create({
+    simpleBaggage: {
+        paddingVertical: Spacing.xs,
+    },
+    simpleBaggageText: {
+        fontSize: FontSize.sm,
+        fontWeight: "500",
+    },
+    baggageGreen: {
+        color: Colors.success,
+    },
+    baggageRed: {
+        color: Colors.textTertiary,
+    },
+    toggleContainer: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        width: "100%",
+        paddingVertical: Spacing.xs,
+    },
+    labelRow: {
+        flexDirection: "row",
+        alignItems: "center",
+        flex: 1,
+        marginRight: Spacing.sm,
+    },
+    labelText: {
+        fontSize: FontSize.sm,
+        color: Colors.text,
+    },
+    priceDiffText: {
+        fontSize: FontSize.sm,
+        color: Colors.primary,
+        fontWeight: "600",
+        marginLeft: Spacing.xs,
+    },
+});
+export default FlightBaggageToggle;

package/dist/modules/search-form/flight/flight-results/FlightCard.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+type FlightCardProps = {
+    item: any;
+    loading: boolean;
+    dictionaries?: any;
+    airlines?: Record<string, string>;
+    sessionId?: string | null;
+    translations: Record<string, string>;
+    lang: string;
+    currencySign?: string;
+    onSelect?: (item: any) => void;
+};
+declare const FlightCard: React.FC<FlightCardProps>;
+export default FlightCard;