@zauru-sdk/components 6.3.1 → 6.4.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.4.0](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.3.2...@zauru-sdk/components@6.4.0) (2026-09-16)
+
+
+### Features
+
+* extraer login, logout, home e index a factories del SDK ([83312db](https://github.com/intuitiva/zauru-typescript-sdk/commit/83312db6778188df9852aa2afbf7d45ae3782b47))
+
+
+
+
+
+## [6.3.2](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.3.1...@zauru-sdk/components@6.3.2) (2026-09-16)
+
+**Note:** Version bump only for package @zauru-sdk/components
+
+
+
+
+
 ## [6.3.1](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.3.0...@zauru-sdk/components@6.3.1) (2026-09-16)
 
 **Note:** Version bump only for package @zauru-sdk/components

package/dist/Routes/ZauruHomePage.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from "react";
+export type ZauruHomePageProps = {
+    title: string;
+    includeAgency?: boolean;
+    extra?: ReactNode;
+};
+export declare function ZauruHomePage({ title, includeAgency, extra, }: ZauruHomePageProps): import("react/jsx-runtime").JSX.Element;

package/dist/Routes/ZauruIndexPage.d.ts

@@ -0,0 +1,7 @@
+import type { ZauruHomeLayoutColor } from "./ZauruLoginPage.js";
+export type ZauruIndexPageProps = {
+    title: string;
+    description?: string;
+    color?: ZauruHomeLayoutColor;
+};
+export declare function ZauruIndexPage({ title, description, color, }: ZauruIndexPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/Routes/ZauruLoginPage.d.ts

@@ -0,0 +1,7 @@
+import { cleanLocalStorage } from "@zauru-sdk/redux";
+export type ZauruHomeLayoutColor = "green" | "blue" | "red" | "purple" | "yellow";
+export type ZauruLoginPageProps = {
+    cleanLocalStorageArgs?: Parameters<typeof cleanLocalStorage>[0];
+    color?: ZauruHomeLayoutColor;
+};
+export declare function ZauruLoginPage({ cleanLocalStorageArgs, color, }: ZauruLoginPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/Routes/ZauruLogoutPage.d.ts

@@ -0,0 +1,7 @@
+import type { ZauruHomeLayoutColor } from "./ZauruLoginPage.js";
+export type ZauruLogoutPageProps = {
+    requireOnline?: boolean;
+    beforeLogout?: () => boolean | void;
+    color?: ZauruHomeLayoutColor;
+};
+export declare function ZauruLogoutPage({ requireOnline, beforeLogout, color, }: ZauruLogoutPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/Routes/ZauruReloadCatalogsPage.d.ts

@@ -0,0 +1,8 @@
+export type ZauruReloadCatalogItem = {
+    name: string;
+    loading: boolean;
+};
+export type ZauruReloadCatalogsPageProps = {
+    items: ZauruReloadCatalogItem[];
+};
+export declare function ZauruReloadCatalogsPage({ items, }: ZauruReloadCatalogsPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/Routes/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./zauruRouteErrorBoundary.js";
+export * from "./ZauruLoginPage.js";
+export * from "./ZauruLogoutPage.js";
+export * from "./ZauruHomePage.js";
+export * from "./ZauruIndexPage.js";
+export * from "./ZauruReloadCatalogsPage.js";

package/dist/Routes/zauruRouteErrorBoundary.d.ts

@@ -0,0 +1,4 @@
+export declare function zauruRouteErrorBoundary(from: string): {
+    (): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/esm/Routes/ZauruHomePage.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useGetAgencyProfile, useGetUserProfile } from "@zauru-sdk/hooks";
+import { getInitialProfileInfo } from "@zauru-sdk/utils";
+import { LabelArray } from "../Titles/LabelArray.js";
+import { ZauruTable } from "../Table/ZauruTable.js";
+import { Container } from "../Containers/Container.js";
+import { DoubleContainer } from "../Containers/DoubleContainer.js";
+import { MainContainer } from "../Containers/MainContainer.js";
+import { SubContainer } from "../Containers/SubContainer.js";
+import { ErrorLayout } from "../Layouts/errorLayout/index.js";
+import { LoadingWindow } from "../Skeletons/LoadingWindow.js";
+export function ZauruHomePage({ title, includeAgency = true, extra, }) {
+    try {
+        const [isClient, setIsClient] = useState(false);
+        const { data: userProfile } = useGetUserProfile();
+        const { data: agencyProfile, loading: loadingAgencyProfile } = useGetAgencyProfile();
+        useEffect(() => {
+            setIsClient(true);
+        }, []);
+        const { profileLabelInfo, membershipsInfo } = getInitialProfileInfo(userProfile);
+        const conditionalRowStyles = [
+            {
+                when: (row) => row.odd,
+                style: {
+                    backgroundColor: "white",
+                    "&:hover": {
+                        cursor: "pointer",
+                    },
+                },
+            },
+            {
+                when: (row) => row.entityId === userProfile?.profile?.selected_entity_id,
+                style: () => ({ backgroundColor: "lightgreen" }),
+            },
+        ];
+        const columns = [
+            {
+                name: "Entidad",
+                selector: (row) => row.entity,
+            },
+            {
+                name: "Contrato Expira",
+                selector: (row) => row.contractExpiration,
+                width: "10rem",
+            },
+            {
+                name: "Pagado hasta",
+                selector: (row) => row.nextPay,
+                width: "10rem",
+            },
+        ];
+        if (!isClient) {
+            return _jsx(LoadingWindow, { description: "Cargando home..." });
+        }
+        const pageTitle = includeAgency
+            ? loadingAgencyProfile || !agencyProfile
+                ? "Cargando..."
+                : `${title} (${agencyProfile?.name ?? "Usuario sin agencia asignada"})`
+            : title;
+        const profileAndMemberships = (_jsxs(_Fragment, { children: [_jsx(SubContainer, { title: "Perfil", children: _jsx(LabelArray, { info: profileLabelInfo }) }), _jsx(SubContainer, { title: "Suscripciones", children: _jsx(ZauruTable, { columns: columns, conditionalRowStyles: conditionalRowStyles, data: membershipsInfo }) })] }));
+        return (_jsx(MainContainer, { children: extra ? (_jsxs(DoubleContainer, { title: pageTitle, children: [profileAndMemberships, extra] })) : (_jsx(Container, { title: pageTitle, children: profileAndMemberships })) }));
+    }
+    catch (error) {
+        return (_jsx(ErrorLayout, { from: "/home/index.tsx", error: error, isRootLevel: false }));
+    }
+}

package/dist/esm/Routes/ZauruIndexPage.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ErrorLayout } from "../Layouts/errorLayout/index.js";
+import { HomeLayout } from "../Layouts/homeLayout/index.js";
+export function ZauruIndexPage({ title, description = "Inicie sesión para poder continuar.", color, }) {
+    try {
+        return _jsx(HomeLayout, { title: title, description: description, color: color });
+    }
+    catch (error) {
+        return _jsx(ErrorLayout, { from: "/index.tsx", error: error, isRootLevel: false });
+    }
+}

package/dist/esm/Routes/ZauruLoginPage.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useFetcher } from "@remix-run/react";
+import { useEffect, useState } from "react";
+import { useValidateNotifications } from "@zauru-sdk/hooks";
+import { cleanLocalStorage, profileFetchSuccess, useAppDispatch, } from "@zauru-sdk/redux";
+import { ErrorLayout } from "../Layouts/errorLayout/index.js";
+import { HomeLayout } from "../Layouts/homeLayout/index.js";
+import { LoadingWindow } from "../Skeletons/LoadingWindow.js";
+export function ZauruLoginPage({ cleanLocalStorageArgs, color, }) {
+    try {
+        const fetcher = useFetcher();
+        const dispatch = useAppDispatch();
+        const [isClient, setIsClient] = useState(false);
+        useValidateNotifications({ fetcher });
+        useEffect(() => {
+            if (fetcher.data?.employeeProfile) {
+                dispatch(profileFetchSuccess({
+                    name: "agencyProfile",
+                    data: fetcher.data.agencyProfile,
+                }));
+                dispatch(profileFetchSuccess({
+                    name: "employeeProfile",
+                    data: fetcher.data.employeeProfile,
+                }));
+                dispatch(profileFetchSuccess({
+                    name: "userProfile",
+                    data: fetcher.data.userProfile,
+                }));
+                dispatch(profileFetchSuccess({
+                    name: "oauthProfile",
+                    data: fetcher.data.oauthProfile,
+                }));
+                fetcher.submit({
+                    action: "redirect",
+                    cookie: fetcher.data?.cookie,
+                }, { method: "post" });
+            }
+        }, [fetcher.data]);
+        useEffect(() => {
+            setIsClient(true);
+        }, []);
+        useEffect(() => {
+            cleanLocalStorage(cleanLocalStorageArgs);
+            fetcher.submit({ action: "login" }, { method: "post" });
+        }, []);
+        if (!isClient) {
+            return _jsx(LoadingWindow, {});
+        }
+        return (_jsx(HomeLayout, { loading: true, color: color, title: fetcher.data?.title ? "Error al inciar sesión!" : "Iniciando sesión....", description: fetcher.data?.description ??
+                "Cargando (Perfil zauru, perfil oauth, agencia, membresías, webapptables)..." }));
+    }
+    catch (error) {
+        console.log(error);
+        return (_jsx(ErrorLayout, { from: "/login/index.tsx", error: error, isRootLevel: false }));
+    }
+}

package/dist/esm/Routes/ZauruLogoutPage.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useFetcher, useNavigate } from "@remix-run/react";
+import { useEffect } from "react";
+import { showAlert, useIsOnline } from "@zauru-sdk/hooks";
+import { ErrorLayout } from "../Layouts/errorLayout/index.js";
+import { HomeLayout } from "../Layouts/homeLayout/index.js";
+export function ZauruLogoutPage({ requireOnline = true, beforeLogout, color, }) {
+    try {
+        const fetcher = useFetcher();
+        const navigate = useNavigate();
+        const isOnline = useIsOnline();
+        useEffect(() => {
+            if (beforeLogout?.() === false) {
+                return;
+            }
+            if (requireOnline && !isOnline) {
+                showAlert({
+                    title: "No es posible cerrar sesión",
+                    description: "No hay conexión a internet",
+                    type: "error",
+                });
+                navigate("/home");
+                return;
+            }
+            fetcher.submit({ action: "logout" }, { method: "post" });
+        }, []);
+        return (_jsx(HomeLayout, { color: color, title: "Cerrando sesi\u00F3n", description: "Espere mientras se cierra su sesi\u00F3n..." }));
+    }
+    catch (error) {
+        return (_jsx(ErrorLayout, { from: "/logout/index.tsx", error: error, isRootLevel: false }));
+    }
+}

package/dist/esm/Routes/ZauruReloadCatalogsPage.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { ErrorLayout } from "../Layouts/errorLayout/index.js";
+import { LoadingWindow } from "../Skeletons/LoadingWindow.js";
+export function ZauruReloadCatalogsPage({ items, }) {
+    try {
+        const [isClient, setIsClient] = useState(false);
+        useEffect(() => {
+            setIsClient(true);
+        }, []);
+        if (!isClient) {
+            return _jsx(LoadingWindow, {});
+        }
+        const loading = items.some((item) => item.loading);
+        return (_jsx(LoadingWindow, { description: loading
+                ? "Cargando catálogos..."
+                : "Catálogos cargados correctamente ✅", loadingItems: items }));
+    }
+    catch (error) {
+        return (_jsx(ErrorLayout, { from: "/reload-catalogs", error: error, isRootLevel: false }));
+    }
+}

package/dist/esm/Routes/index.js

@@ -0,0 +1,6 @@
+export * from "./zauruRouteErrorBoundary.js";
+export * from "./ZauruLoginPage.js";
+export * from "./ZauruLogoutPage.js";
+export * from "./ZauruHomePage.js";
+export * from "./ZauruIndexPage.js";
+export * from "./ZauruReloadCatalogsPage.js";

package/dist/esm/Routes/zauruRouteErrorBoundary.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ErrorLayout } from "../Layouts/errorLayout/index.js";
+export function zauruRouteErrorBoundary(from) {
+    function ZauruRouteErrorBoundary() {
+        return _jsx(ErrorLayout, { from: from });
+    }
+    ZauruRouteErrorBoundary.displayName = `ZauruRouteErrorBoundary(${from})`;
+    return ZauruRouteErrorBoundary;
+}

package/dist/esm/index.js

@@ -24,4 +24,5 @@ export * from "./WithTooltip/index.js";
 export * from "./Wizards/index.js";
 export * from "./Zendesk/index.js";
 export * from "./HOC/ValidateEmployeeAccess/index.js";
+export * from "./Routes/index.js";
 export * from "./SidePanel/index.js";

package/dist/index.d.ts

@@ -24,4 +24,5 @@ export * from "./WithTooltip/index.js";
 export * from "./Wizards/index.js";
 export * from "./Zendesk/index.js";
 export * from "./HOC/ValidateEmployeeAccess/index.js";
+export * from "./Routes/index.js";
 export * from "./SidePanel/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zauru-sdk/components",
-  "version": "6.3.1",
+  "version": "6.4.0",
   "description": "Componentes reutilizables en las WebApps de Zauru.",
   "main": "./dist/esm/index.js",
   "module": "./dist/esm/index.js",
@@ -49,7 +49,7 @@
     "@zauru-sdk/icons": "^6.0.0",
     "@zauru-sdk/redux": "^6.5.9",
     "@zauru-sdk/types": "^6.16.0",
-    "@zauru-sdk/utils": "^6.13.0",
+    "@zauru-sdk/utils": "^6.15.0",
     "browser-image-compression": "^2.0.2",
     "framer-motion": "^12.0.0",
     "jsonwebtoken": "^9.0.2",
@@ -62,5 +62,5 @@
     "styled-components": "^5.3.5",
     "zod": "^3.23.8"
   },
-  "gitHead": "91e3b376891f89cef02d1badd765db595edbe086"
+  "gitHead": "7ccc6b0a3d1c426f8b62579a64a0bb0be73d2fcd"
 }

