@spaceinvoices/react-ui 0.4.8 → 0.4.11

package/src/components/entities/shared/fiscalization-step-flow.ts

@@ -0,0 +1,77 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export interface FiscalizationStepConfig<T extends string> {
+  id: T;
+  title: string;
+  complete: boolean;
+  unlocked: boolean;
+}
+
+interface UseFiscalizationStepFlowOptions<T extends string> {
+  initialStep: T;
+  isReady: boolean;
+  steps: FiscalizationStepConfig<T>[];
+  getDefaultStep: () => T;
+  onStepChange?: (step: T) => void;
+}
+
+export function useFiscalizationStepFlow<T extends string>({
+  initialStep,
+  isReady,
+  steps,
+  getDefaultStep,
+  onStepChange,
+}: UseFiscalizationStepFlowOptions<T>) {
+  const [activeStep, setActiveStep] = useState<T>(initialStep);
+  const [hasInitializedStep, setHasInitializedStep] = useState(false);
+  const previousInitialStep = useRef(initialStep);
+
+  const handleStepChange = useCallback(
+    (newStep: T) => {
+      setActiveStep(newStep);
+      onStepChange?.(newStep);
+    },
+    [onStepChange],
+  );
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: caller controls step definitions and default-step logic
+  useEffect(() => {
+    if (!hasInitializedStep && isReady) {
+      const smartStep = getDefaultStep();
+      if (smartStep !== activeStep) {
+        handleStepChange(smartStep);
+      }
+      setHasInitializedStep(true);
+    }
+  }, [isReady, hasInitializedStep]);
+
+  useEffect(() => {
+    const currentStepInfo = steps.find((step) => step.id === activeStep);
+    if (currentStepInfo && !currentStepInfo.unlocked) {
+      const firstUnlockedStep = steps.find((step) => step.unlocked);
+      if (firstUnlockedStep) {
+        handleStepChange(firstUnlockedStep.id);
+      }
+    }
+  }, [activeStep, steps, handleStepChange]);
+
+  useEffect(() => {
+    if (!hasInitializedStep) return;
+
+    if (previousInitialStep.current === initialStep) {
+      return;
+    }
+
+    previousInitialStep.current = initialStep;
+
+    const nextStepInfo = steps.find((step) => step.id === initialStep);
+    if (nextStepInfo?.unlocked && initialStep !== activeStep) {
+      setActiveStep(initialStep);
+    }
+  }, [activeStep, hasInitializedStep, initialStep, steps]);
+
+  return {
+    activeStep,
+    handleStepChange,
+  };
+}

package/src/components/entities/shared/fiscalization-step-tabs.tsx

@@ -0,0 +1,71 @@
+import { CheckCircle2 } from "lucide-react";
+import { Tabs, TabsList, TabsTrigger } from "@/ui/components/ui/tabs";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/ui/components/ui/tooltip";
+import { cn } from "@/ui/lib/utils";
+import type { FiscalizationStepConfig } from "./fiscalization-step-flow";
+
+interface FiscalizationStepTabsProps<T extends string> {
+  activeStep: T;
+  steps: FiscalizationStepConfig<T>[];
+  testIdPrefix: string;
+  onStepChange: (step: T) => void;
+  getTooltipText: (step: FiscalizationStepConfig<T>) => string;
+}
+
+export function FiscalizationStepTabs<T extends string>({
+  activeStep,
+  steps,
+  testIdPrefix,
+  onStepChange,
+  getTooltipText,
+}: FiscalizationStepTabsProps<T>) {
+  return (
+    <div className="grid items-start gap-6 lg:grid-cols-[1fr_280px]">
+      <Tabs value={activeStep} onValueChange={(value) => onStepChange(value as T)} className="w-full">
+        <TabsList className="grid w-full grid-cols-4 rounded-none p-0">
+          {steps.map((step, index) => {
+            const isLocked = !step.unlocked;
+
+            const trigger = (
+              <TabsTrigger
+                value={step.id}
+                disabled={isLocked}
+                data-testid={`${testIdPrefix}-${step.id}`}
+                className={cn("cursor-pointer justify-center", !step.unlocked && "opacity-50")}
+              >
+                <span className="flex items-center gap-2">
+                  {step.complete ? (
+                    <CheckCircle2 className="h-4 w-4 text-green-500" />
+                  ) : (
+                    <span className="text-xs">{index + 1}</span>
+                  )}
+                  {step.title}
+                </span>
+              </TabsTrigger>
+            );
+
+            if (isLocked) {
+              return (
+                <Tooltip key={step.id} delayDuration={0}>
+                  <TooltipTrigger asChild>
+                    <span className="flex cursor-not-allowed justify-center">{trigger}</span>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>{getTooltipText(step)}</p>
+                  </TooltipContent>
+                </Tooltip>
+              );
+            }
+
+            return (
+              <span key={step.id} className="flex justify-center">
+                {trigger}
+              </span>
+            );
+          })}
+        </TabsList>
+      </Tabs>
+      <div className="hidden lg:block" />
+    </div>
+  );
+}

