@spaceinvoices/react-ui 0.4.11 → 0.4.31

package/src/components/documents/create/preserved-expected-total.ts

@@ -0,0 +1,90 @@
+import { prepareDocumentItems } from "./prepare-document-submission";
+
+type PriceModesMap = Record<number, boolean>;
+
+type ResolvePreservedExpectedTotalOptions = {
+  initialExpectedTotalWithTax?: number | null;
+  initialItems?: any[];
+  currentItems?: any[];
+  initialCurrencyCode?: string | null;
+  currentCurrencyCode?: string | null;
+  initialCalculationMode?: string | null;
+  currentCalculationMode?: string | null;
+  initialPriceModes?: PriceModesMap;
+  currentPriceModes?: PriceModesMap;
+};
+
+function round2(value: number): number {
+  return Math.round(value * 100) / 100;
+}
+
+function normalizeTaxes(taxes: any[] | undefined): any[] {
+  return (taxes ?? []).map((tax) => ({
+    tax_id: tax?.tax_id ?? null,
+    rate: tax?.rate ?? null,
+    classification: tax?.classification ?? null,
+    reverse_charge: tax?.reverse_charge ?? false,
+    pt_exemption_code: tax?.pt_exemption_code ?? null,
+    pt_exemption_reason: tax?.pt_exemption_reason ?? null,
+  }));
+}
+
+function normalizeDiscounts(discounts: any[] | undefined): any[] {
+  return (discounts ?? []).map((discount) => ({
+    value: discount?.value ?? null,
+    type: discount?.type ?? "percent",
+  }));
+}
+
+function normalizeComparableItems(items: any[] | undefined, priceModes: PriceModesMap = {}): any[] {
+  return (prepareDocumentItems(items, priceModes) ?? []).map((item) => {
+    if (item?.type === "separator") {
+      return { type: "separator" };
+    }
+
+    return {
+      type: item?.type ?? null,
+      quantity: item?.quantity ?? null,
+      price: item?.price ?? null,
+      gross_price: item?.gross_price ?? null,
+      taxes: normalizeTaxes(item?.taxes),
+      discounts: normalizeDiscounts(item?.discounts),
+    };
+  });
+}
+
+export function financialInputsMatchInitial(options: Omit<ResolvePreservedExpectedTotalOptions, "initialExpectedTotalWithTax">): boolean {
+  if ((options.initialCurrencyCode ?? null) !== (options.currentCurrencyCode ?? null)) {
+    return false;
+  }
+
+  if ((options.initialCalculationMode ?? null) !== (options.currentCalculationMode ?? null)) {
+    return false;
+  }
+
+  const initialComparableItems = normalizeComparableItems(options.initialItems, options.initialPriceModes);
+  const currentComparableItems = normalizeComparableItems(options.currentItems, options.currentPriceModes);
+
+  return JSON.stringify(initialComparableItems) === JSON.stringify(currentComparableItems);
+}
+
+export function resolvePreservedExpectedTotal(options: ResolvePreservedExpectedTotalOptions): number | undefined {
+  const initialExpectedTotalWithTax = options.initialExpectedTotalWithTax;
+  if (initialExpectedTotalWithTax == null) {
+    return undefined;
+  }
+
+  return financialInputsMatchInitial(options) ? initialExpectedTotalWithTax : undefined;
+}
+
+export function totalsDifferByCents(left: number | null | undefined, right: number | null | undefined): boolean {
+  if (left == null || right == null) {
+    return false;
+  }
+
+  return Math.round(left * 100) !== Math.round(right * 100);
+}
+
+export function roundMoney(value: number): number {
+  return round2(value);
+}

package/src/components/documents/create/scroll-to-first-invalid-field.ts

@@ -0,0 +1,27 @@
+export function scrollToFirstInvalidField(formId: string) {
+  if (typeof document === "undefined") {
+    return;
+  }
+
+  const form = document.getElementById(formId);
+  if (!form) {
+    return;
+  }
+
+  const scrollToInvalidField = () => {
+    const errorTarget = form.querySelector<HTMLElement>('[data-form-error-summary="true"], [aria-invalid="true"]');
+    if (!errorTarget) {
+      return;
+    }
+
+    errorTarget.scrollIntoView({ behavior: "smooth", block: "center" });
+
+    if (errorTarget.matches('[aria-invalid="true"]') && typeof errorTarget.focus === "function") {
+      errorTarget.focus({ preventScroll: true });
+    }
+  };
+
+  requestAnimationFrame(() => {
+    requestAnimationFrame(scrollToInvalidField);
+  });
+}

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

