@devtravelcode/widget-native 1.0.0

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

@@ -0,0 +1,707 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState, useRef, useCallback, } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, Dimensions, Modal, ActivityIndicator, Animated, PanResponder, Image, FlatList, Linking, } from 'react-native';
+import ClusteredMapView from 'react-native-map-clustering';
+import { Marker, PROVIDER_GOOGLE } from 'react-native-maps';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useHotelDetails } from '../../../hooks/useHotelDetails';
+import { useWidget } from '../../../../context/WidgetContext';
+import { useApiToken } from '../../../../utils/getToken';
+import { Colors, Spacing, BorderRadius, FontSize } from '../../../../theme/colors';
+export function pinsFromOffers(hotels, currency) {
+    return hotels
+        .filter((h) => {
+        const lat = parseFloat(h.latitude);
+        const lng = parseFloat(h.longitude);
+        return lat && lng && lat !== 0 && lng !== 0;
+    })
+        .map((h) => ({
+        id: h.id || h.propertyId,
+        hotelId: h.id || h.propertyId,
+        lat: parseFloat(h.latitude),
+        lng: parseFloat(h.longitude),
+        price: h.nightlyPrice || h.price || h.totalPrice || h.total || 0,
+        currency,
+        name: h.hotelNames?.mainName || h.name || h.hotelName || '',
+        soldOut: h.soldOut || false,
+    }));
+}
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
+const DEFAULT_REGION = {
+    latitude: 40.4168,
+    longitude: -3.7038,
+    latitudeDelta: 10,
+    longitudeDelta: 10,
+};
+const CURRENCY_SIGNS = {
+    USD: '$',
+    EUR: '\u20AC',
+    GBP: '\u00A3',
+    CHF: '\u20A3',
+};
+const BOTTOM_CARD_HEIGHT = 220;
+const MIN_CLOSE_DRAG = 80;
+function getCurrencySign(currency) {
+    return CURRENCY_SIGNS[currency] || currency;
+}
+function formatPrice(price) {
+    if (price >= 1000) {
+        return `${Math.round(price / 100) / 10}k`;
+    }
+    return String(Math.round(price));
+}
+const PriceBadge = React.memo(({ price, currency, selected, soldOut, loading, viewed, error }) => {
+    const sign = getCurrencySign(currency);
+    if (loading) {
+        return (_jsx(View, { style: [styles.priceBadge, styles.priceBadgeSelected], children: _jsx(ActivityIndicator, { size: 12, color: Colors.white }) }));
+    }
+    if (error) {
+        return (_jsx(View, { style: [styles.priceBadge, styles.priceBadgeError], children: _jsx(Text, { style: styles.priceBadgeErrorText, children: "Error" }) }));
+    }
+    if (soldOut) {
+        return (_jsx(View, { style: [styles.priceBadge, styles.priceBadgeSoldOut], children: _jsx(Text, { style: styles.priceBadgeSoldOutText, children: "Sold Out" }) }));
+    }
+    return (_jsx(View, { style: [
+            styles.priceBadge,
+            selected && styles.priceBadgeSelected,
+            !selected && viewed && styles.priceBadgeViewed,
+        ], children: _jsxs(Text, { style: [
+                styles.priceBadgeText,
+                selected && styles.priceBadgeTextSelected,
+                !selected && viewed && styles.priceBadgeTextViewed,
+            ], children: [sign, formatPrice(price)] }) }));
+});
+const GALLERY_WIDTH = SCREEN_WIDTH - Spacing.lg * 2;
+const GALLERY_HEIGHT = 180;
+const CardGallery = React.memo(({ images }) => {
+    const [activeIndex, setActiveIndex] = useState(0);
+    if (!images?.length) {
+        return (_jsx(View, { style: [styles.galleryImage, styles.bottomCardImagePlaceholder], children: _jsx(Text, { style: styles.placeholderText, children: "No Photo" }) }));
+    }
+    return (_jsxs(View, { children: [_jsx(FlatList, { data: images.slice(0, 5), horizontal: true, pagingEnabled: true, showsHorizontalScrollIndicator: false, keyExtractor: (_, i) => String(i), onMomentumScrollEnd: (e) => {
+                    const idx = Math.round(e.nativeEvent.contentOffset.x / GALLERY_WIDTH);
+                    setActiveIndex(idx);
+                }, renderItem: ({ item }) => (_jsx(Image, { source: { uri: item }, style: styles.galleryImage, resizeMode: "cover" })) }), images.length > 1 && (_jsx(View, { style: styles.galleryDots, children: images.slice(0, 5).map((_, i) => (_jsx(View, { style: [styles.galleryDot, i === activeIndex && styles.galleryDotActive] }, i))) }))] }));
+});
+const HotelDetailCard = React.memo(({ hotelData, pin, translations, lang, token, basketLink, onClose, slideAnim }) => {
+    const sign = getCurrencySign(pin.currency);
+    const nightlyPrice = hotelData?.nightlyPrice || hotelData?.price;
+    const totalPrice = hotelData?.totalPrice || hotelData?.total;
+    const handleViewDetails = useCallback(() => {
+        const HOST = basketLink || 'https://travel-code.com';
+        const url = `${HOST}${hotelData?.url || '#'}&accessToken=${token}&language=${lang}`;
+        Linking.openURL(url).catch(() => { });
+    }, [hotelData, token, lang, basketLink]);
+    const panResponder = useRef(PanResponder.create({
+        onStartShouldSetPanResponder: () => false,
+        onMoveShouldSetPanResponder: (_, g) => g.dy > 10,
+        onPanResponderMove: (_, g) => {
+            if (g.dy > 0)
+                slideAnim.setValue(g.dy);
+        },
+        onPanResponderRelease: (_, g) => {
+            if (g.dy > MIN_CLOSE_DRAG) {
+                onClose();
+            }
+            else {
+                Animated.spring(slideAnim, {
+                    toValue: 0,
+                    useNativeDriver: true,
+                    tension: 65,
+                    friction: 11,
+                }).start();
+            }
+        },
+    })).current;
+    return (_jsxs(Animated.View, { style: [
+            styles.bottomCard,
+            { transform: [{ translateY: slideAnim }] },
+        ], ...panResponder.panHandlers, children: [_jsx(View, { style: styles.bottomCardHandle }), _jsx(CardGallery, { images: hotelData?.heroImages || [] }), _jsxs(View, { style: styles.bottomCardInfo, children: [_jsx(Text, { style: styles.bottomCardName, numberOfLines: 2, children: hotelData?.hotelNames?.mainName || hotelData?.propertyName || pin.name || 'Hotel' }), hotelData?.meal ? (_jsx(Text, { style: styles.bottomCardMeal, numberOfLines: 1, children: hotelData.meal })) : null, hotelData?.refundable != null && (_jsx(Text, { style: [
+                            styles.bottomCardRefund,
+                            !hotelData.refundable && styles.bottomCardRefundGray,
+                        ], numberOfLines: 1, children: hotelData.refundable
+                            ? translations['hotels_refundable'] || 'Free cancellation'
+                            : translations['hotels_non_refundable'] || 'Non refundable' })), nightlyPrice ? (_jsxs(Text, { style: styles.bottomCardPriceInfo, children: [translations['hotels_price_per_night_label'] || 'Price per night', " ", sign, nightlyPrice.toFixed?.(2) || nightlyPrice] })) : null, totalPrice ? (_jsxs(Text, { style: styles.bottomCardPriceInfo, children: [translations['hotels_total_for_stay'] || 'Total for stay', " ", sign, totalPrice.toFixed?.(2) || totalPrice] })) : null, _jsxs(View, { style: styles.bottomCardPriceRow, children: [_jsxs(Text, { style: styles.bottomCardPrice, children: [translations['hotels_per_night'] || 'per night', " ", sign, nightlyPrice ? (nightlyPrice.toFixed?.(2) || nightlyPrice) : pin.price] }), _jsx(TouchableOpacity, { style: styles.viewDetailsBtn, onPress: handleViewDetails, children: _jsx(Text, { style: styles.viewDetailsArrow, children: '\u2192' }) })] })] })] }));
+});
+const ErrorCard = React.memo(({ translations, onClose, onRefresh, slideAnim }) => (_jsxs(Animated.View, { style: [
+        styles.bottomCard,
+        { transform: [{ translateY: slideAnim }] },
+    ], children: [_jsx(View, { style: styles.bottomCardHandle }), _jsx(TouchableOpacity, { style: styles.bottomCardClose, onPress: onClose, children: _jsx(Text, { style: styles.bottomCardCloseText, children: '\u00D7' }) }), _jsxs(View, { style: styles.errorCardContent, children: [_jsx(Text, { style: styles.errorCardText, children: translations['map_search_expired'] || 'Your search may have expired. Please refresh to see current prices.' }), onRefresh && (_jsx(TouchableOpacity, { style: styles.errorCardBtn, onPress: onRefresh, activeOpacity: 0.8, children: _jsx(Text, { style: styles.errorCardBtnText, children: translations['map_refresh'] || 'Refresh search' }) }))] })] })));
+const HotelMap = ({ pins, allHotels = [], streamCompleted = false, loading = false, selectedHotelId: externalSelectedId, onHotelSelect, onRefreshSearch, translations, lang, searchParams, }) => {
+    const token = useApiToken();
+    const { config, currency } = useWidget();
+    const insets = useSafeAreaInsets();
+    const mapRef = useRef(null);
+    const [region, setRegion] = useState(DEFAULT_REGION);
+    const [selectedPin, setSelectedPin] = useState(null);
+    const [loadingPinId, setLoadingPinId] = useState(null);
+    const [errorPinId, setErrorPinId] = useState(null);
+    const [viewedPins, setViewedPins] = useState(new Set());
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    const slideAnim = useRef(new Animated.Value(BOTTOM_CARD_HEIGHT + 40)).current;
+    const { hotelData: fetchedHotelData, loading: detailsLoading, fetchHotelDetails, } = useHotelDetails(searchParams || undefined);
+    const [localHotelData, setLocalHotelData] = useState(null);
+    const hotelData = localHotelData || fetchedHotelData;
+    const didFitRef = useRef(false);
+    useEffect(() => {
+        if (!pins.length || !mapRef.current)
+            return;
+        const coords = pins.map((p) => ({
+            latitude: p.lat,
+            longitude: p.lng,
+        }));
+        const timer = setTimeout(() => {
+            mapRef.current?.fitToCoordinates(coords, {
+                edgePadding: { top: 60, right: 60, bottom: 80, left: 60 },
+                animated: didFitRef.current,
+            });
+            didFitRef.current = true;
+        }, 300);
+        return () => clearTimeout(timer);
+    }, [pins]);
+    useEffect(() => {
+        if (externalSelectedId == null) {
+            closeBottomCard();
+            return;
+        }
+        const pin = pins.find((p) => p.hotelId === externalSelectedId);
+        if (pin) {
+            handlePinPress(pin);
+        }
+    }, [externalSelectedId]);
+    const animateCardIn = useCallback(() => {
+        Animated.spring(slideAnim, {
+            toValue: 0,
+            useNativeDriver: true,
+            tension: 65,
+            friction: 11,
+        }).start();
+    }, [slideAnim]);
+    const closeBottomCard = useCallback(() => {
+        console.log('[HotelMap] closeBottomCard called, selectedPin:', selectedPin?.id);
+        Animated.timing(slideAnim, {
+            toValue: BOTTOM_CARD_HEIGHT + 40,
+            duration: 200,
+            useNativeDriver: true,
+        }).start(() => {
+            console.log('[HotelMap] closeBottomCard animation done, clearing selectedPin');
+            setSelectedPin(null);
+            setLoadingPinId(null);
+            setErrorPinId(null);
+            setLocalHotelData(null);
+        });
+    }, [slideAnim, selectedPin]);
+    const handlePinPress = useCallback(async (pin) => {
+        pinPressedRef.current = true;
+        console.log('[HotelMap] handlePinPress pin:', pin.id, 'hotelId:', pin.hotelId, 'currentSelected:', selectedPin?.id);
+        if (pin.soldOut)
+            return;
+        if (selectedPin?.id === pin.id) {
+            console.log('[HotelMap] same pin tapped, closing');
+            closeBottomCard();
+            return;
+        }
+        mapRef.current?.animateToRegion({
+            latitude: pin.lat - region.latitudeDelta * 0.1,
+            longitude: pin.lng,
+            latitudeDelta: Math.min(region.latitudeDelta, 0.5),
+            longitudeDelta: Math.min(region.longitudeDelta, 0.5),
+        }, 400);
+        setErrorPinId(null);
+        setLoadingPinId(pin.id);
+        setSelectedPin(pin);
+        setLocalHotelData(null);
+        animateCardIn();
+        const streamHotel = allHotels.find((h) => (h.id || h.propertyId) === pin.hotelId);
+        if (streamHotel) {
+            console.log('[HotelMap] using stream data for', pin.hotelId);
+            setLocalHotelData(streamHotel);
+            setLoadingPinId(null);
+            setViewedPins((prev) => new Set(prev).add(pin.id));
+            onHotelSelect?.(pin.hotelId);
+            if (streamCompleted) {
+                fetchHotelDetails(pin.hotelId).then((result) => {
+                    if (result)
+                        setLocalHotelData(result);
+                });
+            }
+        }
+        else if (streamCompleted) {
+            console.log('[HotelMap] stream complete, fetching /list for', pin.hotelId);
+            const result = await fetchHotelDetails(pin.hotelId);
+            setLoadingPinId(null);
+            if (!result) {
+                setErrorPinId(pin.id);
+            }
+            else {
+                setLocalHotelData(result);
+                setViewedPins((prev) => new Set(prev).add(pin.id));
+                onHotelSelect?.(pin.hotelId);
+            }
+        }
+        else {
+            console.log('[HotelMap] stream in progress, no data yet for', pin.hotelId);
+            setLoadingPinId(null);
+            setViewedPins((prev) => new Set(prev).add(pin.id));
+        }
+    }, [
+        selectedPin,
+        region,
+        allHotels,
+        streamCompleted,
+        fetchHotelDetails,
+        onHotelSelect,
+        animateCardIn,
+        closeBottomCard,
+    ]);
+    const pinPressedRef = useRef(false);
+    const handleMapPress = useCallback(() => {
+        console.log('[HotelMap] handleMapPress, pinPressedRef:', pinPressedRef.current, 'selectedPin:', selectedPin?.id);
+        if (pinPressedRef.current) {
+            pinPressedRef.current = false;
+            return;
+        }
+        if (selectedPin) {
+            closeBottomCard();
+        }
+    }, [selectedPin, closeBottomCard]);
+    const handleRegionChange = useCallback((newRegion) => {
+        console.log(`[HotelMap] regionChange: latDelta=${newRegion.latitudeDelta.toFixed(4)} lat=${newRegion.latitude.toFixed(4)} lng=${newRegion.longitude.toFixed(4)}`);
+        setRegion(newRegion);
+    }, []);
+    const handleZoomIn = useCallback(() => {
+        if (!mapRef.current)
+            return;
+        const newRegion = {
+            ...region,
+            latitudeDelta: region.latitudeDelta / 2,
+            longitudeDelta: region.longitudeDelta / 2,
+        };
+        mapRef.current.animateToRegion(newRegion, 300);
+    }, [region]);
+    const handleZoomOut = useCallback(() => {
+        if (!mapRef.current)
+            return;
+        const newRegion = {
+            ...region,
+            latitudeDelta: Math.min(region.latitudeDelta * 2, 120),
+            longitudeDelta: Math.min(region.longitudeDelta * 2, 120),
+        };
+        mapRef.current.animateToRegion(newRegion, 300);
+    }, [region]);
+    const hotelsLabel = translations['map_hotels'] || 'hotels';
+    const renderCluster = useCallback((cluster) => {
+        const { id, geometry, onPress, properties } = cluster;
+        const count = properties?.point_count || 0;
+        return (_jsx(Marker, { coordinate: {
+                latitude: geometry.coordinates[1],
+                longitude: geometry.coordinates[0],
+            }, onPress: onPress, tracksViewChanges: true, children: _jsx(View, { style: styles.clusterBubble, children: _jsxs(Text, { style: styles.clusterBubbleText, children: [count, " ", hotelsLabel] }) }) }, `cluster-${id}`));
+    }, [hotelsLabel]);
+    const renderMarkers = useCallback(() => pins.map((pin) => {
+        const isSelected = selectedPin?.id === pin.id;
+        const isLoading = loadingPinId === pin.id;
+        const isError = errorPinId === pin.id;
+        const isViewed = viewedPins.has(pin.id);
+        return (_jsx(Marker, { coordinate: { latitude: pin.lat, longitude: pin.lng }, onPress: () => handlePinPress(pin), tracksViewChanges: true, zIndex: isSelected ? 1000 : 1, children: _jsx(PriceBadge, { price: pin.price, currency: pin.currency, selected: isSelected, soldOut: pin.soldOut, loading: isLoading, viewed: isViewed, error: isError }) }, `pin-${pin.id}`));
+    }), [pins, selectedPin, loadingPinId, errorPinId, viewedPins, handlePinPress]);
+    if (loading && pins.length === 0) {
+        return (_jsxs(View, { style: styles.loaderContainer, children: [_jsx(ActivityIndicator, { size: "large", color: Colors.primary }), _jsx(Text, { style: styles.loaderText, children: translations['map_loader'] || 'Loading map...' })] }));
+    }
+    return (_jsxs(View, { style: styles.container, children: [_jsx(ClusteredMapView, { provider: PROVIDER_GOOGLE, ref: mapRef, style: styles.map, initialRegion: DEFAULT_REGION, onRegionChangeComplete: handleRegionChange, onPress: handleMapPress, showsUserLocation: false, showsPointsOfInterest: false, showsBuildings: false, mapPadding: { top: 0, right: 0, bottom: 0, left: 0 }, clusterColor: Colors.primary, clusterTextColor: Colors.white, clusterFontFamily: undefined, renderCluster: renderCluster, radius: 60, maxZoom: 16, minPoints: 2, animationEnabled: false, children: renderMarkers() }), loading && pins.length > 0 && (_jsx(View, { style: styles.loadingOverlay, children: _jsx(ActivityIndicator, { size: "small", color: Colors.primary }) })), _jsxs(View, { style: styles.zoomControls, children: [_jsx(TouchableOpacity, { style: styles.zoomBtn, onPress: handleZoomIn, activeOpacity: 0.7, children: _jsx(Text, { style: styles.zoomBtnText, children: "+" }) }), _jsx(View, { style: styles.zoomDivider }), _jsx(TouchableOpacity, { style: styles.zoomBtn, onPress: handleZoomOut, activeOpacity: 0.7, children: _jsx(Text, { style: styles.zoomBtnText, children: '\u2212' }) })] }), selectedPin && errorPinId && (_jsx(ErrorCard, { translations: translations, onClose: closeBottomCard, onRefresh: onRefreshSearch, slideAnim: slideAnim })), selectedPin && !errorPinId && (detailsLoading || hotelData) && (_jsx(HotelDetailCard, { hotelData: hotelData, pin: selectedPin, translations: translations, lang: lang, token: token, basketLink: config?.additional?.basket_link?.trim() || '', onClose: closeBottomCard, slideAnim: slideAnim })), _jsx(Modal, { visible: isFullscreen, animationType: "slide", presentationStyle: "fullScreen", onRequestClose: () => setIsFullscreen(false), children: _jsxs(View, { style: styles.fullscreenContainer, children: [_jsx(TouchableOpacity, { style: [styles.fullscreenCloseBtn, { top: insets.top + Spacing.sm }], onPress: () => setIsFullscreen(false), activeOpacity: 0.7, children: _jsx(Text, { style: styles.fullscreenCloseBtnText, children: '\u00D7' }) }), _jsx(ClusteredMapView, { provider: PROVIDER_GOOGLE, ref: mapRef, style: styles.map, initialRegion: region, onRegionChangeComplete: handleRegionChange, onPress: handleMapPress, showsUserLocation: false, showsPointsOfInterest: false, showsBuildings: false, clusterColor: Colors.primary, clusterTextColor: Colors.white, renderCluster: renderCluster, radius: 60, maxZoom: 16, minPoints: 2, animationEnabled: false, children: renderMarkers() }), _jsxs(View, { style: [styles.zoomControls, styles.zoomControlsFullscreen], children: [_jsx(TouchableOpacity, { style: styles.zoomBtn, onPress: handleZoomIn, activeOpacity: 0.7, children: _jsx(Text, { style: styles.zoomBtnText, children: "+" }) }), _jsx(View, { style: styles.zoomDivider }), _jsx(TouchableOpacity, { style: styles.zoomBtn, onPress: handleZoomOut, activeOpacity: 0.7, children: _jsx(Text, { style: styles.zoomBtnText, children: '\u2212' }) })] }), selectedPin && errorPinId && (_jsx(ErrorCard, { translations: translations, onClose: closeBottomCard, onRefresh: onRefreshSearch, slideAnim: slideAnim })), selectedPin && !errorPinId && (detailsLoading || hotelData) && (_jsx(HotelDetailCard, { hotelData: hotelData, pin: selectedPin, translations: translations, lang: lang, token: token, basketLink: config?.additional?.basket_link?.trim() || '', onClose: closeBottomCard, slideAnim: slideAnim }))] }) })] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        borderRadius: BorderRadius.lg,
+        overflow: 'hidden',
+    },
+    map: {
+        flex: 1,
+    },
+    loaderContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: Colors.background,
+        borderRadius: BorderRadius.lg,
+    },
+    loaderText: {
+        marginTop: Spacing.md,
+        fontSize: FontSize.md,
+        color: Colors.textSecondary,
+    },
+    loadingOverlay: {
+        position: 'absolute',
+        top: Spacing.md,
+        alignSelf: 'center',
+        backgroundColor: Colors.surface,
+        borderRadius: BorderRadius.full,
+        padding: Spacing.sm,
+        elevation: 4,
+        shadowColor: Colors.black,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.15,
+        shadowRadius: 4,
+    },
+    priceBadge: {
+        backgroundColor: Colors.surface,
+        paddingHorizontal: Spacing.sm,
+        paddingVertical: Spacing.xs + 1,
+        borderRadius: BorderRadius.lg,
+        borderWidth: 1.5,
+        borderColor: Colors.border,
+        elevation: 3,
+        shadowColor: Colors.black,
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.15,
+        shadowRadius: 3,
+        minWidth: 40,
+        minHeight: 30,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    priceBadgeSelected: {
+        backgroundColor: Colors.primary,
+        borderColor: Colors.primaryDark,
+        elevation: 6,
+        shadowOpacity: 0.25,
+        shadowRadius: 5,
+    },
+    priceBadgeText: {
+        fontSize: FontSize.xs,
+        fontWeight: '700',
+        color: Colors.text,
+    },
+    priceBadgeTextSelected: {
+        color: Colors.white,
+    },
+    priceBadgeSoldOut: {
+        backgroundColor: Colors.textTertiary,
+        borderColor: Colors.textSecondary,
+        opacity: 0.7,
+    },
+    priceBadgeSoldOutText: {
+        fontSize: FontSize.xs - 1,
+        fontWeight: '600',
+        color: Colors.white,
+    },
+    priceBadgeError: {
+        backgroundColor: Colors.error,
+        borderColor: Colors.error,
+    },
+    priceBadgeErrorText: {
+        fontSize: FontSize.xs - 1,
+        fontWeight: '600',
+        color: Colors.white,
+    },
+    priceBadgeViewed: {
+        backgroundColor: Colors.primaryLight,
+        borderColor: Colors.primaryLight,
+        opacity: 1,
+    },
+    priceBadgeTextViewed: {
+        color: Colors.primary,
+    },
+    clusterBubble: {
+        backgroundColor: Colors.primary,
+        paddingHorizontal: Spacing.md,
+        paddingVertical: Spacing.sm,
+        minHeight: 34,
+        justifyContent: 'center',
+        borderRadius: BorderRadius.full,
+        borderWidth: 1,
+        borderColor: Colors.white,
+        elevation: 4,
+        shadowColor: Colors.black,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.2,
+        shadowRadius: 4,
+    },
+    clusterBubbleText: {
+        fontSize: FontSize.xs,
+        fontWeight: '700',
+        color: Colors.white,
+    },
+    zoomControls: {
+        position: 'absolute',
+        right: Spacing.md,
+        bottom: Spacing.xxxl + BOTTOM_CARD_HEIGHT / 2,
+        backgroundColor: Colors.surface,
+        borderRadius: BorderRadius.md,
+        elevation: 4,
+        shadowColor: Colors.black,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.15,
+        shadowRadius: 4,
+    },
+    zoomControlsFullscreen: {
+        bottom: Spacing.xxxl + BOTTOM_CARD_HEIGHT / 2 + 20,
+    },
+    zoomBtn: {
+        width: 40,
+        height: 40,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    zoomBtnText: {
+        fontSize: FontSize.xl,
+        fontWeight: '500',
+        color: Colors.text,
+    },
+    zoomDivider: {
+        height: StyleSheet.hairlineWidth,
+        backgroundColor: Colors.border,
+    },
+    fullscreenBtn: {
+        position: 'absolute',
+        top: Spacing.md,
+        right: Spacing.md,
+        backgroundColor: Colors.surface,
+        width: 40,
+        height: 40,
+        borderRadius: BorderRadius.md,
+        justifyContent: 'center',
+        alignItems: 'center',
+        elevation: 4,
+        shadowColor: Colors.black,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.15,
+        shadowRadius: 4,
+    },
+    fullscreenBtnText: {
+        fontSize: FontSize.lg,
+        color: Colors.text,
+    },
+    bottomCard: {
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        backgroundColor: Colors.surface,
+        borderTopLeftRadius: BorderRadius.xl,
+        borderTopRightRadius: BorderRadius.xl,
+        paddingHorizontal: Spacing.lg,
+        paddingBottom: Spacing.xl,
+        paddingTop: Spacing.sm,
+        elevation: 8,
+        shadowColor: Colors.black,
+        shadowOffset: { width: 0, height: -3 },
+        shadowOpacity: 0.15,
+        shadowRadius: 8,
+        minHeight: BOTTOM_CARD_HEIGHT,
+    },
+    bottomCardHandle: {
+        width: 36,
+        height: 4,
+        borderRadius: 2,
+        backgroundColor: Colors.border,
+        alignSelf: 'center',
+        marginBottom: Spacing.sm,
+    },
+    bottomCardClose: {
+        position: 'absolute',
+        top: Spacing.sm,
+        right: Spacing.md,
+        zIndex: 10,
+        width: 28,
+        height: 28,
+        borderRadius: 14,
+        backgroundColor: Colors.background,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    bottomCardCloseText: {
+        fontSize: FontSize.xl,
+        color: Colors.textSecondary,
+        lineHeight: FontSize.xl + 2,
+    },
+    galleryImage: {
+        width: GALLERY_WIDTH,
+        height: GALLERY_HEIGHT,
+    },
+    galleryDots: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        gap: 6,
+        paddingVertical: Spacing.sm,
+    },
+    galleryDot: {
+        width: 6,
+        height: 6,
+        borderRadius: 3,
+        backgroundColor: Colors.border,
+    },
+    galleryDotActive: {
+        backgroundColor: Colors.primary,
+        width: 8,
+        height: 8,
+        borderRadius: 4,
+    },
+    bottomCardImagePlaceholder: {
+        backgroundColor: Colors.skeleton,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    placeholderText: {
+        fontSize: FontSize.xs,
+        color: Colors.textTertiary,
+    },
+    bottomCardInfo: {
+        paddingHorizontal: Spacing.sm,
+        paddingBottom: Spacing.sm,
+    },
+    bottomCardName: {
+        fontSize: FontSize.md,
+        fontWeight: '700',
+        color: Colors.text,
+        marginBottom: Spacing.xs,
+    },
+    starsRow: {
+        flexDirection: 'row',
+        marginBottom: Spacing.xs,
+    },
+    starIcon: {
+        fontSize: FontSize.sm,
+        color: Colors.warning,
+        marginRight: 1,
+    },
+    bottomCardMeal: {
+        fontSize: FontSize.xs,
+        color: Colors.textSecondary,
+        marginBottom: Spacing.xs,
+    },
+    bottomCardRefund: {
+        fontSize: FontSize.xs,
+        color: Colors.success,
+        fontWeight: '600',
+        marginBottom: Spacing.sm,
+    },
+    bottomCardRefundGray: {
+        color: Colors.textTertiary,
+    },
+    bottomCardPriceInfo: {
+        fontSize: FontSize.xs,
+        color: Colors.textSecondary,
+        marginBottom: 2,
+    },
+    bottomCardPriceRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'flex-end',
+    },
+    bottomCardPrice: {
+        fontSize: FontSize.lg,
+        fontWeight: '700',
+        color: Colors.text,
+    },
+    bottomCardPriceLabel: {
+        fontSize: FontSize.xs,
+        fontWeight: '400',
+        color: Colors.textSecondary,
+    },
+    bottomCardTotal: {
+        fontSize: FontSize.xs,
+        color: Colors.textSecondary,
+        marginTop: 2,
+    },
+    viewDetailsBtn: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: Colors.primary,
+        paddingHorizontal: Spacing.md,
+        paddingVertical: Spacing.sm,
+        borderRadius: BorderRadius.md,
+        gap: Spacing.xs,
+    },
+    viewDetailsBtnText: {
+        fontSize: FontSize.sm,
+        fontWeight: '600',
+        color: Colors.white,
+    },
+    viewDetailsArrow: {
+        fontSize: FontSize.md,
+        color: Colors.white,
+    },
+    bottomCardAddress: {
+        fontSize: FontSize.xs,
+        color: Colors.textSecondary,
+        marginBottom: Spacing.xs,
+    },
+    ratingBlock: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: Spacing.xs,
+        marginBottom: Spacing.xs,
+    },
+    ratingScoreBadge: {
+        backgroundColor: Colors.primary,
+        borderRadius: BorderRadius.sm,
+        paddingHorizontal: Spacing.xs + 2,
+        paddingVertical: 2,
+    },
+    ratingScoreText: {
+        fontSize: FontSize.xs,
+        fontWeight: '700',
+        color: Colors.white,
+    },
+    ratingLabel: {
+        fontSize: FontSize.xs,
+        fontWeight: '600',
+        color: Colors.text,
+    },
+    ratingCount: {
+        fontSize: FontSize.xs - 1,
+        color: Colors.textSecondary,
+    },
+    errorCardContent: {
+        paddingHorizontal: Spacing.lg,
+        paddingVertical: Spacing.md,
+        alignItems: 'center',
+    },
+    errorCardText: {
+        fontSize: FontSize.sm,
+        color: Colors.textSecondary,
+        textAlign: 'center',
+        marginBottom: Spacing.md,
+    },
+    errorCardBtn: {
+        backgroundColor: Colors.primary,
+        paddingHorizontal: Spacing.xl,
+        paddingVertical: Spacing.sm,
+        borderRadius: BorderRadius.md,
+    },
+    errorCardBtnText: {
+        fontSize: FontSize.sm,
+        fontWeight: '600',
+        color: Colors.white,
+    },
+    fullscreenContainer: {
+        flex: 1,
+        backgroundColor: Colors.black,
+        top: 0,
+    },
+    fullscreenCloseBtn: {
+        position: 'absolute',
+        left: Spacing.md,
+        zIndex: 100,
+        backgroundColor: Colors.surface,
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        justifyContent: 'center',
+        alignItems: 'center',
+        elevation: 6,
+        shadowColor: Colors.black,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.2,
+        shadowRadius: 4,
+    },
+    fullscreenCloseBtnText: {
+        fontSize: FontSize.xxl,
+        color: Colors.text,
+        lineHeight: FontSize.xxl + 2,
+    },
+});
+export default HotelMap;