ordering-components-external 13.2.13 → 13.2.14

package/src/components/WalletList/index.js

@@ -1,160 +1,160 @@
-import React, { useEffect, useState } from 'react'
-import { useApi } from '../../contexts/ApiContext'
-import { useSession } from '../../contexts/SessionContext'
-import { useEvent } from '../../contexts/EventContext'
-import { useWebsocket } from '../../contexts/WebsocketContext'
-
-export const WalletList = (props) => {
-  const {
-    UIComponent,
-    isWalletCashEnabled,
-    isWalletPointsEnabled
-  } = props
-
-  const [ordering] = useApi()
-  const socket = useWebsocket()
-  const [{ token, user }] = useSession()
-  const [events] = useEvent()
-  const [walletSelected, setWalletSelected] = useState(null)
-
-  const [state, setState] = useState({ wallets: [], loading: true, error: null })
-  const [transactions, setTransactions] = useState({ list: null, loading: true, error: null })
-  const [userLoyaltyLevel, setUserLoyaltyLevel] = useState({ loading: true, error: null, loyaltyLevel: null })
-
-  const userProps = ['loyalty_level']
-
-  const getTransactions = async (walletId) => {
-    if (transactions.list?.[`wallet:${walletId}`]) return
-    try {
-      setTransactions({ ...transactions, loading: true })
-      const response = await fetch(
-        `${ordering.root}/users/${user.id}/wallets/${walletId}/events?orderBy=-id`,
-        {
-          method: 'GET',
-          headers: {
-            'Content-Type': 'application/json',
-            Authorization: `Bearer ${token}`,
-            'X-App-X': ordering.appId,
-            'X-Socket-Id-X': socket?.getId()
-          }
-        }
-      )
-      const { error, result } = await response.json()
-
-      setTransactions({
-        ...transactions,
-        error: error ? result : null,
-        list: {
-          ...transactions.list,
-          [`wallet:${walletId}`]: error ? null : result
-        },
-        loading: false
-      })
-    } catch (err) {
-      if (err.constructor.name !== 'Cancel') {
-        setTransactions({
-          ...transactions,
-          loading: false,
-          error: [err.message]
-        })
-      }
-    }
-  }
-
-  const getWallets = async () => {
-    try {
-      const response = await fetch(
-        `${ordering.root}/users/${user.id}/wallets`,
-        {
-          method: 'GET',
-          headers: {
-            'Content-Type': 'application/json',
-            Authorization: `Bearer ${token}`,
-            'X-App-X': ordering.appId,
-            'X-Socket-Id-X': socket?.getId()
-          }
-        }
-      )
-      const { error, result } = await response.json()
-
-      if (!error && result?.length > 0) {
-        const cashWallet = isWalletCashEnabled ? result.find(wallet => wallet.type === 'cash') : null
-        const pointsWallet = isWalletPointsEnabled ? result.find(wallet => wallet.type === 'credit_point') : null
-
-        if (cashWallet) {
-          getTransactions(cashWallet.id)
-        } else if (pointsWallet) {
-          getTransactions(pointsWallet.id)
-        }
-      }
-
-      setState({
-        ...state,
-        loading: false,
-        error: error ? result : null,
-        wallets: error ? null : result
-      })
-    } catch (err) {
-      if (err.constructor.name !== 'Cancel') {
-        setState({
-          ...state,
-          loading: false,
-          error: [err.message]
-        })
-      }
-    }
-  }
-
-  const getUserLoyaltyLevel = async () => {
-    try {
-      const { content: { result, error } } = await ordering.users(user.id).select(userProps).get()
-      setUserLoyaltyLevel({
-        ...userLoyaltyLevel,
-        loading: false,
-        loyaltyLevel: error ? null : result?.loyalty_level,
-        error: error ? result : null
-      })
-    } catch (error) {
-      setUserLoyaltyLevel({
-        ...userLoyaltyLevel,
-        loading: false,
-        error
-      })
-    }
-  }
-
-  useEffect(() => {
-    getUserLoyaltyLevel()
-    getWallets()
-  }, [])
-
-  useEffect(() => {
-    if (walletSelected) {
-      getTransactions(walletSelected)
-    }
-  }, [walletSelected])
-
-  useEffect(() => {
-    events.on('gift_card_redeemed', getWallets)
-    return () => {
-      events.off('gift_card_redeemed', getWallets)
-    }
-  }, [])
-
-  return (
-    <>
-      {UIComponent && (
-        <UIComponent
-          {...props}
-          walletList={state}
-          userLoyaltyLevel={userLoyaltyLevel}
-          transactionsList={transactions}
-          setWalletSelected={setWalletSelected}
-          getWallets={getWallets}
-        />
-      )}
-    </>
-  )
-}
-
-WalletList.defaultProps = {}
+import React, { useEffect, useState } from 'react'
+import { useApi } from '../../contexts/ApiContext'
+import { useSession } from '../../contexts/SessionContext'
+import { useEvent } from '../../contexts/EventContext'
+import { useWebsocket } from '../../contexts/WebsocketContext'
+
+export const WalletList = (props) => {
+  const {
+    UIComponent,
+    isWalletCashEnabled,
+    isWalletPointsEnabled
+  } = props
+
+  const [ordering] = useApi()
+  const socket = useWebsocket()
+  const [{ token, user }] = useSession()
+  const [events] = useEvent()
+  const [walletSelected, setWalletSelected] = useState(null)
+
+  const [state, setState] = useState({ wallets: [], loading: true, error: null })
+  const [transactions, setTransactions] = useState({ list: null, loading: true, error: null })
+  const [userLoyaltyLevel, setUserLoyaltyLevel] = useState({ loading: true, error: null, loyaltyLevel: null })
+
+  const userProps = ['loyalty_level']
+
+  const getTransactions = async (walletId) => {
+    if (transactions.list?.[`wallet:${walletId}`]) return
+    try {
+      setTransactions({ ...transactions, loading: true })
+      const response = await fetch(
+        `${ordering.root}/users/${user.id}/wallets/${walletId}/events?orderBy=-id`,
+        {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${token}`,
+            'X-App-X': ordering.appId,
+            'X-Socket-Id-X': socket?.getId()
+          }
+        }
+      )
+      const { error, result } = await response.json()
+
+      setTransactions({
+        ...transactions,
+        error: error ? result : null,
+        list: {
+          ...transactions.list,
+          [`wallet:${walletId}`]: error ? null : result
+        },
+        loading: false
+      })
+    } catch (err) {
+      if (err.constructor.name !== 'Cancel') {
+        setTransactions({
+          ...transactions,
+          loading: false,
+          error: [err.message]
+        })
+      }
+    }
+  }
+
+  const getWallets = async () => {
+    try {
+      const response = await fetch(
+        `${ordering.root}/users/${user.id}/wallets`,
+        {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${token}`,
+            'X-App-X': ordering.appId,
+            'X-Socket-Id-X': socket?.getId()
+          }
+        }
+      )
+      const { error, result } = await response.json()
+
+      if (!error && result?.length > 0) {
+        const cashWallet = isWalletCashEnabled ? result.find(wallet => wallet.type === 'cash') : null
+        const pointsWallet = isWalletPointsEnabled ? result.find(wallet => wallet.type === 'credit_point') : null
+
+        if (cashWallet) {
+          getTransactions(cashWallet.id)
+        } else if (pointsWallet) {
+          getTransactions(pointsWallet.id)
+        }
+      }
+
+      setState({
+        ...state,
+        loading: false,
+        error: error ? result : null,
+        wallets: error ? null : result
+      })
+    } catch (err) {
+      if (err.constructor.name !== 'Cancel') {
+        setState({
+          ...state,
+          loading: false,
+          error: [err.message]
+        })
+      }
+    }
+  }
+
+  const getUserLoyaltyLevel = async () => {
+    try {
+      const { content: { result, error } } = await ordering.users(user.id).select(userProps).get()
+      setUserLoyaltyLevel({
+        ...userLoyaltyLevel,
+        loading: false,
+        loyaltyLevel: error ? null : result?.loyalty_level,
+        error: error ? result : null
+      })
+    } catch (error) {
+      setUserLoyaltyLevel({
+        ...userLoyaltyLevel,
+        loading: false,
+        error
+      })
+    }
+  }
+
+  useEffect(() => {
+    getUserLoyaltyLevel()
+    getWallets()
+  }, [])
+
+  useEffect(() => {
+    if (walletSelected) {
+      getTransactions(walletSelected)
+    }
+  }, [walletSelected])
+
+  useEffect(() => {
+    events.on('gift_card_redeemed', getWallets)
+    return () => {
+      events.off('gift_card_redeemed', getWallets)
+    }
+  }, [])
+
+  return (
+    <>
+      {UIComponent && (
+        <UIComponent
+          {...props}
+          walletList={state}
+          userLoyaltyLevel={userLoyaltyLevel}
+          transactionsList={transactions}
+          setWalletSelected={setWalletSelected}
+          getWallets={getWallets}
+        />
+      )}
+    </>
+  )
+}
+
+WalletList.defaultProps = {}

