@jotul/jotul-widgets 0.0.1

package/README.md

@@ -0,0 +1,36 @@
+# `@jotul/jotul-widgets`
+
+React component package for Jotul widgets.
+
+This package does **not** talk to `api.jotul.com` directly.
+It calls a partner-local backend route, for example:
+
+- browser -> `/api/jotul/widget`
+- partner server route -> `@jotul/jotul-api`
+- `@jotul/jotul-api` -> `https://api.jotul.com/api/v1/find-dealer`
+
+## Example
+
+```tsx
+import { JotulWidget } from '@jotul/jotul-widgets'
+
+export default function Page() {
+  return <JotulWidget type="productPage" />
+}
+```
+
+Custom route:
+
+```tsx
+<JotulWidget
+  type="productPage"
+  endpoint="/api/custom/jotul/widget"
+/>
+```
+
+Current behavior:
+
+- invalid API key -> `Invalid API key`
+- missing permission -> `Insufficient permissions`
+- invalid widget type -> `Invalid widget type`
+- `productPage` renders zipcode input + search button + dealer list

package/dist/JotulWidget.d.ts

@@ -0,0 +1,35 @@
+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;

package/dist/JotulWidget.js

@@ -0,0 +1,131 @@
+'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',
+];
+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, }) {
+    const [auth, setAuth] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [postalCode, setPostalCode] = useState('');
+    const [searchResult, setSearchResult] = useState(null);
+    const [isSearching, setIsSearching] = useState(false);
+    useEffect(() => {
+        let cancelled = false;
+        async function run() {
+            setIsLoading(true);
+            const result = await checkWidgetAuthorization({ endpoint });
+            if (!cancelled) {
+                setAuth(result);
+                setIsLoading(false);
+            }
+        }
+        void run();
+        return () => {
+            cancelled = true;
+        };
+    }, [endpoint]);
+    const typeState = useMemo(() => {
+        if (type == null)
+            return 'typeMissing';
+        if (!isWidgetType(type))
+            return 'typeInvalid';
+        return 'typeReady';
+    }, [type]);
+    if (isLoading) {
+        return _jsx("div", { className: className, children: "Loading JotulWidget\u2026" });
+    }
+    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 ?? [];
+        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) });
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { checkWidgetAuthorization, searchDealersByPostalCode, JotulWidget, type CheckWidgetAuthorizationOptions, type DealerSearchResponse, type JotulWidgetProps, type JotulWidgetType, type WidgetAuthClientResponse, } from './JotulWidget';

package/dist/index.js

@@ -0,0 +1 @@
+export { checkWidgetAuthorization, searchDealersByPostalCode, JotulWidget, } from './JotulWidget';

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@jotul/jotul-widgets",
+  "version": "0.0.1",
+  "type": "module",
+  "license": "UNLICENSED",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "npm run clean && npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}