@spaceinvoices/react-ui 0.1.1

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

@@ -0,0 +1,132 @@
+import { describe, expect, test } from "bun:test";
+import { prepareDocumentSubmission } from "./prepare-document-submission";
+
+describe("prepareDocumentSubmission", () => {
+  describe("isDraft option", () => {
+    test("sets is_draft to true when isDraft option is true", () => {
+      const values = {
+        number: "INV-001",
+        date: "2024-01-15",
+        items: [],
+      };
+
+      const result = prepareDocumentSubmission(values, {
+        originalCustomer: null,
+        documentType: "invoice",
+        isDraft: true,
+      });
+
+      expect(result.is_draft).toBe(true);
+    });
+
+    test("does not set is_draft when isDraft option is false", () => {
+      const values = {
+        number: "INV-001",
+        date: "2024-01-15",
+        items: [],
+      };
+
+      const result = prepareDocumentSubmission(values, {
+        originalCustomer: null,
+        documentType: "invoice",
+        isDraft: false,
+      });
+
+      expect(result.is_draft).toBeUndefined();
+    });
+
+    test("does not set is_draft when isDraft option is not provided", () => {
+      const values = {
+        number: "INV-001",
+        date: "2024-01-15",
+        items: [],
+      };
+
+      const result = prepareDocumentSubmission(values, {
+        originalCustomer: null,
+        documentType: "invoice",
+      });
+
+      expect(result.is_draft).toBeUndefined();
+    });
+
+    test("isDraft works with all document types", () => {
+      const documentTypes = ["invoice", "estimate", "credit_note", "advance_invoice"] as const;
+
+      for (const docType of documentTypes) {
+        const values = {
+          date: "2024-01-15",
+          items: [],
+        };
+
+        const result = prepareDocumentSubmission(values, {
+          originalCustomer: null,
+          documentType: docType,
+          isDraft: true,
+        });
+
+        expect(result.is_draft).toBe(true);
+      }
+    });
+
+    test("isDraft preserves other payload fields", () => {
+      const values = {
+        number: "INV-001", // number is intentionally removed by prepareDocumentSubmission
+        date: "2024-01-15",
+        items: [{ name: "Item 1", quantity: 1, price: 100 }],
+        note: "Test note",
+        currency_code: "EUR",
+      };
+
+      const result = prepareDocumentSubmission(values, {
+        originalCustomer: null,
+        documentType: "invoice",
+        isDraft: true,
+        secondaryDate: "2024-02-15",
+      });
+
+      expect(result.is_draft).toBe(true);
+      expect(result.number).toBeUndefined(); // number is always server-generated
+      expect(result.note).toBe("Test note");
+      expect(result.currency_code).toBe("EUR");
+      expect(result.items).toHaveLength(1);
+      expect(result.date_due).toBeInstanceOf(Date);
+    });
+
+    test("isDraft works with customer data", () => {
+      const values = {
+        date: "2024-01-15",
+        customer_id: "cust-123",
+        items: [],
+      };
+
+      const result = prepareDocumentSubmission(values, {
+        originalCustomer: null,
+        documentType: "invoice",
+        isDraft: true,
+      });
+
+      expect(result.is_draft).toBe(true);
+      expect(result.customer_id).toBe("cust-123");
+    });
+
+    test("isDraft works with markAsPaid (both can be set)", () => {
+      const values = {
+        date: "2024-01-15",
+        items: [],
+      };
+
+      const result = prepareDocumentSubmission(values, {
+        originalCustomer: null,
+        documentType: "invoice",
+        isDraft: true,
+        markAsPaid: true,
+        paymentType: "cash",
+      });
+
+      // Both flags can technically be set, though the form logic prevents this
+      expect(result.is_draft).toBe(true);
+      expect(result.payment).toBeDefined();
+    });
+  });
+});

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

