@spaceinvoices/react-ui 0.4.8 → 0.4.10

package/src/hooks/use-premise-selection.ts

@@ -0,0 +1,186 @@
+/**
+ * Shared hook for FURS/FINA premise and device selection.
+ *
+ * Encapsulates the premise/device loading, localStorage persistence,
+ * auto-selection, and readiness logic duplicated across invoice,
+ * credit note, and advance invoice create forms.
+ */
+
+import { useEffect, useMemo, useState } from "react";
+
+import { useFinaPremises, useFinaSettings } from "../components/entities/fina-settings-form/fina-settings.hooks";
+import { useFursPremises, useFursSettings } from "../components/entities/furs-settings-form/furs-settings.hooks";
+import {
+  type FinaCombo,
+  type FursCombo,
+  getLastUsedFinaCombo,
+  getLastUsedFursCombo,
+  setLastUsedFinaCombo,
+  setLastUsedFursCombo,
+} from "../components/invoices/invoices.hooks";
+
+/** Minimal premise shape needed by the hook */
+type Premise = {
+  id: string;
+  business_premise_name: string;
+  is_active?: boolean;
+  Devices?: Array<{
+    electronic_device_name: string;
+    is_active?: boolean;
+  }>;
+};
+
+export type PremiseSelectionResult = {
+  /** Whether the fiscalization system is enabled in settings */
+  isEnabled: boolean;
+  /** Raw settings object (for form-specific logic like unified_numbering) */
+  settings: any;
+  /** Whether settings/premises are still loading */
+  isLoading: boolean;
+  /** Active (non-archived) premises */
+  activePremises: Premise[];
+  /** Whether there are any active premises */
+  hasPremises: boolean;
+  /** Active devices for the currently selected premise */
+  activeDevices: Array<{ electronic_device_name: string; is_active?: boolean }>;
+  /** Currently selected premise name */
+  selectedPremiseName: string | undefined;
+  /** Currently selected device name */
+  selectedDeviceName: string | undefined;
+  /** Update selected premise */
+  setSelectedPremiseName: (name: string | undefined) => void;
+  /** Update selected device */
+  setSelectedDeviceName: (name: string | undefined) => void;
+  /** True when disabled OR both premise+device are selected */
+  isSelectionReady: boolean;
+  /** True when enabled, has premises, and both are selected */
+  isActive: boolean;
+  /** Save current combo to localStorage (call on successful submission) */
+  saveCombo: () => void;
+};
+
+export function usePremiseSelection(opts: {
+  entityId: string;
+  type: "furs" | "fina";
+  enabled?: boolean;
+}): PremiseSelectionResult {
+  const { entityId, type } = opts;
+  const externalEnabled = opts.enabled !== false;
+
+  // --- FURS hooks (only called when type is furs) ---
+  const { data: fursSettings, isLoading: isFursSettingsLoading } = useFursSettings(entityId, {
+    enabled: type === "furs" && externalEnabled,
+  });
+  const { data: fursPremises, isLoading: isFursPremisesLoading } = useFursPremises(entityId, {
+    enabled: type === "furs" && externalEnabled && fursSettings?.enabled === true,
+  });
+
+  // --- FINA hooks (only called when type is fina) ---
+  const { data: finaSettings, isLoading: isFinaSettingsLoading } = useFinaSettings(entityId, {
+    enabled: type === "fina" && externalEnabled,
+  });
+  const { data: finaPremises, isLoading: isFinaPremisesLoading } = useFinaPremises(entityId, {
+    enabled: type === "fina" && externalEnabled && finaSettings?.enabled === true,
+  });
+
+  // Unified values
+  const settings = type === "furs" ? fursSettings : finaSettings;
+  const premises = type === "furs" ? fursPremises : finaPremises;
+  const isSettingsLoading = type === "furs" ? isFursSettingsLoading : isFinaSettingsLoading;
+  const isPremisesLoading = type === "furs" ? isFursPremisesLoading : isFinaPremisesLoading;
+
+  const isEnabled = settings?.enabled === true;
+  const isLoading = isSettingsLoading || (isEnabled && isPremisesLoading);
+
+  const activePremises = useMemo(() => (premises?.filter((p: any) => p.is_active) as Premise[]) || [], [premises]);
+  const hasPremises = activePremises.length > 0;
+
+  // Selection state
+  const [selectedPremiseName, setSelectedPremiseName] = useState<string | undefined>();
+  const [selectedDeviceName, setSelectedDeviceName] = useState<string | undefined>();
+
+  // Active devices for selected premise
+  const activeDevices = useMemo(() => {
+    if (!selectedPremiseName) return [];
+    const premise = activePremises.find((p) => p.business_premise_name === selectedPremiseName);
+    const devices = premise?.Devices?.filter((d) => d.is_active) || [];
+    // For FURS, exclude the legacy "OLD" device
+    return type === "furs" ? devices.filter((d) => d.electronic_device_name !== "OLD") : devices;
+  }, [activePremises, selectedPremiseName, type]);
+
+  // Initialize selection from localStorage or first active combo
+  useEffect(() => {
+    if (!isEnabled || !hasPremises || selectedPremiseName) return;
+
+    const lastUsed = type === "furs" ? getLastUsedFursCombo(entityId) : getLastUsedFinaCombo(entityId);
+
+    if (lastUsed) {
+      const premise = activePremises.find((p) => p.business_premise_name === lastUsed.business_premise_name);
+      const device = premise?.Devices?.find(
+        (d) => d.electronic_device_name === lastUsed.electronic_device_name && d.is_active,
+      );
+      if (premise && device) {
+        setSelectedPremiseName(lastUsed.business_premise_name);
+        setSelectedDeviceName(lastUsed.electronic_device_name);
+        return;
+      }
+    }
+
+    // Fall back to first active premise/device
+    const firstPremise = activePremises[0];
+    const firstDevice = firstPremise?.Devices?.find((d) => d.is_active);
+    if (firstPremise && firstDevice) {
+      setSelectedPremiseName(firstPremise.business_premise_name);
+      setSelectedDeviceName(firstDevice.electronic_device_name);
+    }
+  }, [isEnabled, hasPremises, activePremises, entityId, selectedPremiseName, type]);
+
+  // When premise changes, auto-select first active device if current is invalid
+  useEffect(() => {
+    if (!selectedPremiseName) return;
+    const premise = activePremises.find((p) => p.business_premise_name === selectedPremiseName);
+    const devicesForPremise =
+      type === "furs"
+        ? premise?.Devices?.filter((d) => d.is_active && d.electronic_device_name !== "OLD")
+        : premise?.Devices?.filter((d) => d.is_active);
+    const firstDevice = devicesForPremise?.[0];
+    if (firstDevice && selectedDeviceName !== firstDevice.electronic_device_name) {
+      const currentDeviceInPremise = devicesForPremise?.find((d) => d.electronic_device_name === selectedDeviceName);
+      if (!currentDeviceInPremise) {
+        setSelectedDeviceName(firstDevice.electronic_device_name);
+      }
+    }
+  }, [selectedPremiseName, activePremises, selectedDeviceName, type]);
+
+  const isSelectionReady = !isEnabled || !hasPremises || (!!selectedPremiseName && !!selectedDeviceName);
+  const isActive = !!(isEnabled && hasPremises && selectedPremiseName && selectedDeviceName);
+
+  const saveCombo = () => {
+    if (!isActive || !selectedPremiseName || !selectedDeviceName) return;
+    const combo: FursCombo | FinaCombo = {
+      business_premise_name: selectedPremiseName,
+      electronic_device_name: selectedDeviceName,
+    };
+    if (type === "furs") {
+      setLastUsedFursCombo(entityId, combo);
+    } else {
+      setLastUsedFinaCombo(entityId, combo);
+    }
+  };
+
+  return {
+    isEnabled,
+    settings,
+    isLoading: !!isLoading,
+    activePremises,
+    hasPremises,
+    activeDevices,
+    selectedPremiseName,
+    selectedDeviceName,
+    setSelectedPremiseName,
+    setSelectedDeviceName,
+    isSelectionReady,
+    isActive,
+    saveCombo,
+  };
+}

