@spaceinvoices/react-ui 0.4.8 → 0.4.10

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"),
           },
         },
       );