@jotul/jotul-widgets 1.2.5 → 2.0.0

package/dist/JotulWidget.js

@@ -6,8 +6,16 @@ import { createPortal } from 'react-dom';
 import { FinderSearchRowSkeleton } from './components/FinderSearchRowSkeleton';
 import { DealerCardSkeleton } from './components/DealerCardSkeleton';
 import { DEFAULT_WIDGET_LOCALE_TAG, resolveWidgetUiLocale, WIDGET_STRINGS, } from './i18n/widgetStrings';
-import { checkWidgetAuthorization, searchLocationSuggestions, searchDealersByCoordinates, searchDealersByPostalCode, } from './api';
-import { createInquiryFormValues, getSafeWidgetErrorMessage, isDealerInSearchResult, isValidEmail, isWidgetType, renderReadyState, } from './utils';
+import { checkWidgetAuthorization, fetchDealerById, searchLocationSuggestions, searchDealersByCoordinates, searchDealersByPostalCode, submitInquiry, } from './api';
+import { createInquiryFormValues, getDealerId, getDealerName, getSafeWidgetErrorMessage, isDealerInSearchResult, normalizeWidgetFilterList, validateInquiryFormValues, isWidgetType, renderReadyState, } from './utils';
+import { inquiryCategoryLabel } from './utils/inquiryCategories';
+import { inquiryFormValuesToApiPayload } from './utils/inquirySubmit';
+import { useTurnstileSiteKey } from './hooks/useTurnstileSiteKey';
+import { readDealerIdFromUrlSearch } from './utils/urlDealerId';
+import { WidgetTrackingContext } from './analytics/WidgetTrackingContext';
+import { createWidgetTracker, } from './analytics/widgetTracking';
+import { ensureDataLayer } from './analytics/gtm';
+import { WarrantyFormWidget } from './components/WarrantyFormWidget';
 function renderButton(buttonElement, onClick) {
     if (isValidElement(buttonElement)) {
         return cloneElement(buttonElement, { onClick });
@@ -19,6 +27,23 @@ function renderButton(buttonElement, onClick) {
             }
         }, style: { cursor: 'pointer', display: 'inline-block' }, children: buttonElement }));
 }
+function renderLoadingButton(buttonElement, loadingText) {
+    if (isValidElement(buttonElement)) {
+        return cloneElement(buttonElement, {
+            disabled: true,
+            'aria-busy': true,
+            children: loadingText,
+        });
+    }
+    return (_jsx("span", { role: "button", "aria-busy": "true", style: { cursor: 'wait', display: 'inline-block' }, children: loadingText }));
+}
+function resolveButtonLoading(button, buttonLoading, loadingText) {
+    if (buttonLoading != null)
+        return buttonLoading;
+    if (button == null)
+        return null;
+    return renderLoadingButton(button, loadingText);
+}
 export { DEFAULT_WIDGET_LOCALE_TAG, normalizeWidgetLocale, resolveWidgetUiLocale, } from './i18n/widgetStrings';
 export { checkWidgetAuthorization, searchLocationSuggestions, searchDealersByCoordinates, searchDealersByPostalCode, };
 const GEO_PERMISSION_DENIED = 1;
@@ -36,20 +61,16 @@ const MARKET_FALLBACK_CENTER = {
     FI: [60.1699, 24.9384],
     DE: [52.52, 13.405],
 };
