@jotul/jotul-widgets 1.2.6 → 2.1.0

package/dist/analytics/WidgetTrackingContext.d.ts

@@ -0,0 +1,14 @@
+import type { WidgetTracker } from './widgetTracking';
+export declare const WidgetTrackingContext: import("react").Context<{
+    resetSession(): void;
+    trackWidgetOpened(): void;
+    trackDealerSearch(searchTerm: string, resultCount: number): void;
+    trackDealerListView(resultCount: number): void;
+    trackDealerSelect(dealerId: string | undefined, dealerName: string): void;
+    trackDealerPhoneClick(dealerId: string | undefined, dealerName: string): void;
+    trackFormStart(dealerId: string | undefined, dealerName: string): void;
+    trackFormStepComplete(field: "name" | "email" | "phone" | "comment"): void;
+    trackFormError(error: import("./widgetTracking").InquiryValidationError): void;
+    trackSuccessfulSubmit(): void;
+} | null>;
+export declare function useWidgetTracking(): WidgetTracker | null;

package/dist/analytics/WidgetTrackingContext.js

@@ -0,0 +1,5 @@
+import { createContext, useContext } from 'react';
+export const WidgetTrackingContext = createContext(null);
+export function useWidgetTracking() {
+    return useContext(WidgetTrackingContext);
+}

package/dist/analytics/gtm.d.ts

@@ -0,0 +1,7 @@
+declare global {
+    interface Window {
+        dataLayer?: Array<Record<string, unknown>>;
+    }
+}
+export declare function ensureDataLayer(): Array<Record<string, unknown>>;
+export declare function pushDataLayerEvent(event: string, payload: Record<string, unknown>): void;

package/dist/analytics/gtm.js

@@ -0,0 +1,17 @@
+export function ensureDataLayer() {
+    if (typeof window === 'undefined') {
+        return [];
+    }
+    window.dataLayer = window.dataLayer || [];
+    return window.dataLayer;
+}
+export function pushDataLayerEvent(event, payload) {
+    if (typeof window === 'undefined')
+        return;
+    ensureDataLayer();
+    const entry = {
+        event,
+        ...payload,
+    };
+    window.dataLayer.push(entry);
+}

package/dist/analytics/widgetTracking.d.ts

@@ -0,0 +1,54 @@
+export type WidgetFormId = 'findDealerDrawer' | 'productPage';
+export type WidgetStepName = 'dealer_list' | 'form' | 'confirmation';
+export type WidgetTrackingPayload = {
+    contact_reason?: string;
+    dealer_id?: string;
+    dealer_name?: string;
+    error_field?: string;
+    error_type?: string;
+    form_id?: string;
+    language?: string;
+    market?: string;
+    page_type?: string;
+    product_id?: string;
+    product_name?: string;
+    result_count?: number;
+    search_term?: string;
+    step_name?: WidgetStepName;
+    step_number?: number;
+};
+export type WidgetTrackingConfig = {
+    formId: WidgetFormId;
+    language?: string;
+    market?: string;
+    pageType: string;
+    productId?: string;
+    productName?: string;
+};
+export type WidgetTrackingStepState = {
+    inquiryValues: unknown | null;
+    isInquirySubmitted: boolean;
+    selectedDealerId?: string | null;
+    selectedDealerName?: string | null;
+};
+export type InquiryValidationError = {
+    field: 'name' | 'email' | 'phone';
+    type: 'required' | 'invalid_email';
+};
+export declare function getWidgetStep(state: WidgetTrackingStepState): {
+    step_name: WidgetStepName;
+    step_number: number;
+};
+export declare function createWidgetTracker(config: WidgetTrackingConfig, getState: () => WidgetTrackingStepState): {
+    resetSession(): void;
+    trackWidgetOpened(): void;
+    trackDealerSearch(searchTerm: string, resultCount: number): void;
+    trackDealerListView(resultCount: number): void;
+    trackDealerSelect(dealerId: string | undefined, dealerName: string): void;
+    trackDealerPhoneClick(dealerId: string | undefined, dealerName: string): void;
+    trackFormStart(dealerId: string | undefined, dealerName: string): void;
+    trackFormStepComplete(field: "name" | "email" | "phone" | "comment"): void;
+    trackFormError(error: InquiryValidationError): void;
+    trackSuccessfulSubmit(): void;
+};
+export type WidgetTracker = ReturnType<typeof createWidgetTracker>;

