@spaceinvoices/react-ui 0.4.4 → 0.4.6

package/src/generated/schemas/renderdeliverynotepreview_body.ts

@@ -81,6 +81,7 @@ const PartialDeliveryNotePreview = z.object({
     .array(
       z
         .object({
+          type: z.literal("separator"),
           name: z.string(),
           quantity: z.number(),
           price: z.number(),
@@ -123,29 +124,22 @@ const LineDiscount = z.object({
 
 
 // Dependency schema for renderdeliverynotepreview_body
-const CreateDocumentItem = z.object({
-  name: z.string().min(1).optional(),
-  description: z.union([z.string(), z.null()]).optional(),
-  price: z.number().optional(),
-  gross_price: z.number().optional(),
-  quantity: z.number().gte(-140737488355328).lte(140737488355327),
-  unit: z.union([z.string(), z.null()]).optional(),
-  taxes: z.array(DocumentItemTax).optional(),
-  discounts: z.array(LineDiscount).max(5).optional(),
-  delivery_note_id: z.union([z.string(), z.null()]).optional(),
-  metadata: z
-    .union([
-      z.string(),
-      z.number(),
-      z.boolean(),
-      z.null(),
-      z.object({}).partial().passthrough(),
-      z.array(z.unknown()),
-      z.null(),
-    ])
-    .optional(),
-  item_id: z.string().optional(),
-});
+const CreateDocumentItem = z
+  .object({
+    type: z.literal("separator"),
+    name: z.string().min(1),
+    description: z.union([z.string(), z.null()]),
+    price: z.number(),
+    gross_price: z.number(),
+    quantity: z.number().gte(-140737488355328).lte(140737488355327),
+    unit: z.union([z.string(), z.null()]),
+    taxes: z.array(DocumentItemTax),
+    discounts: z.array(LineDiscount).max(5),
+    item_id: z.string(),
+    metadata: z.union([z.record(z.string(), z.any()), z.null()]),
+    save_item: z.boolean().default(true),
+  })
+  .partial();
 
 
 // Dependency schema for renderdeliverynotepreview_body

package/src/generated/schemas/renderestimatepreview_body.ts

@@ -82,6 +82,7 @@ const PartialEstimatePreview = z.object({
     .array(
       z
         .object({
+          type: z.literal("separator"),
           name: z.string(),
           quantity: z.number(),
           price: z.number(),
@@ -123,29 +124,22 @@ const LineDiscount = z.object({
 
 
 // Dependency schema for renderestimatepreview_body
-const CreateDocumentItem = z.object({
-  name: z.string().min(1).optional(),
-  description: z.union([z.string(), z.null()]).optional(),
-  price: z.number().optional(),
-  gross_price: z.number().optional(),
-  quantity: z.number().gte(-140737488355328).lte(140737488355327),
-  unit: z.union([z.string(), z.null()]).optional(),
-  taxes: z.array(DocumentItemTax).optional(),
-  discounts: z.array(LineDiscount).max(5).optional(),
-  delivery_note_id: z.union([z.string(), z.null()]).optional(),
-  metadata: z
-    .union([
-      z.string(),
-      z.number(),
-      z.boolean(),
-      z.null(),
-      z.object({}).partial().passthrough(),
-      z.array(z.unknown()),
-      z.null(),
-    ])
-    .optional(),
-  item_id: z.string().optional(),
-});
+const CreateDocumentItem = z
+  .object({
+    type: z.literal("separator"),
+    name: z.string().min(1),
+    description: z.union([z.string(), z.null()]),
+    price: z.number(),
+    gross_price: z.number(),
+    quantity: z.number().gte(-140737488355328).lte(140737488355327),
+    unit: z.union([z.string(), z.null()]),
+    taxes: z.array(DocumentItemTax),
+    discounts: z.array(LineDiscount).max(5),
+    item_id: z.string(),
+    metadata: z.union([z.record(z.string(), z.any()), z.null()]),
+    save_item: z.boolean().default(true),
+  })
+  .partial();
 
 
 // Dependency schema for renderestimatepreview_body

package/src/generated/schemas/renderinvoicepreview_body.ts

@@ -113,6 +113,7 @@ const PartialInvoicePreview = z.object({
     .array(
       z
         .object({
+          type: z.literal("separator"),
           name: z.string(),
           quantity: z.number(),
           price: z.number(),
@@ -132,6 +133,7 @@ const PartialInvoicePreview = z.object({
     .min(1),
   fina: CreateFinaInvoiceData.optional(),
   expected_total_with_tax: z.number().gt(0).optional(),
+  force_linked_documents: z.boolean().optional(),
 });
 
 
@@ -155,29 +157,22 @@ const LineDiscount = z.object({
 
 
 // Dependency schema for renderinvoicepreview_body
-const CreateDocumentItem = z.object({
-  name: z.string().min(1).optional(),
-  description: z.union([z.string(), z.null()]).optional(),
-  price: z.number().optional(),
-  gross_price: z.number().optional(),
-  quantity: z.number().gte(-140737488355328).lte(140737488355327),
-  unit: z.union([z.string(), z.null()]).optional(),
-  taxes: z.array(DocumentItemTax).optional(),
-  discounts: z.array(LineDiscount).max(5).optional(),
-  delivery_note_id: z.union([z.string(), z.null()]).optional(),
-  metadata: z
-    .union([
-      z.string(),
-      z.number(),
-      z.boolean(),
-      z.null(),
-      z.object({}).partial().passthrough(),
-      z.array(z.unknown()),
-      z.null(),
-    ])
-    .optional(),
-  item_id: z.string().optional(),
-});
+const CreateDocumentItem = z
+  .object({
+    type: z.literal("separator"),
+    name: z.string().min(1),
+    description: z.union([z.string(), z.null()]),
+    price: z.number(),
+    gross_price: z.number(),
+    quantity: z.number().gte(-140737488355328).lte(140737488355327),
+    unit: z.union([z.string(), z.null()]),
+    taxes: z.array(DocumentItemTax),
+    discounts: z.array(LineDiscount).max(5),
+    item_id: z.string(),
+    metadata: z.union([z.record(z.string(), z.any()), z.null()]),
+    save_item: z.boolean().default(true),
+  })
+  .partial();
 
 
 // Dependency schema for renderinvoicepreview_body
@@ -201,6 +196,7 @@ const CompleteInvoicePreview = z.object({
   items: z.array(CreateDocumentItem).min(1),
   fina: CreateFinaInvoiceData.optional(),
   expected_total_with_tax: z.number().gt(0).optional(),
+  force_linked_documents: z.boolean().optional(),
 });
 
 

package/src/generated/schemas/startpdfexport_body.ts

@@ -11,7 +11,13 @@ import { z } from 'zod';
 // Dependency schema for startpdfexport_body
 const PdfExportByDocumentIds = z
   .object({
-    type: z.enum(["invoice", "estimate", "credit_note", "advance_invoice"]),
+    type: z.enum([
+      "invoice",
+      "estimate",
+      "credit_note",
+      "advance_invoice",
+      "delivery_note",
+    ]),
     document_ids: z.array(z.string()).min(1),
   })
   .passthrough();
@@ -20,7 +26,13 @@ const PdfExportByDocumentIds = z
 // Dependency schema for startpdfexport_body
 const PdfExportByDateRange = z
   .object({
-    type: z.enum(["invoice", "estimate", "credit_note", "advance_invoice"]),
+    type: z.enum([
+      "invoice",
+      "estimate",
+      "credit_note",
+      "advance_invoice",
+      "delivery_note",
+    ]),
     date_from: z.string().optional(),
     date_to: z.string().optional(),
   })

package/src/generated/schemas/webhook.ts

@@ -49,6 +49,7 @@ const createWebhookSchemaDefinition = z.object({
         "advance_invoice.created",
         "advance_invoice.paid",
         "advance_invoice.applied",
+        "advance_invoice.voided",
         "advance_invoice.deleted",
         "advance_invoice.restored",
         "item.created",
@@ -87,6 +88,7 @@ const createWebhookSchemaDefinition = z.object({
         "delivery_note.created",
         "delivery_note.sent",
         "delivery_note.cancelled",
+        "delivery_note.voided",
         "delivery_note.deleted",
         "delivery_note.restored",
       ])
@@ -142,6 +144,7 @@ const updateWebhookSchemaDefinition = z
           "advance_invoice.created",
           "advance_invoice.paid",
           "advance_invoice.applied",
+          "advance_invoice.voided",
           "advance_invoice.deleted",
           "advance_invoice.restored",
           "item.created",
@@ -180,6 +183,7 @@ const updateWebhookSchemaDefinition = z
           "delivery_note.created",
           "delivery_note.sent",
           "delivery_note.cancelled",
+          "delivery_note.voided",
           "delivery_note.deleted",
           "delivery_note.restored",
         ])

package/src/hooks/use-duplicate-document.ts

@@ -64,6 +64,7 @@ function transformDocumentForDuplication(source: Document, targetType: DocumentT
   // Transform items - copy only the fields needed for creation
   // Use type assertion for items since all document item types share the same shape
   const sourceItems = source.items as Array<{
+    type?: string | null;
     name: string;
     description: string | null;
     quantity: number;
@@ -72,15 +73,21 @@ function transformDocumentForDuplication(source: Document, targetType: DocumentT
     taxes: Array<{ tax_id?: string }>;
   }>;
   const items = sourceItems?.map((item) => ({
+    type: item.type ?? undefined,
     name: item.name,
     description: item.description,
-    quantity: item.quantity,
-    // Use gross_price if set, otherwise use price. The form uses is_gross_price as a UI toggle.
-    price: item.gross_price ?? item.price,
-    // Copy tax references (tax_id), not computed tax data
-    taxes: item.taxes?.map((tax) => ({ tax_id: tax.tax_id })),
-    // Derive is_gross_price from whether gross_price is set
-    gross_price: item.gross_price ?? undefined,
+    // Separator items skip financial fields
+    ...(item.type !== "separator"
+      ? {
+          quantity: item.quantity,
+          // Use gross_price if set, otherwise use price. The form uses is_gross_price as a UI toggle.
+          price: item.gross_price ?? item.price,
+          // Copy tax references (tax_id), not computed tax data
+          taxes: item.taxes?.map((tax) => ({ tax_id: tax.tax_id })),
+          // Derive is_gross_price from whether gross_price is set
+          gross_price: item.gross_price ?? undefined,
+        }
+      : {}),
   }));
 
   // Build customer data - always copy if available (form needs this for display)
@@ -108,8 +115,8 @@ function transformDocumentForDuplication(source: Document, targetType: DocumentT
     // The form needs customer data for display, even when customer_id is set
     ...(source.customer_id ? { customer_id: source.customer_id } : {}),
     ...(customerData ? { customer: customerData } : {}),
-    // Items
-    items,
+    // Items (cast needed: separator items omit financial fields like quantity)
+    items: items as any,
     // Currency
     currency_code: source.currency_code,
     // Notes

package/src/hooks/use-vies-check.ts

@@ -42,6 +42,8 @@ export interface UseViesCheckResult {
   reverseChargeApplies: boolean;
   /** Transaction type determined by VIES check */
   transactionType: ViesCheckResponse["transaction_type"] | undefined;
+  /** Customer country code returned by VIES check */
+  customerCountryCode: string | null;
   /** Warning message from VIES validation */
   warning: string | null;
   /** Whether VIES validation was successful */
@@ -124,6 +126,7 @@ export function useViesCheck({
     error: query.error,
     reverseChargeApplies: query.data?.reverse_charge_applies ?? false,
     transactionType: query.data?.transaction_type,
+    customerCountryCode: query.data?.customer_country_code ?? null,
     warning: query.data?.warning ?? null,
     viesValid: query.data?.vies_valid ?? null,
   };

package/src/lib/template-variables.tsx

@@ -0,0 +1,167 @@
+import type { Entity, Estimate, Invoice } from "@spaceinvoices/js-sdk";
+import { cn } from "@/ui/lib/utils";
+
+/**
+ * Convert snake_case variable name to Title Case for display
+ * e.g., "document_number" -> "Document Number", "bank_account.iban" -> "Bank Account Iban"
+ */
+export function formatVariableName(varName: string): string {
+  return varName
+    .replace(/\./g, "_")
+    .split("_")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+    .join(" ");
+}
+
+/**
+ * Resolve a template variable to its actual value from entity/document data.
+ * Returns null if the variable can't be resolved (shown as a placeholder in preview).
+ */
+export function getVariableValue(
+  varName: string,
+  entity?: Entity | null,
+  document?: Partial<Invoice | Estimate> | null,
+): string | null {
+  if (!entity) return null;
+
+  // Entity-related variables
+  if (varName === "entity_name") return entity.name || null;
+  if (varName === "entity_email") return (entity.settings as any)?.email || null;
+  if (varName === "entity_address") return entity.address || null;
+  if (varName === "entity_post_code") return entity.post_code || null;
+  if (varName === "entity_city") return entity.city || null;
+  if (varName === "entity_country") return entity.country || null;
+  if (varName === "entity_tax_number") return entity.tax_number || null;
+  if (varName === "entity_company_number") return entity.company_number || 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
+  if (document) {
+    if (varName === "document_number") return (document as any).number || null;
+    if (varName === "document_date" && (document as any).date) {
+      return new Date((document as any).date).toLocaleDateString("en-US", {
+        month: "long",
+        day: "numeric",
+        year: "numeric",
+      });
+    }
+    if (varName === "document_total" && (document as any).total_with_tax) {
+      return new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: (document as any).currency_code || "USD",
+      }).format(Number((document as any).total_with_tax));
+    }
+    if (varName === "document_currency") return (document as any).currency_code || null;
+
+    // Invoice due date
+    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 valid until
+    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 as any).customer) {
+      if (varName === "customer_name") return (document as any).customer.name || null;
+      if (varName === "customer_email") return (document as any).customer.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;
+}
+
+/**
+ * Replace template variables in a string with styled React nodes for preview.
+ * Resolved values get a secondary bg, unresolved show as primary-colored placeholders.
+ */
+export function replaceTemplateVariablesForPreview(
+  template: string,
+  entity?: Entity | null,
+  document?: Partial<Invoice | Estimate> | null,
+): React.ReactNode[] {
+  if (!template) return [];
+
+  const parts: React.ReactNode[] = [];
+  const regex = /\{([^}]+)\}/g;
+  let lastIndex = 0;
+  let match: RegExpExecArray | null = null;
+
+  match = regex.exec(template);
+  while (match !== null) {
+    if (match.index > lastIndex) {
+      parts.push(template.slice(lastIndex, match.index));
+    }
+
+    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);
+  }
+
+  if (lastIndex < template.length) {
+    parts.push(template.slice(lastIndex));
+  }
+
+  return parts;
+}

package/src/providers/entities-context.tsx

@@ -1,9 +1,9 @@
-import type { GetEntities200DataItem } from "@spaceinvoices/js-sdk";
+import type { Entity as SDKEntity } from "@spaceinvoices/js-sdk";
 
 import { createContext, useContext } from "react";
 
 /** Entity type with country_rules included (from getEntities response) */
-export type Entity = GetEntities200DataItem;
+export type Entity = SDKEntity;
 
 export type EntityEnvironment = "live" | "sandbox";