@spaceinvoices/react-ui 0.4.3 → 0.4.5

package/cli/dist/index.js

@@ -870,7 +870,7 @@ async function list(options = {}) {
 
 // cli/src/index.ts
 var program = new Command();
-program.name("spaceinvoices-ui").description("CLI for adding Space Invoices React UI components to your project").version("0.4.3");
+program.name("spaceinvoices-ui").description("CLI for adding Space Invoices React UI components to your project").version("0.4.5");
 program.option("--local <path>", "Use local registry from specified path (for development)");
 program.command("init").description("Initialize Space Invoices UI in your project").option("-y, --yes", "Skip prompts and use defaults").option("-f, --force", "Overwrite existing configuration").option("--cwd <path>", "Working directory (defaults to current directory)").action(async (options) => {
   const globalOpts = program.opts();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spaceinvoices/react-ui",
   "type": "module",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "private": false,
   "license": "MIT",
   "description": "Space Invoices UI components - copy-paste distribution with CLI support",

package/src/common/autocomplete.tsx

@@ -51,12 +51,21 @@ export function Autocomplete({
     setInternalSearchValue(value);
     onSearch?.(value);
 
-    // Open popover when user starts typing
-    if (!open) {
+    // Open popover when user starts typing (only if there are options)
+    if (!open && options.length > 0) {
       setOpen(true);
     }
   };
 
+  // Close popover when options become empty, open when they appear
+  React.useEffect(() => {
+    if (options.length === 0) {
+      setOpen(false);
+    } else if (document.activeElement === inputRef.current && searchValue) {
+      setOpen(true);
+    }
+  }, [options.length, searchValue]);
+
   const handleSelect = (selectedValue: string) => {
     onValueChange?.(selectedValue);
     setOpen(false);
@@ -81,6 +90,12 @@ export function Autocomplete({
     onBlurProp?.(e); // Call the passed onBlur prop after internal logic
   };
 
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" && open) {
+      e.preventDefault();
+    }
+  };
+
   // Handle popover open/close - prevent closing when input is focused
   const handleOpenChange = (newOpen: boolean) => {
     if (!newOpen && document.activeElement === inputRef.current) {
@@ -98,6 +113,7 @@ export function Autocomplete({
         onChange={handleInputChange}
         onFocus={handleInputFocus}
         onBlur={handleInputBlur}
+        onKeyDown={handleKeyDown}
         placeholder={placeholder}
         className={className}
         disabled={disabled}

package/src/components/advance-invoices/create/create-advance-invoice-form.tsx

@@ -19,7 +19,11 @@ import { createTranslation } from "@/ui/lib/translation";
 import { cn } from "@/ui/lib/utils";
 import { useEntities } from "@/ui/providers/entities-context";
 import { useFormFooterRegistration } from "@/ui/providers/form-footer-context";
-import { DocumentDetailsSection, DocumentNoteField } from "../../documents/create/document-details-section";
+import {
+  DocumentDetailsSection,
+  DocumentNoteField,
+  DocumentTaxClauseField,
+} from "../../documents/create/document-details-section";
 import { DocumentItemsSection, type PriceModesMap } from "../../documents/create/document-items-section";
 import { DocumentRecipientSection } from "../../documents/create/document-recipient-section";
 import { MarkAsPaidSection } from "../../documents/create/mark-as-paid-section";
@@ -143,7 +147,7 @@ export default function CreateAdvanceInvoiceForm({
   const [selectedFinaDeviceId, setSelectedFinaDeviceId] = useState<string | undefined>();
 
   // UI-only state (not part of API schema)
-  const [markAsPaid, setMarkAsPaid] = useState(false);
+  const [markAsPaid, setMarkAsPaid] = useState(true);
   const [paymentTypes, setPaymentTypes] = useState<string[]>(["bank_transfer"]);
   const [isDraftPending, setIsDraftPending] = useState(false);
 
@@ -288,13 +292,18 @@ export default function CreateAdvanceInvoiceForm({
       // Cast customer to form schema type (API type may have additional fields)
       customer: (initialValues?.customer as CreateAdvanceInvoiceFormValues["customer"]) ?? undefined,
       items: initialValues?.items?.length
-        ? initialValues.items.map((item) => ({
+        ? initialValues.items.map((item: any) => ({
+            type: item.type,
             name: item.name || "",
             description: item.description || "",
-            quantity: item.quantity ?? 1,
-            // Use gross_price if set, otherwise use price
-            price: item.gross_price ?? item.price,
-            taxes: item.taxes || [],
+            ...(item.type !== "separator"
+              ? {
+                  quantity: item.quantity ?? 1,
+                  // Use gross_price if set, otherwise use price
+                  price: item.gross_price ?? item.price,
+                  taxes: item.taxes || [],
+                }
+              : {}),
           }))
         : [
             {
@@ -307,6 +316,7 @@ export default function CreateAdvanceInvoiceForm({
           ],
       currency_code: initialValues?.currency_code || activeEntity?.currency_code || "EUR",
       note: initialValues?.note ?? defaultNote,
+      tax_clause: "",
     },
   });
 
@@ -468,7 +478,13 @@ export default function CreateAdvanceInvoiceForm({
   // ============================================================================
   // VIES Check - determine if reverse charge applies
   // ============================================================================
-  const { reverseChargeApplies, warning: viesWarning } = useViesCheck({
+  const {
+    reverseChargeApplies,
+    transactionType,
+    customerCountryCode: viesCustomerCountryCode,
+    isFetching: isViesFetching,
+    warning: viesWarning,
+  } = useViesCheck({
     issuerCountryCode: activeEntity?.country_code,
     isTaxSubject: activeEntity?.is_tax_subject ?? true,
     customerCountry: formValues.customer?.country,
@@ -477,6 +493,23 @@ export default function CreateAdvanceInvoiceForm({
     enabled: !!activeEntity,
   });
 
+  // FINA non-domestic guard: hide FINA selectors for non-domestic transactions
+  const isFinaNonDomestic = isFinaEnabled && viesCustomerCountryCode != null && viesCustomerCountryCode !== "HR";
+
+  // Auto-populate tax_clause from entity settings when transaction type changes
+  const effectiveTransactionType = transactionType ?? "domestic";
+  const prevTransactionTypeRef = useRef<string | undefined>(undefined);
+  useEffect(() => {
+    if (effectiveTransactionType === prevTransactionTypeRef.current) return;
+    prevTransactionTypeRef.current = effectiveTransactionType;
+
+    const taxClauseDefaults = (activeEntity?.settings as any)?.tax_clause_defaults;
+    if (!taxClauseDefaults) return;
+
+    const clause = taxClauseDefaults[effectiveTransactionType] ?? "";
+    form.setValue("tax_clause", clause);
+  }, [effectiveTransactionType, activeEntity, form]);
+
   // Customer form management
   const {
     originalCustomer,
@@ -547,7 +580,7 @@ export default function CreateAdvanceInvoiceForm({
 
       // Build FINA options (skip for drafts; FINA can't be skipped)
       const finaOptions =
-        !isDraft && isFinaEnabled && selectedFinaPremiseId && selectedFinaDeviceId
+        !isDraft && isFinaEnabled && !isFinaNonDomestic && selectedFinaPremiseId && selectedFinaDeviceId
           ? { premise_id: selectedFinaPremiseId, device_id: selectedFinaDeviceId, payment_type: paymentTypes[0] }
           : undefined;
 
@@ -573,6 +606,7 @@ export default function CreateAdvanceInvoiceForm({
       isEslogAvailable,
       isFursEnabled,
       isFinaEnabled,
+      isFinaNonDomestic,
       markAsPaid,
       originalCustomer,
       paymentTypes,
@@ -602,7 +636,7 @@ export default function CreateAdvanceInvoiceForm({
   useFormFooterRegistration({
     formId: "create-advance-invoice-form",
     isPending,
-    isDirty: form.formState.isDirty,
+    isDirty: form.formState.isDirty || !!initialValues,
     label: t("Save"),
     secondaryAction: {
       label: t("Save as Draft"),
@@ -761,7 +795,7 @@ export default function CreateAdvanceInvoiceForm({
                 : undefined
             }
             finaInline={
-              isFinaEnabled && hasFinaPremises
+              isFinaEnabled && hasFinaPremises && !isFinaNonDomestic
                 ? {
                     premises: activeFinaPremises.map((p: any) => ({ id: p.id, premise_id: p.premise_id })),
                     devices: activeFinaDevices.map((d: any) => ({ id: d.id, device_id: d.device_id })),
@@ -781,6 +815,7 @@ export default function CreateAdvanceInvoiceForm({
               onPaymentTypesChange={setPaymentTypes}
               t={t}
               alwaysShowPaymentType={!!isFinaActive}
+              forced
             />
           </DocumentDetailsSection>
         </div>
@@ -810,11 +845,25 @@ export default function CreateAdvanceInvoiceForm({
           document={{
             number: formValues.number,
             date: formValues.date,
-            date_due: formValues.date_due,
             currency_code: formValues.currency_code,
             customer: formValues.customer as any,
           }}
         />
+
+        <DocumentTaxClauseField
+          control={form.control}
+          t={t}
+          entity={activeEntity}
+          document={{
+            number: formValues.number,
+            date: formValues.date,
+            currency_code: formValues.currency_code,
+            customer: formValues.customer as any,
+          }}
+          transactionType={transactionType}
+          isTransactionTypeFetching={isViesFetching}
+          isFinaNonDomestic={isFinaNonDomestic}
+        />
       </form>
     </Form>
   );

package/src/components/advance-invoices/create/locales/de.ts

@@ -28,4 +28,21 @@ export default {
   Other: "Andere",
   Premise: "Geschäftsräume",
   Device: "Gerät",
+  "FINA fiscalized invoices always use the current date":
+    "FINA-fiskalisierte Dokumente verwenden immer das aktuelle Datum",
+  // Separator items
+  "Add separator": "Trennzeile hinzufügen",
+  "Section header": "Abschnittsüberschrift",
+  "Section title...": "Abschnittstitel...",
+  // Transaction type
+  "Transaction type": "Transaktionstyp",
+  Domestic: "Inland",
+  "EU B2B": "EU B2B",
+  "EU B2C": "EU B2C",
+  Export: "Export",
+  "Determining transaction type...": "Transaktionstyp wird ermittelt...",
+  "This invoice will not be fiscalized (non-domestic transaction)":
+    "Diese Rechnung wird nicht fiskalisiert (nicht-inländische Transaktion)",
+  "Tax Clause": "Steuerklausel",
+  "Add tax clause...": "Steuerklausel hinzufügen...",
 } as const;

package/src/components/advance-invoices/create/locales/es.ts

@@ -28,4 +28,21 @@ export default {
   Other: "Otro",
   Premise: "Local",
   Device: "Dispositivo",
+  "FINA fiscalized invoices always use the current date":
+    "Los documentos fiscalizados con FINA siempre usan la fecha actual",
+  // Separator items
+  "Add separator": "Añadir separador",
+  "Section header": "Encabezado de sección",
+  "Section title...": "Título de sección...",
+  // Transaction type
+  "Transaction type": "Tipo de transacción",
+  Domestic: "Nacional",
+  "EU B2B": "EU B2B",
+  "EU B2C": "EU B2C",
+  Export: "Exportación",
+  "Determining transaction type...": "Determinando tipo de transacción...",
+  "This invoice will not be fiscalized (non-domestic transaction)":
+    "Esta factura no será fiscalizada (transacción no nacional)",
+  "Tax Clause": "Cláusula fiscal",
+  "Add tax clause...": "Agregar cláusula fiscal...",
 } as const;

package/src/components/advance-invoices/create/locales/fr.ts

@@ -27,4 +27,21 @@ export default {
   Other: "Autre",
   Premise: "Local",
   Device: "Appareil",
+  "FINA fiscalized invoices always use the current date":
+    "Les documents fiscalisés FINA utilisent toujours la date actuelle",
+  // Separator items
+  "Add separator": "Ajouter un séparateur",
+  "Section header": "En-tête de section",
+  "Section title...": "Titre de section...",
+  // Transaction type
+  "Transaction type": "Type de transaction",
+  Domestic: "Nationale",
+  "EU B2B": "EU B2B",
+  "EU B2C": "EU B2C",
+  Export: "Exportation",
+  "Determining transaction type...": "Détermination du type de transaction...",
+  "This invoice will not be fiscalized (non-domestic transaction)":
+    "Cette facture ne sera pas fiscalisée (transaction non nationale)",
+  "Tax Clause": "Clause fiscale",
+  "Add tax clause...": "Ajouter une clause fiscale...",
 } as const;

package/src/components/advance-invoices/create/locales/hr.ts

@@ -26,4 +26,20 @@ export default {
   Other: "Ostalo",
   Premise: "Prostor",
   Device: "Uredaj",
+  "FINA fiscalized invoices always use the current date": "FINA fiskalizirani dokumenti uvijek koriste trenutni datum",
+  // Separator items
+  "Add separator": "Dodaj separator",
+  "Section header": "Naslov odjeljka",
+  "Section title...": "Naslov odjeljka...",
+  // Transaction type
+  "Transaction type": "Vrsta transakcije",
+  Domestic: "Domaća",
+  "EU B2B": "EU B2B",
+  "EU B2C": "EU B2C",
+  Export: "Izvoz",
+  "Determining transaction type...": "Određivanje vrste transakcije...",
+  "This invoice will not be fiscalized (non-domestic transaction)":
+    "Ovaj račun neće biti fiskaliziran (nedomaća transakcija)",
+  "Tax Clause": "Porezna klauzula",
+  "Add tax clause...": "Dodajte poreznu klauzulu...",
 } as const;

package/src/components/advance-invoices/create/locales/it.ts

@@ -28,4 +28,21 @@ export default {
   Other: "Altro",
   Premise: "Locale",
   Device: "Dispositivo",
+  "FINA fiscalized invoices always use the current date":
+    "I documenti fiscalizzati FINA utilizzano sempre la data corrente",
+  // Separator items
+  "Add separator": "Aggiungi separatore",
+  "Section header": "Intestazione sezione",
+  "Section title...": "Titolo sezione...",
+  // Transaction type
+  "Transaction type": "Tipo di transazione",
+  Domestic: "Nazionale",
+  "EU B2B": "EU B2B",
+  "EU B2C": "EU B2C",
+  Export: "Esportazione",
+  "Determining transaction type...": "Determinazione tipo di transazione...",
+  "This invoice will not be fiscalized (non-domestic transaction)":
+    "Questa fattura non sarà fiscalizzata (transazione non nazionale)",
+  "Tax Clause": "Clausola fiscale",
+  "Add tax clause...": "Aggiungi clausola fiscale...",
 } as const;

package/src/components/advance-invoices/create/locales/nl.ts

@@ -27,4 +27,21 @@ export default {
   Other: "Overig",
   Premise: "Bedrijfsruimte",
   Device: "Apparaat",
+  "FINA fiscalized invoices always use the current date":
+    "FINA-gefiscaliseerde documenten gebruiken altijd de huidige datum",
+  // Separator items
+  "Add separator": "Scheidingslijn toevoegen",
+  "Section header": "Sectiekop",
+  "Section title...": "Sectietitel...",
+  // Transaction type
+  "Transaction type": "Transactietype",
+  Domestic: "Binnenland",
+  "EU B2B": "EU B2B",
+  "EU B2C": "EU B2C",
+  Export: "Export",
+  "Determining transaction type...": "Transactietype bepalen...",
+  "This invoice will not be fiscalized (non-domestic transaction)":
+    "Deze factuur wordt niet gefiscaliseerd (niet-binnenlandse transactie)",
+  "Tax Clause": "Belastingclausule",
+  "Add tax clause...": "Belastingclausule toevoegen...",
 } as const;

package/src/components/advance-invoices/create/locales/pl.ts

@@ -27,4 +27,20 @@ export default {
   Other: "Inne",
   Premise: "Lokal",
   Device: "Urządzenie",
+  "FINA fiscalized invoices always use the current date": "Dokumenty fiskalizowane FINA zawsze używają bieżącej daty",
+  // Separator items
+  "Add separator": "Dodaj separator",
+  "Section header": "Nagłówek sekcji",
+  "Section title...": "Tytuł sekcji...",
+  // Transaction type
+  "Transaction type": "Typ transakcji",
+  Domestic: "Krajowa",
+  "EU B2B": "EU B2B",
+  "EU B2C": "EU B2C",
+  Export: "Eksport",
+  "Determining transaction type...": "Określanie typu transakcji...",
+  "This invoice will not be fiscalized (non-domestic transaction)":
+    "Ta faktura nie będzie fiskalizowana (transakcja niekrajowa)",
+  "Tax Clause": "Klauzula podatkowa",
+  "Add tax clause...": "Dodaj klauzulę podatkową...",
 } as const;

package/src/components/advance-invoices/create/locales/pt.ts

@@ -28,4 +28,20 @@ export default {
   Other: "Outro",
   Premise: "Estabelecimento",
   Device: "Dispositivo",
+  "FINA fiscalized invoices always use the current date": "Os documentos fiscalizados FINA usam sempre a data atual",
+  // Separator items
+  "Add separator": "Adicionar separador",
+  "Section header": "Cabeçalho da secção",
+  "Section title...": "Título da secção...",
+  // Transaction type
+  "Transaction type": "Tipo de transação",
+  Domestic: "Nacional",
+  "EU B2B": "EU B2B",
+  "EU B2C": "EU B2C",
+  Export: "Exportação",
+  "Determining transaction type...": "Determinando tipo de transação...",
+  "This invoice will not be fiscalized (non-domestic transaction)":
+    "Esta fatura não será fiscalizada (transação não nacional)",
+  "Tax Clause": "Cláusula fiscal",
+  "Add tax clause...": "Adicionar cláusula fiscal...",
 } as const;

package/src/components/advance-invoices/create/locales/sl.ts

@@ -24,4 +24,20 @@ export default {
   Other: "Drugo",
   Premise: "Poslovni prostor",
   Device: "Naprava",
+  "FINA fiscalized invoices always use the current date": "FINA fiskalizirani dokumenti vedno uporabijo trenutni datum",
+  // Separator items
+  "Add separator": "Dodaj ločilnik",
+  "Section header": "Naslov razdelka",
+  "Section title...": "Naslov razdelka...",
+  // Transaction type
+  "Transaction type": "Vrsta transakcije",
+  Domestic: "Domača",
+  "EU B2B": "EU B2B",
+  "EU B2C": "EU B2C",
+  Export: "Izvoz",
+  "Determining transaction type...": "Določanje vrste transakcije...",
+  "This invoice will not be fiscalized (non-domestic transaction)":
+    "Ta račun ne bo fiskaliziran (nedomača transakcija)",
+  "Tax Clause": "Davčna klavzula",
+  "Add tax clause...": "Dodajte davčno klavzulo...",
 } as const;

package/src/components/advance-invoices/create/prepare-advance-invoice-submission.ts

@@ -52,7 +52,6 @@ export function prepareAdvanceInvoiceSubmission(
     markAsPaid: options.markAsPaid,
     paymentTypes: options.paymentTypes,
     documentType: "advance_invoice",
-    secondaryDate: values.date_due ?? undefined,
     priceModes: options.priceModes,
     isDraft: options.isDraft,
   }) as CreateAdvanceInvoiceRequest;

package/src/components/advance-invoices/list/list-row-actions.tsx

@@ -1,6 +1,6 @@
 import type { AdvanceInvoice } from "@spaceinvoices/js-sdk";
 
-import { Copy, Download, Eye, Link2Off, Loader2, MoreHorizontal, Plus } from "lucide-react";
+import { Ban, Copy, Download, Eye, Link2Off, Loader2, MoreHorizontal, Plus } from "lucide-react";
 import { Button } from "@/ui/components/ui/button";
 import {
   DropdownMenu,
@@ -11,6 +11,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/ui/components/ui/dropdown-menu";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/ui/components/ui/tooltip";
 import type { ComponentTranslationProps } from "@/ui/lib/translation";
 import { createTranslation } from "@/ui/lib/translation";
 import { useAdvanceInvoiceDownload } from "./use-advance-invoice-download";
@@ -25,6 +26,8 @@ type AdvanceInvoiceListRowActionsProps = {
   onDownloadError?: (error: string) => void;
   onUnshare?: (advanceInvoice: AdvanceInvoice) => Promise<void>;
   isUnsharing?: boolean;
+  onVoid?: (advanceInvoice: AdvanceInvoice) => void;
+  isVoiding?: boolean;
 } & ComponentTranslationProps;
 
 export default function AdvanceInvoiceListRowActions({
@@ -37,6 +40,8 @@ export default function AdvanceInvoiceListRowActions({
   onDownloadError,
   onUnshare,
   isUnsharing,
+  onVoid,
+  isVoiding,
   ...i18nProps
 }: AdvanceInvoiceListRowActionsProps) {
   const t = createTranslation(i18nProps);
@@ -110,6 +115,48 @@ export default function AdvanceInvoiceListRowActions({
             </DropdownMenuGroup>
           </>
         )}
+        {onVoid &&
+          !(advanceInvoice as any).voided_at &&
+          !(advanceInvoice as any).is_draft &&
+          (() => {
+            const isLinked = (advanceInvoice as any).document_relations?.some(
+              (rel: any) => rel.relation_type === "advance_applied" || rel.relation_type === "applied_to",
+            );
+            const voidDisabled = isVoiding || isLinked;
+            const voidItem = (
+              <DropdownMenuItem
+                className={
+                  voidDisabled
+                    ? "text-destructive opacity-50"
+                    : "cursor-pointer text-destructive focus:text-destructive"
+                }
+                onClick={() => !voidDisabled && onVoid(advanceInvoice)}
+                disabled={voidDisabled}
+              >
+                {isVoiding ? <Loader2 className="h-4 w-4 animate-spin" /> : <Ban className="h-4 w-4" />}
+                {t("Void")}
+              </DropdownMenuItem>
+            );
+            return (
+              <>
+                <DropdownMenuSeparator />
+                <DropdownMenuGroup>
+                  {isLinked ? (
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <div>{voidItem}</div>
+                      </TooltipTrigger>
+                      <TooltipContent side="left">
+                        {t("Cannot void an advance invoice linked to an invoice")}
+                      </TooltipContent>
+                    </Tooltip>
+                  ) : (
+                    voidItem
+                  )}
+                </DropdownMenuGroup>
+              </>
+            );
+          })()}
       </DropdownMenuContent>
     </DropdownMenu>
   );