package/dist/analytics/widgetTracking.js

@@ -0,0 +1,144 @@
+import { pushDataLayerEvent } from './gtm';
+export function getWidgetStep(state) {
+    if (state.isInquirySubmitted && state.inquiryValues == null) {
+        return { step_name: 'confirmation', step_number: 3 };
+    }
+    if (state.inquiryValues != null) {
+        return { step_name: 'form', step_number: 2 };
+    }
+    return { step_name: 'dealer_list', step_number: 1 };
+}
+function omitUndefined(payload) {
+    const out = {};
+    for (const [key, value] of Object.entries(payload)) {
+        if (value !== undefined && value !== null && value !== '') {
+            out[key] = value;
+        }
+    }
+    return out;
+}
+export function createWidgetTracker(config, getState) {
+    const basePayload = (overrides) => {
+        const state = getState();
+        const step = getWidgetStep(state);
+        return {
+            form_id: config.formId,
+            language: config.language,
+            market: config.market,
+            page_type: config.pageType,
+            product_id: config.productId,
+            product_name: config.productName,
+            dealer_id: state.selectedDealerId ?? undefined,
+            dealer_name: state.selectedDealerName ?? undefined,
+            step_name: step.step_name,
+            step_number: step.step_number,
+            ...overrides,
+        };
+    };
+    const push = (event, overrides) => {
+        pushDataLayerEvent(event, omitUndefined(basePayload(overrides)));
+    };
+    let lastDealerSearchKey = null;
+    let dealerListViewTracked = false;
+    return {
+        resetSession() {
+            lastDealerSearchKey = null;
+            dealerListViewTracked = false;
+        },
+        trackWidgetOpened() {
+            push('widget_opened', {
+                step_name: 'dealer_list',
+                step_number: 1,
+            });
+        },
+        trackDealerSearch(searchTerm, resultCount) {
+            const normalizedTerm = searchTerm.trim();
+            const dedupeKey = `${normalizedTerm}|${resultCount}`;
+            if (lastDealerSearchKey === dedupeKey)
+                return;
+            lastDealerSearchKey = dedupeKey;
+            push('dealer_search', {
+                search_term: normalizedTerm || undefined,
+                result_count: resultCount,
+                step_name: 'dealer_list',
+                step_number: 1,
+            });
+        },
+        trackDealerListView(resultCount) {
+            if (dealerListViewTracked)
+                return;
+            dealerListViewTracked = true;
+            push('dealer_list_view', {
+                result_count: resultCount,
+                step_name: 'dealer_list',
+                step_number: 1,
+            });
+        },
+        trackDealerSelect(dealerId, dealerName) {
+            push('dealer_select', {
+                dealer_id: dealerId,
+                dealer_name: dealerName,
+                step_name: 'dealer_list',
+                step_number: 1,
+            });
+        },
+        trackDealerPhoneClick(dealerId, dealerName) {
+            push('dealer_phone_click', {
+                dealer_id: dealerId,
+                dealer_name: dealerName,
+                step_name: 'dealer_list',
+                step_number: 1,
+            });
+        },
+        trackFormStart(dealerId, dealerName) {
+            push('form_start', {
+                dealer_id: dealerId,
+                dealer_name: dealerName,
+                step_name: 'form',
+                step_number: 2,
+            });
+            if (config.formId === 'findDealerDrawer') {
+                push('started_dealer_request', {
+                    dealer_id: dealerId,
+                    dealer_name: dealerName,
+                    step_name: 'form',
+                    step_number: 2,
+                });
+            }
+            else {
+                push('started_product_inquiry', {
+                    dealer_id: dealerId,
+                    dealer_name: dealerName,
+                    step_name: 'form',
+                    step_number: 2,
+                });
+            }
+        },
+        trackFormStepComplete(field) {
+            pushDataLayerEvent('form_step_complete', {
+                ...omitUndefined(basePayload({
+                    step_name: 'form',
+                    step_number: 2,
+                })),
+                field,
+            });
+        },
+        trackFormError(error) {
+            push('form_error', {
+                error_field: error.field,
+                error_type: error.type,
+                step_name: 'form',
+                step_number: 2,
+            });
+        },
+        trackSuccessfulSubmit() {
+            const contactReason = config.formId === 'findDealerDrawer' ? 'dealer_request' : 'product_inquiry';
+            const eventName = config.formId === 'findDealerDrawer' ? 'dealer_request' : 'product_inquiry';
+            push(eventName, {
+                contact_reason: contactReason,
+                step_name: 'confirmation',
+                step_number: 3,
+            });
+        },
+    };
+}

