npm-pkg-hook 1.12.7 → 1.12.8

package/src/hooks/useGetSalesAmountToday/index.ts

@@ -0,0 +1,31 @@
+import { gql, useQuery } from '@apollo/client'
+
+/**
+ * GraphQL query to get today's total sales amount.
+ */
+const GET_SALES_AMOUNT_TODAY = gql`
+  query GetSalesAmountToday {
+    getSalesAmountToday {
+      success
+      message
+      total
+    }
+  }
+`
+
+/**
+ * Custom hook to fetch today's sales amount.
+ * @returns {{
+ *   data: { success: boolean, message: string, total: number } | undefined,
+ *   loading: boolean,
+ *   error: any,
+ *   refetch: () => void
+ * }}
+ */
+export const useGetSalesAmountToday = () => {
+  const { data, loading, error, refetch } = useQuery(GET_SALES_AMOUNT_TODAY, {
+    fetchPolicy: 'network-only'
+  })
+
+  return [data?.getSalesAmountToday, { loading, error, refetch }]
+}

package/src/hooks/useGetStoreCookie/index.ts

@@ -0,0 +1,21 @@
+import Cookies from 'js-cookie'
+import { useState, useEffect } from 'react'
+
+export const useGetStoreCookie = () => {
+  const [vpStoreCookie, setVpStoreCookie] = useState(null)
+
+  useEffect(() => {
+    const getCookieValue = () => {
+      const cookieValue = Cookies.get(process.env.NEXT_PUBLIC_SESSION_NAME)
+      console.log('Cookie Value:', cookieValue)
+
+      if (cookieValue) {
+        setVpStoreCookie(cookieValue)
+      }
+    }
+
+    getCookieValue()
+  }, []) // Empty dependency array, so this effect runs once
+
+  return vpStoreCookie
+}

package/src/hooks/useGoogleLogin/index.ts

@@ -0,0 +1,169 @@
+import { useState, useEffect } from 'react'
+
+import loadScript from './loadScript'
+import removeScript from './removeScript'
+
+export const useGoogleLogin = ({
+  onSuccess = () => {},
+  onAutoLoadFinished = () => {},
+  onFailure = () => {},
+  onRequest = () => {},
+  onScriptLoadFailure,
+  clientId,
+  cookiePolicy,
+  loginHint,
+  hostedDomain,
+  autoLoad,
+  isSignedIn,
+  fetchBasicProfile,
+  redirectUri,
+  discoveryDocs,
+  uxMode,
+  scope,
+  accessType,
+  responseType,
+  jsSrc = 'https://apis.google.com/js/api.js',
+  prompt
+}) => {
+  const [loaded, setLoaded] = useState(false)
+
+  /**
+   *
+   * @param res
+   */
+  function handleSigninSuccess (res) {
+    /*
+      offer renamed response keys to names that match use
+    */
+    const basicProfile = res.getBasicProfile()
+    const authResponse = res.getAuthResponse(true)
+    res.googleId = basicProfile.getId()
+    res.tokenObj = authResponse
+    res.tokenId = authResponse.id_token
+    res.accessToken = authResponse.access_token
+    res.profileObj = {
+      googleId: basicProfile.getId(),
+      imageUrl: basicProfile.getImageUrl(),
+      email: basicProfile.getEmail(),
+      name: basicProfile.getName(),
+      givenName: basicProfile.getGivenName(),
+      familyName: basicProfile.getFamilyName()
+    }
+    onSuccess(res)
+  }
+
+  /**
+   *
+   * @param e
+   */
+  function signIn (e) {
+    if (e) {
+      e.preventDefault() // to prevent submit if used within form
+    }
+    if (loaded) {
+      const GoogleAuth = window.gapi.auth2.getAuthInstance()
+      const options = {
+        prompt
+      }
+      onRequest()
+      if (responseType === 'code') {
+        GoogleAuth.grantOfflineAccess(options).then(
+          res => {return onSuccess(res)},
+          err => {return onFailure(err)}
+        )
+      } else {
+        GoogleAuth.signIn(options).then(
+          res => {return handleSigninSuccess(res)},
+          err => {return onFailure(err)}
+        )
+      }
+    }
+  }
+
+  useEffect(() => {
+    let unmounted = false
+    const onLoadFailure = onScriptLoadFailure || onFailure
+    loadScript(
+      document,
+      'script',
+      'google-login',
+      jsSrc,
+      () => {
+        const params = {
+          client_id: clientId,
+          cookie_policy: cookiePolicy,
+          login_hint: loginHint,
+          hosted_domain: hostedDomain,
+          fetch_basic_profile: fetchBasicProfile,
+          discoveryDocs,
+          ux_mode: uxMode,
+          redirect_uri: redirectUri,
+          scope,
+          access_type: accessType
+        }
+
+        if (responseType === 'code') {
+          params.access_type = 'offline'
+        }
+
+        window.gapi.load('auth2', () => {
+          const GoogleAuth = window.gapi.auth2.getAuthInstance()
+          if (!GoogleAuth) {
+            window.gapi.auth2.init(params).then(
+              res => {
+                if (!unmounted) {
+                  setLoaded(true)
+                  const signedIn = isSignedIn && res.isSignedIn.get()
+                  onAutoLoadFinished(signedIn)
+                  if (signedIn) {
+                    handleSigninSuccess(res.currentUser.get())
+                  }
+                }
+              },
+              err => {
+                setLoaded(true)
+                onAutoLoadFinished(false)
+                onLoadFailure(err)
+              }
+            )
+          } else {
+            GoogleAuth.then(
+              () => {
+                if (unmounted) {
+                  return
+                }
+                if (isSignedIn && GoogleAuth.isSignedIn.get()) {
+                  setLoaded(true)
+                  onAutoLoadFinished(true)
+                  handleSigninSuccess(GoogleAuth.currentUser.get())
+                } else {
+                  setLoaded(true)
+                  onAutoLoadFinished(false)
+                }
+              },
+              err => {
+                onFailure(err)
+              }
+            )
+          }
+        })
+      },
+      err => {
+        onLoadFailure(err)
+      }
+    )
+
+    return () => {
+      unmounted = true
+      removeScript(document, 'google-login')
+    }
+  }, [])
+
+  useEffect(() => {
+    if (autoLoad) {
+      signIn()
+    }
+  }, [loaded])
+
+  return { signIn, loaded }
+}

