@spaceinvoices/react-ui 0.4.4 → 0.4.6

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

@@ -2,7 +2,7 @@
  * Shared document items section for invoices and estimates
  * Handles: item management (add, remove, reorder)
  */
-import { PlusIcon } from "lucide-react";
+import { PlusIcon, SeparatorHorizontal } from "lucide-react";
 import type { MutableRefObject } from "react";
 import type { UseFormGetValues, UseFormSetValue, UseFormWatch } from "react-hook-form";
 import { Button } from "@/ui/components/ui/button";
@@ -65,6 +65,18 @@ export function DocumentItemsSection({
     ]);
   };
 
+  const addSeparator = () => {
+    const currentItems = getValues("items") || [];
+    setValue("items", [
+      ...currentItems,
+      {
+        type: "separator",
+        name: "",
+        description: "",
+      },
+    ]);
+  };
+
   const removeItem = (index: number) => {
     const currentItems = getValues("items") || [];
     setValue(
@@ -125,9 +137,14 @@ export function DocumentItemsSection({
         </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 className="flex gap-2">
+        <Button type="button" variant="outline" onClick={addItem} className="flex-1 cursor-pointer border-dashed">
+          <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">
+          <SeparatorHorizontal className="mr-2 h-4 w-4" /> {t("Add separator")}
+        </Button>
+      </div>
     </div>
   );
 }

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

@@ -30,6 +30,12 @@ type LiveInvoicePreviewProps = {
   documentTypeLabel?: string;
   /** Document type to determine which render endpoint to use */
   documentType?: DocumentTypes;
+  /** QR settings overrides for preview (before saving) */
+  qrOverrides?: {
+    upn_qr_enabled?: boolean;
+    upn_qr_display_mode?: "qr_only" | "full_slip";
+    epc_qr_enabled?: boolean;
+  };
 };
 
 /**
@@ -49,11 +55,12 @@ export function LiveInvoicePreview({
   currency: _currency = "EUR",
   template,
   className,
-  locale,
+  locale: _locale,
   fixedScale,
   t: tProp,
   documentTypeLabel,
   documentType = "invoice",
+  qrOverrides,
 }: LiveInvoicePreviewProps) {
   const t = tProp ?? ((key: string) => key);
   const [previewHtml, setPreviewHtml] = useState<string>("");
@@ -103,7 +110,7 @@ export function LiveInvoicePreview({
           // 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 || {
+          issuer: {
             name: activeEntity.name,
             address: activeEntity.address,
             address_2: activeEntity.address_2,
@@ -112,11 +119,22 @@ export function LiveInvoicePreview({
             state: activeEntity.state,
             country: activeEntity.country,
             tax_number: activeEntity.tax_number,
+            ...invoiceData.issuer,
           },
         };
 
         // Call the render API using the appropriate SDK method for the document type
-        const renderParams = { partial: "true" as const, template, locale };
+        // Don't send locale — let entity locale drive formatting (decimal separators, date format)
+        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";
+          if (qrOverrides.upn_qr_display_mode) {
+            renderParams.upn_qr_display_mode = qrOverrides.upn_qr_display_mode;
+          }
+        }
+        if (qrOverrides?.epc_qr_enabled !== undefined) {
+          renderParams.epc_qr_enabled = qrOverrides.epc_qr_enabled ? "true" : "false";
+        }
         const requestOpts = { entity_id: activeEntity.id };
         let html: string;
         switch (documentType) {
@@ -170,9 +188,11 @@ export function LiveInvoicePreview({
       activeEntity?.city,
       activeEntity?.name,
       template,
-      locale,
       sdk,
       documentType,
+      qrOverrides?.upn_qr_enabled,
+      qrOverrides?.upn_qr_display_mode,
+      qrOverrides?.epc_qr_enabled,
     ],
   );
 

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

@@ -31,6 +31,8 @@ type MarkAsPaidSectionProps = {
   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;
 };
 
 export function MarkAsPaidSection({
@@ -40,31 +42,38 @@ export function MarkAsPaidSection({
   onPaymentTypesChange,
   t,
   alwaysShowPaymentType,
+  forced,
 }: MarkAsPaidSectionProps) {
-  const showPaymentTypes = checked || alwaysShowPaymentType;
+  const showPaymentTypes = forced || checked || alwaysShowPaymentType;
 
   return (
     <div className={cn("flex flex-col gap-4 rounded-md border p-4", showPaymentTypes && "gap-3")}>
-      <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>
-          )}
+      {forced ? (
+        <div className="flex flex-row items-center space-x-3 space-y-0">
+          <Label>{t("Paid")}</Label>
         </div>
-      </div>
+      ) : (
+        <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>
+      )}
 
       {showPaymentTypes && (
         <div className="flex flex-col gap-2">

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

@@ -127,6 +127,15 @@ export function prepareDocumentSubmission<T extends BaseDocumentValues>(
   if (values.items) {
     const priceModes = options.priceModes ?? {};
     values.items = values.items.map((item: any, index: number) => {
+      // Separator items — pass through with only type, name, description
+      if (item.type === "separator") {
+        return {
+          type: "separator",
+          name: item.name,
+          description: item.description || undefined,
+        };
+      }
+
       const { price, ...rest } = item;
 
       // Transform price based on price mode (from component state, not form)
@@ -136,25 +145,30 @@ export function prepareDocumentSubmission<T extends BaseDocumentValues>(
       return {
         ...rest,
         ...priceFields,
-        taxes: item.taxes?.map((tax: any) => {
-          if (tax.tax_id) {
-            // Only send tax_id, API will resolve the rate
-            return { tax_id: tax.tax_id };
-          }
-          return tax;
-        }),
+        taxes: item.taxes
+          ?.map((tax: any) => {
+            if (tax.tax_id) {
+              // Only send tax_id, API will resolve the rate
+              return { tax_id: tax.tax_id };
+            }
+            return tax;
+          })
+          // Filter out empty placeholder taxes (UI adds { tax_id: undefined } for the dropdown)
+          .filter((tax: any) => tax.tax_id || tax.rate !== undefined || tax.classification),
       };
     });
   }
 
   // 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/shared/document-preview-display.tsx

@@ -80,9 +80,7 @@ export function DocumentPreviewDisplay({
         try {
           // Determine document type from shareable ID prefix
           const docTypePath = getDocTypePathFromShareableId(shareableId);
-          const response = await fetch(
-            `${apiBaseUrl}/${docTypePath}/shareable/${shareableId}/html${locale ? `?locale=${locale}` : ""}`,
-          );
+          const response = await fetch(`${apiBaseUrl}/${docTypePath}/shareable/${shareableId}/html`);
           if (!response.ok) {
             throw new Error("Failed to load preview");
           }
@@ -108,7 +106,8 @@ export function DocumentPreviewDisplay({
       try {
         // Fetch the rendered HTML by document ID using SDK wrapper
         // Document type is auto-detected from ID prefix (inv_, est_, cre_, adv_)
-        const html = await sdk.invoices.renderHtml(document.id, { template, locale }, { entity_id: activeEntity.id });
+        // 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 });
 
         setPreviewHtml(html);
         setError(null);

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

@@ -44,7 +44,8 @@ const translations = { sl, de, it, fr, es, pt, nl, pl, hr } as const;
 
 type Document = Invoice | Estimate | CreditNote | AdvanceInvoice;
 
-const PDF_LOCALE_CODES = [
+/** Language options for PDF label translations (formatting always uses entity locale) */
+const PDF_LANGUAGE_CODES = [
   { label: "English", code: "en-US" },
   { label: "German", code: "de-DE" },
   { label: "Slovenian", code: "sl-SI" },
@@ -100,22 +101,6 @@ interface DocumentActionsBarProps extends ComponentTranslationProps {
   isVoiding?: boolean;
 }
 
-function getApiLocale(uiLanguage: string): string {
-  const localeMap: Record<string, string> = {
-    en: "en-US",
-    de: "de-DE",
-    sl: "sl-SI",
-    it: "it-IT",
-    fr: "fr-FR",
-    es: "es-ES",
-    pt: "pt-PT",
-    nl: "nl-NL",
-    pl: "pl-PL",
-    hr: "hr-HR",
-  };
-  return localeMap[uiLanguage] || "en-US";
-}
-
 export function DocumentActionsBar({
   document,
   documentType,
@@ -163,7 +148,7 @@ export function DocumentActionsBar({
   const shareableId = (document as Invoice).shareable_id;
   const shareUrl = shareableId ? `${window.location.origin}/public/invoices/${shareableId}` : null;
 
-  const handleDownloadPdf = (locale: string) => downloadPdf(document, documentType, locale);
+  const handleDownloadPdf = (language?: string) => downloadPdf(document, documentType, language);
   const handleDownloadEslog = () => downloadEslog(document, documentType);
 
   const handleCopyShareLink = async () => {
@@ -178,7 +163,6 @@ export function DocumentActionsBar({
     }
   };
 
-  const apiLocale = getApiLocale(currentLocale);
   const isDraft = (document as any).is_draft === true;
 
   return (
@@ -189,7 +173,7 @@ export function DocumentActionsBar({
           variant="outline"
           size="sm"
           disabled={isDownloadingPdf}
-          onClick={() => handleDownloadPdf(apiLocale)}
+          onClick={() => handleDownloadPdf()}
           className="cursor-pointer rounded-r-none"
         >
           {isDownloadingPdf ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Download className="mr-2 h-4 w-4" />}
@@ -207,13 +191,9 @@ export function DocumentActionsBar({
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end">
-            {PDF_LOCALE_CODES.map((locale) => (
-              <DropdownMenuItem
-                key={locale.code}
-                onClick={() => handleDownloadPdf(locale.code)}
-                className="cursor-pointer"
-              >
-                {t(locale.label)}
+            {PDF_LANGUAGE_CODES.map((lang) => (
+              <DropdownMenuItem key={lang.code} onClick={() => handleDownloadPdf(lang.code)} className="cursor-pointer">
+                {t(lang.label)}
               </DropdownMenuItem>
             ))}
           </DropdownMenuContent>

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

@@ -90,6 +90,7 @@ export function DocumentDetailsCard({
   const t = createTranslation({ translations, locale, ...i18nProps });
 
   const currencyCode = document.currency_code;
+  const sign = documentType === "credit_note" ? -1 : 1;
   const fmt = (amount: number) => formatCurrency(amount, currencyCode, locale);
   const fmtDate = (date: Date | string | null | undefined) => formatDate(date, locale);
 
@@ -102,9 +103,6 @@ export function DocumentDetailsCard({
   // Get customer name
   const customerName = document.customer?.name || "-";
 
-  // Calculate tax total
-  const taxTotal = document.total_with_tax - document.total;
-
   const bodyContent = (
     <>
       {/* Document info */}
@@ -150,17 +148,42 @@ 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)}</span>
-        </div>
-        <div className="flex justify-between">
-          <span className="text-muted-foreground">{t("Tax")}</span>
-          <span>{fmt(taxTotal)}</span>
+          <span>{fmt(document.total * sign)}</span>
         </div>
+        {document.taxes && document.taxes.length > 0 ? (
+          document.taxes.map((tax: Document["taxes"][number]) => {
+            const taxAmount = tax.amount ?? 0;
+            return (
+              <div key={String(tax.rate)} className="flex justify-between">
+                <span className="text-muted-foreground">
+                  {t("Tax")} {tax.rate ?? 0}%{" "}
+                  {tax.base != null && (
+                    <span className="text-xs">
+                      {t("of")} {fmt(tax.base * sign)}
+                    </span>
+                  )}
+                </span>
+                <span>{fmt(taxAmount * sign)}</span>
+              </div>
+            );
+          })
+        ) : (
+          <div className="flex justify-between">
+            <span className="text-muted-foreground">{t("Tax")}</span>
+            <span>{fmt(0)}</span>
+          </div>
+        )}
         <div className="flex justify-between font-semibold">
           <span>{t("Total")}</span>
-          <span>{fmt(document.total_with_tax)}</span>
+          <span>{fmt(document.total_with_tax * sign)}</span>
         </div>
 
         {/* Payment info for invoices/advance invoices */}

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

@@ -36,8 +36,10 @@ export default {
   "Service period": "Leistungszeitraum",
   "Valid until": "Gültig bis",
   Customer: "Kunde",
+  Discount: "Rabatt",
   Subtotal: "Zwischensumme",
   Tax: "Steuer",
+  of: "von",
   Total: "Gesamt",
   Paid: "Bezahlt",
   Due: "Offen",
@@ -108,6 +110,7 @@ export default {
   Pending: "Ausstehend",
   Failed: "Fehlgeschlagen",
   Skipped: "Übersprungen",
+  "Skipped by user": "Vom Benutzer übersprungen",
   "Retry fiscalization": "Fiskalisierung wiederholen",
 
   // PDF language names

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

@@ -35,8 +35,10 @@ export default {
   "Service period": "Período de servicio",
   "Valid until": "Válido hasta",
   Customer: "Cliente",
+  Discount: "Descuento",
   Subtotal: "Subtotal",
   Tax: "Impuesto",
+  of: "de",
   Total: "Total",
   Paid: "Pagado",
   Due: "Pendiente",
@@ -106,6 +108,7 @@ export default {
   Pending: "Pendiente",
   Failed: "Fallido",
   Skipped: "Omitido",
+  "Skipped by user": "Omitido por el usuario",
   "Retry fiscalization": "Reintentar fiscalización",
 
   // PDF language names

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

@@ -35,8 +35,10 @@ export default {
   "Service period": "Période de service",
   "Valid until": "Valable jusqu'au",
   Customer: "Client",
+  Discount: "Remise",
   Subtotal: "Sous-total",
   Tax: "Taxe",
+  of: "de",
   Total: "Total",
   Paid: "Payé",
   Due: "Dû",
@@ -106,6 +108,7 @@ export default {
   Pending: "En attente",
   Failed: "Échoué",
   Skipped: "Ignoré",
+  "Skipped by user": "Ignoré par l'utilisateur",
   "Retry fiscalization": "Réessayer la fiscalisation",
 
   // PDF language names

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

@@ -35,8 +35,10 @@ export default {
   "Service period": "Razdoblje usluge",
   "Valid until": "Vrijedi do",
   Customer: "Kupac",
+  Discount: "Popust",
   Subtotal: "Međuzbroj",
   Tax: "Porez",
+  of: "od",
   Total: "Ukupno",
   Paid: "Plaćeno",
   Due: "Za plaćanje",
@@ -106,6 +108,7 @@ export default {
   Pending: "Na čekanju",
   Failed: "Neuspjelo",
   Skipped: "Preskočeno",
+  "Skipped by user": "Korisnik preskočio",
   "Retry fiscalization": "Ponovi fiskalizaciju",
 
   // PDF language names

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

@@ -35,8 +35,10 @@ export default {
   "Service period": "Periodo di servizio",
   "Valid until": "Valido fino al",
   Customer: "Cliente",
+  Discount: "Sconto",
   Subtotal: "Subtotale",
   Tax: "Imposta",
+  of: "di",
   Total: "Totale",
   Paid: "Pagato",
   Due: "Da pagare",
@@ -106,6 +108,7 @@ export default {
   Pending: "In attesa",
   Failed: "Fallito",
   Skipped: "Saltato",
+  "Skipped by user": "Saltato dall'utente",
   "Retry fiscalization": "Riprova fiscalizzazione",
 
   // PDF language names

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

@@ -35,8 +35,10 @@ export default {
   "Service period": "Serviceperiode",
   "Valid until": "Geldig tot",
   Customer: "Klant",
+  Discount: "Korting",
   Subtotal: "Subtotaal",
   Tax: "Belasting",
+  of: "van",
   Total: "Totaal",
   Paid: "Betaald",
   Due: "Openstaand",
@@ -107,6 +109,7 @@ export default {
   Pending: "In behandeling",
   Failed: "Mislukt",
   Skipped: "Overgeslagen",
+  "Skipped by user": "Overgeslagen door gebruiker",
   "Retry fiscalization": "Fiscalisatie opnieuw proberen",
 
   // PDF language names

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

@@ -35,8 +35,10 @@ export default {
   "Service period": "Okres usługi",
   "Valid until": "Ważne do",
   Customer: "Klient",
+  Discount: "Rabat",
   Subtotal: "Suma częściowa",
   Tax: "Podatek",
+  of: "z",
   Total: "Razem",
   Paid: "Zapłacono",
   Due: "Do zapłaty",
@@ -106,6 +108,7 @@ export default {
   Pending: "Oczekuje",
   Failed: "Niepowodzenie",
   Skipped: "Pominięto",
+  "Skipped by user": "Pominięto przez użytkownika",
   "Retry fiscalization": "Ponów fiskalizację",
 
   // PDF language names

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

@@ -35,8 +35,10 @@ export default {
   "Service period": "Período de serviço",
   "Valid until": "Válido até",
   Customer: "Cliente",
+  Discount: "Desconto",
   Subtotal: "Subtotal",
   Tax: "Imposto",
+  of: "de",
   Total: "Total",
   Paid: "Pago",
   Due: "Em dívida",
@@ -106,6 +108,7 @@ export default {
   Pending: "Pendente",
   Failed: "Falhado",
   Skipped: "Ignorado",
+  "Skipped by user": "Ignorado pelo utilizador",
   "Retry fiscalization": "Tentar novamente fiscalização",
 
   // PDF language names

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

@@ -35,8 +35,10 @@ export default {
   "Service period": "Obdobje storitve",
   "Valid until": "Veljavno do",
   Customer: "Stranka",
+  Discount: "Popust",
   Subtotal: "Vmesni seštevek",
-  Tax: "Davek",
+  Tax: "DDV",
+  of: "od",
   Total: "Skupaj",
   Paid: "Plačano",
   Due: "Za plačilo",
@@ -107,6 +109,7 @@ export default {
   Pending: "V čakanju",
   Failed: "Neuspešno",
   Skipped: "Preskočeno",
+  "Skipped by user": "Uporabnik preskočil",
   "Retry fiscalization": "Ponovi fiskalizacijo",
 
   // PDF language names

package/src/components/documents/view/use-document-download.ts

@@ -36,9 +36,11 @@ export function useDocumentDownload({
   const [isDownloadingEslog, setIsDownloadingEslog] = useState(false);
 
   /**
-   * Download PDF in specified locale
+   * Download PDF with optional language override for translations
+   * Formatting (decimal separators, dates) always uses entity locale.
+   * The language param only changes labels/translations on the PDF.
    */
-  const downloadPdf = async (document: Document, documentType: DocumentType, locale: string) => {
+  const downloadPdf = async (document: Document, documentType: DocumentType, language?: string) => {
     if (!sdk || !activeEntity?.id) {
       onDownloadError?.("Download failed");
       return;
@@ -51,7 +53,8 @@ export function useDocumentDownload({
       // SDK signature: renderPdf(id, params?, SDKMethodOptions?)
       // entity_id goes in SDKMethodOptions (last arg), not params
       // Note: renderPdf is on invoices module but works with any document ID via /documents/{id}/pdf
-      const params = locale ? { locale } : {};
+      // Don't send locale — entity locale drives formatting. Send language for translation override.
+      const params = language ? { language } : {};
       const blob = await sdk.invoices.renderPdf(document.id, params, { entity_id: activeEntity.id });
       const downloadUrl = window.URL.createObjectURL(blob);
       const link = window.document.createElement("a");

package/src/components/entities/create-entity-form.tsx

@@ -99,10 +99,11 @@ export function CreateEntityForm({
   useEffect(() => {
     if (countryValue !== autoFilledCountryRef.current) {
       setActiveCountryCode(undefined);
+      form.setValue("country_code", "");
     } else {
       setActiveCountryCode(countryCode);
     }
-  }, [countryValue, countryCode]);
+  }, [countryValue, countryCode, form]);
 
   const handleCompanySelect = (company: CompanyRegistryResult) => {
     form.setValue("name", company.name);

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" },
     ],
   },
   {