@@ -0,0 +1,187 @@
+type CustomerData = {
+  name?: string | null;
+  address?: string | null;
+  address_2?: string | null;
+  post_code?: string | null;
+  city?: string | null;
+  state?: string | null;
+  country?: string | null;
+  tax_number?: string | null;
+  save_customer?: boolean;
+};
+
+type BaseDocumentValues = {
+  number?: string;
+  date?: string;
+  customer_id?: string | null;
+  customer?: CustomerData | null;
+
+  items?: any[];
+  currency_code?: string;
+};
+
+/** Map of item index to gross price mode */
+type PriceModesMap = Record<number, boolean>;
+
+type PrepareDocumentOptions = {
+  /** Original customer data for comparison (to detect modifications) */
+  originalCustomer: CustomerData | null;
+  /** Whether the customer form was shown to the user */
+  wasCustomerFormShown?: boolean;
+  /** For invoices/credit notes: whether to mark as paid */
+  markAsPaid?: boolean;
+  /** For invoices/credit notes: payment type when markAsPaid is true */
+  paymentType?: string;
+  /** Document type for specific date handling */
+  documentType: "invoice" | "estimate" | "credit_note" | "advance_invoice";
+  /** Secondary date field value (date_due for invoices, date_valid_till for estimates) */
+  secondaryDate?: string;
+  /** Map of item index to gross price mode (collected from component state) */
+  priceModes?: PriceModesMap;
+  /** Whether to save as draft (skips numbering and fiscalization) */
+  isDraft?: boolean;
+};
+
+/**
+ * Prepares document form data for API submission.
+ * Handles customer data transformation and payment data for all document types.
+ *
+ * This is a shared utility for invoices, estimates, and credit notes.
+ *
+ * @example
+ * ```ts
+ * // For invoice
+ * const payload = prepareDocumentSubmission(values, {
+ *   originalCustomer,
+ *   wasCustomerFormShown: showCustomerForm,
+ *   markAsPaid: values.markAsPaid,
+ *   paymentType: values.paymentType,
+ *   documentType: "invoice",
+ *   secondaryDate: values.date_due,
+ * });
+ *
+ * // For estimate
+ * const payload = prepareDocumentSubmission(values, {
+ *   originalCustomer,
+ *   documentType: "estimate",
+ *   secondaryDate: values.date_valid_till,
+ * });
+ * ```
+ */
+export function prepareDocumentSubmission<T extends BaseDocumentValues>(
+  values: T,
+  options: PrepareDocumentOptions,
+): any {
+  // Document numbers are always auto-generated by the server
+  // Remove number from payload (even if form provides a preview value)
+
+  // Handle customer logic
+  if (values.customer_id && values.customer) {
+    // If customer form was not shown, remove customer data (keep only customer_id)
+    if (options.wasCustomerFormShown === false) {
+      delete values.customer;
+    } else {
+      // Existing customer loaded - check if data was actually modified
+      const customerChanged =
+        options.originalCustomer && JSON.stringify(values.customer) !== JSON.stringify(options.originalCustomer);
+
+      if (!customerChanged) {
+        // No changes - send only customer_id
+        delete values.customer;
+      } else {
+        // Changes detected - clean null/empty values and send with save_customer flag
+        const cleanedCustomer: any = { save_customer: true };
+        for (const [key, value] of Object.entries(values.customer)) {
+          if (key !== "save_customer" && value !== "" && value !== null && value !== undefined) {
+            cleanedCustomer[key] = value;
+          }
+        }
+        values.customer = cleanedCustomer;
+      }
+    }
+  } else if (values.customer) {
+    // New inline customer - clean null/empty values and add save flag
+    const cleanedCustomer: any = { save_customer: true };
+    let hasAnyValue = false;
+
+    for (const [key, value] of Object.entries(values.customer)) {
+      if (key !== "save_customer" && value !== "" && value !== null && value !== undefined) {
+        cleanedCustomer[key] = value;
+        hasAnyValue = true;
+      }
+    }
+
+    if (!hasAnyValue) {
+      delete values.customer;
+    } else {
+      values.customer = cleanedCustomer;
+    }
+  }
+
+  // Clean up customer_id if empty
+  if (!values.customer_id) {
+    delete values.customer_id;
+  }
+
+  // Clean up taxes and handle gross price transformation
+  if (values.items) {
+    const priceModes = options.priceModes ?? {};
+    values.items = values.items.map((item: any, index: number) => {
+      const { price, ...rest } = item;
+
+      // Transform price based on price mode (from component state, not form)
+      const isGrossPrice = priceModes[index] ?? false;
+      const priceFields = isGrossPrice ? { gross_price: price } : { price };
+
+      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;
+        }),
+      };
+    });
+  }
+
+  // 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 payload: any = {
+    ...restValues,
+    ...(note?.trim() && { note: note.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() }),
+    date: values.date ? new Date(values.date) : undefined,
+  };
+
+  // Add secondary date field based on document type
+  if ((options.documentType === "invoice" || options.documentType === "advance_invoice") && options.secondaryDate) {
+    payload.date_due = new Date(options.secondaryDate);
+  } else if (options.documentType === "estimate" && options.secondaryDate) {
+    payload.date_valid_till = new Date(options.secondaryDate);
+  }
+  // Credit notes don't have a secondary date field
+
+  // Handle markAsPaid for invoices and credit notes
+  if (options.documentType !== "estimate" && options.markAsPaid) {
+    payload.payment = {
+      type: options.paymentType || "bank_transfer",
+      date: payload.date ?? undefined,
+    };
+  }
+
+  // Remove UI-only fields from payload
+  delete payload.markAsPaid;
+  delete payload.paymentType;
+
+  // Add draft flag if requested
+  if (options.isDraft) {
+    payload.is_draft = true;
+  }
+
+  return payload;
+}

