ordering-components-external 13.2.13 → 13.2.15

package/src/components/MainSearch/index.js

@@ -1,149 +1,149 @@
-import React, { useEffect, useState } from 'react'
-import PropTypes from 'prop-types'
-import { useOrder } from '../../contexts/OrderContext'
-import { useApi } from '../../contexts/ApiContext'
-
-export const MainSearch = (props) => {
-  const {
-    searchByAddress,
-    handlerFindBusiness,
-    UIComponent
-  } = props
-
-  const [ordering] = useApi()
-  const [orderState] = useOrder()
-
-  /**
-   * Object to save all arrays to use
-   */
-  const [allListValues, setAllListValues] = useState({ countries: [], cities: [], citiesOptions: [] })
-  /**
-   * Object to save current values about country selection
-   */
-  const [countryValues, setCountryValues] = useState({ cityId: null, dropdownOptionId: null, orderType: orderState.options?.type || 1 })
-  /**
-   * Handle form error
-   */
-  const [countryFormErrors, setCountryFormErrors] = useState(false)
-  /**
-   * Method to get countries from SDK
-   */
-  const getContries = async () => {
-    try {
-      const { response } = await ordering.countries().get()
-      setAllListValues({ ...allListValues, countries: response?.data?.result })
-    } catch (error) {
-      console.log(error)
-    }
-  }
-  /**
-   * Method to handle change values when searchByAddres is false
-   * @param {object} e
-   */
-  const onChangeValue = ({ name, value }) => {
-    switch (name) {
-      case 'country': {
-        const country = allListValues?.countries.find(country => Number(country.id) === Number(value))
-        const cities = country?.cities.filter(city => city.options.length)
-        setAllListValues({ ...allListValues, cities })
-        setCountryValues({
-          ...countryValues,
-          cityId: null
-        })
-        break
-      }
-      case 'cityId': {
-        const city = allListValues.cities.find(city => Number(city.id) === Number(value))
-        setAllListValues({ ...allListValues, citiesOptions: city?.options })
-        setCountryValues({
-          ...countryValues,
-          cityId: value,
-          dropdownOptionId: null
-        })
-        break
-      }
-      case 'dropdownOptionId': {
-        setCountryValues({
-          ...countryValues,
-          dropdownOptionId: value
-        })
-        break
-      }
-    }
-  }
-  /**
-   * Method to valid if all countries values are valid
-   */
-  const onClickFindBusiness = () => {
-    const isCityOption = allListValues.citiesOptions.length > 0 ? !!countryValues.dropdownOptionId : true
-    const isValid = countryValues.cityId && isCityOption
-    if (isValid) {
-      handlerFindBusiness(countryValues)
-    }
-    setCountryFormErrors(!isValid)
-  }
-
-  useEffect(() => {
-    if (!searchByAddress) {
-      getContries()
-    }
-  }, [])
-
-  return (
-    <>
-      {UIComponent && (
-        <UIComponent
-          {...props}
-          orderState={orderState}
-          allListValues={allListValues}
-          currentValues={countryValues}
-          isFormErrors={countryFormErrors}
-          handleChangeValue={onChangeValue}
-          handleFindBusiness={onClickFindBusiness}
-        />
-      )}
-    </>
-  )
-}
-
-MainSearch.propTypes = {
-  /**
-   * UI Component, this must be containt all graphic elements and use parent props
-   */
-  UIComponent: PropTypes.elementType,
-  /**
-   * searchByAddress is used to validate if use address list and address form or dropdown options
-   */
-  searchByAddress: PropTypes.bool,
-  /**
-   * Method to find business from API
-   */
-  handlerFindBusiness: PropTypes.func,
-  /**
-   * Components types before main search
-   * Array of type components, the parent props will pass to these components
-   */
-  beforeComponents: PropTypes.arrayOf(PropTypes.elementType),
-  /**
-   * Components types after main search
-   * Array of type components, the parent props will pass to these components
-   */
-  afterComponents: PropTypes.arrayOf(PropTypes.elementType),
-  /**
-   * Elements before main search
-   * Array of HTML/Components elements, these components will not get the parent props
-   */
-  beforeElements: PropTypes.arrayOf(PropTypes.element),
-  /**
-   * Elements after main search
-   * Array of HTML/Components elements, these components will not get the parent props
-   */
-  afterElements: PropTypes.arrayOf(PropTypes.element)
-}
-
-MainSearch.defaultProps = {
-  beforeComponents: [],
-  afterComponents: [],
-  beforeElements: [],
-  afterElements: []
-}
+import React, { useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
+import { useOrder } from '../../contexts/OrderContext'
+import { useApi } from '../../contexts/ApiContext'
+
+export const MainSearch = (props) => {
+  const {
+    searchByAddress,
+    handlerFindBusiness,
+    UIComponent
+  } = props
+
+  const [ordering] = useApi()
+  const [orderState] = useOrder()
+
+  /**
+   * Object to save all arrays to use
+   */
+  const [allListValues, setAllListValues] = useState({ countries: [], cities: [], citiesOptions: [] })
+  /**
+   * Object to save current values about country selection
+   */
+  const [countryValues, setCountryValues] = useState({ cityId: null, dropdownOptionId: null, orderType: orderState.options?.type || 1 })
+  /**
+   * Handle form error
+   */
+  const [countryFormErrors, setCountryFormErrors] = useState(false)
+  /**
+   * Method to get countries from SDK
+   */
+  const getContries = async () => {
+    try {
+      const { response } = await ordering.countries().get()
+      setAllListValues({ ...allListValues, countries: response?.data?.result })
+    } catch (error) {
+      console.log(error)
+    }
+  }
+  /**
+   * Method to handle change values when searchByAddres is false
+   * @param {object} e
+   */
+  const onChangeValue = ({ name, value }) => {
+    switch (name) {
+      case 'country': {
+        const country = allListValues?.countries.find(country => Number(country.id) === Number(value))
+        const cities = country?.cities.filter(city => city.options.length)
+        setAllListValues({ ...allListValues, cities })
+        setCountryValues({
+          ...countryValues,
+          cityId: null
+        })
+        break
+      }
+      case 'cityId': {
+        const city = allListValues.cities.find(city => Number(city.id) === Number(value))
+        setAllListValues({ ...allListValues, citiesOptions: city?.options })
+        setCountryValues({
+          ...countryValues,
+          cityId: value,
+          dropdownOptionId: null
+        })
+        break
+      }
+      case 'dropdownOptionId': {
+        setCountryValues({
+          ...countryValues,
+          dropdownOptionId: value
+        })
+        break
+      }
+    }
+  }
+  /**
+   * Method to valid if all countries values are valid
+   */
+  const onClickFindBusiness = () => {
+    const isCityOption = allListValues.citiesOptions.length > 0 ? !!countryValues.dropdownOptionId : true
+    const isValid = countryValues.cityId && isCityOption
+    if (isValid) {
+      handlerFindBusiness(countryValues)
+    }
+    setCountryFormErrors(!isValid)
+  }
+
+  useEffect(() => {
+    if (!searchByAddress) {
+      getContries()
+    }
+  }, [])
+
+  return (
+    <>
+      {UIComponent && (
+        <UIComponent
+          {...props}
+          orderState={orderState}
+          allListValues={allListValues}
+          currentValues={countryValues}
+          isFormErrors={countryFormErrors}
+          handleChangeValue={onChangeValue}
+          handleFindBusiness={onClickFindBusiness}
+        />
+      )}
+    </>
+  )
+}
+
+MainSearch.propTypes = {
+  /**
+   * UI Component, this must be containt all graphic elements and use parent props
+   */
+  UIComponent: PropTypes.elementType,
+  /**
+   * searchByAddress is used to validate if use address list and address form or dropdown options
+   */
+  searchByAddress: PropTypes.bool,
+  /**
+   * Method to find business from API
+   */
+  handlerFindBusiness: PropTypes.func,
+  /**
+   * Components types before main search
+   * Array of type components, the parent props will pass to these components
+   */
+  beforeComponents: PropTypes.arrayOf(PropTypes.elementType),
+  /**
+   * Components types after main search
+   * Array of type components, the parent props will pass to these components
+   */
+  afterComponents: PropTypes.arrayOf(PropTypes.elementType),
+  /**
+   * Elements before main search
+   * Array of HTML/Components elements, these components will not get the parent props
+   */
+  beforeElements: PropTypes.arrayOf(PropTypes.element),
+  /**
+   * Elements after main search
+   * Array of HTML/Components elements, these components will not get the parent props
+   */
+  afterElements: PropTypes.arrayOf(PropTypes.element)
+}
+
+MainSearch.defaultProps = {
+  beforeComponents: [],
+  afterComponents: [],
+  beforeElements: [],
+  afterElements: []
+}

package/src/components/MapView/index.js

@@ -1,116 +1,116 @@
-import React, { useState, useEffect } from 'react'
-import { useApi } from '../../contexts/ApiContext'
-import { useSession } from '../../contexts/SessionContext'
-import { useEvent } from '../../contexts/EventContext'
-
-export const MapView = (props) => {
-  const { UIComponent } = props
-
-  const [ordering] = useApi()
-  const [session] = useSession()
-  const [events] = useEvent()
-  const [businessMarkers, setBusinessMarkers] = useState([])
-  const [isLoadingBusinessMarkers, setIsLoadingBusinessMakers] = useState(true)
-  const [markerGroups, setMarkerGroups] = useState({})
-  const [customerMarkerGroups, setCustomerMarkerGroups] = useState({})
-  const [alertState, setAlertState] = useState({ open: false, content: [], key: null })
-
-  const getBusinessLocations = async () => {
-    try {
-      setIsLoadingBusinessMakers(true)
-      const options = {
-        query: {
-          where: [
-            {
-              attribute: 'status',
-              value: [0, 13, 7, 4, 3, 8, 9, 14, 18, 19, 20, 21, 23, 26]
-            }
-          ]
-        }
-      }
-      const { content: { result, error } } = await ordering.setAccessToken(session.token).orders().asDashboard().get(options)
-      if (error) {
-        setAlertState(result)
-      }
-      const markerGroupsObject = result.reduce((acc, order) => {
-        acc[order.business_id] = acc[order.business_id] ? [...acc[order.business_id], order] : [order]
-        return acc
-      }, {})
-      const customerMarkerGroupsObject = result.reduce((acc, order) => {
-        acc[order.customer_id] = acc[order.customer_id] ? [...acc[order.customer_id], order] : [order]
-        return acc
-      }, {})
-
-      setMarkerGroups(markerGroupsObject)
-      setCustomerMarkerGroups(customerMarkerGroupsObject)
-      setBusinessMarkers(result)
-    } catch (error) {
-      setAlertState({ open: true, content: [error.message] })
-    } finally {
-      setIsLoadingBusinessMakers(false)
-    }
-  }
-
-  const setDriverLocation = async (location) => {
-    try {
-      await ordering
-        .setAccessToken(session.token)
-        .users(session.user.id)
-        .driverLocations()
-        .save(location)
-    } catch (error) {
-      console.log(error?.message)
-    }
-  }
-
-  useEffect(() => {
-    const handleUpdateOrder = (order) => {
-      getBusinessLocations()
-      // setIsLoadingBusinessMakers(true)
-      // console.log('emited', order)
-      // console.log('same driver', order?.driver_id, session?.user?.id)
-      // const markers = markerGroups?.[order?.business_id] ?? []
-      // const customerMakers = customerMarkerGroups?.[order?.customer_id] ?? []
-      // console.log('groups', markerGroups)
-      // setMarkerGroups({
-      //   ...markerGroups,
-      //   [order?.business_id]: order?.driver_id !== session?.user?.id ? markers.filter(_order => order?.id === _order?.id) : [...markers, order]
-      // })
-      // markerGroups[order?.business_id] = order?.driver_id !== session?.user?.id ? markers.filter(_order => order?.id === _order?.id) : [...markers, order]
-      // setCustomerMarkerGroups({
-      //   ...customerMarkerGroups,
-      //   [order?.customer_id]: order?.driver_id !== session?.user?.id ? customerMakers.filter(_order => order?.id === _order?.id) : [...customerMakers, order]
-      // })
-      // customerMarkerGroups[order?.customer_id] = order?.driver_id !== session?.user?.id ? customerMakers.filter(_order => order?.id === _order?.id) : [...customerMakers, order]
-      // setIsLoadingBusinessMakers(false)
-    }
-    events.on('order_updated', handleUpdateOrder)
-    events.on('order_added', handleUpdateOrder)
-    return () => {
-      events.off('order_updated', handleUpdateOrder)
-      events.off('order_added', handleUpdateOrder)
-    }
-  }, [])
-
-  return (
-    <>
-      {
-        UIComponent && (
-          <UIComponent
-            {...props}
-            businessMarkers={businessMarkers}
-            customerMarkerGroups={customerMarkerGroups}
-            isLoadingBusinessMarkers={isLoadingBusinessMarkers}
-            markerGroups={markerGroups}
-            getBusinessLocations={getBusinessLocations}
-            setDriverLocation={setDriverLocation}
-            alertState={alertState}
-            setAlertState={setAlertState}
-            setMarkerGroups={setMarkerGroups}
-            setCustomerMarkerGroups={setCustomerMarkerGroups}
-          />
-        )
-      }
-    </>
-  )
-}
+import React, { useState, useEffect } from 'react'
+import { useApi } from '../../contexts/ApiContext'
+import { useSession } from '../../contexts/SessionContext'
+import { useEvent } from '../../contexts/EventContext'
+
+export const MapView = (props) => {
+  const { UIComponent } = props
+
+  const [ordering] = useApi()
+  const [session] = useSession()
+  const [events] = useEvent()
+  const [businessMarkers, setBusinessMarkers] = useState([])
+  const [isLoadingBusinessMarkers, setIsLoadingBusinessMakers] = useState(true)
+  const [markerGroups, setMarkerGroups] = useState({})
+  const [customerMarkerGroups, setCustomerMarkerGroups] = useState({})
+  const [alertState, setAlertState] = useState({ open: false, content: [], key: null })
+
+  const getBusinessLocations = async () => {
+    try {
+      setIsLoadingBusinessMakers(true)
+      const options = {
+        query: {
+          where: [
+            {
+              attribute: 'status',
+              value: [0, 13, 7, 4, 3, 8, 9, 14, 18, 19, 20, 21, 23, 26]
+            }
+          ]
+        }
+      }
+      const { content: { result, error } } = await ordering.setAccessToken(session.token).orders().asDashboard().get(options)
+      if (error) {
+        setAlertState(result)
+      }
+      const markerGroupsObject = result.reduce((acc, order) => {
+        acc[order.business_id] = acc[order.business_id] ? [...acc[order.business_id], order] : [order]
+        return acc
+      }, {})
+      const customerMarkerGroupsObject = result.reduce((acc, order) => {
+        acc[order.customer_id] = acc[order.customer_id] ? [...acc[order.customer_id], order] : [order]
+        return acc
+      }, {})
+
+      setMarkerGroups(markerGroupsObject)
+      setCustomerMarkerGroups(customerMarkerGroupsObject)
+      setBusinessMarkers(result)
+    } catch (error) {
+      setAlertState({ open: true, content: [error.message] })
+    } finally {
+      setIsLoadingBusinessMakers(false)
+    }
+  }
+
+  const setDriverLocation = async (location) => {
+    try {
+      await ordering
+        .setAccessToken(session.token)
+        .users(session.user.id)
+        .driverLocations()
+        .save(location)
+    } catch (error) {
+      console.log(error?.message)
+    }
+  }
+
+  useEffect(() => {
+    const handleUpdateOrder = (order) => {
+      getBusinessLocations()
+      // setIsLoadingBusinessMakers(true)
+      // console.log('emited', order)
+      // console.log('same driver', order?.driver_id, session?.user?.id)
+      // const markers = markerGroups?.[order?.business_id] ?? []
+      // const customerMakers = customerMarkerGroups?.[order?.customer_id] ?? []
+      // console.log('groups', markerGroups)
+      // setMarkerGroups({
+      //   ...markerGroups,
+      //   [order?.business_id]: order?.driver_id !== session?.user?.id ? markers.filter(_order => order?.id === _order?.id) : [...markers, order]
+      // })
+      // markerGroups[order?.business_id] = order?.driver_id !== session?.user?.id ? markers.filter(_order => order?.id === _order?.id) : [...markers, order]
+      // setCustomerMarkerGroups({
+      //   ...customerMarkerGroups,
+      //   [order?.customer_id]: order?.driver_id !== session?.user?.id ? customerMakers.filter(_order => order?.id === _order?.id) : [...customerMakers, order]
+      // })
+      // customerMarkerGroups[order?.customer_id] = order?.driver_id !== session?.user?.id ? customerMakers.filter(_order => order?.id === _order?.id) : [...customerMakers, order]
+      // setIsLoadingBusinessMakers(false)
+    }
+    events.on('order_updated', handleUpdateOrder)
+    events.on('order_added', handleUpdateOrder)
+    return () => {
+      events.off('order_updated', handleUpdateOrder)
+      events.off('order_added', handleUpdateOrder)
+    }
+  }, [])
+
+  return (
+    <>
+      {
+        UIComponent && (
+          <UIComponent
+            {...props}
+            businessMarkers={businessMarkers}
+            customerMarkerGroups={customerMarkerGroups}
+            isLoadingBusinessMarkers={isLoadingBusinessMarkers}
+            markerGroups={markerGroups}
+            getBusinessLocations={getBusinessLocations}
+            setDriverLocation={setDriverLocation}
+            alertState={alertState}
+            setAlertState={setAlertState}
+            setMarkerGroups={setMarkerGroups}
+            setCustomerMarkerGroups={setCustomerMarkerGroups}
+          />
+        )
+      }
+    </>
+  )
+}