@spaceinvoices/react-ui 0.4.8 → 0.4.10

package/src/components/documents/view/locales/pt.ts

@@ -122,6 +122,14 @@ export default {
   Dutch: "Neerlandês",
   Polish: "Polaco",
   Croatian: "Croata",
+  Swedish: "Sueco",
+  Finnish: "Finlandês",
+  Estonian: "Estónio",
+  Bulgarian: "Búlgaro",
+  Czech: "Checo",
+  Slovak: "Eslovaco",
+  Norwegian: "Norueguês",
+  Icelandic: "Islandês",
 
   // Linked documents
   "Linked documents": "Documentos vinculados",

package/src/components/documents/view/locales/sl.ts

@@ -123,6 +123,14 @@ export default {
   Dutch: "Nizozemščina",
   Polish: "Poljščina",
   Croatian: "Hrvaščina",
+  Swedish: "Švedščina",
+  Finnish: "Finščina",
+  Estonian: "Estonščina",
+  Bulgarian: "Bolgarščina",
+  Czech: "Češčina",
+  Slovak: "Slovaščina",
+  Norwegian: "Norveščina",
+  Icelandic: "Islandščina",
 
   // Linked documents
   "Linked documents": "Povezani dokumenti",

package/src/components/documents/view/use-document-download.ts

@@ -1,4 +1,11 @@
-import type { AdvanceInvoice, CreditNote, DeliveryNote, Estimate, Invoice } from "@spaceinvoices/js-sdk";
+import {
+  type AdvanceInvoice,
+  type CreditNote,
+  type DeliveryNote,
+  downloadBlob,
+  type Estimate,
+  type Invoice,
+} from "@spaceinvoices/js-sdk";
 import { useState } from "react";
 import { useEntities } from "@/ui/providers/entities-context";
 import { useSDK } from "@/ui/providers/sdk-provider";
@@ -36,11 +43,10 @@ export function useDocumentDownload({
   const [isDownloadingEslog, setIsDownloadingEslog] = useState(false);
 
   /**
-   * Download PDF with optional language override for translations
-   * Formatting (decimal separators, dates) always uses entity locale.
-   * The language param only changes labels/translations on the PDF.
+   * Download PDF with optional locale override.
+   * When a locale is selected, it is sent as both the formatting locale and label language.
    */
-  const downloadPdf = async (document: Document, documentType: DocumentType, language?: string) => {
+  const downloadPdf = async (document: Document, documentType: DocumentType, locale?: string) => {
     if (!sdk || !activeEntity?.id) {
       onDownloadError?.("Download failed");
       return;
@@ -53,21 +59,11 @@ export function useDocumentDownload({
       // 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 via /documents/{id}/pdf
-      // Don't send locale — entity locale drives formatting. Send language for translation override.
-      const params = language ? { language } : {};
-      const blob = await sdk.invoices.renderPdf(document.id, params, { entity_id: activeEntity.id });
-      const downloadUrl = window.URL.createObjectURL(blob);
-      const link = window.document.createElement("a");
-      link.href = downloadUrl;
-
+      const params = locale ? { locale, language: locale } : {};
       const typeLabel = TYPE_LABELS[documentType] || "Document";
       const fileName = `${typeLabel} ${document.number}.pdf`;
-      link.download = fileName;
 
-      window.document.body.appendChild(link);
-      link.click();
-      window.document.body.removeChild(link);
-      window.URL.revokeObjectURL(downloadUrl);
+      await sdk.invoices.downloadPdf(document.id, fileName, params, { entity_id: activeEntity.id });
 
       onDownloadSuccess?.(fileName);
     } catch (error) {
@@ -106,14 +102,7 @@ export function useDocumentDownload({
       const xml = await eSlogModule.download(document.id, typeMap[documentType], { entity_id: activeEntity.id });
 
       const blob = new Blob([xml], { type: "application/xml" });
-      const url = window.URL.createObjectURL(blob);
-      const a = window.document.createElement("a");
-      a.href = url;
-      a.download = `${document.number}.xml`;
-      window.document.body.appendChild(a);
-      a.click();
-      window.URL.revokeObjectURL(url);
-      window.document.body.removeChild(a);
+      downloadBlob(blob, `${document.number}.xml`);
     } catch (error) {
       console.error("Error downloading e-SLOG:", error);
       onDownloadError?.("e-SLOG download failed");

package/src/components/entities/create-entity-form.tsx

@@ -10,6 +10,7 @@ import { Button } from "@/ui/components/ui/button";
 import { Checkbox } from "@/ui/components/ui/checkbox";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/ui/components/ui/form";
 import { type CreateEntitySchema, createEntitySchema } from "@/ui/generated/schemas";
+import { createTranslation } from "@/ui/lib/translation";
 
 import ButtonLoader from "../button-loader";
 import { useCreateEntity } from "./entities.hooks";
@@ -27,10 +28,85 @@ export type CreateEntityFormProps = {
   onError?: (error: unknown) => void;
 };
 
-const defaultTranslate = (text: string) => text;
+const translations = {
+  en: {
+    name: "Name",
+    "search-hint": "Search companies by name",
+    "no-results": "No companies found",
+    country: "Country",
+    address: "Address",
+    "address-2": "Address 2",
+    "post-code": "Post Code",
+    city: "City",
+    state: "State",
+    "tax-number": "Tax Number",
+    "is-tax-subject": "Tax subject",
+    "company-number": "Company Number",
+    submit: "Create entity",
+  },
+} as const;
+
+const ISO_COUNTRY_CODES = [
+  "AD", "AE", "AF", "AG", "AL", "AM", "AO", "AR", "AT", "AU", "AZ", "BA", "BB", "BD", "BE", "BF", "BG", "BH", "BI",
+  "BJ", "BN", "BO", "BR", "BS", "BT", "BW", "BY", "BZ", "CA", "CD", "CF", "CG", "CH", "CI", "CL", "CM", "CN", "CO",
+  "CR", "CU", "CV", "CY", "CZ", "DE", "DJ", "DK", "DM", "DO", "DZ", "EC", "EE", "EG", "ER", "ES", "ET", "FI", "FJ",
+  "FM", "FR", "GA", "GB", "GD", "GE", "GH", "GM", "GN", "GQ", "GR", "GT", "GW", "GY", "HK", "HN", "HR", "HT", "HU",
+  "ID", "IE", "IL", "IN", "IQ", "IR", "IS", "IT", "JM", "JO", "JP", "KE", "KG", "KH", "KI", "KM", "KN", "KP", "KR",
+  "KW", "KZ", "LA", "LB", "LC", "LI", "LK", "LR", "LS", "LT", "LU", "LV", "LY", "MA", "MC", "MD", "ME", "MG", "MH",
+  "MK", "ML", "MM", "MN", "MR", "MT", "MU", "MV", "MW", "MX", "MY", "MZ", "NA", "NE", "NG", "NI", "NL", "NO", "NP",
+  "NR", "NZ", "OM", "PA", "PE", "PG", "PH", "PK", "PL", "PT", "PW", "PY", "QA", "RO", "RS", "RU", "RW", "SA", "SB",
+  "SC", "SD", "SE", "SG", "SI", "SK", "SL", "SM", "SN", "SO", "SR", "SS", "ST", "SV", "SY", "SZ", "TD", "TG", "TH",
+  "TJ", "TL", "TM", "TN", "TO", "TR", "TT", "TV", "TW", "TZ", "UA", "UG", "US", "UY", "UZ", "VA", "VC", "VE", "VN",
+  "VU", "WS", "XK", "YE", "ZA", "ZM", "ZW",
+] as const;
+
+const COUNTRY_CODE_ALIASES: Record<string, string> = {
+  uk: "GB",
+  "u.k.": "GB",
+  usa: "US",
+  "u.s.": "US",
+  "u.s.a.": "US",
+};
+
+function normalizeCountryName(value: string): string {
+  return value
+    .normalize("NFKD")
+    .replace(/\p{Diacritic}/gu, "")
+    .replace(/[.'’]/g, "")
+    .replace(/\s+/g, " ")
+    .trim()
+    .toLowerCase();
+}
+
+function resolveCountryCodeFromName(value: string | undefined, locale: string): string | undefined {
+  const trimmed = value?.trim();
+  if (!trimmed) return undefined;
+
+  const alias = COUNTRY_CODE_ALIASES[normalizeCountryName(trimmed)];
+  if (alias) return alias;
+
+  const upper = trimmed.toUpperCase();
+  if (upper.length === 2 && ISO_COUNTRY_CODES.includes(upper as (typeof ISO_COUNTRY_CODES)[number])) {
+    return upper;
+  }
+
+  const localesToTry = Array.from(new Set([locale, "en", "en-US"]));
+
+  for (const candidateLocale of localesToTry) {
+    const displayNames = new Intl.DisplayNames([candidateLocale], { type: "region" });
+    for (const code of ISO_COUNTRY_CODES) {
+      const label = displayNames.of(code);
+      if (label && normalizeCountryName(label) === normalizeCountryName(trimmed)) {
+        return code;
+      }
+    }
+  }
+
+  return undefined;
+}
 
 export function CreateEntityForm({
-  t = defaultTranslate,
+  t,
   namespace = "",
   accountId,
   environment,
@@ -41,7 +117,7 @@ export function CreateEntityForm({
   onSuccess,
   onError,
 }: CreateEntityFormProps) {
-  const translate = (key: string) => t(namespace ? `${namespace}.${key}` : key);
+  const translate = createTranslation({ t, namespace, locale, translations });
 
   const countryName = countryCode ? new Intl.DisplayNames([locale], { type: "region" }).of(countryCode) : undefined;
 
@@ -50,12 +126,13 @@ export function CreateEntityForm({
   const autoFilledCountryRef = useRef(countryName);
 
   // Company registry autocomplete state
+  // showAutocomplete is based on the initial countryCode prop to avoid component switch mid-typing
   const [nameSearch, setNameSearch] = useState("");
-  const { isSupported: isRegistrySupported } = useIsCountrySupported(activeCountryCode || "");
+  const { isSupported: isRegistrySupported } = useIsCountrySupported(countryCode || "");
   const { data: searchData, isLoading: isSearching } = useCompanyRegistrySearch(activeCountryCode || "", nameSearch);
   const companies = searchData?.data || [];
 
-  const showAutocomplete = !!activeCountryCode && isRegistrySupported;
+  const showAutocomplete = !!countryCode && isRegistrySupported;
 
   const nameOptions = companies.map((company) => {
     const addressParts = [company.address, company.city].filter(Boolean);
@@ -97,13 +174,14 @@ export function CreateEntityForm({
   // Watch country field — clear activeCountryCode when user edits away from auto-filled value
   const countryValue = form.watch("country");
   useEffect(() => {
-    if (countryValue !== autoFilledCountryRef.current) {
-      setActiveCountryCode(undefined);
-      form.setValue("country_code", "");
-    } else {
-      setActiveCountryCode(countryCode);
-    }
-  }, [countryValue, countryCode, form]);
+    const nextCountryCode =
+      countryValue === autoFilledCountryRef.current
+        ? countryCode
+        : resolveCountryCodeFromName(countryValue, locale) || undefined;
+
+    setActiveCountryCode(nextCountryCode);
+    form.setValue("country_code", nextCountryCode || "");
+  }, [countryValue, countryCode, form, locale]);
 
   const handleCompanySelect = (company: CompanyRegistryResult) => {
     form.setValue("name", company.name);
@@ -133,9 +211,10 @@ export function CreateEntityForm({
 
   const onSubmit = async (values: CreateEntitySchema) => {
     try {
-      // Zod validation ensures required fields are present before this is called
-      // The type cast is safe because React Hook Form's DeepPartial doesn't reflect runtime validation
-      createEntity(values as CreateEntityRequest);
+      const resolvedCountryCode = values.country_code || resolveCountryCodeFromName(values.country, locale);
+      const { country_code: _countryCode, ...rest } = values;
+      const payload = resolvedCountryCode ? { ...rest, country_code: resolvedCountryCode } : rest;
+      createEntity(payload as CreateEntityRequest);
     } catch (e) {
       onError?.(e);
       form.setError("root", {
@@ -259,7 +338,13 @@ export function CreateEntityForm({
           placeholder={translate("company-number")}
         />
 
-        <Button type="submit" className="w-full cursor-pointer" disabled={isPending} aria-busy={isPending}>
+        <Button
+          type="submit"
+          className="w-full cursor-pointer"
+          disabled={isPending}
+          aria-busy={isPending}
+          data-testid="entity-create-submit"
+        >
           {isPending ? <ButtonLoader /> : translate("submit")}
         </Button>
       </form>

package/src/components/entities/fina-settings-form/fina-operator-required-dialog.tsx

@@ -40,18 +40,18 @@ export const FinaOperatorRequiredDialog: FC<FinaOperatorRequiredDialogProps> = (
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     e.stopPropagation();
-    if (!operatorOib || !operatorLabel) return;
+    if (!operatorOib) return;
     updateUserSettings({
       entityId,
       data: {
         operator_oib: operatorOib,
-        operator_label: operatorLabel,
+        operator_label: operatorLabel || undefined,
       },
     });
   };
 
   const oibError = operatorOib !== "" && !/^\d{11}$/.test(operatorOib);
-  const isValid = /^\d{11}$/.test(operatorOib) && operatorLabel.trim() !== "";
+  const isValid = /^\d{11}$/.test(operatorOib);
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>

package/src/components/entities/fina-settings-form/fina-settings-form.tsx

@@ -1,5 +1,5 @@
 import { AlertCircle, AlertTriangle, Building2, CheckCircle2, ChevronRight, Info, User } from "lucide-react";
-import { type FC, type ReactNode, useCallback, useEffect, useState } from "react";
+import { type FC, type ReactNode, useEffect, useState } from "react";
 import { useUpdateEntity } from "@/ui/components/entities/entities.hooks";
 import { Alert, AlertDescription, AlertTitle } from "@/ui/components/ui/alert";
 import { Button } from "@/ui/components/ui/button";
@@ -9,11 +9,11 @@ import { PageLoadingSpinner } from "@/ui/components/ui/loading-spinner";
 import { RadioGroup, RadioGroupItem } from "@/ui/components/ui/radio-group";
 import { Separator } from "@/ui/components/ui/separator";
 import { Switch } from "@/ui/components/ui/switch";
-import { Tabs, TabsList, TabsTrigger } from "@/ui/components/ui/tabs";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/ui/components/ui/tooltip";
 import type { ComponentTranslationProps } from "@/ui/lib/translation";
 import { createTranslation } from "@/ui/lib/translation";
 import { cn } from "@/ui/lib/utils";
+import { type FiscalizationStepConfig, useFiscalizationStepFlow } from "../shared/fiscalization-step-flow";
+import { FiscalizationStepTabs } from "../shared/fiscalization-step-tabs";
 import {
   useFinaPremises,
   useFinaSettings,
@@ -82,9 +82,6 @@ export const FinaSettingsForm: FC<FinaSettingsFormProps> = ({
   renderSection,
   hideUserOperatorSection,
 }) => {
-  const [activeStep, setActiveStep] = useState<FinaStepType>(initialStep);
-  const [hasInitializedStep, setHasInitializedStep] = useState(false);
-
   const translate = createTranslation({
     t: translateFn,
     namespace,
@@ -92,14 +89,6 @@ export const FinaSettingsForm: FC<FinaSettingsFormProps> = ({
     translations,
   });
 
-  const handleStepChange = useCallback(
-    (newStep: FinaStepType) => {
-      setActiveStep(newStep);
-      onStepChange?.(newStep);
-    },
-    [onStepChange],
-  );
-
   // Entity info state
   const [entityTaxNumber, setEntityTaxNumber] = useState("");
   const [entityAddress, setEntityAddress] = useState("");
@@ -201,10 +190,9 @@ export const FinaSettingsForm: FC<FinaSettingsFormProps> = ({
   // Determine completion status
   const hasEntityTaxNumber = !!entity.tax_number;
   // Operator OIB is required by CIS protocol (minOccurs="1" in FiskalizacijaSchema.xsd)
-  // Can come from user settings or entity-level FINA settings
-  const hasOperatorSettings =
-    (!!userFinaSettings?.operator_oib && !!userFinaSettings?.operator_label) ||
-    (!!finaSettings?.operator_oib && !!finaSettings?.operator_label);
+  // Can come from user settings or entity-level FINA settings.
+  // operator_label is optional metadata and must not block setup.
+  const hasOperatorSettings = !!userFinaSettings?.operator_oib || !!finaSettings?.operator_oib;
   const hasCertificate = finaSettings?.has_certificate || false;
   const certificateValid = finaSettings?.certificate_status === "valid";
   const hasPremises = (premises?.length || 0) > 0;
@@ -217,7 +205,7 @@ export const FinaSettingsForm: FC<FinaSettingsFormProps> = ({
   const canAccessEnable =
     hasEntityTaxNumber && hasOperatorSettings && certificateValid && hasPremises && hasPremiseWithDevice;
 
-  const steps = [
+  const steps: FiscalizationStepConfig<FinaStepType>[] = [
     {
       id: "settings" as const,
       title: translate("General Settings"),
@@ -233,14 +221,14 @@ export const FinaSettingsForm: FC<FinaSettingsFormProps> = ({
     {
       id: "premises" as const,
       title: translate("Business Premises"),
-      complete: !!hasPremiseWithDevice,
-      unlocked: canAccessPremises,
+      complete: Boolean(hasPremiseWithDevice),
+      unlocked: Boolean(canAccessPremises),
     },
     {
       id: "enable" as const,
       title: translate("Enable Fiscalization"),
-      complete: finaEnabled,
-      unlocked: canAccessEnable,
+      complete: Boolean(finaEnabled),
+      unlocked: Boolean(canAccessEnable),
     },
   ];
 
@@ -255,27 +243,13 @@ export const FinaSettingsForm: FC<FinaSettingsFormProps> = ({
     return "settings";
   };
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: Intentionally run only when data loads
-  useEffect(() => {
-    if (!hasInitializedStep && !settingsLoading && !premisesLoading) {
-      const smartStep = getDefaultStep();
-      if (smartStep !== activeStep) {
-        handleStepChange(smartStep);
-      }
-      setHasInitializedStep(true);
-    }
-  }, [settingsLoading, premisesLoading, hasInitializedStep]);
-
-  // biome-ignore lint/correctness/useExhaustiveDependencies: steps is recreated on each render but values are stable
-  useEffect(() => {
-    const currentStepInfo = steps.find((s) => s.id === activeStep);
-    if (currentStepInfo && !currentStepInfo.unlocked) {
-      const firstUnlockedStep = steps.find((s) => s.unlocked);
-      if (firstUnlockedStep) {
-        handleStepChange(firstUnlockedStep.id);
-      }
-    }
-  }, [activeStep, handleStepChange]);
+  const { activeStep, handleStepChange } = useFiscalizationStepFlow({
+    initialStep,
+    isReady: !settingsLoading && !premisesLoading,
+    steps,
+    getDefaultStep,
+    onStepChange,
+  });
 
   if (entity.country_code !== "HR") {
     return (
@@ -322,82 +296,39 @@ export const FinaSettingsForm: FC<FinaSettingsFormProps> = ({
     return content;
   };
 
-  const tabsNavigation = (
-    <div className="grid items-start gap-6 lg:grid-cols-[1fr_280px]">
-      <Tabs value={activeStep} onValueChange={(value) => handleStepChange(value as FinaStepType)} className="w-full">
-        <TabsList className="grid w-full grid-cols-4 rounded-none p-0">
-          {steps.map((step, index) => {
-            const isLocked = !step.unlocked;
-            let tooltipText = "";
-            if (isLocked) {
-              if (step.id === "certificate") {
-                if (!hasEntityTaxNumber) {
-                  tooltipText = translate("Set entity OIB in General Settings first");
-                } else {
-                  tooltipText = translate("Set operator OIB and label in General Settings first");
-                }
-              } else if (step.id === "premises") {
-                if (!hasEntityTaxNumber) {
-                  tooltipText = translate("Set entity OIB in General Settings first");
-                } else if (!hasOperatorSettings) {
-                  tooltipText = translate("Set operator OIB and label in General Settings first");
-                } else {
-                  tooltipText = translate("Upload and validate digital certificate first");
-                }
-              } else if (step.id === "enable") {
-                if (!hasEntityTaxNumber || !hasOperatorSettings) {
-                  tooltipText = translate("Complete General Settings first");
-                } else if (!certificateValid) {
-                  tooltipText = translate("Upload and validate digital certificate first");
-                } else if (!hasPremises) {
-                  tooltipText = translate("Register at least one business premise first");
-                } else {
-                  tooltipText = translate("Register at least one electronic device first");
-                }
-              }
-            }
-
-            const trigger = (
-              <TabsTrigger
-                value={step.id}
-                disabled={isLocked}
-                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>{tooltipText}</p>
-                  </TooltipContent>
-                </Tooltip>
-              );
-            }
-
-            return (
-              <span key={step.id} className="flex justify-center">
-                {trigger}
-              </span>
-            );
-          })}
-        </TabsList>
-      </Tabs>
-      <div className="hidden lg:block" />
-    </div>
-  );
+  const getStepTooltipText = (step: (typeof steps)[number]) => {
+    if (step.id === "certificate") {
+      if (!hasEntityTaxNumber) {
+        return translate("Set entity OIB in General Settings first");
+      }
+      return translate("Set operator OIB in General Settings first");
+    }
+
+    if (step.id === "premises") {
+      if (!hasEntityTaxNumber) {
+        return translate("Set entity OIB in General Settings first");
+      }
+      if (!hasOperatorSettings) {
+        return translate("Set operator OIB in General Settings first");
+      }
+      return translate("Upload and validate digital certificate first");
+    }
+
+    if (step.id === "enable") {
+      if (!hasEntityTaxNumber || !hasOperatorSettings) {
+        return translate("Complete General Settings first");
+      }
+      if (!certificateValid) {
+        return translate("Upload and validate digital certificate first");
+      }
+      if (!hasPremises) {
+        return translate("Register at least one business premise first");
+      }
+      return translate("Register at least one electronic device first");
+    }
+
+    return "";
+  };
 
   return (
     <div className="space-y-6">
@@ -416,7 +347,13 @@ export const FinaSettingsForm: FC<FinaSettingsFormProps> = ({
         </div>
       )}
 
-      {tabsNavigation}
+      <FiscalizationStepTabs
+        activeStep={activeStep}
+        steps={steps}
+        onStepChange={handleStepChange}
+        getTooltipText={getStepTooltipText}
+        testIdPrefix="fina-tab"
+      />
 
       {/* Settings step */}
       {activeStep === "settings" && (
@@ -503,6 +440,7 @@ export const FinaSettingsForm: FC<FinaSettingsFormProps> = ({
                   onClick={handleSaveEntityInfo}
                   disabled={isEntityUpdatePending}
                   className="cursor-pointer"
+                  data-testid="fina-entity-info-save"
                 >
                   {isEntityUpdatePending ? translate("Saving...") : translate("Save Entity Info")}
                 </Button>
@@ -568,7 +506,11 @@ export const FinaSettingsForm: FC<FinaSettingsFormProps> = ({
           )}
 
           <div className="grid items-start gap-6 lg:grid-cols-[1fr_280px]">
-            <Button onClick={handleSaveSettings} disabled={isPending || !!operatorOibError}>
+            <Button
+              onClick={handleSaveSettings}
+              disabled={isPending || !!operatorOibError}
+              data-testid="fina-settings-save"
+            >
               {isPending ? translate("Saving...") : translate("Save Settings")}
             </Button>
             <div className="hidden lg:block" />
@@ -594,7 +536,7 @@ export const FinaSettingsForm: FC<FinaSettingsFormProps> = ({
                     </div>
                   </div>
 
-                  {(!userFinaSettings?.operator_oib || !userFinaSettings?.operator_label) && (
+                  {!userFinaSettings?.operator_oib && (
                     <Alert variant="destructive">
                       <AlertTriangle className="h-4 w-4" />
                       <AlertDescription>
@@ -617,6 +559,7 @@ export const FinaSettingsForm: FC<FinaSettingsFormProps> = ({
                         className={cn("mt-1", userOperatorOibError && "border-destructive")}
                         maxLength={11}
                         disabled={userSettingsLoading}
+                        data-testid="fina-user-operator-oib-input"
                       />
                       {userOperatorOibError && <p className="mt-1 text-destructive text-xs">{userOperatorOibError}</p>}
                     </div>
@@ -629,6 +572,7 @@ export const FinaSettingsForm: FC<FinaSettingsFormProps> = ({
                         placeholder={translate("e.g. Cashier 1")}
                         className="mt-1"
                         disabled={userSettingsLoading}
+                        data-testid="fina-user-operator-label-input"
                       />
                     </div>
 
@@ -637,6 +581,7 @@ export const FinaSettingsForm: FC<FinaSettingsFormProps> = ({
                       onClick={handleSaveUserSettings}
                       disabled={isUserSettingsPending || userSettingsLoading || !!userOperatorOibError}
                       className="cursor-pointer"
+                      data-testid="fina-operator-settings-save"
                     >
                       {isUserSettingsPending ? translate("Saving...") : translate("Save Operator Settings")}
                     </Button>
@@ -656,6 +601,7 @@ export const FinaSettingsForm: FC<FinaSettingsFormProps> = ({
                 type="button"
                 onClick={() => setIsAdvancedOpen(!isAdvancedOpen)}
                 className="flex w-full items-center gap-2 py-2 text-muted-foreground hover:text-foreground"
+                data-testid="fina-advanced-toggle"
               >
                 <ChevronRight className={cn("h-4 w-4 transition-transform", isAdvancedOpen && "rotate-90")} />
                 <span className="font-medium text-sm">{translate("Advanced Settings")}</span>
@@ -683,6 +629,7 @@ export const FinaSettingsForm: FC<FinaSettingsFormProps> = ({
                           placeholder={translate("OIB of the operator (11 digits)")}
                           className={cn("mt-1", operatorOibError && "border-destructive")}
                           maxLength={11}
+                          data-testid="fina-api-operator-oib-input"
                         />
                         {operatorOibError && <p className="mt-1 text-destructive text-xs">{operatorOibError}</p>}
                         <p className="mt-1 text-muted-foreground text-xs">
@@ -697,6 +644,7 @@ export const FinaSettingsForm: FC<FinaSettingsFormProps> = ({
                           onChange={(e) => setFormData((prev) => ({ ...prev, operator_label: e.target.value }))}
                           placeholder="API Default"
                           className="mt-1"
+                          data-testid="fina-api-operator-label-input"
                         />
                         <p className="mt-1 text-muted-foreground text-xs">
                           {translate("Operator label for API key usage (optional)")}
@@ -704,7 +652,12 @@ export const FinaSettingsForm: FC<FinaSettingsFormProps> = ({
                       </div>
                     </div>
 
-                    <Button onClick={handleSaveSettings} disabled={isPending || !!operatorOibError} size="sm">
+                    <Button
+                      onClick={handleSaveSettings}
+                      disabled={isPending || !!operatorOibError}
+                      size="sm"
+                      data-testid="fina-advanced-settings-save"
+                    >
                       {isPending ? translate("Saving...") : translate("Save Settings")}
                     </Button>
                   </div>
@@ -791,6 +744,7 @@ export const FinaSettingsForm: FC<FinaSettingsFormProps> = ({
                           : { enabled: false },
                       });
                     }}
+                    data-testid="fina-enable-switch"
                   />
                   <Label>{translate("Enable FINA Fiscalization")}</Label>
                 </div>