package/src/Routes/ZauruHomePage.tsx

@@ -0,0 +1,113 @@
+import { useEffect, useState, type ReactNode } from "react";
+import { useGetAgencyProfile, useGetUserProfile } from "@zauru-sdk/hooks";
+import { getInitialProfileInfo } from "@zauru-sdk/utils";
+import { LabelArray } from "../Titles/LabelArray.js";
+import { ZauruTable } from "../Table/ZauruTable.js";
+import { Container } from "../Containers/Container.js";
+import { DoubleContainer } from "../Containers/DoubleContainer.js";
+import { MainContainer } from "../Containers/MainContainer.js";
+import { SubContainer } from "../Containers/SubContainer.js";
+import { ErrorLayout } from "../Layouts/errorLayout/index.js";
+import { LoadingWindow } from "../Skeletons/LoadingWindow.js";
+
+export type ZauruHomePageProps = {
+  title: string;
+  includeAgency?: boolean;
+  extra?: ReactNode;
+};
+
+export function ZauruHomePage({
+  title,
+  includeAgency = true,
+  extra,
+}: ZauruHomePageProps) {
+  try {
+    const [isClient, setIsClient] = useState(false);
+    const { data: userProfile } = useGetUserProfile();
+    const { data: agencyProfile, loading: loadingAgencyProfile } =
+      useGetAgencyProfile();
+
+    useEffect(() => {
+      setIsClient(true);
+    }, []);
+
+    const { profileLabelInfo, membershipsInfo } =
+      getInitialProfileInfo(userProfile);
+
+    const conditionalRowStyles = [
+      {
+        when: (row: { odd: any; entityId: any }) => row.odd,
+        style: {
+          backgroundColor: "white",
+          "&:hover": {
+            cursor: "pointer",
+          },
+        },
+      },
+      {
+        when: (row: { entityId: any }) =>
+          row.entityId === userProfile?.profile?.selected_entity_id,
+        style: () => ({ backgroundColor: "lightgreen" }),
+      },
+    ];
+
+    const columns: any = [
+      {
+        name: "Entidad",
+        selector: (row: any) => row.entity,
+      },
+      {
+        name: "Contrato Expira",
+        selector: (row: any) => row.contractExpiration,
+        width: "10rem",
+      },
+      {
+        name: "Pagado hasta",
+        selector: (row: any) => row.nextPay,
+        width: "10rem",
+      },
+    ];
+
+    if (!isClient) {
+      return <LoadingWindow description="Cargando home..." />;
+    }
+
+    const pageTitle = includeAgency
+      ? loadingAgencyProfile || !agencyProfile
+        ? "Cargando..."
+        : `${title} (${agencyProfile?.name ?? "Usuario sin agencia asignada"})`
+      : title;
+
+    const profileAndMemberships = (
+      <>
+        <SubContainer title="Perfil">
+          <LabelArray info={profileLabelInfo} />
+        </SubContainer>
+        <SubContainer title="Suscripciones">
+          <ZauruTable
+            columns={columns}
+            conditionalRowStyles={conditionalRowStyles}
+            data={membershipsInfo}
+          />
+        </SubContainer>
+      </>
+    );
+
+    return (
+      <MainContainer>
+        {extra ? (
+          <DoubleContainer title={pageTitle}>
+            {profileAndMemberships}
+            {extra}
+          </DoubleContainer>
+        ) : (
+          <Container title={pageTitle}>{profileAndMemberships}</Container>
+        )}
+      </MainContainer>
+    );
+  } catch (error: any) {
+    return (
+      <ErrorLayout from="/home/index.tsx" error={error} isRootLevel={false} />
+    );
+  }
+}

