@jotul/jotul-widgets 1.0.5 → 1.2.0

package/dist/components/FindDealerDrawerWidget.js

@@ -0,0 +1,318 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import 'leaflet/dist/leaflet.css';
+import 'leaflet.markercluster/dist/MarkerCluster.css';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { icon, latLng } from 'leaflet';
+import { MapContainer, Marker, TileLayer, Tooltip, useMap } from 'react-leaflet';
+import { DealerCardSkeleton } from './DealerCardSkeleton';
+import { DealerList } from './product-page/DealerList';
+import { InquiryForm } from './product-page/InquiryForm';
+import { LocationSearch } from './product-page/LocationSearch';
+import { StatusBanner } from './product-page/StatusBanner';
+import { ArrowRightIcon } from '../icons/ArrowRightIcon';
+import dealerPin from '../images/dealer-pin.svg';
+import dealerPinExclusive from '../images/dealer-pin-exclusive.svg';
+import dealerPinIldstedet from '../images/dealer-pin-ildstedet.svg';
+import { MARKER_CLUSTER_LINK_KM, MARKER_CLUSTER_MIN_GROUP, partitionDealersForMarkerClusterPlugin, } from '../utils/dealerMapClustering';
+import { loadLeafletMarkerCluster } from '../utils/loadLeafletMarkerCluster';
+import { markerClusterCountIconHtml } from '../utils/markerClusterIconHtml';
+import { JOTUL_BRAND_PRIMARY_HEX } from '../constants';
+const OSM_MINIMAL_TILE_URL = 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png';
+function mapPointsBoundsKey(points, defaultCenter) {
+    const body = points.length === 0
+        ? ''
+        : [...points]
+            .sort((a, b) => a.latitude !== b.latitude
+            ? a.latitude - b.latitude
+            : a.longitude - b.longitude || a.dealerName.localeCompare(b.dealerName))
+            .map((p) => `${p.dealerName}\t${p.latitude}\t${p.longitude}`)
+            .join('\n');
+    const dc = defaultCenter != null ? `${defaultCenter[0]},${defaultCenter[1]}` : '';
+    return `${body}|${dc}`;
+}
+function readNumber(value) {
+    if (typeof value === 'number' && Number.isFinite(value))
+        return value;
+    if (typeof value === 'string') {
+        const parsed = Number(value);
+        if (Number.isFinite(parsed))
+            return parsed;
+    }
+    return null;
+}
+function getDealerName(dealer) {
+    const raw = dealer.name;
+    return typeof raw === 'string' && raw.trim() ? raw.trim() : 'Unknown dealer';
+}
+function getDealerMapPoint(dealer) {
+    const latitude = readNumber(dealer.latitude);
+    const longitude = readNumber(dealer.longitude);
+    if (latitude == null || longitude == null)
+        return null;
+    const rawExclusive = dealer.exclusive;
+    const isExclusive = rawExclusive === true ||
+        rawExclusive === 1 ||
+        rawExclusive === '1' ||
+        rawExclusive === 'true' ||
+        rawExclusive === 'TRUE' ||
+        rawExclusive === 'yes' ||
+        rawExclusive === 'YES' ||
+        rawExclusive === 'y' ||
+        rawExclusive === 'Y';
+    return { dealerName: getDealerName(dealer), latitude, longitude, isExclusive };
+}
+function toAssetSrc(value) {
+    return typeof value === 'string' ? value : value.src;
+}
+function createDealerPinIcon(isExclusive, active, market) {
+    const size = active ? 48 : 42;
+    const width = Math.round((16 / 20) * size);
+    const exclusivePin = market === 'NO' ? dealerPinIldstedet : dealerPinExclusive;
+    const pinUrl = isExclusive ? toAssetSrc(exclusivePin) : toAssetSrc(dealerPin);
+    return icon({
+        iconUrl: pinUrl,
+        iconRetinaUrl: pinUrl,
+        iconSize: [width, size],
+        iconAnchor: [Math.round(width / 2), size],
+        tooltipAnchor: [0, -Math.round(size * 0.85)],
+        className: 'jwi-map-pin',
+    });
+}
+function FitMapBounds({ boundsKey, points, defaultCenter, }) {
+    const map = useMap();
+    useEffect(() => {
+        const all = points.map((p) => [p.latitude, p.longitude]);
+        if (defaultCenter != null)
+            all.push(defaultCenter);
+        if (all.length === 0)
+            return;
+        if (all.length === 1) {
+            map.setView(all[0], 12, { animate: false });
+            return;
+        }
+        // No animation: programmatic fit must finish immediately so FocusActiveDealer can center the selected pin;
+        // otherwise fitBounds completes after Focus and pulls the viewport away from the active dealer (common with geo).
+        map.fitBounds(all, { padding: [50, 50], animate: false, maxZoom: 19 });
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- boundsKey encodes points + defaultCenter; avoid refit on array identity churn
+    }, [boundsKey, map]);
+    return null;
+}
+function FocusActiveDealer({ point }) {
+    const map = useMap();
+    useEffect(() => {
+        if (point == null)
+            return;
+        const target = latLng(point.latitude, point.longitude);
+        // Always pan to active dealer — after fitBounds it may be merely inside the hull, not centered.
+        map.setView(target, Math.max(map.getZoom(), 13), { animate: true });
+    }, [map, point]);
+    return null;
+}
+function ClusteredMapMarkers({ points, pointsBoundsKey, clusterThemeKey, clusterBrandFill, clusterBrandLabel, market, activeDealerName, onSelectDealer, onUnavailable, }) {
+    const map = useMap();
+    const markersByDealerRef = useRef(new Map());
+    const pointsRef = useRef(points);
+    const activeNameRef = useRef(activeDealerName);
+    const onSelectRef = useRef(onSelectDealer);
+    const onUnavailableRef = useRef(onUnavailable);
+    pointsRef.current = points;
+    activeNameRef.current = activeDealerName;
+    onSelectRef.current = onSelectDealer;
+    onUnavailableRef.current = onUnavailable;
+    function applyPinsForSelection() {
+        const active = activeNameRef.current;
+        for (const p of pointsRef.current) {
+            const marker = markersByDealerRef.current.get(p.dealerName);
+            if (marker != null) {
+                marker.setIcon(createDealerPinIcon(p.isExclusive, active === p.dealerName, market));
+            }
+        }
+    }
+    useEffect(() => {
+        applyPinsForSelection();
+    }, [activeDealerName]);
+    useEffect(() => {
+        let disposed = false;
+        markersByDealerRef.current.clear();
+        let clusterGroup = null;
+        let plainGroup = null;
+        async function mountClusters() {
+            try {
+                const leafletModule = await import('leaflet');
+                if (disposed)
+                    return;
+                const { clustered, standalone } = partitionDealersForMarkerClusterPlugin(pointsRef.current, {
+                    linkKm: MARKER_CLUSTER_LINK_KM,
+                    minGroupSize: MARKER_CLUSTER_MIN_GROUP,
+                });
+                const leafletMaybeDefault = leafletModule;
+                const leaf = (leafletMaybeDefault.default ??
+                    leafletMaybeDefault);
+                if (typeof leaf.featureGroup !== 'function') {
+                    onUnavailableRef.current?.();
+                    return;
+                }
+                function makeMarker(point) {
+                    const marker = leaf.marker([point.latitude, point.longitude], {
+                        icon: createDealerPinIcon(point.isExclusive, activeNameRef.current === point.dealerName, market),
+                    });
+                    marker.on('click', () => {
+                        onSelectRef.current?.({
+                            dealerName: point.dealerName,
+                            latitude: point.latitude,
+                            longitude: point.longitude,
+                        });
+                    });
+                    marker.bindTooltip(point.dealerName);
+                    markersByDealerRef.current.set(point.dealerName, marker);
+                    return marker;
+                }
+                if (standalone.length > 0) {
+                    plainGroup = leaf.featureGroup();
+                    for (const point of standalone) {
+                        plainGroup.addLayer(makeMarker(point));
+                    }
+                    plainGroup.addTo(map);
+                }
+                if (clustered.length > 0) {
+                    await loadLeafletMarkerCluster(leaf);
+                    if (disposed)
+                        return;
+                    if (typeof leaf.markerClusterGroup !== 'function') {
+                        onUnavailableRef.current?.();
+                        return;
+                    }
+                    clusterGroup = leaf.markerClusterGroup({
+                        showCoverageOnHover: false,
+                        spiderfyOnMaxZoom: true,
+                        spiderLegPolylineOptions: {
+                            weight: 1.75,
+                            color: clusterBrandFill,
+                            opacity: 0.38,
+                        },
+                        iconCreateFunction: (cluster) => {
+                            const n = cluster.getChildCount();
+                            return leaf.divIcon({
+                                html: markerClusterCountIconHtml(n, clusterBrandFill, clusterBrandLabel),
+                                className: '',
+                                iconSize: leaf.point(40, 40),
+                            });
+                        },
+                        maxClusterRadius: (zoom) => zoom <= 6 ? 140 : zoom <= 8 ? 125 : zoom <= 10 ? 100 : zoom <= 11 ? 72 : 45,
+                        disableClusteringAtZoom: 12,
+                        chunkedLoading: true,
+                    });
+                    for (const point of clustered) {
+                        clusterGroup.addLayer(makeMarker(point));
+                    }
+                    clusterGroup.addTo(map);
+                }
+                applyPinsForSelection();
+            }
+            catch {
+                onUnavailableRef.current?.();
+            }
+        }
+        void mountClusters();
+        return () => {
+            disposed = true;
+            if (clusterGroup != null) {
+                clusterGroup.clearLayers();
+                clusterGroup.removeFrom(map);
+            }
+            if (plainGroup != null) {
+                plainGroup.clearLayers();
+                plainGroup.removeFrom(map);
+            }
+            markersByDealerRef.current.clear();
+        };
+    }, [map, pointsBoundsKey, clusterThemeKey]);
+    return null;
+}
+export function FindDealerDrawerWidget({ t, buttonStyling, borderStyling, market, isSearching, locationError, searchResult, mapSearchResult, inquiryValues, inquiryError, isInquirySubmitted, selectedDealerName, isManualSearchEnabled, query, suggestions, suggestionsOpen, isSuggestionsLoading, onQueryChange, onQuerySubmit, onSuggestionSelect, onDismissSuggestions, onInquiryClose, onInquirySubmit, onInquiryFieldChange, onStartInquiry, onMapDealerSelect, onClose, }) {
+    const dealers = (searchResult?.dealers ?? []);
+    const mapDealers = (mapSearchResult?.dealers ?? dealers);
+    const total = dealers.length;
+    const inquiryFormOpen = inquiryValues != null;
+    const [activeDealerName, setActiveDealerName] = useState(null);
+    const [mobileMapExpanded, setMobileMapExpanded] = useState(false);
+    const [isMobileViewport, setIsMobileViewport] = useState(false);
+    const [visibleDealerCount, setVisibleDealerCount] = useState(10);
+    const [clusterUnavailable, setClusterUnavailable] = useState(false);
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const media = window.matchMedia('(max-width: 767px)');
+        const update = () => setIsMobileViewport(media.matches);
+        update();
+        media.addEventListener('change', update);
+        return () => media.removeEventListener('change', update);
+    }, []);
+    useEffect(() => {
+        setActiveDealerName(dealers.length > 0 ? getDealerName(dealers[0]) : null);
+    }, [dealers]);
+    useEffect(() => {
+        setVisibleDealerCount(10);
+    }, [dealers]);
+    const visibleDealers = useMemo(() => dealers.slice(0, Math.max(10, visibleDealerCount)), [dealers, visibleDealerCount]);
+    useEffect(() => {
+        if (activeDealerName == null)
+            return;
+        const activeIndex = dealers.findIndex((dealer) => getDealerName(dealer) === activeDealerName);
+        if (activeIndex < 0 || activeIndex < visibleDealerCount)
+            return;
+        const nextCount = Math.ceil((activeIndex + 1) / 10) * 10;
+        setVisibleDealerCount(nextCount);
+    }, [activeDealerName, dealers, visibleDealerCount]);
+    const mapPoints = useMemo(() => mapDealers.map((dealer) => getDealerMapPoint(dealer)).filter((v) => v != null), [mapDealers]);
+    useEffect(() => {
+        setClusterUnavailable(false);
+    }, [mapPoints]);
+    const defaultCenter = useMemo(() => {
+        const first = mapPoints[0];
+        if (first != null)
+            return [first.latitude, first.longitude];
+        const latitude = readNumber(searchResult?.origin?.latitude);
+        const longitude = readNumber(searchResult?.origin?.longitude);
+        if (latitude == null || longitude == null)
+            return null;
+        return [latitude, longitude];
+    }, [mapPoints, searchResult?.origin?.latitude, searchResult?.origin?.longitude]);
+    const mapBoundsKey = useMemo(() => mapPointsBoundsKey(mapPoints, defaultCenter), [mapPoints, defaultCenter]);
+    const activeMapPoint = useMemo(() => mapPoints.find((p) => p.dealerName === activeDealerName) ?? null, [activeDealerName, mapPoints]);
+    const mapClusterTheme = useMemo(() => {
+        const fill = buttonStyling?.backgroundColor?.trim() || JOTUL_BRAND_PRIMARY_HEX;
+        const label = buttonStyling?.textColor?.trim() || '#ffffff';
+        return {
+            fill,
+            label,
+            key: `${fill}\0${label}`,
+        };
+    }, [buttonStyling?.backgroundColor, buttonStyling?.textColor]);
+    const showInquirySuccessScreen = isInquirySubmitted && !inquiryFormOpen;
+    const successPanel = (_jsx("div", { className: "jwi-flex jwi-w-full jwi-items-center jwi-justify-center jwi-bg-white jwi-p-2", children: _jsxs("div", { className: "jwi-flex jwi-w-full jwi-max-w-[520px] jwi-flex-col jwi-items-center jwi-gap-4 jwi-rounded-[10px] jwi-bg-white jwi-p-8 jwi-text-center", children: [_jsx("div", { className: "jwi-text-2xl jwi-font-semibold jwi-text-[#111111]", children: t.inquiryThankYouTitle }), _jsx("div", { className: "jwi-text-sm jwi-leading-6 jwi-text-[#333333]", children: t.inquirySentSuccess }), _jsx("button", { type: "button", onClick: onClose, className: "jwi-mt-2 jwi-inline-flex jwi-cursor-pointer jwi-items-center jwi-justify-center jwi-rounded-md jwi-border jwi-border-[#d8d2c7] jwi-bg-white jwi-px-5 jwi-py-2.5 jwi-text-sm jwi-font-medium jwi-text-[#111111]", children: t.goBack })] }) }));
+    const canShowMore = visibleDealerCount < dealers.length;
+    const showMoreButton = canShowMore ? (_jsx("button", { type: "button", onClick: () => setVisibleDealerCount((count) => Math.min(count + 10, dealers.length)), className: "jwi-mt-3 jwi-inline-flex jwi-w-full jwi-cursor-pointer jwi-items-center jwi-justify-center jwi-rounded-md jwi-border jwi-border-[#d8d2c7] jwi-bg-white jwi-px-3 jwi-py-2 jwi-text-sm jwi-font-medium jwi-text-[#111111]", children: "Show more" })) : null;
+    const mapCanvas = (_jsxs(MapContainer, { center: defaultCenter ?? [59.9139, 10.7522], zoom: 6, className: "jwi-h-full jwi-w-full", zoomControl: true, children: [_jsx(TileLayer, { attribution: '\u00A9 <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noreferrer">OpenStreetMap</a> contributors \u00A9 <a href="https://carto.com/attributions" target="_blank" rel="noreferrer">CARTO</a>', url: OSM_MINIMAL_TILE_URL, maxZoom: 19 }), _jsx(FitMapBounds, { boundsKey: mapBoundsKey, points: mapPoints, defaultCenter: defaultCenter }), _jsx(FocusActiveDealer, { point: activeMapPoint }), _jsx(ClusteredMapMarkers, { points: mapPoints, pointsBoundsKey: mapBoundsKey, clusterThemeKey: mapClusterTheme.key, clusterBrandFill: mapClusterTheme.fill, clusterBrandLabel: mapClusterTheme.label, market: market, activeDealerName: activeDealerName, onUnavailable: () => setClusterUnavailable(true), onSelectDealer: (dealer) => {
+                    setActiveDealerName(dealer.dealerName);
+                    onMapDealerSelect?.(dealer);
+                } }), clusterUnavailable &&
+                mapPoints.map((point) => {
+                    const isActive = activeDealerName === point.dealerName;
+                    return (_jsx(Marker, { position: [point.latitude, point.longitude], icon: createDealerPinIcon(point.isExclusive, isActive, market), eventHandlers: {
+                            click: () => {
+                                setActiveDealerName(point.dealerName);
+                                onMapDealerSelect?.({
+                                    dealerName: point.dealerName,
+                                    latitude: point.latitude,
+                                    longitude: point.longitude,
+                                });
+                            },
+                        }, children: _jsx(Tooltip, { children: point.dealerName }) }, `${point.dealerName}-${point.latitude}-${point.longitude}`));
+                })] }));
+    const leftContent = (_jsx(_Fragment, { children: showInquirySuccessScreen ? (successPanel) : inquiryFormOpen ? (_jsx(InquiryForm, { t: t, buttonStyling: buttonStyling, inquiryValues: inquiryValues, inquiryError: inquiryError, embedded: true, onInquiryClose: onInquiryClose, onInquirySubmit: onInquirySubmit, onInquiryFieldChange: onInquiryFieldChange })) : (_jsxs(_Fragment, { children: [_jsx(LocationSearch, { t: t, isManualSearchEnabled: isManualSearchEnabled, query: query, suggestions: suggestions, suggestionsOpen: suggestionsOpen, isSuggestionsLoading: isSuggestionsLoading, onQueryChange: onQueryChange, onQuerySubmit: onQuerySubmit, onSuggestionSelect: onSuggestionSelect, onDismissSuggestions: onDismissSuggestions }), locationError != null && !isManualSearchEnabled && (_jsx(StatusBanner, { tone: "error", children: locationError })), searchResult?.ok === false && (_jsx(StatusBanner, { tone: "error", children: searchResult.error ?? '' })), isSearching && (_jsxs("div", { className: "jwi-flex jwi-flex-col", children: [_jsx("div", { className: "jwi-w-full jwi-flex-shrink-0 jwi-border-b jwi-border-[#e6e1d7] jwi-pb-3", children: _jsx("div", { className: "jwi-h-5 jwi-w-48 jwi-animate-pulse jwi-rounded-full jwi-bg-[#ece8df]" }) }), _jsxs("div", { className: "jwi-mt-3 jwi-mr-[-12px] jwi-flex jwi-flex-col jwi-gap-4 jwi-overflow-y-auto jwi-pr-[12px]", children: [_jsx(DealerCardSkeleton, {}), _jsx(DealerCardSkeleton, {}), _jsx(DealerCardSkeleton, {})] })] })), searchResult?.ok && !isSearching && (_jsxs(_Fragment, { children: [_jsx(DealerList, { dealers: visibleDealers, total: total, selectedDealerName: selectedDealerName, activeDealerName: activeDealerName, fitAvailableHeight: !isMobileViewport, autoScrollToActive: true, enableInternalScroll: !isMobileViewport, maxHeightClassName: "jwi-max-h-none", t: t, buttonStyling: buttonStyling, borderStyling: borderStyling, market: market, onStartInquiry: onStartInquiry, onSelectDealer: setActiveDealerName }), showMoreButton] }))] })) }));
+    if (isMobileViewport) {
+        return (_jsxs("div", { className: "jwi-relative jwi-flex jwi-h-full jwi-flex-col jwi-bg-white", children: [_jsx("div", { className: "jwi-flex jwi-justify-end jwi-bg-white jwi-px-4 jwi-pt-3", children: _jsx("button", { type: "button", onClick: onClose, className: "jwi-inline-flex jwi-h-9 jwi-w-9 jwi-cursor-pointer jwi-items-center jwi-justify-center jwi-rounded-full jwi-border jwi-border-[#d8d2c7] jwi-bg-white jwi-text-xl jwi-leading-none jwi-text-[#111111]", "aria-label": t.closeMap, children: "\u00D7" }) }), _jsx("div", { className: "jwi-min-h-0 jwi-flex-1 jwi-overflow-y-auto jwi-bg-white jwi-p-4 jwi-pb-24", children: leftContent }), !inquiryFormOpen && !showInquirySuccessScreen && !mobileMapExpanded && (_jsxs("button", { type: "button", onClick: () => setMobileMapExpanded(true), className: "jwi-absolute jwi-inset-x-0 jwi-bottom-0 jwi-z-20 jwi-flex jwi-h-14 jwi-items-center jwi-justify-center jwi-gap-2 jwi-rounded-t-[16px] jwi-border-t jwi-border-[#e6e1d7] jwi-bg-white jwi-text-sm jwi-font-semibold jwi-text-[#111111] jwi-shadow-[0_-6px_20px_rgba(0,0,0,0.12)]", children: [t.openMap, _jsx("span", { className: "jwi-inline-flex", style: { transform: 'rotate(-90deg)' }, children: _jsx(ArrowRightIcon, { className: "jwi-h-4 jwi-w-4 jwi-shrink-0" }) })] })), mobileMapExpanded && !inquiryFormOpen && !showInquirySuccessScreen && (_jsxs("div", { className: "jwi-absolute jwi-inset-x-0 jwi-bottom-0 jwi-z-30 jwi-h-[78vh] jwi-overflow-hidden jwi-rounded-t-[16px] jwi-bg-white jwi-shadow-[0_-12px_36px_rgba(0,0,0,0.22)]", children: [_jsxs("button", { type: "button", onClick: () => setMobileMapExpanded(false), className: "jwi-flex jwi-h-12 jwi-w-full jwi-items-center jwi-justify-center jwi-gap-2 jwi-border-b jwi-border-[#e6e1d7] jwi-bg-white jwi-text-sm jwi-font-semibold jwi-text-[#111111]", children: [t.closeMapMobile, _jsx("span", { className: "jwi-inline-flex", style: { transform: 'rotate(90deg)' }, children: _jsx(ArrowRightIcon, { className: "jwi-h-4 jwi-w-4 jwi-shrink-0" }) })] }), _jsx("div", { className: "jwi-h-[calc(78vh-48px)] jwi-w-full", children: mapCanvas })] }))] }));
+    }
+    return (_jsxs("div", { className: "jwi-flex jwi-h-full jwi-w-full jwi-bg-white", children: [_jsx("button", { type: "button", onClick: onClose, className: "jwi-absolute jwi-right-3 jwi-top-3 jwi-z-[1200] jwi-inline-flex jwi-h-9 jwi-w-9 jwi-cursor-pointer jwi-items-center jwi-justify-center jwi-rounded-full jwi-border jwi-border-[#d8d2c7] jwi-bg-white jwi-text-xl jwi-leading-none jwi-text-[#111111] jwi-shadow-[0_2px_8px_rgba(0,0,0,0.12)]", "aria-label": t.closeMap, children: "\u00D7" }), _jsx("div", { className: "jwi-flex jwi-h-full jwi-min-h-0 jwi-w-1/2 jwi-flex-col jwi-overflow-hidden", children: _jsx("div", { className: "jwi-flex jwi-h-full jwi-min-h-0 jwi-w-full jwi-flex-col jwi-gap-3 jwi-overflow-hidden jwi-bg-white jwi-p-6", children: leftContent }) }), _jsx("div", { className: "jwi-h-full jwi-w-1/2", children: mapCanvas })] }));
+}