-export function JotulWidget({ type, endpoint = '/api/jotul/widget', className, productName, locale: localeProp, markets: marketsProp, scope, brands, campaignSlug, styling, button, buttonLoading, widgetRef, }) {
-    const apiMarkets = useMemo(() => {
-        if (marketsProp == null)
-            return undefined;
-        if (!Array.isArray(marketsProp))
-            return undefined;
-        const valid = marketsProp
-            .map((m) => m?.trim().toUpperCase())
-            .filter((m) => m.length === 2 && /^[A-Z]{2}$/.test(m));
-        return valid.length > 0 ? valid : undefined;
-    }, [marketsProp]);
+export function JotulWidget({ type, endpoint = '/api/jotul/widget', className, productName, locale: localeProp, market: marketProp, markets: marketsProp, scope, brands, campaignSlug, styling, button, buttonLoading, widgetRef, pageType: pageTypeProp, productId, warrantyEndpoint, submissionEndpoint = '/api/jotul/submission', turnstileSiteKey: turnstileSiteKeyProp, turnstileConfigEndpoint, }) {
+    const apiMarkets = useMemo(() => normalizeWidgetFilterList(marketsProp, (market) => {
+        const upper = market.toUpperCase();
+        return /^[A-Z]{2}$/.test(upper) ? upper : '';
+    }), [marketsProp]);
+    const apiBrands = useMemo(() => normalizeWidgetFilterList(brands), [brands]);
     const firstMarket = apiMarkets?.[0];
     const resolvedUiLocale = useMemo(() => resolveWidgetUiLocale(localeProp, firstMarket), [localeProp, firstMarket]);
     const t = WIDGET_STRINGS[resolvedUiLocale];
+    const resolvedTurnstileSiteKey = useTurnstileSiteKey(turnstileSiteKeyProp, turnstileConfigEndpoint);
     const apiLocaleTag = useMemo(() => (localeProp?.trim() ? localeProp.trim() : DEFAULT_WIDGET_LOCALE_TAG), [localeProp]);
     const [auth, setAuth] = useState(null);
     const [isLoading, setIsLoading] = useState(false);
@@ -65,23 +86,92 @@ export function JotulWidget({ type, endpoint = '/api/jotul/widget', className, p
     const [isOpen, setIsOpen] = useState(false);
     const [shouldAutoLocateAfterAuth, setShouldAutoLocateAfterAuth] = useState(false);
     const [selectedDealerName, setSelectedDealerName] = useState(null);
+    const [selectedDealerId, setSelectedDealerId] = useState(null);
     const [inquiryValues, setInquiryValues] = useState(null);
     const [inquiryError, setInquiryError] = useState(null);
+    const [isSubmittingInquiry, setIsSubmittingInquiry] = useState(false);
+    const [turnstileResetKey, setTurnstileResetKey] = useState(0);
     const [isInquirySubmitted, setIsInquirySubmitted] = useState(false);
-    const [mounted, setMounted] = useState(false);
     const [FindDealerDrawerWidgetComp, setFindDealerDrawerWidgetComp] = useState(null);
     const [ProductPageWidgetComp, setProductPageWidgetComp] = useState(null);
     const [isComponentLoading, setIsComponentLoading] = useState(false);
+    const [mounted, setMounted] = useState(false);
+    const [urlDealerId, setUrlDealerId] = useState(null);
+    const [isLoadingUrlDealer, setIsLoadingUrlDealer] = useState(false);
     const autocompleteCacheRef = useRef(new Map());
+    const locationQueryRef = useRef('');
+    const pendingDealerSearchTermRef = useRef(null);
+    const urlDealerHandledRef = useRef(false);
+    const trackingStateRef = useRef({
+        inquiryValues: null,
+        isInquirySubmitted: false,
+        selectedDealerId: null,
+        selectedDealerName: null,
+    });
     const productPageCampaignSlug = type === 'productPage' ? campaignSlug : undefined;
+    const widgetFormId = type === 'findDealerDrawer'
+        ? 'findDealerDrawer'
+        : type === 'productPage'
+            ? 'productPage'
+            : null;
+    const resolvedPageType = pageTypeProp?.trim() ||
+        (widgetFormId === 'findDealerDrawer' ? 'page' : 'product_page');
+    const tracker = useMemo(() => {
+        if (widgetFormId == null)
+            return null;
+        return createWidgetTracker({
+            formId: widgetFormId,
+            language: apiLocaleTag,
+            market: firstMarket,
+            pageType: resolvedPageType,
+            productId: widgetFormId === 'productPage' ? productId?.trim() || undefined : undefined,
+            productName: widgetFormId === 'productPage' ? productName?.trim() || undefined : undefined,
+        }, () => trackingStateRef.current);
+    }, [
+        widgetFormId,
+        apiLocaleTag,
+        firstMarket,
+        resolvedPageType,
+        productId,
+        productName,
+    ]);
+    trackingStateRef.current = {
+        inquiryValues,
+        isInquirySubmitted,
+        selectedDealerId,
+        selectedDealerName,
+    };
+    useEffect(() => {
+        locationQueryRef.current = locationQuery;
+    }, [locationQuery]);
+    useEffect(() => {
+        if (!isOpen || tracker == null)
+            return;
+        ensureDataLayer();
+    }, [isOpen, tracker]);
+    useEffect(() => {
+        if (!isOpen || tracker == null || searchResult == null || isSearching)
+            return;
+        const resultCount = searchResult.ok === true
+            ? (searchResult.total ?? searchResult.dealers?.length ?? 0)
+            : 0;
+        const pendingSearchTerm = pendingDealerSearchTermRef.current;
+        if (pendingSearchTerm != null) {
+            tracker.trackDealerSearch(pendingSearchTerm, resultCount);
+            pendingDealerSearchTermRef.current = null;
+        }
+        if (searchResult.ok === true && resultCount > 0) {
+            tracker.trackDealerListView(resultCount);
+        }
+    }, [isOpen, tracker, searchResult, isSearching]);
     const dealerSearchOptions = useMemo(() => ({
         endpoint,
         locale: apiLocaleTag,
         markets: apiMarkets,
         scope,
-        brands,
+        brands: apiBrands,
         campaignSlug: productPageCampaignSlug,
-    }), [apiLocaleTag, apiMarkets, brands, endpoint, productPageCampaignSlug, scope]);
+    }), [apiLocaleTag, apiMarkets, apiBrands, endpoint, productPageCampaignSlug, scope]);
     const runDealerSearchByCoordinates = useCallback(async (latitude, longitude) => {
         setLocationError(null);
         setIsSearching(true);
@@ -94,7 +184,11 @@ export function JotulWidget({ type, endpoint = '/api/jotul/widget', className, p
         finally {
             setIsSearching(false);
         }
-    }, [dealerSearchOptions, scope]);
+    }, [dealerSearchOptions]);
+    const runUserDealerSearchByCoordinates = useCallback(async (latitude, longitude, searchTerm) => {
+        pendingDealerSearchTermRef.current = searchTerm;
+        await runDealerSearchByCoordinates(latitude, longitude);
+    }, [runDealerSearchByCoordinates]);
     const runFallbackDealerSearch = useCallback(() => {
         const fallbackCenter = (firstMarket != null ? MARKET_FALLBACK_CENTER[firstMarket] : undefined) ??
             MARKET_FALLBACK_CENTER.NO;
@@ -166,7 +260,7 @@ export function JotulWidget({ type, endpoint = '/api/jotul/widget', className, p
         };
     }, [apiLocaleTag, firstMarket, productPageCampaignSlug, dealerSearchOptions, locationQuery]);
     useEffect(() => {
-        if ((type === 'productPage' || type === 'findDealerDrawer') && !isOpen)
+        if ((type === 'productPage' || type === 'findDealerDrawer') && !isOpen && !urlDealerId)
             return;
         if (auth != null)
             return;
@@ -183,7 +277,7 @@ export function JotulWidget({ type, endpoint = '/api/jotul/widget', className, p
         return () => {
             cancelled = true;
         };
-    }, [auth, endpoint, isOpen, type]);
+    }, [auth, endpoint, isOpen, type, urlDealerId]);
     useEffect(() => {
         if (!shouldAutoLocateAfterAuth)
             return;
@@ -209,6 +303,21 @@ export function JotulWidget({ type, endpoint = '/api/jotul/widget', className, p
         return 'typeReady';
     }, [type]);
     const widgetType = isWidgetType(type) ? type : undefined;
+    useEffect(() => {
+        if (widgetType !== 'findDealerDrawer' || typeof window === 'undefined')
+            return;
+        const syncFromUrl = () => {
+            setUrlDealerId(readDealerIdFromUrlSearch(window.location.search));
+        };
+        syncFromUrl();
+        window.addEventListener('popstate', syncFromUrl);
+        return () => {
+            window.removeEventListener('popstate', syncFromUrl);
+        };
+    }, [widgetType]);
+    useEffect(() => {
+        urlDealerHandledRef.current = false;
+    }, [urlDealerId]);
     useEffect(() => {
         if (!isOpen)
             return;
@@ -243,6 +352,11 @@ export function JotulWidget({ type, endpoint = '/api/jotul/widget', className, p
         setLocationQuery('');
         setLocationSuggestions([]);
         setIsSuggestionListOpen(false);
+        setSelectedDealerId(null);
+        pendingDealerSearchTermRef.current = null;
+        tracker?.resetSession();
+        ensureDataLayer();
+        tracker?.trackWidgetOpened();
         setIsOpen(true);
         if (auth?.ok && auth.authorized === true && !isLoading) {
             setShouldAutoLocateAfterAuth(false);
@@ -251,34 +365,160 @@ export function JotulWidget({ type, endpoint = '/api/jotul/widget', className, p
         else {
             setShouldAutoLocateAfterAuth(true);
         }
-    }, [auth, isLoading, runLocationSearch]);
+    }, [auth, isLoading, runLocationSearch, tracker]);
     const closeDealerWidget = useCallback(() => {
         setIsOpen(false);
         setLocationSuggestions([]);
         setIsSuggestionListOpen(false);
         setIsSearchingSuggestions(false);
         setMapSearchResult(null);
-    }, []);
+        setSelectedDealerId(null);
+        pendingDealerSearchTermRef.current = null;
+        tracker?.resetSession();
+    }, [tracker]);
     useImperativeHandle(widgetRef, () => ({
         open: openProductPageWidget,
         close: closeDealerWidget,
         isOpen,
     }), [openProductPageWidget, closeDealerWidget, isOpen]);
+    const handleInquiryClose = useCallback(() => {
+        setSelectedDealerName(null);
+        setSelectedDealerId(null);
+        setInquiryValues(null);
+        setInquiryError(null);
+    }, []);
+    const handleInquirySubmit = useCallback(async (turnstileToken) => {
+        if (inquiryValues == null || widgetFormId == null)
+            return;
+        const validationError = validateInquiryFormValues(inquiryValues);
+        if (validationError) {
+            setInquiryError(validationError.type === 'invalid_email'
+                ? t.formValidationEmail
+                : t.formValidationRequired);
+            tracker?.trackFormError(validationError);
+            return;
+        }
+        setInquiryError(null);
+        setIsSubmittingInquiry(true);
+        try {
+            const payload = inquiryFormValuesToApiPayload(inquiryValues, {
+                formId: widgetFormId,
+                categoryLabel: inquiryCategoryLabel(inquiryValues.requestCategory, t),
+                domain: typeof window !== 'undefined' ? window.location.hostname : undefined,
+            });
+            if (turnstileToken?.trim()) {
+                payload.turnstileToken = turnstileToken.trim();
+            }
+            const result = await submitInquiry(payload, { endpoint: submissionEndpoint });
+            if (result.ok !== true) {
+                setInquiryError(typeof result.error === 'string' ? result.error : t.genericWidgetError);
+                setTurnstileResetKey((current) => current + 1);
+                return;
+            }
+            setIsInquirySubmitted(true);
+            setSelectedDealerName(null);
+            setSelectedDealerId(null);
+            setInquiryValues(null);
+            setTurnstileResetKey((current) => current + 1);
+            tracker?.trackSuccessfulSubmit();
+        }
+        catch {
+            setInquiryError(t.genericWidgetError);
+            setTurnstileResetKey((current) => current + 1);
+        }
+        finally {
+            setIsSubmittingInquiry(false);
+        }
+    }, [
+        inquiryValues,
+        widgetFormId,
+        t,
+        tracker,
+        submissionEndpoint,
+    ]);
+    const handleStartInquiry = useCallback((dealer) => {
+        const dealerName = getDealerName(dealer, t.unknownDealer);
+        const dealerId = getDealerId(dealer);
+        setSelectedDealerName(dealerName);
+        setSelectedDealerId(dealerId ?? null);
+        setInquiryValues(createInquiryFormValues(productName, dealer, t.unknownDealer, apiMarkets?.[0]));
+        setInquiryError(null);
+        setIsInquirySubmitted(false);
+        tracker?.trackFormStart(dealerId, dealerName);
+    }, [apiMarkets, productName, t.unknownDealer, tracker]);
+    const openDrawerFromUrlDealer = useCallback(async (dealerId) => {
+        setIsLoadingUrlDealer(true);
+        try {
+            const result = await fetchDealerById(dealerId, dealerSearchOptions);
+            if (result.ok !== true || result.dealer == null) {
+                return;
+            }
+            setShouldAutoLocateAfterAuth(false);
+            setLocationError(null);
+            setSearchResult(null);
+            setMapSearchResult(null);
+            setLocationQuery('');
+            setLocationSuggestions([]);
+            setIsSuggestionListOpen(false);
+            pendingDealerSearchTermRef.current = null;
+            tracker?.resetSession();
+            ensureDataLayer();
+            tracker?.trackWidgetOpened();
+            const dealer = result.dealer;
+            const latitude = typeof dealer.latitude === 'number' && Number.isFinite(dealer.latitude)
+                ? dealer.latitude
+                : undefined;
+            const longitude = typeof dealer.longitude === 'number' && Number.isFinite(dealer.longitude)
+                ? dealer.longitude
+                : undefined;
+            const singleResult = {
+                ok: true,
+                type: 'geolocation',
+                total: 1,
+                dealers: [dealer],
+                ...(latitude != null && longitude != null
+                    ? { origin: { latitude, longitude } }
+                    : {}),
+            };
+            setSearchResult(singleResult);
+            setMapSearchResult(singleResult);
+            setIsOpen(true);
+            handleStartInquiry(dealer);
+        }
+        finally {
+            setIsLoadingUrlDealer(false);
+        }
+    }, [dealerSearchOptions, handleStartInquiry, tracker]);
+    useEffect(() => {
+        if (widgetType !== 'findDealerDrawer' || urlDealerId == null)
+            return;
+        if (auth == null || isLoading)
+            return;
+        if (!auth.ok || !auth.authorized)
+            return;
+        if (urlDealerHandledRef.current)
+            return;
+        urlDealerHandledRef.current = true;
+        void openDrawerFromUrlDealer(urlDealerId);
+    }, [auth, isLoading, openDrawerFromUrlDealer, urlDealerId, widgetType]);
     const shellClass = 'jwi-box-border jwi-flex jwi-w-[540px] jwi-max-w-full jwi-flex-col jwi-font-sans jwi-text-[#111111]';
     const rootClass = className != null && className !== '' ? `${shellClass} ${className}` : shellClass;
     if (typeState !== 'typeReady') {
         return _jsx("div", { className: rootClass, children: t.invalidWidgetTypeError });
     }
+    if (widgetType === 'warrantyForm') {
+        return (_jsx(WarrantyFormWidget, { endpoint: warrantyEndpoint, className: className, locale: localeProp, market: marketProp, styling: styling, turnstileSiteKey: turnstileSiteKeyProp, turnstileConfigEndpoint: turnstileConfigEndpoint }));
+    }
     if (widgetType === 'productPage' && !isOpen) {
         if (button == null)
             return null;
-        return (_jsx("div", { className: rootClass, children: renderButton(button, openProductPageWidget) }));
+        return renderButton(button, openProductPageWidget);
     }
     const productPageAuthPending = widgetType === 'productPage' &&
         isOpen &&
         (auth === null || isLoading);
     if (productPageAuthPending) {
-        return (_jsx("div", { className: rootClass, children: buttonLoading ?? button }));
+        return resolveButtonLoading(button, buttonLoading, t.loading);
     }
     const waitingForAuth = auth === null &&
         !((widgetType === 'productPage' || widgetType === 'findDealerDrawer') &&
@@ -288,7 +528,13 @@ export function JotulWidget({ type, endpoint = '/api/jotul/widget', className, p
         type !== 'findDealerDrawer') {
         return (_jsx("div", { className: rootClass, children: _jsx("div", { className: "jwi-flex jwi-w-full jwi-flex-col", children: _jsx(FinderSearchRowSkeleton, {}) }) }));
     }
-    const deferAuthErrorUntilDrawerOpens = widgetType === 'findDealerDrawer' && !isOpen && auth === null;
+    const deferAuthErrorUntilDrawerOpens = widgetType === 'findDealerDrawer' && !isOpen && auth === null && urlDealerId == null;
+    if (urlDealerId != null &&
+        auth != null &&
+        !isLoading &&
+        (!auth.ok || !auth.authorized)) {
+        return _jsx("div", { className: rootClass, children: getSafeWidgetErrorMessage(auth?.error, t) });
+    }
     const deferAuthUntilFindDealerDrawerResolves = widgetType === 'findDealerDrawer' && isOpen && (auth === null || isLoading);
     if (!deferAuthErrorUntilDrawerOpens &&
         !deferAuthUntilFindDealerDrawerResolves &&
@@ -296,12 +542,12 @@ export function JotulWidget({ type, endpoint = '/api/jotul/widget', className, p
         return _jsx("div", { className: rootClass, children: getSafeWidgetErrorMessage(auth?.error, t) });
     }
     if (widgetType === 'productPage') {
-        return (_jsx("div", { className: rootClass, children: ProductPageWidgetComp != null && mounted
-                ? createPortal(_jsx(ProductPageWidgetComp, { t: t, buttonStyling: styling?.button, borderStyling: styling?.border, markets: apiMarkets, scope: scope, isSearching: isSearching, locationError: locationError, searchResult: searchResult?.ok === false
+        return ProductPageWidgetComp != null && mounted && tracker != null
+            ? createPortal(_jsx(WidgetTrackingContext.Provider, { value: tracker, children: _jsx(ProductPageWidgetComp, { t: t, buttonStyling: styling?.button, borderStyling: styling?.border, markets: apiMarkets, scope: scope, isSearching: isSearching, locationError: locationError, searchResult: searchResult?.ok === false
                         ? { ...searchResult, error: getSafeWidgetErrorMessage(searchResult.error, t) }
                         : searchResult, mapSearchResult: mapSearchResult?.ok === false
                         ? { ...mapSearchResult, error: getSafeWidgetErrorMessage(mapSearchResult.error, t) }
-                        : mapSearchResult, inquiryValues: inquiryValues, inquiryError: inquiryError, isInquirySubmitted: isInquirySubmitted, selectedDealerName: selectedDealerName, isManualSearchEnabled: isManualLocationSearchEnabled, query: locationQuery, suggestions: locationSuggestions, suggestionsOpen: isSuggestionListOpen, isSuggestionsLoading: isSearchingSuggestions, onQueryChange: (value) => {
+                        : mapSearchResult, inquiryValues: inquiryValues, inquiryError: inquiryError, isSubmittingInquiry: isSubmittingInquiry, turnstileSiteKey: resolvedTurnstileSiteKey, turnstileResetKey: turnstileResetKey, isInquirySubmitted: isInquirySubmitted, selectedDealerName: selectedDealerName, isManualSearchEnabled: isManualLocationSearchEnabled, query: locationQuery, suggestions: locationSuggestions, suggestionsOpen: isSuggestionListOpen, isSuggestionsLoading: isSearchingSuggestions, onQueryChange: (value) => {
                         setLocationQuery(value);
                         const trimmed = value.trim();
                         setIsSuggestionListOpen(trimmed.length > 0);
@@ -324,60 +570,34 @@ export function JotulWidget({ type, endpoint = '/api/jotul/widget', className, p
                         setLocationSuggestions([]);
                         setIsSearchingSuggestions(false);
                         setIsSuggestionListOpen(false);
-                        await runDealerSearchByCoordinates(suggestion.latitude, suggestion.longitude);
+                        await runUserDealerSearchByCoordinates(suggestion.latitude, suggestion.longitude, query);
                     }, onSuggestionSelect: (suggestion) => {
                         setLocationQuery(suggestion.label);
                         setLocationSuggestions([]);
                         setIsSearchingSuggestions(false);
                         setIsSuggestionListOpen(false);
-                        void runDealerSearchByCoordinates(suggestion.latitude, suggestion.longitude);
+                        void runUserDealerSearchByCoordinates(suggestion.latitude, suggestion.longitude, suggestion.label);
                     }, onDismissSuggestions: () => {
                         setLocationSuggestions([]);
                         setIsSearchingSuggestions(false);
                         setIsSuggestionListOpen(false);
-                    }, onInquiryClose: () => {
-                        setSelectedDealerName(null);
-                        setInquiryValues(null);
-                        setInquiryError(null);
-                    }, onInquirySubmit: () => {
-                        if (inquiryValues == null)
-                            return;
-                        const trimmedName = inquiryValues.name.trim();
-                        const trimmedEmail = inquiryValues.email.trim();
-                        const trimmedPhone = inquiryValues.phone.trim();
-                        if (!trimmedName || !trimmedEmail || !trimmedPhone) {
-                            setInquiryError(t.formValidationRequired);
-                            return;
-                        }
-                        if (!isValidEmail(trimmedEmail)) {
-                            setInquiryError(t.formValidationEmail);
-                            return;
-                        }
-                        setInquiryError(null);
-                        setIsInquirySubmitted(true);
-                        setSelectedDealerName(null);
-                        setInquiryValues(null);
-                    }, onInquiryFieldChange: (key, value) => setInquiryValues((current) => current == null ? current : { ...current, [key]: value }), onStartInquiry: (dealerName) => {
-                        setSelectedDealerName(dealerName);
-                        setInquiryValues(createInquiryFormValues(productName, dealerName));
-                        setInquiryError(null);
-                        setIsInquirySubmitted(false);
-                    }, onMapDealerSelect: (dealer) => {
+                    }, onInquiryClose: handleInquiryClose, onInquirySubmit: handleInquirySubmit, onInquiryFieldChange: (key, value) => setInquiryValues((current) => current == null ? current : { ...current, [key]: value }), onStartInquiry: handleStartInquiry, onMapDealerSelect: (dealer) => {
                         if (isDealerInSearchResult(dealer.dealerName, searchResult, t.unknownDealer))
                             return;
-                        void runDealerSearchByCoordinates(dealer.latitude, dealer.longitude);
-                    }, onClosePopup: closeDealerWidget }), document.body)
-                : null }));
+                        void runUserDealerSearchByCoordinates(dealer.latitude, dealer.longitude, locationQueryRef.current.trim());
+                    }, onClosePopup: closeDealerWidget }) }), document.body)
+            : null;
     }
     if (widgetType === 'findDealerDrawer') {
         const drawerLoading = isOpen &&
             (auth === null ||
                 isLoading ||
                 isComponentLoading ||
-                (isSearching && searchResult == null && mapSearchResult == null));
-        return (_jsxs("div", { className: rootClass, children: [button != null &&
+                isLoadingUrlDealer ||
+                (isSearching && searchResult == null && mapSearchResult == null && urlDealerId == null));
+        return (_jsxs(_Fragment, { children: [button != null &&
                     (drawerLoading
-                        ? buttonLoading ?? button
+                        ? resolveButtonLoading(button, buttonLoading, t.loading)
                         : renderButton(button, openProductPageWidget)), mounted &&
                     createPortal(_jsxs(_Fragment, { children: [_jsx("div", { className: "jwi-fixed jwi-inset-0 jwi-z-[2147483647] jwi-bg-black/35", style: {
                                     opacity: isOpen ? 1 : 0,
@@ -387,76 +607,49 @@ export function JotulWidget({ type, endpoint = '/api/jotul/widget', className, p
                                     transform: isOpen ? 'translateX(0)' : 'translateX(100%)',
                                     transition: 'transform 300ms ease-out',
                                     willChange: 'transform',
-                                }, "aria-hidden": !isOpen, children: drawerLoading || FindDealerDrawerWidgetComp == null ? (_jsxs("div", { className: "jwi-flex jwi-h-full jwi-w-full jwi-bg-white", children: [_jsx("div", { className: "jwi-flex jwi-h-full jwi-min-h-0 jwi-w-1/2 jwi-flex-col jwi-overflow-hidden", children: _jsxs("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: [_jsx("div", { className: "jwi-h-12 jwi-w-full jwi-rounded-[10px] jwi-bg-[#ece8df] jwi-transition-opacity jwi-duration-300 jwi-ease-out" }), _jsx("div", { className: "jwi-h-5 jwi-w-48 jwi-rounded-full jwi-bg-[#ece8df] jwi-transition-opacity jwi-duration-300 jwi-ease-out" }), _jsxs("div", { className: "jwi-flex jwi-flex-col jwi-gap-4", children: [_jsx(DealerCardSkeleton, {}), _jsx(DealerCardSkeleton, {}), _jsx(DealerCardSkeleton, {})] })] }) }), _jsx("div", { className: "jwi-h-full jwi-w-1/2 jwi-bg-[#e8eef1]" })] })) : (_jsx(FindDealerDrawerWidgetComp, { t: t, buttonStyling: styling?.button, borderStyling: styling?.border, markets: apiMarkets, scope: scope, isSearching: isSearching, locationError: locationError, searchResult: searchResult?.ok === false
-                                        ? { ...searchResult, error: getSafeWidgetErrorMessage(searchResult.error, t) }
-                                        : searchResult, mapSearchResult: mapSearchResult?.ok === false
-                                        ? { ...mapSearchResult, error: getSafeWidgetErrorMessage(mapSearchResult.error, t) }
-                                        : mapSearchResult, inquiryValues: inquiryValues, inquiryError: inquiryError, isInquirySubmitted: isInquirySubmitted, selectedDealerName: selectedDealerName, isManualSearchEnabled: isManualLocationSearchEnabled, query: locationQuery, suggestions: locationSuggestions, suggestionsOpen: isSuggestionListOpen, isSuggestionsLoading: isSearchingSuggestions, onQueryChange: (value) => {
-                                        setLocationQuery(value);
-                                        const trimmed = value.trim();
-                                        setIsSuggestionListOpen(trimmed.length > 0);
-                                        if (trimmed.length < 3) {
+                                }, "aria-hidden": !isOpen, children: drawerLoading || FindDealerDrawerWidgetComp == null ? (_jsxs("div", { className: "jwi-flex jwi-h-full jwi-w-full jwi-bg-white", children: [_jsx("div", { className: "jwi-flex jwi-h-full jwi-min-h-0 jwi-w-1/2 jwi-flex-col jwi-overflow-hidden", children: _jsxs("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: [_jsx("div", { className: "jwi-h-12 jwi-w-full jwi-rounded-[10px] jwi-bg-[#ece8df] jwi-transition-opacity jwi-duration-300 jwi-ease-out" }), _jsx("div", { className: "jwi-h-5 jwi-w-48 jwi-rounded-full jwi-bg-[#ece8df] jwi-transition-opacity jwi-duration-300 jwi-ease-out" }), _jsxs("div", { className: "jwi-flex jwi-flex-col jwi-gap-4", children: [_jsx(DealerCardSkeleton, {}), _jsx(DealerCardSkeleton, {}), _jsx(DealerCardSkeleton, {})] })] }) }), _jsx("div", { className: "jwi-h-full jwi-w-1/2 jwi-bg-[#e8eef1]" })] })) : (tracker != null ? (_jsx(WidgetTrackingContext.Provider, { value: tracker, children: _jsx(FindDealerDrawerWidgetComp, { t: t, buttonStyling: styling?.button, borderStyling: styling?.border, markets: apiMarkets, scope: scope, isSearching: isSearching, locationError: locationError, searchResult: searchResult?.ok === false
+                                            ? { ...searchResult, error: getSafeWidgetErrorMessage(searchResult.error, t) }
+                                            : searchResult, mapSearchResult: mapSearchResult?.ok === false
+                                            ? { ...mapSearchResult, error: getSafeWidgetErrorMessage(mapSearchResult.error, t) }
+                                            : mapSearchResult, inquiryValues: inquiryValues, inquiryError: inquiryError, isSubmittingInquiry: isSubmittingInquiry, turnstileSiteKey: resolvedTurnstileSiteKey, turnstileResetKey: turnstileResetKey, isInquirySubmitted: isInquirySubmitted, selectedDealerName: selectedDealerName, isManualSearchEnabled: isManualLocationSearchEnabled, query: locationQuery, suggestions: locationSuggestions, suggestionsOpen: isSuggestionListOpen, isSuggestionsLoading: isSearchingSuggestions, onQueryChange: (value) => {
+                                            setLocationQuery(value);
+                                            const trimmed = value.trim();
+                                            setIsSuggestionListOpen(trimmed.length > 0);
+                                            if (trimmed.length < 3) {
+                                                setLocationSuggestions([]);
+                                            }
+                                        }, onQuerySubmit: async (value) => {
+                                            const query = value.trim();
+                                            if (query.length < 3)
+                                                return;
+                                            setIsSearchingSuggestions(true);
+                                            const result = await searchLocationSuggestions(query, dealerSearchOptions);
+                                            const resolvedSuggestions = result.ok && Array.isArray(result.suggestions) ? result.suggestions : [];
+                                            setLocationSuggestions(resolvedSuggestions);
+                                            setIsSearchingSuggestions(false);
+                                            const suggestion = resolvedSuggestions[0];
+                                            if (!suggestion)
+                                                return;
+                                            setLocationQuery(suggestion.label);
+                                            setLocationSuggestions([]);
+                                            setIsSearchingSuggestions(false);
+                                            setIsSuggestionListOpen(false);
+                                            await runUserDealerSearchByCoordinates(suggestion.latitude, suggestion.longitude, query);
+                                        }, onSuggestionSelect: (suggestion) => {
+                                            setLocationQuery(suggestion.label);
+                                            setLocationSuggestions([]);
+                                            setIsSearchingSuggestions(false);
+                                            setIsSuggestionListOpen(false);
+                                            void runUserDealerSearchByCoordinates(suggestion.latitude, suggestion.longitude, suggestion.label);
+                                        }, onDismissSuggestions: () => {
                                             setLocationSuggestions([]);
-                                        }
-                                    }, onQuerySubmit: async (value) => {
-                                        const query = value.trim();
-                                        if (query.length < 3)
-                                            return;
-                                        setIsSearchingSuggestions(true);
-                                        const result = await searchLocationSuggestions(query, dealerSearchOptions);
-                                        const resolvedSuggestions = result.ok && Array.isArray(result.suggestions) ? result.suggestions : [];
-                                        setLocationSuggestions(resolvedSuggestions);
-                                        setIsSearchingSuggestions(false);
-                                        const suggestion = resolvedSuggestions[0];
-                                        if (!suggestion)
-                                            return;
-                                        setLocationQuery(suggestion.label);
-                                        setLocationSuggestions([]);
-                                        setIsSearchingSuggestions(false);
-                                        setIsSuggestionListOpen(false);
-                                        await runDealerSearchByCoordinates(suggestion.latitude, suggestion.longitude);
-                                    }, onSuggestionSelect: (suggestion) => {
-                                        setLocationQuery(suggestion.label);
-                                        setLocationSuggestions([]);
-                                        setIsSearchingSuggestions(false);
-                                        setIsSuggestionListOpen(false);
-                                        void runDealerSearchByCoordinates(suggestion.latitude, suggestion.longitude);
-                                    }, onDismissSuggestions: () => {
-                                        setLocationSuggestions([]);
-                                        setIsSearchingSuggestions(false);
-                                        setIsSuggestionListOpen(false);
-                                    }, onInquiryClose: () => {
-                                        setSelectedDealerName(null);
-                                        setInquiryValues(null);
-                                        setInquiryError(null);
-                                    }, onInquirySubmit: () => {
-                                        if (inquiryValues == null)
-                                            return;
-                                        const trimmedName = inquiryValues.name.trim();
-                                        const trimmedEmail = inquiryValues.email.trim();
-                                        const trimmedPhone = inquiryValues.phone.trim();
-                                        if (!trimmedName || !trimmedEmail || !trimmedPhone) {
-                                            setInquiryError(t.formValidationRequired);
-                                            return;
-                                        }
-                                        if (!isValidEmail(trimmedEmail)) {
-                                            setInquiryError(t.formValidationEmail);
-                                            return;
-                                        }
-                                        setInquiryError(null);
-                                        setIsInquirySubmitted(true);
-                                        setSelectedDealerName(null);
-                                        setInquiryValues(null);
-                                    }, onInquiryFieldChange: (key, value) => setInquiryValues((current) => current == null ? current : { ...current, [key]: value }), onStartInquiry: (dealerName) => {
-                                        setSelectedDealerName(dealerName);
-                                        setInquiryValues(createInquiryFormValues(productName, dealerName));
-                                        setInquiryError(null);
-                                        setIsInquirySubmitted(false);
-                                    }, onMapDealerSelect: (dealer) => {
-                                        if (isDealerInSearchResult(dealer.dealerName, searchResult, t.unknownDealer))
-                                            return;
-                                        void runDealerSearchByCoordinates(dealer.latitude, dealer.longitude);
-                                    }, onClose: closeDealerWidget })) })] }), document.body)] }));
+                                            setIsSearchingSuggestions(false);
+                                            setIsSuggestionListOpen(false);
+                                        }, onInquiryClose: handleInquiryClose, onInquirySubmit: handleInquirySubmit, onInquiryFieldChange: (key, value) => setInquiryValues((current) => current == null ? current : { ...current, [key]: value }), onStartInquiry: handleStartInquiry, onMapDealerSelect: (dealer) => {
+                                            if (isDealerInSearchResult(dealer.dealerName, searchResult, t.unknownDealer))
+                                                return;
+                                            void runUserDealerSearchByCoordinates(dealer.latitude, dealer.longitude, locationQueryRef.current.trim());
+                                        }, onClose: closeDealerWidget }) })) : null) })] }), document.body)] }));
     }
     return _jsx("div", { className: rootClass, children: renderReadyState(widgetType, t) });
 }

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;