@zauru-sdk/hooks 1.0.49 → 1.0.51

package/src/catalogs.ts

@@ -1,557 +0,0 @@
-import { useFetcher } from "@remix-run/react";
-import { useEffect, useState } from "react";
-import { AlertType, showAlert } from "./components/index.js";
-import type {
-  AgencyGraphQL,
-  BitacoraPOMassive,
-  BundleGraphQL,
-  CaseGraphQL,
-  CurrencyGraphQL,
-  EmployeeGraphQL,
-  FormGraphQL,
-  InvoiceGraphQL,
-  ItemCategoryGraphQL,
-  ItemGraphQL,
-  LotStockGraphQL,
-  MotivoRechazo,
-  PayeeCategoryGraphQL,
-  PayeeGraphQL,
-  PaymentTermGraphQL,
-  ReceptionType,
-  ShipmentGraphQL,
-  SubmissionCasesGraphQL,
-  SubmissionInvoicesGraphQL,
-  SuggestedPriceGraphQL,
-  Template,
-  TipoMuestra,
-  WebAppRowGraphQL,
-} from "@zauru-sdk/types";
-import {
-  CATALOGS_NAMES,
-  ONLINE_CATALOGS_NAMES,
-  ReduxParamsConfig,
-  catalogsFetchStart,
-  catalogsFetchSuccess,
-  useAppDispatch,
-  useAppSelector,
-} from "@zauru-sdk/redux";
-
-type CatalogType<T> = {
-  data: T[];
-  loading: boolean;
-};
-
-const useApiCatalog = <T>(
-  CATALOG_NAME: CATALOGS_NAMES | ONLINE_CATALOGS_NAMES,
-  otherParams?: { [key: string]: string }
-): CatalogType<T> => {
-  const fetcher = useFetcher<
-    | {
-        title: string;
-        description: string;
-        type: AlertType;
-      }
-    | { [key: string]: T[] }
-  >();
-  const [data, setData] = useState<CatalogType<T>>({
-    data: [],
-    loading: true,
-  });
-
-  useEffect(() => {
-    if (fetcher.data?.title) {
-      showAlert({
-        description: fetcher.data?.description?.toString(),
-        title: fetcher.data?.title?.toString(),
-        type: fetcher.data?.type?.toString() as AlertType,
-      });
-    }
-  }, [fetcher.data]);
-
-  useEffect(() => {
-    if (fetcher.state === "idle" && fetcher.data != null) {
-      const receivedData = fetcher.data as { [key: string]: T[] };
-      if (receivedData) {
-        setData({ data: receivedData[CATALOG_NAME], loading: false });
-      }
-    }
-  }, [fetcher, CATALOG_NAME]);
-
-  useEffect(() => {
-    try {
-      setData({ ...data, loading: true });
-      // Convert otherParams to query string
-      const paramsString = otherParams
-        ? Object.entries(otherParams)
-            .map(([key, value]) => `${key}=${value}`)
-            .join("&")
-        : "";
-
-      const url = `/api/catalogs?catalog=${CATALOG_NAME}${
-        paramsString ? `&${paramsString}` : ""
-      }`;
-
-      fetcher.load(url);
-    } catch (ex) {
-      showAlert({
-        type: "error",
-        title: `Ocurrió un error al cargar el catálogo: ${CATALOG_NAME}.`,
-        description: "Error: " + ex,
-      });
-    }
-  }, []);
-
-  return data;
-};
-
-const useGetReduxCatalog = <T>(
-  CATALOG_NAME: CATALOGS_NAMES,
-  { online = false, wheres = [], otherParams }: ReduxParamsConfig = {}
-): CatalogType<T> => {
-  const fetcher = useFetcher<
-    | {
-        title: string;
-        description: string;
-        type: AlertType;
-      }
-    | { [key: string]: T[] }
-  >();
-  const dispatch = useAppDispatch();
-  const catalogData = useAppSelector((state) => state.catalogs[CATALOG_NAME]);
-  const [data, setData] = useState<CatalogType<T>>({
-    data: catalogData?.data?.length ? (catalogData.data as T[]) : [],
-    loading: catalogData.loading,
-  });
-
-  useEffect(() => {
-    if (fetcher.data?.description) {
-      showAlert({
-        description: fetcher.data?.description?.toString(),
-        title: fetcher.data?.title?.toString(),
-        type: fetcher.data?.type?.toString() as AlertType,
-      });
-    }
-  }, [fetcher.data]);
-
-  useEffect(() => {
-    if (fetcher.state === "idle" && fetcher.data != null) {
-      const receivedData = fetcher.data as { [key: string]: T[] };
-      if (receivedData) {
-        setData({ data: receivedData[CATALOG_NAME], loading: false });
-        dispatch(
-          catalogsFetchSuccess({
-            name: CATALOG_NAME,
-            data: receivedData[CATALOG_NAME],
-          })
-        );
-      }
-    }
-  }, [fetcher, dispatch, CATALOG_NAME]);
-
-  useEffect(() => {
-    if (catalogData?.data?.length <= 0 || catalogData?.reFetch || online) {
-      try {
-        setData({ ...data, loading: true });
-        dispatch(catalogsFetchStart(CATALOG_NAME));
-        // Convierte cada elemento del array a una cadena codificada para URL
-        const encodedWheres = wheres.map((where) => encodeURIComponent(where));
-        // Une los elementos codificados con '&'
-        const wheresQueryParam = encodedWheres.join("&");
-
-        // Convert otherParams to query string
-        const paramsString = otherParams
-          ? Object.entries(otherParams)
-              .map(([key, value]) => `${key}=${value}`)
-              .join("&")
-          : "";
-
-        fetcher.load(
-          `/api/catalogs?catalog=${CATALOG_NAME}&wheres=${wheresQueryParam}${
-            paramsString ? `&${paramsString}` : ""
-          }`
-        );
-      } catch (ex) {
-        showAlert({
-          type: "error",
-          title: `Ocurrió un error al cargar el catálogo: ${CATALOG_NAME}.`,
-          description: "Error: " + ex,
-        });
-      }
-    }
-  }, []);
-
-  return data;
-};
-
-/**
- *
- * ======================= HOOKS
- */
-export const useGetItems = (
-  config?: ReduxParamsConfig
-): {
-  loading: boolean;
-  data: ItemGraphQL[];
-} => useGetReduxCatalog<ItemGraphQL>("items", config);
-
-export const useGetItemsByReception = (
-  config?: ReduxParamsConfig
-): {
-  loading: boolean;
-  data: ItemGraphQL[];
-} => useGetReduxCatalog<ItemGraphQL>("itemsByReception", config);
-
-export const useGetItemsByLab = (
-  config?: ReduxParamsConfig
-): {
-  loading: boolean;
-  data: ItemGraphQL[];
-} => useGetReduxCatalog<ItemGraphQL>("itemsByLab", config);
-
-export const useGetMyAgencyLotStocks = (
-  config?: ReduxParamsConfig
-): {
-  loading: boolean;
-  data: LotStockGraphQL[];
-} => useGetReduxCatalog<LotStockGraphQL>("myAgencyLotStocks", config);
-
-export const useGetItemServicesByLab = (
-  config?: ReduxParamsConfig
-): {
-  loading: boolean;
-  data: ItemGraphQL[];
-} => useGetReduxCatalog<ItemGraphQL>("itemServicesByLab", config);
-
-export const useGetItemCategoriesForLab = (
-  config?: ReduxParamsConfig
-): {
-  loading: boolean;
-  data: ItemCategoryGraphQL[];
-} => useGetReduxCatalog<ItemCategoryGraphQL>("itemCategoriesForLab", config);
-
-export const useGetBookings = (
-  config?: ReduxParamsConfig
-): {
-  loading: boolean;
-  data: ShipmentGraphQL[];
-} => useGetReduxCatalog<ShipmentGraphQL>("bookings", config);
-
-export const useGetTemplates = (
-  config?: ReduxParamsConfig
-): {
-  loading: boolean;
-  data: WebAppRowGraphQL<Template>[];
-} => useGetReduxCatalog<WebAppRowGraphQL<Template>>("templates", config);
-
-export const useGetPayeeCategoriesLabPrices = (
-  config: {
-    withPriceListIdNull: boolean;
-  } = { withPriceListIdNull: false }
-): {
-  loading: boolean;
-  data: PayeeCategoryGraphQL[];
-} => {
-  const data = useGetReduxCatalog<PayeeCategoryGraphQL>(
-    "payeeCategoriesLabPrices"
-  );
-
-  let tempData = data.data;
-  if (!config.withPriceListIdNull) {
-    tempData = data.data.filter((x) => x.price_list_id);
-  }
-
-  return { ...data, data: tempData };
-};
-
-export const useGetBundlesRecipForLab = (
-  config?: ReduxParamsConfig
-): {
-  loading: boolean;
-  data: BundleGraphQL[];
-} => useGetReduxCatalog<BundleGraphQL>("bundlesRecipForLab", config);
-
-export const useGetBundlesForLab = (
-  config?: ReduxParamsConfig
-): {
-  loading: boolean;
-  data: BundleGraphQL[];
-} => useGetReduxCatalog<BundleGraphQL>("bundlesForLab", config);
-
-export const useGetCurrencies = (
-  config?: ReduxParamsConfig
-): {
-  loading: boolean;
-  data: CurrencyGraphQL[];
-} => useGetReduxCatalog<CurrencyGraphQL>("currencies", config);
-
-export const useGetReceptionTypes = (
-  config?: ReduxParamsConfig
-): {
-  loading: boolean;
-  data: WebAppRowGraphQL<ReceptionType>[];
-} =>
-  useGetReduxCatalog<WebAppRowGraphQL<ReceptionType>>("receptionTypes", config);
-
-export const useGetProviders = (
-  config?: ReduxParamsConfig
-): {
-  loading: boolean;
-  data: PayeeGraphQL[];
-} => useGetReduxCatalog<PayeeGraphQL>("providers", config);
-
-export const useGetMyCases = (
-  config?: ReduxParamsConfig
-): {
-  loading: boolean;
-  data: CaseGraphQL[];
-} => useGetReduxCatalog<CaseGraphQL>("myCases", config);
-
-export const useGetProviderCategories = (
-  config?: ReduxParamsConfig
-): {
-  loading: boolean;
-  data: PayeeCategoryGraphQL[];
-} => useGetReduxCatalog<PayeeCategoryGraphQL>("providerCategories", config);
-
-export const useGetClientCategories = (
-  config?: ReduxParamsConfig
-): {
-  loading: boolean;
-  data: PayeeCategoryGraphQL[];
-} => useGetReduxCatalog<PayeeCategoryGraphQL>("clientCategories", config);
-
-export const useGetPayees = (
-  config?: ReduxParamsConfig
-): {
-  loading: boolean;
-  data: PayeeGraphQL[];
-} => useGetReduxCatalog<PayeeGraphQL>("payees", config);
-
-export const useGetPayeesForLab = (
-  config?: ReduxParamsConfig
-): {
-  loading: boolean;
-  data: PayeeGraphQL[];
-} => useGetReduxCatalog<PayeeGraphQL>("payeesForLab", config);
-
-export const useGetAgencies = (
-  config?: ReduxParamsConfig
-): {
-  loading: boolean;
-  data: AgencyGraphQL[];
-} => useGetReduxCatalog<AgencyGraphQL>("agencies", config);
-
-export const useGetSuggestedPrices = (
-  config?: ReduxParamsConfig
-): {
-  loading: boolean;
-  data: SuggestedPriceGraphQL[];
-} => useGetReduxCatalog<SuggestedPriceGraphQL>("suggestedPrices", config);
-
-export const useGetPaymentTerms = (
-  config?: ReduxParamsConfig
-): {
-  loading: boolean;
-  data: PaymentTermGraphQL[];
-} => useGetReduxCatalog<PaymentTermGraphQL>("paymentTerms", config);
-
-export const useGetEmployeesByLab = (
-  config?: ReduxParamsConfig
-): {
-  loading: boolean;
-  data: EmployeeGraphQL[];
-} => useGetReduxCatalog<EmployeeGraphQL>("employeesByLab", config);
-
-export const useGetEmployeesByCurrentAgency = (
-  config?: ReduxParamsConfig
-): {
-  loading: boolean;
-  data: EmployeeGraphQL[];
-} => useGetReduxCatalog<EmployeeGraphQL>("employeesByCurrentAgency", config);
-
-export const useGetShipmentsToMyAgency = (
-  config?: ReduxParamsConfig
-): {
-  loading: boolean;
-  data: ShipmentGraphQL[];
-} => useGetReduxCatalog<ShipmentGraphQL>("shipmentsToMyAgency", config);
-
-export const useGetInvoicesByLab = (
-  config?: ReduxParamsConfig
-): {
-  loading: boolean;
-  data: InvoiceGraphQL[];
-} => useGetReduxCatalog<InvoiceGraphQL>("invoicesByLab", config);
-
-export const useGetTiposDeMuestra = (
-  config?: ReduxParamsConfig
-): {
-  loading: boolean;
-  data: WebAppRowGraphQL<TipoMuestra>[];
-} =>
-  useGetReduxCatalog<WebAppRowGraphQL<TipoMuestra>>("tiposDeMuestra", config);
-
-export const useGetMotivosDeRechazo = (
-  config?: ReduxParamsConfig
-): {
-  loading: boolean;
-  data: WebAppRowGraphQL<MotivoRechazo>[];
-} =>
-  useGetReduxCatalog<WebAppRowGraphQL<MotivoRechazo>>("motivosRechazo", config);
-
-export const useGetBitacoraRechazoMasivo = (
-  config?: ReduxParamsConfig
-): {
-  loading: boolean;
-  data: WebAppRowGraphQL<BitacoraPOMassive>[];
-} =>
-  useGetReduxCatalog<WebAppRowGraphQL<BitacoraPOMassive>>(
-    "bitacoraRechazoMasivo",
-    config
-  );
-
-export const useGetInvoiceForms = (
-  config?: ReduxParamsConfig
-): {
-  loading: boolean;
-  data: FormGraphQL[];
-} => {
-  const data = useGetReduxCatalog<FormGraphQL>("invoiceForms", config);
-
-  // Filtrar los registros para obtener sólo los de la versión más alta.
-  const groupedByVersion = (data.data || []).reduce((acc, record) => {
-    const zid = record.zid;
-
-    if (!acc[zid]) {
-      acc[zid] = record;
-    }
-
-    return acc;
-  }, {} as { [key: string]: FormGraphQL });
-
-  const latestVersionRecords = Object.values(groupedByVersion);
-
-  return {
-    loading: data.loading,
-    data: latestVersionRecords.filter((x) => x.active),
-  };
-};
-
-export const useGetCaseForms = (
-  config?: ReduxParamsConfig
-): {
-  loading: boolean;
-  data: FormGraphQL[];
-} => {
-  const data = useGetReduxCatalog<FormGraphQL>("caseForms", config);
-
-  // Filtrar los registros para obtener sólo el primero de cada zid.
-  const firstRecordByZid = (data.data || []).reduce((acc, record) => {
-    const zid = record.zid;
-
-    if (!acc[zid]) {
-      acc[zid] = record;
-    }
-
-    return acc;
-  }, {} as { [key: string]: FormGraphQL });
-
-  const firstRecords = Object.values(firstRecordByZid);
-
-  return {
-    loading: data.loading,
-    data: firstRecords.filter((x) => x.active),
-  };
-};
-
-export const useGetInvoiceFormSubmissionsByAgencyId = (
-  agency_id: number | string
-): {
-  loading: boolean;
-  data: SubmissionInvoicesGraphQL[];
-} => {
-  const data = useApiCatalog<SubmissionInvoicesGraphQL>(
-    "invoiceFormSubmissionsByAgencyId",
-    {
-      agency_id: `${agency_id}`,
-    }
-  );
-  // Filtrar los registros para obtener sólo los de la versión más alta.
-  const groupedByVersion = (data.data || []).reduce((acc, record) => {
-    const zid = record.settings_form_submission.zid;
-
-    if (!acc[zid]) {
-      acc[zid] = record;
-    }
-
-    return acc;
-  }, {} as { [key: string]: SubmissionInvoicesGraphQL });
-
-  const latestVersionRecords = Object.values(groupedByVersion);
-
-  return {
-    loading: data.loading,
-    data: latestVersionRecords,
-  };
-};
-
-export const useGetMyCaseFormSubmissions = (
-  config?: ReduxParamsConfig
-): {
-  loading: boolean;
-  data: SubmissionCasesGraphQL[];
-} => {
-  const data = useGetReduxCatalog<SubmissionCasesGraphQL>(
-    "myCaseFormSubmissions",
-    config
-  );
-  // Filtrar los registros para obtener sólo los de la versión más alta.
-  const groupedByVersion = (data.data || []).reduce((acc, record) => {
-    const zid = record.settings_form_submission.zid;
-
-    if (!acc[zid]) {
-      acc[zid] = record;
-    }
-
-    return acc;
-  }, {} as { [key: string]: SubmissionCasesGraphQL });
-
-  const latestVersionRecords = Object.values(groupedByVersion);
-
-  return {
-    loading: data.loading,
-    data: latestVersionRecords,
-  };
-};
-
-export const useGetInvoiceFormSubmissionsByInvoiceId = (
-  invoice_id: number | string
-): {
-  loading: boolean;
-  data: SubmissionInvoicesGraphQL[];
-} => {
-  const data = useApiCatalog<SubmissionInvoicesGraphQL>(
-    "invoiceFormSubmissionsByInvoiceId",
-    {
-      invoice_id: `${invoice_id}`,
-    }
-  );
-
-  // Filtrar los registros para obtener sólo los de la versión más alta.
-  const groupedByVersion = (data.data || []).reduce((acc, record) => {
-    const zid = record.settings_form_submission.zid;
-
-    if (!acc[zid]) {
-      acc[zid] = record;
-    }
-
-    return acc;
-  }, {} as { [key: string]: SubmissionInvoicesGraphQL });
-
-  const latestVersionRecords = Object.values(groupedByVersion);
-
-  return {
-    loading: data.loading,
-    data: latestVersionRecords,
-  };
-};