package/src/components/estimates/create/create-estimate-form.tsx

@@ -250,6 +250,7 @@ export default function CreateEstimateForm({
   const formValues = useWatch({
     control: form.control,
   });
+  const prevPayloadRef = useRef("");
 
   // ============================================================================
   // VIES Check - determine if reverse charge applies
@@ -380,37 +381,48 @@ export default function CreateEstimateForm({
     form.setValue("date_valid_till", calculateDueDate(currentDate, validDays));
   }, [formValues.date, activeEntity, form]);
 
-  useEffect(() => {
-    const callback = onChangeRef.current;
-    if (!callback) return;
-
-    const currentItems = form.getValues("items") || [];
+  const buildPreviewPayload = useCallback((values: CreateEstimateFormValues): EstimatePreviewPayload => {
+    const currentItems = values.items || [];
 
-    // Transform items to use gross_price when price mode is gross
     const transformedItems = currentItems.map((item: any, index: number) => {
       const { price, ...rest } = item;
       const isGross = priceModesRef.current[index] ?? false;
-      if (isGross) {
-        return { ...rest, gross_price: price };
-      }
-      return { ...rest, price };
+      return isGross ? { ...rest, gross_price: price } : { ...rest, price };
     });
 
-    const payload: EstimatePreviewPayload = {
-      number: formValues.number,
-      date: formValues.date,
-      customer_id: formValues.customer_id,
-      customer: formValues.customer,
+    return {
+      number: values.number,
+      date: values.date,
+      customer_id: values.customer_id,
+      customer: values.customer,
       items: transformedItems,
-      currency_code: formValues.currency_code,
-      reference: formValues.reference,
-      note: formValues.note,
-      payment_terms: formValues.payment_terms,
-      signature: formValues.signature,
+      currency_code: values.currency_code,
+      reference: values.reference,
+      note: values.note,
+      payment_terms: values.payment_terms,
+      signature: values.signature,
       title_type: titleType,
     };
+  }, [titleType]);
+
+  const emitPreviewPayload = useCallback((payload: EstimatePreviewPayload) => {
+    const callback = onChangeRef.current;
+    if (!callback) return;
+
+    const payloadStr = JSON.stringify(payload);
+    if (payloadStr === prevPayloadRef.current) return;
+    prevPayloadRef.current = payloadStr;
+
     callback(payload);
-  }, [formValues, form, titleType]);
+  }, []);
+
+  useEffect(() => {
+    emitPreviewPayload(buildPreviewPayload(formValues as CreateEstimateFormValues));
+  }, [buildPreviewPayload, emitPreviewPayload, formValues]);
+
+  const emitCurrentPreviewPayload = useCallback(() => {
+    emitPreviewPayload(buildPreviewPayload(form.getValues()));
+  }, [buildPreviewPayload, emitPreviewPayload, form]);
 
   const onSubmit = (values: CreateEstimateFormValues) => {
     submitEstimate(values, false);
@@ -447,6 +459,7 @@ export default function CreateEstimateForm({
           maxTaxesPerItem={activeEntity?.country_rules?.max_taxes_per_item}
           priceModesRef={priceModesRef}
           initialPriceModes={initialPriceModes}
+          onItemsStateChange={emitCurrentPreviewPayload}
           taxesDisabled={reverseChargeApplies}
           taxesDisabledMessage={
             reverseChargeApplies ? t("Reverse charge - tax exempt EU B2B sale") : viesWarning ? viesWarning : undefined

package/src/components/estimates/list/list-table.tsx

@@ -3,6 +3,7 @@ import { useCallback, useMemo, useState } from "react";
 import { DataTable } from "@/ui/components/table/data-table";
 import { FormattedDate } from "@/ui/components/table/date-cell";
 import { useTableFetch } from "@/ui/components/table/hooks/use-table-fetch";
+import { withTableTranslations } from "@/ui/components/table/locales";
 import { SelectionToolbar } from "@/ui/components/table/selection-toolbar";
 import type {
   Column,
@@ -28,7 +29,7 @@ import pl from "./locales/pl";
 import pt from "./locales/pt";
 import sl from "./locales/sl";
 
-const translations = {
+const translations = withTableTranslations({
   en,
   sl,
   de,
@@ -39,12 +40,13 @@ const translations = {
   nl,
   pl,
   hr,
-} as const;
+} as const);
 
 type EstimateListTableProps = {
   t?: (key: string) => string;
   namespace?: string;
   locale?: string;
+  translationLocale?: string;
   entityId?: string;
   onView?: (estimate: Estimate) => void;
   onDuplicate?: (estimate: Estimate) => void;
@@ -73,6 +75,7 @@ export default function EstimateListTable({
 }: EstimateListTableProps) {
   const t = createTranslation({
     translations,
+    locale: i18nProps.translationLocale ?? i18nProps.locale,
     ...i18nProps,
   });
 
@@ -123,16 +126,22 @@ export default function EstimateListTable({
   }, []);
 
   const selectionToolbar = useCallback(
-    (count: number) => (
-      <SelectionToolbar
-        selectedCount={count}
-        onExportPdfs={onExportSelected ? handleExportPdfs : undefined}
-        onCopyToInvoice={onCopyToInvoice ? handleCopyToInvoice : undefined}
-        onDeselectAll={handleDeselectAll}
-        t={t}
-      />
-    ),
-    [handleExportPdfs, handleCopyToInvoice, handleDeselectAll, onExportSelected, onCopyToInvoice, t],
+    (count: number, data: Estimate[]) => {
+      const hasDrafts = data.some((d) => selectedIds.has(d.id) && (d as any).is_draft);
+
+      return (
+        <SelectionToolbar
+          selectedCount={count}
+          onExportPdfs={onExportSelected ? handleExportPdfs : undefined}
+          onCopyToInvoice={onCopyToInvoice ? handleCopyToInvoice : undefined}
+          copyToInvoiceDisabled={hasDrafts}
+          copyToInvoiceTooltip={hasDrafts ? t("Finalize draft documents before copying to invoice") : undefined}
+          onDeselectAll={handleDeselectAll}
+          t={t}
+        />
+      );
+    },
+    [handleExportPdfs, handleCopyToInvoice, handleDeselectAll, onExportSelected, onCopyToInvoice, selectedIds, t],
   );
 
   const columns: Column<Estimate>[] = useMemo(
@@ -164,12 +173,12 @@ export default function EstimateListTable({
       {
         id: "date",
         header: t("Date"),
-        cell: (estimate) => <FormattedDate date={estimate.date} />,
+        cell: (estimate) => <FormattedDate date={estimate.date} locale={i18nProps.locale} />,
       },
       {
         id: "date_valid_till",
         header: t("Valid Until"),
-        cell: (estimate) => <FormattedDate date={estimate.date_valid_till} />,
+        cell: (estimate) => <FormattedDate date={estimate.date_valid_till} locale={i18nProps.locale} />,
       },
       {
         id: "total",

package/src/components/estimates/list/locales/de.ts

@@ -37,4 +37,6 @@ export default {
   "Export PDFs": "PDFs exportieren",
   "Deselect all": "Auswahl aufheben",
   "Copy to Invoice": "In Rechnung kopieren",
+  "Finalize draft documents before copying to invoice":
+    "Entwurfsdokumente abschließen, bevor Sie in eine Rechnung kopieren",
 } as const;

package/src/components/estimates/list/locales/en.ts

@@ -9,4 +9,5 @@ export default {
   "Export PDFs": "Export PDFs",
   "Deselect all": "Deselect all",
   "Copy to Invoice": "Copy to Invoice",
+  "Finalize draft documents before copying to invoice": "Finalize draft documents before copying to invoice",
 } as const;

package/src/components/estimates/list/locales/es.ts

@@ -34,4 +34,5 @@ export default {
   "Export PDFs": "Exportar PDFs",
   "Deselect all": "Deseleccionar todo",
   "Copy to Invoice": "Copiar a factura",
+  "Finalize draft documents before copying to invoice": "Finalice los borradores antes de copiar a factura",
 } as const;

package/src/components/estimates/list/locales/fr.ts

@@ -34,4 +34,5 @@ export default {
   "Export PDFs": "Exporter les PDF",
   "Deselect all": "Tout désélectionner",
   "Copy to Invoice": "Copier vers facture",
+  "Finalize draft documents before copying to invoice": "Finalisez les brouillons avant de copier en facture",
 } as const;

package/src/components/estimates/list/locales/hr.ts

@@ -34,4 +34,5 @@ export default {
   "Export PDFs": "Izvezi PDF-ove",
   "Deselect all": "Poništi odabir",
   "Copy to Invoice": "Kopiraj u račun",
+  "Finalize draft documents before copying to invoice": "Dovršite skice dokumenata prije kopiranja u račun",
 } as const;

package/src/components/estimates/list/locales/it.ts

@@ -34,4 +34,5 @@ export default {
   "Export PDFs": "Esporta PDF",
   "Deselect all": "Deseleziona tutto",
   "Copy to Invoice": "Copia in fattura",
+  "Finalize draft documents before copying to invoice": "Finalizzare i documenti bozza prima di copiare in fattura",
 } as const;

package/src/components/estimates/list/locales/nl.ts

@@ -34,4 +34,5 @@ export default {
   "Export PDFs": "PDFs exporteren",
   "Deselect all": "Alles deselecteren",
   "Copy to Invoice": "Kopieer naar factuur",
+  "Finalize draft documents before copying to invoice": "Rond conceptdocumenten af voordat u naar factuur kopieert",
 } as const;

package/src/components/estimates/list/locales/pl.ts

@@ -34,4 +34,5 @@ export default {
   "Export PDFs": "Eksportuj PDF-y",
   "Deselect all": "Odznacz wszystko",
   "Copy to Invoice": "Kopiuj do faktury",
+  "Finalize draft documents before copying to invoice": "Sfinalizuj wersje robocze przed skopiowaniem do faktury",
 } as const;

package/src/components/estimates/list/locales/pt.ts

@@ -34,4 +34,5 @@ export default {
   "Export PDFs": "Exportar PDFs",
   "Deselect all": "Desselecionar tudo",
   "Copy to Invoice": "Copiar para fatura",
+  "Finalize draft documents before copying to invoice": "Finalize os rascunhos antes de copiar para fatura",
 } as const;

package/src/components/estimates/list/locales/sl.ts

@@ -37,4 +37,5 @@ export default {
   "Export PDFs": "Izvozi PDF-je",
   "Deselect all": "Počisti izbiro",
   "Copy to Invoice": "Kopiraj v račun",
+  "Finalize draft documents before copying to invoice": "Dokončajte osnutke dokumentov pred kopiranjem v račun",
 } as const;

package/src/components/estimates/list/use-estimate-download.ts

@@ -33,19 +33,8 @@ export function useEstimateDownload({
     onDownloadStart?.();
 
     try {
-      // 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
-      const blob = await sdk.invoices.renderPdf(estimate.id, {}, { entity_id: activeEntity.id });
-      const downloadUrl = window.URL.createObjectURL(blob);
-      const link = document.createElement("a");
-      link.href = downloadUrl;
       const fileName = `${t("Estimate")} ${estimate.number}.pdf`;
-      link.download = fileName;
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      window.URL.revokeObjectURL(downloadUrl);
+      await sdk.invoices.downloadPdf(estimate.id, fileName, {}, { entity_id: activeEntity.id });
 
       onDownloadSuccess?.(fileName);
     } catch (error) {

package/src/components/export/document-export-form.tsx

@@ -1,7 +1,8 @@
-type TFunction = (key: string, options?: Record<string, unknown>) => string;
-
+import { getClientHeaders } from "@spaceinvoices/js-sdk";
 import { Calendar, Download, Loader2 } from "lucide-react";
 import { useRef, useState } from "react";
+import type { ComponentTranslationProps } from "@/ui/lib/translation";
+import { createTranslation } from "@/ui/lib/translation";
 import { Button } from "../ui/button";
 import { Checkbox } from "../ui/checkbox";
 import { Input } from "../ui/input";
@@ -45,27 +46,52 @@ export type DocumentExportFormProps = {
   token: string;
   accountId?: string | null;
   language: string;
-  t: TFunction;
   /** Base URL for API calls (required in embed context where relative paths don't reach the API) */
   apiBaseUrl?: string;
   onSuccess?: (fileName: string) => void;
   onError?: (error: Error) => void;
   onPdfExportStarted?: (jobId: string) => void;
   onLoadingChange?: (isLoading: boolean, toastId: string | number | null) => void;
-};
+} & ComponentTranslationProps;
+
+const translations = {
+  en: {
+    "export-page.document-type": "Document type",
+    "export-page.types.invoice": "Invoice",
+    "export-page.types.estimate": "Estimate",
+    "export-page.types.credit_note": "Credit note",
+    "export-page.types.advance_invoice": "Advance invoice",
+    "export-page.types.delivery_note": "Delivery note",
+    "export-page.format": "Format",
+    "export-page.formats.xlsx": "Excel (.xlsx)",
+    "export-page.formats.csv": "CSV (.csv)",
+    "export-page.formats.pdf_zip": "PDF ZIP archive",
+    "export-page.pdf-export-info":
+      "PDF export runs asynchronously and generates a ZIP archive for the selected document types.",
+    "export-page.date-from": "Date from",
+    "export-page.date-to": "Date to",
+    "export-page.error.date-range-exceeded": "Date range cannot exceed one year.",
+    "export-page.clear-dates": "Clear dates",
+    "export-page.exporting": "Exporting...",
+    "export-page.export-button": "Export documents",
+  },
+} as const;
 
 export function DocumentExportForm({
   entityId,
   token,
   accountId,
   language,
-  t,
+  t: translateFn,
+  namespace,
+  locale,
   apiBaseUrl = "",
   onSuccess,
   onError,
   onPdfExportStarted,
   onLoadingChange,
 }: DocumentExportFormProps) {
+  const t = createTranslation({ t: translateFn, namespace, locale, translations });
   const defaultDates = getPreviousMonthRange();
   const [documentType, setDocumentType] = useState<DocumentType>("invoice");
   const [selectedTypes, setSelectedTypes] = useState<DocumentType[]>(["invoice"]);
@@ -112,6 +138,7 @@ export function DocumentExportForm({
             Authorization: `Bearer ${token}`,
             "x-entity-id": entityId,
             ...(accountId && { "x-account-id": accountId }),
+            ...getClientHeaders("ui"),
             "Content-Type": "application/json",
           },
           body: JSON.stringify({
@@ -140,11 +167,9 @@ export function DocumentExportForm({
 
     // XLSX/CSV export - synchronous download
     try {
-      const exportLanguage = language === "sl" ? "sl" : "en";
       const queryParams: Record<string, string> = {
         type: documentType,
         format: exportFormat,
-        language: exportLanguage,
       };
       if (dateFrom) {
         queryParams.date_from = dateFrom;
@@ -158,6 +183,7 @@ export function DocumentExportForm({
           Authorization: `Bearer ${token}`,
           "x-entity-id": entityId,
           ...(accountId && { "x-account-id": accountId }),
+          ...getClientHeaders("ui"),
         },
       });
 

package/src/components/export/sales-per-item-export-form.tsx

@@ -1,7 +1,8 @@
-type TFunction = (key: string, options?: Record<string, unknown>) => string;
-
+import { getClientHeaders } from "@spaceinvoices/js-sdk";
 import { Calendar, Download, Loader2 } from "lucide-react";
 import { useState } from "react";
+import type { ComponentTranslationProps } from "@/ui/lib/translation";
+import { createTranslation } from "@/ui/lib/translation";
 import { Button } from "../ui/button";
 import { Input } from "../ui/input";
 import { Label } from "../ui/label";
@@ -41,23 +42,39 @@ export type SalesPerItemExportFormProps = {
   token: string;
   accountId?: string | null;
   language: string;
-  t: TFunction;
   /** Base URL for API calls (required in embed context where relative paths don't reach the API) */
   apiBaseUrl?: string;
   onSuccess?: (fileName: string) => void;
   onError?: (error: Error) => void;
-};
+} & ComponentTranslationProps;
+
+const translations = {
+  en: {
+    "sales-per-item-export.error.dates-required": "Select both a start and end date.",
+    "export-page.error.date-range-exceeded": "Date range cannot exceed one year.",
+    "export-page.format": "Format",
+    "export-page.formats.xlsx": "Excel (.xlsx)",
+    "export-page.formats.csv": "CSV (.csv)",
+    "export-page.date-from": "Date from",
+    "export-page.date-to": "Date to",
+    "export-page.exporting": "Exporting...",
+    "export-page.export-button": "Export sales per item",
+  },
+} as const;
 
 export function SalesPerItemExportForm({
   entityId,
   token,
   accountId,
   language,
-  t,
+  t: translateFn,
+  namespace,
+  locale,
   apiBaseUrl = "",
   onSuccess,
   onError,
 }: SalesPerItemExportFormProps) {
+  const t = createTranslation({ t: translateFn, namespace, locale, translations });
   const defaultDates = getPreviousMonthRange();
   const [exportFormat, setExportFormat] = useState<ExportFormat>("xlsx");
   const [dateFrom, setDateFrom] = useState(defaultDates.from);
@@ -85,12 +102,10 @@ export function SalesPerItemExportForm({
     setIsExporting(true);
 
     try {
-      const exportLanguage = language === "sl" ? "sl" : "en";
       const queryParams: Record<string, string> = {
         format: exportFormat,
         date_from: dateFrom,
         date_to: dateTo,
-        language: exportLanguage,
       };
 
       const response = await fetch(
@@ -100,6 +115,7 @@ export function SalesPerItemExportForm({
             Authorization: `Bearer ${token}`,
             "x-entity-id": entityId,
             ...(accountId && { "x-account-id": accountId }),
+            ...getClientHeaders("ui"),
           },
         },
       );