npm-pkg-hook 1.11.3 → 1.11.7

package/src/hooks/useFormatDate/index.js

@@ -1,13 +1,13 @@
 export const useFormatDate = ({
   date,
-  local = 'ES'
+  local = 'ES-CO'
 } = {}) => {
   const dateToFormat = new Date(date ?? Date.now())
   const fullDate = dateToFormat.toLocaleDateString(local, { year: 'numeric', month: '2-digit', day: '2-digit' })
   const day = fullDate.split('/')[0]
   const month = fullDate.split('/')[1]
   const year = fullDate.split('/')[2]
-  const yearMonthDay = dateToFormat.toLocaleDateString('en-CA')
+  const yearMonthDay = dateToFormat.toLocaleDateString('ES-CO')
   const numberDay = dateToFormat.getDay()
   const shortDayName = dateToFormat.toLocaleDateString(local, { weekday: 'short' })
   const longDayName = dateToFormat.toLocaleDateString(local, { weekday: 'long' })
@@ -17,9 +17,61 @@ export const useFormatDate = ({
     const hourPmAm = new Date(`1/1/1999 ${hour}`).toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true })
     return hour ? hourPmAm : ''
   }
+  /**
+   * Formats a date into Colombian time zone and Spanish locale for POS display.
+   * Example output: "15 de mayo de 2025 a las 14:23"
+   *
+   * @param {string | number | Date} dateInput - Date to format (ISO string, timestamp or Date object)
+   * @returns {string} - Formatted date string in Colombian time
+   */
+  function formatDateInTimeZone (dateInput) {
+    const timeZone = 'America/Bogota'
+    const locale = 'es-CO'
+    const options = {
+      timeZone,
+      year: 'numeric',
+      month: 'long',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false
+    }
+
+    const date = new Date(dateInput)
+    const formatted = new Intl.DateTimeFormat(locale, options).format(date)
+
+    // Cambiar coma por "a las" para mejor legibilidad
+    return formatted.replace(',', ' a las')
+  }
+  /**
+   * Formats a date into YYYY-MM-DD using a given IANA timezone.
+   *
+   * @param {string | number | Date} inputDate - The date to format.
+   * @param {string} timeZone - IANA timezone string (default is "America/Bogota").
+   * @returns {string} Formatted date string in YYYY-MM-DD.
+   * @throws {Error} If the input date is invalid.
+   */
+  const formatToLocalDateYMD = (inputDate, timeZone = 'America/Bogota') => {
+    const date = new Date(inputDate)
+
+    if (isNaN(date.getTime())) {
+      throw new Error('Invalid date input provided to formatToLocalDateYMD')
+    }
+
+    const localDateStr = date.toLocaleString('en-US', { timeZone })
+    const localDate = new Date(localDateStr)
+
+    const year = localDate.getFullYear()
+    const month = String(localDate.getMonth() + 1).padStart(2, '0')
+    const day = String(localDate.getDate()).padStart(2, '0')
+
+    return `${year}-${month}-${day}`
+  }
+
   return {
     day,
     fullDate,
+    formatToLocalDateYMD,
     hourMinutes12,
     numberDay,
     yearMonthDay,
@@ -28,6 +80,7 @@ export const useFormatDate = ({
     shortDayName,
     month,
     year,
-    handleHourPmAM
+    handleHourPmAM,
+    formatDateInTimeZone
   }
 }

package/src/hooks/useGetStoreCookie/index.js

@@ -6,7 +6,7 @@ export const useGetStoreCookie = () => {
 
   useEffect(() => {
     const getCookieValue = () => {
-      const cookieValue = Cookies.get(process.env.SESSION_NAME)
+      const cookieValue = Cookies.get(process.env.NEXT_PUBLIC_SESSION_NAME)
       console.log('Cookie Value:', cookieValue)
 
       if (cookieValue) {

package/src/hooks/useImageUploaderProduct/helper/canvasUtils.ts

@@ -0,0 +1,130 @@
+export const createImage = (url) =>
+  new Promise((resolve, reject) => {
+    const image = new Image()
+    image.addEventListener('load', () => resolve(image))
+    image.addEventListener('error', (error) => reject(error))
+    image.setAttribute('crossOrigin', 'anonymous') // needed to avoid cross-origin issues on CodeSandbox
+    image.src = url
+  })
+
+export function getRadianAngle(degreeValue) {
+  return (degreeValue * Math.PI) / 180
+}
+
+/**
+ * Returns the new bounding area of a rotated rectangle.
+ */
+export function rotateSize(width, height, rotation) {
+  const rotRad = getRadianAngle(rotation)
+
+  return {
+    width:
+      Math.abs(Math.cos(rotRad) * width) + Math.abs(Math.sin(rotRad) * height),
+    height:
+      Math.abs(Math.sin(rotRad) * width) + Math.abs(Math.cos(rotRad) * height),
+  }
+}
+
+/**
+ * This function was adapted from the one in the ReadMe of https://github.com/DominicTobias/react-image-crop
+ */
+/**
+ * This function was adapted from the one in the ReadMe of https://github.com/DominicTobias/react-image-crop
+ */
+export async function getCroppedImg(
+  imageSrc,
+  pixelCrop,
+  rotation = 0,
+  flip = { horizontal: false, vertical: false }
+) {
+  const image = await createImage(imageSrc)
+  const canvas = document.createElement('canvas')
+  const ctx = canvas.getContext('2d')
+
+  if (!ctx) {
+    return null
+  }
+
+  const rotRad = getRadianAngle(rotation)
+
+  // calculate bounding box of the rotated image
+  const { width: bBoxWidth, height: bBoxHeight } = rotateSize(
+    image.width,
+    image.height,
+    rotation
+  )
+
+  // set canvas size to match the bounding box
+  canvas.width = bBoxWidth
+  canvas.height = bBoxHeight
+
+  // translate canvas context to a central location to allow rotating and flipping around the center
+  ctx.translate(bBoxWidth / 2, bBoxHeight / 2)
+  ctx.rotate(rotRad)
+  ctx.scale(flip.horizontal ? -1 : 1, flip.vertical ? -1 : 1)
+  ctx.translate(-image.width / 2, -image.height / 2)
+
+  // draw rotated image
+  ctx.drawImage(image, 0, 0)
+
+  const croppedCanvas = document.createElement('canvas')
+
+  const croppedCtx = croppedCanvas.getContext('2d')
+
+  if (!croppedCtx) {
+    return null
+  }
+
+  // Set the size of the cropped canvas
+  croppedCanvas.width = pixelCrop.width
+  croppedCanvas.height = pixelCrop.height
+
+  // Draw the cropped image onto the new canvas
+  croppedCtx.drawImage(
+    canvas,
+    pixelCrop.x,
+    pixelCrop.y,
+    pixelCrop.width,
+    pixelCrop.height,
+    0,
+    0,
+    pixelCrop.width,
+    pixelCrop.height
+  )
+
+  // As Base64 string
+  // return croppedCanvas.toDataURL('image/jpeg');
+
+  // As a blob
+  return new Promise((resolve, reject) => {
+    croppedCanvas.toBlob((file) => {
+      resolve(URL.createObjectURL(file))
+    }, 'image/png')
+  })
+}
+
+export async function getRotatedImage(imageSrc, rotation = 0) {
+  const image = await createImage(imageSrc)
+  const canvas = document.createElement('canvas')
+  const ctx = canvas.getContext('2d')
+
+  const orientationChanged =
+    rotation === 90 || rotation === -90 || rotation === 270 || rotation === -270
+  if (orientationChanged) {
+    canvas.width = image.height
+    canvas.height = image.width
+  } else {
+    canvas.width = image.width
+    canvas.height = image.height
+  }
+
+  ctx.translate(canvas.width / 2, canvas.height / 2)
+  ctx.rotate((rotation * Math.PI) / 180)
+  ctx.drawImage(image, -image.width / 2, -image.height / 2)
+
+  return new Promise((resolve) => {
+    canvas.toBlob((file) => {
+      resolve(URL.createObjectURL(file))
+    }, 'image/png')
+  })
+}

package/src/hooks/useImageUploaderProduct/helper/getOrientation.ts

@@ -0,0 +1,53 @@
+/**
+ * Reads EXIF orientation from a JPEG file (native, no dependencies)
+ * @param {File} file
+ * @returns {Promise<number>} Orientation value from 1 to 8
+ */
+export const getOrientation = (file: File, validTypes: string[]): Promise<number> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = (event) => {
+      const view = new DataView(event.target?.result as ArrayBuffer)
+
+    if (!validTypes.includes(file.type)) {
+      return reject(new Error(`Archivo no soportado: ${file.type}`))
+    }
+
+      let offset = 2
+      const length = view.byteLength
+
+      while (offset < length) {
+        if (view.getUint16(offset + 2, false) <= 8) return resolve(1)
+
+        const marker = view.getUint16(offset, false)
+        offset += 2
+
+        if (marker === 0xFFE1) {
+          const little = view.getUint16(offset + 8, false) === 0x4949
+          offset += 10
+
+          const tags = view.getUint16(offset, little)
+          offset += 2
+
+          for (let i = 0; i < tags; i++) {
+            const tagOffset = offset + i * 12
+            const tag = view.getUint16(tagOffset, little)
+            if (tag === 0x0112) {
+              const orientation = view.getUint16(tagOffset + 8, little)
+              return resolve(orientation)
+            }
+          }
+        } else if ((marker & 0xFF00) !== 0xFF00) {
+          break
+        } else {
+          offset += view.getUint16(offset, false)
+        }
+      }
+
+      resolve(1) // por defecto
+    }
+
+    reader.onerror = () => reject(new Error('Error leyendo archivo'))
+    reader.readAsArrayBuffer(file)
+  })
+}

package/src/hooks/useImageUploaderProduct/helper/index.ts

@@ -0,0 +1,5 @@
+export const ORIENTATION_TO_ANGLE = {
+  3: 180,
+  6: 90,
+  8: -90
+}

package/src/hooks/useImageUploaderProduct/index.ts

@@ -0,0 +1,292 @@
+import { useRef, useState } from 'react'
+import { ORIENTATION_TO_ANGLE } from './helper'
+import { getCroppedImg, getRotatedImage } from './helper/canvasUtils'
+import { getOrientation } from './helper/getOrientation'
+
+function readFile(file: File): Promise<string> {
+    return new Promise((resolve) => {
+        const reader = new FileReader()
+        reader.addEventListener('load', () => resolve(reader.result as string), false)
+        reader.readAsDataURL(file)
+    })
+}
+
+export type SendNotificationFn = (params: {
+    description: string
+    title: string
+    backgroundColor: string
+}) => void
+
+interface UseImageUploaderOptions {
+    maxSizeMB?: number
+    minHeight?: number
+    minWidth?: number
+    validTypes?: string[]
+    sendNotification: SendNotificationFn
+}
+
+interface UseImageUploaderResult {
+    crop: { x: number, y: number }
+    croppedImage: string | null
+    error: string
+    image: File
+    imageSrc: string | null
+    inputRef: React.RefObject<HTMLInputElement>
+    loading: boolean
+    open: boolean
+    preview: string | null
+    formattedList: string
+    rotation: number
+    zoom: number
+    validTypes: string[]
+    handleClose: () => void
+    handleRemoveImage: () => void
+    onCropComplete: (croppedArea: any, croppedPixels: any) => void
+    onFileChange: (e: React.ChangeEvent<HTMLInputElement>) => Promise<void>
+    setCrop: React.Dispatch<React.SetStateAction<{ x: number, y: number }>>
+    setRotation: React.Dispatch<React.SetStateAction<number>>
+    setZoom: React.Dispatch<React.SetStateAction<number>>
+    handleDrop: (event: React.DragEvent<HTMLDivElement>) => Promise<void>
+    showCroppedImage: () => Promise<void>
+}
+
+/**
+ * Hook for managing image selection, preview, validation and cropping
+ * @param {UseImageUploaderOptions} options
+ * @returns {UseImageUploaderResult}
+ */
+export const useImageUploaderProduct = (
+    options?: UseImageUploaderOptions
+): UseImageUploaderResult => {
+    const {
+        validTypes = ['image/jpeg', 'image/jpg', 'image/png'],
+        maxSizeMB = 20,
+        minWidth = 300,
+        minHeight = 275,
+        sendNotification
+    } = options ?? {
+
+    }
+    const readableFormats = validTypes
+        .map((type) => type.split('/')[1].toUpperCase())
+
+    const formatter = new Intl.ListFormat('es', {
+        style: 'long',
+        type: 'conjunction'
+    })
+
+    const formattedList = formatter.format(readableFormats)
+
+    const [loading, setLoading] = useState(false)
+    const inputRef = useRef<HTMLInputElement>(null)
+    const [open, setOpen] = useState(false)
+    const [preview, setPreview] = useState<string | null>(null)
+    const [imageSrc, setImageSrc] = useState<string | null>(null)
+    const [croppedImage, setCroppedImage] = useState<string | null>(null)
+    const [crop, setCrop] = useState({ x: 0, y: 0 })
+    const [zoom, setZoom] = useState(1)
+    const [rotation, setRotation] = useState(0)
+    const [croppedAreaPixels, setCroppedAreaPixels] = useState(null)
+    const [error, setError] = useState('')
+    const [image, setImage] = useState<File | null>(null)
+
+
+    const onCropComplete = (_: any, croppedPixels: any) => {
+        setCroppedAreaPixels(croppedPixels)
+    }
+
+    const showCroppedImage = async () => {
+        if (!imageSrc || !croppedAreaPixels) return
+        try {
+            setLoading(true)
+            const base64Image = await getCroppedImg(imageSrc, croppedAreaPixels, rotation) as string
+
+            setCroppedImage(base64Image)
+            setPreview(base64Image)
+
+            // ✅ Convert base64 to blob and file
+            const blob = await (await fetch(base64Image)).blob()
+            const file = new File([blob], image?.name ?? 'cropped.jpeg', { type: blob.type })
+            setImage(file)
+            setLoading(false)
+        } catch (e) {
+            setLoading(false)
+            return sendNotification({
+                description: e ?? 'Ocurrió un error',
+                title: 'Error',
+                backgroundColor: 'error'
+            })
+        }
+    }
+
+    /**
+* Removes the selected image and resets relevant states
+*/
+    const handleRemoveImage = () => {
+        setImage(null)
+        setPreview(null)
+        setImageSrc(null)
+        setCroppedImage(null)
+        setZoom(1)
+        setCrop({ x: 0, y: 0 })
+        setRotation(0)
+        setError('')
+        if (inputRef.current) inputRef.current.value = ''
+    }
+
+    const onFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0]
+        handleRemoveImage()
+        if (!file) return
+
+        if (!validTypes.includes(file.type)) {
+
+
+            const error = `Formato inválido. Solo se permiten: ${formattedList}.`
+            sendNotification({
+                description: error,
+                title: 'Error',
+                backgroundColor: 'error'
+            })
+            return setError(error)
+        }
+
+        if (file.size > maxSizeMB * 1024 * 1024) {
+            const error = `El archivo supera los ${maxSizeMB} MB.`
+            sendNotification({
+                description: error,
+                title: 'Error',
+                backgroundColor: 'error'
+            })
+            return setError(`El archivo supera los ${maxSizeMB} MB.`)
+        }
+
+        let imageDataUrl = await readFile(file)
+
+        try {
+            const orientation = await getOrientation(file, validTypes)
+            const rotation = ORIENTATION_TO_ANGLE[orientation]
+            if (rotation) {
+                imageDataUrl = await getRotatedImage(imageDataUrl, rotation) as string
+                setRotation(rotation)
+            }
+        } catch (e) {
+            return sendNotification({
+                description: 'Error desconocido',
+                title: 'Error',
+                backgroundColor: 'error'
+            })
+        }
+
+        const image = new Image()
+        image.src = imageDataUrl
+        image.onload = () => {
+            if (image.width < minWidth || image.height < minHeight) {
+                const error = `Resolución mínima: ${minWidth}x${minHeight}px.`
+                sendNotification({
+                    description: error,
+                    title: 'Error',
+                    backgroundColor: 'error'
+                })
+                setError(error)
+                return
+            }
+            setImageSrc(imageDataUrl)
+            setOpen(true)
+        }
+    }
+
+    const handleClose = () => {
+        setOpen(!open)
+    }
+
+    const handleDrop = async (event: React.DragEvent<HTMLDivElement>): Promise<void> => {
+        event.preventDefault()
+        handleRemoveImage()
+        const file = event.dataTransfer.files?.[0]
+        if (!file) return
+
+        if (!validTypes.includes(file.type)) {
+            const error = `Formato inválido. Solo se permiten: ${formattedList}.`
+            sendNotification({
+                description: error,
+                title: 'Error',
+                backgroundColor: 'error'
+            })
+            return setError(error)
+        }
+
+        if (file.size > maxSizeMB * 1024 * 1024) {
+            const error = `El archivo supera los ${maxSizeMB} MB.`
+            sendNotification({
+                description: error,
+                title: 'Error',
+                backgroundColor: 'error'
+            })
+            return setError(error)
+        }
+
+        let imageDataUrl = await readFile(file)
+
+        try {
+            const orientation = await getOrientation(file, validTypes)
+            const rotation = ORIENTATION_TO_ANGLE[orientation]
+            if (rotation) {
+                imageDataUrl = await getRotatedImage(imageDataUrl, rotation) as string
+                setRotation(rotation)
+            }
+        } catch (e) {
+            return sendNotification({
+                description: 'Error al procesar la orientación de la imagen',
+                title: 'Error',
+                backgroundColor: 'error'
+            })
+        }
+
+        const image = new Image()
+        image.src = imageDataUrl
+        image.onload = () => {
+            if (image.width < minWidth || image.height < minHeight) {
+                const error = `Resolución mínima: ${minWidth}x${minHeight}px.`
+                sendNotification({
+                    description: error,
+                    title: 'Error',
+                    backgroundColor: 'error'
+                })
+                setError(error)
+                return
+            }
+            setImageSrc(imageDataUrl)
+            setImage(file)
+            setOpen(true)
+        }
+    }
+
+
+
+
+    return {
+        inputRef,
+        open,
+        imageSrc,
+        preview,
+        croppedImage,
+        crop,
+        zoom,
+        image,
+        rotation,
+        error,
+        formattedList,
+        loading,
+        validTypes,
+        onCropComplete,
+        showCroppedImage,
+        handleRemoveImage,
+        handleDrop,
+        onFileChange,
+        handleClose,
+        setCrop,
+        setZoom,
+        setRotation,
+    }
+}