@kasuvia/sdk 0.0.8 → 0.0.9

package/src/components/shared/AddressAutocomplete.tsx

@@ -0,0 +1,212 @@
+"use client";
+
+import { useEffect, useId, useRef, useState } from "react";
+import { MapPin, Loader2, Check } from "lucide-react";
+import { autocompleteAddress } from "../../services/logistics.service";
+import { useSdkContext, resolveHookArgs } from "../../context/sdk-context";
+import type { SdkConfig } from "../../config";
+
+export interface AddressSuggestion {
+  place_id?: string | number;
+  display_name: string;
+  line1: string;
+  city?: string;
+  state?: string;
+  postal_code?: string;
+  country?: string;
+  latitude?: number;
+  longitude?: number;
+}
+
+export interface AddressAutocompleteProps {
+  /** The street-address line 1 text. */
+  value: string;
+  /** Fires on every keystroke - the field stays fully editable. */
+  onChange: (line1: string) => void;
+  /** Fires once when a suggestion is picked, with structured components. */
+  onResolve?: (suggestion: AddressSuggestion) => void;
+  /** ISO-2 country code to bias results toward (e.g. "NG"). */
+  country?: string;
+  disabled?: boolean;
+  placeholder?: string;
+  className?: string;
+  id?: string;
+  "aria-label"?: string;
+  config?: SdkConfig;
+}
+
+/**
+ * REAL BUG FIXED (2026-09-22): this called a hardcoded third-party endpoint
+ * (`nominatim.openstreetmap.org`) directly from the browser — a completely
+ * different data source than the rest of this platform's address/logistics
+ * system, which already has a real, working backend endpoint for exactly
+ * this (`GET /logistics/address/autocomplete`, `autocompleteAddress` in
+ * logistics.service.ts, live-verified this session). Calling Nominatim
+ * directly is also a real operational risk: OpenStreetMap's usage policy
+ * rate-limits and blocks unauthenticated browser traffic at production
+ * volume, and it has no idea this business is in Nigeria the way the real
+ * backend's geocoding provider is tuned to be. Rebuilt to call the real
+ * backend through the SDK's own service function instead.
+ */
+export function AddressAutocomplete({
+  value,
+  onChange,
+  onResolve,
+  country,
+  disabled,
+  placeholder = "Start typing an address…",
+  className = "",
+  id,
+  config,
+  ...rest
+}: AddressAutocompleteProps) {
+  const ctx = useSdkContext();
+  const generatedId = useId();
+  const fieldId = id ?? generatedId;
+  const [open, setOpen] = useState(false);
+  const [highlight, setHighlight] = useState(-1);
+  const [justPicked, setJustPicked] = useState(false);
+  const [suggestions, setSuggestions] = useState<AddressSuggestion[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const wrapRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open || justPicked || disabled || !value || value.trim().length < 3) {
+      setSuggestions([]);
+      return;
+    }
+
+    let isMounted = true;
+    const timer = setTimeout(async () => {
+      setIsLoading(true);
+      try {
+        const { config: cfg } = resolveHookArgs(config, undefined, ctx);
+        const { results } = await autocompleteAddress(cfg, value, country);
+        if (isMounted) {
+          setSuggestions(
+            results.map((r) => ({
+              place_id: r.place_id,
+              display_name: r.display_name,
+              line1: r.line1,
+              city: r.city ?? undefined,
+              state: r.state ?? undefined,
+              postal_code: r.postal_code ?? undefined,
+              country: r.country_code ?? r.country ?? undefined,
+              latitude: r.latitude ?? undefined,
+              longitude: r.longitude ?? undefined,
+            }))
+          );
+        }
+      } catch {
+        // A real backend failure (network, 5xx) degrades to "no suggestions"
+        // here — the field stays fully editable either way (onChange above
+        // already applies on every keystroke), so this never blocks the
+        // customer from typing their address manually.
+        if (isMounted) setSuggestions([]);
+      } finally {
+        if (isMounted) setIsLoading(false);
+      }
+    }, 350);
+
+    return () => {
+      isMounted = false;
+      clearTimeout(timer);
+    };
+  }, [value, country, open, justPicked, disabled, config, ctx]);
+
+  // Close on outside click.
+  useEffect(() => {
+    const onDocClick = (e: MouseEvent) => {
+      if (wrapRef.current && !wrapRef.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener("mousedown", onDocClick);
+    return () => document.removeEventListener("mousedown", onDocClick);
+  }, []);
+
+  const pick = (s: AddressSuggestion) => {
+    onChange(s.line1 || value);
+    onResolve?.(s);
+    setJustPicked(true);
+    setOpen(false);
+    setHighlight(-1);
+  };
+
+  const showDropdown = open && !justPicked && (isLoading || suggestions.length > 0);
+
+  return (
+    <div ref={wrapRef} className="relative w-full">
+      <div className="relative flex items-center">
+        <MapPin className="absolute left-3 w-4 h-4 text-muted-foreground pointer-events-none" />
+        <input
+          id={fieldId}
+          value={value}
+          disabled={disabled}
+          placeholder={placeholder}
+          autoComplete="off"
+          className={`w-full h-10 pl-9 pr-9 py-2 text-sm bg-background border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-50 ${className}`.trim()}
+          onChange={(e) => {
+            onChange(e.target.value);
+            setJustPicked(false);
+            setOpen(true);
+          }}
+          onFocus={() => { if (!justPicked) setOpen(true); }}
+          onKeyDown={(e) => {
+            if (!showDropdown) return;
+            if (e.key === "ArrowDown") {
+              e.preventDefault();
+              setHighlight((h) => Math.min(h + 1, suggestions.length - 1));
+            } else if (e.key === "ArrowUp") {
+              e.preventDefault();
+              setHighlight((h) => Math.max(h - 1, 0));
+            } else if (e.key === "Enter" && highlight >= 0 && suggestions[highlight]) {
+              e.preventDefault();
+              pick(suggestions[highlight]);
+            } else if (e.key === "Escape") {
+              setOpen(false);
+            }
+          }}
+          {...rest}
+        />
+        {isLoading ? (
+          <Loader2 className="absolute right-3 w-4 h-4 text-muted-foreground animate-spin" />
+        ) : justPicked ? (
+          <Check className="absolute right-3 w-4 h-4 text-primary" />
+        ) : null}
+      </div>
+
+      {showDropdown && (
+        <div className="absolute z-50 w-full mt-1 bg-card border rounded-lg shadow-lg max-h-60 overflow-y-auto">
+          {isLoading && suggestions.length === 0 ? (
+            <div className="flex items-center gap-2 px-3 py-3 text-sm text-muted-foreground">
+              <Loader2 className="w-3.5 h-3.5 animate-spin" /> Searching addresses…
+            </div>
+          ) : suggestions.length === 0 ? (
+            <div className="px-3 py-3 text-sm text-muted-foreground">
+              No matches found. Enter address manually.
+            </div>
+          ) : (
+            suggestions.map((s, i) => (
+              <button
+                key={s.place_id || `${s.display_name}-${i}`}
+                type="button"
+                onMouseEnter={() => setHighlight(i)}
+                onClick={() => pick(s)}
+                className={`w-full text-left flex items-start gap-2 px-3 py-2 text-sm transition-colors ${
+                  i === highlight ? "bg-muted" : "hover:bg-muted/50"
+                }`}
+              >
+                <MapPin className="w-3.5 h-3.5 mt-0.5 text-muted-foreground shrink-0" />
+                <span className="min-w-0">
+                  <span className="block font-medium text-foreground truncate">
+                    {s.line1 || s.display_name}
+                  </span>
+                  <span className="block text-xs text-muted-foreground truncate">{s.display_name}</span>
+                </span>
+              </button>
+            ))
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/shared/AnalyticsScripts.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Script from "next/script";
+import { getCookieConsent, COOKIE_CONSENT_CHANGED_EVENT } from "../../utils/cookieConsent";
+
+export interface AnalyticsScriptsProps {
+  websiteId?: string;
+  scriptUrl?: string;
+  recorderUrl?: string;
+}
+
+/**
+ * AnalyticsScripts — Consent-gated Umami tracker + session-replay loader.
+ *
+ * REAL GAP FIXED (owner-requested legal-compliance review): Umami's tracker
+ * AND its session-replay/heatmap recorder used to render unconditionally the
+ * moment a project had analytics provisioned — no consent check anywhere.
+ * Session replay specifically is non-essential tracking under GDPR/NDPR
+ * consent rules regardless of PII-masking/sample-rate mitigations already
+ * built into the recorder's own config — masking reduces risk, it doesn't
+ * remove the consent requirement.
+ *
+ * This component is the actual technical gate: it renders nothing until the
+ * visitor has affirmatively accepted via CookieConsentBanner, and re-checks
+ * live if they change their choice without needing a page reload.
+ *
+ * Peer dependencies: next (next/script)
+ */
+export function AnalyticsScripts({ websiteId, scriptUrl, recorderUrl }: AnalyticsScriptsProps) {
+  const [accepted, setAccepted] = useState(false);
+
+  useEffect(() => {
+    const sync = () => setAccepted(getCookieConsent() === "accepted");
+    sync();
+    window.addEventListener(COOKIE_CONSENT_CHANGED_EVENT, sync);
+    window.addEventListener("storage", sync);
+    return () => {
+      window.removeEventListener(COOKIE_CONSENT_CHANGED_EVENT, sync);
+      window.removeEventListener("storage", sync);
+    };
+  }, []);
+
+  if (!accepted || !websiteId) return null;
+
+  return (
+    <>
+      {scriptUrl && (
+        <Script async defer data-website-id={websiteId} src={scriptUrl} strategy="afterInteractive" />
+      )}
+      {recorderUrl && (
+        <Script defer data-website-id={websiteId} src={recorderUrl} strategy="afterInteractive" />
+      )}
+    </>
+  );
+}

package/src/components/shared/CookieConsentBanner.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { getCookieConsent, setCookieConsent } from "../../utils/cookieConsent";
+
+export interface CookieConsentBannerProps {
+  /**
+   * URL for the privacy policy page. Defaults to "/privacy".
+   */
+  privacyUrl?: string;
+  /**
+   * Custom className for the outer banner container.
+   */
+  className?: string;
+  /**
+   * Custom className for the "Accept" button.
+   */
+  acceptButtonClassName?: string;
+  /**
+   * Custom className for the "Reject non-essential" button.
+   */
+  rejectButtonClassName?: string;
+}
+
+/**
+ * CookieConsentBanner — GDPR/NDPR compliant consent gate.
+ *
+ * Owner-requested (legal-compliance review): analytics/session-replay tracking
+ * must not run before the visitor has actually chosen to allow it — see
+ * AnalyticsScripts, which gates the real script tags on this same stored choice.
+ *
+ * Shown once, bottom banner (not a blocking modal — the standard, least-intrusive
+ * pattern), with Accept and Reject weighted equally, matching GDPR/NDPR guidance
+ * against making "reject" harder to find than "accept".
+ *
+ * Styled with utility classes by default. Pass custom classNames to restyle with
+ * your storefront's theme (e.g. shadcn/Tailwind classes) without touching the SDK.
+ */
+export function CookieConsentBanner({
+  privacyUrl = "/privacy",
+  className,
+  acceptButtonClassName,
+  rejectButtonClassName,
+}: CookieConsentBannerProps) {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    setVisible(getCookieConsent() === null);
+  }, []);
+
+  if (!visible) return null;
+
+  const choose = (value: "accepted" | "rejected") => {
+    setCookieConsent(value);
+    setVisible(false);
+  };
+
+  const bannerClass = className ??
+    "fixed inset-x-0 bottom-0 z-50 border-t border-border bg-background/95 backdrop-blur-sm p-4 shadow-[0_-4px_16px_rgba(0,0,0,0.08)]";
+
+  const rejectClass = rejectButtonClassName ??
+    "inline-flex items-center justify-center rounded-md border border-input bg-background px-3 h-9 text-sm font-medium hover:bg-accent hover:text-accent-foreground transition-colors";
+
+  const acceptClass = acceptButtonClassName ??
+    "inline-flex items-center justify-center rounded-md bg-primary px-3 h-9 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors";
+
+  return (
+    <div className={bannerClass}>
+      <div className="mx-auto flex max-w-4xl flex-col items-center gap-3 sm:flex-row sm:justify-between">
+        <p className="text-center text-sm text-muted-foreground sm:text-left">
+          We use cookies to understand how you use this site and improve your experience.{" "}
+          <a
+            href={privacyUrl}
+            className="underline underline-offset-2 hover:text-foreground"
+          >
+            Learn more
+          </a>
+        </p>
+        <div className="flex shrink-0 gap-2">
+          <button
+            type="button"
+            className={rejectClass}
+            onClick={() => choose("rejected")}
+          >
+            Reject non-essential
+          </button>
+          <button
+            type="button"
+            className={acceptClass}
+            onClick={() => choose("accepted")}
+          >
+            Accept
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}