package/src/Routes/ZauruIndexPage.tsx

@@ -0,0 +1,21 @@
+import { ErrorLayout } from "../Layouts/errorLayout/index.js";
+import { HomeLayout } from "../Layouts/homeLayout/index.js";
+import type { ZauruHomeLayoutColor } from "./ZauruLoginPage.js";
+
+export type ZauruIndexPageProps = {
+  title: string;
+  description?: string;
+  color?: ZauruHomeLayoutColor;
+};
+
+export function ZauruIndexPage({
+  title,
+  description = "Inicie sesión para poder continuar.",
+  color,
+}: ZauruIndexPageProps) {
+  try {
+    return <HomeLayout title={title} description={description} color={color} />;
+  } catch (error: any) {
+    return <ErrorLayout from="/index.tsx" error={error} isRootLevel={false} />;
+  }
+}

package/src/Routes/ZauruLoginPage.tsx

@@ -0,0 +1,100 @@
+import { useFetcher } from "@remix-run/react";
+import { useEffect, useState } from "react";
+import { useValidateNotifications } from "@zauru-sdk/hooks";
+import {
+  cleanLocalStorage,
+  profileFetchSuccess,
+  useAppDispatch,
+} from "@zauru-sdk/redux";
+import { ErrorLayout } from "../Layouts/errorLayout/index.js";
+import { HomeLayout } from "../Layouts/homeLayout/index.js";
+import { LoadingWindow } from "../Skeletons/LoadingWindow.js";
+
+export type ZauruHomeLayoutColor = "green" | "blue" | "red" | "purple" | "yellow";
+
+export type ZauruLoginPageProps = {
+  cleanLocalStorageArgs?: Parameters<typeof cleanLocalStorage>[0];
+  color?: ZauruHomeLayoutColor;
+};
+
+export function ZauruLoginPage({
+  cleanLocalStorageArgs,
+  color,
+}: ZauruLoginPageProps) {
+  try {
+    const fetcher = useFetcher<any>();
+    const dispatch = useAppDispatch();
+    const [isClient, setIsClient] = useState(false);
+
+    useValidateNotifications({ fetcher });
+
+    useEffect(() => {
+      if (fetcher.data?.employeeProfile) {
+        dispatch(
+          profileFetchSuccess({
+            name: "agencyProfile",
+            data: fetcher.data.agencyProfile,
+          }),
+        );
+        dispatch(
+          profileFetchSuccess({
+            name: "employeeProfile",
+            data: fetcher.data.employeeProfile,
+          }),
+        );
+        dispatch(
+          profileFetchSuccess({
+            name: "userProfile",
+            data: fetcher.data.userProfile,
+          }),
+        );
+        dispatch(
+          profileFetchSuccess({
+            name: "oauthProfile",
+            data: fetcher.data.oauthProfile,
+          }),
+        );
+
+        fetcher.submit(
+          {
+            action: "redirect",
+            cookie: fetcher.data?.cookie,
+          },
+          { method: "post" },
+        );
+      }
+    }, [fetcher.data]);
+
+    useEffect(() => {
+      setIsClient(true);
+    }, []);
+
+    useEffect(() => {
+      cleanLocalStorage(cleanLocalStorageArgs);
+      fetcher.submit({ action: "login" }, { method: "post" });
+    }, []);
+
+    if (!isClient) {
+      return <LoadingWindow />;
+    }
+
+    return (
+      <HomeLayout
+        loading
+        color={color}
+        title={
+          fetcher.data?.title ? "Error al inciar sesión!" : "Iniciando sesión...."
+        }
+        description={
+          fetcher.data?.description ??
+          "Cargando (Perfil zauru, perfil oauth, agencia, membresías, webapptables)..."
+        }
+      />
+    );
+  } catch (error: any) {
+    console.log(error);
+    return (
+      <ErrorLayout from="/login/index.tsx" error={error} isRootLevel={false} />
+    );
+  }
+}

