@spaceinvoices/react-ui 0.1.1

package/src/components/documents/create/document-items-section.tsx

@@ -0,0 +1,133 @@
+/**
+ * Shared document items section for invoices and estimates
+ * Handles: item management (add, remove, reorder)
+ */
+import { PlusIcon } from "lucide-react";
+import type { MutableRefObject } from "react";
+import type { UseFormGetValues, UseFormSetValue, UseFormWatch } from "react-hook-form";
+import { Button } from "@/ui/components/ui/button";
+import DocumentAddItemForm from "./document-add-item-form";
+import type { AnyControl } from "./form-types";
+
+/** Map of item index to gross price mode */
+export type PriceModesMap = Record<number, boolean>;
+
+type DocumentItemsSectionProps = {
+  control: AnyControl;
+
+  watch: UseFormWatch<any>;
+
+  setValue: UseFormSetValue<any>;
+
+  getValues: UseFormGetValues<any>;
+  entityId: string;
+  currencyCode?: string;
+  onAddNewTax?: () => void;
+  t: (key: string) => string;
+  /** When true, tax controls are disabled (e.g., for VIES reverse charge) */
+  taxesDisabled?: boolean;
+  /** Message to show when taxes are disabled */
+  taxesDisabledMessage?: string;
+  /** Maximum number of taxes per item, derived from country rules. Defaults to 1. */
+  maxTaxesPerItem?: number;
+  /** Ref to collect price modes per item (for submit transformation) */
+  priceModesRef?: MutableRefObject<PriceModesMap>;
+  /** Initial price modes (from duplicated document) */
+  initialPriceModes?: PriceModesMap;
+};
+
+export function DocumentItemsSection({
+  control,
+  watch,
+  setValue,
+  getValues,
+  entityId,
+  currencyCode,
+  onAddNewTax,
+  t,
+  taxesDisabled,
+  taxesDisabledMessage,
+  maxTaxesPerItem,
+  priceModesRef,
+  initialPriceModes = {},
+}: DocumentItemsSectionProps) {
+  const addItem = () => {
+    const currentItems = getValues("items") || [];
+    setValue("items", [
+      ...currentItems,
+      {
+        name: "",
+        description: "",
+        quantity: 1,
+        price: undefined,
+        taxes: [],
+      },
+    ]);
+  };
+
+  const removeItem = (index: number) => {
+    const currentItems = getValues("items") || [];
+    setValue(
+      "items",
+      currentItems.filter((_: unknown, i: number) => i !== index),
+    );
+  };
+
+  const moveItemUp = (index: number) => {
+    if (index === 0) return;
+    const items = getValues("items");
+    const newItems = [...items];
+    [newItems[index], newItems[index - 1]] = [newItems[index - 1], newItems[index]];
+    setValue("items", newItems);
+  };
+
+  const moveItemDown = (index: number) => {
+    const items = getValues("items");
+    if (index === items.length - 1) return;
+    const newItems = [...items];
+    [newItems[index], newItems[index + 1]] = [newItems[index + 1], newItems[index]];
+    setValue("items", newItems);
+  };
+
+  const items = watch("items") || [];
+
+  return (
+    <div className="flex flex-col gap-4">
+      <h2 className="font-bold text-xl">{t("Items")}</h2>
+
+      {items.map((_: unknown, index: number) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: index is stable
+        <div key={index}>
+          <DocumentAddItemForm
+            form={{ control, watch, setValue, getValues } as any}
+            index={index}
+            control={control}
+            entityId={entityId}
+            currencyCode={currencyCode}
+            onRemove={() => removeItem(index)}
+            onMoveUp={() => moveItemUp(index)}
+            onMoveDown={() => moveItemDown(index)}
+            onAddNewTax={onAddNewTax}
+            showRemove={items.length > 1}
+            showMoveUp={index > 0}
+            showMoveDown={index < items.length - 1}
+            t={t}
+            taxesDisabled={taxesDisabled}
+            taxesDisabledMessage={taxesDisabledMessage}
+            maxTaxesPerItem={maxTaxesPerItem}
+            initialIsGrossPrice={initialPriceModes[index] ?? false}
+            onPriceModeChange={(isGross) => {
+              if (priceModesRef) {
+                priceModesRef.current[index] = isGross;
+              }
+            }}
+          />
+        </div>
+      ))}
+
+      <Button type="button" variant="outline" onClick={addItem} className="w-full cursor-pointer border-dashed">
+        <PlusIcon className="mr-2 h-4 w-4" /> {t("Add item")}
+      </Button>
+    </div>
+  );
+}