package/dist/api.d.ts

@@ -1,7 +1,33 @@
-import type { CheckWidgetAuthorizationOptions, DealerSearchResponse, LocationAutocompleteResponse, WidgetAuthClientResponse } from './types';
+import type { CheckWidgetAuthorizationOptions, DealerByIdResponse, DealerSearchResponse, InquirySubmitResponse, LocationAutocompleteResponse, WarrantySubmitResponse, WidgetAuthClientResponse } from './types';
+import type { InquirySubmitPayload } from './utils/inquirySubmit';
 /** Client-side default when JSON parse fails (English; localized in UI). */
 export declare const GENERIC_WIDGET_ERROR = "Dealer finder is currently unavailable. Please try again later.";
 export declare function checkWidgetAuthorization(options?: CheckWidgetAuthorizationOptions): Promise<WidgetAuthClientResponse>;
 export declare function searchDealersByPostalCode(postalCode: string, options?: CheckWidgetAuthorizationOptions, scope?: 'list' | 'map'): Promise<DealerSearchResponse>;
 export declare function searchDealersByCoordinates(latitude: number, longitude: number, options?: CheckWidgetAuthorizationOptions, scope?: 'list' | 'map'): Promise<DealerSearchResponse>;
+export declare function fetchDealerById(dealerId: string, options?: CheckWidgetAuthorizationOptions): Promise<DealerByIdResponse>;
 export declare function searchLocationSuggestions(query: string, options?: CheckWidgetAuthorizationOptions): Promise<LocationAutocompleteResponse>;
+export type WarrantySubmitPayload = {
+    name: string;
+    address: string;
+    city: string;
+    zipcode: string;
+    telephone: string;
+    email: string;
+    product: string;
+    dealer?: string;
+    purchaseDate?: string;
+    selfInstalled?: boolean;
+    installerName?: string;
+    source?: 'widget';
+    turnstileToken?: string;
+};
+export type { InquirySubmitPayload } from './utils/inquirySubmit';
+export declare function submitInquiry(body: InquirySubmitPayload, options?: {
+    endpoint?: string;
+    fetcher?: typeof fetch;
+}): Promise<InquirySubmitResponse>;
+export declare function submitWarranty(body: WarrantySubmitPayload, options?: {
+    endpoint?: string;
+    fetcher?: typeof fetch;
+}): Promise<WarrantySubmitResponse>;

package/dist/api.js

@@ -113,6 +113,32 @@ export async function searchDealersByCoordinates(latitude, longitude, options, s
         return { ok: false, error: GENERIC_WIDGET_ERROR };
     }
 }
+export async function fetchDealerById(dealerId, options) {
+    const endpoint = options?.endpoint ?? '/api/jotul/widget';
+    const fetcher = options?.fetcher ?? fetch;
+    const params = new URLSearchParams({
+        type: 'dealer',
+        dealerId: dealerId.trim(),
+    });
+    appendLocaleAndMarket(params, options);
+    let response;
+    try {
+        response = await fetcher(`${endpoint}?${params.toString()}`, {
+            method: 'GET',
+            headers: { Accept: 'application/json' },
+            cache: 'no-store',
+        });
+    }
+    catch {
+        return { ok: false, error: GENERIC_WIDGET_ERROR };
+    }
+    try {
+        return (await response.json());
+    }
+    catch {
+        return { ok: false, error: GENERIC_WIDGET_ERROR };
+    }
+}
 export async function searchLocationSuggestions(query, options) {
     const endpoint = options?.endpoint ?? '/api/jotul/widget';
     const fetcher = options?.fetcher ?? fetch;
@@ -142,3 +168,51 @@ export async function searchLocationSuggestions(query, options) {
         return { ok: false, error: GENERIC_WIDGET_ERROR };
     }
 }
