@jotul/jotul-widgets 1.0.5 → 1.2.0

package/dist/components/ProductPageWidget.js

@@ -1,18 +1,38 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import 'leaflet/dist/leaflet.css';
-import { useEffect, useMemo, useState } from 'react';
-import { icon } from 'leaflet';
+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 { CampaignStatus } from './product-page/CampaignStatus';
 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 { R10 } from '../constants';
-const OSM_SMOOTH_TILE_URL = 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png';
+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, R10 } 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.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;
@@ -53,10 +73,11 @@ function getDealerMapPoint(dealer) {
 function toAssetSrc(value) {
     return typeof value === 'string' ? value : value.src;
 }
-function createDealerPinIcon(isExclusive, active) {
+function createDealerPinIcon(isExclusive, active, market) {
     const size = active ? 48 : 42;
     const width = Math.round((16 / 20) * size);
-    const pinUrl = isExclusive ? toAssetSrc(dealerPinExclusive) : toAssetSrc(dealerPin);
+    const exclusivePin = market === 'NO' ? dealerPinIldstedet : dealerPinExclusive;
+    const pinUrl = isExclusive ? toAssetSrc(exclusivePin) : toAssetSrc(dealerPin);
     return icon({
         iconUrl: pinUrl,
         iconRetinaUrl: pinUrl,
@@ -66,7 +87,7 @@ function createDealerPinIcon(isExclusive, active) {
         className: 'jwi-map-pin',
     });
 }
-function FitMapBounds({ points, defaultCenter, }) {
+function FitMapBounds({ boundsKey, points, defaultCenter, }) {
     const map = useMap();
     useEffect(() => {
         const all = points.map((p) => [p.latitude, p.longitude]);
@@ -75,11 +96,13 @@ function FitMapBounds({ points, defaultCenter, }) {
         if (all.length === 0)
             return;
         if (all.length === 1) {
-            map.setView(all[0], 12, { animate: true });
+            map.setView(all[0], 12, { animate: false });
             return;
         }
-        map.fitBounds(all, { padding: [30, 30], animate: true, maxZoom: 14 });
-    }, [defaultCenter, map, points]);
+        // No animation — must complete before FocusActiveDealer centers the selected pin (see FindDealerDrawerWidget).
+        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 }) {
@@ -87,34 +110,149 @@ function FocusActiveDealer({ point }) {
     useEffect(() => {
         if (point == null)
             return;
-        map.setView([point.latitude, point.longitude], Math.max(map.getZoom(), 13), {
-            animate: true,
-        });
+        const target = latLng(point.latitude, point.longitude);
+        map.setView(target, Math.max(map.getZoom(), 13), { animate: true });
     }, [map, point]);
     return null;
 }
-export 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, }) {
+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 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, }) {
     const dealers = (searchResult?.dealers ?? []);
-    const total = searchResult?.total ?? dealers.length;
+    const mapDealers = (mapSearchResult?.dealers ?? dealers);
+    const total = dealers.length;
     const inquiryFormOpen = inquiryValues != null;
-    const [viewMode, setViewMode] = useState('list');
     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 (viewMode !== 'map') {
-            setMobileMapExpanded(false);
-        }
-    }, [viewMode]);
-    useEffect(() => {
-        if (viewMode !== 'map')
-            return;
         const previous = document.body.style.overflow;
         document.body.style.overflow = 'hidden';
         return () => {
             document.body.style.overflow = previous;
         };
-    }, [viewMode]);
+    }, []);
     useEffect(() => {
         if (typeof window === 'undefined')
             return;
@@ -124,7 +262,23 @@ export function ProductPageWidget({ t, buttonStyling, isSearching, locationError
         media.addEventListener('change', update);
         return () => media.removeEventListener('change', update);
     }, []);
-    const mapPoints = useMemo(() => dealers.map((dealer) => getDealerMapPoint(dealer)).filter((v) => v != 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)
@@ -135,22 +289,41 @@ export function ProductPageWidget({ t, buttonStyling, isSearching, locationError
             return null;
         return [latitude, longitude];
     }, [mapPoints, searchResult?.origin?.latitude, searchResult?.origin?.longitude]);
+    const mapBoundsKey = useMemo(() => mapPointsBoundsKey(mapPoints, defaultCenter), [mapPoints, defaultCenter]);
     useEffect(() => {
         setActiveDealerName(dealers.length > 0 ? getDealerName(dealers[0]) : null);
     }, [dealers]);
     const activeMapPoint = useMemo(() => mapPoints.find((p) => p.dealerName === activeDealerName) ?? null, [activeDealerName, mapPoints]);
-    const listMapPills = (_jsxs("div", { className: "jwi-inline-flex jwi-items-center jwi-gap-1 jwi-rounded-full jwi-p-1", children: [_jsx("button", { type: "button", onClick: () => setViewMode('list'), className: `jwi-cursor-pointer jwi-rounded-full jwi-px-4 jwi-py-1.5 jwi-text-sm jwi-font-medium ${viewMode === 'list'
-                    ? 'jwi-bg-[#f0f0f0] jwi-text-[#000000]'
-                    : 'jwi-bg-transparent jwi-text-[#555555]'}`, children: t.listView }), _jsx("button", { type: "button", onClick: () => setViewMode('map'), className: `jwi-cursor-pointer jwi-rounded-full jwi-px-4 jwi-py-1.5 jwi-text-sm jwi-font-medium ${viewMode === 'map'
-                    ? 'jwi-bg-[#f0f0f0] jwi-text-[#000000]'
-                    : 'jwi-bg-transparent jwi-text-[#555555]'}`, children: t.mapView })] }));
-    const mapCanvas = (_jsxs(MapContainer, { center: defaultCenter ?? [59.9139, 10.7522], zoom: 10, 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_SMOOTH_TILE_URL }), _jsx(FitMapBounds, { points: mapPoints, defaultCenter: defaultCenter }), _jsx(FocusActiveDealer, { point: activeMapPoint }), mapPoints.map((point) => {
-                const isActive = activeDealerName === point.dealerName;
-                return (_jsx(Marker, { position: [point.latitude, point.longitude], icon: createDealerPinIcon(point.isExclusive, isActive), eventHandlers: {
-                        click: () => setActiveDealerName(point.dealerName),
-                    }, children: _jsx(Tooltip, { children: point.dealerName }) }, `${point.dealerName}-${point.latitude}-${point.longitude}`));
-            })] }));
-    const showInquiryInMapPopup = inquiryFormOpen && searchResult?.ok && viewMode === 'map';
+    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 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 showInquiryInMapPopup = inquiryFormOpen && searchResult?.ok;
+    const showInquirySuccessScreen = isInquirySubmitted && !inquiryFormOpen;
+    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 handleDealerFocus = (dealerName) => {
         setActiveDealerName(dealerName);
     };