package/src/hooks/useGoogleLogin/loadScript.ts

@@ -0,0 +1,15 @@
+export default (d, s, id, jsSrc, cb, onError) => {
+  const element = d.getElementsByTagName(s)[0]
+  const fjs = element
+  let js = element
+  js = d.createElement(s)
+  js.id = id
+  js.src = jsSrc
+  if (fjs && fjs.parentNode) {
+    fjs.parentNode.insertBefore(js, fjs)
+  } else {
+    d.head.appendChild(js)
+  }
+  js.onerror = onError
+  js.onload = cb
+}

package/src/hooks/useGoogleLogin/removeScript.ts

@@ -0,0 +1,7 @@
+export default (d, id) => {
+  const element = d.getElementById(id)
+
+  if (element) {
+    element.parentNode.removeChild(element)
+  }
+}

package/src/hooks/useHover/index.ts

@@ -0,0 +1,32 @@
+import { useRef, useState, useEffect } from 'react'
+
+/**
+ *
+ */
+export function useHover () {
+  const [value, setValue] = useState(false)
+
+  const ref = useRef(null)
+
+  const handleMouseOver = () => { return setValue(true) }
+  const handleMouseOut = () => { return setValue(false) }
+
+  useEffect(
+    () => {
+      const node = ref.current
+      if (node) {
+        node.addEventListener('mouseover', handleMouseOver)
+        node.addEventListener('mouseout', handleMouseOut)
+
+        return () => {
+          node.removeEventListener('mouseover', handleMouseOver)
+          node.removeEventListener('mouseout', handleMouseOut)
+        }
+      }
+      return {}
+    },
+    [] // Recall only if ref changes
+  )
+
+  return [ref, value]
+}

package/src/hooks/useImageOptimization/index.ts

@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react'
+// use it
+// const imageUrl = 'https://example.com/image.jpg';
+// const optimizedUrl = useImageOptimization(imageUrl);
+
+/**
+ *
+ * @param imageUrl
+ */
+export function useImageOptimization (imageUrl) {
+  const [optimizedUrl, setOptimizedUrl] = useState(null)
+
+  useEffect(() => {
+    const image = new Image()
+    image.src = imageUrl
+
+    image.onload = () => {
+      const canvas = document.createElement('canvas')
+      const ctx = canvas.getContext('2d')
+
+      canvas.width = image.width
+      canvas.height = image.height
+
+      ctx.drawImage(image, 0, 0, image.width, image.height)
+
+      const optimizedUrl = canvas.toDataURL('image/jpeg', 0.8)
+      setOptimizedUrl(optimizedUrl)
+    }
+  }, [imageUrl])
+
+  return optimizedUrl
+}

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

@@ -0,0 +1,146 @@
+export const createImage = (url) =>
+{return new Promise((resolve, reject) => {
+  const image = new Image()
+  image.addEventListener('load', () => {return resolve(image)})
+  image.addEventListener('error', (error) => {return reject(error)})
+  image.setAttribute('crossOrigin', 'anonymous') // needed to avoid cross-origin issues on CodeSandbox
+  image.src = url
+})}
+
+/**
+ *
+ * @param degreeValue
+ */
+export function getRadianAngle(degreeValue) {
+  return (degreeValue * Math.PI) / 180
+}
+
+/**
+ * Returns the new bounding area of a rotated rectangle.
+ * @param width
+ * @param height
+ * @param rotation
+ */
+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
+ * @param imageSrc
+ * @param pixelCrop
+ * @param rotation
+ * @param flip
+ */
+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')
+  })
+}
+
+/**
+ *
+ * @param imageSrc
+ * @param rotation
+ */
+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,54 @@
+/**
+ * Reads EXIF orientation from a JPEG file (native, no dependencies)
+ * @param {File} file
+ * @param validTypes
+ * @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 = () => {return 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
+}