@spaceinvoices/react-ui 0.4.8 → 0.4.10

package/src/components/entities/fina-settings-form/sections/certificate-settings-section.tsx

@@ -145,7 +145,11 @@ export const CertificateSettingsSection: FC<CertificateSettingsSectionProps> = (
       <div className="space-y-6">
         {hasCertificate && (
           <div className="space-y-4">
-            <Alert variant={currentStatus.variant}>
+            <Alert
+              variant={currentStatus.variant}
+              data-testid="fina-certificate-status"
+              data-status={finaSettings?.certificate_status || "unknown"}
+            >
               <StatusIcon className={cn("h-4 w-4", currentStatus.iconColor)} />
               <AlertTitle>Certificate Status: {currentStatus.label}</AlertTitle>
               <AlertDescription className="space-y-2">
@@ -193,6 +197,7 @@ export const CertificateSettingsSection: FC<CertificateSettingsSectionProps> = (
                   onChange={handleFileChange}
                   disabled={isPending}
                   className="flex-1"
+                  data-testid="fina-certificate-file-input"
                 />
                 {certificateFile && <CheckCircle2 className="h-5 w-5 text-green-500" />}
               </div>
@@ -212,6 +217,7 @@ export const CertificateSettingsSection: FC<CertificateSettingsSectionProps> = (
                 onChange={(e) => setPassphrase(e.target.value)}
                 disabled={isPending}
                 placeholder={t("Enter certificate passphrase")}
+                data-testid="fina-certificate-passphrase-input"
               />
             </div>
 
@@ -236,6 +242,7 @@ export const CertificateSettingsSection: FC<CertificateSettingsSectionProps> = (
                 onClick={handleUpload}
                 disabled={!certificateFile || !passphrase || isPending}
                 className={cn(hasCertificate && showUploadForm ? "flex-1" : "w-full", "cursor-pointer")}
+                data-testid="fina-certificate-upload-submit"
               >
                 <Upload className="mr-2 h-4 w-4" />
                 {isPending ? t("Loading...") : hasCertificate ? t("Upload New Certificate") : t("Upload Certificate")}

package/src/components/entities/fina-settings-form/sections/premises-management-section.tsx

@@ -151,7 +151,12 @@ export const PremisesManagementSection: FC<PremisesManagementSectionProps> = ({
         </Alert>
 
         {/* Add Premise Button */}
-        <Button onClick={() => setRegisterDialogOpen(true)} variant="default" className="cursor-pointer">
+        <Button
+          onClick={() => setRegisterDialogOpen(true)}
+          variant="default"
+          className="cursor-pointer"
+          data-testid="fina-add-premise"
+        >
           <Building2 className="mr-2 h-4 w-4" />
           {t("Add Premise")}
         </Button>
@@ -189,7 +194,11 @@ export const PremisesManagementSection: FC<PremisesManagementSectionProps> = ({
                           </Button>
                         </DropdownMenuTrigger>
                         <DropdownMenuContent align="end">
-                          <DropdownMenuItem onClick={() => handleAddDevice(premise.id)} className="cursor-pointer">
+                          <DropdownMenuItem
+                            onClick={() => handleAddDevice(premise.id)}
+                            className="cursor-pointer"
+                            data-testid={`fina-add-device-${premise.business_premise_name}`}
+                          >
                             <Cpu className="mr-2 h-4 w-4" />
                             {t("Add Electronic Device")}
                           </DropdownMenuItem>
@@ -245,6 +254,7 @@ export const PremisesManagementSection: FC<PremisesManagementSectionProps> = ({
                             variant="outline"
                             onClick={() => handleAddDevice(premise.id)}
                             className="cursor-pointer"
+                            data-testid={`fina-add-device-${premise.business_premise_name}`}
                           >
                             <Cpu className="mr-2 h-4 w-4" />
                             {t("Add Electronic Device")}
@@ -307,6 +317,7 @@ export const PremisesManagementSection: FC<PremisesManagementSectionProps> = ({
                       handleRegisterDevice();
                     }
                   }}
+                  data-testid="fina-device-id-input"
                 />
               </div>
             </div>
@@ -324,6 +335,7 @@ export const PremisesManagementSection: FC<PremisesManagementSectionProps> = ({
                 onClick={handleRegisterDevice}
                 disabled={!deviceId.trim() || isRegisteringDevice}
                 className="cursor-pointer"
+                data-testid="fina-register-device-submit"
               >
                 {isRegisteringDevice ? t("Registering...") : t("Register Device")}
               </Button>

package/src/components/entities/fina-settings-form/sections/register-premise-dialog.tsx

@@ -93,7 +93,7 @@ export const RegisterFinaPremiseDialog: FC<RegisterFinaPremiseDialogProps> = ({
                 <FormItem>
                   <FormLabel>{t("Premise ID")}</FormLabel>
                   <FormControl>
-                    <Input placeholder="PP1" {...field} />
+                    <Input placeholder="PP1" {...field} data-testid="fina-premise-name-input" />
                   </FormControl>
                   <FormDescription>{t("Unique identifier for this premise (e.g., PP1, OFFICE1)")}</FormDescription>
                   <FormMessage />
@@ -111,7 +111,12 @@ export const RegisterFinaPremiseDialog: FC<RegisterFinaPremiseDialogProps> = ({
               >
                 {t("Cancel")}
               </Button>
-              <Button type="submit" disabled={isPending} className="cursor-pointer">
+              <Button
+                type="submit"
+                disabled={isPending}
+                className="cursor-pointer"
+                data-testid="fina-register-premise-submit"
+              >
                 {isPending ? t("Adding...") : t("Add Premise")}
               </Button>
             </DialogFooter>

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

@@ -1,19 +1,18 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import type { Entity } from "@spaceinvoices/js-sdk";
-import { AlertCircle, CheckCircle2, Info } from "lucide-react";
-import { type FC, type ReactNode, useCallback, useEffect, useState } from "react";
+import { AlertCircle, Info } from "lucide-react";
+import type { FC, ReactNode } from "react";
 import { useForm } from "react-hook-form";
 import type { z } from "zod";
 import { Alert, AlertDescription, AlertTitle } from "@/ui/components/ui/alert";
 import { Form } from "@/ui/components/ui/form";
 import { PageLoadingSpinner } from "@/ui/components/ui/loading-spinner";
-import { Tabs, TabsList, TabsTrigger } from "@/ui/components/ui/tabs";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/ui/components/ui/tooltip";
 import { updateFursSettingsSchema } from "@/ui/generated/schemas";
 import type { ComponentTranslationProps } from "@/ui/lib/translation";
 import { createTranslation } from "@/ui/lib/translation";
-import { cn } from "@/ui/lib/utils";
 import { useFormFooterRegistration } from "@/ui/providers/form-footer-context";
+import { type FiscalizationStepConfig, useFiscalizationStepFlow } from "../shared/fiscalization-step-flow";
+import { FiscalizationStepTabs } from "../shared/fiscalization-step-tabs";
 import { useFursPremises, useFursSettings, useUpdateFursSettings, useUserFursSettings } from "./furs-settings.hooks";
 // Import locale files
 import de from "./locales/de";
@@ -99,10 +98,6 @@ export const FursSettingsForm: FC<FursSettingsFormProps> = ({
   renderSection,
   hideUserOperatorSection,
 }) => {
-  // Step navigation state (can be controlled via props for URL sync)
-  const [activeStep, setActiveStep] = useState<StepType>(initialStep);
-  const [hasInitializedStep, setHasInitializedStep] = useState(false);
-
   // Create a guaranteed translation function using the createTranslation utility
   const translate = createTranslation({
     t: translateFn,
@@ -111,15 +106,6 @@ export const FursSettingsForm: FC<FursSettingsFormProps> = ({
     translations,
   });
 
-  // Handle step changes
-  const handleStepChange = useCallback(
-    (newStep: StepType) => {
-      setActiveStep(newStep);
-      onStepChange?.(newStep); // Notify parent (e.g., for URL updates)
-    },
-    [onStepChange],
-  );
-
   // Fetch FURS settings and premises
   const { data: fursSettings, isLoading: settingsLoading } = useFursSettings(entity.id);
   const { data: premises, isLoading: premisesLoading } = useFursPremises(entity.id);
@@ -178,7 +164,7 @@ export const FursSettingsForm: FC<FursSettingsFormProps> = ({
   const canAccessEnable =
     hasEntityTaxNumber && hasOperatorSettings && certificateValid && hasPremises && hasPremiseWithDevice;
 
-  const steps = [
+  const steps: FiscalizationStepConfig<StepType>[] = [
     {
       id: "settings" as const,
       title: translate("General Settings"),
@@ -194,14 +180,14 @@ export const FursSettingsForm: FC<FursSettingsFormProps> = ({
     {
       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: fursEnabled,
-      unlocked: canAccessEnable,
+      complete: Boolean(fursEnabled),
+      unlocked: Boolean(canAccessEnable),
     },
   ];
 
@@ -222,30 +208,13 @@ export const FursSettingsForm: FC<FursSettingsFormProps> = ({
     return "settings";
   };
 
-  // Smart initial step selection on first load (when data is ready)
-  // biome-ignore lint/correctness/useExhaustiveDependencies: Intentionally run only when data loads, not on every dep change
-  useEffect(() => {
-    if (!hasInitializedStep && !settingsLoading && !premisesLoading) {
-      const smartStep = getDefaultStep();
-      if (smartStep !== activeStep) {
-        handleStepChange(smartStep);
-      }
-      setHasInitializedStep(true);
-    }
-  }, [settingsLoading, premisesLoading, hasInitializedStep]);
-
-  // Validate step and redirect if current step becomes locked
-  // 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) {
-      // If current step is locked, redirect to first unlocked step
-      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,
+  });
 
   // Check if entity is Slovenian
   if (entity.country_code !== "SI") {
@@ -274,88 +243,39 @@ export const FursSettingsForm: FC<FursSettingsFormProps> = ({
   // Check if entity is in sandbox (test) mode
   const isSandboxMode = entity.environment === "sandbox";
 
-  // Shared tabs navigation component - in left column only
-  const tabsNavigation = (
-    <div className="grid items-start gap-6 lg:grid-cols-[1fr_280px]">
-      <Tabs
-        value={activeStep}
-        onValueChange={(value) => handleStepChange(value as typeof activeStep)}
-        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 tax number in General Settings first");
-                } else {
-                  tooltipText = translate("Set operator tax number and label in General Settings first");
-                }
-              } else if (step.id === "premises") {
-                if (!hasEntityTaxNumber) {
-                  tooltipText = translate("Set entity tax number in General Settings first");
-                } else if (!hasOperatorSettings) {
-                  tooltipText = translate("Set operator tax number 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 tax number in General Settings first");
+      }
+      return translate("Set operator tax number and label in General Settings first");
+    }
+
+    if (step.id === "premises") {
+      if (!hasEntityTaxNumber) {
+        return translate("Set entity tax number in General Settings first");
+      }
+      if (!hasOperatorSettings) {
+        return translate("Set operator tax number and label 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 "";
+  };
 
   // Helper to wrap section content with render prop if provided
   const wrapSection = (section: SectionType, content: ReactNode) => {
@@ -385,7 +305,13 @@ export const FursSettingsForm: FC<FursSettingsFormProps> = ({
         )}
 
         {/* Tabs navigation */}
-        {tabsNavigation}
+        <FiscalizationStepTabs
+          activeStep={activeStep}
+          steps={steps}
+          onStepChange={handleStepChange}
+          getTooltipText={getStepTooltipText}
+          testIdPrefix="furs-tab"
+        />
 
         {/* Step content - each section wrapped with its own help */}
         {activeStep === "settings" && (

package/src/components/entities/furs-settings-form/sections/certificate-settings-section.tsx

@@ -171,7 +171,11 @@ export const CertificateSettingsSection: FC<CertificateSettingsSectionProps> = (
         {/* Certificate Status - Show when certificate exists */}
         {hasCertificate && (
           <div className="space-y-4">
-            <Alert variant={currentStatus.variant}>
+            <Alert
+              variant={currentStatus.variant}
+              data-testid="furs-certificate-status"
+              data-status={fursSettings?.certificate_status || "unknown"}
+            >
               <StatusIcon className={cn("h-4 w-4", currentStatus.iconColor)} />
               <AlertTitle>Certificate Status: {currentStatus.label}</AlertTitle>
               <AlertDescription className="space-y-2">
@@ -221,6 +225,7 @@ export const CertificateSettingsSection: FC<CertificateSettingsSectionProps> = (
                   onChange={handleFileChange}
                   disabled={isPending}
                   className="flex-1"
+                  data-testid="furs-certificate-file-input"
                 />
                 {certificateFile && <CheckCircle2 className="h-5 w-5 text-green-500" />}
               </div>
@@ -240,6 +245,7 @@ export const CertificateSettingsSection: FC<CertificateSettingsSectionProps> = (
                 onChange={(e) => setPassphrase(e.target.value)}
                 disabled={isPending}
                 placeholder={t("Enter certificate passphrase")}
+                data-testid="furs-certificate-passphrase-input"
               />
             </div>
 
@@ -264,6 +270,7 @@ export const CertificateSettingsSection: FC<CertificateSettingsSectionProps> = (
                 onClick={handleUpload}
                 disabled={!certificateFile || !passphrase || isPending}
                 className={cn(hasCertificate && showUploadForm ? "flex-1" : "w-full", "cursor-pointer")}
+                data-testid="furs-certificate-upload-submit"
               >
                 <Upload className="mr-2 h-4 w-4" />
                 {isPending ? t("Loading...") : hasCertificate ? t("Upload New Certificate") : t("Upload Certificate")}

package/src/components/entities/furs-settings-form/sections/enable-fiscalization-section.tsx

@@ -116,6 +116,7 @@ export const EnableFiscalizationSection: FC<EnableFiscalizationSectionProps> = (
                   onCheckedChange={field.onChange}
                   disabled={!allPrerequisitesMet && !field.value}
                   className="cursor-pointer"
+                  data-testid="furs-enable-switch"
                 />
               </FormControl>
             </FormItem>

package/src/components/entities/furs-settings-form/sections/general-settings-section.tsx

@@ -175,6 +175,7 @@ export const GeneralSettingsSection: FC<GeneralSettingsSectionProps> = ({
           onClick={handleSaveEntityInfo}
           disabled={isEntityUpdatePending}
           className="cursor-pointer"
+          data-testid="furs-entity-info-save"
         >
           {isEntityUpdatePending ? t("Saving...") : t("Save Entity Info")}
         </Button>
@@ -240,6 +241,7 @@ export const GeneralSettingsSection: FC<GeneralSettingsSectionProps> = ({
           onClick={handleSaveUserSettings}
           disabled={isUserSettingsPending || userSettingsLoading}
           className="cursor-pointer"
+          data-testid="furs-operator-settings-save"
         >
           {isUserSettingsPending ? t("Saving...") : t("Save Operator Settings")}
         </Button>
@@ -320,6 +322,7 @@ export const GeneralSettingsSection: FC<GeneralSettingsSectionProps> = ({
         type="button"
         onClick={() => setIsAdvancedOpen(!isAdvancedOpen)}
         className="flex w-full items-center gap-2 py-2 text-muted-foreground hover:text-foreground"
+        data-testid="furs-advanced-toggle"
       >
         <ChevronRight className={cn("h-4 w-4 transition-transform", isAdvancedOpen && "rotate-90")} />
         <span className="font-medium text-sm">{t("Advanced Settings")}</span>
@@ -342,7 +345,12 @@ export const GeneralSettingsSection: FC<GeneralSettingsSectionProps> = ({
                   <FormItem>
                     <FormLabel className="text-sm">{t("Operator Tax Number")}</FormLabel>
                     <FormControl>
-                      <Input placeholder="12345678" {...field} className="h-10" />
+                      <Input
+                        placeholder="12345678"
+                        {...field}
+                        className="h-10"
+                        data-testid="furs-api-operator-tax-number-input"
+                      />
                     </FormControl>
                     <FormDescription className="text-xs">
                       {t("Tax number for API key usage (optional)")}
@@ -359,7 +367,12 @@ export const GeneralSettingsSection: FC<GeneralSettingsSectionProps> = ({
                   <FormItem>
                     <FormLabel className="text-sm">{t("Operator Label")}</FormLabel>
                     <FormControl>
-                      <Input placeholder="API Default" {...field} className="h-10" />
+                      <Input
+                        placeholder="API Default"
+                        {...field}
+                        className="h-10"
+                        data-testid="furs-api-operator-label-input"
+                      />
                     </FormControl>
                     <FormDescription className="text-xs">
                       {t("Operator label for API key usage (optional)")}

package/src/components/entities/furs-settings-form/sections/premises-management-section.tsx

@@ -150,11 +150,21 @@ export const PremisesManagementSection: FC<PremisesManagementSectionProps> = ({
       <div className="space-y-6">
         {/* Add Premise Buttons */}
         <div className="flex gap-3">
-          <Button onClick={() => handleAddPremise("real-estate")} variant="default" className="flex-1 cursor-pointer">
+          <Button
+            onClick={() => handleAddPremise("real-estate")}
+            variant="default"
+            className="flex-1 cursor-pointer"
+            data-testid="furs-add-real-estate-premise"
+          >
             <Building2 className="mr-2 h-4 w-4" />
             {t("Add Real Estate")}
           </Button>
-          <Button onClick={() => handleAddPremise("movable")} variant="outline" className="flex-1 cursor-pointer">
+          <Button
+            onClick={() => handleAddPremise("movable")}
+            variant="outline"
+            className="flex-1 cursor-pointer"
+            data-testid="furs-add-movable-premise"
+          >
             <Truck className="mr-2 h-4 w-4" />
             {t("Add Movable")}
           </Button>
@@ -196,7 +206,11 @@ export const PremisesManagementSection: FC<PremisesManagementSectionProps> = ({
                           </Button>
                         </DropdownMenuTrigger>
                         <DropdownMenuContent align="end">
-                          <DropdownMenuItem onClick={() => handleAddDevice(premise.id)} className="cursor-pointer">
+                          <DropdownMenuItem
+                            onClick={() => handleAddDevice(premise.id)}
+                            className="cursor-pointer"
+                            data-testid={`furs-add-device-${premise.business_premise_name}`}
+                          >
                             <Cpu className="mr-2 h-4 w-4" />
                             {t("Add Electronic Device")}
                           </DropdownMenuItem>
@@ -274,6 +288,7 @@ export const PremisesManagementSection: FC<PremisesManagementSectionProps> = ({
                             variant="outline"
                             onClick={() => handleAddDevice(premise.id)}
                             className="cursor-pointer"
+                            data-testid={`furs-add-device-${premise.business_premise_name}`}
                           >
                             <Cpu className="mr-2 h-4 w-4" />
                             {t("Add Electronic Device")}
@@ -337,6 +352,7 @@ export const PremisesManagementSection: FC<PremisesManagementSectionProps> = ({
                       handleRegisterDevice();
                     }
                   }}
+                  data-testid="furs-device-name-input"
                 />
                 <p className="text-muted-foreground text-sm">
                   {t("Enter a unique name for this device (e.g., E1, E2, POS1, DEVICE1)")}
@@ -357,6 +373,7 @@ export const PremisesManagementSection: FC<PremisesManagementSectionProps> = ({
                 onClick={handleRegisterDevice}
                 disabled={!deviceName.trim() || isRegisteringDevice}
                 className="cursor-pointer"
+                data-testid="furs-register-device-submit"
               >
                 {isRegisteringDevice ? t("Registering...") : t("Register Device")}
               </Button>