@spaceinvoices/react-ui 0.4.5 → 0.4.7

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

@@ -4,8 +4,10 @@
  */
 import { X } from "lucide-react";
 import { useEffect, useRef } from "react";
+import { useController } from "react-hook-form";
 import { FormInput } from "@/ui/components/form";
 import { Button } from "@/ui/components/ui/button";
+import { Checkbox } from "@/ui/components/ui/checkbox";
 import { Label } from "@/ui/components/ui/label";
 import { cn } from "@/ui/lib/utils";
 import { CustomerAutocomplete } from "../../customers/customer-autocomplete";
@@ -22,6 +24,8 @@ type DocumentRecipientSectionProps = {
   selectedCustomerId?: string;
   /** Initial customer name for display (used when duplicating documents) */
   initialCustomerName?: string;
+  /** Show end consumer (B2C) toggle next to tax number (Croatian entity + domestic transaction) */
+  showEndConsumerToggle?: boolean;
   t: (key: string) => string;
 };
 
@@ -34,10 +38,16 @@ export function DocumentRecipientSection({
   shouldFocusName,
   selectedCustomerId,
   initialCustomerName,
+  showEndConsumerToggle,
   t,
 }: DocumentRecipientSectionProps) {
   const nameInputRef = useRef<HTMLInputElement>(null);
 
+  const endConsumerController = useController({
+    control: control as any,
+    name: "customer.is_end_consumer" as any,
+  });
+
   useEffect(() => {
     if (showCustomerForm && shouldFocusName) {
       // Small delay to ensure the input is rendered
@@ -93,7 +103,26 @@ export function DocumentRecipientSection({
             <FormInput control={control} name="customer.country" placeholder={t("Country")} label="" />
           </div>
 
-          <FormInput control={control} name="customer.tax_number" placeholder={t("Tax Number")} label="" />
+          <div className="flex items-center gap-3">
+            <div className="flex-1">
+              <FormInput control={control} name="customer.tax_number" placeholder={t("Tax Number")} label="" />
+            </div>
+            {showEndConsumerToggle && (
+              <div className="flex items-center gap-1.5 pt-0.5">
+                <Checkbox
+                  id="is_end_consumer"
+                  checked={endConsumerController.field.value === true}
+                  onCheckedChange={(checked) => endConsumerController.field.onChange(checked === true)}
+                />
+                <Label
+                  htmlFor="is_end_consumer"
+                  className="cursor-pointer whitespace-nowrap font-normal text-muted-foreground text-sm"
+                >
+                  {t("End consumer")}
+                </Label>
+              </div>
+            )}
+          </div>
         </>
       )}
     </div>

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

@@ -1,11 +1,11 @@
 "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 { 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";
@@ -58,7 +58,7 @@ export function LiveInvoicePreview({
   locale: _locale,
   fixedScale,
   t: tProp,
-  documentTypeLabel,
+  documentTypeLabel: _documentTypeLabel,
   documentType = "invoice",
   qrOverrides,
 }: LiveInvoicePreviewProps) {
@@ -235,18 +235,10 @@ export function LiveInvoicePreview({
     };
   }, []);
 
+  const showSkeleton = (!previewHtml && !error) || (isLoading && !previewHtml);
+
   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">{t("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">
@@ -257,25 +249,20 @@ export function LiveInvoicePreview({
         </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">{documentTypeLabel || t("Document Preview")}</p>
-            <p className="text-muted-foreground text-sm">{t("Start filling the form to see a live preview")}</p>
-          </div>
-        </div>
-      )}
+      {/* Skeleton: shown on initial load and when loading without existing preview */}
+      {showSkeleton && <DocumentPreviewSkeleton />}
 
       {/* 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 className={cn(isLoading && "opacity-50 transition-opacity duration-200")}>
+          <ScaledDocumentPreview
+            htmlContent={previewHtml}
+            scale={scale}
+            contentHeight={contentHeight}
+            A4_WIDTH_PX={A4_WIDTH_PX}
+            contentRef={contentRef}
+          />
+        </div>
       )}
     </div>
   );

package/src/components/documents/create/prepare-document-submission.ts

@@ -7,6 +7,7 @@ type CustomerData = {
   state?: string | null;
   country?: string | null;
   tax_number?: string | null;
+  is_end_consumer?: boolean | null;
   save_customer?: boolean;
 };
 
@@ -161,12 +162,14 @@ export function prepareDocumentSubmission<T extends BaseDocumentValues>(
 
   // Build payload with date conversions
   // Destructure to exclude fields we handle explicitly (number is always server-generated)
-  const { number: _number, note, payment_terms, ...restValues } = values as any;
+  const { number: _number, note, payment_terms, reference, signature, ...restValues } = values as any;
   const payload: any = {
     ...restValues,
     ...(note?.trim() && { note: note.trim() }),
+    ...(reference?.trim() && { reference: reference.trim() }),
     // Advance invoices don't have payment terms - they are documents requesting payment
     ...(options.documentType !== "advance_invoice" && payment_terms?.trim() && { payment_terms: payment_terms.trim() }),
+    ...(signature?.trim() && { signature: signature.trim() }),
     date: values.date ? new Date(values.date) : undefined,
   };
 

package/src/components/documents/create/smart-code-insert-button.tsx

@@ -22,6 +22,12 @@ const TEMPLATE_VARIABLES = [
     variables: [
       { code: "{entity_name}", label: "Company name" },
       { code: "{entity_email}", label: "Email address" },
+      { code: "{entity_address}", label: "Address" },
+      { code: "{entity_post_code}", label: "Post code" },
+      { code: "{entity_city}", label: "City" },
+      { code: "{entity_country}", label: "Country" },
+      { code: "{entity_tax_number}", label: "Tax number" },
+      { code: "{entity_company_number}", label: "Company number" },
     ],
   },
   {

package/src/components/documents/create/use-document-customer-form.ts

@@ -14,6 +14,7 @@ export type CustomerData = {
   state?: string | null;
   country?: string | null;
   tax_number?: string | null;
+  is_end_consumer?: boolean | null;
 };
 
 /**
@@ -97,6 +98,7 @@ export function useDocumentCustomerForm<TForm extends DocumentFormWithCustomer>(
           state: toFormValue(customer.state),
           country: toFormValue(customer.country),
           tax_number: toFormValue(customer.tax_number),
+          is_end_consumer: customer.is_end_consumer ?? undefined,
         } as PathValue<TForm, Path<TForm>>,
       );
       setOriginalCustomer(null);
@@ -115,6 +117,7 @@ export function useDocumentCustomerForm<TForm extends DocumentFormWithCustomer>(
         state: toFormValue(customer.state),
         country: toFormValue(customer.country),
         tax_number: toFormValue(customer.tax_number),
+        is_end_consumer: customer.is_end_consumer ?? undefined,
       };
 
       setValue("customer" as Path<TForm>, customerData as PathValue<TForm, Path<TForm>>);
@@ -140,6 +143,7 @@ export function useDocumentCustomerForm<TForm extends DocumentFormWithCustomer>(
         state: undefined,
         country: undefined,
         tax_number: undefined,
+        is_end_consumer: true,
       } as PathValue<TForm, Path<TForm>>,
     );
     setOriginalCustomer(null);

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

@@ -0,0 +1,63 @@
+import { Skeleton } from "@/ui/components/ui/skeleton";
+
+/** A4-shaped skeleton that mimics a document layout */
+export function DocumentPreviewSkeleton() {
+  return (
+    <div className="rounded-lg border bg-neutral-100 p-4">
+      <div className="mx-auto bg-white p-8" style={{ maxWidth: 794, aspectRatio: "210 / 297" }}>
+        {/* Header: logo + company info */}
+        <div className="flex justify-between">
+          <Skeleton className="h-10 w-32 bg-neutral-200" />
+          <div className="flex flex-col items-end gap-1.5">
+            <Skeleton className="h-3 w-40 bg-neutral-200" />
+            <Skeleton className="h-3 w-32 bg-neutral-200" />
+            <Skeleton className="h-3 w-28 bg-neutral-200" />
+          </div>
+        </div>
+
+        {/* Title */}
+        <Skeleton className="mt-8 h-5 w-28 bg-neutral-200" />
+
+        {/* Recipient + details row */}
+        <div className="mt-6 flex justify-between">
+          <div className="flex flex-col gap-1.5">
+            <Skeleton className="h-3 w-36 bg-neutral-200" />
+            <Skeleton className="h-3 w-28 bg-neutral-200" />
+            <Skeleton className="h-3 w-24 bg-neutral-200" />
+          </div>
+          <div className="flex flex-col items-end gap-1.5">
+            <Skeleton className="h-3 w-24 bg-neutral-200" />
+            <Skeleton className="h-3 w-20 bg-neutral-200" />
+            <Skeleton className="h-3 w-24 bg-neutral-200" />
+          </div>
+        </div>
+
+        {/* Table header */}
+        <div className="mt-8 flex gap-4 border-b pb-2">
+          <Skeleton className="h-3 w-8 bg-neutral-200" />
+          <Skeleton className="h-3 flex-1 bg-neutral-200" />
+          <Skeleton className="h-3 w-12 bg-neutral-200" />
+          <Skeleton className="h-3 w-16 bg-neutral-200" />
+          <Skeleton className="h-3 w-16 bg-neutral-200" />
+        </div>
+        {/* Table rows */}
+        {[1, 2, 3].map((i) => (
+          <div key={i} className="flex gap-4 border-b py-2.5">
+            <Skeleton className="h-3 w-8 bg-neutral-200" />
+            <Skeleton className="h-3 flex-1 bg-neutral-200" />
+            <Skeleton className="h-3 w-12 bg-neutral-200" />
+            <Skeleton className="h-3 w-16 bg-neutral-200" />
+            <Skeleton className="h-3 w-16 bg-neutral-200" />
+          </div>
+        ))}
+
+        {/* Totals */}
+        <div className="mt-4 flex flex-col items-end gap-1.5">
+          <Skeleton className="h-3 w-32 bg-neutral-200" />
+          <Skeleton className="h-3 w-28 bg-neutral-200" />
+          <Skeleton className="h-4 w-36 bg-neutral-200" />
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -1,3 +1,4 @@
 export { DocumentPreviewDisplay, InvoicePreviewDisplay } from "./document-preview-display";
+export { DocumentPreviewSkeleton } from "./document-preview-skeleton";
 export { ScaledDocumentPreview } from "./scaled-document-preview";
 export { useA4Scaling } from "./use-a4-scaling";

package/src/components/documents/view/document-actions-bar.tsx

@@ -81,8 +81,10 @@ interface DocumentActionsBarProps extends ComponentTranslationProps {
   onDuplicate?: (targetType: DocumentType) => void;
   /** Called when user wants to edit the document */
   onEdit?: () => void;
-  /** Whether the document is editable (not voided, not FURS fiscalized) */
+  /** Whether the document is editable (not voided, not fiscalized) */
   isEditable?: boolean;
+  /** Reason why editing is disabled (shown as tooltip) */
+  editDisabledReason?: string;
   /** Called when user wants to finalize a draft document */
   onFinalize?: () => void;
   /** Whether finalization is in progress */
@@ -119,6 +121,7 @@ export function DocumentActionsBar({
   onDuplicate,
   onEdit,
   isEditable,
+  editDisabledReason,
   onFinalize,
   isFinalizing,
   onDeleteDraft,
@@ -233,12 +236,31 @@ export function DocumentActionsBar({
       )}
 
       {/* Edit */}
-      {onEdit && isEditable && (
-        <Button variant="outline" size="sm" onClick={onEdit} className="cursor-pointer">
-          <Pencil className="mr-2 h-4 w-4" />
-          {t("Edit")}
-        </Button>
-      )}
+      {onEdit &&
+        (isEditable ? (
+          <Button variant="outline" size="sm" onClick={onEdit} className="cursor-pointer">
+            <Pencil className="mr-2 h-4 w-4" />
+            {t("Edit")}
+          </Button>
+        ) : (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="outline"
+                size="sm"
+                aria-disabled="true"
+                className="pointer-events-auto opacity-50"
+                onClick={(e) => e.preventDefault()}
+              >
+                <Pencil className="mr-2 h-4 w-4" />
+                {t("Edit")}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{editDisabledReason}</p>
+            </TooltipContent>
+          </Tooltip>
+        ))}
 
       {/* Share Link */}
       {shareUrl ? (

package/src/components/documents/view/document-details-card.tsx

@@ -148,6 +148,12 @@ export function DocumentDetailsCard({
 
       {/* Totals */}
       <div className="space-y-2 text-sm">
+        {document.total_discount != null && document.total_discount !== 0 && (
+          <div className="flex justify-between">
+            <span className="text-muted-foreground">{t("Discount")}</span>
+            <span>{fmt(document.total_discount * sign)}</span>
+          </div>
+        )}
         <div className="flex justify-between">
           <span className="text-muted-foreground">{t("Subtotal")}</span>
           <span>{fmt(document.total * sign)}</span>

package/src/components/documents/view/locales/de.ts

@@ -36,6 +36,7 @@ export default {
   "Service period": "Leistungszeitraum",
   "Valid until": "Gültig bis",
   Customer: "Kunde",
+  Discount: "Rabatt",
   Subtotal: "Zwischensumme",
   Tax: "Steuer",
   of: "von",

package/src/components/documents/view/locales/es.ts

@@ -35,6 +35,7 @@ export default {
   "Service period": "Período de servicio",
   "Valid until": "Válido hasta",
   Customer: "Cliente",
+  Discount: "Descuento",
   Subtotal: "Subtotal",
   Tax: "Impuesto",
   of: "de",

package/src/components/documents/view/locales/fr.ts

@@ -35,6 +35,7 @@ export default {
   "Service period": "Période de service",
   "Valid until": "Valable jusqu'au",
   Customer: "Client",
+  Discount: "Remise",
   Subtotal: "Sous-total",
   Tax: "Taxe",
   of: "de",

package/src/components/documents/view/locales/hr.ts

@@ -35,6 +35,7 @@ export default {
   "Service period": "Razdoblje usluge",
   "Valid until": "Vrijedi do",
   Customer: "Kupac",
+  Discount: "Popust",
   Subtotal: "Međuzbroj",
   Tax: "Porez",
   of: "od",

package/src/components/documents/view/locales/it.ts

@@ -35,6 +35,7 @@ export default {
   "Service period": "Periodo di servizio",
   "Valid until": "Valido fino al",
   Customer: "Cliente",
+  Discount: "Sconto",
   Subtotal: "Subtotale",
   Tax: "Imposta",
   of: "di",

package/src/components/documents/view/locales/nl.ts

@@ -35,6 +35,7 @@ export default {
   "Service period": "Serviceperiode",
   "Valid until": "Geldig tot",
   Customer: "Klant",
+  Discount: "Korting",
   Subtotal: "Subtotaal",
   Tax: "Belasting",
   of: "van",

package/src/components/documents/view/locales/pl.ts

@@ -35,6 +35,7 @@ export default {
   "Service period": "Okres usługi",
   "Valid until": "Ważne do",
   Customer: "Klient",
+  Discount: "Rabat",
   Subtotal: "Suma częściowa",
   Tax: "Podatek",
   of: "z",

package/src/components/documents/view/locales/pt.ts

@@ -35,6 +35,7 @@ export default {
   "Service period": "Período de serviço",
   "Valid until": "Válido até",
   Customer: "Cliente",
+  Discount: "Desconto",
   Subtotal: "Subtotal",
   Tax: "Imposto",
   of: "de",

package/src/components/documents/view/locales/sl.ts

@@ -35,6 +35,7 @@ export default {
   "Service period": "Obdobje storitve",
   "Valid until": "Veljavno do",
   Customer: "Stranka",
+  Discount: "Popust",
   Subtotal: "Vmesni seštevek",
   Tax: "DDV",
   of: "od",

package/src/components/entities/entity-settings-form/email-template-variables-info.tsx

@@ -12,6 +12,12 @@ const TEMPLATE_VARIABLES = [
     variables: [
       { name: "{entity_name}", description: "Your company or entity name" },
       { name: "{entity_email}", description: "Entity email address" },
+      { name: "{entity_address}", description: "Entity address" },
+      { name: "{entity_post_code}", description: "Entity post code" },
+      { name: "{entity_city}", description: "Entity city" },
+      { name: "{entity_country}", description: "Entity country" },
+      { name: "{entity_tax_number}", description: "Entity tax number" },
+      { name: "{entity_company_number}", description: "Entity company number" },
     ],
   },
   {

package/src/components/entities/entity-settings-form/input-with-preview.tsx

@@ -2,6 +2,7 @@ import type { Entity, Estimate, Invoice } from "@spaceinvoices/js-sdk";
 import { forwardRef, useState } from "react";
 import { Input } from "@/ui/components/ui/input";
 import { Textarea } from "@/ui/components/ui/textarea";
+import { replaceTemplateVariablesForPreview } from "@/ui/lib/template-variables";
 import { cn } from "@/ui/lib/utils";
 
 interface InputWithPreviewProps {
@@ -16,150 +17,6 @@ interface InputWithPreviewProps {
   disabled?: boolean;
 }
 
-function formatVariableName(varName: string): string {
-  // Convert snake_case (with optional dot notation) to Title Case with spaces
-  // e.g., "document_number" -> "Document Number", "bank_account.iban" -> "Bank Account Iban"
-  return varName
-    .replace(/\./g, "_")
-    .split("_")
-    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
-    .join(" ");
-}
-
-function getVariableValue(varName: string, entity: Entity, document?: Invoice | Estimate | null): string | null {
-  // Entity-related variables
-  if (varName === "entity_name") return entity.name || null;
-  if (varName === "entity_email") return (entity.settings as any)?.email || null;
-
-  // Date variables
-  if (varName === "current_date") {
-    return new Date().toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" });
-  }
-  if (varName === "current_year") return new Date().getFullYear().toString();
-
-  // Document-specific variables (only available when document is provided)
-  if (document) {
-    if (varName === "document_number") return document.number || null;
-    if (varName === "document_date") {
-      return document.date
-        ? new Date(document.date).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" })
-        : null;
-    }
-    if (varName === "document_total") {
-      return document.total_with_tax
-        ? new Intl.NumberFormat("en-US", { style: "currency", currency: document.currency_code || "USD" }).format(
-            Number(document.total_with_tax),
-          )
-        : null;
-    }
-    if (varName === "document_currency") return document.currency_code || null;
-
-    // Invoice-specific
-    if ("date_due" in document && varName === "document_due_date") {
-      return document.date_due
-        ? new Date(document.date_due).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" })
-        : null;
-    }
-
-    // Estimate-specific
-    if ("date_valid_till" in document && varName === "document_valid_until") {
-      return document.date_valid_till
-        ? new Date(document.date_valid_till).toLocaleDateString("en-US", {
-            month: "long",
-            day: "numeric",
-            year: "numeric",
-          })
-        : null;
-    }
-
-    // Customer variables
-    if (document.customer) {
-      if (varName === "customer_name") return document.customer.name || null;
-      if (varName === "customer_email") return (document.customer as any).email || null;
-    }
-  }
-
-  // Bank account variables (from entity settings)
-  const bankAccounts = (entity.settings as any)?.bank_accounts as
-    | Array<{
-        iban?: string;
-        bank_name?: string;
-        bic?: string;
-        account_number?: string;
-        routing_number?: string;
-        sort_code?: string;
-        is_default?: boolean;
-      }>
-    | undefined;
-  const bankAccount = bankAccounts?.find((acc) => acc.is_default) ?? bankAccounts?.[0];
-
-  if (varName === "bank_account" && bankAccount) {
-    const lines: string[] = [];
-    if (bankAccount.bank_name) lines.push(bankAccount.bank_name);
-    if (bankAccount.iban) lines.push(`IBAN: ${bankAccount.iban}`);
-    else if (bankAccount.account_number) lines.push(`Account: ${bankAccount.account_number}`);
-    if (bankAccount.bic) lines.push(`BIC: ${bankAccount.bic}`);
-    return lines.join(", ") || null;
-  }
-  if (varName === "bank_account.iban") return bankAccount?.iban || null;
-  if (varName === "bank_account.bank_name") return bankAccount?.bank_name || null;
-  if (varName === "bank_account.bic") return bankAccount?.bic || null;
-  if (varName === "bank_account.account_number") return bankAccount?.account_number || null;
-
-  // Return null for unavailable variables - they will show as placeholders
-  return null;
-}
-
-function replaceTemplateVariables(
-  template: string,
-  entity: Entity,
-  document?: Invoice | Estimate | null,
-): React.ReactNode[] {
-  if (!template) return [];
-
-  // Split by variable pattern and process
-  const parts: React.ReactNode[] = [];
-  const regex = /\{([^}]+)\}/g;
-  let lastIndex = 0;
-  let match: RegExpExecArray | null = null;
-
-  match = regex.exec(template);
-  while (match !== null) {
-    // Add text before the match
-    if (match.index > lastIndex) {
-      parts.push(template.slice(lastIndex, match.index));
-    }
-
-    // Add the replaced variable with styling
-    // Green for resolved values, primary color for placeholders
-    const varName = match[1];
-    const actualValue = getVariableValue(varName, entity, document);
-    const displayValue = actualValue || formatVariableName(varName);
-
-    parts.push(
-      <span
-        key={match.index}
-        className={cn(
-          "rounded px-1.5 py-0.5 font-medium text-xs",
-          actualValue ? "bg-secondary text-secondary-foreground" : "bg-primary/10 text-primary",
-        )}
-      >
-        {displayValue}
-      </span>,
-    );
-
-    lastIndex = regex.lastIndex;
-    match = regex.exec(template);
-  }
-
-  // Add remaining text
-  if (lastIndex < template.length) {
-    parts.push(template.slice(lastIndex));
-  }
-
-  return parts;
-}
-
 export const InputWithPreview = forwardRef<HTMLInputElement | HTMLTextAreaElement, InputWithPreviewProps>(
   function InputWithPreview(
     { value, onChange, placeholder, entity, document, multiline = false, className, rows, disabled = false },
@@ -167,7 +24,7 @@ export const InputWithPreview = forwardRef<HTMLInputElement | HTMLTextAreaElemen
   ) {
     const [isFocused, setIsFocused] = useState(false);
 
-    const preview = replaceTemplateVariables(value, entity, document);
+    const preview = replaceTemplateVariablesForPreview(value, entity, document);
     const hasValue = Boolean(value);
 
     const showPreview = !isFocused && hasValue && !disabled;

package/src/components/entities/entity-settings-form/locales/de.ts

@@ -106,6 +106,10 @@ export default {
   "Footer text displayed at the bottom of all PDF documents": "Fußzeilentext am unteren Rand aller PDF-Dokumente",
   "{entity_name} | Due Date: {document_due_date} | Invoice #{document_number}":
     "{entity_name} | Fällig am: {document_due_date} | Rechnung #{document_number}",
+  // Document signature
+  "Document Signature": "Dokumentunterschrift",
+  "Signature text displayed on all PDF documents": "Unterschriftstext auf allen PDF-Dokumenten",
+  "Add signature text...": "Unterschriftstext hinzufügen...",
   // Overdue Notifications section
   "Overdue Notifications": "Überfälligkeits-Benachrichtigungen",
   "Automatically remind customers about overdue invoices": "Erinnern Sie Kunden automatisch an überfällige Rechnungen",

package/src/components/entities/entity-settings-form/locales/es.ts

@@ -106,6 +106,10 @@ export default {
     "Texto del pie de página mostrado en la parte inferior de todos los documentos PDF",
   "{entity_name} | Due Date: {document_due_date} | Invoice #{document_number}":
     "{entity_name} | Vencimiento: {document_due_date} | Factura #{document_number}",
+  // Document signature
+  "Document Signature": "Firma del documento",
+  "Signature text displayed on all PDF documents": "Texto de firma mostrado en todos los documentos PDF",
+  "Add signature text...": "Añadir texto de firma...",
   // Overdue Notifications section
   "Overdue Notifications": "Notificaciones de vencimiento",
   "Automatically remind customers about overdue invoices":

package/src/components/entities/entity-settings-form/locales/fr.ts

@@ -106,6 +106,10 @@ export default {
     "Texte de pied de page affiché en bas de tous les documents PDF",
   "{entity_name} | Due Date: {document_due_date} | Invoice #{document_number}":
     "{entity_name} | Échéance : {document_due_date} | Facture #{document_number}",
+  // Document signature
+  "Document Signature": "Signature du document",
+  "Signature text displayed on all PDF documents": "Texte de signature affiché sur tous les documents PDF",
+  "Add signature text...": "Ajouter un texte de signature...",
   // Overdue Notifications section
   "Overdue Notifications": "Notifications de retard",
   "Automatically remind customers about overdue invoices":