npm-pkg-hook 1.3.9 → 1.4.2

package/package.json

@@ -43,5 +43,5 @@
     "rm": "rm -rf node_modules package-lock.json && npm i",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "version": "1.3.9"
+  "version": "1.4.2"
 }

package/src/hooks/generateStoreURL/index.js

@@ -0,0 +1,32 @@
+/**
+ * Generate the store URL based on given parameters
+ * @param {Object} city - The city object with name
+ * @param {Object} department - The department object with name
+ * @param {string} storeName - The name of the store
+ * @param {string} idStore - The ID of the store
+ * @returns {string} - The generated URL or null if any field is missing
+ */
+export const generateStoreURL = ({ city, department, storeName, idStore }) => {
+  try {
+    // Validate all necessary fields
+    if (
+      !process.env.MAIN_URL_BASE ||
+        !city?.cName ||
+        !department?.dName ||
+        !storeName ||
+        !idStore
+    ) {
+      return null // Return null or any default case you'd prefer
+    }
+
+    const cityName = city.cName.toLocaleLowerCase()
+    const departmentName = department.dName.toLocaleLowerCase()
+
+    // Replace spaces in storeName with hyphens
+    const formattedStoreName = storeName.replace(/\s+/g, '-')
+
+    return `${process.env.MAIN_URL_BASE}/delivery/${cityName}-${departmentName}/${formattedStoreName}/${idStore}`
+  } catch (_) {
+    return null
+  }
+}

package/src/hooks/index.js

@@ -10,7 +10,15 @@ export * from './useLogout'
 export * from './useStatusOpenStore'
 export * from './useScheduleData'
 export * from './useOrders'
+export * from './usePushNotifications'
+export * from './useLocationManager'
 export * from './useFingerprintjs'
+export * from './useCountries'
+export * from './generateStoreURL'
+export * from './useCreateStorePendingToRegister'
+export * from './useDepartments'
+export * from './useRoads'
+export * from './useCities'
 export * from './useEditCategory'
 export * from './useEmployee'
 export * from './useCheckbox'

package/src/hooks/useAllStoresPendingToRegister/index.js

@@ -0,0 +1,34 @@
+import { gql, useQuery } from '@apollo/client'
+import { useEffect, useState } from 'react'
+
+export const GET_ALL_STORES_PENDING_TO_REGISTER = gql`
+  query GetAllStoresPendingToRegister {
+    getAllStoresPendingToRegister {
+        StorePendingToRegisterId
+    UserId
+    UserEmail
+    StoreNumber
+    createAt
+    updateAt
+    }
+  }
+`
+
+export function useAllStoresPendingToRegister () {
+  const { loading, error, data } = useQuery(GET_ALL_STORES_PENDING_TO_REGISTER)
+
+  const [stores, setStores] = useState([])
+  const [fetchError, setFetchError] = useState(null)
+
+  useEffect(() => {
+    if (!loading && data) {
+      setStores(data.getAllStoresPendingToRegister)
+    }
+
+    if (error) {
+      setFetchError(error.message)
+    }
+  }, [loading, data, error])
+
+  return { loading, stores, fetchError }
+}

package/src/hooks/useCategoryStore/index.js

@@ -2,6 +2,6 @@ import { useQuery } from '@apollo/client'
 import { GET_ALL_CAT_STORE } from './queries'
 
 export const useCategoryStore = () => {
-  const { data } = useQuery(GET_ALL_CAT_STORE)
-  return [data]
+  const { data, loading } = useQuery(GET_ALL_CAT_STORE)
+  return [data, { loading }]
 }

package/src/hooks/useCities/index.js

@@ -0,0 +1,13 @@
+import { useLazyQuery } from '@apollo/client'
+import { GET_ALL_CITIES } from './queries'
+
+/**
+ * Custom hook to fetch cities lazily based on the provided department ID.
+ *
+ * @returns {Array} - Returns an array containing a function to execute the query, and an object containing data and any associated query state/error.
+ */
+export function useCities () {
+  const [getCities, { data, loading, error }] = useLazyQuery(GET_ALL_CITIES)
+
+  return [getCities, { data: data ? data?.cities : [], loading, error }]
+}