package/src/lib/browser-cookies.ts

@@ -16,7 +16,7 @@ type CookieOptions = {
  * Sets a cookie with the given name, value, and options
  */
 export function setCookie(name: string, value: string, options: CookieOptions = {}) {
-  if (typeof window === "undefined") {
+  if (typeof document === "undefined") {
     console.warn("setCookie called on server");
     return;
   }
@@ -41,7 +41,7 @@ export function setCookie(name: string, value: string, options: CookieOptions =
  * Gets a cookie value by name
  */
 export function getCookie(name: string): string | undefined {
-  if (typeof window === "undefined") {
+  if (typeof document === "undefined") {
     return undefined;
   }
 
@@ -52,7 +52,7 @@ export function getCookie(name: string): string | undefined {
  * Removes a cookie by name, clearing both host-only and domain-scoped versions
  */
 export function deleteCookie(name: string, path = "/") {
-  if (typeof window === "undefined") {
+  if (typeof document === "undefined") {
     console.warn("deleteCookie called on server");
     return;
   }
@@ -64,7 +64,7 @@ export function deleteCookie(name: string, path = "/") {
   });
 
   // Also delete domain cookie (e.g. .spaceinvoices.com) if on spaceinvoices.com
-  const hostname = window.location.hostname;
+  const hostname = typeof window !== "undefined" ? window.location.hostname : globalThis.location?.hostname ?? "";
   if (hostname === "spaceinvoices.com" || hostname.endsWith(".spaceinvoices.com")) {
     setCookie(name, "", {
       path,

package/src/lib/date-fns-locale.ts

@@ -0,0 +1,48 @@
+import type { Locale } from "date-fns";
+import {
+  bg,
+  cs,
+  de,
+  enUS,
+  es,
+  et,
+  fi,
+  fr,
+  hr,
+  is,
+  it,
+  nb,
+  nl,
+  pl,
+  pt,
+  sk,
+  sl,
+  sv,
+} from "date-fns/locale";
+import { getLocaleLanguage } from "./locale";
+
+const DATE_FNS_LOCALES: Record<string, Locale> = {
+  bg,
+  cs,
+  de,
+  en: enUS,
+  es,
+  et,
+  fi,
+  fr,
+  hr,
+  is,
+  it,
+  nb,
+  nl,
+  pl,
+  pt,
+  sk,
+  sl,
+  sv,
+};
+
+export function getDateFnsLocale(locale?: string): Locale {
+  const language = getLocaleLanguage(locale);
+  return DATE_FNS_LOCALES[language ?? ""] ?? enUS;
+}

package/src/lib/fiscalization-options.ts

@@ -0,0 +1,81 @@
+/**
+ * Pure functions for building FURS/FINA/eSLOG submission options.
+ *
+ * Extracted from the submit callbacks of invoice, credit note,
+ * and advance invoice forms where this logic was duplicated.
+ */
+
+export type FursSubmitOptions = { skip: true } | { business_premise_name: string; electronic_device_name: string };
+
+export type FinaSubmitOptions = {
+  business_premise_name: string;
+  electronic_device_name: string;
+  payment_type: string;
+};
+
+export type EslogSubmitOptions = {
+  validation_enabled: boolean;
+};
+
+/**
+ * Build FURS fiscalization options for document submission.
+ *
+ * Returns undefined when FURS should not be included (drafts, disabled, edit mode).
+ */
+export function buildFursOptions(opts: {
+  isDraft: boolean;
+  isEnabled: boolean;
+  isEditMode?: boolean;
+  skipFiscalization?: boolean;
+  premiseName?: string;
+  deviceName?: string;
+}): FursSubmitOptions | undefined {
+  if (opts.isDraft || opts.isEditMode || !opts.isEnabled) return undefined;
+  if (opts.skipFiscalization) return { skip: true };
+  if (opts.premiseName && opts.deviceName) {
+    return {
+      business_premise_name: opts.premiseName,
+      electronic_device_name: opts.deviceName,
+    };
+  }
+  return undefined;
+}
+
+/**
+ * Build FINA fiscalization options for document submission.
+ *
+ * Returns undefined when FINA should not be included (drafts, numbering disabled).
+ */
+export function buildFinaOptions(opts: {
+  isDraft: boolean;
+  useFinaNumbering: boolean;
+  isEditMode?: boolean;
+  premiseName?: string;
+  deviceName?: string;
+  paymentType?: string;
+}): FinaSubmitOptions | undefined {
+  if (opts.isDraft || opts.isEditMode || !opts.useFinaNumbering) return undefined;
+  if (opts.premiseName && opts.deviceName) {
+    return {
+      business_premise_name: opts.premiseName,
+      electronic_device_name: opts.deviceName,
+      payment_type: opts.paymentType || "bank_transfer",
+    };
+  }
+  return undefined;
+}
+
+/**
+ * Build eSLOG validation options for document submission.
+ *
+ * Returns undefined when eSLOG should not be included (drafts, edit mode, unavailable).
+ */
+export function buildEslogOptions(opts: {
+  isDraft: boolean;
+  isEditMode?: boolean;
+  isAvailable: boolean;
+  isEnabled: boolean | undefined;
+}): EslogSubmitOptions | undefined {
+  if (opts.isDraft || opts.isEditMode || !opts.isAvailable) return undefined;
+  return { validation_enabled: opts.isEnabled === true };
+}

package/src/lib/locale.ts

@@ -0,0 +1,38 @@
+export function normalizeLocale(locale?: string, fallback = "en"): string {
+  return locale?.trim().toLowerCase().replace(/_/g, "-") || fallback;
+}
+
+export function getLocaleLanguage(locale?: string, fallback = "en"): string {
+  return normalizeLocale(locale, fallback).split("-")[0] || fallback;
+}
+
+const LANGUAGE_TO_LOCALE: Record<string, string> = {
+  en: "en-US",
+  de: "de-DE",
+  sl: "sl-SI",
+  it: "it-IT",
+  fr: "fr-FR",
+  es: "es-ES",
+  pt: "pt-PT",
+  nl: "nl-NL",
+  pl: "pl-PL",
+  hr: "hr-HR",
+  sv: "sv-SE",
+  fi: "fi-FI",
+  et: "et-EE",
+  bg: "bg-BG",
+  cs: "cs-CZ",
+  sk: "sk-SK",
+  nb: "nb-NO",
+  is: "is-IS",
+};
+
+export function getFullLocale(locale?: string, fallback = "en-US"): string {
+  const normalized = normalizeLocale(locale, fallback);
+  if (Object.values(LANGUAGE_TO_LOCALE).includes(normalized)) {
+    return normalized;
+  }
+
+  const language = getLocaleLanguage(normalized, fallback.split("-")[0]);
+  return LANGUAGE_TO_LOCALE[language] || fallback;
+}

package/src/lib/template-variables.tsx

@@ -26,7 +26,7 @@ export function getVariableValue(
 
   // Entity-related variables
   if (varName === "entity_name") return entity.name || null;
-  if (varName === "entity_email") return (entity.settings as any)?.email || null;
+  if (varName === "entity_email") return entity.email || null;
   if (varName === "entity_address") return entity.address || null;
   if (varName === "entity_post_code") return entity.post_code || null;
   if (varName === "entity_city") return entity.city || null;

package/src/lib/translation.ts

@@ -1,4 +1,5 @@
 import { useCallback } from "react";
+import { getLocaleLanguage, normalizeLocale } from "./locale";
 
 type TranslationFunction = (key: string) => string;
 
@@ -24,9 +25,19 @@ export function createTranslation({ t, namespace, locale = "en", translations =
         }
       }
 
-      // 2. Look up in local translations for current locale
-      if (translations[locale]) {
-        const translation = translations[locale][key];
+      const normalizedLocale = normalizeLocale(locale);
+      const baseLocale = getLocaleLanguage(normalizedLocale);
+
+      // 2. Look up in local translations for current locale, then base language
+      const localeTranslations = translations[normalizedLocale] ?? translations[baseLocale];
+      if (localeTranslations) {
+        const translation = localeTranslations[key];
+        if (translation) return translation;
+      }
+
+      const englishTranslations = translations.en;
+      if (englishTranslations) {
+        const translation = englishTranslations[key];
         if (translation) return translation;
       }
 

package/src/providers/entities-context.tsx

@@ -12,6 +12,7 @@ export type EntitiesContextType = {
   activeEntity: Entity | null;
   setActiveEntity: (entity: Entity | null) => void;
   environment: EntityEnvironment;
+  /** @deprecated Use URL-based sandbox routing instead of calling setEnvironment directly */
   setEnvironment: (environment: EntityEnvironment) => void;
   isLoading: boolean;
   refetchEntities: () => Promise<void>;

package/src/providers/entities-provider.tsx

@@ -26,6 +26,10 @@ type EntitiesProviderProps = {
   cookieDomain?: string;
   /** When provided (from URL param), this entity ID is used as the source of truth instead of the cookie */
   urlEntityId?: string;
+  /** When provided, determines environment from URL instead of cookie. true = sandbox, false = live. */
+  isSandbox?: boolean;
+  /** Called when urlEntityId is not found in any environment, allowing parent to try other accounts */
+  onEntityNotFound?: (entityId: string) => boolean | void | Promise<boolean | void>;
 };
 
 export function EntitiesProvider({
@@ -34,6 +38,8 @@ export function EntitiesProvider({
   onNoEntities,
   cookieDomain,
   urlEntityId,
+  isSandbox,
+  onEntityNotFound,
 }: EntitiesProviderProps) {
   const { sdk, isInitialized } = useSDK();
   const [cookies, setCookie, removeCookie] = useCookies([ACTIVE_ENTITY_COOKIE, ACTIVE_ENVIRONMENT_COOKIE]);
@@ -44,12 +50,24 @@ export function EntitiesProvider({
   // URL entity ID takes precedence over cookie
   const resolvedEntityId = urlEntityId ?? initialEntityIdFromCookie;
 
+  // When isSandbox is provided (URL-driven), use it as source of truth; otherwise fall back to cookie
   const resolvedInitialEnvironment: EntityEnvironment =
-    initialEnvironmentFromCookie ?? (initialActiveEntity?.environment as EntityEnvironment | undefined) ?? "live";
+    isSandbox !== undefined
+      ? isSandbox
+        ? "sandbox"
+        : "live"
+      : (initialEnvironmentFromCookie ?? (initialActiveEntity?.environment as EntityEnvironment | undefined) ?? "live");
 
   const [environment, setEnvironmentState] = useState<EntityEnvironment>(resolvedInitialEnvironment);
   const previousEnvironment = useRef(environment);
 
+  // Sync environment with isSandbox prop when it changes (URL-driven navigation)
+  useEffect(() => {
+    if (isSandbox === undefined) return;
+    const target: EntityEnvironment = isSandbox ? "sandbox" : "live";
+    setEnvironmentState((current) => (current === target ? current : target));
+  }, [isSandbox]);
+
   // Store the initial entity ID (from URL or cookie) so we can match it when entities load
   const initialEntityIdRef = useRef(resolvedEntityId);
 
@@ -65,6 +83,7 @@ export function EntitiesProvider({
   const {
     data: entities = [],
     isLoading,
+    isFetching,
     refetch,
     isError,
     error,
@@ -88,10 +107,50 @@ export function EntitiesProvider({
   });
 
   // When no entities in current environment, check the other before giving up
+  // Skip auto-switch when isSandbox is explicitly set (URL-driven) — respect the user's intent
   const hasCalledNoEntities = useRef(false);
   const hasTriedFallback = useRef(false);
+  const resolvingUrlEntityRef = useRef<string | null>(null);
+  const emptyUrlEntityRefetchKeyRef = useRef<string | null>(null);
   useEffect(() => {
-    if (isLoading || entities.length > 0 || hasCalledNoEntities.current) return;
+    if (isLoading || isFetching || entities.length > 0 || hasCalledNoEntities.current) return;
+
+    if (urlEntityId) {
+      const refetchKey = `${urlEntityId}:${environment}`;
+      if (emptyUrlEntityRefetchKeyRef.current !== refetchKey) {
+        emptyUrlEntityRefetchKeyRef.current = refetchKey;
+        void refetch();
+        return;
+      }
+
+      if (resolvingUrlEntityRef.current === urlEntityId) return;
+      resolvingUrlEntityRef.current = urlEntityId;
+
+      if (!onEntityNotFound) {
+        hasCalledNoEntities.current = true;
+        onNoEntities?.();
+        return;
+      }
+
+      void Promise.resolve(onEntityNotFound(urlEntityId))
+        .then((resolved) => {
+          if (resolved) return;
+          hasCalledNoEntities.current = true;
+          onNoEntities?.();
+        })
+        .catch(() => {
+          hasCalledNoEntities.current = true;
+          onNoEntities?.();
+        });
+      return;
+    }
+
+    // When environment is explicitly set via URL, don't auto-switch to the other environment
+    if (isSandbox !== undefined) {
+      hasCalledNoEntities.current = true;
+      onNoEntities?.();
+      return;
+    }
 
     // Try the other environment before calling onNoEntities
     if (!hasTriedFallback.current && sdk) {
@@ -118,7 +177,18 @@ export function EntitiesProvider({
     if (!hasTriedFallback.current) return;
     hasCalledNoEntities.current = true;
     onNoEntities?.();
-  }, [isLoading, entities.length, onNoEntities, sdk, environment]);
+  }, [
+    isLoading,
+    isFetching,
+    entities.length,
+    onEntityNotFound,
+    onNoEntities,
+    refetch,
+    sdk,
+    environment,
+    isSandbox,
+    urlEntityId,
+  ]);
 
   // Memoize entities to prevent unnecessary re-renders
   const memoizedEntities = useMemo(() => entities, [entities]);
@@ -130,6 +200,13 @@ export function EntitiesProvider({
     }
   }, [environment]);
 
+  useEffect(() => {
+    if (entities.length > 0) {
+      emptyUrlEntityRefetchKeyRef.current = null;
+      resolvingUrlEntityRef.current = null;
+    }
+  }, [entities.length]);
+
   // Sync active entity when entities list changes
   // Use ref to read current activeEntityState without causing re-runs
   const activeEntityRef = useRef(activeEntityState);
@@ -139,6 +216,8 @@ export function EntitiesProvider({
   useEffect(() => {
     if (urlEntityId) {
       initialEntityIdRef.current = urlEntityId;
+      resolvingUrlEntityRef.current = null;
+      emptyUrlEntityRefetchKeyRef.current = null;
     }
   }, [urlEntityId]);
 
@@ -201,6 +280,26 @@ export function EntitiesProvider({
     setEnvironmentState(altEnv);
   }, [urlEntityId, memoizedEntities, isLoading, environment]);
 
+  // After environment fallback has been attempted and entity is still not found, notify parent
+  const entityNotFoundCallbackFired = useRef<string | null>(null);
+  useEffect(() => {
+    if (!urlEntityId || !onEntityNotFound || isLoading) return;
+    if (memoizedEntities.length === 0) return;
+
+    const found = memoizedEntities.some((e) => e.id === urlEntityId);
+    if (found) {
+      entityNotFoundCallbackFired.current = null;
+      return;
+    }
+
+    // Only fire after the environment fallback has already been attempted for this entity
+    if (urlEntityFallbackAttempted.current !== urlEntityId) return;
+    if (entityNotFoundCallbackFired.current === urlEntityId) return;
+
+    entityNotFoundCallbackFired.current = urlEntityId;
+    onEntityNotFound(urlEntityId);
+  }, [urlEntityId, memoizedEntities, isLoading, onEntityNotFound]);
+
   const cookieOpts = useMemo(
     () => ({
       path: "/",

package/src/providers/form-footer-context.tsx

@@ -1,4 +1,4 @@
-import { createContext, type ReactNode, useContext, useEffect, useState } from "react";
+import { createContext, type ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 
 type SecondaryAction = {
   label: string;
@@ -54,6 +54,37 @@ export function useFormFooterRegistration({
   secondaryAction,
 }: UseFormFooterRegistrationProps) {
   const { setFormFooter } = useFormFooterContext();
+  const onSubmitRef = useRef(onSubmit);
+  const secondaryActionRef = useRef(secondaryAction);
+
+  useEffect(() => {
+    onSubmitRef.current = onSubmit;
+  }, [onSubmit]);
+
+  useEffect(() => {
+    secondaryActionRef.current = secondaryAction;
+  }, [secondaryAction]);
+
+  const stableOnSubmit = useCallback(() => {
+    onSubmitRef.current?.();
+  }, []);
+
+  const hasSecondaryAction = !!secondaryAction;
+  const secondaryActionLabel = secondaryAction?.label;
+  const secondaryActionPending = secondaryAction?.isPending;
+  const stableSecondaryActionOnClick = useCallback(() => {
+    secondaryActionRef.current?.onClick();
+  }, []);
+
+  const stableSecondaryAction = useMemo(() => {
+    if (!hasSecondaryAction || !secondaryActionLabel) return undefined;
+
+    return {
+      label: secondaryActionLabel,
+      isPending: secondaryActionPending,
+      onClick: stableSecondaryActionOnClick,
+    };
+  }, [hasSecondaryAction, secondaryActionLabel, secondaryActionPending, stableSecondaryActionOnClick]);
 
   useEffect(() => {
     setFormFooter({
@@ -61,12 +92,14 @@ export function useFormFooterRegistration({
       isPending,
       isDirty,
       label,
-      onSubmit,
-      secondaryAction,
+      onSubmit: onSubmit ? stableOnSubmit : undefined,
+      secondaryAction: stableSecondaryAction,
     });
+  }, [formId, isPending, isDirty, label, onSubmit, setFormFooter, stableOnSubmit, stableSecondaryAction]);
 
+  useEffect(() => {
     return () => {
       setFormFooter(null);
     };
-  }, [formId, isPending, isDirty, label, onSubmit, secondaryAction, setFormFooter]);
+  }, [setFormFooter]);
 }