package/src/components/documents/create/document-recipient-section.tsx

@@ -0,0 +1,101 @@
+/**
+ * Shared document recipient section for invoices and estimates
+ * Handles customer selection and inline customer form
+ */
+import { X } from "lucide-react";
+import { useEffect, useRef } from "react";
+import { FormInput } from "@/ui/components/form";
+import { Button } from "@/ui/components/ui/button";
+import { Label } from "@/ui/components/ui/label";
+import { cn } from "@/ui/lib/utils";
+import { CustomerAutocomplete } from "../../customers/customer-autocomplete";
+import type { AnyControl } from "./form-types";
+
+type DocumentRecipientSectionProps = {
+  control: AnyControl;
+  entityId: string;
+
+  onCustomerSelect: (customerId: string, customer: any) => void;
+  onCustomerClear: () => void;
+  showCustomerForm: boolean;
+  shouldFocusName: boolean;
+  selectedCustomerId?: string;
+  /** Initial customer name for display (used when duplicating documents) */
+  initialCustomerName?: string;
+  t: (key: string) => string;
+};
+
+export function DocumentRecipientSection({
+  control,
+  entityId,
+  onCustomerSelect,
+  onCustomerClear,
+  showCustomerForm,
+  shouldFocusName,
+  selectedCustomerId,
+  initialCustomerName,
+  t,
+}: DocumentRecipientSectionProps) {
+  const nameInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (showCustomerForm && shouldFocusName) {
+      // Small delay to ensure the input is rendered
+      setTimeout(() => {
+        nameInputRef.current?.focus();
+      }, 0);
+    }
+  }, [showCustomerForm, shouldFocusName]);
+
+  return (
+    <div className="flex-1 space-y-4">
+      <div className="flex items-center justify-between">
+        <h2 className="font-bold text-xl">{t("Recipient")}</h2>
+        {showCustomerForm && (
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={onCustomerClear}
+            className={cn("h-7 cursor-pointer px-2 text-xs")}
+          >
+            <X className="size-3" />
+            {t("Clear")}
+          </Button>
+        )}
+      </div>
+
+      <div className="space-y-2">
+        <Label>{t("Name")}</Label>
+        <CustomerAutocomplete
+          entityId={entityId}
+          value={selectedCustomerId}
+          onValueChange={onCustomerSelect}
+          onClear={onCustomerClear}
+          placeholder={t("Search or create customer...")}
+          initialDisplayName={initialCustomerName}
+        />
+      </div>
+
+      {showCustomerForm && (
+        <>
+          <FormInput control={control} name="customer.address" placeholder={t("Address")} label="" ref={nameInputRef} />
+
+          <FormInput control={control} name="customer.address_2" placeholder={t("Address 2")} label="" />
+
+          <div className="grid grid-cols-2 gap-4">
+            <FormInput control={control} name="customer.post_code" placeholder={t("Post Code")} label="" />
+            <FormInput control={control} name="customer.city" placeholder={t("City")} label="" />
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <FormInput control={control} name="customer.state" placeholder={t("State")} label="" />
+            <FormInput control={control} name="customer.country" placeholder={t("Country")} label="" />
+          </div>
+
+          <FormInput control={control} name="customer.tax_number" placeholder={t("Tax Number")} label="" />
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/documents/create/form-types.ts

@@ -0,0 +1,36 @@
+/**
+ * Shared form types for document components.
+ *
+ * This file provides type utilities to handle react-hook-form's complex generic types
+ * when passing control and other form utilities between components.
+ */
+import type { Control, FieldValues, UseFormGetValues, UseFormSetValue, UseFormWatch } from "react-hook-form";
+
+/**
+ * A more permissive Control type that accepts any form control.
+ * Use this in component props when the component doesn't need to know
+ * the exact form type, only that it has certain fields.
+ */
+// biome-ignore lint/suspicious/noExplicitAny: Required for react-hook-form compatibility
+export type AnyControl = Control<any, any, any>;
+
+/**
+ * Base props for document form sections that receive form utilities.
+ * Components using these props can work with any form that has the expected fields.
+ */
+export type DocumentFormSectionProps = {
+  control: AnyControl;
+  // biome-ignore lint/suspicious/noExplicitAny: Required for react-hook-form compatibility
+  watch: UseFormWatch<any>;
+  // biome-ignore lint/suspicious/noExplicitAny: Required for react-hook-form compatibility
+  setValue: UseFormSetValue<any>;
+  // biome-ignore lint/suspicious/noExplicitAny: Required for react-hook-form compatibility
+  getValues: UseFormGetValues<any>;
+};
+
+/**
+ * Props for components that only need control (no watch/setValue/getValues).
+ */
+export type ControlOnlyProps = {
+  control: AnyControl;
+};

package/src/components/documents/create/index.ts

@@ -0,0 +1,9 @@
+export { default as DocumentAddItemForm } from "./document-add-item-form";
+export { default as DocumentAddItemTaxRateField } from "./document-add-item-tax-rate-field";
+export { DocumentDetailsSection } from "./document-details-section";
+export { DocumentItemsSection } from "./document-items-section";
+export { DocumentRecipientSection } from "./document-recipient-section";
+export { LiveInvoicePreview } from "./live-preview";
+export { MarkAsPaidSection } from "./mark-as-paid-section";
+export { prepareDocumentSubmission } from "./prepare-document-submission";
+export { useDocumentCustomerForm } from "./use-document-customer-form";

package/src/components/documents/create/live-preview.tsx

@@ -0,0 +1,235 @@
+"use client";
+
+import type { CreateInvoiceRequest } from "@spaceinvoices/js-sdk";
+import { Loader2 } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { cn } from "@/ui/lib/utils";
+import { useEntities } from "@/ui/providers/entities-context";
+import { useSDK } from "@/ui/providers/sdk-provider";
+import { ScaledDocumentPreview } from "../shared/scaled-document-preview";
+import { useA4Scaling } from "../shared/use-a4-scaling";
+import { filterUnresolvedTaxes } from "./prepare-preview-data";
+
+export type PdfTemplateId = "modern" | "classic" | "minimal" | "fashion";
+
+type LiveInvoicePreviewProps = {
+  data: Partial<CreateInvoiceRequest>;
+  currency?: string;
+  template?: PdfTemplateId;
+  className?: string;
+  apiBaseUrl?: string;
+  getAuthToken?: () => string | undefined;
+  /** Locale for document rendering (e.g., "en-US", "sl-SI"). Uses user's UI language. */
+  locale?: string;
+  /** Fixed scale to use instead of dynamic scaling. Useful to prevent layout shifts. */
+  fixedScale?: number;
+};
+
+/**
+ * Live Invoice Preview Component
+ *
+ * Generates a real-time HTML preview of an invoice as the user fills out the form.
+ * Uses debouncing to avoid excessive API calls and shows loading states.
+ *
+ * Features:
+ * - Debounced API requests (500ms delay after user stops typing)
+ * - Loading skeleton while fetching preview
+ * - Error handling with fallback display
+ * - Fully styled HTML with scoped CSS (prevents style leakage)
+ */
+export function LiveInvoicePreview({
+  data,
+  currency: _currency = "EUR",
+  template,
+  className,
+  locale,
+  fixedScale,
+}: LiveInvoicePreviewProps) {
+  const [previewHtml, setPreviewHtml] = useState<string>("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const { activeEntity } = useEntities();
+  const { sdk } = useSDK();
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  const { containerRef, contentRef, scale: dynamicScale, contentHeight, A4_WIDTH_PX } = useA4Scaling(previewHtml);
+  const scale = fixedScale ?? dynamicScale;
+
+  /**
+   * Fetch preview from API
+   */
+  const fetchPreview = useCallback(
+    async (invoiceData: Partial<CreateInvoiceRequest>) => {
+      // Don't fetch if no items exist (name can be empty for preview)
+      if (!invoiceData.items || invoiceData.items.length === 0) {
+        setPreviewHtml("");
+        return;
+      }
+
+      // Cancel any pending request
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+
+      // Create new abort controller for this request
+      const abortController = new AbortController();
+      abortControllerRef.current = abortController;
+
+      setIsLoading(true);
+      setError(null);
+
+      try {
+        if (!sdk || !activeEntity?.id) {
+          throw new Error("Authentication required");
+        }
+
+        // Prepare preview data with active entity as issuer (if not already set)
+        // Exclude 'number' as it's auto-generated by the render endpoint
+        const { number: _number, ...invoiceDataWithoutNumber } = invoiceData as any;
+        const previewData = {
+          ...invoiceDataWithoutNumber,
+          // Filter out unresolved tax_ids (race condition: form may add
+          // { tax_id: undefined } before the tax dropdown auto-selects a value)
+          items: filterUnresolvedTaxes(invoiceData.items),
+          issuer: invoiceData.issuer || {
+            name: activeEntity.name,
+            address: activeEntity.address,
+            address_2: activeEntity.address_2,
+            post_code: activeEntity.post_code,
+            city: activeEntity.city,
+            state: activeEntity.state,
+            country: activeEntity.country,
+            tax_number: activeEntity.tax_number,
+          },
+        };
+
+        // Call the render API using the SDK wrapper
+        const html = await sdk.invoices.renderInvoicePreview(
+          previewData as any,
+          { partial: "true", template, locale },
+          { entity_id: activeEntity.id },
+        );
+
+        setPreviewHtml(html);
+        setError(null);
+      } catch (err) {
+        // Ignore abort errors (they're expected when user keeps typing)
+        if (err instanceof Error && err.name === "AbortError") {
+          return;
+        }
+
+        // Ignore 422 validation errors - expected while user is still filling the form
+        if (err instanceof Error && "status" in err && (err as any).status === 422) {
+          return;
+        }
+
+        setError(err instanceof Error ? err.message : "Failed to generate preview");
+        setPreviewHtml("");
+      } finally {
+        // Only set loading to false if this request wasn't aborted
+        if (!abortController.signal.aborted) {
+          setIsLoading(false);
+        }
+      }
+    },
+    [
+      activeEntity?.id,
+      activeEntity?.address,
+      activeEntity?.address_2,
+      activeEntity?.country,
+      activeEntity?.state,
+      activeEntity?.tax_number,
+      activeEntity?.post_code,
+      activeEntity?.city,
+      activeEntity?.name,
+      template,
+      locale,
+      sdk,
+    ],
+  );
+
+  /**
+   * Debounced preview fetch
+   * Waits 500ms after user stops typing before fetching
+   */
+  useEffect(() => {
+    // Clear previous timeout
+    if (debounceTimeoutRef.current) {
+      clearTimeout(debounceTimeoutRef.current);
+    }
+
+    // Set new timeout
+    debounceTimeoutRef.current = setTimeout(() => {
+      fetchPreview(data);
+    }, 500);
+
+    // Cleanup
+    return () => {
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current);
+      }
+    };
+  }, [data, fetchPreview]);
+
+  /**
+   * Cleanup on unmount
+   */
+  useEffect(() => {
+    return () => {
+      // Cancel any pending request
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+      // Clear timeout
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  return (
+    <div ref={containerRef} className={cn("relative", className)}>
+      {/* Loading overlay */}
+      {isLoading && (
+        <div className="absolute inset-0 z-10 flex items-center justify-center bg-background/80 backdrop-blur-sm">
+          <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">Generating preview...</p>
+          </div>
+        </div>
+      )}
+
+      {/* Error state */}
+      {error && !isLoading && (
+        <div className="flex min-h-[200px] items-center justify-center rounded-lg border border-destructive/50 bg-destructive/10 p-8">
+          <div className="text-center">
+            <p className="font-semibold text-destructive">Preview Error</p>
+            <p className="text-muted-foreground text-sm">{error}</p>
+          </div>
+        </div>
+      )}
+
+      {/* Empty state */}
+      {!previewHtml && !isLoading && !error && (
+        <div className="flex min-h-[200px] items-center justify-center rounded-lg border border-dashed p-8">
+          <div className="text-center">
+            <p className="font-semibold text-muted-foreground">Invoice Preview</p>
+            <p className="text-muted-foreground text-sm">Start filling the form to see a live preview</p>
+          </div>
+        </div>
+      )}
+
+      {/* Preview - Scoped HTML injection with A4 scaling */}
+      {previewHtml && !error && (
+        <ScaledDocumentPreview
+          htmlContent={previewHtml}
+          scale={scale}
+          contentHeight={contentHeight}
+          A4_WIDTH_PX={A4_WIDTH_PX}
+          contentRef={contentRef}
+        />
+      )}
+    </div>
+  );
+}

package/src/components/documents/create/mark-as-paid-section.tsx

@@ -0,0 +1,82 @@
+import { HelpCircle } from "lucide-react";
+import { Checkbox } from "@/ui/components/ui/checkbox";
+import { Label } from "@/ui/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/ui/components/ui/select";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/ui/components/ui/tooltip";
+import { cn } from "@/ui/lib/utils";
+
+// Regular payment types (excluding special types like credit_note and advance)
+const regularPaymentTypes = ["cash", "bank_transfer", "card", "check", "other"] as const;
+
+// Labels for payment types (used for translations)
+const PAYMENT_TYPE_LABELS: Record<string, string> = {
+  cash: "Cash",
+  bank_transfer: "Bank Transfer",
+  card: "Card",
+  check: "Check",
+  other: "Other",
+};
+
+type MarkAsPaidSectionProps = {
+  /** Whether the document is marked as paid */
+  checked: boolean;
+  /** Called when the checkbox changes */
+  onCheckedChange: (checked: boolean) => void;
+  /** Selected payment type */
+  paymentType: string;
+  /** Called when payment type changes */
+  onPaymentTypeChange: (value: string) => void;
+  /** Translation function */
+  t: (key: string) => string;
+};
+
+export function MarkAsPaidSection({
+  checked,
+  onCheckedChange,
+  paymentType,
+  onPaymentTypeChange,
+  t,
+}: MarkAsPaidSectionProps) {
+  return (
+    <div className={cn("flex flex-col gap-4 rounded-md border p-4", checked && "md:flex-row md:items-center md:gap-6")}>
+      <div className="flex flex-row items-center space-x-3 space-y-0">
+        <Checkbox checked={checked} onCheckedChange={(v) => onCheckedChange(v === true)} />
+        <div className="flex items-center gap-1 leading-none">
+          <Label>{checked ? t("Paid") : t("Mark as Paid")}</Label>
+          {!checked && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  className="rounded-full p-1 transition-colors hover:bg-accent"
+                  onClick={(e) => e.preventDefault()}
+                >
+                  <HelpCircle className="size-4 text-muted-foreground" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="top">{t("Invoice will be marked as fully paid upon creation")}</TooltipContent>
+            </Tooltip>
+          )}
+        </div>
+      </div>
+
+      {checked && (
+        <>
+          <div className="hidden flex-1 md:block" />
+          <Select value={paymentType} onValueChange={(v) => v && onPaymentTypeChange(v)}>
+            <SelectTrigger className="w-full md:w-fit">
+              <SelectValue placeholder={t("Select payment type")}>{t(PAYMENT_TYPE_LABELS[paymentType])}</SelectValue>
+            </SelectTrigger>
+            <SelectContent>
+              {regularPaymentTypes.map((type) => (
+                <SelectItem key={type} value={type}>
+                  {t(PAYMENT_TYPE_LABELS[type])}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </>
+      )}
+    </div>
+  );
+}