package/src/components/WebsocketStatus/index.js

@@ -1,80 +1,80 @@
-import React, { useState, useEffect } from 'react'
-import PropTypes from 'prop-types'
-import { useWebsocket } from '../../contexts/WebsocketContext'
-import { useLanguage } from '../../contexts/LanguageContext'
-import { useSession } from '../../contexts/SessionContext'
-
-/**
- * Component to manage websocket status without UI component
- */
-export const WebsocketStatus = (props) => {
-  const {
-    UIComponent,
-    useReconnectByLogin
-  } = props
-
-  const [, t] = useLanguage()
-  const socket = useWebsocket()
-  const [{ auth }] = useSession()
-  const [socketStatus, setSocketStatus] = useState(socket?.socket?.connected ? 1 : 2)
-  const [connectedDate, setConnectedDate] = useState(new Date())
-  const [reconnectAttemptCount, setReconnectAttemptCount] = useState(0)
-
-  const getWebsocketStatus = (num) => {
-    switch (num) {
-      case 0:
-        return t('CONNECTING', 'Connecting')
-      case 1:
-        return t('OK', 'Ok')
-      case 2:
-        return t('DISCONNECTED', 'Disconnected')
-    }
-  }
-
-  useEffect(() => {
-    if (socket?.socket) {
-      socket.socket.on('connect', () => {
-        setReconnectAttemptCount(0)
-        setSocketStatus(1)
-        setConnectedDate(new Date())
-      })
-
-      socket.socket.on('disconnect', (reason) => {
-        setSocketStatus(2)
-      })
-
-      socket.socket.on('reconnect_attempt', () => {
-        setReconnectAttemptCount(prev => prev + 1)
-        setSocketStatus(0)
-      })
-    }
-    if (auth && socket?.socket?.connected && !socket?.socket?.disconnected && useReconnectByLogin) {
-      setReconnectAttemptCount(0)
-      setSocketStatus(1)
-      setConnectedDate(new Date())
-    }
-  }, [socket?.socket, auth])
-
-  return (
-    <>
-      {UIComponent && (
-        <UIComponent
-          {...props}
-          socketStatus={socketStatus}
-          connectedDate={connectedDate}
-          getWebsocketStatus={getWebsocketStatus}
-          reconnectAttemptCount={reconnectAttemptCount}
-        />
-      )}
-    </>
-  )
-}
-
-WebsocketStatus.propTypes = {
-  /**
-   * UI Component, this must be containt all graphic elements and use parent props
-   */
-  UIComponent: PropTypes.elementType
-}
-
-WebsocketStatus.defaultProps = {}
+import React, { useState, useEffect } from 'react'
+import PropTypes from 'prop-types'
+import { useWebsocket } from '../../contexts/WebsocketContext'
+import { useLanguage } from '../../contexts/LanguageContext'
+import { useSession } from '../../contexts/SessionContext'
+
+/**
+ * Component to manage websocket status without UI component
+ */
+export const WebsocketStatus = (props) => {
+  const {
+    UIComponent,
+    useReconnectByLogin
+  } = props
+
+  const [, t] = useLanguage()
+  const socket = useWebsocket()
+  const [{ auth }] = useSession()
+  const [socketStatus, setSocketStatus] = useState(socket?.socket?.connected ? 1 : 2)
+  const [connectedDate, setConnectedDate] = useState(new Date())
+  const [reconnectAttemptCount, setReconnectAttemptCount] = useState(0)
+
+  const getWebsocketStatus = (num) => {
+    switch (num) {
+      case 0:
+        return t('CONNECTING', 'Connecting')
+      case 1:
+        return t('OK', 'Ok')
+      case 2:
+        return t('DISCONNECTED', 'Disconnected')
+    }
+  }
+
+  useEffect(() => {
+    if (socket?.socket) {
+      socket.socket.on('connect', () => {
+        setReconnectAttemptCount(0)
+        setSocketStatus(1)
+        setConnectedDate(new Date())
+      })
+
+      socket.socket.on('disconnect', (reason) => {
+        setSocketStatus(2)
+      })
+
+      socket.socket.on('reconnect_attempt', () => {
+        setReconnectAttemptCount(prev => prev + 1)
+        setSocketStatus(0)
+      })
+    }
+    if (auth && socket?.socket?.connected && !socket?.socket?.disconnected && useReconnectByLogin) {
+      setReconnectAttemptCount(0)
+      setSocketStatus(1)
+      setConnectedDate(new Date())
+    }
+  }, [socket?.socket, auth])
+
+  return (
+    <>
+      {UIComponent && (
+        <UIComponent
+          {...props}
+          socketStatus={socketStatus}
+          connectedDate={connectedDate}
+          getWebsocketStatus={getWebsocketStatus}
+          reconnectAttemptCount={reconnectAttemptCount}
+        />
+      )}
+    </>
+  )
+}
+
+WebsocketStatus.propTypes = {
+  /**
+   * UI Component, this must be containt all graphic elements and use parent props
+   */
+  UIComponent: PropTypes.elementType
+}
+
+WebsocketStatus.defaultProps = {}

