@jotul/jotul-widgets 1.2.6 → 2.1.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, normalizeDealerMarkets, 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,21 +61,14 @@ 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 apiLocaleTag = useMemo(() => (localeProp?.trim() ? localeProp.trim() : DEFAULT_WIDGET_LOCALE_TAG), [localeProp]);
+    const apiMarkets = useMemo(() => normalizeDealerMarkets(marketsProp), [marketsProp]);
+    const apiBrands = useMemo(() => normalizeWidgetFilterList(brands), [brands]);
     const firstMarket = apiMarkets?.[0];
-    const resolvedUiLocale = useMemo(() => resolveWidgetUiLocale(localeProp, firstMarket), [localeProp, firstMarket]);
+    const resolvedUiLocale = useMemo(() => resolveWidgetUiLocale(localeProp), [localeProp]);
     const t = WIDGET_STRINGS[resolvedUiLocale];
-    const apiLocaleTag = useMemo(() => (localeProp?.trim() ? localeProp.trim() : DEFAULT_WIDGET_LOCALE_TAG), [localeProp]);
+    const resolvedTurnstileSiteKey = useTurnstileSiteKey(turnstileSiteKeyProp, turnstileConfigEndpoint);
     const [auth, setAuth] = useState(null);
     const [isLoading, setIsLoading] = useState(false);
     const [searchResult, setSearchResult] = useState(null);
@@ -65,23 +83,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 [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 +181,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 +257,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 +274,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 +300,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 +349,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,24 +362,150 @@ 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;
@@ -278,7 +515,7 @@ export function JotulWidget({ type, endpoint = '/api/jotul/widget', className, p
         isOpen &&
         (auth === null || isLoading);
     if (productPageAuthPending) {
-        return buttonLoading ?? button ?? null;
+        return resolveButtonLoading(button, buttonLoading, t.loading);
     }
     const waitingForAuth = auth === null &&
         !((widgetType === 'productPage' || widgetType === 'findDealerDrawer') &&
@@ -288,7 +525,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,77 +539,50 @@ export function JotulWidget({ type, endpoint = '/api/jotul/widget', className, p
         return _jsx("div", { className: rootClass, children: getSafeWidgetErrorMessage(auth?.error, t) });
     }
     if (widgetType === 'productPage') {
-        return 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
-                    ? { ...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) {
+        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, 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([]);
-                    }
-                }, 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);
-                }, onClosePopup: closeDealerWidget }), document.body)
+                        setIsSearchingSuggestions(false);
+                        setIsSuggestionListOpen(false);
+                        void runUserDealerSearchByCoordinates(suggestion.latitude, suggestion.longitude, suggestion.label);
+                    }, onDismissSuggestions: () => {
+                        setLocationSuggestions([]);
+                        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());
+                    }, onClosePopup: closeDealerWidget }) }), document.body)
             : null;
     }
     if (widgetType === 'findDealerDrawer') {
@@ -374,10 +590,11 @@ export function JotulWidget({ type, endpoint = '/api/jotul/widget', className, p
             (auth === null ||
                 isLoading ||
                 isComponentLoading ||
-                (isSearching && searchResult == null && mapSearchResult == 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 +604,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) });
 }