@jotul/jotul-widgets 1.0.5 → 1.2.0

package/dist/index.d.ts

@@ -1 +1 @@
-export { checkWidgetAuthorization, DEFAULT_WIDGET_LOCALE_TAG, normalizeWidgetLocale, resolveWidgetUiLocale, searchDealersByCoordinates, searchDealersByPostalCode, JotulWidget, type CheckWidgetAuthorizationOptions, type DealerSearchResponse, type JotulWidgetButtonStyling, type JotulWidgetLocale, type JotulWidgetProps, type JotulWidgetStyling, type JotulWidgetType, type WidgetAuthClientResponse, } from './JotulWidget';
+export { checkWidgetAuthorization, DEFAULT_WIDGET_LOCALE_TAG, normalizeWidgetLocale, resolveWidgetUiLocale, searchDealersByCoordinates, searchDealersByPostalCode, JotulWidget, type CheckWidgetAuthorizationOptions, type DealerSearchResponse, type JotulWidgetBorderStyling, type JotulWidgetButtonStyling, type JotulWidgetLocale, type JotulWidgetProps, type JotulWidgetStyling, type JotulWidgetType, type WidgetAuthClientResponse, } from './JotulWidget';

package/dist/types.d.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties, ReactNode } from 'react';
-export type JotulWidgetType = 'productPage' | 'dealerFinder' | 'warrantyForm';
+export type JotulWidgetType = 'productPage' | 'findDealerDrawer' | 'dealerFinder' | 'warrantyForm';
 export type WidgetAuthClientResponse = {
     apiVersion?: string;
     ok: boolean;
@@ -22,6 +22,13 @@ export type DealerSearchResponse = {
     };
     total?: number;
     dealers?: Array<Record<string, unknown>>;
+    campaign?: {
+        name?: string | null;
+        slug?: string | null;
+        salesMessage?: string | null;
+        from?: string | null;
+        to?: string | null;
+    } | null;
     error?: string;
 };
 export type LocationSuggestion = {
@@ -43,17 +50,23 @@ export type CheckWidgetAuthorizationOptions = {
     /** ISO 3166-1 alpha-2 market/country (e.g. `NO`, `SE`) sent to the API as `market`. */
     market?: string;
     brands?: string[];
+    /** Optional Sanity campaign slug used to limit dealer results to campaign dealers. */
+    campaignSlug?: string;
 };
-/** CSS values for primary CTA buttons (find dealer, send inquiry, etc.). */
+/** CSS values for primary CTAs; also used for map cluster bubbles (`backgroundColor` fill, `textColor` on the count). */
 export type JotulWidgetButtonStyling = {
     borderRadius?: string;
     backgroundColor?: string;
     textColor?: string;
 };
+export type JotulWidgetBorderStyling = {
+    borderColor?: string;
+};
 export type JotulWidgetStyling = {
     button?: JotulWidgetButtonStyling;
+    border?: JotulWidgetBorderStyling;
 };
-export type ProductPageTriggerRenderProps = {
+export type WidgetTriggerRenderProps = {
     onOpen: () => void;
     isLoading: boolean;
     label: string;
@@ -70,13 +83,21 @@ export type JotulWidgetProps = {
     /** ISO 3166-1 alpha-2 market filter for dealers and geocoder country bias (`NO`, `SE`, …). */
     market?: string;
     brands?: string[];
+    /** Optional Sanity campaign slug used to limit dealer results to campaign dealers. */
+    campaignSlug?: string;
     styling?: JotulWidgetStyling;
     /**
-     * Optional custom trigger for `productPage` widgets.
+     * Optional custom trigger for widgets with an open action (`productPage`, `findDealerDrawer`).
      * - Pass a ReactNode for simple custom markup.
      * - Pass a render function to fully control button behavior and bind `onOpen`.
      */
-    productPageTrigger?: ReactNode | ((props: ProductPageTriggerRenderProps) => ReactNode);
+    trigger?: ReactNode | ((props: WidgetTriggerRenderProps) => ReactNode);
+    /** @deprecated Use `trigger` instead. */
+    productPageTrigger?: ReactNode | ((props: WidgetTriggerRenderProps) => ReactNode);
+    /**
+     * @deprecated Use `trigger` instead.
+     */
+    findDealerDrawerTrigger?: ReactNode | ((props: WidgetTriggerRenderProps) => ReactNode);
 };
 export type DealerRecord = Record<string, unknown>;
 export type InquiryFormValues = {

package/dist/utils/cssColor.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Best-effort rgba() for inline map cluster styles. Hex #rgb / #rrggbb supported.
+ * Other values (e.g. `rgb()`, named colors) are returned unchanged (alpha ignored).
+ */
+export declare function cssColorWithAlpha(color: string, alpha: number): string;

package/dist/utils/cssColor.js

@@ -0,0 +1,31 @@
+/**
+ * Parse #rgb / #rrggbb to channels. Returns null if not a hex color.
+ */
+function parseHexRgb(value) {
+    if (!value.startsWith('#'))
+        return null;
+    let hex = value.slice(1);
+    if (hex.length === 3) {
+        hex = hex
+            .split('')
+            .map((c) => c + c)
+            .join('');
+    }
+    if (hex.length !== 6)
+        return null;
+    const num = Number.parseInt(hex, 16);
+    if (!Number.isFinite(num))
+        return null;
+    return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };
+}
+/**
+ * Best-effort rgba() for inline map cluster styles. Hex #rgb / #rrggbb supported.
+ * Other values (e.g. `rgb()`, named colors) are returned unchanged (alpha ignored).
+ */
+export function cssColorWithAlpha(color, alpha) {
+    const rgb = parseHexRgb(color.trim());
+    if (rgb != null) {
+        return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`;
+    }
+    return color.trim();
+}

package/dist/utils/dealerMapClustering.d.ts

@@ -0,0 +1,28 @@
+/** Max distance between two dealers to treat them as in the same “pile” when grouping. */
+export declare const MARKER_CLUSTER_LINK_KM = 0.5;
+/**
+ * Connected-component minimum size before leaflet.markercluster may own those pins. `1` keeps every
+ * dealer in the plugin so low zoom uses normal pixel-distance clusters; higher values defer sparse
+ * groups to plain markers (fewer bubbles, more individual pins at country scale).
+ */
+export declare const MARKER_CLUSTER_MIN_GROUP = 1;
+export type MapClusterPoint = {
+    latitude: number;
+    longitude: number;
+    dealerName: string;
+};
+/** Great-circle distance in kilometres. */
+export declare function dealerPairDistanceKm(a: MapClusterPoint, b: MapClusterPoint): number;
+/**
+ * Split pins between the cluster plugin and plain `featureGroup`. With
+ * {@link MARKER_CLUSTER_MIN_GROUP} set to `1`, all points are returned in {@link clustered} and the
+ * plugin handles zoom-based merging; raising the minimum leaves small geographic components as
+ * standalone pins.
+ */
+export declare function partitionDealersForMarkerClusterPlugin<P extends MapClusterPoint>(points: P[], opts: {
+    linkKm: number;
+    minGroupSize: number;
+}): {
+    clustered: P[];
+    standalone: P[];
+};

package/dist/utils/dealerMapClustering.js

@@ -0,0 +1,71 @@
+/** Max distance between two dealers to treat them as in the same “pile” when grouping. */
+export const MARKER_CLUSTER_LINK_KM = 0.5;
+/**
+ * Connected-component minimum size before leaflet.markercluster may own those pins. `1` keeps every
+ * dealer in the plugin so low zoom uses normal pixel-distance clusters; higher values defer sparse
+ * groups to plain markers (fewer bubbles, more individual pins at country scale).
+ */
+export const MARKER_CLUSTER_MIN_GROUP = 1;
+/** Great-circle distance in kilometres. */
+export function dealerPairDistanceKm(a, b) {
+    const R = 6371;
+    const dLat = ((b.latitude - a.latitude) * Math.PI) / 180;
+    const dLon = ((b.longitude - a.longitude) * Math.PI) / 180;
+    const lat1 = (a.latitude * Math.PI) / 180;
+    const lat2 = (b.latitude * Math.PI) / 180;
+    const sinDLat = Math.sin(dLat / 2);
+    const sinDLon = Math.sin(dLon / 2);
+    const h = sinDLat * sinDLat + Math.cos(lat1) * Math.cos(lat2) * sinDLon * sinDLon;
+    return 2 * R * Math.asin(Math.min(1, Math.sqrt(h)));
+}
+/**
+ * Split pins between the cluster plugin and plain `featureGroup`. With
+ * {@link MARKER_CLUSTER_MIN_GROUP} set to `1`, all points are returned in {@link clustered} and the
+ * plugin handles zoom-based merging; raising the minimum leaves small geographic components as
+ * standalone pins.
+ */
+export function partitionDealersForMarkerClusterPlugin(points, opts) {
+    const { linkKm, minGroupSize } = opts;
+    if (points.length === 0)
+        return { clustered: [], standalone: [] };
+    const n = points.length;
+    const adj = Array.from({ length: n }, () => []);
+    for (let i = 0; i < n; i++) {
+        for (let j = i + 1; j < n; j++) {
+            if (dealerPairDistanceKm(points[i], points[j]) <= linkKm) {
+                adj[i].push(j);
+                adj[j].push(i);
+            }
+        }
+    }
+    const clusteredIdx = new Set();
+    const standaloneIdx = new Set();
+    const seen = new Array(n).fill(false);
+    for (let start = 0; start < n; start++) {
+        if (seen[start])
+            continue;
+        const stack = [start];
+        const component = [];
+        seen[start] = true;
+        while (stack.length > 0) {
+            const u = stack.pop();
+            component.push(u);
+            for (const v of adj[u]) {
+                if (!seen[v]) {
+                    seen[v] = true;
+                    stack.push(v);
+                }
+            }
+        }
+        const target = component.length >= minGroupSize ? clusteredIdx : standaloneIdx;
+        for (const idx of component)
+            target.add(idx);
+    }
+    const clustered = [...clusteredIdx]
+        .sort((a, b) => a - b)
+        .map((idx) => points[idx]);
+    const standalone = [...standaloneIdx]
+        .sort((a, b) => a - b)
+        .map((idx) => points[idx]);
+    return { clustered, standalone };
+}

package/dist/utils/loadLeafletMarkerCluster.d.ts

@@ -0,0 +1,5 @@
+/**
+ * leaflet.markercluster's build expects a global `L`. ESM `import('leaflet')` does not set `globalThis.L`,
+ * so temporarily assign the loaded namespace during the side-effect import.
+ */
+export declare function loadLeafletMarkerCluster(leaf: Record<string, unknown>): Promise<void>;

package/dist/utils/loadLeafletMarkerCluster.js

@@ -0,0 +1,20 @@
+/**
+ * leaflet.markercluster's build expects a global `L`. ESM `import('leaflet')` does not set `globalThis.L`,
+ * so temporarily assign the loaded namespace during the side-effect import.
+ */
+export async function loadLeafletMarkerCluster(leaf) {
+    const g = globalThis;
+    const saved = g.L;
+    g.L = leaf;
+    try {
+        await import('leaflet.markercluster');
+    }
+    finally {
+        if (saved === undefined) {
+            Reflect.deleteProperty(g, 'L');
+        }
+        else {
+            g.L = saved;
+        }
+    }
+}

package/dist/utils/markerClusterIconHtml.d.ts

@@ -0,0 +1,2 @@
+/** HTML for leaflet.markercluster count bubble; colors come from `styling.button` (background + text). */
+export declare function markerClusterCountIconHtml(childCount: number, brandFillCss: string, brandLabelCss: string): string;

package/dist/utils/markerClusterIconHtml.js

@@ -0,0 +1,7 @@
+import { cssColorWithAlpha } from './cssColor';
+/** HTML for leaflet.markercluster count bubble; colors come from `styling.button` (background + text). */
+export function markerClusterCountIconHtml(childCount, brandFillCss, brandLabelCss) {
+    const outer = cssColorWithAlpha(brandFillCss, 0.38);
+    const inner = cssColorWithAlpha(brandFillCss, 0.92);
+    return `<div style="width:40px;height:40px;background-clip:padding-box;border-radius:20px;background-color:${outer};box-shadow:0 2px 10px rgba(17,17,17,.12)"><div style="width:30px;height:30px;margin:5px;text-align:center;border-radius:15px;font:600 12px system-ui,-apple-system,'Segoe UI',sans-serif;background-color:${inner};color:${brandLabelCss}"><span style="line-height:30px;display:inline-block;width:100%">${childCount}</span></div></div>`;
+}

package/dist/utils.d.ts

@@ -1,4 +1,4 @@
-import type { DealerRecord, InquiryFormValues, JotulWidgetType } from './types';
+import type { DealerRecord, DealerSearchResponse, InquiryFormValues, JotulWidgetType } from './types';
 import type { WidgetStrings } from './i18n/widgetStrings';
 export declare const VALID_WIDGET_TYPES: JotulWidgetType[];
 export declare function isWidgetType(value: string | undefined): value is JotulWidgetType;
@@ -6,6 +6,8 @@ export declare function asText(value: unknown): string | null;
 export declare function formatDistance(dealer: DealerRecord): string | null;
 export declare function getDealerKey(dealer: DealerRecord, index: number): string;
 export declare function getDealerName(dealer: DealerRecord, unknownLabel: string): string;
+/** True when the tapped map pin matches a dealer already in the current successful search payload. */
+export declare function isDealerInSearchResult(dealerLabel: string, searchResult: DealerSearchResponse | null, unknownDealerLabel: string): boolean;
 export declare function getDealerAddressLines(dealer: DealerRecord): string[];
 export declare function createInquiryFormValues(productName: string | undefined, dealerName: string): InquiryFormValues;
 export declare function isValidEmail(value: string): boolean;

package/dist/utils.js

@@ -1,5 +1,6 @@
 export const VALID_WIDGET_TYPES = [
     'productPage',
+    'findDealerDrawer',
     'dealerFinder',
     'warrantyForm',
 ];
@@ -29,6 +30,13 @@ export function getDealerKey(dealer, index) {
 export function getDealerName(dealer, unknownLabel) {
     return asText(dealer.name) ?? asText(dealer.dealerId) ?? unknownLabel;
 }
+/** True when the tapped map pin matches a dealer already in the current successful search payload. */
+export function isDealerInSearchResult(dealerLabel, searchResult, unknownDealerLabel) {
+    if (searchResult?.ok !== true || !Array.isArray(searchResult.dealers))
+        return false;
+    const target = dealerLabel.trim();
+    return searchResult.dealers.some((entry) => getDealerName(entry, unknownDealerLabel) === target);
+}
 export function getDealerAddressLines(dealer) {
     const address = asText(dealer.address);
     const postalCode = asText(dealer.postalCode);
@@ -77,6 +85,8 @@ export function renderReadyState(type, t) {
     switch (type) {
         case 'productPage':
             return null;
+        case 'findDealerDrawer':
+            return null;
         case 'dealerFinder':
             return t.readyDealerFinder;
         case 'warrantyForm':

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@jotul/jotul-widgets",
-  "version": "1.0.5",
+  "version": "1.2.0",
   "type": "module",
   "license": "UNLICENSED",
   "sideEffects": [
-    "**/*.css"
+    "**/*.css",
+    "leaflet.markercluster"
   ],
   "files": [
     "dist",
@@ -20,12 +21,14 @@
   },
   "devDependencies": {
     "@types/leaflet": "^1.9.21",
+    "@types/leaflet.markercluster": "^1.5.6",
     "autoprefixer": "^10.4.21",
     "postcss": "^8.5.3",
     "tailwindcss": "^3.4.17"
   },
   "dependencies": {
     "leaflet": "^1.9.4",
+    "leaflet.markercluster": "^1.5.3",
     "react-leaflet": "^5.0.0"
   },
   "scripts": {