@jotul/jotul-widgets 0.0.4 → 1.0.1

package/dist/components/product-page/DealerList.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { R10 } from '../../constants';
+import { ArrowRightIcon } from '../../icons/ArrowRightIcon';
+import { TelephoneIcon } from '../../icons/TelephoneIcon';
+import { getWidgetPrimaryButtonPresentation } from '../../utils/widgetPrimaryButtonPresentation';
+import { asText, formatDistance, getDealerAddressLines, getDealerKey, getDealerName, } from '../../utils';
+export function DealerList({ dealers, total, selectedDealerName, t, buttonStyling, onStartInquiry, }) {
+    const inquiryCta = getWidgetPrimaryButtonPresentation(buttonStyling, 'panel', {
+        extraClassName: 'jwi-w-full jwi-max-w-full jwi-shrink-0 jwi-justify-between jwi-gap-2 md:jwi-max-w-[220px]',
+    });
+    return (_jsxs("div", { className: "jwi-flex jwi-flex-col", children: [_jsx("div", { className: "jwi--mx-6 jwi-w-auto jwi-flex-shrink-0 jwi-border-b jwi-border-[#e6e1d7] jwi-pb-3 jwi-px-6 jwi-text-sm jwi-font-medium jwi-text-[#111111]", children: t.dealersNearYou.replace('{count}', String(total)) }), _jsxs("div", { className: "jwi-relative jwi-mt-4", children: [_jsx("div", { className: "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: dealers.map((dealer, index) => {
+                            const addressLines = getDealerAddressLines(dealer);
+                            const phone = asText(dealer.phone);
+                            const distance = formatDistance(dealer);
+                            const dealerName = getDealerName(dealer, t.unknownDealer);
+                            const isSelectedDealer = selectedDealerName === dealerName;
+                            return (_jsxs("div", { className: `jwi-w-full ${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-min-w-0 jwi-max-w-[calc(100%-5rem)] jwi-pr-1", children: _jsx("h3", { className: "jwi-m-0 jwi-text-base jwi-font-semibold jwi-leading-snug jwi-text-[#111111]", children: dealerName }) }), distance && (_jsx("div", { className: `jwi-shrink-0 jwi-whitespace-nowrap ${R10} jwi-bg-[#fbf3db] jwi-px-2.5 jwi-py-1 jwi-text-xs jwi-font-medium jwi-leading-none jwi-text-[#111111]`, children: distance }))] }), addressLines.length > 0 && (_jsx("div", { className: "jwi-mt-3 jwi-flex jwi-flex-col jwi-gap-0.5 jwi-text-sm jwi-leading-snug jwi-text-[#111111]", children: addressLines.map((line) => (_jsx("div", { children: line }, line))) })), _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: [_jsxs("button", { type: "button", onClick: () => onStartInquiry(dealerName), className: inquiryCta.className, style: inquiryCta.style, children: [_jsx("span", { children: isSelectedDealer ? t.sendInquiryEditing : t.sendInquiryCta }), _jsx(ArrowRightIcon, { className: "jwi-h-[18px] jwi-w-[18px] jwi-shrink-0" })] }), phone && (_jsxs("a", { href: `tel:${phone.replace(/\s+/g, '')}`, className: "jwi-inline-flex jwi-min-w-0 jwi-items-center jwi-gap-2 jwi-text-sm jwi-font-normal jwi-tabular-nums jwi-text-[#111111] hover:jwi-underline", children: [_jsx(TelephoneIcon, {}), _jsx("span", { className: "jwi-break-all", children: phone })] }))] })] }, getDealerKey(dealer, index)));
+                        }) }), _jsx("div", { "aria-hidden": true, className: "jwi-pointer-events-none jwi-absolute jwi-bottom-0 jwi-left-0 jwi-right-0 jwi-h-10 jwi-bg-gradient-to-t jwi-from-white jwi-to-transparent" })] })] }));
+}

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

@@ -0,0 +1,13 @@
+import type { WidgetStrings } from '../../i18n/widgetStrings';
+import type { InquiryFormValues, JotulWidgetButtonStyling } from '../../types';
+type InquiryFormProps = {
+    t: WidgetStrings;
+    buttonStyling?: JotulWidgetButtonStyling;
+    inquiryValues: InquiryFormValues;
+    inquiryError: string | null;
+    onInquiryClose: () => void;
+    onInquirySubmit: () => void;
+    onInquiryFieldChange: (key: keyof InquiryFormValues, value: string) => void;
+};
+export declare function InquiryForm({ t, buttonStyling, inquiryValues, inquiryError, onInquiryClose, onInquirySubmit, onInquiryFieldChange, }: InquiryFormProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/product-page/InquiryForm.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { InquiryField } from '../InquiryField';
+import { R10 } from '../../constants';
+import { ArrowRightIcon } from '../../icons/ArrowRightIcon';
+import { getWidgetPrimaryButtonPresentation } from '../../utils/widgetPrimaryButtonPresentation';
+export function InquiryForm({ t, buttonStyling, inquiryValues, inquiryError, onInquiryClose, onInquirySubmit, onInquiryFieldChange, }) {
+    const submitButton = getWidgetPrimaryButtonPresentation(buttonStyling, 'panel', {
+        extraClassName: 'jwi-mt-4 jwi-w-full',
+    });
+    const trimmedProductName = inquiryValues.productName.trim();
+    const title = trimmedProductName !== ''
+        ? t.sendInquiryTitleWithProduct.replace('{product}', trimmedProductName)
+        : t.sendInquiryTitle;
+    return (_jsxs("form", { onSubmit: (event) => {
+            event.preventDefault();
+            onInquirySubmit();
+        }, className: `jwi-w-full ${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("button", { type: "button", onClick: onInquiryClose, className: "jwi-mb-3 jwi-inline-flex jwi-w-fit jwi-cursor-pointer jwi-items-center jwi-gap-1.5 jwi-border-0 jwi-bg-transparent jwi-p-0 jwi-text-left jwi-text-sm jwi-font-medium jwi-text-[#767676] hover:jwi-text-[#444444]", children: [_jsx("span", { className: "jwi-inline-flex jwi-shrink-0", style: { transform: 'scaleX(-1)' }, "aria-hidden": true, children: _jsx(ArrowRightIcon, { className: "jwi-h-[14px] jwi-w-[14px]" }) }), t.goBack] }), _jsx("input", { type: "hidden", name: "product", value: inquiryValues.productName }), _jsx("input", { type: "hidden", name: "dealer", value: inquiryValues.dealerName }), _jsxs("div", { className: "jwi-min-w-0", children: [_jsx("h3", { className: "jwi-m-0 jwi-text-base jwi-font-semibold jwi-leading-snug jwi-text-[#111111]", children: title }), _jsx("p", { className: "jwi-m-0 jwi-mt-2 jwi-text-sm jwi-leading-[1.4] jwi-text-[#767676]", children: t.dealerWillContact.replace('{dealer}', inquiryValues.dealerName) })] }), _jsxs("div", { className: "jwi-mt-4 jwi-flex jwi-flex-col jwi-gap-3", children: [_jsx(InquiryField, { label: t.fieldName, value: inquiryValues.name, onChange: (value) => onInquiryFieldChange('name', value) }), _jsx(InquiryField, { label: t.fieldEmail, type: "email", value: inquiryValues.email, onChange: (value) => onInquiryFieldChange('email', value) }), _jsx(InquiryField, { label: t.fieldPhone, type: "tel", value: inquiryValues.phone, onChange: (value) => onInquiryFieldChange('phone', value) }), _jsx(InquiryField, { label: t.fieldComment, multiline: true, value: inquiryValues.comment, onChange: (value) => onInquiryFieldChange('comment', value) })] }), inquiryError && (_jsx("div", { className: `jwi-mt-4 ${R10} jwi-border jwi-border-[#f0c7c2] jwi-bg-[#fff3f1] jwi-px-4 jwi-py-3 jwi-text-sm jwi-leading-[1.4] jwi-text-[#8f2d21]`, children: inquiryError })), _jsx("button", { type: "submit", className: submitButton.className, style: submitButton.style, children: t.sendInquiryCta })] }));
+}

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

@@ -0,0 +1,15 @@
+import type { WidgetStrings } from '../../i18n/widgetStrings';
+import type { LocationSuggestion } from '../../types';
+type LocationSearchProps = {
+    t: WidgetStrings;
+    isManualSearchEnabled: boolean;
+    query: string;
+    suggestions: LocationSuggestion[];
+    suggestionsOpen: boolean;
+    isSuggestionsLoading: boolean;
+    onQueryChange: (value: string) => void;
+    onSuggestionSelect: (suggestion: LocationSuggestion) => void;
+    onDismissSuggestions: () => void;
+};
+export declare function LocationSearch({ t, isManualSearchEnabled, query, suggestions, suggestionsOpen, isSuggestionsLoading, onQueryChange, onSuggestionSelect, onDismissSuggestions, }: LocationSearchProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/product-page/LocationSearch.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { R10 } from '../../constants';
+import { PinIcon } from '../../icons/PinIcon';
+export function LocationSearch({ t, isManualSearchEnabled, query, suggestions, suggestionsOpen, isSuggestionsLoading, onQueryChange, onSuggestionSelect, onDismissSuggestions, }) {
+    const hasQuery = query.trim().length > 0;
+    const showSuggestions = isManualSearchEnabled && hasQuery && suggestionsOpen;
+    const queryLength = query.trim().length;
+    const rootRef = useRef(null);
+    const inputRef = useRef(null);
+    useEffect(() => {
+        function handleOutsideClick(event) {
+            if (!showSuggestions)
+                return;
+            if (!rootRef.current?.contains(event.target)) {
+                onDismissSuggestions();
+            }
+        }
+        document.addEventListener('mousedown', handleOutsideClick);
+        return () => {
+            document.removeEventListener('mousedown', handleOutsideClick);
+        };
+    }, [onDismissSuggestions, showSuggestions]);
+    return (_jsxs("div", { ref: rootRef, className: "jwi-relative jwi-w-full jwi-flex-shrink-0", children: [_jsx("div", { className: `jwi-w-full jwi-overflow-hidden ${R10} jwi-border jwi-border-[#d8d2c7] jwi-bg-white`, children: _jsx("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-bg-[#FCFCFC] jwi-px-5", children: [_jsx("span", { className: "jwi-inline-flex jwi-shrink-0 jwi-text-black", children: _jsx(PinIcon, {}) }), _jsx("input", { ref: inputRef, type: "text", value: query, readOnly: !isManualSearchEnabled, placeholder: isManualSearchEnabled ? t.locationManualHint : t.useLocationHint, "aria-label": t.useLocationHint, onChange: (event) => onQueryChange(event.target.value), onKeyDown: (event) => {
+                                    if (event.key === 'Escape') {
+                                        onDismissSuggestions();
+                                        inputRef.current?.blur();
+                                    }
+                                }, className: "jwi-min-w-0 jwi-h-[60px] jwi-w-full jwi-flex-1 jwi-border-0 jwi-bg-transparent jwi-text-[14px] jwi-leading-[1.4] jwi-text-[#111111] jwi-outline-none placeholder:jwi-text-[#767676]" })] }) }) }), showSuggestions && (_jsxs("div", { className: `jwi-absolute jwi-z-20 jwi-mt-1 jwi-w-full ${R10} jwi-border jwi-border-[#d8d2c7] jwi-bg-white jwi-shadow-[0_8px_24px_rgba(17,17,17,0.08)]`, children: [isSuggestionsLoading && (_jsx("div", { className: "jwi-px-4 jwi-py-3 jwi-text-sm jwi-text-[#767676]", children: t.finding })), !isSuggestionsLoading && queryLength < 3 && (_jsx("div", { className: "jwi-px-4 jwi-py-3 jwi-text-sm jwi-text-[#767676]", children: t.locationTypeMore })), !isSuggestionsLoading && queryLength >= 3 && suggestions.length === 0 && (_jsx("div", { className: "jwi-px-4 jwi-py-3 jwi-text-sm jwi-text-[#767676]", children: t.locationNoResults })), !isSuggestionsLoading &&
+                        suggestions.map((suggestion, index) => (_jsx("button", { type: "button", onClick: () => onSuggestionSelect(suggestion), className: "jwi-flex jwi-w-full jwi-cursor-pointer jwi-items-start jwi-border-0 jwi-bg-white jwi-px-4 jwi-py-3 jwi-text-left jwi-text-sm jwi-leading-[1.35] jwi-text-[#111111] hover:jwi-bg-[#f7f5f0]", children: suggestion.label }, `${suggestion.latitude}-${suggestion.longitude}-${index}`)))] }))] }));
+}

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

@@ -0,0 +1,6 @@
+type StatusBannerProps = {
+    tone: 'error' | 'success';
+    children: string;
+};
+export declare function StatusBanner({ tone, children }: StatusBannerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/product-page/StatusBanner.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { R10 } from '../../constants';
+export function StatusBanner({ tone, children }) {
+    const toneClass = tone === 'success'
+        ? 'jwi-border-[#b7e5c2] jwi-bg-[#eefbf2] jwi-text-[#1b5e20]'
+        : 'jwi-border-[#f0c7c2] jwi-bg-[#fff3f1] jwi-text-[#8f2d21]';
+    return (_jsx("div", { className: `jwi-w-full jwi-flex-shrink-0 ${R10} jwi-border jwi-px-4 jwi-py-3 jwi-text-sm jwi-leading-[1.4] ${toneClass}`, children: children }));
+}

package/dist/constants.d.ts

@@ -0,0 +1,3 @@
+/** 10px radius for widget chrome (matches design spec). */
+export declare const R10 = "jwi-rounded-[10px]";
+export declare const FIND_DEALER_BUTTON_CLASS = "jwi-inline-flex jwi-w-full jwi-min-h-[56px] jwi-cursor-pointer jwi-items-center jwi-justify-center jwi-rounded-[10px] jwi-border-0 jwi-bg-[#ef2b18] jwi-px-7 jwi-text-base jwi-font-medium jwi-text-white hover:jwi-bg-[#d92817] disabled:jwi-cursor-wait disabled:hover:jwi-bg-[#ef2b18]";

package/dist/constants.js

@@ -0,0 +1,3 @@
+/** 10px radius for widget chrome (matches design spec). */
+export const R10 = 'jwi-rounded-[10px]';
+export const FIND_DEALER_BUTTON_CLASS = `jwi-inline-flex jwi-w-full jwi-min-h-[56px] jwi-cursor-pointer jwi-items-center jwi-justify-center ${R10} jwi-border-0 jwi-bg-[#ef2b18] jwi-px-7 jwi-text-base jwi-font-medium jwi-text-white hover:jwi-bg-[#d92817] disabled:jwi-cursor-wait disabled:hover:jwi-bg-[#ef2b18]`;

package/dist/i18n/widgetStrings.d.ts

@@ -0,0 +1,39 @@
+export type JotulWidgetLocale = 'no' | 'se';
+export type WidgetStrings = {
+    genericWidgetError: string;
+    invalidPostcodeError: string;
+    invalidWidgetTypeError: string;
+    locationSearchFailed: string;
+    locationUnavailableBrowser: string;
+    locationPermissionDenied: string;
+    locationPositionUnavailable: string;
+    locationTimeout: string;
+    locationGenericFailure: string;
+    locationTypeMore: string;
+    locationNoResults: string;
+    locationManualHint: string;
+    findDealer: string;
+    loading: string;
+    useLocationHint: string;
+    find: string;
+    finding: string;
+    inquirySentSuccess: string;
+    goBack: string;
+    sendInquiryTitle: string;
+    sendInquiryTitleWithProduct: string;
+    dealerWillContact: string;
+    fieldName: string;
+    fieldEmail: string;
+    fieldPhone: string;
+    fieldComment: string;
+    formValidationRequired: string;
+    formValidationEmail: string;
+    dealersNearYou: string;
+    unknownDealer: string;
+    sendInquiryCta: string;
+    sendInquiryEditing: string;
+    readyDealerFinder: string;
+    readyWarrantyForm: string;
+};
+export declare const WIDGET_STRINGS: Record<JotulWidgetLocale, WidgetStrings>;
+export declare function normalizeWidgetLocale(raw: string | undefined): JotulWidgetLocale;

package/dist/i18n/widgetStrings.js

@@ -0,0 +1,87 @@
+export const WIDGET_STRINGS = {
+    no: {
+        genericWidgetError: 'Forhandlerkartet er ikke tilgjengelig akkurat nå. Prøv igjen senere.',
+        invalidPostcodeError: 'Skriv inn et gyldig postnummer.',
+        invalidWidgetTypeError: 'Denne widgeten er ikke tilgjengelig akkurat nå.',
+        locationSearchFailed: 'Stedsøk kunne ikke fullføres. Prøv igjen.',
+        locationUnavailableBrowser: 'Posisjon er ikke tilgjengelig i denne nettleseren. Prøv en annen nettleser eller enhet.',
+        locationPermissionDenied: 'Tilgang til posisjon ble avslått. Tillat posisjon for dette nettstedet for å finne nærmeste forhandler.',
+        locationPositionUnavailable: 'Posisjonen din kunne ikke bestemmes. Prøv igjen om et øyeblikk.',
+        locationTimeout: 'Det tok for lang tid å finne posisjonen din. Prøv igjen.',
+        locationGenericFailure: 'Kunne ikke lese posisjonen din. Prøv igjen.',
+        locationTypeMore: 'Skriv minst 3 tegn for å søke etter en adresse.',
+        locationNoResults: 'Ingen adresser ble funnet. Prøv et annet søk.',
+        locationManualHint: 'Skriv inn adressen din for å finne forhandlere i nærheten',
+        findDealer: 'Finn forhandler',
+        loading: 'Laster …',
+        useLocationHint: 'Bruk posisjonen din for å finne forhandlere i nærheten',
+        find: 'Lokaliser',
+        finding: 'Lokaliserer …',
+        inquirySentSuccess: 'Forespørselen din er sendt.',
+        goBack: 'Tilbake',
+        sendInquiryTitle: 'Forespørsel',
+        sendInquiryTitleWithProduct: 'Forespørsel om {product}',
+        dealerWillContact: '{dealer} vil kontakte deg så snart som mulig.',
+        fieldName: 'Navn',
+        fieldEmail: 'E-post',
+        fieldPhone: 'Telefon',
+        fieldComment: 'Kommentar',
+        formValidationRequired: 'Fyll inn navn, e-post og telefon.',
+        formValidationEmail: 'Skriv inn en gyldig e-postadresse.',
+        dealersNearYou: '{count} forhandlere i nærheten',
+        unknownDealer: 'Ukjent forhandler',
+        sendInquiryCta: 'Send forespørsel',
+        sendInquiryEditing: 'Redigerer forespørsel',
+        readyDealerFinder: 'JotulWidget klar: dealerFinder',
+        readyWarrantyForm: 'JotulWidget klar: warrantyForm',
+    },
+    se: {
+        genericWidgetError: 'Aterforsaljarsokaren ar inte tillganglig just nu. Forsok igen senare.',
+        invalidPostcodeError: 'Ange ett giltigt postnummer.',
+        invalidWidgetTypeError: 'Den har widgeten ar inte tillganglig just nu.',
+        locationSearchFailed: 'Platssokningen kunde inte slutföras. Forsok igen.',
+        locationUnavailableBrowser: 'Position ar inte tillganglig i den har webblasaren. Prova en annan webblasare eller enhet.',
+        locationPermissionDenied: 'Platsatkomst nekades. Tillat plats for den har sidan for att hitta narmsta aterforsaljare.',
+        locationPositionUnavailable: 'Din plats kunde inte faststallas. Forsok igen om en stund.',
+        locationTimeout: 'Det tog for lang tid att hitta din plats. Forsok igen.',
+        locationGenericFailure: 'Det gick inte att lasa din plats. Forsok igen.',
+        locationTypeMore: 'Skriv minst 3 tecken for att soka efter en adress.',
+        locationNoResults: 'Inga matchande adresser hittades. Prova en annan sokning.',
+        locationManualHint: 'Ange din adress for att hitta aterforsaljare i narheten',
+        findDealer: 'Hitta aterforsaljare',
+        loading: 'Laddar …',
+        useLocationHint: 'Anvand din plats for att hitta aterforsaljare i narheten',
+        find: 'Lokalisera',
+        finding: 'Soker …',
+        inquirySentSuccess: 'Din forfragan har skickats.',
+        goBack: 'Ga tillbaka',
+        sendInquiryTitle: 'Forfragan',
+        sendInquiryTitleWithProduct: 'Forfragan om {product}',
+        dealerWillContact: '{dealer} kontaktar dig sa snart som mojligt.',
+        fieldName: 'Namn',
+        fieldEmail: 'E-post',
+        fieldPhone: 'Telefon',
+        fieldComment: 'Kommentar',
+        formValidationRequired: 'Fyll i namn, e-post och telefon.',
+        formValidationEmail: 'Ange en giltig e-postadress.',
+        dealersNearYou: '{count} aterforsaljare i narheten',
+        unknownDealer: 'Okand aterforsaljare',
+        sendInquiryCta: 'Skicka forfragan',
+        sendInquiryEditing: 'Redigerar forfragan',
+        readyDealerFinder: 'JotulWidget klar: dealerFinder',
+        readyWarrantyForm: 'JotulWidget klar: warrantyForm',
+    },
+};
+export function normalizeWidgetLocale(raw) {
+    if (raw == null || raw.trim() === '') {
+        return 'no';
+    }
+    const n = raw.trim().toLowerCase();
+    if (n === 'no' || n === 'nb' || n === 'nn') {
+        return 'no';
+    }
+    if (n === 'se' || n === 'sv') {
+        return 'se';
+    }
+    return 'no';
+}

package/dist/icons/ArrowRightIcon.d.ts

@@ -0,0 +1,5 @@
+type ArrowRightIconProps = {
+    className?: string;
+};
+export declare function ArrowRightIcon({ className, }: ArrowRightIconProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/icons/ArrowRightIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ArrowRightIcon({ className = 'jwi-h-[22px] jwi-w-[22px] jwi-shrink-0', }) {
+    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: className, 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" }) }));
+}

package/dist/icons/ButtonSpinner.d.ts

@@ -0,0 +1,5 @@
+type ButtonSpinnerProps = {
+    className?: string;
+};
+export declare function ButtonSpinner({ className, }: ButtonSpinnerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/icons/ButtonSpinner.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ButtonSpinner({ className = 'jwi-h-5 jwi-w-5 jwi-shrink-0 jwi-animate-spin jwi-text-white', }) {
+    return (_jsxs("svg", { className: className, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "aria-hidden": "true", children: [_jsx("circle", { className: "jwi-opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "jwi-opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }));
+}

package/dist/icons/PinIcon.d.ts

@@ -0,0 +1,5 @@
+type PinIconProps = {
+    className?: string;
+};
+export declare function PinIcon({ className, }: PinIconProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/icons/PinIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function PinIcon({ className = 'jwi-h-4 jwi-w-4 jwi-shrink-0', }) {
+    return (_jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", className: className, children: [_jsx("path", { d: "M20 10C20 14.4183 12 22 12 22C12 22 4 14.4183 4 10C4 5.58172 7.58172 2 12 2C16.4183 2 20 5.58172 20 10Z", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M12 11C12.5523 11 13 10.5523 13 10C13 9.44772 12.5523 9 12 9C11.4477 9 11 9.44772 11 10C11 10.5523 11.4477 11 12 11Z", fill: "currentColor", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+}

package/dist/icons/TelephoneIcon.d.ts

@@ -0,0 +1,5 @@
+type TelephoneIconProps = {
+    className?: string;
+};
+export declare function TelephoneIcon({ className, }: TelephoneIconProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/icons/TelephoneIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function TelephoneIcon({ className = 'jwi-h-4 jwi-w-4 jwi-shrink-0', }) {
+    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: className, 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" }) }));
+}

package/dist/index.d.ts

@@ -1 +1 @@
-export { checkWidgetAuthorization, searchDealersByPostalCode, JotulWidget, type CheckWidgetAuthorizationOptions, type DealerSearchResponse, type JotulWidgetProps, type JotulWidgetType, type WidgetAuthClientResponse, } from './JotulWidget';
+export { checkWidgetAuthorization, normalizeWidgetLocale, searchDealersByCoordinates, searchDealersByPostalCode, JotulWidget, type CheckWidgetAuthorizationOptions, type DealerSearchResponse, type JotulWidgetButtonStyling, type JotulWidgetLocale, type JotulWidgetProps, type JotulWidgetStyling, type JotulWidgetType, type WidgetAuthClientResponse, } from './JotulWidget';

package/dist/index.js

@@ -1,2 +1,2 @@
 'use client';
-export { checkWidgetAuthorization, searchDealersByPostalCode, JotulWidget, } from './JotulWidget';
+export { checkWidgetAuthorization, normalizeWidgetLocale, searchDealersByCoordinates, searchDealersByPostalCode, JotulWidget, } from './JotulWidget';

package/dist/types.d.ts

@@ -0,0 +1,69 @@
+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' | 'geolocation';
+    origin?: {
+        postalCode?: string | null;
+        postalCodeNumber?: number | null;
+        latitude?: number;
+        longitude?: number;
+        market?: string;
+    };
+    total?: number;
+    dealers?: Array<Record<string, unknown>>;
+    error?: string;
+};
+export type LocationSuggestion = {
+    label: string;
+    latitude: number;
+    longitude: number;
+};
+export type LocationAutocompleteResponse = {
+    ok: boolean;
+    type?: 'autocomplete';
+    suggestions?: LocationSuggestion[];
+    error?: string;
+};
+export type CheckWidgetAuthorizationOptions = {
+    endpoint?: string;
+    fetcher?: typeof fetch;
+    locale?: string;
+    brands?: string[];
+};
+/** CSS values for primary CTA buttons (find dealer, send inquiry, etc.). */
+export type JotulWidgetButtonStyling = {
+    borderRadius?: string;
+    backgroundColor?: string;
+    textColor?: string;
+};
+export type JotulWidgetStyling = {
+    button?: JotulWidgetButtonStyling;
+};
+export type JotulWidgetProps = {
+    type?: string;
+    endpoint?: string;
+    className?: string;
+    productName?: string;
+    locale?: string;
+    brands?: string[];
+    styling?: JotulWidgetStyling;
+};
+export type DealerRecord = Record<string, unknown>;
+export type InquiryFormValues = {
+    productName: string;
+    dealerName: string;
+    name: string;
+    email: string;
+    phone: string;
+    comment: string;
+};

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/widgetPrimaryButtonPresentation.d.ts

@@ -0,0 +1,14 @@
+import type { CSSProperties } from 'react';
+import type { JotulWidgetButtonStyling } from '../types';
+export type PrimaryButtonVariant = 'hero' | 'panel';
+/**
+ * Primary CTA buttons share the same visual tokens; optional `styling.button`
+ * overrides border radius, background, and text color (CSS values).
+ */
+export declare function getWidgetPrimaryButtonPresentation(buttonStyling: JotulWidgetButtonStyling | undefined, variant: PrimaryButtonVariant, options?: {
+    disabledWait?: boolean;
+    extraClassName?: string;
+}): {
+    className: string;
+    style: CSSProperties;
+};

package/dist/utils/widgetPrimaryButtonPresentation.js

@@ -0,0 +1,36 @@
+const HERO_LAYOUT = 'jwi-inline-flex jwi-w-full jwi-min-h-[56px] jwi-cursor-pointer jwi-items-center jwi-justify-center jwi-border-0 jwi-px-7 jwi-text-base jwi-font-medium';
+const PANEL_LAYOUT = 'jwi-inline-flex jwi-min-h-[48px] jwi-cursor-pointer jwi-items-center jwi-justify-center jwi-border-0 jwi-px-4 jwi-text-sm jwi-font-medium';
+/**
+ * Primary CTA buttons share the same visual tokens; optional `styling.button`
+ * overrides border radius, background, and text color (CSS values).
+ */
+export function getWidgetPrimaryButtonPresentation(buttonStyling, variant, options) {
+    const b = buttonStyling;
+    const style = {};
+    if (b?.borderRadius?.trim()) {
+        style.borderRadius = b.borderRadius.trim();
+    }
+    if (b?.backgroundColor?.trim()) {
+        style.backgroundColor = b.backgroundColor.trim();
+    }
+    if (b?.textColor?.trim()) {
+        style.color = b.textColor.trim();
+    }
+    const layout = variant === 'hero' ? HERO_LAYOUT : PANEL_LAYOUT;
+    const parts = [layout, options?.extraClassName?.trim()].filter((p) => typeof p === 'string' && p.length > 0);
+    if (!b?.borderRadius?.trim()) {
+        parts.push('jwi-rounded-[10px]');
+    }
+    if (!b?.backgroundColor?.trim()) {
+        parts.push('jwi-bg-[#ef2b18] hover:jwi-bg-[#d92817]');
+    }
+    if (!b?.textColor?.trim()) {
+        parts.push('jwi-text-white');
+    }
+    if (options?.disabledWait &&
+        variant === 'hero' &&
+        !b?.backgroundColor?.trim()) {
+        parts.push('disabled:jwi-cursor-wait disabled:hover:jwi-bg-[#ef2b18]');
+    }
+    return { className: parts.join(' '), style };
+}

package/dist/utils.d.ts

@@ -0,0 +1,13 @@
+import type { DealerRecord, InquiryFormValues, JotulWidgetType } from './types';
+import type { WidgetStrings } from './i18n/widgetStrings';
+export declare const VALID_WIDGET_TYPES: JotulWidgetType[];
+export declare function isWidgetType(value: string | undefined): value is JotulWidgetType;
+export declare function asText(value: unknown): string | null;
+export declare function formatDistance(dealer: DealerRecord): string | null;
+export declare function getDealerKey(dealer: DealerRecord, index: number): string;
+export declare function getDealerName(dealer: DealerRecord, unknownLabel: string): string;
+export declare function getDealerAddressLines(dealer: DealerRecord): string[];
+export declare function createInquiryFormValues(productName: string | undefined, dealerName: string): InquiryFormValues;
+export declare function isValidEmail(value: string): boolean;
+export declare function getSafeWidgetErrorMessage(error: unknown, t: WidgetStrings): string;
+export declare function renderReadyState(type: JotulWidgetType, t: WidgetStrings): string | null;

package/dist/utils.js

@@ -0,0 +1,75 @@
+export const VALID_WIDGET_TYPES = [
+    'productPage',
+    'dealerFinder',
+    'warrantyForm',
+];
+export function isWidgetType(value) {
+    return value != null && VALID_WIDGET_TYPES.includes(value);
+}
+export function asText(value) {
+    return typeof value === 'string' && value.trim() ? value.trim() : null;
+}
+function asNumber(value) {
+    return typeof value === 'number' && Number.isFinite(value) ? value : null;
+}
+export 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;
+}
+export function getDealerKey(dealer, index) {
+    return String(dealer.dealerId ?? dealer.name ?? index);
+}
+export function getDealerName(dealer, unknownLabel) {
+    return asText(dealer.name) ?? asText(dealer.dealerId) ?? unknownLabel;
+}
+export function getDealerAddressLines(dealer) {
+    const address = asText(dealer.address);
+    const postalCode = asText(dealer.postalCode);
+    return [address, postalCode].filter((value) => Boolean(value));
+}
+export function createInquiryFormValues(productName, dealerName) {
+    return {
+        productName: productName?.trim() ?? '',
+        dealerName,
+        name: '',
+        email: '',
+        phone: '',
+        comment: '',
+    };
+}
+export function isValidEmail(value) {
+    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
+}
+export function getSafeWidgetErrorMessage(error, t) {
+    if (typeof error !== 'string') {
+        return t.genericWidgetError;
+    }
+    const normalized = error.trim();
+    if (!normalized) {
+        return t.genericWidgetError;
+    }
+    if (/postcode|postnummer/i.test(normalized)) {
+        return t.invalidPostcodeError;
+    }
+    if (/location search could not be completed|stedsøk kunne ikke fullføres/i.test(normalized)) {
+        return t.locationSearchFailed;
+    }
+    return t.genericWidgetError;
+}
+export function renderReadyState(type, t) {
+    switch (type) {
+        case 'productPage':
+            return null;
+        case 'dealerFinder':
+            return t.readyDealerFinder;
+        case 'warrantyForm':
+            return t.readyWarrantyForm;
+    }
+}

package/dist/widgets/ProductPageWidget.d.ts

@@ -0,0 +1 @@
+export { ProductPageWidget } from '../components/ProductPageWidget';

package/dist/widgets/ProductPageWidget.js

@@ -0,0 +1 @@
+export { ProductPageWidget } from '../components/ProductPageWidget';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jotul/jotul-widgets",
-  "version": "0.0.4",
+  "version": "1.0.1",
   "type": "module",
   "license": "UNLICENSED",
   "sideEffects": [
@@ -18,9 +18,18 @@
       "default": "./dist/index.js"
     }
   },
+  "devDependencies": {
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^3.4.17"
+  },
   "scripts": {
-    "build": "tsc -p tsconfig.build.json && cp src/JotulWidget.css dist/JotulWidget.css",
+    "build:css": "tailwindcss -i ./src/tw-entry.css -o ./dist/JotulWidget.css --minify",
+    "build": "tsc -p tsconfig.build.json && npm run build:css",
     "clean": "rm -rf dist",
+    "watch:css": "tailwindcss -i ./src/tw-entry.css -o ./dist/JotulWidget.css --watch",
+    "watch:ts": "tsc -p tsconfig.build.json -w --preserveWatchOutput",
+    "watch": "sh -c 'npm run watch:ts & npm run watch:css & wait'",
     "prepublishOnly": "npm run clean && npm run build"
   },
   "peerDependencies": {