+export async function submitInquiry(body, options) {
+    const endpoint = options?.endpoint ?? '/api/jotul/submission';
+    const fetcher = options?.fetcher ?? fetch;
+    let response;
+    try {
+        response = await fetcher(endpoint, {
+            method: 'POST',
+            headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(body),
+        });
+    }
+    catch {
+        return { ok: false, error: GENERIC_WIDGET_ERROR };
+    }
+    try {
+        return (await response.json());
+    }
+    catch {
+        return { ok: false, error: GENERIC_WIDGET_ERROR };
+    }
+}
+export async function submitWarranty(body, options) {
+    const endpoint = options?.endpoint ?? '/api/jotul/warranty';
+    const fetcher = options?.fetcher ?? fetch;
+    let response;
+    try {
+        response = await fetcher(endpoint, {
+            method: 'POST',
+            headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(body),
+        });
+    }
+    catch {
+        return { ok: false, error: GENERIC_WIDGET_ERROR };
+    }
+    try {
+        return (await response.json());
+    }
+    catch {
+        return { ok: false, error: GENERIC_WIDGET_ERROR };
+    }
+}

package/dist/components/FindDealerDrawerWidget.d.ts

@@ -1,7 +1,7 @@
 import 'leaflet/dist/leaflet.css';
 import 'leaflet.markercluster/dist/MarkerCluster.css';
 import type { WidgetStrings } from '../i18n/widgetStrings';