package/src/Routes/ZauruLogoutPage.tsx

@@ -0,0 +1,52 @@
+import { useFetcher, useNavigate } from "@remix-run/react";
+import { useEffect } from "react";
+import { showAlert, useIsOnline } from "@zauru-sdk/hooks";
+import { ErrorLayout } from "../Layouts/errorLayout/index.js";
+import { HomeLayout } from "../Layouts/homeLayout/index.js";
+import type { ZauruHomeLayoutColor } from "./ZauruLoginPage.js";
+
+export type ZauruLogoutPageProps = {
+  requireOnline?: boolean;
+  beforeLogout?: () => boolean | void;
+  color?: ZauruHomeLayoutColor;
+};
+
+export function ZauruLogoutPage({
+  requireOnline = true,
+  beforeLogout,
+  color,
+}: ZauruLogoutPageProps) {
+  try {
+    const fetcher = useFetcher();
+    const navigate = useNavigate();
+    const isOnline = useIsOnline();
+
+    useEffect(() => {
+      if (beforeLogout?.() === false) {
+        return;
+      }
+      if (requireOnline && !isOnline) {
+        showAlert({
+          title: "No es posible cerrar sesión",
+          description: "No hay conexión a internet",
+          type: "error",
+        });
+        navigate("/home");
+        return;
+      }
+      fetcher.submit({ action: "logout" }, { method: "post" });
+    }, []);
+
+    return (
+      <HomeLayout
+        color={color}
+        title="Cerrando sesión"
+        description="Espere mientras se cierra su sesión..."
+      />
+    );
+  } catch (error: any) {
+    return (
+      <ErrorLayout from="/logout/index.tsx" error={error} isRootLevel={false} />
+    );
+  }
+}

