npm-pkg-hook 1.4.1 → 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.4.1"
+  "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,9 +10,11 @@ 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'

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

@@ -14,7 +14,7 @@ export const verifyPriceInRange = ({ values = [], sendNotification }) => {
     sendNotification({
       backgroundColor: 'warning',
       title: 'Alerta',
-      description: 'El valor del producto es muy elevado'
+      description: 'El valor es muy elevado'
     })
     return false
   }

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
+  }
+}