package/dist/components/ProductPageWidget.d.ts

@@ -1,12 +1,16 @@
 import 'leaflet/dist/leaflet.css';
+import 'leaflet.markercluster/dist/MarkerCluster.css';
 import type { WidgetStrings } from '../i18n/widgetStrings';
-import type { DealerSearchResponse, InquiryFormValues, JotulWidgetButtonStyling, LocationSuggestion } from '../types';
+import type { DealerSearchResponse, InquiryFormValues, JotulWidgetBorderStyling, JotulWidgetButtonStyling, LocationSuggestion } from '../types';
 type ProductPageWidgetProps = {
     t: WidgetStrings;
     buttonStyling?: JotulWidgetButtonStyling;
+    borderStyling?: JotulWidgetBorderStyling;
+    market?: string;
     isSearching: boolean;
     locationError: string | null;
     searchResult: DealerSearchResponse | null;
+    mapSearchResult?: DealerSearchResponse | null;
     inquiryValues: InquiryFormValues | null;
     inquiryError: string | null;
     isInquirySubmitted: boolean;
@@ -24,7 +28,12 @@ type ProductPageWidgetProps = {
     onInquirySubmit: () => void;
     onInquiryFieldChange: (key: keyof InquiryFormValues, value: string) => void;
     onStartInquiry: (dealerName: string) => void;
+    onMapDealerSelect?: (dealer: {
+        dealerName: string;
+        latitude: number;
+        longitude: number;
+    }) => void;
     onClosePopup?: () => void;
 };
-export declare function ProductPageWidget({ t, buttonStyling, isSearching, locationError, searchResult, inquiryValues, inquiryError, isInquirySubmitted, selectedDealerName, isManualSearchEnabled, query, suggestions, suggestionsOpen, isSuggestionsLoading, onQueryChange, onQuerySubmit, onSuggestionSelect, onDismissSuggestions, onInquiryClose, onInquirySubmit, onInquiryFieldChange, onStartInquiry, onClosePopup, }: ProductPageWidgetProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProductPageWidget({ t, buttonStyling, borderStyling, market, isSearching, locationError, searchResult, mapSearchResult, inquiryValues, inquiryError, isInquirySubmitted, selectedDealerName, isManualSearchEnabled, query, suggestions, suggestionsOpen, isSuggestionsLoading, onQueryChange, onQuerySubmit, onSuggestionSelect, onDismissSuggestions, onInquiryClose, onInquirySubmit, onInquiryFieldChange, onStartInquiry, onMapDealerSelect, onClosePopup, }: ProductPageWidgetProps): import("react/jsx-runtime").JSX.Element;
 export {};