@jotul/jotul-widgets 0.0.3 → 1.0.0

package/README.md

@@ -9,6 +9,13 @@ It calls a partner-local backend route, for example:
 - partner server route -> `@jotul/jotul-api`
 - `@jotul/jotul-api` -> `https://api.jotul.com/api/v1/find-dealer`
 
+## Styling
+
+Styles are built into the published bundle as `dist/JotulWidget.css`. The component imports that file for you.
+
+- **Partners do not need Tailwind** in their app for the widget to look correct.
+- Utilities are compiled with Tailwind’s **`jwi-` prefix**, so they will not clash with a host app that also uses Tailwind.
+
 ## Example
 
 ```tsx

package/dist/JotulWidget.css

@@ -0,0 +1 @@
+.jwi-pointer-events-none{pointer-events:none}.jwi-absolute{position:absolute}.jwi-relative{position:relative}.jwi-bottom-0{bottom:0}.jwi-left-0{left:0}.jwi-right-0{right:0}.jwi-z-20{z-index:20}.jwi-m-0{margin:0}.jwi--mx-6{margin-left:-1.5rem;margin-right:-1.5rem}.jwi-mb-3{margin-bottom:.75rem}.jwi-mr-\[-12px\]{margin-right:-12px}.jwi-mt-1{margin-top:.25rem}.jwi-mt-2{margin-top:.5rem}.jwi-mt-3{margin-top:.75rem}.jwi-mt-4{margin-top:1rem}.jwi-box-border{box-sizing:border-box}.jwi-flex{display:flex}.jwi-inline-flex{display:inline-flex}.jwi-h-10{height:2.5rem}.jwi-h-12{height:3rem}.jwi-h-3\.5{height:.875rem}.jwi-h-4{height:1rem}.jwi-h-5{height:1.25rem}.jwi-h-6{height:1.5rem}.jwi-h-\[14px\]{height:14px}.jwi-h-\[18px\]{height:18px}.jwi-h-\[22px\]{height:22px}.jwi-h-\[60px\]{height:60px}.jwi-max-h-\[min\(60vh\,480px\)\]{max-height:min(60vh,480px)}.jwi-min-h-\[48px\]{min-height:48px}.jwi-min-h-\[56px\]{min-height:56px}.jwi-w-14{width:3.5rem}.jwi-w-2\/3{width:66.666667%}.jwi-w-24{width:6rem}.jwi-w-28{width:7rem}.jwi-w-3\.5{width:.875rem}.jwi-w-4{width:1rem}.jwi-w-48{width:12rem}.jwi-w-5{width:1.25rem}.jwi-w-\[14px\]{width:14px}.jwi-w-\[18px\]{width:18px}.jwi-w-\[22px\]{width:22px}.jwi-w-\[540px\]{width:540px}.jwi-w-auto{width:auto}.jwi-w-fit{width:-moz-fit-content;width:fit-content}.jwi-w-full{width:100%}.jwi-min-w-0{min-width:0}.jwi-max-w-\[220px\]{max-width:220px}.jwi-max-w-\[70\%\]{max-width:70%}.jwi-max-w-\[calc\(100\%-5rem\)\]{max-width:calc(100% - 5rem)}.jwi-max-w-full{max-width:100%}.jwi-flex-1{flex:1 1 0%}.jwi-flex-shrink-0,.jwi-shrink-0{flex-shrink:0}@keyframes jwi-pulse{50%{opacity:.5}}.jwi-animate-pulse{animation:jwi-pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes jwi-spin{to{transform:rotate(1turn)}}.jwi-animate-spin{animation:jwi-spin 1s linear infinite}.jwi-cursor-pointer{cursor:pointer}.jwi-resize-y{resize:vertical}.jwi-flex-row{flex-direction:row}.jwi-flex-col{flex-direction:column}.jwi-items-start{align-items:flex-start}.jwi-items-center{align-items:center}.jwi-items-stretch{align-items:stretch}.jwi-justify-center{justify-content:center}.jwi-justify-between{justify-content:space-between}.jwi-gap-0\.5{gap:.125rem}.jwi-gap-1\.5{gap:.375rem}.jwi-gap-2{gap:.5rem}.jwi-gap-3{gap:.75rem}.jwi-gap-4{gap:1rem}.jwi-space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem*var(--tw-space-y-reverse))}.jwi-self-stretch{align-self:stretch}.jwi-overflow-hidden{overflow:hidden}.jwi-overflow-y-auto{overflow-y:auto}.jwi-whitespace-nowrap{white-space:nowrap}.jwi-break-all{word-break:break-all}.jwi-rounded-\[10px\]{border-radius:10px}.jwi-rounded-full{border-radius:9999px}.jwi-border{border-width:1px}.jwi-border-0{border-width:0}.jwi-border-b{border-bottom-width:1px}.jwi-border-\[\#b7e5c2\]{--tw-border-opacity:1;border-color:rgb(183 229 194/var(--tw-border-opacity,1))}.jwi-border-\[\#d8d2c7\]{--tw-border-opacity:1;border-color:rgb(216 210 199/var(--tw-border-opacity,1))}.jwi-border-\[\#e6e1d7\]{--tw-border-opacity:1;border-color:rgb(230 225 215/var(--tw-border-opacity,1))}.jwi-border-\[\#f0c7c2\]{--tw-border-opacity:1;border-color:rgb(240 199 194/var(--tw-border-opacity,1))}.jwi-bg-\[\#FCFCFC\]{--tw-bg-opacity:1;background-color:rgb(252 252 252/var(--tw-bg-opacity,1))}.jwi-bg-\[\#ece8df\]{--tw-bg-opacity:1;background-color:rgb(236 232 223/var(--tw-bg-opacity,1))}.jwi-bg-\[\#eefbf2\]{--tw-bg-opacity:1;background-color:rgb(238 251 242/var(--tw-bg-opacity,1))}.jwi-bg-\[\#ef2b18\]{--tw-bg-opacity:1;background-color:rgb(239 43 24/var(--tw-bg-opacity,1))}.jwi-bg-\[\#f7f5ef\]{--tw-bg-opacity:1;background-color:rgb(247 245 239/var(--tw-bg-opacity,1))}.jwi-bg-\[\#fbf3db\]{--tw-bg-opacity:1;background-color:rgb(251 243 219/var(--tw-bg-opacity,1))}.jwi-bg-\[\#fff3f1\]{--tw-bg-opacity:1;background-color:rgb(255 243 241/var(--tw-bg-opacity,1))}.jwi-bg-transparent{background-color:transparent}.jwi-bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.jwi-bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}.jwi-from-white{--tw-gradient-from:#fff var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.jwi-to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.jwi-p-0{padding:0}.jwi-p-4{padding:1rem}.jwi-p-6{padding:1.5rem}.jwi-px-2\.5{padding-left:.625rem;padding-right:.625rem}.jwi-px-4{padding-left:1rem;padding-right:1rem}.jwi-px-5{padding-left:1.25rem;padding-right:1.25rem}.jwi-px-6{padding-left:1.5rem;padding-right:1.5rem}.jwi-px-7{padding-left:1.75rem;padding-right:1.75rem}.jwi-py-1{padding-top:.25rem;padding-bottom:.25rem}.jwi-py-3{padding-top:.75rem;padding-bottom:.75rem}.jwi-py-4{padding-top:1rem;padding-bottom:1rem}.jwi-py-8{padding-top:2rem;padding-bottom:2rem}.jwi-pb-3{padding-bottom:.75rem}.jwi-pl-5{padding-left:1.25rem}.jwi-pr-1{padding-right:.25rem}.jwi-pr-3{padding-right:.75rem}.jwi-pr-\[12px\]{padding-right:12px}.jwi-text-left{text-align:left}.jwi-font-sans{font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.jwi-text-\[14px\]{font-size:14px}.jwi-text-base{font-size:1rem;line-height:1.5rem}.jwi-text-sm{font-size:.875rem;line-height:1.25rem}.jwi-text-xs{font-size:.75rem;line-height:1rem}.jwi-font-medium{font-weight:500}.jwi-font-normal{font-weight:400}.jwi-font-semibold{font-weight:600}.jwi-tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.jwi-leading-\[1\.35\]{line-height:1.35}.jwi-leading-\[1\.4\]{line-height:1.4}.jwi-leading-none{line-height:1}.jwi-leading-snug{line-height:1.375}.jwi-text-\[\#111111\]{--tw-text-opacity:1;color:rgb(17 17 17/var(--tw-text-opacity,1))}.jwi-text-\[\#1b5e20\]{--tw-text-opacity:1;color:rgb(27 94 32/var(--tw-text-opacity,1))}.jwi-text-\[\#767676\]{--tw-text-opacity:1;color:rgb(118 118 118/var(--tw-text-opacity,1))}.jwi-text-\[\#8f2d21\]{--tw-text-opacity:1;color:rgb(143 45 33/var(--tw-text-opacity,1))}.jwi-text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.jwi-text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.jwi-opacity-25{opacity:.25}.jwi-opacity-75{opacity:.75}.jwi-opacity-95{opacity:.95}.jwi-shadow-\[0_1px_2px_rgba\(17\,17\,17\,0\.03\)\]{--tw-shadow:0 1px 2px hsla(0,0%,7%,.03);--tw-shadow-colored:0 1px 2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.jwi-shadow-\[0_8px_24px_rgba\(17\,17\,17\,0\.08\)\]{--tw-shadow:0 8px 24px hsla(0,0%,7%,.08);--tw-shadow-colored:0 8px 24px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.jwi-outline-none{outline:2px solid transparent;outline-offset:2px}.placeholder\:jwi-text-\[\#767676\]::-moz-placeholder{--tw-text-opacity:1;color:rgb(118 118 118/var(--tw-text-opacity,1))}.placeholder\:jwi-text-\[\#767676\]::placeholder{--tw-text-opacity:1;color:rgb(118 118 118/var(--tw-text-opacity,1))}.hover\:jwi-bg-\[\#d92817\]:hover{--tw-bg-opacity:1;background-color:rgb(217 40 23/var(--tw-bg-opacity,1))}.hover\:jwi-bg-\[\#f7f5f0\]:hover{--tw-bg-opacity:1;background-color:rgb(247 245 240/var(--tw-bg-opacity,1))}.hover\:jwi-text-\[\#444444\]:hover{--tw-text-opacity:1;color:rgb(68 68 68/var(--tw-text-opacity,1))}.hover\:jwi-underline:hover{text-decoration-line:underline}.focus\:jwi-border-\[\#111111\]:focus{--tw-border-opacity:1;border-color:rgb(17 17 17/var(--tw-border-opacity,1))}.disabled\:jwi-cursor-wait:disabled{cursor:wait}.disabled\:hover\:jwi-bg-\[\#ef2b18\]:hover:disabled{--tw-bg-opacity:1;background-color:rgb(239 43 24/var(--tw-bg-opacity,1))}@media (min-width:768px){.md\:jwi-max-w-\[220px\]{max-width:220px}.md\:jwi-flex-row{flex-direction:row}.md\:jwi-items-center{align-items:center}.md\:jwi-justify-between{justify-content:space-between}}

package/dist/JotulWidget.d.ts

@@ -1,35 +1,8 @@
-export type JotulWidgetType = 'productPage' | 'dealerFinder' | 'warrantyForm';
-export type WidgetAuthClientResponse = {
-    apiVersion?: string;
-    ok: boolean;
-    authorized?: boolean;
-    permissions?: {
-        dealers?: boolean;
-    };
-    error?: string;
-};
-export type DealerSearchResponse = {
-    apiVersion?: string;
-    ok: boolean;
-    type?: 'postalCode';
-    origin?: {
-        postalCode?: string | null;
-        postalCodeNumber?: number | null;
-        market?: string;
-    };
-    total?: number;
-    dealers?: Array<Record<string, unknown>>;
-    error?: string;
-};
-export type CheckWidgetAuthorizationOptions = {
-    endpoint?: string;
-    fetcher?: typeof fetch;
-};
-export type JotulWidgetProps = {
-    type?: string;
-    endpoint?: string;
-    className?: string;
-};
-export declare function checkWidgetAuthorization(options?: CheckWidgetAuthorizationOptions): Promise<WidgetAuthClientResponse>;
-export declare function searchDealersByPostalCode(postalCode: string, options?: CheckWidgetAuthorizationOptions): Promise<DealerSearchResponse>;
-export declare function JotulWidget({ type, endpoint, className, }: JotulWidgetProps): import("react/jsx-runtime").JSX.Element;
+import './JotulWidget.css';
+import { checkWidgetAuthorization, searchLocationSuggestions, searchDealersByCoordinates, searchDealersByPostalCode } from './api';
+import type { JotulWidgetProps } from './types';
+export { normalizeWidgetLocale } from './i18n/widgetStrings';
+export type { JotulWidgetLocale } from './i18n/widgetStrings';
+export { checkWidgetAuthorization, searchLocationSuggestions, searchDealersByCoordinates, searchDealersByPostalCode, };
+export type { CheckWidgetAuthorizationOptions, DealerSearchResponse, JotulWidgetProps, JotulWidgetType, WidgetAuthClientResponse, } from './types';
+export declare function JotulWidget({ type, endpoint, className, productName, locale: localeProp, brands, }: JotulWidgetProps): import("react/jsx-runtime").JSX.Element;

package/dist/JotulWidget.js

@@ -1,127 +1,129 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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: "h-4 w-4 shrink-0", 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: "h-5 w-5 shrink-0", 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: "h-4 w-4 shrink-0", 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 './JotulWidget.css';
+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);
@@ -135,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';
@@ -143,36 +159,88 @@ export function JotulWidget({ type, endpoint = '/api/jotul/widget', className, }
             return 'typeInvalid';
         return 'typeReady';
     }, [type]);
-    if (isLoading) {
-        return _jsx("div", { className: className, 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, children: ["JotulWidget auth failed: ", auth?.error ?? 'Unknown authorization error'] }));
-    }
-    if (typeState === 'typeMissing') {
-        return _jsx("div", { className: className, children: "JotulWidget type missing" });
-    }
-    if (typeState === 'typeInvalid') {
-        return _jsx("div", { className: className, 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, children: _jsxs("div", { className: "w-full rounded-[32px] border border-[#e9e5dc] bg-[#f8f6f2] p-4 text-[#111111] shadow-[0_6px_20px_rgba(17,17,17,0.04)] md:p-6", children: [_jsx("div", { className: "overflow-hidden rounded-[24px] border border-[#d8d2c7] bg-white", children: _jsxs("div", { className: "flex flex-col md:flex-row", children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3 px-5 py-4 md:px-6", children: [_jsx("span", { className: "text-black", 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: "w-full border-0 bg-transparent text-base text-[#111111] outline-none placeholder:text-[#767676]" })] }), _jsx("button", { type: "button", disabled: isSearching || !canSearch, onClick: async () => {
-                                        setIsSearching(true);
-                                        const result = await searchDealersByPostalCode(postalCode, { endpoint });
-                                        setSearchResult(result);
-                                        setIsSearching(false);
-                                    }, className: "min-h-[64px] bg-black px-8 text-base font-medium text-white transition hover:bg-[#1f1f1f] disabled:cursor-not-allowed disabled:bg-[#444444]", children: isSearching ? 'Finding...' : 'Find' })] }) }), searchResult?.ok === false && (_jsx("div", { className: "mt-4 rounded-2xl border border-[#f0c7c2] bg-[#fff3f1] px-4 py-3 text-sm text-[#8f2d21]", children: searchResult.error ?? 'Unknown widget error' })), searchResult?.ok && (_jsxs("div", { className: "mt-5", children: [_jsxs("div", { className: "border-b border-[#e6e1d7] pb-4 text-base font-medium text-[#111111]", children: [total, " dealers near you"] }), _jsx("div", { className: "mt-5 max-h-[700px] space-y-4 overflow-y-auto pr-1", children: dealers.map((dealer, index) => {
-                                    const addressLines = getDealerAddressLines(dealer);
-                                    const phone = asText(dealer.phone);
-                                    const distance = formatDistance(dealer);
-                                    return (_jsxs("div", { className: "rounded-[24px] border border-[#e6e1d7] bg-white p-5 shadow-[0_1px_2px_rgba(17,17,17,0.03)]", children: [_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsx("div", { className: "max-w-[70%]", children: _jsx("h3", { className: "text-[22px] font-semibold leading-[1.15] text-[#111111]", children: getDealerName(dealer) }) }), distance && (_jsx("div", { className: "rounded-full bg-[#fbf3db] px-4 py-2 text-xl font-medium leading-none text-[#111111]", children: distance }))] }), addressLines.length > 0 && (_jsx("div", { className: "mt-5 space-y-1 text-[18px] leading-[1.15] text-[#111111]", children: addressLines.map((line) => (_jsx("div", { children: line }, line))) })), _jsxs("div", { className: "mt-6 flex flex-col gap-4 md:flex-row md:items-center md:justify-between", children: [_jsxs("button", { type: "button", className: "inline-flex min-h-[70px] w-full items-center justify-between rounded-[16px] bg-[#ef2b18] px-7 text-[18px] font-medium text-white transition hover:bg-[#d92817] md:w-[390px]", children: [_jsx("span", { children: "Send foresporsel" }), _jsx(ArrowRightIcon, {})] }), phone && (_jsxs("a", { href: `tel:${phone.replace(/\s+/g, '')}`, className: "inline-flex items-center gap-3 text-[18px] font-medium text-[#111111] hover:underline", children: [_jsx(TelephoneIcon, {}), _jsx("span", { children: phone })] }))] })] }, getDealerKey(dealer, index)));
-                                }) })] }))] }) }));
-    }
-    return _jsx("div", { className: className, 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 {};