@spaceinvoices/react-ui 0.4.8 → 0.4.11

package/src/components/documents/shared/document-preview-display.tsx

@@ -1,14 +1,26 @@
 "use client";
 
-import type { AdvanceInvoice, CreditNote, Estimate, Invoice } from "@spaceinvoices/js-sdk";
-import { AlertCircle, FileText, Loader2 } from "lucide-react";
-import { useEffect, useState } from "react";
+import { getClientHeaders, type AdvanceInvoice, type CreditNote, type Estimate, type Invoice } from "@spaceinvoices/js-sdk";
+import { useQuery } from "@tanstack/react-query";
+import { AlertCircle, FileText } from "lucide-react";
+import { useEffect, useMemo } from "react";
 import { cn } from "@/ui/lib/utils";
 import { useEntitiesOptional } from "@/ui/providers/entities-context";
 import { useSDK } from "@/ui/providers/sdk-provider";
+import { DocumentPreviewSkeleton } from "./document-preview-skeleton";
 import { ScaledDocumentPreview } from "./scaled-document-preview";
 import { useA4Scaling } from "./use-a4-scaling";
 
+const SAVED_PREVIEW_TIMING_EVENT = "si:saved-preview-timing";
+const SAVED_DOCUMENT_PREVIEW_QUERY_KEY = "document-preview-html";
+const SAVED_DOCUMENT_PREVIEW_STALE_TIME = 1000 * 60 * 5;
+const SAVED_DOCUMENT_PREVIEW_GC_TIME = 1000 * 60 * 30;
+
+function emitSavedPreviewDebug(detail: Record<string, unknown>) {
+  if (!import.meta.env.DEV || typeof window === "undefined") return;
+  window.dispatchEvent(new CustomEvent(SAVED_PREVIEW_TIMING_EVENT, { detail }));
+}
+
 type Document = Invoice | Estimate | CreditNote | AdvanceInvoice;
 
 /**
@@ -24,10 +36,36 @@ function getDocTypePathFromShareableId(shareableId: string): string {
   return "invoices";
 }
 
+export function getSavedDocumentPreviewQueryKey({
+  documentId,
+  documentUpdatedAt,
+  entityId,
+  template,
+  isPublicView,
+  shareableId,
+}: {
+  documentId: string;
+  documentUpdatedAt?: string | null;
+  entityId?: string | null;
+  template?: "modern" | "classic" | "condensed" | "minimal" | "fashion";
+  isPublicView?: boolean;
+  shareableId?: string | null;
+}) {
+  return [
+    SAVED_DOCUMENT_PREVIEW_QUERY_KEY,
+    documentId,
+    documentUpdatedAt ?? null,
+    entityId ?? null,
+    template ?? null,
+    isPublicView ?? false,
+    shareableId ?? null,
+  ] as const;
+}
+
 type DocumentPreviewDisplayProps = {
   /** The document to display (invoice, estimate, credit note, or advance invoice) */
   document: Document;
-  template?: "modern" | "classic" | "minimal" | "fashion";
+  template?: "modern" | "classic" | "condensed" | "minimal" | "fashion";
   className?: string;
   apiBaseUrl?: string;
   /** Locale for document rendering (e.g., "en-US", "sl-SI"). Uses user's UI language. */
