@jotul/jotul-widgets 0.0.4 → 1.0.0

package/dist/JotulWidget.js

@@ -1,128 +1,129 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './JotulWidget.css';
-import { useEffect, useMemo, useState } from 'react';
-const VALID_WIDGET_TYPES = [
-    'productPage',
-    'dealerFinder',
-    'warrantyForm',
-];
-function PinIcon() {
-    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", className: "jwi-icon16", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.70895 0.833313H5.20957C5.41781 0.833313 5.60425 0.962386 5.67756 1.15731L6.64785 3.73723C6.68 3.82263 6.68813 3.91519 6.6714 4.00488L6.1852 6.61285C6.7828 8.01818 7.76987 8.96258 9.40693 9.80971L11.9836 9.31045C12.0751 9.29271 12.1697 9.30091 12.2567 9.33411L14.8446 10.3202C15.0385 10.3941 15.1665 10.58 15.1665 10.7874V13.177C15.1665 14.2606 14.2117 15.14 13.0949 14.897C11.0592 14.454 7.28767 13.3282 4.64633 10.6868C2.11624 8.15678 1.26855 4.66166 0.983187 2.77244C0.820367 1.69446 1.6849 0.833313 2.70895 0.833313Z", fill: "currentColor" }) }));
-}
-function ArrowRightIcon() {
-    return (_jsx("svg", { width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", className: "jwi-icon22", children: _jsx("path", { d: "M2.75 11L19.25 11M19.25 11L11.4583 3.20836M19.25 11L11.4583 18.7917", stroke: "currentColor", strokeWidth: "2.08333", strokeLinecap: "round", strokeLinejoin: "round" }) }));
-}
-function TelephoneIcon() {
-    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", className: "jwi-icon16", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.70895 0.833313H5.20957C5.41781 0.833313 5.60425 0.962386 5.67756 1.15731L6.64785 3.73723C6.68 3.82263 6.68813 3.91519 6.6714 4.00488L6.1852 6.61285C6.7828 8.01818 7.76987 8.96258 9.40693 9.80971L11.9836 9.31045C12.0751 9.29271 12.1697 9.30091 12.2567 9.33411L14.8446 10.3202C15.0385 10.3941 15.1665 10.58 15.1665 10.7874V13.177C15.1665 14.2606 14.2117 15.14 13.0949 14.897C11.0592 14.454 7.28767 13.3282 4.64633 10.6868C2.11624 8.15678 1.26855 4.66166 0.983187 2.77244C0.820367 1.69446 1.6849 0.833313 2.70895 0.833313Z", fill: "currentColor" }) }));
-}
-function asText(value) {
-    return typeof value === 'string' && value.trim() ? value.trim() : null;
-}
-function asNumber(value) {
-    return typeof value === 'number' && Number.isFinite(value) ? value : null;
-}
-function formatDistance(dealer) {
-    const distanceKm = asNumber(dealer.distanceKm);
-    if (distanceKm !== null) {
-        return `${Math.round(distanceKm)} km`;
-    }
-    const postalDistance = asNumber(dealer.postalDistance);
-    if (postalDistance !== null) {
-        return `${Math.round(postalDistance)} km`;
-    }
-    return null;
-}
-function getDealerKey(dealer, index) {
-    return String(dealer.dealerId ?? dealer.name ?? index);
-}
-function getDealerName(dealer) {
-    return asText(dealer.name) ?? asText(dealer.dealerId) ?? 'Unknown dealer';
-}
-function getDealerAddressLines(dealer) {
-    const address = asText(dealer.address);
-    const postalCode = asText(dealer.postalCode);
-    return [address, postalCode].filter((value) => Boolean(value));
-}
-export async function checkWidgetAuthorization(options) {
-    const endpoint = options?.endpoint ?? '/api/jotul/widget';
-    const fetcher = options?.fetcher ?? fetch;
-    let response;
-    try {
-        response = await fetcher(endpoint, {
-            method: 'GET',
-            headers: {
-                Accept: 'application/json',
-            },
-            cache: 'no-store',
-        });
-    }
-    catch (error) {
-        return {
-            ok: false,
-            error: error instanceof Error ? error.message : 'Failed to reach widget auth route',
-        };
-    }
-    try {
-        return (await response.json());
-    }
-    catch {
-        return {
-            ok: false,
-            error: 'Invalid API key',
-        };
-    }
-}
-export async function searchDealersByPostalCode(postalCode, options) {
-    const endpoint = options?.endpoint ?? '/api/jotul/widget';
-    const fetcher = options?.fetcher ?? fetch;
-    const params = new URLSearchParams({ postalCode: postalCode.trim() });
-    let response;
-    try {
-        response = await fetcher(`${endpoint}?${params.toString()}`, {
-            method: 'GET',
-            headers: {
-                Accept: 'application/json',
-            },
-            cache: 'no-store',
-        });
-    }
-    catch (error) {
-        return {
-            ok: false,
-            error: error instanceof Error ? error.message : 'Failed to reach widget route',
-        };
-    }
-    try {
-        return (await response.json());
-    }
-    catch {
-        return {
-            ok: false,
-            error: 'Widget route returned invalid JSON',
-        };
-    }
-}
-function isWidgetType(value) {
-    return value != null && VALID_WIDGET_TYPES.includes(value);
-}
-function renderReadyState(type) {
-    switch (type) {
-        case 'productPage':
-            return null;
-        case 'dealerFinder':
-            return 'JotulWidget ready: dealerFinder';
-        case 'warrantyForm':
-            return 'JotulWidget ready: warrantyForm';
-    }
-}
-export function JotulWidget({ type, endpoint = '/api/jotul/widget', className, }) {
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { FinderSearchRowSkeleton } from './components/FinderSearchRowSkeleton';
+import { ProductPageWidget } from './widgets/ProductPageWidget';
+import { FIND_DEALER_BUTTON_CLASS } from './constants';
+import { ButtonSpinner } from './icons/ButtonSpinner';
+import { normalizeWidgetLocale, WIDGET_STRINGS } from './i18n/widgetStrings';
+import { checkWidgetAuthorization, searchLocationSuggestions, searchDealersByCoordinates, searchDealersByPostalCode, } from './api';
+import { createInquiryFormValues, getSafeWidgetErrorMessage, isValidEmail, isWidgetType, renderReadyState, } from './utils';
+export { normalizeWidgetLocale } from './i18n/widgetStrings';
+export { checkWidgetAuthorization, searchLocationSuggestions, searchDealersByCoordinates, searchDealersByPostalCode, };
+const GEO_PERMISSION_DENIED = 1;
+const GEO_POSITION_UNAVAILABLE = 2;
+const GEO_TIMEOUT = 3;
+const GEOLOCATION_OPTIONS = {
+    enableHighAccuracy: false,
+    timeout: 15000,
+    maximumAge: 300000,
+};
+export function JotulWidget({ type, endpoint = '/api/jotul/widget', className, productName, locale: localeProp, brands, }) {
+    const resolvedLocale = useMemo(() => normalizeWidgetLocale(localeProp), [localeProp]);
+    const t = WIDGET_STRINGS[resolvedLocale];
     const [auth, setAuth] = useState(null);
-    const [isLoading, setIsLoading] = useState(true);
-    const [postalCode, setPostalCode] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
     const [searchResult, setSearchResult] = useState(null);
     const [isSearching, setIsSearching] = useState(false);
+    const [isSearchingSuggestions, setIsSearchingSuggestions] = useState(false);
+    const [locationError, setLocationError] = useState(null);
+    const [isManualLocationSearchEnabled] = useState(true);
+    const [locationQuery, setLocationQuery] = useState('');
+    const [locationSuggestions, setLocationSuggestions] = useState([]);
+    const [isSuggestionListOpen, setIsSuggestionListOpen] = useState(false);
+    const [isOpen, setIsOpen] = useState(false);
+    const [shouldAutoLocateAfterAuth, setShouldAutoLocateAfterAuth] = useState(false);
+    const [selectedDealerName, setSelectedDealerName] = useState(null);
+    const [inquiryValues, setInquiryValues] = useState(null);
+    const [inquiryError, setInquiryError] = useState(null);
+    const [isInquirySubmitted, setIsInquirySubmitted] = useState(false);
+    const autocompleteCacheRef = useRef(new Map());
+    const dealerSearchOptions = useMemo(() => ({
+        endpoint,
+        locale: resolvedLocale,
+        brands,
+    }), [brands, endpoint, resolvedLocale]);
+    const runDealerSearchByCoordinates = useCallback(async (latitude, longitude) => {
+        setLocationError(null);
+        setSearchResult(null);
+        setIsSearching(true);
+        try {
+            const result = await searchDealersByCoordinates(latitude, longitude, dealerSearchOptions);
+            setSearchResult(result);
+        }
+        finally {
+            setIsSearching(false);
+        }
+    }, [dealerSearchOptions]);
+    const runLocationSearch = useCallback(() => {
+        const messages = WIDGET_STRINGS[resolvedLocale];
+        setShouldAutoLocateAfterAuth(false);
+        setLocationError(null);
+        setSearchResult(null);
+        setLocationSuggestions([]);
+        setIsSearchingSuggestions(false);
+        setIsSuggestionListOpen(false);
+        if (typeof navigator === 'undefined' || !navigator.geolocation) {
+            setLocationError(messages.locationUnavailableBrowser);
+            return;
+        }
+        setIsSearching(true);
+        navigator.geolocation.getCurrentPosition(async (position) => {
+            setIsSearching(false);
+            await runDealerSearchByCoordinates(position.coords.latitude, position.coords.longitude);
+            setLocationQuery('');
+            setLocationSuggestions([]);
+        }, (err) => {
+            setIsSearching(false);
+            if (err.code === GEO_PERMISSION_DENIED) {
+                setLocationError(messages.locationPermissionDenied);
+            }
+            else if (err.code === GEO_POSITION_UNAVAILABLE) {
+                setLocationError(messages.locationPositionUnavailable);
+            }
+            else if (err.code === GEO_TIMEOUT) {
+                setLocationError(messages.locationTimeout);
+            }
+            else {
+                setLocationError(messages.locationGenericFailure);
+            }
+        }, GEOLOCATION_OPTIONS);
+    }, [resolvedLocale, runDealerSearchByCoordinates]);
+    useEffect(() => {
+        const query = locationQuery.trim();
+        if (query.length < 3) {
+            setIsSearchingSuggestions(false);
+            setLocationSuggestions([]);
+            return;
+        }
+        const cacheKey = query.toLowerCase();
+        const cached = autocompleteCacheRef.current.get(cacheKey);
+        if (cached != null) {
+            setLocationSuggestions(cached);
+            return;
+        }
+        let cancelled = false;
+        const timer = setTimeout(async () => {
+            setIsSearchingSuggestions(true);
+            const result = await searchLocationSuggestions(query, dealerSearchOptions);
+            if (cancelled)
+                return;
+            const suggestions = result.ok && Array.isArray(result.suggestions) ? result.suggestions : [];
+            autocompleteCacheRef.current.set(cacheKey, suggestions);
+            setLocationSuggestions(suggestions);
+            setIsSearchingSuggestions(false);
+        }, 350);
+        return () => {
+            cancelled = true;
+            clearTimeout(timer);
+        };
+    }, [dealerSearchOptions, locationQuery]);
     useEffect(() => {
+        if (type === 'productPage' && !isOpen)
+            return;
+        if (auth != null)
+            return;
         let cancelled = false;
         async function run() {
             setIsLoading(true);
@@ -136,7 +137,21 @@ export function JotulWidget({ type, endpoint = '/api/jotul/widget', className, }
         return () => {
             cancelled = true;
         };
-    }, [endpoint]);
+    }, [auth, endpoint, isOpen, type]);
+    useEffect(() => {
+        if (!shouldAutoLocateAfterAuth)
+            return;
+        if (type !== 'productPage' || !isOpen)
+            return;
+        if (auth == null || isLoading)
+            return;
+        if (!auth.ok || auth.authorized !== true) {
+            setShouldAutoLocateAfterAuth(false);
+            return;
+        }
+        setShouldAutoLocateAfterAuth(false);
+        runLocationSearch();
+    }, [auth, isLoading, isOpen, runLocationSearch, shouldAutoLocateAfterAuth, type]);
     const typeState = useMemo(() => {
         if (type == null)
             return 'typeMissing';
@@ -144,36 +159,88 @@ export function JotulWidget({ type, endpoint = '/api/jotul/widget', className, }
             return 'typeInvalid';
         return 'typeReady';
     }, [type]);
-    if (isLoading) {
-        return _jsx("div", { className: className ? `jwi-loading ${className}` : 'jwi-loading', children: "Loading JotulWidget\u2026" });
+    const widgetType = isWidgetType(type) ? type : undefined;
+    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 === 'productPage' && !isOpen) {
+        return (_jsx("div", { className: rootClass, children: _jsx("div", { className: "jwi-flex jwi-py-8 jwi-items-center jwi-justify-center", children: _jsx("button", { type: "button", onClick: () => {
+                        setLocationError(null);
+                        setSearchResult(null);
+                        setLocationQuery('');
+                        setLocationSuggestions([]);
+                        setIsSuggestionListOpen(false);
+                        setIsOpen(true);
+                        if (auth?.ok && auth.authorized === true && !isLoading) {
+                            setShouldAutoLocateAfterAuth(false);
+                            runLocationSearch();
+                        }
+                        else {
+                            setShouldAutoLocateAfterAuth(true);
+                        }
+                    }, className: FIND_DEALER_BUTTON_CLASS, children: t.findDealer }) }) }));
+    }
+    const productPageAuthPending = widgetType === 'productPage' && isOpen && (auth === null || isLoading);
+    if (productPageAuthPending) {
+        return (_jsx("div", { className: rootClass, children: _jsx("div", { className: "jwi-flex jwi-py-8 jwi-items-center jwi-justify-center", children: _jsx("button", { type: "button", disabled: true, className: `${FIND_DEALER_BUTTON_CLASS} jwi-opacity-95`, children: _jsxs("span", { className: "jwi-inline-flex jwi-items-center jwi-gap-2", children: [_jsx(ButtonSpinner, {}), t.loading] }) }) }) }));
+    }
+    const waitingForAuth = auth === null && !(widgetType === 'productPage' && !isOpen);
+    if ((isLoading || waitingForAuth) && type !== 'productPage') {
+        return (_jsx("div", { className: rootClass, children: _jsx("div", { className: "jwi-flex jwi-w-full jwi-flex-col", children: _jsx(FinderSearchRowSkeleton, {}) }) }));
     }
     if (!auth?.ok || !auth.authorized) {
-        return (_jsxs("div", { className: className ? `jwi-message ${className}` : 'jwi-message', children: ["JotulWidget auth failed: ", auth?.error ?? 'Unknown authorization error'] }));
-    }
-    if (typeState === 'typeMissing') {
-        return _jsx("div", { className: className ? `jwi-message ${className}` : 'jwi-message', children: "JotulWidget type missing" });
-    }
-    if (typeState === 'typeInvalid') {
-        return _jsx("div", { className: className ? `jwi-message ${className}` : 'jwi-message', children: "Invalid widget type" });
-    }
-    if (type === 'productPage') {
-        const dealers = (searchResult?.dealers ?? []);
-        const canSearch = postalCode.trim().length > 0;
-        const total = searchResult?.total ?? dealers.length;
-        return (_jsx("div", { className: className ? `jwi-root ${className}` : 'jwi-root', children: _jsxs("div", { className: "jwi-shell", children: [_jsx("div", { className: "jwi-searchBox", children: _jsxs("div", { className: "jwi-searchRow", children: [_jsxs("div", { className: "jwi-inputWrap", children: [_jsx("span", { className: "jwi-pin", children: _jsx(PinIcon, {}) }), _jsx("input", { type: "text", inputMode: "numeric", autoComplete: "postal-code", pattern: "[0-9]*", maxLength: 10, value: postalCode, onChange: (event) => {
-                                                const next = event.target.value.replace(/\D+/g, '');
-                                                setPostalCode(next);
-                                            }, placeholder: "Enter postcode", className: "jwi-input" })] }), _jsx("button", { type: "button", disabled: isSearching || !canSearch, onClick: async () => {
-                                        setIsSearching(true);
-                                        const result = await searchDealersByPostalCode(postalCode, { endpoint });
-                                        setSearchResult(result);
-                                        setIsSearching(false);
-                                    }, className: "jwi-findButton", children: isSearching ? 'Finding...' : 'Find' })] }) }), searchResult?.ok === false && (_jsx("div", { className: "jwi-error", children: searchResult.error ?? 'Unknown widget error' })), searchResult?.ok && (_jsxs("div", { className: "jwi-results", children: [_jsxs("div", { className: "jwi-resultsHeader", children: [total, " dealers near you"] }), _jsx("div", { className: "jwi-resultsList", children: dealers.map((dealer, index) => {
-                                    const addressLines = getDealerAddressLines(dealer);
-                                    const phone = asText(dealer.phone);
-                                    const distance = formatDistance(dealer);
-                                    return (_jsxs("div", { className: "jwi-card", children: [_jsxs("div", { className: "jwi-cardTop", children: [_jsx("div", { className: "jwi-cardTitleWrap", children: _jsx("h3", { className: "jwi-cardTitle", children: getDealerName(dealer) }) }), distance && (_jsx("div", { className: "jwi-distance", children: distance }))] }), addressLines.length > 0 && (_jsx("div", { className: "jwi-address", children: addressLines.map((line) => (_jsx("div", { children: line }, line))) })), _jsxs("div", { className: "jwi-cardActions", children: [_jsxs("button", { type: "button", className: "jwi-cta", children: [_jsx("span", { children: "Send foresporsel" }), _jsx(ArrowRightIcon, {})] }), phone && (_jsxs("a", { href: `tel:${phone.replace(/\s+/g, '')}`, className: "jwi-phoneLink", children: [_jsx(TelephoneIcon, {}), _jsx("span", { children: phone })] }))] })] }, getDealerKey(dealer, index)));
-                                }) })] }))] }) }));
-    }
-    return _jsx("div", { className: className ? `jwi-message ${className}` : 'jwi-message', children: renderReadyState(type) });
+        return _jsx("div", { className: rootClass, children: getSafeWidgetErrorMessage(auth?.error, t) });
+    }
+    if (widgetType === 'productPage') {
+        return (_jsx("div", { className: rootClass, children: _jsx(ProductPageWidget, { t: t, isSearching: isSearching, locationError: locationError, searchResult: searchResult?.ok === false
+                    ? { ...searchResult, error: getSafeWidgetErrorMessage(searchResult.error, t) }
+                    : searchResult, 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) {
+                        setLocationSuggestions([]);
+                    }
+                }, 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);
+                } }) }));
+    }
+    return _jsx("div", { className: rootClass, children: renderReadyState(widgetType, t) });
 }