@@ -159,10 +332,11 @@ export function ProductPageWidget({ t, buttonStyling, isSearching, locationError
             onClosePopup();
             return;
         }
-        setViewMode('list');
     };
-    if (inquiryFormOpen && searchResult?.ok && viewMode !== 'map') {
-        return (_jsx("div", { className: "jwi-flex jwi-w-full jwi-flex-col jwi-gap-3", children: _jsx(InquiryForm, { t: t, buttonStyling: buttonStyling, inquiryValues: inquiryValues, inquiryError: inquiryError, onInquiryClose: onInquiryClose, onInquirySubmit: onInquirySubmit, onInquiryFieldChange: onInquiryFieldChange }) }));
+    function renderSuccessPanel() {
+        return (_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 ${R10} 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: closeMapPopup, 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 })] }) }));
     }
-    return (_jsxs(_Fragment, { children: [viewMode === 'list' && (_jsxs("div", { className: `jwi-flex jwi-w-full jwi-flex-col jwi-gap-3 ${R10} jwi-border jwi-border-[#e6e1d7] jwi-bg-white jwi-p-6`, 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 ?? '' })), isInquirySubmitted && _jsx(StatusBanner, { tone: "success", children: t.inquirySentSuccess }), 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-max-h-[min(60vh,480px)] jwi-flex-col jwi-gap-4 jwi-overflow-y-auto jwi-pr-[12px]", children: [_jsx(DealerCardSkeleton, {}), _jsx(DealerCardSkeleton, {}), _jsx(DealerCardSkeleton, {})] })] })), searchResult?.ok && !isSearching && viewMode === 'list' && (_jsx(DealerList, { dealers: dealers, total: total, selectedDealerName: selectedDealerName, headerRight: listMapPills, t: t, buttonStyling: buttonStyling, onStartInquiry: onStartInquiry }))] })), searchResult?.ok && viewMode === 'map' && (_jsxs(_Fragment, { children: [!isMobileViewport && (_jsx("div", { className: "jwi-fixed jwi-inset-0 jwi-z-[9999] jwi-flex jwi-items-center jwi-justify-center jwi-bg-black/45 jwi-p-4", onClick: () => setViewMode('list'), children: _jsxs("div", { className: `jwi-relative jwi-flex jwi-h-[min(85vh,860px)] jwi-w-[min(96vw,1200px)] jwi-scale-100 jwi-flex-col jwi-overflow-hidden ${R10} jwi-bg-white jwi-shadow-[0_20px_60px_rgba(0,0,0,0.25)] jwi-transition-all md:jwi-flex-row`, onClick: (event) => event.stopPropagation(), children: [_jsx("button", { type: "button", onClick: closeMapPopup, 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-full jwi-flex-col jwi-overflow-hidden md:jwi-w-[48%] md:jwi-border-r md:jwi-border-[#ece8df]", 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: showInquiryInMapPopup ? (_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 })), isInquirySubmitted && (_jsx(StatusBanner, { tone: "success", children: t.inquirySentSuccess })), _jsx(DealerList, { dealers: dealers, total: total, selectedDealerName: selectedDealerName, activeDealerName: activeDealerName, fitAvailableHeight: true, autoScrollToActive: true, maxHeightClassName: "jwi-max-h-none", headerRight: listMapPills, t: t, buttonStyling: buttonStyling, onStartInquiry: onStartInquiry, onSelectDealer: handleDealerFocus })] })) }) }), _jsx("div", { className: "jwi-relative jwi-h-[45%] jwi-w-full md:jwi-h-full md:jwi-w-[52%]", children: mapCanvas })] }) })), isMobileViewport && (_jsx("div", { className: "jwi-fixed jwi-inset-0 jwi-z-[9999] jwi-bg-white", children: _jsxs("div", { className: "jwi-relative jwi-flex jwi-h-full jwi-flex-col", children: [_jsx("div", { className: "jwi-flex jwi-justify-end jwi-bg-white jwi-px-4 jwi-pt-3", children: _jsx("button", { type: "button", onClick: closeMapPopup, 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: showInquiryInMapPopup ? (_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 })), isInquirySubmitted && (_jsx(StatusBanner, { tone: "success", children: t.inquirySentSuccess })), _jsx(DealerList, { dealers: dealers, total: total, selectedDealerName: selectedDealerName, activeDealerName: activeDealerName, maxHeightClassName: "jwi-max-h-none", autoScrollToActive: true, enableInternalScroll: false, headerRight: listMapPills, t: t, buttonStyling: buttonStyling, onStartInquiry: onStartInquiry, onSelectDealer: handleDealerFocus })] })) }), !showInquiryInMapPopup && !mobileMapExpanded && (_jsxs("button", { type: "button", onClick: () => setMobileMapExpanded((open) => !open), 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 && !showInquiryInMapPopup && (_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(_Fragment, { children: [!isMobileViewport && (_jsx(_Fragment, { children: _jsx("div", { className: "jwi-fixed jwi-inset-0 jwi-z-[9999] jwi-flex jwi-items-center jwi-justify-center jwi-bg-black/45 jwi-p-4", onClick: closeMapPopup, children: _jsxs("div", { className: `jwi-relative jwi-flex jwi-scale-100 jwi-flex-col jwi-overflow-hidden ${R10} jwi-bg-white jwi-shadow-[0_20px_60px_rgba(0,0,0,0.25)] jwi-transition-all ${showInquirySuccessScreen
+                            ? 'jwi-h-auto jwi-w-[min(92vw,620px)]'
+                            : 'jwi-h-[min(85vh,860px)] jwi-w-[min(96vw,1200px)] md:jwi-flex-row'}`, onClick: (event) => event.stopPropagation(), children: [_jsx("button", { type: "button", onClick: closeMapPopup, 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" }), showInquirySuccessScreen ? (renderSuccessPanel()) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "jwi-flex jwi-h-full jwi-min-h-0 jwi-w-full jwi-flex-col jwi-overflow-hidden md:jwi-w-[48%] md:jwi-border-r md:jwi-border-[#ece8df]", 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: showInquiryInMapPopup ? (_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 }), _jsx(CampaignStatus, { campaign: searchResult?.campaign, t: t }), 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-h-full jwi-flex-col jwi-gap-4 jwi-overflow-y-auto jwi-pr-[12px]", children: [_jsx(DealerCardSkeleton, {}), _jsx(DealerCardSkeleton, {}), _jsx(DealerCardSkeleton, {})] })] })) : (_jsxs(_Fragment, { children: [searchResult?.ok && (_jsx(DealerList, { dealers: visibleDealers, total: total, selectedDealerName: selectedDealerName, activeDealerName: activeDealerName, fitAvailableHeight: true, autoScrollToActive: true, maxHeightClassName: "jwi-max-h-none", t: t, buttonStyling: buttonStyling, borderStyling: borderStyling, market: market, onStartInquiry: onStartInquiry, onSelectDealer: handleDealerFocus })), showMoreButton] }))] })) }) }), _jsx("div", { className: "jwi-relative jwi-h-[45%] jwi-w-full md:jwi-h-full md:jwi-w-[52%]", children: mapCanvas })] }))] }) }) })), isMobileViewport && (_jsx("div", { className: "jwi-fixed jwi-inset-0 jwi-z-[9999] jwi-bg-white", children: _jsxs("div", { className: "jwi-relative jwi-flex jwi-h-full jwi-flex-col", children: [_jsx("div", { className: "jwi-flex jwi-justify-end jwi-bg-white jwi-px-4 jwi-pt-3", children: _jsx("button", { type: "button", onClick: closeMapPopup, 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: showInquirySuccessScreen ? (renderSuccessPanel()) : showInquiryInMapPopup ? (_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 }), _jsx(CampaignStatus, { campaign: searchResult?.campaign, t: t }), 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-flex jwi-flex-col jwi-gap-4", children: [_jsx(DealerCardSkeleton, {}), _jsx(DealerCardSkeleton, {}), _jsx(DealerCardSkeleton, {})] })] })) : (_jsxs(_Fragment, { children: [searchResult?.ok && (_jsx(DealerList, { dealers: visibleDealers, total: total, selectedDealerName: selectedDealerName, activeDealerName: activeDealerName, maxHeightClassName: "jwi-max-h-none", autoScrollToActive: true, enableInternalScroll: false, t: t, buttonStyling: buttonStyling, borderStyling: borderStyling, market: market, onStartInquiry: onStartInquiry, onSelectDealer: handleDealerFocus })), showMoreButton] }))] })) }), !showInquiryInMapPopup && !showInquirySuccessScreen && !mobileMapExpanded && (_jsxs("button", { type: "button", onClick: () => setMobileMapExpanded((open) => !open), 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 && !showInquiryInMapPopup && !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 })] }))] }) }))] }));
 }

package/dist/components/product-page/CampaignStatus.d.ts

@@ -0,0 +1,6 @@
+import type { WidgetStrings } from '../../i18n/widgetStrings';
+import type { DealerSearchResponse } from '../../types';
+export declare function CampaignStatus({ campaign, t, }: {
+    campaign: DealerSearchResponse['campaign'];
+    t: WidgetStrings;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/product-page/CampaignStatus.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+function formatCountdown(milliseconds, t) {
+    const totalSeconds = Math.max(0, Math.floor(milliseconds / 1000));
+    const days = Math.floor(totalSeconds / 86400);
+    const hours = Math.floor((totalSeconds % 86400) / 3600);
+    const minutes = Math.floor((totalSeconds % 3600) / 60);
+    const seconds = totalSeconds % 60;
+    return t.campaignCountdownTime
+        .replace('{days}', String(days))
+        .replace('{hours}', String(hours))
+        .replace('{minutes}', String(minutes))
+        .replace('{seconds}', String(seconds));
+}
+export function CampaignStatus({ campaign, t, }) {
+    const [remaining, setRemaining] = useState(null);
+    const fromTime = campaign?.from ? Date.parse(campaign.from) : Number.NaN;
+    const toTime = campaign?.to ? Date.parse(campaign.to) : Number.NaN;
+    const hasCountdown = Number.isFinite(fromTime) && Number.isFinite(toTime);
+    const title = campaign?.name?.trim();
+    const salesMessage = campaign?.salesMessage?.trim();
+    const hasContent = Boolean(title || salesMessage);
+    const bannerClassName = 'jwi-w-full jwi-flex-shrink-0 jwi-rounded-[12px] jwi-border jwi-border-[#b8d8aa] jwi-bg-[#eff9e9] jwi-px-4 jwi-py-3 jwi-text-center jwi-text-[#16330f] jwi-shadow-[0_6px_16px_rgba(22,51,15,0.08)]';
+    const titleClassName = 'jwi-text-base jwi-font-semibold jwi-leading-tight';
+    const salesMessageClassName = title
+        ? 'jwi-mt-1 jwi-text-sm jwi-font-medium jwi-leading-snug'
+        : 'jwi-text-sm jwi-font-medium jwi-leading-snug';
+    useEffect(() => {
+        if (!hasCountdown)
+            return;
+        const update = () => setRemaining(toTime - Date.now());
+        const initial = window.setTimeout(update, 0);
+        const timer = window.setInterval(update, 1000);
+        return () => {
+            window.clearTimeout(initial);
+            window.clearInterval(timer);
+        };
+    }, [hasCountdown, toTime]);
+    if (!hasCountdown || remaining == null) {
+        if (!hasContent)
+            return null;
+        return (_jsxs("div", { className: bannerClassName, children: [title && _jsx("div", { className: titleClassName, children: title }), salesMessage && _jsx("div", { className: salesMessageClassName, children: salesMessage })] }));
+    }
+    if (remaining <= 0) {
+        return (_jsxs("div", { className: bannerClassName, children: [_jsx("div", { className: "jwi-text-xs jwi-font-semibold jwi-uppercase jwi-tracking-[0.06em]", children: t.campaignEnded }), title && _jsx("div", { className: `jwi-mt-1 ${titleClassName}`, children: title }), salesMessage && _jsx("div", { className: "jwi-mt-1 jwi-text-sm jwi-font-medium jwi-leading-snug", children: salesMessage })] }));
+    }
+    return (_jsxs("div", { className: bannerClassName, children: [title && _jsx("div", { className: titleClassName, children: title }), salesMessage && _jsx("div", { className: salesMessageClassName, children: salesMessage }), _jsx("div", { className: hasContent ? 'jwi-mt-2 jwi-text-xs jwi-font-medium md:jwi-text-sm' : 'jwi-text-xs jwi-font-medium md:jwi-text-sm', children: t.campaignEndsIn.replace('{time}', formatCountdown(remaining, t)) })] }));
+}

package/dist/components/product-page/DealerList.d.ts

@@ -1,6 +1,6 @@
 import { type ReactNode } from 'react';
 import type { WidgetStrings } from '../../i18n/widgetStrings';
-import type { DealerRecord, JotulWidgetButtonStyling } from '../../types';
+import type { DealerRecord, JotulWidgetButtonStyling, JotulWidgetBorderStyling } from '../../types';
 type DealerListProps = {
     dealers: DealerRecord[];
     total: number;
@@ -13,8 +13,10 @@ type DealerListProps = {
     headerRight?: ReactNode;
     t: WidgetStrings;
     buttonStyling?: JotulWidgetButtonStyling;
+    borderStyling?: JotulWidgetBorderStyling;
+    market?: string;
     onStartInquiry: (dealerName: string) => void;
     onSelectDealer?: (dealerName: string) => void;
 };
-export declare function DealerList({ dealers, total, selectedDealerName, activeDealerName, maxHeightClassName, fitAvailableHeight, autoScrollToActive, enableInternalScroll, headerRight, t, buttonStyling, onStartInquiry, onSelectDealer, }: DealerListProps): import("react/jsx-runtime").JSX.Element;
+export declare function DealerList({ dealers, total, selectedDealerName, activeDealerName, maxHeightClassName, fitAvailableHeight, autoScrollToActive, enableInternalScroll, headerRight, t, buttonStyling, borderStyling, market, onStartInquiry, onSelectDealer, }: DealerListProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/product-page/DealerList.js

@@ -5,8 +5,9 @@ import { ArrowRightIcon } from '../../icons/ArrowRightIcon';
 import { TelephoneIcon } from '../../icons/TelephoneIcon';
 import { getWidgetPrimaryButtonPresentation } from '../../utils/widgetPrimaryButtonPresentation';
 import exclusiveDealerBadge from '../../images/jotul-exclusive-dealer.png';
+import ildstedetDealer from '../../images/ildstedet-dealer.svg';
 import { asText, formatDistance, getDealerAddressLines, getDealerKey, getDealerName, } from '../../utils';
-export function DealerList({ dealers, total, selectedDealerName, activeDealerName = null, maxHeightClassName = 'jwi-max-h-[min(60vh,480px)]', fitAvailableHeight = false, autoScrollToActive = false, enableInternalScroll = true, headerRight, t, buttonStyling, onStartInquiry, onSelectDealer, }) {
+export function DealerList({ dealers, total, selectedDealerName, activeDealerName = null, maxHeightClassName = 'jwi-max-h-[min(60vh,480px)]', fitAvailableHeight = false, autoScrollToActive = false, enableInternalScroll = true, headerRight, t, buttonStyling, borderStyling, market, onStartInquiry, onSelectDealer, }) {
     const cardRefs = useRef({});
     useEffect(() => {
         if (!autoScrollToActive || !activeDealerName)
@@ -16,6 +17,7 @@ export function DealerList({ dealers, total, selectedDealerName, activeDealerNam
             return;
         card.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
     }, [activeDealerName, autoScrollToActive]);
+    const defaultBorderColor = borderStyling?.borderColor ?? '#e6e1d7';
     const inquiryCta = getWidgetPrimaryButtonPresentation(buttonStyling, 'panel', {
         extraClassName: 'jwi-w-full jwi-max-w-full jwi-shrink-0 jwi-justify-between jwi-gap-2 md:jwi-max-w-[220px]',
     });
@@ -33,9 +35,15 @@ export function DealerList({ dealers, total, selectedDealerName, activeDealerNam
                                 dealer.exclusive === '1';
                             return (_jsxs("div", { ref: (element) => {
                                     cardRefs.current[dealerName] = element;
-                                }, className: `jwi-w-full jwi-cursor-pointer ${R10} jwi-border jwi-bg-white jwi-p-4 jwi-shadow-[0_1px_2px_rgba(17,17,17,0.03)] ${isActiveDealer ? 'jwi-border-[#ef2b18]' : 'jwi-border-[#e6e1d7]'}`, onClick: () => onSelectDealer?.(dealerName), children: [_jsxs("div", { className: "jwi-flex jwi-items-start jwi-justify-between jwi-gap-3", children: [_jsx("div", { className: "jwi-min-w-0 jwi-max-w-[calc(100%-5rem)] jwi-pr-1", children: _jsxs("div", { className: "jwi-flex jwi-items-center jwi-gap-2", children: [isExclusive && (_jsx("img", { src: typeof exclusiveDealerBadge === 'string'
-                                                                ? exclusiveDealerBadge
-                                                                : exclusiveDealerBadge.src, alt: "Jotul exclusive dealer", className: "jwi-h-auto jwi-w-[40px] jwi-shrink-0 jwi-rounded-full jwi-m-0" })), _jsx("h3", { className: "jwi-m-0 jwi-text-sm md:jwi-text-base jwi-font-semibold jwi-leading-snug jwi-text-[#111111]", children: dealerName })] }) }), distance && (_jsx("div", { className: `jwi-shrink-0 jwi-whitespace-nowrap ${R10} jwi-bg-[#fbf3db] jwi-px-2.5 jwi-py-1 jwi-text-xs jwi-font-medium jwi-leading-none jwi-text-[#111111]`, children: distance }))] }), addressLines.length > 0 && (_jsx("div", { className: "jwi-mt-3 jwi-flex jwi-flex-col jwi-gap-0.5 jwi-text-sm jwi-leading-snug jwi-text-[#111111]", children: addressLines.map((line) => (_jsx("div", { children: line }, line))) })), _jsxs("div", { className: "jwi-mt-4 jwi-flex jwi-flex-col jwi-gap-3 md:jwi-flex-row md:jwi-items-center md:jwi-justify-between", children: [_jsxs("button", { type: "button", onClick: (event) => {
+                                }, className: `jwi-w-full jwi-cursor-pointer ${R10} jwi-border jwi-bg-white jwi-p-4 jwi-shadow-[0_1px_2px_rgba(17,17,17,0.03)] ${isActiveDealer ? 'jwi-border-[#ef2b18]' : ''}`, style: !isActiveDealer && defaultBorderColor !== '#e6e1d7'
+                                    ? { borderColor: defaultBorderColor }
+                                    : undefined, onClick: () => onSelectDealer?.(dealerName), children: [_jsxs("div", { className: "jwi-flex jwi-items-start jwi-justify-between jwi-gap-3", children: [_jsx("div", { className: "jwi-min-w-0 jwi-max-w-[calc(100%-5rem)] jwi-pr-1", children: _jsxs("div", { className: "jwi-flex jwi-items-center jwi-gap-2", children: [isExclusive && (() => {
+                                                            const badgeImage = market === 'NO' ? ildstedetDealer : exclusiveDealerBadge;
+                                                            const badgeAlt = market === 'NO' ? 'Ildstedet dealer' : 'Jotul exclusive dealer';
+                                                            return (_jsx("img", { src: typeof badgeImage === 'string'
+                                                                    ? badgeImage
+                                                                    : badgeImage.src, alt: badgeAlt, className: "jwi-h-auto jwi-w-[40px] jwi-shrink-0 jwi-rounded-full jwi-m-0" }));
+                                                        })(), _jsx("h3", { className: "jwi-m-0 jwi-text-sm md:jwi-text-base jwi-font-semibold jwi-leading-snug jwi-text-[#111111]", children: dealerName })] }) }), distance && (_jsx("div", { className: `jwi-shrink-0 jwi-whitespace-nowrap ${R10} jwi-bg-[#fbf3db] jwi-px-2.5 jwi-py-1 jwi-text-xs jwi-font-medium jwi-leading-none jwi-text-[#111111]`, children: distance }))] }), addressLines.length > 0 && (_jsx("div", { className: "jwi-mt-3 jwi-flex jwi-flex-col jwi-gap-0.5 jwi-text-sm jwi-leading-snug jwi-text-[#111111]", children: addressLines.map((line) => (_jsx("div", { children: line }, line))) })), _jsxs("div", { className: "jwi-mt-4 jwi-flex jwi-flex-col jwi-gap-3 md:jwi-flex-row md:jwi-items-center md:jwi-justify-between", children: [_jsxs("button", { type: "button", onClick: (event) => {
                                                     event.stopPropagation();
                                                     onStartInquiry(dealerName);
                                                 }, className: inquiryCta.className, style: inquiryCta.style, children: [_jsx("span", { children: isSelectedDealer ? t.sendInquiryEditing : t.sendInquiryCta }), _jsx(ArrowRightIcon, { className: "jwi-h-[18px] jwi-w-[18px] jwi-shrink-0" })] }), phone && (_jsxs("a", { href: `tel:${phone.replace(/\s+/g, '')}`, onClick: (event) => event.stopPropagation(), className: "jwi-inline-flex jwi-min-w-0 jwi-items-center jwi-gap-2 jwi-text-sm jwi-font-normal jwi-tabular-nums jwi-text-[#111111] hover:jwi-underline", children: [_jsx(TelephoneIcon, {}), _jsx("span", { className: "jwi-break-all", children: phone })] }))] })] }, getDealerKey(dealer, index)));

package/dist/components/product-page/StatusBanner.d.ts

@@ -1,5 +1,5 @@
 type StatusBannerProps = {
-    tone: 'error' | 'success';
+    tone: 'error' | 'success' | 'info';
     children: string;
 };
 export declare function StatusBanner({ tone, children }: StatusBannerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/product-page/StatusBanner.js

@@ -3,6 +3,8 @@ import { R10 } from '../../constants';
 export function StatusBanner({ tone, children }) {
     const toneClass = tone === 'success'
         ? 'jwi-border-[#b7e5c2] jwi-bg-[#eefbf2] jwi-text-[#1b5e20]'
-        : 'jwi-border-[#f0c7c2] jwi-bg-[#fff3f1] jwi-text-[#8f2d21]';
+        : tone === 'info'
+            ? 'jwi-border-[#e6e1d7] jwi-bg-[#fbf3db] jwi-text-[#111111]'
+            : 'jwi-border-[#f0c7c2] jwi-bg-[#fff3f1] jwi-text-[#8f2d21]';
     return (_jsx("div", { className: `jwi-w-full jwi-flex-shrink-0 ${R10} jwi-border jwi-px-4 jwi-py-3 jwi-text-sm jwi-leading-[1.4] ${toneClass}`, children: children }));
 }

package/dist/constants.d.ts

@@ -1,3 +1,7 @@
+/** Primary Jotul brand red (CTAs, active list border, map clusters). */
+export declare const JOTUL_BRAND_PRIMARY_HEX = "#ef2b18";
+/** Slightly darker red for hover / cluster ring. */
+export declare const JOTUL_BRAND_PRIMARY_DARK_HEX = "#d92817";
 /** 10px radius for widget chrome (matches design spec). */
 export declare const R10 = "jwi-rounded-[10px]";
 export declare const FIND_DEALER_BUTTON_CLASS = "jwi-inline-flex jwi-w-full jwi-min-h-[56px] jwi-cursor-pointer jwi-items-center jwi-justify-center jwi-rounded-[10px] jwi-border-0 jwi-bg-[#ef2b18] jwi-px-7 jwi-text-base jwi-font-medium jwi-text-white hover:jwi-bg-[#d92817] disabled:jwi-cursor-wait disabled:hover:jwi-bg-[#ef2b18]";

package/dist/constants.js

@@ -1,3 +1,7 @@
+/** Primary Jotul brand red (CTAs, active list border, map clusters). */
+export const JOTUL_BRAND_PRIMARY_HEX = '#ef2b18';
+/** Slightly darker red for hover / cluster ring. */
+export const JOTUL_BRAND_PRIMARY_DARK_HEX = '#d92817';
 /** 10px radius for widget chrome (matches design spec). */
 export const R10 = 'jwi-rounded-[10px]';
 export const FIND_DEALER_BUTTON_CLASS = `jwi-inline-flex jwi-w-full jwi-min-h-[56px] jwi-cursor-pointer jwi-items-center jwi-justify-center ${R10} jwi-border-0 jwi-bg-[#ef2b18] jwi-px-7 jwi-text-base jwi-font-medium jwi-text-white hover:jwi-bg-[#d92817] disabled:jwi-cursor-wait disabled:hover:jwi-bg-[#ef2b18]`;

package/dist/i18n/locales/cz.json

@@ -17,6 +17,7 @@
   "find": "Najít",
   "finding": "Vyhledávání …",
   "inquirySentSuccess": "Váš požadavek byl odeslán.",
+  "inquiryThankYouTitle": "Dekujeme za vas pozadavek",
   "goBack": "Zpět",
   "sendInquiryTitle": "Poptávka",
   "sendInquiryTitleWithProduct": "Poptávka na {product}",
@@ -37,5 +38,8 @@
   "mapView": "Mapa",
   "closeMap": "Zavřít mapu",
   "openMap": "Otevřít mapu",
-  "closeMapMobile": "Zavřít mapu"
+  "closeMapMobile": "Zavřít mapu",
+  "campaignEndsIn": "Campaign ends in {time}",
+  "campaignCountdownTime": "{days} days {hours} hours {minutes} minutes and {seconds} seconds",
+  "campaignEnded": "Campaign ended"
 }

package/dist/i18n/locales/de.json

@@ -17,6 +17,7 @@
   "find": "Suchen",
   "finding": "Suche …",
   "inquirySentSuccess": "Ihre Anfrage wurde gesendet.",
+  "inquiryThankYouTitle": "Vielen Dank fur Ihre Anfrage",
   "goBack": "Zurück",
   "sendInquiryTitle": "Anfrage",
   "sendInquiryTitleWithProduct": "Anfrage zu {product}",
@@ -37,5 +38,8 @@
   "mapView": "Karte",
   "closeMap": "Karte schließen",
   "openMap": "Karte öffnen",
-  "closeMapMobile": "Karte schließen"
+  "closeMapMobile": "Karte schließen",
+  "campaignEndsIn": "Kampagne endet in {time}",
+  "campaignCountdownTime": "{days} Tage {hours} Stunden {minutes} Minuten und {seconds} Sekunden",
+  "campaignEnded": "Kampagne beendet"
 }

package/dist/i18n/locales/en.json

@@ -17,6 +17,7 @@
   "find": "Locate",
   "finding": "Searching …",
   "inquirySentSuccess": "Your request has been sent.",
+  "inquiryThankYouTitle": "Thank you for your inquiry",
   "goBack": "Back",
   "sendInquiryTitle": "Request",
   "sendInquiryTitleWithProduct": "Request regarding {product}",
@@ -37,5 +38,8 @@
   "mapView": "Map",
   "closeMap": "Close map",
   "openMap": "Open map",
-  "closeMapMobile": "Close map"
+  "closeMapMobile": "Close map",
+  "campaignEndsIn": "Campaign ends in {time}",
+  "campaignCountdownTime": "{days} days {hours} hours {minutes} minutes and {seconds} seconds",
+  "campaignEnded": "Campaign ended"
 }

package/dist/i18n/locales/fi.json

@@ -17,6 +17,7 @@
   "find": "Etsi",
   "finding": "Haetaan …",
   "inquirySentSuccess": "Pyyntösi on lähetetty.",
+  "inquiryThankYouTitle": "Kiitos yhteydenotostasi",
   "goBack": "Takaisin",
   "sendInquiryTitle": "Pyyntö",
   "sendInquiryTitleWithProduct": "Pyyntö tuotteesta {product}",
@@ -37,5 +38,8 @@
   "mapView": "Kartta",
   "closeMap": "Sulje kartta",
   "openMap": "Avaa kartta",
-  "closeMapMobile": "Sulje kartta"
+  "closeMapMobile": "Sulje kartta",
+  "campaignEndsIn": "Campaign ends in {time}",
+  "campaignCountdownTime": "{days} days {hours} hours {minutes} minutes and {seconds} seconds",
+  "campaignEnded": "Campaign ended"
 }