@@ -40,6 +78,8 @@ type DocumentPreviewDisplayProps = {
   t?: (key: string) => string;
   /** Document type label for display (e.g., "Invoice", "Estimate") */
   documentTypeLabel?: string;
+  /** Whether preview fetching is currently allowed */
+  fetchEnabled?: boolean;
 };
 
 /**
@@ -54,95 +94,124 @@ export function DocumentPreviewDisplay({
   template,
   className,
   apiBaseUrl,
-  locale,
+  locale: _locale,
   isPublicView = false,
   shareableId,
   t: tProp,
   documentTypeLabel,
+  fetchEnabled = true,
 }: DocumentPreviewDisplayProps) {
   const t = tProp ?? ((key: string) => key);
-  const [previewHtml, setPreviewHtml] = useState<string>("");
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
   const entitiesContext = useEntitiesOptional();
   const activeEntity = entitiesContext?.activeEntity;
   const { sdk } = useSDK();
+  const documentId = document?.id;
+  const documentUpdatedAt = document?.updated_at ?? null;
 
-  const { containerRef, contentRef, scale, contentHeight, A4_WIDTH_PX } = useA4Scaling(previewHtml);
+  const queryKey = useMemo(() => {
+    return getSavedDocumentPreviewQueryKey({
+      documentId: documentId ?? shareableId ?? "",
+      documentUpdatedAt,
+      entityId: activeEntity?.id,
+      template,
+      isPublicView,
+      shareableId,
+    });
+  }, [activeEntity?.id, documentId, documentUpdatedAt, isPublicView, shareableId, template]);
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: document.updated_at intentionally triggers re-fetch when document changes server-side (e.g. after payment)
-  useEffect(() => {
-    const fetchPreview = async () => {
-      // For public view, use per-type shareable HTML endpoint
-      if (isPublicView && shareableId && apiBaseUrl) {
-        setIsLoading(true);
-        setError(null);
-        try {
-          // Determine document type from shareable ID prefix
+  const prerequisitesReady = isPublicView ? !!shareableId && !!apiBaseUrl : !!documentId && !!activeEntity?.id && !!sdk;
+
+  const previewQuery = useQuery({
+    queryKey,
+    enabled: fetchEnabled && prerequisitesReady,
+    staleTime: SAVED_DOCUMENT_PREVIEW_STALE_TIME,
+    gcTime: SAVED_DOCUMENT_PREVIEW_GC_TIME,
+    queryFn: async ({ signal }) => {
+      const abortController = new AbortController();
+      const abortRequest = () => abortController.abort();
+      signal.addEventListener("abort", abortRequest, { once: true });
+
+      try {
+        if (isPublicView && shareableId && apiBaseUrl) {
           const docTypePath = getDocTypePathFromShareableId(shareableId);
-          const response = await fetch(`${apiBaseUrl}/${docTypePath}/shareable/${shareableId}/html`);
+          const response = await fetch(`${apiBaseUrl}/${docTypePath}/shareable/${shareableId}/html`, {
+            headers: getClientHeaders("ui"),
+            signal: abortController.signal,
+          });
           if (!response.ok) {
             throw new Error("Failed to load preview");
           }
-          const html = await response.text();
-          setPreviewHtml(html);
-        } catch (err) {
-          setError(err instanceof Error ? err.message : "Failed to load preview");
-          setPreviewHtml("");
-        } finally {
-          setIsLoading(false);
+          return await response.text();
         }
-        return;
-      }
 
-      // Authenticated view - require entity context and SDK
-      if (!document?.id || !activeEntity?.id || !sdk) {
-        return;
-      }
+        if (!documentId || !activeEntity?.id || !sdk) {
+          throw new Error("Preview context unavailable");
+        }
 
-      setIsLoading(true);
-      setError(null);
+        const startedAt = performance.now();
+        emitSavedPreviewDebug({
+          stage: "request_started",
+          documentId,
+        });
 
-      try {
-        // Fetch the rendered HTML by document ID using SDK wrapper
-        // Document type is auto-detected from ID prefix (inv_, est_, cre_, adv_)
-        // Don't send locale — let entity locale drive formatting (decimal separators, date format)
-        const html = await sdk.invoices.renderHtml(document.id, { template }, { entity_id: activeEntity.id });
+        const html = await sdk.invoices.renderHtml(
+          documentId,
+          { template },
+          {
+            entity_id: activeEntity.id,
+            signal: abortController.signal,
+          },
+        );
+
+        emitSavedPreviewDebug({
+          stage: "request_succeeded",
+          documentId,
+          elapsedMs: Number((performance.now() - startedAt).toFixed(1)),
+        });
 
-        setPreviewHtml(html);
-        setError(null);
+        return html;
       } catch (err) {
-        setError(err instanceof Error ? err.message : "Failed to load preview");
-        setPreviewHtml("");
+        if (err instanceof Error && err.name === "AbortError") {
+          emitSavedPreviewDebug({
+            stage: "request_aborted",
+            documentId,
+          });
+        } else {
+          emitSavedPreviewDebug({
+            stage: "request_failed",
+            documentId,
+            message: err instanceof Error ? err.message : "Failed to load preview",
+          });
+        }
+        throw err;
       } finally {
-        setIsLoading(false);
+        signal.removeEventListener("abort", abortRequest);
       }
-    };
-
-    fetchPreview();
-  }, [
-    document?.id,
-    document?.updated_at,
-    activeEntity?.id,
-    template,
-    apiBaseUrl,
-    locale,
-    isPublicView,
-    shareableId,
-    sdk,
-  ]);
+    },
+  });
+
+  const previewHtml = previewQuery.data ?? "";
+  const error = previewQuery.error instanceof Error ? previewQuery.error.message : null;
+  const isWaitingForFetch = prerequisitesReady && !fetchEnabled && !previewHtml && !error;
+  const isLoading = previewQuery.isPending || isWaitingForFetch;
+  const { containerRef, contentRef, scale, contentHeight, A4_WIDTH_PX } = useA4Scaling(previewHtml);
+
+  useEffect(() => {
+    if (isPublicView || prerequisitesReady) return;
+
+    emitSavedPreviewDebug({
+      stage: "skipped",
+      reason: "missing_context",
+      documentId,
+      hasEntityId: !!activeEntity?.id,
+      hasSdk: !!sdk,
+    });
+  }, [activeEntity?.id, documentId, isPublicView, prerequisitesReady, sdk]);
 
   return (
-    <div ref={containerRef} className={cn("relative h-full", className)}>
+    <div ref={containerRef} className={cn("relative min-h-full", className)}>
       {/* Loading state */}