package/src/Routes/ZauruReloadCatalogsPage.tsx

@@ -0,0 +1,45 @@
+import { useEffect, useState } from "react";
+import { ErrorLayout } from "../Layouts/errorLayout/index.js";
+import { LoadingWindow } from "../Skeletons/LoadingWindow.js";
+
+export type ZauruReloadCatalogItem = {
+  name: string;
+  loading: boolean;
+};
+
+export type ZauruReloadCatalogsPageProps = {
+  items: ZauruReloadCatalogItem[];
+};
+
+export function ZauruReloadCatalogsPage({
+  items,
+}: ZauruReloadCatalogsPageProps) {
+  try {
+    const [isClient, setIsClient] = useState(false);
+
+    useEffect(() => {
+      setIsClient(true);
+    }, []);
+
+    if (!isClient) {
+      return <LoadingWindow />;
+    }
+
+    const loading = items.some((item) => item.loading);
+
+    return (
+      <LoadingWindow
+        description={
+          loading
+            ? "Cargando catálogos..."
+            : "Catálogos cargados correctamente ✅"
+        }
+        loadingItems={items}
+      />
+    );
+  } catch (error: any) {
+    return (
+      <ErrorLayout from="/reload-catalogs" error={error} isRootLevel={false} />
+    );
+  }
+}

package/src/Routes/index.ts

@@ -0,0 +1,6 @@
+export * from "./zauruRouteErrorBoundary.js";
+export * from "./ZauruLoginPage.js";
+export * from "./ZauruLogoutPage.js";
+export * from "./ZauruHomePage.js";
+export * from "./ZauruIndexPage.js";
+export * from "./ZauruReloadCatalogsPage.js";

package/src/Routes/zauruRouteErrorBoundary.tsx

@@ -0,0 +1,9 @@
+import { ErrorLayout } from "../Layouts/errorLayout/index.js";
+
+export function zauruRouteErrorBoundary(from: string) {
+  function ZauruRouteErrorBoundary() {
+    return <ErrorLayout from={from} />;
+  }
+  ZauruRouteErrorBoundary.displayName = `ZauruRouteErrorBoundary(${from})`;
+  return ZauruRouteErrorBoundary;
+}

package/src/index.ts

@@ -24,4 +24,5 @@ export * from "./WithTooltip/index.js";
 export * from "./Wizards/index.js";
 export * from "./Zendesk/index.js";
 export * from "./HOC/ValidateEmployeeAccess/index.js";
+export * from "./Routes/index.js";
 export * from "./SidePanel/index.js";