@devtravelcode/widget-native 1.0.0

package/dist/modules/search-form/hotel/components/HotelCard.js

@@ -0,0 +1,180 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { View, Text, TouchableOpacity, StyleSheet, Linking, } from "react-native";
+import HotelGallery from "./HotelGallery";
+import { useApiToken } from "../../../../utils/getToken";
+import { useWidget } from "../../../../context/WidgetContext";
+import { Colors, Spacing, BorderRadius, FontSize } from "../../../../theme/colors";
+const StarIcon = () => (_jsx(Text, { style: starStyles.star, children: "\u2605" }));
+const starStyles = StyleSheet.create({
+    star: {
+        fontSize: FontSize.sm,
+        color: "#F5A623",
+    },
+});
+const HotelCard = ({ hotel, index, total, translations, lang, onToggleDescription, }) => {
+    const token = useApiToken();
+    const { config } = useWidget();
+    const name = hotel.hotelNames?.mainName || hotel.propertyName || hotel.name || "Unnamed";
+    const address = hotel.address || "";
+    const description = hotel.description || "";
+    const stars = hotel.ratings?.star || 0;
+    const reviewsCount = hotel.ratings?.count || 0;
+    const ratingText = hotel.ratings?.text || "";
+    const ratingValue = hotel.ratings?.overall || "";
+    const nightlyPrice = hotel.nightlyPrice;
+    const totalPrice = hotel.totalPrice;
+    const isSoldOut = hotel.soldOut === true;
+    const currencySign = hotel.currencySign || "$";
+    const heroImages = hotel.heroImages || [];
+    const HOST_URL = config?.additional?.basket_link?.trim() || "https://travel-code.com";
+    const url = `${HOST_URL}${hotel.url || "#"}&accessToken=${token}&language=${lang}`;
+    const handleOpenUrl = () => {
+        Linking.openURL(url).catch(() => { });
+    };
+    const truncatedDescription = description.length > 300
+        ? `${description.slice(0, 300)}...`
+        : description;
+    return (_jsxs(View, { style: styles.card, children: [_jsx(HotelGallery, { images: heroImages }), _jsxs(View, { style: styles.content, children: [_jsx(TouchableOpacity, { onPress: handleOpenUrl, activeOpacity: 0.7, children: _jsx(Text, { style: styles.hotelName, numberOfLines: 2, children: name }) }), stars > 0 && (_jsx(View, { style: styles.starsRow, children: Array.from({ length: stars }).map((_, i) => (_jsx(StarIcon, {}, i))) })), address ? (_jsx(Text, { style: styles.address, numberOfLines: 1, children: address })) : null, description ? (_jsxs(View, { style: styles.descriptionContainer, children: [_jsx(Text, { style: styles.descriptionText, children: hotel.showFullDescription
+                                    ? description
+                                    : truncatedDescription }), description.length > 300 && (_jsx(TouchableOpacity, { onPress: onToggleDescription, children: _jsx(Text, { style: styles.toggleDescription, children: hotel.showFullDescription
+                                        ? translations["hotels_hide_description"] || "Hide"
+                                        : translations["hotels_show_description"] || "Show more" }) }))] })) : null, hotel.availableRooms === 1 && (_jsx(Text, { style: styles.warningText, children: translations["hotels_only_1_room"] ||
+                            "Only 1 room left at this price" })), hotel.availableRooms > 1 && hotel.availableRooms < 5 && (_jsx(Text, { style: styles.warningText, children: translations["hotels_only_few_rooms"]
+                            ? translations["hotels_only_few_rooms"].replace("{availableRooms}", String(hotel.availableRooms))
+                            : `Only ${hotel.availableRooms} rooms left at this price` }))] }), _jsx(View, { style: styles.priceSection, children: isSoldOut ? (_jsx(View, { style: styles.soldOutBlock, children: _jsx(Text, { style: styles.soldOutText, children: translations["hotels_sold_out"] || "Sold Out" }) })) : (_jsxs(_Fragment, { children: [hotel.refundable && (_jsx(Text, { style: styles.refundableText, children: translations["hotels_refundable"] || "Free cancellation" })), _jsxs(View, { style: styles.priceBlock, children: [_jsxs(Text, { style: styles.nightlyPrice, children: [currencySign, nightlyPrice, _jsxs(Text, { style: styles.perNightLabel, children: [" ", translations["hotels_price_per_night"] || "/ night"] })] }), _jsxs(Text, { style: styles.totalPriceText, children: [translations["hotels_total_price"] || "Total:", " ", currencySign, totalPrice] }), _jsx(Text, { style: styles.taxesText, children: translations["hotels_taxes_included"] ||
+                                        "(incl. taxes & fees)" })] }), ratingValue ? (_jsxs(View, { style: styles.ratingBlock, children: [_jsx(View, { style: [styles.ratingBadge, { backgroundColor: parseFloat(ratingValue) >= 4 ? '#1a8917' : Colors.textTertiary }], children: _jsx(Text, { style: styles.ratingBadgeText, children: ratingValue }) }), _jsxs(View, { children: [_jsx(Text, { style: styles.ratingLabel, children: ratingText }), reviewsCount > 0 && (_jsxs(Text, { style: styles.ratingCount, children: [reviewsCount, " ", translations["hotels_reviews"] || "reviews"] }))] })] })) : null, _jsx(TouchableOpacity, { style: styles.viewButton, onPress: handleOpenUrl, activeOpacity: 0.8, children: _jsx(Text, { style: styles.viewButtonText, children: translations["hotels_view_button"] || "View deal" }) })] })) })] }));
+};
+const styles = StyleSheet.create({
+    card: {
+        backgroundColor: Colors.surface,
+        borderRadius: BorderRadius.lg,
+        marginHorizontal: Spacing.lg,
+        marginBottom: Spacing.lg,
+        shadowColor: Colors.black,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.08,
+        shadowRadius: 8,
+        elevation: 3,
+        overflow: "hidden",
+    },
+    cardLast: {
+        marginBottom: 0,
+    },
+    content: {
+        padding: Spacing.md,
+    },
+    hotelName: {
+        fontSize: FontSize.lg,
+        fontWeight: "600",
+        color: Colors.text,
+    },
+    starsRow: {
+        flexDirection: "row",
+        gap: 2,
+        marginTop: Spacing.xs,
+    },
+    address: {
+        fontSize: FontSize.sm,
+        color: Colors.textSecondary,
+        marginTop: Spacing.xs,
+    },
+    descriptionContainer: {
+        marginTop: Spacing.sm,
+    },
+    descriptionText: {
+        fontSize: FontSize.sm,
+        color: Colors.textSecondary,
+        lineHeight: 18,
+    },
+    toggleDescription: {
+        fontSize: FontSize.sm,
+        color: Colors.primary,
+        fontWeight: "500",
+        marginTop: Spacing.xs,
+    },
+    warningText: {
+        fontSize: FontSize.xs,
+        color: Colors.warning,
+        fontWeight: "500",
+        marginTop: Spacing.sm,
+    },
+    priceSection: {
+        padding: Spacing.md,
+    },
+    soldOutBlock: {
+        alignItems: "center",
+        paddingVertical: Spacing.md,
+    },
+    soldOutText: {
+        fontSize: FontSize.lg,
+        fontWeight: "600",
+        color: Colors.error,
+    },
+    refundableText: {
+        fontSize: FontSize.xs,
+        color: Colors.success,
+        fontWeight: "500",
+        marginBottom: Spacing.sm,
+    },
+    priceBlock: {
+        marginBottom: Spacing.sm,
+    },
+    nightlyPrice: {
+        fontSize: FontSize.xl,
+        fontWeight: "700",
+        color: Colors.text,
+    },
+    perNightLabel: {
+        fontSize: FontSize.sm,
+        fontWeight: "400",
+        color: Colors.textSecondary,
+    },
+    totalPriceText: {
+        fontSize: FontSize.sm,
+        color: Colors.textSecondary,
+        marginTop: 2,
+    },
+    taxesText: {
+        fontSize: FontSize.xs,
+        color: Colors.textTertiary,
+        marginTop: 2,
+    },
+    ratingBlock: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: Spacing.sm,
+        marginBottom: Spacing.md,
+    },
+    ratingBadge: {
+        backgroundColor: Colors.primary,
+        borderRadius: BorderRadius.sm,
+        paddingHorizontal: Spacing.sm,
+        paddingVertical: Spacing.xs,
+    },
+    ratingBadgeText: {
+        fontSize: FontSize.sm,
+        fontWeight: "700",
+        color: Colors.textOnPrimary,
+    },
+    ratingLabel: {
+        fontSize: FontSize.sm,
+        fontWeight: "500",
+        color: Colors.text,
+    },
+    ratingCount: {
+        fontSize: FontSize.xs,
+        color: Colors.textTertiary,
+    },
+    viewButton: {
+        backgroundColor: Colors.primary,
+        borderRadius: BorderRadius.md,
+        paddingVertical: Spacing.md,
+        alignItems: "center",
+    },
+    viewButtonText: {
+        fontSize: FontSize.md,
+        fontWeight: "600",
+        color: Colors.textOnPrimary,
+    },
+});
+export default HotelCard;

