@spaceinvoices/react-ui 0.4.11 → 0.4.31

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

@@ -4,9 +4,17 @@
  */
 import { PlusIcon, SeparatorHorizontal } from "lucide-react";
 import type { MutableRefObject } from "react";
-import type { UseFormGetValues, UseFormSetValue, UseFormWatch } from "react-hook-form";
-import { useFieldArray } from "react-hook-form";
+import type {
+  UseFormClearErrors,
+  UseFormGetValues,
+  UseFormSetValue,
+  UseFormTrigger,
+  UseFormWatch,
+} from "react-hook-form";
+import { useController, useFieldArray } from "react-hook-form";
+import type { DocumentTypes } from "@/ui/components/documents/types";
 import { Button } from "@/ui/components/ui/button";
+import { cn } from "@/ui/lib/utils";
 import DocumentAddItemForm from "./document-add-item-form";
 import type { AnyControl } from "./form-types";
 
@@ -23,12 +31,15 @@ function reindexPriceModes(priceModes: PriceModesMap, nextLength: number): Price
 
 type DocumentItemsSectionProps = {
   control: AnyControl;
-
   watch: UseFormWatch<any>;
 
   setValue: UseFormSetValue<any>;
+  clearErrors: UseFormClearErrors<any>;
+  trigger: UseFormTrigger<any>;
+  isSubmitted: boolean;
 
   getValues: UseFormGetValues<any>;
+  documentType?: DocumentTypes;
   entityId: string;
   currencyCode?: string;
   onAddNewTax?: () => void;
@@ -45,12 +56,17 @@ type DocumentItemsSectionProps = {
   initialPriceModes?: PriceModesMap;
   /** Called when item ordering or price mode changes outside normal field edits. */
   onItemsStateChange?: () => void;
+  locale?: string;
 };
 
 export function DocumentItemsSection({
   control,
+  documentType,
   watch,
   setValue,
+  clearErrors,
+  trigger,
+  isSubmitted,
   getValues,
   entityId,
   currencyCode,
@@ -62,11 +78,17 @@ export function DocumentItemsSection({
   priceModesRef,
   initialPriceModes = {},
   onItemsStateChange,
+  locale = "en",
 }: DocumentItemsSectionProps) {
   const { fields, append, remove, move } = useFieldArray({
     control: control as any,
     name: "items",
   });
+  const itemsController = useController({
+    control: control as any,
+    name: "items" as any,
+  });
+  const itemsError = itemsController.fieldState.error?.message;
 
   const syncPriceModes = (updater: (current: PriceModesMap) => PriceModesMap) => {
     if (!priceModesRef) return;
@@ -77,6 +99,7 @@ export function DocumentItemsSection({
     append({
       name: "",
       description: "",
+      classification: undefined,
       quantity: 1,
       price: undefined,
       taxes: [],
@@ -139,10 +162,16 @@ export function DocumentItemsSection({
       <h2 className="font-bold text-xl">{t("Items")}</h2>
 
       {fields.map((field, index: number) => (
-        <div key={field.id}>
+        <div
+          key={field.id}
+          className={cn(
+            index === 0 && itemsError && "rounded-lg border border-destructive/70 ring-1 ring-destructive/20",
+          )}
+        >
           <DocumentAddItemForm
-            form={{ control, watch, setValue, getValues } as any}
+            form={{ control, watch, setValue, clearErrors, trigger, getValues, formState: { isSubmitted } } as any}
             index={index}
+            documentType={documentType}
             control={control}
             entityId={entityId}
             currencyCode={currencyCode}
@@ -164,12 +193,21 @@ export function DocumentItemsSection({
               }
               onItemsStateChange?.();
             }}
+            locale={locale}
           />
         </div>
       ))}
 
+      {itemsError && <p className="font-normal text-destructive text-xs">{itemsError}</p>}
+
       <div className="flex gap-2">
-        <Button type="button" variant="outline" onClick={addItem} className="flex-1 cursor-pointer border-dashed">
+        <Button
+          type="button"
+          variant="outline"
+          onClick={addItem}
+          className="flex-1 cursor-pointer border-dashed"
+          data-demo="marketing-demo-add-item"
+        >
           <PlusIcon className="mr-2 h-4 w-4" /> {t("Add item")}
         </Button>
         <Button type="button" variant="ghost" onClick={addSeparator} className="cursor-pointer text-muted-foreground">

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

@@ -27,6 +27,7 @@ type DocumentRecipientSectionProps = {
   /** Show end consumer (B2C) toggle next to tax number (Croatian entity + domestic transaction) */
   showEndConsumerToggle?: boolean;
   t: (key: string) => string;
+  locale?: string;
 };
 
 export function DocumentRecipientSection({
@@ -40,6 +41,7 @@ export function DocumentRecipientSection({
   initialCustomerName,
   showEndConsumerToggle,
   t,
+  locale = "en",
 }: DocumentRecipientSectionProps) {
   const nameInputRef = useRef<HTMLInputElement>(null);
 
@@ -51,6 +53,7 @@ export function DocumentRecipientSection({
     control: control as any,
     name: "customer.name" as any,
   });
+  const customerNameError = customerNameController.fieldState.error?.message;
 
   useEffect(() => {
     if (showCustomerForm && shouldFocusName) {
@@ -80,7 +83,7 @@ export function DocumentRecipientSection({
       </div>
 
       <div className="space-y-2">
-        <Label>{t("Name")}</Label>
+        <Label className={cn(customerNameError && "text-destructive")}>{t("Name")}</Label>
         <CustomerAutocomplete
           entityId={entityId}
           value={selectedCustomerId}
@@ -88,12 +91,17 @@ export function DocumentRecipientSection({
           onValueChange={onCustomerSelect}
           onCommitInlineName={(nextName) => customerNameController.field.onChange(nextName)}
           onClear={onCustomerClear}
-          placeholder={t("Search or create customer...")}
+          placeholder="Search or create customer..."
           initialDisplayName={initialCustomerName}
           inputTestId="document-customer-input"
+          inputDataDemo="marketing-demo-customer-input"
           inputRef={nameInputRef}
           commitOnBlurMode={showCustomerForm ? "update-inline" : "create"}
+          t={t}
+          locale={locale}
+          ariaInvalid={!!customerNameError}
         />
+        {customerNameError && <p className="font-normal text-destructive text-xs">{customerNameError}</p>}
       </div>
 
       {showCustomerForm && (

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

@@ -4,14 +4,14 @@
  * 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, UseFormGetValues, UseFormSetValue, UseFormWatch } from "react-hook-form";
+import type { 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.
  */
-export type AnyControl = Control<any, any, any>;
+export type AnyControl = any;
 
 /**
  * Base props for document form sections that receive form utilities.

package/src/components/documents/create/linked-documents-info.tsx

@@ -1,4 +1,5 @@
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/ui/components/ui/table";
+import { formatDateOnlyForDisplay } from "@/ui/lib/date-only";
 
 export type LinkedDocumentSummary = {
   id: string;
@@ -16,21 +17,12 @@ type LinkedDocumentsInfoProps = {
 };
 
 export function LinkedDocumentsInfo({ documents, locale, t }: LinkedDocumentsInfoProps) {
-  if (documents.length === 0) return null;
+  const validDocuments = documents.filter((document): document is LinkedDocumentSummary => !!document && !!document.id);
+  if (validDocuments.length === 0) return null;
 
-  const currencyCode = documents[0].currency_code || "EUR";
+  const currencyCode = validDocuments[0].currency_code || "EUR";
 
-  const formatDate = (dateStr: string) => {
-    try {
-      return new Date(dateStr).toLocaleDateString(locale, {
-        year: "numeric",
-        month: "short",
-        day: "numeric",
-      });
-    } catch {
-      return dateStr;
-    }
-  };
+  const formatDate = (dateStr: string) => formatDateOnlyForDisplay(dateStr, locale);
 
   const formatCurrency = (amount: number) => {
     try {
@@ -67,7 +59,7 @@ export function LinkedDocumentsInfo({ documents, locale, t }: LinkedDocumentsInf
           </TableRow>
         </TableHeader>
         <TableBody>
-          {documents.map((doc) => (
+          {validDocuments.map((doc) => (
             <TableRow key={doc.id}>
               <TableCell className="py-1.5 text-sm">{typeLabel(doc.type)}</TableCell>
               <TableCell className="py-1.5 text-sm">{doc.number}</TableCell>

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

@@ -1,16 +1,16 @@
 "use client";
 
 import type { CreateInvoiceRequest } from "@spaceinvoices/js-sdk";
+import { advanceInvoices, creditNotes, deliveryNotes, estimates, invoices } 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 { DocumentPreviewSkeleton } from "../shared/document-preview-skeleton";
 import { ScaledDocumentPreview } from "../shared/scaled-document-preview";
 import { useA4Scaling } from "../shared/use-a4-scaling";
 import type { DocumentTypes } from "../types";
-import { filterUnresolvedTaxes } from "./prepare-preview-data";
+import { filterUnresolvedTaxes, normalizeDocumentPreviewDates } from "./prepare-preview-data";
 
 const LIVE_PREVIEW_TIMING_EVENT = "si:live-preview-timing";
 const LIVE_PREVIEW_DEBOUNCE_MS = 300;
@@ -29,8 +29,6 @@ type LiveInvoicePreviewProps = {
   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;
   /** Translation function for UI strings */
@@ -66,7 +64,6 @@ export function LiveInvoicePreview({
   currency: _currency = "EUR",
   template,
   className,
-  locale: _locale,
   fixedScale,
   t: tProp,
   documentTypeLabel: _documentTypeLabel,
@@ -80,7 +77,6 @@ export function LiveInvoicePreview({
   const [isRefreshPending, setIsRefreshPending] = 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 lastRequestKeyRef = useRef<string | null>(null);
@@ -122,7 +118,7 @@ export function LiveInvoicePreview({
       setError(null);
 
       try {
-        if (!sdk || !activeEntity?.id) {
+        if (!activeEntity?.id) {
           throw new Error("Authentication required");
         }
         const startedAt = performance.now();
@@ -130,7 +126,7 @@ export function LiveInvoicePreview({
         // 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 = {
+        const previewData = normalizeDocumentPreviewDates({
           ...invoiceDataWithoutNumber,
           // Filter out unresolved tax_ids (race condition: form may add
           // { tax_id: undefined } before the tax dropdown auto-selects a value)
@@ -146,7 +142,7 @@ export function LiveInvoicePreview({
             tax_number: activeEntity.tax_number,
             ...invoiceData.issuer,
           },
-        };
+        });
         const requestKey = JSON.stringify({
           documentType,
           template,
@@ -173,7 +169,8 @@ export function LiveInvoicePreview({
         });
 
         // Call the render API using the appropriate SDK method for the document type
-        // Don't send locale — let entity locale drive formatting (decimal separators, date format)
+        // Frontend preview requests intentionally avoid locale/language overrides.
+        // Backend/entity defaults drive document formatting and default output language.
         const renderParams: Record<string, any> = { partial: "true" as const, template };
         if (qrOverrides?.upn_qr_enabled !== undefined) {
           renderParams.upn_qr_enabled = qrOverrides.upn_qr_enabled ? "true" : "false";
@@ -188,19 +185,19 @@ export function LiveInvoicePreview({
         let html: string;
         switch (documentType) {
           case "estimate":
-            html = await sdk.estimates.renderEstimatePreview(previewData as any, renderParams, requestOpts);
+            html = await estimates.renderEstimatePreview(previewData as any, renderParams, requestOpts);
             break;
           case "credit_note":
-            html = await sdk.creditNotes.renderCreditNotePreview(previewData as any, renderParams, requestOpts);
+            html = await creditNotes.renderCreditNotePreview(previewData as any, renderParams, requestOpts);
             break;
           case "advance_invoice":
-            html = await sdk.advanceInvoices.renderAdvanceInvoicePreview(previewData as any, renderParams, requestOpts);
+            html = await advanceInvoices.renderAdvanceInvoicePreview(previewData as any, renderParams, requestOpts);
             break;
           case "delivery_note":
-            html = await sdk.deliveryNotes.renderDeliveryNotePreview(previewData as any, renderParams, requestOpts);
+            html = await deliveryNotes.renderDeliveryNotePreview(previewData as any, renderParams, requestOpts);
             break;
           default:
-            html = await sdk.invoices.renderInvoicePreview(previewData as any, renderParams, requestOpts);
+            html = await invoices.renderInvoicePreview(previewData as any, renderParams, requestOpts);
             break;
         }
 
@@ -258,7 +255,6 @@ export function LiveInvoicePreview({
       activeEntity?.city,
       activeEntity?.name,
       template,
-      sdk,
       documentType,
       qrOverrides,
       qrOverrides?.upn_qr_enabled,
@@ -325,7 +321,12 @@ export function LiveInvoicePreview({
   const showRefreshBadge = !!previewHtml && (isRefreshPending || isLoading);
 
   return (
-    <div ref={containerRef} className={cn("relative", className)}>
+    <div
+      ref={containerRef}
+      className={cn("relative", className)}
+      data-testid="live-preview"
+      data-demo="marketing-demo-live-preview"
+    >
       {/* 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">
@@ -351,7 +352,10 @@ export function LiveInvoicePreview({
             </div>
           )}
           {isLoading && <div className="absolute inset-0 z-10 rounded-lg bg-background/35 backdrop-blur-[1.5px]" />}
-          <div className={cn(isLoading && "opacity-75 transition-opacity duration-200")}>
+          <div
+            className={cn(isLoading && "opacity-75 transition-opacity duration-200")}
+            data-demo="marketing-demo-totals-root"
+          >
             <ScaledDocumentPreview
               htmlContent={previewHtml}
               scale={scale}

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

@@ -1,10 +1,18 @@
 import { HelpCircle, Plus, Trash2 } from "lucide-react";
 import { Button } from "@/ui/components/ui/button";
 import { Checkbox } from "@/ui/components/ui/checkbox";
+import { Input } from "@/ui/components/ui/input";
 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";
+import {
+  createEmptyPaymentRow,
+  type DraftPaymentRow,
+  derivePaymentRowAmounts,
+  getDisplayPaymentAmount,
+  getRecordedPaymentTotal,
+} from "./payment-rows";
 
 // Regular payment types (excluding special types like credit_note and advance)
 const regularPaymentTypes = ["cash", "bank_transfer", "card", "check", "other"] as const;
@@ -24,27 +32,39 @@ type MarkAsPaidSectionProps = {
   /** Called when the checkbox changes */
   onCheckedChange: (checked: boolean) => void;
   /** Selected payment types */
-  paymentTypes: string[];
-  /** Called when payment types change */
-  onPaymentTypesChange: (values: string[]) => void;
+  paymentRows: DraftPaymentRow[];
+  /** Called when payment rows change */
+  onPaymentRowsChange: (values: DraftPaymentRow[]) => void;
+  /** Current document total used for derived payment suggestions */
+  documentTotal: number;
   /** Translation function */
   t: (key: string) => string;
   /** Always show payment type selector (e.g. for FINA fiscalization) */
   alwaysShowPaymentType?: boolean;
   /** Force paid state — hides the checkbox and always shows payment selectors */
   forced?: boolean;
+  validationMessage?: string;
+  requireFullPayment?: boolean;
 };
 
 export function MarkAsPaidSection({
   checked,
   onCheckedChange,
-  paymentTypes,
-  onPaymentTypesChange,
+  paymentRows,
+  onPaymentRowsChange,
+  documentTotal,
   t,
   alwaysShowPaymentType,
   forced,
+  validationMessage,
+  requireFullPayment,
 }: MarkAsPaidSectionProps) {
   const showPaymentTypes = forced || checked || alwaysShowPaymentType;
+  const showPaymentAmounts = paymentRows.length > 1;
+  const showPaymentSummary = paymentRows.length > 1;
+  const derivedAmounts = derivePaymentRowAmounts(paymentRows, documentTotal);
+  const recordedTotal = getRecordedPaymentTotal(paymentRows, documentTotal);
+  const remainingTotal = Math.max(0, Math.round((documentTotal - recordedTotal) * 100) / 100);
 
   return (
     <div className={cn("flex flex-col gap-4 rounded-md border p-4", showPaymentTypes && "gap-3")}>
@@ -68,7 +88,11 @@ export function MarkAsPaidSection({
                     <HelpCircle className="size-4 text-muted-foreground" />
                   </button>
                 </TooltipTrigger>
-                <TooltipContent side="top">{t("Invoice will be marked as fully paid upon creation")}</TooltipContent>
+                <TooltipContent side="top">
+                  {requireFullPayment
+                    ? t("This document must be fully paid on creation")
+                    : t("Record one or more payments on creation")}
+                </TooltipContent>
               </Tooltip>
             )}
           </div>
@@ -80,21 +104,26 @@ export function MarkAsPaidSection({
           {alwaysShowPaymentType && !checked && (
             <Label className="text-muted-foreground text-xs">{t("Payment Type")}</Label>
           )}
-          {paymentTypes.map((type, index) => (
-            // biome-ignore lint/suspicious/noArrayIndexKey: payment types list uses index key
-            <div key={index} className="flex items-center gap-2">
+          {paymentRows.map((row, index) => (
+            <div
+              key={row.id ?? `${row.type ?? "payment"}-${row.amount || "empty"}`}
+              className={cn(
+                "grid gap-2 md:items-center",
+                showPaymentAmounts ? "md:grid-cols-[minmax(0,1fr)_140px_auto]" : "md:grid-cols-[minmax(0,1fr)_auto]",
+              )}
+            >
               <Select
-                value={type}
+                value={row.type ?? undefined}
                 onValueChange={(v) => {
-                  if (v) {
-                    const updated = [...paymentTypes];
-                    updated[index] = v;
-                    onPaymentTypesChange(updated);
-                  }
+                  const updated = [...paymentRows];
+                  updated[index] = { ...updated[index], type: (v as any) ?? null };
+                  onPaymentRowsChange(updated);
                 }}
               >
                 <SelectTrigger className="w-full md:w-fit">
-                  <SelectValue placeholder={t("Select payment type")}>{t(PAYMENT_TYPE_LABELS[type])}</SelectValue>
+                  <SelectValue placeholder={t("Select payment type")}>
+                    {row.type ? t(PAYMENT_TYPE_LABELS[row.type]) : undefined}
+                  </SelectValue>
                 </SelectTrigger>
                 <SelectContent>
                   {regularPaymentTypes.map((pt) => (
@@ -104,15 +133,33 @@ export function MarkAsPaidSection({
                   ))}
                 </SelectContent>
               </Select>
-              {paymentTypes.length > 1 && (
+              {showPaymentAmounts && (
+                <Input
+                  type="number"
+                  step="0.01"
+                  inputMode="decimal"
+                  value={getDisplayPaymentAmount(row, derivedAmounts[index])}
+                  onChange={(event) => {
+                    const updated = [...paymentRows];
+                    updated[index] = {
+                      ...updated[index],
+                      amount: event.target.value,
+                      amountTouched: true,
+                    };
+                    onPaymentRowsChange(updated);
+                  }}
+                  placeholder={t("Amount")}
+                />
+              )}
+              {paymentRows.length > 1 && (
                 <Button
                   type="button"
                   variant="ghost"
                   size="icon"
                   className="size-8 shrink-0"
                   onClick={() => {
-                    const updated = paymentTypes.filter((_, i) => i !== index);
-                    onPaymentTypesChange(updated);
+                    const updated = paymentRows.filter((_, i) => i !== index);
+                    onPaymentRowsChange(updated);
                   }}
                 >
                   <Trash2 className="size-4 text-muted-foreground" />
@@ -125,11 +172,24 @@ export function MarkAsPaidSection({
             variant="ghost"
             size="sm"
             className="w-fit gap-1 text-muted-foreground"
-            onClick={() => onPaymentTypesChange([...paymentTypes, "bank_transfer"])}
+            onClick={() => onPaymentRowsChange([...paymentRows, createEmptyPaymentRow()])}
           >
             <Plus className="size-4" />
             {t("Add payment")}
           </Button>
+          {validationMessage && <p className="text-destructive text-sm">{t(validationMessage)}</p>}
+          {showPaymentSummary && (
+            <div className="grid gap-1 text-muted-foreground text-sm">
+              <div className="flex items-center justify-between">
+                <span>{t("Recorded now")}</span>
+                <span>{recordedTotal.toFixed(2)}</span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span>{requireFullPayment ? t("Remaining to allocate") : t("Remaining due")}</span>
+                <span>{remainingTotal.toFixed(2)}</span>
+              </div>
+            </div>
+          )}
         </div>
       )}
     </div>