package/src/hooks/useCities/queries.js

@@ -0,0 +1,12 @@
+import gql from 'graphql-tag'
+
+export const GET_ALL_CITIES = gql`
+    query getAllCities($dId: ID!) {
+        cities(dId: $dId) {
+            ctId
+            dId
+            cName
+            cState
+        }
+    }
+`

package/src/hooks/useClients/index.js

@@ -1,4 +1,8 @@
-import { useQuery, useMutation, useLazyQuery } from '@apollo/client'
+import {
+  useQuery,
+  useMutation,
+  useLazyQuery
+} from '@apollo/client'
 import {
   CREATE_CLIENTS,
   DELETE_ONE_CLIENTS,
@@ -28,11 +32,11 @@ export const useDeleteClients = ({ sendNotification = () => { } } = {}) => {
 export const useCreateClient = ({ sendNotification = () => { } } = {}) => {
   const [createClients, { loading, error }] = useMutation(CREATE_CLIENTS, {
     onError: (data) => {
-      // sendNotification({
-      //   title:  '',
-      //   description: 'Error',
-      //   backgroundColor: 'error'
-      // })
+      sendNotification({
+        title: '',
+        description: 'Error',
+        backgroundColor: 'error'
+      })
     }
   })
 

package/src/hooks/useCountries/index.js

@@ -0,0 +1,19 @@
+import { useQuery } from '@apollo/client'
+import { GET_ALL_COUNTRIES } from './queries'
+/**
+
+ * Hook personalizado para obtener todos los países.
+ *
+ * @returns {Object} - Retorna un objeto con la data de los países y cualquier otro estado/error relacionado con la consulta.
+ */
+export function useCountries () {
+  const { data, loading, error } = useQuery(GET_ALL_COUNTRIES)
+
+  // Aquí puedes manejar la lógica adicional que necesites, como mapear la data, manejar errores, etc.
+
+  return {
+    data: data ? data.countries : [],
+    loading,
+    error
+  }
+}

package/src/hooks/useCountries/queries.js

@@ -0,0 +1,12 @@
+import { gql } from '@apollo/client'
+
+export const GET_ALL_COUNTRIES = gql`
+    query countries {
+        countries {
+            cId
+            cName
+            cCalCod
+            cState
+        }
+    }
+`

package/src/hooks/useCreateProduct/helpers/index.js

@@ -0,0 +1,23 @@
+const MAX_PRICE = 2147483647
+
+/**
+ * Verifica si alguno de los valores en el array excede el precio máximo.
+ *
+ * @param {Array<number>} values - Lista de valores a verificar.
+ * @param {Function} sendNotification - Función para enviar notificaciones.
+ * @returns {boolean} - Retorna `true` si todos los valores están en rango, `false` si alguno excede el máximo.
+ */
+export const verifyPriceInRange = ({ values = [], sendNotification }) => {
+  const isAnyValueOutOfRange = values.some(value => value > MAX_PRICE)
+
+  if (isAnyValueOutOfRange) {
+    sendNotification({
+      backgroundColor: 'warning',
+      title: 'Alerta',
+      description: 'El valor es muy elevado'
+    })
+    return false
+  }
+
+  return true
+}

package/src/hooks/useCreateProduct/index.js

@@ -12,6 +12,7 @@ import { useStore } from '../useStore'
 import { useTagsProducts } from './../useProductsFood/usetagsProducts'
 import { useEditImageProduct } from './helpers/useEditImageProduct'
 import { getCatProductsWithProduct } from './helpers/manageCacheDataCatProduct'
+export * from './helpers'
 
 export const useCreateProduct = ({
   setAlertBox = () => { },
@@ -92,7 +93,6 @@ export const useCreateProduct = ({
     setSearchFilter({ ...filter })
   }
   const handleCheckFreeShipping = e => {
-    // setCheck(e.target.checked)
     handleCheck(e)
     setValues({
       ...values,
@@ -100,7 +100,7 @@ export const useCreateProduct = ({
     })
   }
 
-  const [updateProductFoods] = useMutation(UPDATE_PRODUCT_FOOD, {
+  const [updateProductFoods, { loading }] = useMutation(UPDATE_PRODUCT_FOOD, {
   })
   const [setImageProducts] = useMutation(UPDATE_IMAGE_PRODUCT_FOOD, {
     context: { clientName: 'admin-server' }
@@ -140,6 +140,7 @@ export const useCreateProduct = ({
       ValueDelivery,
       carProId
     } = values
+    const formatPrice = ProPrice ? parseFloat(ProPrice?.replace(/\./g, '')) : 0
     if (!carProId && !names) return setErrors({ ...errors, carProId: true })
 
     if (!ProPrice?.length > 0) {
@@ -147,7 +148,6 @@ export const useCreateProduct = ({
     }
     const ProImage = `https:${process.env.URL_ADMIN_SERVER}static/platos/${image?.name}`
     const pCode = RandomCode(9)
-    const formatPrice = ProPrice ? parseFloat(ProPrice.replace(/\./g, '')) : 0
     try {
       updateProductFoods({
         variables: {
@@ -207,7 +207,7 @@ export const useCreateProduct = ({
           nameTag: tags.tag,
           pId
         }
-        handleRegisterTags(objTag)
+        if (tags?.tag) handleRegisterTags(objTag)
         setValues({})
       }).catch(err => {
         return sendNotification({
@@ -265,6 +265,7 @@ export const useCreateProduct = ({
     pId,
     dataTags: data,
     tags,
+    loading,
     active,
     idStore: dataStore?.getStore?.idStore || '',
     arrTags,
@@ -277,6 +278,7 @@ export const useCreateProduct = ({
     onClickSearch,
     changeHandler,
     setErrors,
+    setCheck,
     handleRegister,
     setActive,
     onFileInputChange,

package/src/hooks/useCreateStorePendingToRegister/index.js

@@ -0,0 +1,13 @@
+import { useMutation } from '@apollo/client'
+import { CREATE_STORE_PENDING_TO_REGISTER } from './queries'
+
+export function useCreateStorePendingToRegister () {
+  const [createStorePendingToRegister, { data, loading, error }] = useMutation(CREATE_STORE_PENDING_TO_REGISTER)
+
+  return {
+    createStorePendingToRegister,
+    data,
+    loading,
+    error
+  }
+}

package/src/hooks/useCreateStorePendingToRegister/queries.js

@@ -0,0 +1,10 @@
+import gql from 'graphql-tag'
+
+export const CREATE_STORE_PENDING_TO_REGISTER = gql`
+  mutation createStorePendingToRegister($input: StorePendingToRegisterInput) {
+    createStorePendingToRegister(input: $input) {
+      success
+      message
+    }
+  }
+`

package/src/hooks/useDepartments/index.js

@@ -0,0 +1,13 @@
+import { useLazyQuery } from '@apollo/client'
+import { GET_ALL_DEPARTMENTS } from './queries'
+
+/**
+ * Custom hook to fetch departments lazily based on the provided company ID.
+ *
+ * @returns {Array} - Returns an array containing a function to execute the query, and an object containing data and any associated query state/error.
+ */
+export function useDepartments () {
+  const [getDepartments, { data, loading, error }] = useLazyQuery(GET_ALL_DEPARTMENTS)
+
+  return [getDepartments, { data: data ? data?.departments : [], loading, error }]
+}

package/src/hooks/useDepartments/queries.js

@@ -0,0 +1,12 @@
+import gql from 'graphql-tag'
+
+export const GET_ALL_DEPARTMENTS = gql`
+    query getAllDepartments($cId: ID!) {
+        departments(cId: $cId) {
+            dId
+            cId
+            dName
+            dState
+        }
+    }
+`

package/src/hooks/useDessert/index.js

@@ -25,6 +25,9 @@ export const useDessert = ({
   const [title, setTitle] = useState('') // State for title input value
   // Initialize the data state with the transformedData or MockData
   const [data, setData] = useState(MockData)
+  const handleCleanData = () => {
+    setData(MockData)
+  }
   const dataListIds = data?.listIds?.filter(x => x !== '01list')
 
   /**
@@ -56,11 +59,11 @@ export const useDessert = ({
     if (initialData) {
       // Only update the data state if it's different from initialData
       if (JSON.stringify(data) !== JSON.stringify(transformDataToDessert(initialData))) {
-        const transformedInitialData = transformDataToDessert(initialData);
-        setData(transformedInitialData);
+        const transformedInitialData = transformDataToDessert(initialData)
+        setData(transformedInitialData)
       }
     }
-  }, [initialData]);  // Include data as a dependency
+  }, [initialData]) // Include data as a dependency
 
   // Filter the 'listIds' from 'data' and store the filtered result in 'dataListIds'
   // Here, it seems to exclude a specific list ID ('01list') from the listIds.
@@ -207,51 +210,51 @@ export const useDessert = ({
     title = null
   }) => {
     try {
-        setSelectedItem(() => {
-          return { listID, id }
-        })
-        const currentList = data.lists[listID];
-        const findItem = currentList?.cards?.find(item => item.id === id)
-        const checkDifferentText = findItem?.title !== title
-        if (title && checkDifferentText) {
-          editExtFoodSubsOptional({
-            variables: {
-              isCustomSubOpExPid: false,
-              opSubExPid: id,
-              OptionalSubProName: title
-            }
-          }).then(({ data: response }) => {
-            const { editExtFoodSubsOptional } = response || {}
-            const { success } = editExtFoodSubsOptional || { success: false }
-            if (success) {
-              sendNotification({
-                description: 'El sub item actualizado con exito',
-                title: 'Actualizado',
-                backgroundColor: 'success'
-              })
-              const currentList = data.lists[listID];
-              const updatedCards = currentList?.cards?.map((card) => {
-                if (card.id === id) {
-                  return {
-                    ...card,
-                    title: title
-                  };
+      setSelectedItem(() => {
+        return { listID, id }
+      })
+      const currentList = data.lists[listID]
+      const findItem = currentList?.cards?.find(item => item.id === id)
+      const checkDifferentText = findItem?.title !== title
+      if (title && checkDifferentText) {
+        editExtFoodSubsOptional({
+          variables: {
+            isCustomSubOpExPid: false,
+            opSubExPid: id,
+            OptionalSubProName: title
+          }
+        }).then(({ data: response }) => {
+          const { editExtFoodSubsOptional } = response || {}
+          const { success } = editExtFoodSubsOptional || { success: false }
+          if (success) {
+            sendNotification({
+              description: 'El sub item actualizado con exito',
+              title: 'Actualizado',
+              backgroundColor: 'success'
+            })
+            const currentList = data.lists[listID]
+            const updatedCards = currentList?.cards?.map((card) => {
+              if (card.id === id) {
+                return {
+                  ...card,
+                  title
                 }
-                return card;
-              });
-              setData({
-                listIds: [...data.listIds],
-                lists: {
-                  ...data.lists,
-                  [listID]: {
-                    ...currentList,
-                    cards: updatedCards
-                  }
+              }
+              return card
+            })
+            setData({
+              listIds: [...data.listIds],
+              lists: {
+                ...data.lists,
+                [listID]: {
+                  ...currentList,
+                  cards: updatedCards
                 }
-              });
-            }
-          })
-        }
+              }
+            })
+          }
+        })
+      }
     } catch (error) {
       console.error(error)
     }
@@ -267,15 +270,15 @@ export const useDessert = ({
           ...prevData.lists[listId],
           ...updatedFields
         }
-      };
+      }
 
       return {
         ...prevData,
         lists: updatedLists
-      };
-    });
-  };
-/**
+      }
+    })
+  }
+  /**
  * Edit a extra.
  * @async
  * @param {Object} options - Opciones para la edición del extra.
@@ -294,7 +297,7 @@ export const useDessert = ({
   }) => {
     try {
       if (id) {
-  const response = await handleUpdateExtProduct({
+        const response = await handleUpdateExtProduct({
           opExPid: id,
           code: id,
           OptionalProName: title,
@@ -302,11 +305,13 @@ export const useDessert = ({
           numbersOptionalOnly: numberLimit
         })
         const { data } = response || {}
-        if (!data?.updateExtProductFoodsOptional) return  sendNotification({
-          description: 'Ocurrió un error, intenta de nuevo',
-          title: 'Error',
-          backgroundColor: 'warning'
-        })
+        if (!data?.updateExtProductFoodsOptional) {
+          return sendNotification({
+            description: 'Ocurrió un error, intenta de nuevo',
+            title: 'Error',
+            backgroundColor: 'warning'
+          })
+        }
         const { success, message } = data?.updateExtProductFoodsOptional || {}
         if (success) {
           setSelectedExtra({})
@@ -317,18 +322,20 @@ export const useDessert = ({
             backgroundColor: 'success'
           })
           return updateListById(id, {
-            title: title,
-            numberLimit: numberLimit,
+            title,
+            numberLimit,
             required: required ? 1 : 0
-          });
+          })
         }
       }
 
-      if (!id) return sendNotification({
-        description: 'Ocurrió un error, intenta de nuevo',
-        title: 'Error',
-        backgroundColor: 'warning'
-      })
+      if (!id) {
+        return sendNotification({
+          description: 'Ocurrió un error, intenta de nuevo',
+          title: 'Error',
+          backgroundColor: 'warning'
+        })
+      }
     } catch (error) {
       setSelectedExtra({})
       setOpenModalEditExtra(false)
@@ -384,7 +391,7 @@ export const useDessert = ({
     // Check if the title is not empty
     if (title.trim() === '') {
       sendNotification({
-        description: 'El titulo no debe estar vacio',
+        description: 'El titulo no debe estar vacío',
         title: 'Error',
         backgroundColor: 'warning'
       })
@@ -471,11 +478,12 @@ export const useDessert = ({
     setCheck,
     selectedItem,
     setData,
+    handleCleanData,
     setTitle,
     title,
     selectedExtra,
     openModalEditExtra,
     setSelectedExtra,
-    setOpenModalEditExtra,
+    setOpenModalEditExtra
   }
 }

package/src/hooks/useLocationManager/index.js

@@ -0,0 +1,61 @@
+import { useState } from 'react'
+
+/**
+ * Hook para gestionar la lógica de ubicaciones, valores y errores.
+ *
+ * @param {Function} getDepartments - Función para obtener los departamentos basado en el ID de país.
+ * @param {Function} getCities - Función para obtener las ciudades basado en el ID de departamento.
+ *
+ * @returns {Object} - Retorna los estados y funciones de manejo asociados.
+ */
+export function useLocationManager (getDepartments, getCities) {
+  const [values, setValues] = useState({})
+  const [errors, setErrors] = useState({})
+  const [showLocation, setShowLocation] = useState(true)
+
+  const handleUpdateValues = (name, value) => {
+    setValues(prevValues => ({ ...prevValues, [name]: value }))
+  }
+
+  const handleUpdateErrors = (name, error) => {
+    setErrors(prevErrors => ({ ...prevErrors, [name]: error }))
+  }
+
+  const handleCountrySearch = (value) => {
+    getDepartments({ variables: { cId: value } })
+  }
+
+  const handleDepartmentSearch = (value) => {
+    getCities({ variables: { dId: value } })
+  }
+
+  const handleChangeLocation = (e, error) => {
+    const { name, value } = e.target
+    handleUpdateValues(name, value)
+    handleUpdateErrors(name, error)
+  }
+
+  const handleChangeSearch = (e) => {
+    const { name, value } = e.target
+    switch (name) {
+      case 'countryId':
+        handleCountrySearch(value)
+        break
+      case 'dId':
+        handleDepartmentSearch(value)
+        break
+      default:
+        break
+    }
+    handleChangeLocation(e)
+  }
+
+  return {
+    values,
+    errors,
+    showLocation,
+    setShowLocation,
+    handleChangeSearch,
+    setValues
+  }
+}

package/src/hooks/useProductsFood/index.js

@@ -5,7 +5,6 @@ import {
 } from '@apollo/client'
 import { useState } from 'react'
 import {
-  GET_ALL_CATEGORIES_WITH_PRODUCT,
   GET_ALL_EXTRA_PRODUCT,
   GET_ALL_PRODUCT_STORE,
   GET_EXTRAS_PRODUCT_FOOD_OPTIONAL,
@@ -84,7 +83,8 @@ export const useDeleteProductsFood = ({ sendNotification = () => { } } = {}) =>
           pId,
           pState
         }
-      }, update (cache) {
+      },
+      update (cache) {
         cache.modify({
           fields: {
             productFoodsAll (dataOld = []) {
@@ -94,7 +94,7 @@ export const useDeleteProductsFood = ({ sendNotification = () => { } } = {}) =>
                 })
                 if (product) {
                   const newProductList = dataOld?.filter((product) => {
-                      return product?.pId !== pId
+                    return product?.pId !== pId
                   })
                   return newProductList
                 }
@@ -108,21 +108,23 @@ export const useDeleteProductsFood = ({ sendNotification = () => { } } = {}) =>
         cache.modify({
           fields: {
             getCatProductsWithProduct (dataOld = []) {
-                if (Array.isArray(dataOld?.catProductsWithProduct) && dataOld?.catProductsWithProduct?.length) {
-                  const newListCatProducts = dataOld?.catProductsWithProduct?.map((categories) => {
-                    return  {
-                      ...categories,
-                      productFoodsAll: categories?.productFoodsAll?.length ? categories?.productFoodsAll?.filter((product) => {
-                        return product?.pId !== pId
-                      }) : []
-                    }
-                  })
+              if (Array.isArray(dataOld?.catProductsWithProduct) && dataOld?.catProductsWithProduct?.length) {
+                const newListCatProducts = dataOld?.catProductsWithProduct?.map((categories) => {
                   return {
-                    catProductsWithProduct: newListCatProducts,
-                    totalCount: newListCatProducts?.length,
+                    ...categories,
+                    productFoodsAll: categories?.productFoodsAll?.length
+                      ? categories?.productFoodsAll?.filter((product) => {
+                        return product?.pId !== pId
+                      })
+                      : []
                   }
+                })
+                return {
+                  catProductsWithProduct: newListCatProducts,
+                  totalCount: newListCatProducts?.length
                 }
-                return dataOld
+              }
+              return dataOld
             }
           }
         })

package/src/hooks/usePushNotifications/helpers/index.js

@@ -0,0 +1,114 @@
+/* eslint-disable consistent-return */
+const pushServerPublicKey = 'BIN2Jc5Vmkmy-S3AUrcMlpKxJpLeVRAfu9WBqUbJ70SJOCWGCGXKY-Xzyh7HDr6KbRDGYHjqZ06OcS3BjD7uAm8'
+
+/**
+ * checks if Push notification and service workers are supported by your browser
+ */
+function isPushNotificationSupported () {
+  if (typeof window !== 'undefined' && window.Notification && window.ServiceWorker) {
+    return 'serviceWorker' in navigator && 'PushManager' in window
+  }
+}
+
+/**
+ * asks user consent to receive push notifications and returns the response of the user, one of granted, default, denied
+ */
+async function askUserPermission () {
+  return await Notification.requestPermission()
+}
+/**
+ * shows a notification
+ */
+function sendNotification () {
+  const img = '/images/jason-leung-HM6TMmevbZQ-unsplash.jpg'
+  const text = 'Take a look at this brand new t-shirt!'
+  const title = 'New Product Available'
+  const options = {
+    body: text,
+    icon: '/images/jason-leung-HM6TMmevbZQ-unsplash.jpg',
+    vibrate: [200, 100, 200],
+    tag: 'new-product',
+    image: img,
+    badge: 'https://spyna.it/icons/android-icon-192x192.png',
+    actions: [{ action: 'Detail', title: 'View', icon: 'https://via.placeholder.com/128/ff0000' }]
+  }
+  navigator.serviceWorker.ready.then(function (serviceWorker) {
+    serviceWorker.showNotification(title, options)
+  })
+}
+
+/**
+ *
+ */
+function registerServiceWorker () {
+  return navigator.serviceWorker.register('/sw.js')
+}
+
+/**
+ *
+ * using the registered service worker creates a push notification subscription and returns it
+ *
+ */
+async function createNotificationSubscription () {
+  // wait for service worker installation to be ready
+  const serviceWorker = await navigator.serviceWorker.ready
+  // subscribe and return the subscription
+  return await serviceWorker.pushManager.subscribe({
+    userVisibleOnly: true,
+    applicationServerKey: pushServerPublicKey
+  })
+}
+
+/**
+ * returns the subscription if present or nothing
+ */
+function getUserSubscription () {
+  // wait for service worker installation to be ready, and then
+  return navigator.serviceWorker.ready
+    .then(function (serviceWorker) {
+      return serviceWorker.pushManager.getSubscription()
+    })
+    .then(function (pushSubscription) {
+      return pushSubscription
+    })
+}
+
+const host = process.env.NODE_ENV === 'production' ? 'http://localhost:4000' : 'http://localhost:4000'
+
+function post (path, body) {
+  return fetch(`${host}${path}`, {
+    body: JSON.stringify(body),
+    method: 'POST',
+    mode: 'cors'
+  })
+    .then(function (response) {
+      return response.json()
+    })
+    .then(function (data) {
+      return data
+    })
+}
+
+function get (path) {
+  return fetch(`${host}${path}`, {
+    method: 'GET',
+    mode: 'cors'
+  })
+    .then(function (response) {
+      return response.json()
+    })
+    .then(function (data) {
+      return data
+    })
+}
+
+export {
+  isPushNotificationSupported,
+  askUserPermission,
+  post,
+  get,
+  registerServiceWorker,
+  sendNotification,
+  createNotificationSubscription,
+  getUserSubscription
+}

package/src/hooks/usePushNotifications/index.js

@@ -0,0 +1,149 @@
+/* eslint-disable no-console */
+import { useState, useEffect } from 'react'
+import {
+  isPushNotificationSupported,
+  post,
+  get,
+  askUserPermission,
+  registerServiceWorker,
+  createNotificationSubscription,
+  getUserSubscription
+} from './helpers'
+// import all the function created to manage the push notifications
+
+const pushNotificationSupported = isPushNotificationSupported()
+// first thing to do: check if the push notifications are supported by the browser
+
+export const usePushNotifications = () => {
+  const [userConsent, setSuserConsent] = useState()
+  useEffect(() => {
+    if (typeof Notification !== 'undefined') {
+      setSuserConsent(Notification.permission)
+    }
+  }, [])
+
+  // to manage the user consent: Notification.permission is a JavaScript native function that return the current state of the permission
+  // We initialize the userConsent with that value
+  const [userSubscription, setUserSubscription] = useState(null)
+  // to manage the use push notification subscription
+  const [pushServerSubscriptionId, setPushServerSubscriptionId] = useState()
+  // to manage the push server subscription
+  const [error, setError] = useState(null)
+  // to manage errors
+  const [loading, setLoading] = useState(true)
+  // to manage async actions
+
+  useEffect(() => {
+    if (pushNotificationSupported) {
+      setLoading(true)
+      setError(false)
+      registerServiceWorker().then(() => {
+        setLoading(false)
+      })
+    }
+  }, [])
+  // if the push notifications are supported, registers the service worker
+  // this effect runs only the first render
+
+  useEffect(() => {
+    setLoading(true)
+    setError(false)
+    const getExixtingSubscription = async () => {
+      const existingSubscription = await getUserSubscription()
+      setUserSubscription(existingSubscription)
+      setLoading(false)
+    }
+    getExixtingSubscription()
+  }, [])
+  // Retrieve if there is any push notification subscription for the registered service worker
+  // this use effect runs only in the first render
+
+  /**
+   * define a click handler that asks the user permission,
+   * it uses the setSuserConsent state, to set the consent of the user
+   * If the user denies the consent, an error is created with the setError hook
+   */
+  const onClickAskUserPermission = () => {
+    setLoading(true)
+    setError(false)
+    askUserPermission().then(consent => {
+      setSuserConsent(consent)
+      if (consent !== 'granted') {
+        setError({
+          name: 'consentimiento denegado',
+          message: 'Negaste el consentimiento para recibir notificaciones',
+          code: 0
+        })
+      }
+      setLoading(false)
+    })
+  }
+  //
+
+  /**
+   * define a click handler that creates a push notification subscription.
+   * Once the subscription is created, it uses the setUserSubscription hook
+   */
+  const onClickSusbribeToPushNotification = () => {
+    setLoading(true)
+    setError(false)
+    createNotificationSubscription()
+      .then(function (subscrition) {
+        setUserSubscription(subscrition)
+        setLoading(false)
+      })
+      .catch(err => {
+        console.error("Couldn't create the notification subscription", err, 'name:', err.name, 'message:', err.message, 'code:', err.code)
+        setError(err)
+        setLoading(false)
+      })
+  }
+
+  /**
+   * define a click handler that sends the push susbcribtion to the push server.
+   * Once the subscription ics created on the server, it saves the id using the hook setPushServerSubscriptionId
+   */
+  const onClickSendSubscriptionToPushServer = () => {
+    setLoading(true)
+    setError(false)
+    post('/subscription2', userSubscription)
+      .then(function (response) {
+        setPushServerSubscriptionId(response.id)
+        setLoading(false)
+      })
+      .catch(err => {
+        setLoading(false)
+        setError(err)
+      })
+  }
+
+  /**
+   * define a click handler that request the push server to send a notification, passing the id of the saved subscription
+   */
+  const onClickSendNotification = async () => {
+    setLoading(true)
+    setError(false)
+    console.log(pushServerSubscriptionId)
+    await get(`/subscription/${pushServerSubscriptionId}`).catch(err => {
+      setLoading(false)
+      setError(err)
+    })
+    setLoading(false)
+  }
+
+  /**
+   * returns all the stuff needed by a Component
+   */
+  return {
+    onClickAskUserPermission,
+    onClickSusbribeToPushNotification,
+    onClickSendSubscriptionToPushServer,
+    pushServerSubscriptionId,
+    onClickSendNotification,
+    userConsent,
+    pushNotificationSupported,
+    userSubscription,
+    error,
+    loading
+  }
+}

package/src/hooks/useRoads/index.js

@@ -0,0 +1,19 @@
+import { useQuery } from '@apollo/client'
+import { GET_ALL_ROAD } from './queries'
+
+/**
+ * Custom hook to fetch all roads.
+ *
+ * @returns {Object} - Returns an object containing road data and any associated query state/error.
+ */
+export function useRoads () {
+  const { data, loading, error } = useQuery(GET_ALL_ROAD)
+
+  // Here, you can handle any additional logic you might need, like mapping data, handling errors, etc.
+
+  return {
+    data: data || [],
+    loading,
+    error
+  }
+}

package/src/hooks/useRoads/queries.js

@@ -0,0 +1,13 @@
+import { gql } from '@apollo/client'
+
+export const GET_ALL_ROAD = gql`
+query getTypeRoad{
+  road{
+    rId
+    rName
+    rState
+    rDatCre
+    rDatMod
+  }
+}
+`

package/src/hooks/useSaveAvailableProduct/index.js

@@ -13,11 +13,15 @@ export const useSaveAvailableProduct = () => {
       setSelectedDays([...selectedDays, day])
     }
   }
+  const handleCleanSelectedDays = () => {
+    setSelectedDays([])
+  }
   const [registerAvailableProduct, { loading }] = useMutation(CREATE_AVAILABLE_PRODUCTS_DAYS, {
     onError: () => { return console.log({ message: 'Lo sentimos ocurrió un error, vuelve a intentarlo' }) }
   })
   return {
     handleDaySelection,
+    handleCleanSelectedDays,
     selectedDays,
     days,
     Loading: loading,