package/dist/modules/search-form/hotel/components/HotelEmptyState.d.ts

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

package/dist/modules/search-form/hotel/components/HotelEmptyState.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Text, StyleSheet } from "react-native";
+import { Colors, Spacing, FontSize } from "../../../../theme/colors";
+const HotelEmptyState = ({ translations }) => (_jsxs(View, { style: styles.container, children: [_jsx(Text, { style: styles.title, children: translations["hotels_not_found_title"] || "No hotels found" }), _jsxs(View, { style: styles.content, children: [_jsx(Text, { style: styles.hint, children: translations["hotels_not_found_hint"] ||
+                        "Try adjusting your search parameters:" }), _jsxs(Text, { style: styles.option, children: ["\u2022", " ", translations["hotels_not_found_option_1"] || "Change stay dates"] }), _jsxs(Text, { style: styles.option, children: ["\u2022", " ", translations["hotels_not_found_option_2"] ||
+                            "Choose a different city or hotel"] }), _jsxs(Text, { style: styles.option, children: ["\u2022", " ", translations["hotels_not_found_option_3"] || "Remove some filters"] })] })] }));
+const styles = StyleSheet.create({
+    container: {
+        padding: Spacing.xxl,
+        alignItems: "center",
+    },
+    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 HotelEmptyState;

package/dist/modules/search-form/hotel/components/HotelGallery.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type HotelGalleryProps = {
+    images: string[];
+};
+declare const HotelGallery: React.FC<HotelGalleryProps>;
+export default HotelGallery;

package/dist/modules/search-form/hotel/components/HotelGallery.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useCallback } from "react";
+import { View, Text, Image, FlatList, StyleSheet, Dimensions, } from "react-native";
+import { Colors, Spacing, BorderRadius, FontSize } from "../../../../theme/colors";
+const SCREEN_WIDTH = Dimensions.get("window").width;
+const GALLERY_WIDTH = SCREEN_WIDTH - Spacing.lg * 2;
+const GALLERY_HEIGHT = 180;
+const PLACEHOLDER_IMAGE = "https://via.placeholder.com/400x200?text=No+Photo";
+const HotelGallery = ({ images }) => {
+    const slides = images?.length ? images : [PLACEHOLDER_IMAGE];
+    const hasMultiple = slides.length > 1;
+    const [activeIndex, setActiveIndex] = useState(0);
+    const onViewableItemsChanged = useRef(({ viewableItems }) => {
+        if (viewableItems.length > 0 && viewableItems[0].index != null) {
+            setActiveIndex(viewableItems[0].index);
+        }
+    }).current;
+    const viewabilityConfig = useRef({
+        itemVisiblePercentThreshold: 50,
+    }).current;
+    const renderItem = useCallback(({ item }) => (_jsx(Image, { source: { uri: item }, style: styles.image, resizeMode: "cover" })), []);
+    return (_jsxs(View, { style: styles.container, children: [_jsx(FlatList, { data: slides, renderItem: renderItem, keyExtractor: (_, index) => String(index), horizontal: true, pagingEnabled: true, showsHorizontalScrollIndicator: false, scrollEnabled: hasMultiple, onViewableItemsChanged: onViewableItemsChanged, viewabilityConfig: viewabilityConfig, snapToInterval: GALLERY_WIDTH, decelerationRate: "fast", getItemLayout: (_, index) => ({
+                    length: GALLERY_WIDTH,
+                    offset: GALLERY_WIDTH * index,
+                    index,
+                }) }), hasMultiple && slides.length <= 10 && (_jsx(View, { style: styles.dotsContainer, children: slides.map((_, index) => (_jsx(View, { style: [
+                        styles.dot,
+                        index === activeIndex && styles.dotActive,
+                    ] }, index))) })), hasMultiple && slides.length > 10 && (_jsx(View, { style: styles.counterBadge, children: _jsxs(Text, { style: styles.counterText, children: [activeIndex + 1, "/", slides.length] }) }))] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        width: "100%",
+        height: GALLERY_HEIGHT,
+        position: "relative",
+    },
+    image: {
+        width: GALLERY_WIDTH,
+        height: GALLERY_HEIGHT,
+    },
+    dotsContainer: {
+        position: "absolute",
+        bottom: Spacing.sm,
+        left: 0,
+        right: 0,
+        flexDirection: "row",
+        justifyContent: "center",
+        gap: 4,
+    },
+    dot: {
+        width: 6,
+        height: 6,
+        borderRadius: 3,
+        backgroundColor: "rgba(255,255,255,0.5)",
+    },
+    dotActive: {
+        backgroundColor: Colors.surface,
+        width: 8,
+        height: 8,
+        borderRadius: 4,
+    },
+    counterBadge: {
+        position: "absolute",
+        bottom: Spacing.sm,
+        right: Spacing.sm,
+        backgroundColor: "rgba(0,0,0,0.5)",
+        borderRadius: BorderRadius.sm,
+        paddingHorizontal: Spacing.sm,
+        paddingVertical: 2,
+    },
+    counterText: {
+        fontSize: FontSize.xs,
+        color: Colors.surface,
+        fontWeight: "600",
+    },
+});
+export default HotelGallery;

package/dist/modules/search-form/hotel/components/HotelList.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+type HotelListProps = {
+    offers: any[];
+    translations: Record<string, string>;
+    lang: string;
+    onToggleDescription: (hotelIndex: number) => void;
+};
+declare const HotelList: React.FC<HotelListProps>;
+export default HotelList;

package/dist/modules/search-form/hotel/components/HotelList.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View, StyleSheet } from "react-native";
+import HotelCard from "./HotelCard";
+const HotelList = ({ offers, translations, lang, onToggleDescription, }) => {
+    return (_jsx(View, { style: styles.container, children: offers.map((hotel, index) => (_jsx(HotelCard, { hotel: hotel, index: index, total: offers.length, translations: translations, lang: lang, onToggleDescription: () => onToggleDescription(index) }, String(hotel.id || hotel.propertyId || index)))) }));
+};
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+});
+export default HotelList;

package/dist/modules/search-form/hotel/components/HotelMap.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+export type HotelMapPin = {
+    id: number;
+    hotelId: number;
+    lat: number;
+    lng: number;
+    price: number;
+    currency: string;
+    name: string;
+    soldOut?: boolean;
+};
+export declare function pinsFromOffers(hotels: any[], currency: string): HotelMapPin[];
+type HotelMapProps = {
+    pins: Array<HotelMapPin>;
+    allHotels?: any[];
+    streamCompleted?: boolean;
+    loading?: boolean;
+    selectedHotelId?: number | null;
+    onHotelSelect?: (hotelId: number) => void;
+    onRefreshSearch?: () => void;
+    translations: Record<string, string>;
+    lang: string;
+    searchParams?: Record<string, any> | null;
+};
+declare const HotelMap: React.FC<HotelMapProps>;
+export default HotelMap;