package/src/components/documents/create/prepare-preview-data.test.ts

@@ -0,0 +1,155 @@
+import { describe, expect, test } from "bun:test";
+import { filterUnresolvedTaxes } from "./prepare-preview-data";
+
+describe("filterUnresolvedTaxes", () => {
+  test("returns empty array for undefined items", () => {
+    const result = filterUnresolvedTaxes(undefined);
+    expect(result).toEqual([]);
+  });
+
+  test("returns empty array for empty items", () => {
+    const result = filterUnresolvedTaxes([]);
+    expect(result).toEqual([]);
+  });
+
+  test("preserves items without taxes", () => {
+    const items = [{ name: "Item 1", quantity: 1, price: 100 }];
+    const result = filterUnresolvedTaxes(items as any);
+
+    expect(result).toHaveLength(1);
+    expect(result[0].name).toBe("Item 1");
+    expect(result[0].taxes).toEqual([]);
+  });
+
+  test("preserves items with empty taxes array", () => {
+    const items = [{ name: "Item 1", quantity: 1, price: 100, taxes: [] }];
+    const result = filterUnresolvedTaxes(items as any);
+
+    expect(result).toHaveLength(1);
+    expect(result[0].taxes).toEqual([]);
+  });
+
+  test("filters out taxes with undefined tax_id", () => {
+    const items = [
+      {
+        name: "Item 1",
+        quantity: 1,
+        price: 100,
+        taxes: [{ tax_id: undefined }],
+      },
+    ];
+    const result = filterUnresolvedTaxes(items as any);
+
+    expect(result).toHaveLength(1);
+    expect(result[0].taxes).toEqual([]);
+  });
+
+  test("filters out taxes with null tax_id", () => {
+    const items = [
+      {
+        name: "Item 1",
+        quantity: 1,
+        price: 100,
+        taxes: [{ tax_id: null }],
+      },
+    ];
+    const result = filterUnresolvedTaxes(items as any);
+
+    expect(result).toHaveLength(1);
+    expect(result[0].taxes).toEqual([]);
+  });
+
+  test("preserves taxes with valid tax_id", () => {
+    const items = [
+      {
+        name: "Item 1",
+        quantity: 1,
+        price: 100,
+        taxes: [{ tax_id: "tax-123" }],
+      },
+    ];
+    const result = filterUnresolvedTaxes(items as any);
+
+    expect(result).toHaveLength(1);
+    expect(result[0].taxes).toEqual([{ tax_id: "tax-123" }]);
+  });
+
+  test("filters mixed valid and invalid taxes", () => {
+    const items = [
+      {
+        name: "Item 1",
+        quantity: 1,
+        price: 100,
+        taxes: [{ tax_id: undefined }, { tax_id: "tax-123" }, { tax_id: null }],
+      },
+    ];
+    const result = filterUnresolvedTaxes(items as any);
+
+    expect(result).toHaveLength(1);
+    expect(result[0].taxes).toEqual([{ tax_id: "tax-123" }]);
+  });
+
+  test("handles multiple items with different tax states", () => {
+    const items = [
+      {
+        name: "Item 1",
+        quantity: 1,
+        price: 100,
+        taxes: [{ tax_id: undefined }],
+      },
+      {
+        name: "Item 2",
+        quantity: 2,
+        price: 200,
+        taxes: [{ tax_id: "tax-456" }],
+      },
+      {
+        name: "Item 3",
+        quantity: 3,
+        price: 300,
+        taxes: [],
+      },
+    ];
+    const result = filterUnresolvedTaxes(items as any);
+
+    expect(result).toHaveLength(3);
+    expect(result[0].taxes).toEqual([]);
+    expect(result[1].taxes).toEqual([{ tax_id: "tax-456" }]);
+    expect(result[2].taxes).toEqual([]);
+  });
+
+  test("preserves other item properties", () => {
+    const items = [
+      {
+        name: "Test Item",
+        description: "A test description",
+        quantity: 5,
+        price: 99.99,
+        unit: "pcs",
+        taxes: [{ tax_id: "tax-123", rate: 22 }],
+      },
+    ];
+    const result = filterUnresolvedTaxes(items as any);
+
+    expect(result[0].name).toBe("Test Item");
+    expect(result[0].description).toBe("A test description");
+    expect(result[0].quantity).toBe(5);
+    expect(result[0].price).toBe(99.99);
+    expect(result[0].unit).toBe("pcs");
+    expect(result[0].taxes).toEqual([{ tax_id: "tax-123", rate: 22 }]);
+  });
+
+  test("preserves tax properties other than tax_id when valid", () => {
+    const items = [
+      {
+        name: "Item 1",
+        quantity: 1,
+        price: 100,
+        taxes: [{ tax_id: "tax-123", rate: 22, name: "VAT" }],
+      },
+    ];
+    const result = filterUnresolvedTaxes(items as any);
+
+    expect(result[0].taxes).toEqual([{ tax_id: "tax-123", rate: 22, name: "VAT" }]);
+  });
+});