@@ -15,56 +15,7 @@ import {
   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" },
-      { 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" },
-    ],
-  },
-  {
-    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" },
-    ],
-  },
-];
+import { getTemplateVariableGroups } from "@/ui/lib/template-variables";
 
 interface SmartCodeInsertButtonProps {
   /** Reference to the textarea element */
@@ -80,6 +31,7 @@ interface SmartCodeInsertButtonProps {
 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 templateVariables = getTemplateVariableGroups(t);
 
   const insertVariable = useCallback(
     (code: string) => {
@@ -121,10 +73,10 @@ export function SmartCodeInsertButton({ textareaRef, onInsert, value, t }: Smart
         </Tooltip>
       </TooltipProvider>
       <DropdownMenuContent align="end" className="w-72">
-        {TEMPLATE_VARIABLES.map((group, groupIndex) => (
+        {templateVariables.map((group, groupIndex) => (
           <div key={group.category}>
             {groupIndex > 0 && <DropdownMenuSeparator />}
-            <DropdownMenuLabel className="text-muted-foreground text-xs">{t(group.category)}</DropdownMenuLabel>
+            <DropdownMenuLabel className="text-muted-foreground text-xs">{group.category}</DropdownMenuLabel>
             <DropdownMenuGroup>
               {group.variables.map((variable) => (
                 <DropdownMenuItem
@@ -133,7 +85,7 @@ export function SmartCodeInsertButton({ textareaRef, onInsert, value, t }: Smart
                   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>
+                  <span className="text-muted-foreground text-xs">{variable.label}</span>
                 </DropdownMenuItem>
               ))}
             </DropdownMenuGroup>

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

@@ -26,17 +26,6 @@ export type DocumentFormWithCustomer = FieldValues & {
   customer?: CustomerData | null;
 };
 
-/**
- * Type-safe setValue wrapper for document forms.
- */
-function _setFormValue<TForm extends FieldValues>(
-  form: UseFormReturn<TForm>,
-  name: Path<TForm>,
-  value: PathValue<TForm, Path<TForm>>,
-) {
-  form.setValue(name, value);
-}
-
 /**
  * Shared hook for managing customer selection and form state in document forms.
  * Used by invoices, estimates, credit notes, and advance invoices.
@@ -85,6 +74,20 @@ export function useDocumentCustomerForm<TForm extends DocumentFormWithCustomer>(
 
   const handleCustomerSelect = (customerId: string, customer: CustomerData) => {
     const isNewCustomer = !customerId || customerId === "";
+    const customerFieldPaths = [
+      "customer.name",
+      "customer.address",
+      "customer.address_2",
+      "customer.post_code",
+      "customer.city",
+      "customer.state",
+      "customer.country",
+      "customer.tax_number",
+      "customer.is_end_consumer",
+    ] as Path<TForm>[];
+    const setCustomerFieldValue = <K extends Path<TForm>>(name: K, value: PathValue<TForm, K>) => {
+      form.setValue(name, value, { shouldDirty: true, shouldTouch: true, shouldValidate: true });
+    };
 
     // Helper to convert empty/null to undefined for optional fields,
     // but keep empty string for required fields (name) so form shows them
@@ -98,19 +101,41 @@ export function useDocumentCustomerForm<TForm extends DocumentFormWithCustomer>(
     if (isNewCustomer) {
       // New customer - clear customer_id and set customer data
       setValue("customer_id" as Path<TForm>, undefined as PathValue<TForm, Path<TForm>>);
-      setValue(
-        "customer" as Path<TForm>,
-        {
-          name: toFormValue(customer.name, true),
-          address: toFormValue(customer.address),
-          address_2: toFormValue(customer.address_2),
-          post_code: toFormValue(customer.post_code),
-          city: toFormValue(customer.city),
-          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>>,
+      setCustomerFieldValue(
+        "customer.name" as Path<TForm>,
+        toFormValue(customer.name, true) as PathValue<TForm, Path<TForm>>,
+      );
+      setCustomerFieldValue(
+        "customer.address" as Path<TForm>,
+        toFormValue(customer.address) as PathValue<TForm, Path<TForm>>,
+      );
+      setCustomerFieldValue(
+        "customer.address_2" as Path<TForm>,
+        toFormValue(customer.address_2) as PathValue<TForm, Path<TForm>>,
+      );
+      setCustomerFieldValue(
+        "customer.post_code" as Path<TForm>,
+        toFormValue(customer.post_code) as PathValue<TForm, Path<TForm>>,
+      );
+      setCustomerFieldValue(
+        "customer.city" as Path<TForm>,
+        toFormValue(customer.city) as PathValue<TForm, Path<TForm>>,
+      );
+      setCustomerFieldValue(
+        "customer.state" as Path<TForm>,
+        toFormValue(customer.state) as PathValue<TForm, Path<TForm>>,
+      );
+      setCustomerFieldValue(
+        "customer.country" as Path<TForm>,
+        toFormValue(customer.country) as PathValue<TForm, Path<TForm>>,
+      );
+      setCustomerFieldValue(
+        "customer.tax_number" as Path<TForm>,
+        toFormValue(customer.tax_number) as PathValue<TForm, Path<TForm>>,
+      );
+      setCustomerFieldValue(
+        "customer.is_end_consumer" as Path<TForm>,
+        (customer.is_end_consumer ?? undefined) as PathValue<TForm, Path<TForm>>,
       );
       setOriginalCustomer(null);
       setSelectedCustomerId(undefined);
@@ -131,12 +156,36 @@ export function useDocumentCustomerForm<TForm extends DocumentFormWithCustomer>(
         is_end_consumer: customer.is_end_consumer ?? undefined,
       };
 
-      setValue("customer" as Path<TForm>, customerData as PathValue<TForm, Path<TForm>>);
+      setCustomerFieldValue("customer.name" as Path<TForm>, customerData.name as PathValue<TForm, Path<TForm>>);
+      setCustomerFieldValue("customer.address" as Path<TForm>, customerData.address as PathValue<TForm, Path<TForm>>);
+      setCustomerFieldValue(
+        "customer.address_2" as Path<TForm>,
+        customerData.address_2 as PathValue<TForm, Path<TForm>>,
+      );
+      setCustomerFieldValue(
+        "customer.post_code" as Path<TForm>,
+        customerData.post_code as PathValue<TForm, Path<TForm>>,
+      );
+      setCustomerFieldValue("customer.city" as Path<TForm>, customerData.city as PathValue<TForm, Path<TForm>>);
+      setCustomerFieldValue("customer.state" as Path<TForm>, customerData.state as PathValue<TForm, Path<TForm>>);
+      setCustomerFieldValue("customer.country" as Path<TForm>, customerData.country as PathValue<TForm, Path<TForm>>);
+      setCustomerFieldValue(
+        "customer.tax_number" as Path<TForm>,
+        customerData.tax_number as PathValue<TForm, Path<TForm>>,
+      );
+      setCustomerFieldValue(
+        "customer.is_end_consumer" as Path<TForm>,
+        customerData.is_end_consumer as PathValue<TForm, Path<TForm>>,
+      );
       setOriginalCustomer(customerData);
       setSelectedCustomerId(customerId);
       setShouldFocusName(false);
     }
 
+    form.clearErrors(["customer_id" as Path<TForm>, ...customerFieldPaths]);
+    if (form.formState.isSubmitted) {
+      void form.trigger();
+    }
     setShowCustomerForm(true);
   };
 

package/src/components/documents/documents.hooks.ts

@@ -1,5 +1,5 @@
+import { documents } from "@spaceinvoices/js-sdk";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { useSDK } from "@/ui/providers/sdk-provider";
 
 // Document type union for API calls
 export type DocumentType = "invoice" | "estimate" | "credit_note" | "advance_invoice" | "delivery_note";
@@ -35,7 +35,6 @@ type FinalizeDocumentVariables = {
  * Assigns a document number and runs fiscalization (if applicable)
  */
 export function useFinalizeDocument(options: FinalizeDocumentOptions) {
-  const { sdk } = useSDK();
   const queryClient = useQueryClient();
 
   return useMutation({
@@ -43,7 +42,7 @@ export function useFinalizeDocument(options: FinalizeDocumentOptions) {
       const body: Record<string, unknown> = {};
       if (furs) body.furs = furs;
       if (fina) body.fina = fina;
-      return sdk.documents.finalizeDocument(documentId, body, { type: documentType });
+      return documents.finalizeDocument(documentId, body, { type: documentType });
     },
     onSuccess: (data, variables) => {
       // Invalidate list cache
@@ -83,12 +82,11 @@ type DeleteDraftDocumentVariables = {
  * Only draft documents can be deleted
  */
 export function useDeleteDraftDocument(options: DeleteDraftDocumentOptions) {
-  const { sdk } = useSDK();
   const queryClient = useQueryClient();
 
   return useMutation({
     mutationFn: async ({ documentId, documentType }: DeleteDraftDocumentVariables) => {
-      return sdk.documents.delete(documentId, { type: documentType });
+      return documents.delete(documentId, { type: documentType });
     },
     onSuccess: (_, variables) => {
       // Invalidate list cache

package/src/components/documents/index.ts

@@ -15,6 +15,7 @@ export { prepareDocumentSubmission } from "./create/prepare-document-submission"
 export { useDocumentCustomerForm } from "./create/use-document-customer-form";
 // Preview components
 export { default as DocumentPreview } from "./document-preview";
+export { PublicDocumentSummary } from "./public";
 export { ScaledDocumentPreview } from "./shared/scaled-document-preview";
 export { useA4Scaling } from "./shared/use-a4-scaling";
 // Types

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

@@ -0,0 +1 @@
+export { PublicDocumentSummary } from "./public-document-summary";