@jotul/jotul-widgets 0.0.2 → 0.0.4

package/dist/JotulWidget.css

@@ -0,0 +1,253 @@
+.jwi-root {
+  width: 100%;
+  color: #111111;
+  font-family:
+    Inter,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
+}
+
+.jwi-shell {
+  width: 100%;
+  border: 1px solid #e9e5dc;
+  border-radius: 32px;
+  background: #f8f6f2;
+  padding: 16px;
+  box-shadow: 0 6px 20px rgba(17, 17, 17, 0.04);
+}
+
+.jwi-searchBox {
+  overflow: hidden;
+  border: 1px solid #d8d2c7;
+  border-radius: 24px;
+  background: #ffffff;
+}
+
+.jwi-searchRow {
+  display: flex;
+  flex-direction: column;
+}
+
+.jwi-inputWrap {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 20px;
+}
+
+.jwi-pin {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: #000000;
+}
+
+.jwi-input {
+  width: 100%;
+  border: 0;
+  background: transparent;
+  color: #111111;
+  font-size: 16px;
+  line-height: 1.4;
+  outline: none;
+}
+
+.jwi-input::placeholder {
+  color: #767676;
+}
+
+.jwi-findButton {
+  min-height: 64px;
+  border: 0;
+  background: #000000;
+  padding: 0 32px;
+  color: #ffffff;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.jwi-findButton:hover {
+  background: #1f1f1f;
+}
+
+.jwi-findButton:disabled {
+  cursor: not-allowed;
+  background: #444444;
+}
+
+.jwi-error {
+  margin-top: 16px;
+  border: 1px solid #f0c7c2;
+  border-radius: 16px;
+  background: #fff3f1;
+  padding: 12px 16px;
+  color: #8f2d21;
+  font-size: 14px;
+  line-height: 1.4;
+}
+
+.jwi-results {
+  margin-top: 20px;
+}
+
+.jwi-resultsHeader {
+  border-bottom: 1px solid #e6e1d7;
+  padding-bottom: 16px;
+  color: #111111;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.jwi-resultsList {
+  margin-top: 20px;
+  display: flex;
+  max-height: 700px;
+  flex-direction: column;
+  gap: 16px;
+  overflow-y: auto;
+  padding-right: 4px;
+}
+
+.jwi-card {
+  border: 1px solid #e6e1d7;
+  border-radius: 24px;
+  background: #ffffff;
+  padding: 20px;
+  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.03);
+}
+
+.jwi-cardTop {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.jwi-cardTitleWrap {
+  max-width: 70%;
+}
+
+.jwi-cardTitle {
+  margin: 0;
+  color: #111111;
+  font-size: 22px;
+  font-weight: 600;
+  line-height: 1.15;
+}
+
+.jwi-distance {
+  border-radius: 9999px;
+  background: #fbf3db;
+  padding: 8px 16px;
+  color: #111111;
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.jwi-address {
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  color: #111111;
+  font-size: 18px;
+  line-height: 1.15;
+}
+
+.jwi-cardActions {
+  margin-top: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.jwi-cta {
+  display: inline-flex;
+  min-height: 70px;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  border: 0;
+  border-radius: 16px;
+  background: #ef2b18;
+  padding: 0 28px;
+  color: #ffffff;
+  font-size: 18px;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.jwi-cta:hover {
+  background: #d92817;
+}
+
+.jwi-phoneLink {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  color: #111111;
+  font-size: 18px;
+  font-weight: 500;
+  text-decoration: none;
+}
+
+.jwi-phoneLink:hover {
+  text-decoration: underline;
+}
+
+.jwi-icon16 {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.jwi-icon22 {
+  width: 22px;
+  height: 22px;
+  flex-shrink: 0;
+}
+
+.jwi-loading,
+.jwi-message {
+  color: #111111;
+  font-family:
+    Inter,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
+}
+
+@media (min-width: 768px) {
+  .jwi-shell {
+    padding: 24px;
+  }
+
+  .jwi-searchRow {
+    flex-direction: row;
+  }
+
+  .jwi-inputWrap {
+    padding: 16px 24px;
+  }
+
+  .jwi-cardActions {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .jwi-cta {
+    width: 390px;
+  }
+}

package/dist/JotulWidget.d.ts

@@ -1,3 +1,4 @@
+import './JotulWidget.css';
 export type JotulWidgetType = 'productPage' | 'dealerFinder' | 'warrantyForm';
 export type WidgetAuthClientResponse = {
     apiVersion?: string;

package/dist/JotulWidget.js

@@ -1,11 +1,49 @@
 '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;
@@ -107,25 +145,35 @@ export function JotulWidget({ type, endpoint = '/api/jotul/widget', className, }
         return 'typeReady';
     }, [type]);
     if (isLoading) {
-        return _jsx("div", { className: className, children: "Loading JotulWidget\u2026" });
+        return _jsx("div", { className: className ? `jwi-loading ${className}` : 'jwi-loading', children: "Loading JotulWidget\u2026" });
     }
     if (!auth?.ok || !auth.authorized) {
-        return (_jsxs("div", { className: className, children: ["JotulWidget auth failed: ", auth?.error ?? 'Unknown authorization error'] }));
+        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, children: "JotulWidget type missing" });
+        return _jsx("div", { className: className ? `jwi-message ${className}` : 'jwi-message', children: "JotulWidget type missing" });
     }
     if (typeState === 'typeInvalid') {
-        return _jsx("div", { className: className, children: "Invalid widget type" });
+        return _jsx("div", { className: className ? `jwi-message ${className}` : 'jwi-message', children: "Invalid widget type" });
     }
     if (type === 'productPage') {
-        const dealers = searchResult?.dealers ?? [];
-        return (_jsx("div", { className: className, children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("input", { type: "text", value: postalCode, onChange: (event) => setPostalCode(event.target.value), placeholder: "Zipcode" }), _jsx("button", { type: "button", disabled: isSearching || postalCode.trim().length === 0, onClick: async () => {
-                            setIsSearching(true);
-                            const result = await searchDealersByPostalCode(postalCode, { endpoint });
-                            setSearchResult(result);
-                            setIsSearching(false);
-                        }, children: isSearching ? 'Searching…' : 'Search' }), searchResult?.ok === false && (_jsx("div", { children: searchResult.error ?? 'Unknown widget error' })), searchResult?.ok && (_jsx("ul", { children: dealers.map((dealer, index) => (_jsx("li", { children: String(dealer.name ?? dealer.dealerId ?? 'Unknown dealer') }, String(dealer.dealerId ?? dealer.name ?? index)))) }))] }) }));
-    }
-    return _jsx("div", { className: className, children: renderReadyState(type) });
+        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) });
 }

package/package.json

@@ -1,9 +1,11 @@
 {
   "name": "@jotul/jotul-widgets",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "type": "module",
   "license": "UNLICENSED",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "files": [
     "dist",
     "README.md"
@@ -17,7 +19,7 @@
     }
   },
   "scripts": {
-    "build": "tsc -p tsconfig.build.json",
+    "build": "tsc -p tsconfig.build.json && cp src/JotulWidget.css dist/JotulWidget.css",
     "clean": "rm -rf dist",
     "prepublishOnly": "npm run clean && npm run build"
   },