-import type { DealerSearchResponse, InquiryFormValues, JotulWidgetBorderStyling, JotulWidgetButtonStyling, JotulWidgetScope, LocationSuggestion } from '../types';
+import type { DealerRecord, DealerSearchResponse, InquiryFormValues, JotulWidgetBorderStyling, JotulWidgetButtonStyling, JotulWidgetScope, LocationSuggestion } from '../types';
 export type FindDealerDrawerWidgetProps = {
     t: WidgetStrings;
     buttonStyling?: JotulWidgetButtonStyling;
@@ -14,6 +14,9 @@ export type FindDealerDrawerWidgetProps = {
     mapSearchResult?: DealerSearchResponse | null;
     inquiryValues: InquiryFormValues | null;
     inquiryError: string | null;
+    isSubmittingInquiry?: boolean;
+    turnstileSiteKey?: string;
+    turnstileResetKey?: number;
     isInquirySubmitted: boolean;
     selectedDealerName: string | null;
     isManualSearchEnabled: boolean;
@@ -26,9 +29,9 @@ export type FindDealerDrawerWidgetProps = {
     onSuggestionSelect: (suggestion: LocationSuggestion) => void;
     onDismissSuggestions: () => void;
     onInquiryClose: () => void;
-    onInquirySubmit: () => void;
+    onInquirySubmit: (turnstileToken: string | null) => void;
     onInquiryFieldChange: (key: keyof InquiryFormValues, value: string) => void;
-    onStartInquiry: (dealerName: string) => void;
+    onStartInquiry: (dealer: DealerRecord) => void;
     onMapDealerSelect?: (dealer: {
         dealerName: string;
         latitude: number;
@@ -36,4 +39,4 @@ export type FindDealerDrawerWidgetProps = {
     }) => void;
     onClose: () => void;
 };
-export declare function FindDealerDrawerWidget({ t, buttonStyling, borderStyling, markets, scope, isSearching, locationError, searchResult, mapSearchResult, inquiryValues, inquiryError, isInquirySubmitted, selectedDealerName, isManualSearchEnabled, query, suggestions, suggestionsOpen, isSuggestionsLoading, onQueryChange, onQuerySubmit, onSuggestionSelect, onDismissSuggestions, onInquiryClose, onInquirySubmit, onInquiryFieldChange, onStartInquiry, onMapDealerSelect, onClose, }: FindDealerDrawerWidgetProps): import("react/jsx-runtime").JSX.Element;
+export declare function FindDealerDrawerWidget({ t, buttonStyling, borderStyling, markets, scope, isSearching, locationError, searchResult, mapSearchResult, inquiryValues, inquiryError, isSubmittingInquiry, turnstileSiteKey, turnstileResetKey, isInquirySubmitted, selectedDealerName, isManualSearchEnabled, query, suggestions, suggestionsOpen, isSuggestionsLoading, onQueryChange, onQuerySubmit, onSuggestionSelect, onDismissSuggestions, onInquiryClose, onInquirySubmit, onInquiryFieldChange, onStartInquiry, onMapDealerSelect, onClose, }: FindDealerDrawerWidgetProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/FindDealerDrawerWidget.js

@@ -18,7 +18,7 @@ import { MARKER_CLUSTER_LINK_KM, MARKER_CLUSTER_MIN_GROUP, partitionDealersForMa
 import { loadLeafletMarkerCluster } from '../utils/loadLeafletMarkerCluster';
 import { markerClusterCountIconHtml } from '../utils/markerClusterIconHtml';
 import { JOTUL_BRAND_PRIMARY_HEX } from '../constants';
-import { isExclusiveDealer } from '../utils';
+import { isExclusiveDealer, getDealerName } from '../utils';
 const OSM_MINIMAL_TILE_URL = 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png';
 const EMPTY_DEALERS = [];
 function mapPointsBoundsKey(points, defaultCenter) {
@@ -43,17 +43,18 @@ function readNumber(value) {
     }
     return null;
 }
-function getDealerName(dealer) {
-    const raw = dealer.name;
-    return typeof raw === 'string' && raw.trim() ? raw.trim() : 'Unknown dealer';
-}
-function getDealerMapPoint(dealer) {
+function getDealerMapPoint(dealer, unknownDealerLabel) {
     const latitude = readNumber(dealer.latitude);
     const longitude = readNumber(dealer.longitude);
     if (latitude == null || longitude == null)
         return null;
     const isExclusive = isExclusiveDealer(dealer);
-    return { dealerName: getDealerName(dealer), latitude, longitude, isExclusive };
+    return {
+        dealerName: getDealerName(dealer, unknownDealerLabel),
+        latitude,
+        longitude,
+        isExclusive,
+    };
 }
 function toAssetSrc(value) {
     return typeof value === 'string' ? value : value.src;
@@ -224,7 +225,7 @@ function ClusteredMapMarkers({ points, pointsBoundsKey, clusterThemeKey, cluster
     }, [map, pointsBoundsKey, clusterThemeKey]);
     return null;
 }
-export function FindDealerDrawerWidget({ t, buttonStyling, borderStyling, markets, scope, isSearching, locationError, searchResult, mapSearchResult, inquiryValues, inquiryError, isInquirySubmitted, selectedDealerName, isManualSearchEnabled, query, suggestions, suggestionsOpen, isSuggestionsLoading, onQueryChange, onQuerySubmit, onSuggestionSelect, onDismissSuggestions, onInquiryClose, onInquirySubmit, onInquiryFieldChange, onStartInquiry, onMapDealerSelect, onClose, }) {
+export function FindDealerDrawerWidget({ t, buttonStyling, borderStyling, markets, scope, isSearching, locationError, searchResult, mapSearchResult, inquiryValues, inquiryError, isSubmittingInquiry = false, turnstileSiteKey, turnstileResetKey = 0, isInquirySubmitted, selectedDealerName, isManualSearchEnabled, query, suggestions, suggestionsOpen, isSuggestionsLoading, onQueryChange, onQuerySubmit, onSuggestionSelect, onDismissSuggestions, onInquiryClose, onInquirySubmit, onInquiryFieldChange, onStartInquiry, onMapDealerSelect, onClose, }) {
     const rawDealers = (searchResult?.dealers ?? EMPTY_DEALERS);
     const dealers = useMemo(() => (scope === 'ildstedet' ? rawDealers.filter(isExclusiveDealer) : rawDealers), [rawDealers, scope]);
     const rawMapDealers = (mapSearchResult?.dealers ?? rawDealers);
@@ -246,8 +247,8 @@ export function FindDealerDrawerWidget({ t, buttonStyling, borderStyling, market
         return () => media.removeEventListener('change', update);
     }, []);
     useEffect(() => {
-        setActiveDealerName(dealers.length > 0 ? getDealerName(dealers[0]) : null);
-    }, [dealers]);
+        setActiveDealerName(dealers.length > 0 ? getDealerName(dealers[0], t.unknownDealer) : null);
+    }, [dealers, t.unknownDealer]);
     useEffect(() => {
         setVisibleDealerCount(10);
     }, [dealers]);
@@ -255,13 +256,15 @@ export function FindDealerDrawerWidget({ t, buttonStyling, borderStyling, market
     useEffect(() => {
         if (activeDealerName == null)
             return;
-        const activeIndex = dealers.findIndex((dealer) => getDealerName(dealer) === activeDealerName);
+        const activeIndex = dealers.findIndex((dealer) => getDealerName(dealer, t.unknownDealer) === 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]);
+    const mapPoints = useMemo(() => mapDealers
+        .map((dealer) => getDealerMapPoint(dealer, t.unknownDealer))
+        .filter((v) => v != null), [mapDealers, t.unknownDealer]);
     useEffect(() => {
         setClusterUnavailable(false);
     }, [mapPoints]);
@@ -289,7 +292,7 @@ export function FindDealerDrawerWidget({ t, buttonStyling, borderStyling, market
     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 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: t.showMore })) : 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, markets: markets, activeDealerName: activeDealerName, onUnavailable: () => setClusterUnavailable(true), onSelectDealer: (dealer) => {
                     setActiveDealerName(dealer.dealerName);
                     onMapDealerSelect?.(dealer);
@@ -307,7 +310,7 @@ export function FindDealerDrawerWidget({ t, buttonStyling, borderStyling, market
                             },
                         }, 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_2s_ease-in-out_infinite] 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, markets: markets, onStartInquiry: onStartInquiry, onSelectDealer: setActiveDealerName }), showMoreButton] }))] })) }));