package/src/components/documents/create/prepare-preview-data.ts

@@ -0,0 +1,16 @@
+import type { CreateInvoiceRequest } from "@spaceinvoices/js-sdk";
+
+type ItemWithTaxes = NonNullable<CreateInvoiceRequest["items"]>[number];
+
+/**
+ * Filters out items with unresolved tax_ids before sending to preview API.
+ *
+ * This handles a race condition where the form may add `{ tax_id: undefined }`
+ * for tax subject entities before the tax dropdown has auto-selected a value.
+ */
+export function filterUnresolvedTaxes(items: ItemWithTaxes[] | undefined): ItemWithTaxes[] {
+  return (items || []).map((item) => ({
+    ...item,
+    taxes: (item.taxes || []).filter((tax) => tax.tax_id != null),
+  }));
+}

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

@@ -0,0 +1,139 @@
+/**
+ * Smart Code Insert Button
+ * Dropdown button for inserting template variables into a textarea at cursor position
+ */
+import { Sparkles } from "lucide-react";
+import { useCallback, useRef } from "react";
+import { Button } from "@/ui/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/ui/components/ui/dropdown-menu";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/ui/components/ui/tooltip";
+
+const TEMPLATE_VARIABLES = [
+  {
+    category: "Entity",
+    variables: [
+      { code: "{entity_name}", label: "Company name" },
+      { code: "{entity_email}", label: "Email address" },
+    ],
+  },
+  {
+    category: "Document",
+    variables: [
+      { code: "{document_number}", label: "Invoice number" },
+      { code: "{document_date}", label: "Invoice date" },
+      { code: "{document_due_date}", label: "Due date" },
+      { code: "{document_total}", label: "Total amount" },
+      { code: "{document_currency}", label: "Currency" },
+    ],
+  },
+  {
+    category: "Customer",
+    variables: [
+      { code: "{customer_name}", label: "Customer name" },
+      { code: "{customer_email}", label: "Customer email" },
+    ],
+  },
+  {
+    category: "Bank Account",
+    variables: [
+      { code: "{bank_account}", label: "Full account info" },
+      { code: "{bank_account.iban}", label: "IBAN" },
+      { code: "{bank_account.bank_name}", label: "Bank name" },
+      { code: "{bank_account.bic}", label: "BIC/SWIFT" },
+      { code: "{bank_account.account_number}", label: "Account number" },
+    ],
+  },
+  {
+    category: "Other",
+    variables: [
+      { code: "{current_date}", label: "Today's date" },
+      { code: "{current_year}", label: "Current year" },
+    ],
+  },
+];
+
+interface SmartCodeInsertButtonProps {
+  /** Reference to the textarea element */
+  textareaRef: React.RefObject<HTMLTextAreaElement | null>;
+  /** Callback when a variable is inserted - receives the new value */
+  onInsert: (newValue: string) => void;
+  /** Current value of the textarea */
+  value: string;
+  /** Translation function */
+  t: (key: string) => string;
+}
+
+export function SmartCodeInsertButton({ textareaRef, onInsert, value, t }: SmartCodeInsertButtonProps) {
+  // Store cursor position for when textarea loses focus before dropdown opens
+  const cursorPositionRef = useRef<number>(0);
+
+  const insertVariable = useCallback(
+    (code: string) => {
+      const textarea = textareaRef.current;
+      const currentValue = value || "";
+      const cursorPos = textarea?.selectionStart ?? cursorPositionRef.current ?? currentValue.length;
+
+      // Insert the code at cursor position
+      const newValue = currentValue.slice(0, cursorPos) + code + currentValue.slice(cursorPos);
+      onInsert(newValue);
+
+      // Restore focus and set cursor after inserted text
+      requestAnimationFrame(() => {
+        if (textarea) {
+          textarea.focus();
+          const newCursorPos = cursorPos + code.length;
+          textarea.setSelectionRange(newCursorPos, newCursorPos);
+        }
+      });
+    },
+    [textareaRef, value, onInsert],
+  );
+
+  return (
+    <DropdownMenu>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <DropdownMenuTrigger asChild>
+              <Button type="button" variant="ghost" size="sm" className="h-8 w-8 p-0">
+                <Sparkles className="h-4 w-4" />
+                <span className="sr-only">{t("Insert variable")}</span>
+              </Button>
+            </DropdownMenuTrigger>
+          </TooltipTrigger>
+          <TooltipContent side="top">
+            <p>{t("Insert variable")}</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+      <DropdownMenuContent align="end" className="w-72">
+        {TEMPLATE_VARIABLES.map((group, groupIndex) => (
+          <div key={group.category}>
+            {groupIndex > 0 && <DropdownMenuSeparator />}
+            <DropdownMenuLabel className="text-muted-foreground text-xs">{t(group.category)}</DropdownMenuLabel>
+            <DropdownMenuGroup>
+              {group.variables.map((variable) => (
+                <DropdownMenuItem
+                  key={variable.code}
+                  onClick={() => insertVariable(variable.code)}
+                  className="flex cursor-pointer items-center whitespace-nowrap"
+                >
+                  <code className="mr-2 shrink-0 rounded bg-muted px-1 py-0.5 font-mono text-xs">{variable.code}</code>
+                  <span className="text-muted-foreground text-xs">{t(variable.label)}</span>
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuGroup>
+          </div>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}