package/dist/api.d.ts

@@ -0,0 +1,7 @@
+import type { CheckWidgetAuthorizationOptions, DealerSearchResponse, LocationAutocompleteResponse, WidgetAuthClientResponse } from './types';
+/** 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): Promise<DealerSearchResponse>;
+export declare function searchDealersByCoordinates(latitude: number, longitude: number, options?: CheckWidgetAuthorizationOptions): Promise<DealerSearchResponse>;
+export declare function searchLocationSuggestions(query: string, options?: CheckWidgetAuthorizationOptions): Promise<LocationAutocompleteResponse>;

package/dist/api.js

@@ -0,0 +1,118 @@
+/** Client-side default when JSON parse fails (English; localized in UI). */
+export const GENERIC_WIDGET_ERROR = 'Dealer finder is currently unavailable. Please try again later.';
+export async function checkWidgetAuthorization(options) {
+    const endpoint = options?.endpoint ?? '/api/jotul/widget';
+    const fetcher = options?.fetcher ?? fetch;
+    let response;
+    try {
+        response = await fetcher(endpoint, {
+            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 searchDealersByPostalCode(postalCode, options) {
+    const endpoint = options?.endpoint ?? '/api/jotul/widget';
+    const fetcher = options?.fetcher ?? fetch;
+    const params = new URLSearchParams({ postalCode: postalCode.trim() });
+    if (options?.locale != null && options.locale.trim() !== '') {
+        params.set('locale', options.locale.trim());
+    }
+    if (Array.isArray(options?.brands)) {
+        for (const brand of options.brands) {
+            const value = brand.trim();
+            if (value !== '')
+                params.append('brands', value);
+        }
+    }
+    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 searchDealersByCoordinates(latitude, longitude, options) {
+    const endpoint = options?.endpoint ?? '/api/jotul/widget';
+    const fetcher = options?.fetcher ?? fetch;
+    const params = new URLSearchParams({
+        latitude: String(latitude),
+        longitude: String(longitude),
+    });
+    if (options?.locale != null && options.locale.trim() !== '') {
+        params.set('locale', options.locale.trim());
+    }
+    if (Array.isArray(options?.brands)) {
+        for (const brand of options.brands) {
+            const value = brand.trim();
+            if (value !== '')
+                params.append('brands', value);
+        }
+    }
+    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;
+    const params = new URLSearchParams({
+        autocomplete: '1',
+        q: query.trim(),
+    });
+    if (options?.locale != null && options.locale.trim() !== '') {
+        params.set('locale', options.locale.trim());
+    }
+    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 };
+    }
+}

package/dist/components/DealerCardSkeleton.d.ts

@@ -0,0 +1,2 @@
+/** Matches a dealer card: title + badge, two lines, CTA + phone row. */
+export declare function DealerCardSkeleton(): import("react/jsx-runtime").JSX.Element;

package/dist/components/DealerCardSkeleton.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { R10 } from '../constants';
+/** Matches a dealer card: title + badge, two lines, CTA + phone row. */
+export function DealerCardSkeleton() {
+    return (_jsxs("div", { className: `jwi-w-full jwi-animate-pulse ${R10} jwi-border jwi-border-[#e6e1d7] jwi-bg-white jwi-p-4 jwi-shadow-[0_1px_2px_rgba(17,17,17,0.03)]`, children: [_jsxs("div", { className: "jwi-flex jwi-items-start jwi-justify-between jwi-gap-3", children: [_jsx("div", { className: "jwi-h-5 jwi-max-w-[70%] jwi-flex-1 jwi-rounded-full jwi-bg-[#ece8df]" }), _jsx("div", { className: "jwi-h-6 jwi-w-14 jwi-shrink-0 jwi-rounded-full jwi-bg-[#ece8df]" })] }), _jsxs("div", { className: "jwi-mt-4 jwi-space-y-1.5", children: [_jsx("div", { className: "jwi-h-4 jwi-w-full jwi-rounded-full jwi-bg-[#ece8df]" }), _jsx("div", { className: "jwi-h-4 jwi-w-2/3 jwi-rounded-full jwi-bg-[#ece8df]" })] }), _jsxs("div", { className: "jwi-mt-4 jwi-flex jwi-flex-col jwi-gap-3 md:jwi-flex-row md:jwi-items-center md:jwi-justify-between", children: [_jsx("div", { className: `jwi-h-12 jwi-w-full jwi-max-w-[220px] ${R10} jwi-bg-[#ece8df]` }), _jsxs("div", { className: "jwi-flex jwi-min-w-0 jwi-items-center jwi-gap-2", children: [_jsx("div", { className: "jwi-h-3.5 jwi-w-3.5 jwi-shrink-0 jwi-rounded-full jwi-bg-[#ece8df]" }), _jsx("div", { className: "jwi-h-4 jwi-w-24 jwi-rounded-full jwi-bg-[#ece8df]" })] })] })] }));
+}

package/dist/components/FinderSearchRowSkeleton.d.ts

@@ -0,0 +1,2 @@
+/** Matches the finder chrome: bordered box, pin + hint + Find in one row. */
+export declare function FinderSearchRowSkeleton(): import("react/jsx-runtime").JSX.Element;

package/dist/components/FinderSearchRowSkeleton.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { R10 } from '../constants';
+/** Matches the finder chrome: bordered box, pin + hint + Find in one row. */
+export function FinderSearchRowSkeleton() {
+    return (_jsx("div", { className: `jwi-w-full jwi-overflow-hidden ${R10} jwi-border jwi-border-[#d8d2c7] jwi-bg-white`, children: _jsxs("div", { className: "jwi-flex jwi-w-full jwi-min-w-0 jwi-flex-row jwi-items-stretch", children: [_jsxs("div", { className: "jwi-flex jwi-min-w-0 jwi-flex-1 jwi-items-center jwi-gap-3 jwi-py-4 jwi-pl-5 jwi-pr-3", children: [_jsx("div", { className: "jwi-h-4 jwi-w-4 jwi-shrink-0 jwi-animate-pulse jwi-rounded-full jwi-bg-[#ece8df]" }), _jsx("div", { className: "jwi-h-5 jwi-min-w-0 jwi-flex-1 jwi-animate-pulse jwi-rounded-full jwi-bg-[#ece8df]" })] }), _jsx("div", { className: "jwi-w-28 jwi-shrink-0 jwi-self-stretch jwi-animate-pulse jwi-bg-[#ece8df]" })] }) }));
+}

package/dist/components/InquiryField.d.ts

@@ -0,0 +1,10 @@
+type InquiryFieldProps = {
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+    type?: 'text' | 'email' | 'tel';
+    readOnly?: boolean;
+    multiline?: boolean;
+};
+export declare function InquiryField({ label, value, onChange, type, readOnly, multiline, }: InquiryFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/InquiryField.js

@@ -0,0 +1,7 @@
+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, }) {
+    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}` }))] }));
+}

package/dist/components/ProductPageWidget.d.ts

@@ -0,0 +1,26 @@
+import type { WidgetStrings } from '../i18n/widgetStrings';
+import type { DealerSearchResponse, InquiryFormValues, LocationSuggestion } from '../types';
+type ProductPageWidgetProps = {
+    t: WidgetStrings;
+    isSearching: boolean;
+    locationError: string | null;
+    searchResult: DealerSearchResponse | null;
+    inquiryValues: InquiryFormValues | null;
+    inquiryError: string | null;
+    isInquirySubmitted: boolean;
+    selectedDealerName: string | null;
+    isManualSearchEnabled: boolean;
+    query: string;
+    suggestions: LocationSuggestion[];
+    suggestionsOpen: boolean;
+    isSuggestionsLoading: boolean;
+    onQueryChange: (value: string) => void;
+    onSuggestionSelect: (suggestion: LocationSuggestion) => void;
+    onDismissSuggestions: () => void;
+    onInquiryClose: () => void;
+    onInquirySubmit: () => void;
+    onInquiryFieldChange: (key: keyof InquiryFormValues, value: string) => void;
+    onStartInquiry: (dealerName: string) => void;
+};
+export declare function ProductPageWidget({ t, isSearching, locationError, searchResult, inquiryValues, inquiryError, isInquirySubmitted, selectedDealerName, isManualSearchEnabled, query, suggestions, suggestionsOpen, isSuggestionsLoading, onQueryChange, onSuggestionSelect, onDismissSuggestions, onInquiryClose, onInquirySubmit, onInquiryFieldChange, onStartInquiry, }: ProductPageWidgetProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ProductPageWidget.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DealerCardSkeleton } from './DealerCardSkeleton';
+import { DealerList } from './product-page/DealerList';
+import { InquiryForm } from './product-page/InquiryForm';
+import { LocationSearch } from './product-page/LocationSearch';
+import { StatusBanner } from './product-page/StatusBanner';
+import { R10 } from '../constants';
+export function ProductPageWidget({ t, isSearching, locationError, searchResult, inquiryValues, inquiryError, isInquirySubmitted, selectedDealerName, isManualSearchEnabled, query, suggestions, suggestionsOpen, isSuggestionsLoading, onQueryChange, onSuggestionSelect, onDismissSuggestions, onInquiryClose, onInquirySubmit, onInquiryFieldChange, onStartInquiry, }) {
+    const dealers = (searchResult?.dealers ?? []);
+    const total = searchResult?.total ?? dealers.length;
+    const inquiryFormOpen = inquiryValues != null;
+    if (inquiryFormOpen && searchResult?.ok) {
+        return (_jsx("div", { className: "jwi-flex jwi-w-full jwi-flex-col jwi-gap-3", children: _jsx(InquiryForm, { t: t, inquiryValues: inquiryValues, inquiryError: inquiryError, onInquiryClose: onInquiryClose, onInquirySubmit: onInquirySubmit, onInquiryFieldChange: onInquiryFieldChange }) }));
+    }
+    return (_jsxs("div", { className: `jwi-flex jwi-w-full jwi-flex-col jwi-gap-3 ${R10} jwi-border jwi-border-[#e6e1d7] jwi-bg-white jwi-p-6`, children: [_jsx(LocationSearch, { t: t, isManualSearchEnabled: isManualSearchEnabled, query: query, suggestions: suggestions, suggestionsOpen: suggestionsOpen, isSuggestionsLoading: isSuggestionsLoading, onQueryChange: onQueryChange, onSuggestionSelect: onSuggestionSelect, onDismissSuggestions: onDismissSuggestions }), locationError != null && !isManualSearchEnabled && (_jsx(StatusBanner, { tone: "error", children: locationError })), searchResult?.ok === false && (_jsx(StatusBanner, { tone: "error", children: searchResult.error ?? '' })), isInquirySubmitted && _jsx(StatusBanner, { tone: "success", children: t.inquirySentSuccess }), isSearching && (_jsxs("div", { className: "jwi-flex jwi-flex-col", children: [_jsx("div", { className: "jwi-w-full jwi-flex-shrink-0 jwi-border-b jwi-border-[#e6e1d7] jwi-pb-3", children: _jsx("div", { className: "jwi-h-5 jwi-w-48 jwi-animate-pulse jwi-rounded-full jwi-bg-[#ece8df]" }) }), _jsxs("div", { className: "jwi-mt-3 jwi-mr-[-12px] jwi-flex jwi-max-h-[min(60vh,480px)] jwi-flex-col jwi-gap-4 jwi-overflow-y-auto jwi-pr-[12px]", children: [_jsx(DealerCardSkeleton, {}), _jsx(DealerCardSkeleton, {}), _jsx(DealerCardSkeleton, {})] })] })), searchResult?.ok && !isSearching && (_jsx(DealerList, { dealers: dealers, total: total, selectedDealerName: selectedDealerName, t: t, onStartInquiry: onStartInquiry }))] }));
+}

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

@@ -0,0 +1,11 @@
+import type { WidgetStrings } from '../../i18n/widgetStrings';
+import type { DealerRecord } from '../../types';
+type DealerListProps = {
+    dealers: DealerRecord[];
+    total: number;
+    selectedDealerName: string | null;
+    t: WidgetStrings;
+    onStartInquiry: (dealerName: string) => void;
+};
+export declare function DealerList({ dealers, total, selectedDealerName, t, onStartInquiry, }: DealerListProps): import("react/jsx-runtime").JSX.Element;
+export {};