-      {isLoading && (
-        <div className="flex h-full items-center justify-center rounded-lg border bg-muted/50">
-          <div className="flex flex-col items-center gap-2">
-            <Loader2 className="h-8 w-8 animate-spin text-primary" />
-            <p className="text-muted-foreground text-sm">{t("Loading preview...")}</p>
-          </div>
-        </div>
-      )}
+      {isLoading && <DocumentPreviewSkeleton />}
 
       {/* Error state */}
       {error && !isLoading && (

package/src/components/documents/shared/scaled-document-preview.tsx

@@ -11,16 +11,54 @@ interface ScaledDocumentPreviewProps {
   entityUpdatedAt?: Date | null;
 }
 
+/** Extract @font-face rules from CSS so they can be hoisted to the document head */
+const FONT_FACE_RE = /@font-face\s*\{[^}]*\}/g;
+
+/**
+ * Hoist @font-face rules from HTML <style> into the document <head>.
+ * Shadow DOM isolates styles, but @font-face must be at the document level to load reliably.
+ * Returns the HTML with @font-face rules removed from inline <style>.
+ */
+function hoistFontFaces(html: string): string {
+  // Find all <style> tags and extract @font-face rules
+  const styleTagRe = /<style>([\s\S]*?)<\/style>/gi;
+  let fontFaceCss = "";
+  const cleanedHtml = html.replace(styleTagRe, (_match, cssContent: string) => {
+    const fontFaces = cssContent.match(FONT_FACE_RE);
+    if (fontFaces) {
+      fontFaceCss += fontFaces.join("\n");
+    }
+    const remaining = cssContent.replace(FONT_FACE_RE, "");
+    return `<style>${remaining}</style>`;
+  });
+
+  if (fontFaceCss) {
+    const id = "document-preview-fonts";
+    let existing = document.getElementById(id);
+    if (!existing) {
+      existing = document.createElement("style");
+      existing.id = id;
+      document.head.appendChild(existing);
+    }
+    existing.textContent = fontFaceCss;
+  }
+
+  return cleanedHtml;
+}
+
 /**
  * Scaled Document Preview Component
  *
  * Renders HTML content in a Shadow DOM with A4 scaling applied using CSS transforms.
  * Uses Shadow DOM to completely isolate template CSS from the parent page.
+ * @font-face rules are hoisted to document <head> for reliable font loading.
  */
 export const ScaledDocumentPreview: FC<ScaledDocumentPreviewProps> = ({ htmlContent, scale, A4_WIDTH_PX }) => {
   const shadowHostRef = useRef<HTMLDivElement>(null);
   const shadowRootRef = useRef<ShadowRoot | null>(null);
-  const [contentHeight, setContentHeight] = useState<number>(1123); // A4 height default
+  // A4 height in pixels at 96 DPI (297mm)
+  const A4_HEIGHT_PX = 1123;
+  const [contentHeight, setContentHeight] = useState<number>(A4_HEIGHT_PX);
 
   useEffect(() => {
     const host = shadowHostRef.current;
@@ -32,17 +70,18 @@ export const ScaledDocumentPreview: FC<ScaledDocumentPreviewProps> = ({ htmlCont
     }
 
     const shadowRoot = shadowRootRef.current;
-    shadowRoot.innerHTML = htmlContent;
+    shadowRoot.innerHTML = hoistFontFaces(htmlContent);
 
-    // Measure content height after render
+    // Measure content height after render (wait for fonts to load)
     const measureHeight = () => {
       const firstChild = shadowRoot.firstElementChild as HTMLElement;
       if (firstChild) {
-        setContentHeight(firstChild.scrollHeight || 1123);
+        // Ensure minimum A4 page height
+        setContentHeight(Math.max(firstChild.scrollHeight, A4_HEIGHT_PX));
       }
     };
 
-    setTimeout(measureHeight, 50);
+    setTimeout(measureHeight, 100);
   }, [htmlContent]);
 
   return (
@@ -59,6 +98,7 @@ export const ScaledDocumentPreview: FC<ScaledDocumentPreviewProps> = ({ htmlCont
           ref={shadowHostRef}
           style={{
             width: A4_WIDTH_PX,
+            minHeight: contentHeight,
             transform: `scale(${scale})`,
             transformOrigin: "top left",
             background: "white",