+    const leftContent = (_jsx(_Fragment, { children: showInquirySuccessScreen ? (successPanel) : inquiryFormOpen ? (_jsx(InquiryForm, { t: t, buttonStyling: buttonStyling, inquiryValues: inquiryValues, inquiryError: inquiryError, isSubmitting: isSubmittingInquiry, turnstileSiteKey: turnstileSiteKey, turnstileResetKey: turnstileResetKey, 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_2s_ease-in-out_infinite] 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, markets: markets, 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 })] }))] }));
     }

package/dist/components/InquiryField.d.ts

@@ -1,3 +1,4 @@
+import type { InquiryFormValues } from '../types';
 type InquiryFieldProps = {
     label: string;
     value: string;
@@ -5,6 +6,7 @@ type InquiryFieldProps = {
     type?: 'text' | 'email' | 'tel';
     readOnly?: boolean;
     multiline?: boolean;
+    fieldName?: keyof InquiryFormValues;
 };
-export declare function InquiryField({ label, value, onChange, type, readOnly, multiline, }: InquiryFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function InquiryField({ label, value, onChange, type, readOnly, multiline, fieldName, }: InquiryFieldProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/InquiryField.js

@@ -1,7 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { R10 } from '../constants';
-export function InquiryField({ label, value, onChange, type = 'text', readOnly = false, multiline = false, }) {
+import { useRef } from 'react';
+import { useWidgetTracking } from '../analytics/WidgetTrackingContext';
+export function InquiryField({ label, value, onChange, type = 'text', readOnly = false, multiline = false, fieldName, }) {
+    const tracking = useWidgetTracking();
+    const completedRef = useRef(false);
     const sharedClassName = `jwi-w-full ${R10} jwi-border jwi-border-[#d8d2c7] jwi-bg-white jwi-px-4 jwi-py-3 jwi-text-sm jwi-leading-[1.4] jwi-text-[#111111] jwi-outline-none placeholder:jwi-text-[#767676] focus:jwi-border-[#111111]`;
     const readOnlyClassName = readOnly ? ' jwi-bg-[#f7f5ef]' : '';
-    return (_jsxs("label", { className: "jwi-flex jwi-flex-col jwi-gap-1.5", children: [_jsx("span", { className: "jwi-text-sm jwi-font-medium jwi-text-[#111111]", children: label }), multiline ? (_jsx("textarea", { value: value, onChange: (event) => onChange(event.target.value), readOnly: readOnly, rows: 4, className: `${sharedClassName}${readOnlyClassName} jwi-resize-y` })) : (_jsx("input", { type: type, value: value, onChange: (event) => onChange(event.target.value), readOnly: readOnly, className: `${sharedClassName}${readOnlyClassName}` }))] }));
+    const handleBlur = () => {
+        if (readOnly || !fieldName || completedRef.current)
+            return;
+        if (!value.trim())
+            return;
+        completedRef.current = true;
+        if (fieldName === 'name' ||
+            fieldName === 'email' ||
+            fieldName === 'phone' ||
+            fieldName === 'comment') {
+            tracking?.trackFormStepComplete(fieldName);
+        }
+    };
+    return (_jsxs("label", { className: "jwi-flex jwi-flex-col jwi-gap-1.5", children: [_jsx("span", { className: "jwi-text-sm jwi-font-medium jwi-text-[#111111]", children: label }), multiline ? (_jsx("textarea", { value: value, onChange: (event) => onChange(event.target.value), onBlur: handleBlur, readOnly: readOnly, rows: 4, className: `${sharedClassName}${readOnlyClassName} jwi-resize-y` })) : (_jsx("input", { type: type, value: value, onChange: (event) => onChange(event.target.value), onBlur: handleBlur, readOnly: readOnly, className: `${sharedClassName}${readOnlyClassName}` }))] }));
 }

package/dist/components/InquirySelectField.d.ts

@@ -0,0 +1,13 @@
+import type { InquiryRequestCategory } from '../types';
+type InquirySelectOption = {
+    value: InquiryRequestCategory;
+    label: string;
+};
+type InquirySelectFieldProps = {
+    label: string;
+    value: InquiryRequestCategory;
+    options: InquirySelectOption[];
+    onChange: (value: InquiryRequestCategory) => void;
+};
+export declare function InquirySelectField({ label, value, options, onChange, }: InquirySelectFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/InquirySelectField.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { R10 } from '../constants';
+export function InquirySelectField({ label, value, options, onChange, }) {
+    return (_jsxs("label", { className: "jwi-flex jwi-flex-col jwi-gap-1.5", children: [_jsx("span", { className: "jwi-text-sm jwi-font-medium jwi-text-[#111111]", children: label }), _jsx("select", { value: value, onChange: (event) => onChange(event.target.value), className: `jwi-w-full ${R10} jwi-border jwi-border-[#d8d2c7] jwi-bg-white jwi-px-4 jwi-py-3 jwi-text-sm jwi-leading-[1.4] jwi-text-[#111111] jwi-outline-none focus:jwi-border-[#111111]`, children: options.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value))) })] }));
+}

package/dist/components/ProductPageWidget.d.ts

@@ -1,7 +1,7 @@
 import 'leaflet/dist/leaflet.css';
 import 'leaflet.markercluster/dist/MarkerCluster.css';
 import type { WidgetStrings } from '../i18n/widgetStrings';
-import type { DealerSearchResponse, InquiryFormValues, JotulWidgetBorderStyling, JotulWidgetButtonStyling, JotulWidgetScope, LocationSuggestion } from '../types';
+import type { DealerRecord, DealerSearchResponse, InquiryFormValues, JotulWidgetBorderStyling, JotulWidgetButtonStyling, JotulWidgetScope, LocationSuggestion } from '../types';
 export type ProductPageWidgetProps = {
     t: WidgetStrings;
     buttonStyling?: JotulWidgetButtonStyling;
@@ -14,6 +14,9 @@ export type ProductPageWidgetProps = {
     mapSearchResult?: DealerSearchResponse | null;
     inquiryValues: InquiryFormValues | null;
     inquiryError: string | null;
+    isSubmittingInquiry?: boolean;
+    turnstileSiteKey?: string;
+    turnstileResetKey?: number;
     isInquirySubmitted: boolean;
     selectedDealerName: string | null;
     isManualSearchEnabled: boolean;
@@ -26,9 +29,9 @@ export type ProductPageWidgetProps = {
     onSuggestionSelect: (suggestion: LocationSuggestion) => void;
     onDismissSuggestions: () => void;
     onInquiryClose: () => void;
-    onInquirySubmit: () => void;
+    onInquirySubmit: (turnstileToken: string | null) => void;
     onInquiryFieldChange: (key: keyof InquiryFormValues, value: string) => void;
-    onStartInquiry: (dealerName: string) => void;
+    onStartInquiry: (dealer: DealerRecord) => void;
     onMapDealerSelect?: (dealer: {
         dealerName: string;
         latitude: number;
@@ -36,4 +39,4 @@ export type ProductPageWidgetProps = {
     }) => void;
     onClosePopup?: () => void;
 };
-export declare function ProductPageWidget({ t, buttonStyling, borderStyling, markets, scope, 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 declare function ProductPageWidget({ t, buttonStyling, borderStyling, markets, scope, isSearching, locationError, searchResult, mapSearchResult, inquiryValues, inquiryError, isSubmittingInquiry, turnstileSiteKey, turnstileResetKey, isInquirySubmitted, selectedDealerName, isManualSearchEnabled, query, suggestions, suggestionsOpen, isSuggestionsLoading, onQueryChange, onQuerySubmit, onSuggestionSelect, onDismissSuggestions, onInquiryClose, onInquirySubmit, onInquiryFieldChange, onStartInquiry, onMapDealerSelect, onClosePopup, }: ProductPageWidgetProps): import("react/jsx-runtime").JSX.Element;