package/src/components/Alert.tsx

@@ -1,149 +0,0 @@
-import React, { useState, useRef, useEffect } from "react";
-import { ExitSvg } from "@zauru-sdk/icons";
-import { createRoot } from "react-dom/client";
-import { AnimatePresence, motion } from "framer-motion";
-
-export type AlertType = "success" | "error" | "info" | "warning";
-
-export type AlertProps = {
-  type: AlertType;
-  title: string;
-  description: string;
-  onClose?: () => void;
-};
-
-const Alert: React.FC<AlertProps> = ({ type, title, description, onClose }) => {
-  const [, setLifetime] = useState(4000);
-  const [progress, setProgress] = useState(0);
-  const intervalRef = useRef<any>(null);
-
-  const getColor = () => {
-    switch (type) {
-      case "success":
-        return "bg-green-100 text-green-800";
-      case "error":
-        return "bg-red-100 text-red-800";
-      case "info":
-        return "bg-blue-100 text-blue-800";
-      case "warning":
-        return "bg-yellow-100 text-yellow-800";
-      default:
-        return "bg-gray-100 text-gray-800";
-    }
-  };
-
-  useEffect(() => {
-    const startTimer = () => {
-      intervalRef.current = setInterval(() => {
-        setLifetime((lifetime) => {
-          if (lifetime <= 0) {
-            onClose && onClose();
-            clearInterval(intervalRef.current);
-            return 0;
-          } else {
-            setProgress((4000 - lifetime) / 4000);
-            return lifetime - 50;
-          }
-        });
-      }, 50);
-    };
-
-    const pauseTimer = () => {
-      clearInterval(intervalRef.current);
-    };
-
-    startTimer();
-    return () => {
-      pauseTimer();
-    };
-  }, [onClose]);
-
-  return (
-    <motion.div
-      initial={{ y: -50, opacity: 0 }}
-      animate={{ y: 0, opacity: 1 }}
-      exit={{ y: -50, opacity: 0 }}
-      className={`fixed top-0 right-0 w-80 mt-10 mr-10 rounded-md shadow-lg ${getColor()} p-4 transition-transform duration-300`}
-      style={{
-        zIndex: 1000,
-        transform: `translateY(calc(var(--alert-offset, 0)))`,
-      }}
-      onMouseEnter={() => clearInterval(intervalRef.current)}
-      onMouseLeave={() => {
-        intervalRef.current = setInterval(() => {
-          setLifetime((lifetime) => {
-            if (lifetime <= 0) {
-              onClose && onClose();
-              clearInterval(intervalRef.current);
-              return 0;
-            } else {
-              setProgress((4000 - lifetime) / 4000);
-              return lifetime - 50;
-            }
-          });
-        }, 50);
-      }}
-    >
-      <div className="flex items-center justify-between">
-        <h3 className="font-semibold">{title}</h3>
-        <button
-          className="text-gray-400 hover:text-gray-500 focus:outline-none focus:text-gray-500 transition duration-150 ease-in-out"
-          onClick={() => {
-            setLifetime(0);
-            onClose && onClose();
-          }}
-        >
-          <ExitSvg />
-        </button>
-      </div>
-      <div className="mt-2">
-        <p className="text-sm overflow-wrap break-words">{description}</p>
-      </div>
-      <div className="relative h-1 mt-4 bg-gray-200 rounded">
-        <div
-          className={`absolute left-0 top-0 h-full ${getColor()} rounded`}
-          style={{ width: `${progress * 100}%` }}
-        ></div>
-      </div>
-    </motion.div>
-  );
-};
-
-let activeAlerts: HTMLElement[] = [];
-
-export const showAlert = (alertProps: AlertProps) => {
-  if (typeof document === "undefined") {
-    return;
-  }
-  const container = document.createElement("div");
-  document.body.appendChild(container);
-
-  const onClose = () => {
-    root.unmount();
-    container.remove();
-    activeAlerts = activeAlerts.filter((alert) => alert !== container);
-    updateAlertOffsets();
-  };
-
-  const asyncOnClose = () => {
-    setTimeout(() => {
-      onClose();
-    }, 0);
-  };
-
-  activeAlerts.push(container);
-  updateAlertOffsets();
-
-  const root = createRoot(container);
-  root.render(
-    <AnimatePresence>
-      <Alert {...alertProps} onClose={asyncOnClose} />
-    </AnimatePresence>
-  );
-};
-
-const updateAlertOffsets = () => {
-  activeAlerts.forEach((alertContainer, index) => {
-    alertContainer.style.setProperty("--alert-offset", `${index * 100}px`);
-  });
-};

package/src/components/index.ts

@@ -1 +0,0 @@
-export * from "./Alert.js";

package/src/index.ts

@@ -1,11 +0,0 @@
-export * from "./components/index.js";
-
-export * from "./alerts.js";
-export * from "./automaticNumbers.js";
-export * from "./catalogs.js";
-export * from "./onlineStatus.js";
-export * from "./profiles.js";
-export * from "./receptions.js";
-export * from "./session.js";
-export * from "./templates.js";
-export * from "./useWindowDimensions.js";