package/src/components/WrapperGoogleMaps/index.js

@@ -1,67 +1,67 @@
-import React, { useEffect, useState } from 'react'
-import PropTypes from 'prop-types'
-
-export const WrapperGoogleMaps = (Child) => (props) => {
-  const {
-    apiKey
-  } = props
-
-  if (!apiKey) {
-    console.warn('Prop `apiKey` is required to use Google Maps components.')
-  }
-
-  const [googleReady, setGoogleReady] = useState(false)
-
-  useEffect(() => {
-    if (!apiKey) {
-      return
-    }
-
-    let checker = null
-
-    if (window.document.getElementById('google-maps-sdk')) {
-      if (typeof google !== 'undefined') {
-        setGoogleReady(true)
-      } else {
-        checker = setInterval(() => {
-          if (typeof google !== 'undefined') {
-            setGoogleReady(true)
-            clearInterval(checker)
-          }
-        }, 100)
-      }
-      return
-    }
-
-    window.googleAsyncInit = () => {
-      setGoogleReady(true)
-    }
-
-    const js = window.document.createElement('script')
-    js.id = 'google-maps-sdk'
-    js.async = true
-    js.defer = true
-    js.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places,geometry&callback=googleAsyncInit`
-
-    window.document.body.appendChild(js)
-    return () => {
-      if (checker) {
-        clearInterval(checker)
-      }
-    }
-  }, [apiKey])
-
-  return (
-    <Child {...props} googleReady={googleReady} />
-  )
-}
-
-WrapperGoogleMaps.propTypes = {
-  /**
-   * You Google Maps api key
-   * @see apiKey What is Api Key ? https://developers.google.com/maps/gmp-get-started
-   */
-  apiKey: PropTypes.string.isRequired
-}
-
-WrapperGoogleMaps.defaultProps = {}
+import React, { useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
+
+export const WrapperGoogleMaps = (Child) => (props) => {
+  const {
+    apiKey
+  } = props
+
+  if (!apiKey) {
+    console.warn('Prop `apiKey` is required to use Google Maps components.')
+  }
+
+  const [googleReady, setGoogleReady] = useState(false)
+
+  useEffect(() => {
+    if (!apiKey) {
+      return
+    }
+
+    let checker = null
+
+    if (window.document.getElementById('google-maps-sdk')) {
+      if (typeof google !== 'undefined') {
+        setGoogleReady(true)
+      } else {
+        checker = setInterval(() => {
+          if (typeof google !== 'undefined') {
+            setGoogleReady(true)
+            clearInterval(checker)
+          }
+        }, 100)
+      }
+      return
+    }
+
+    window.googleAsyncInit = () => {
+      setGoogleReady(true)
+    }
+
+    const js = window.document.createElement('script')
+    js.id = 'google-maps-sdk'
+    js.async = true
+    js.defer = true
+    js.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places,geometry&callback=googleAsyncInit`
+
+    window.document.body.appendChild(js)
+    return () => {
+      if (checker) {
+        clearInterval(checker)
+      }
+    }
+  }, [apiKey])
+
+  return (
+    <Child {...props} googleReady={googleReady} />
+  )
+}
+
+WrapperGoogleMaps.propTypes = {
+  /**
+   * You Google Maps api key
+   * @see apiKey What is Api Key ? https://developers.google.com/maps/gmp-get-started
+   */
+  apiKey: PropTypes.string.isRequired
+}
+
+WrapperGoogleMaps.defaultProps = {}