ordering-components-external 13.2.11 → 13.2.13

package/example/views/BusinessesMapExample/index.js

@@ -1,57 +1,57 @@
-import React, { useState, useEffect } from 'react'
-
-import { BusinessesMap } from '../../../src/components/BusinessesMap'
-import { BusinessesMapUI } from '../../components/BusinessesMapUI'
-
-export const BusinessesMapExample = () => {
-  const [errors, setErrors] = useState('')
-
-  useEffect(() => {
-    if (errors) {
-      console.log(errors)
-    }
-  }, [errors])
-
-  const props = {
-    UIComponent: BusinessesMapUI,
-
-    /**
-     * Business list must have locations
-     */
-    businessList: [
-      {
-        location: { lat: 40.94677350000001, lng: -73.98595739999996, zipcode: -1, zoom: 15 },
-        logo: 'https://res.cloudinary.com/ordering2/image/upload/v1562277711/bk6kvzrnfkvqgav9qi7j.png',
-        id: 41,
-        slug: 'mcbonalds'
-      },
-      {
-        location: { lat: 40.80196739999999, lng: -73.94575050000003, zipcode: -1, zoom: 15 },
-        logo: 'https://res.cloudinary.com/ordering2/image/upload/v1562275904/rtsxbq0sblemyu6bxehq.jpg',
-        id: 3,
-        slug: 'tastewine'
-      },
-      {
-        location: { lat: 37.791370300000004, lng: -122.39876809999998, zipcode: -1, zoom: 15 },
-        id: 12
-      }
-    ],
-    /**
-     * User location is used for place center of the map
-     */
-    userLocation: { lat: 40.7751052, lng: -73.9651148 },
-    /**
-     * setter for map errors
-     */
-    setErrors,
-    /**
-     * @param {business_slug} slug
-     * handleCustomClick, function to get click event and return business slug without default behavior
-     */
-    onBusinessCustomClick: (slug) => console.log(slug)
-  }
-
-  return (
-    <BusinessesMap {...props} />
-  )
-}
+import React, { useState, useEffect } from 'react'
+
+import { BusinessesMap } from '../../../src/components/BusinessesMap'
+import { BusinessesMapUI } from '../../components/BusinessesMapUI'
+
+export const BusinessesMapExample = () => {
+  const [errors, setErrors] = useState('')
+
+  useEffect(() => {
+    if (errors) {
+      console.log(errors)
+    }
+  }, [errors])
+
+  const props = {
+    UIComponent: BusinessesMapUI,
+
+    /**
+     * Business list must have locations
+     */
+    businessList: [
+      {
+        location: { lat: 40.94677350000001, lng: -73.98595739999996, zipcode: -1, zoom: 15 },
+        logo: 'https://res.cloudinary.com/ordering2/image/upload/v1562277711/bk6kvzrnfkvqgav9qi7j.png',
+        id: 41,
+        slug: 'mcbonalds'
+      },
+      {
+        location: { lat: 40.80196739999999, lng: -73.94575050000003, zipcode: -1, zoom: 15 },
+        logo: 'https://res.cloudinary.com/ordering2/image/upload/v1562275904/rtsxbq0sblemyu6bxehq.jpg',
+        id: 3,
+        slug: 'tastewine'
+      },
+      {
+        location: { lat: 37.791370300000004, lng: -122.39876809999998, zipcode: -1, zoom: 15 },
+        id: 12
+      }
+    ],
+    /**
+     * User location is used for place center of the map
+     */
+    userLocation: { lat: 40.7751052, lng: -73.9651148 },
+    /**
+     * setter for map errors
+     */
+    setErrors,
+    /**
+     * @param {business_slug} slug
+     * handleCustomClick, function to get click event and return business slug without default behavior
+     */
+    onBusinessCustomClick: (slug) => console.log(slug)
+  }
+
+  return (
+    <BusinessesMap {...props} />
+  )
+}

package/example/views/CheckoutExample/index.js

@@ -1,143 +1,143 @@
-import React, { useEffect, useState } from 'react'
-
-import { loadStripe } from '@stripe/stripe-js'
-
-import { CheckoutUI } from '../../components/CheckoutUI'
-import { Checkout } from '../../../src/components/Checkout'
-import { TestComponent } from '../../components/TestComponent'
-import { useSession } from '../../../src/contexts/SessionContext'
-import { useOrder } from '../../../src/contexts/OrderContext'
-import { useParams, useHistory, useLocation } from 'react-router-dom'
-import { useApi } from '../../../src/contexts/ApiContext'
-
-const useQuery = () => {
-  return new URLSearchParams(useLocation().search)
-}
-
-export const CheckoutExample = () => {
-  const { cartUuid } = useParams()
-  const query = useQuery()
-  const history = useHistory()
-  const [ordering] = useApi()
-
-  const actionsBeforePlace = async (paymethod, cart) => {
-    switch (paymethod.gateway) {
-      case 'stripe':
-      case 'stripe_connect':
-      case 'stripe_direct': {
-        const stripe = await loadStripe(paymethod.paymethod.credentials.publishable)
-        await stripe.confirmCardPayment(cart.paymethod_data.result.client_secret)
-        return true
-      }
-      case 'stripe_redirect': {
-        const stripe = await loadStripe(paymethod.paymethod.credentials.publishable)
-        stripe.confirmBancontactPayment(
-          cart.paymethod_data.result.client_secret,
-          {
-            payment_method: {
-              billing_details: cart.paymethod_data.data.owner
-            },
-            return_url: `http://localhost:8200/checkout/${cartUuid}`
-          }
-        ).then((result) => {
-          console.log(result)
-        })
-        return true
-      }
-      default:
-        return true
-    }
-  }
-
-  const [{ token }] = useSession()
-  const [{ carts }, { confirmCart }] = useOrder()
-
-  // const [cartUuid, setCartUuid] = useState(params.cartUuid)
-  const [cartState, setCartState] = useState({ loading: false, error: null, cart: null })
-
-  const getOrder = async (cartId) => {
-    setCartState({ ...cartState, loading: true })
-    const response = await fetch(`${ordering.root}/carts/${cartId}`, { method: 'GET', headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` } })
-    const { error, result } = await response.json()
-    if (result.status === 1 && result.order?.uuid) {
-      alert(`REDIRECT TO /orders/${result.order.uuid}`)
-      setCartState({ ...cartState, loading: false })
-      history.push(`/order_details/${result.order.uuid}`)
-    } else if (result.status === 2 && result.paymethod_data.gateway === 'stripe_redirect' && query.get('payment_intent')) {
-      console.log('Confirm order')
-      // const result = await confirmCart(cartUuid)
-      // console.log(result)
-    } else {
-      setCartState({
-        ...cartState,
-        loading: false,
-        cart: result
-      })
-    }
-  }
-
-  useEffect(() => {
-    if (token && cartUuid && !cartState.cart) {
-      getOrder(cartUuid)
-    }
-  }, [token, cartUuid])
-
-  const props = {
-    /**
-     * UI Component, this must be containt all graphic elements and use parent props
-     */
-    UIComponent: CheckoutUI,
-    /**
-     * Id for get business details from API
-     */
-    businessId: 41,
-    actionsBeforePlace,
-    // /**
-    //  * handler values from other components
-    //  */
-    // handlerValues: (e) => { console.log(e) },
-    /**
-     * Custom method to receive props from checkout page
-     */
-    // handleCustomClick: (e) => { console.log('handleCustomClick', e) },
-    /**
-     * onPlaceOrderClick, function to get click event and return business object after default behavior
-     */
-    onPlaceOrderClick: (data, paymethod, cart) => {
-      console.log('onPlaceOrderClick event', data, paymethod, cart)
-      if (cart.order?.uuid) {
-        alert(`REDIRECT TO /orders/${cart.order.uuid}`)
-        history.push(`/order_details/${cart.order.uuid}`)
-      }
-    },
-    /**
-     * Components types before checkout
-     * Array of type components, the parent props will pass to these components
-     */
-    beforeComponents: [TestComponent],
-    /**
-     * Components types after checkout
-     * Array of type components, the parent props will pass to these components
-     */
-    afterComponents: [TestComponent],
-    /**
-     * Elements before checkout
-     * Array of HTML/Components elements, these components will not get the parent props
-     */
-    beforeElements: [<p>Test Element Before</p>],
-    /**
-     * Elements after checkout
-     * Array of HTML/Components elements, these components will not get the parent props
-     */
-    afterElements: [<p>Test Element After</p>]
-  }
-  return (
-    <>
-      {!cartUuid && carts && Object.keys(carts).length === 0 && 'You not have carts'}
-      {!cartUuid && carts && Object.values(carts).map(cart => (
-        <button key={cart.uuid} onClick={() => history.push(`/checkout/${cart.uuid}`)} disabled={cartState.loading}>Checkout cart: {cart.uuid}</button>
-      ))}
-      {cartUuid && cartState.cart && cartState.cart?.status !== 1 && <Checkout {...props} cart={cartUuid} />}
-    </>
-  )
-}
+import React, { useEffect, useState } from 'react'
+
+import { loadStripe } from '@stripe/stripe-js'
+
+import { CheckoutUI } from '../../components/CheckoutUI'
+import { Checkout } from '../../../src/components/Checkout'
+import { TestComponent } from '../../components/TestComponent'
+import { useSession } from '../../../src/contexts/SessionContext'
+import { useOrder } from '../../../src/contexts/OrderContext'
+import { useParams, useHistory, useLocation } from 'react-router-dom'
+import { useApi } from '../../../src/contexts/ApiContext'
+
+const useQuery = () => {
+  return new URLSearchParams(useLocation().search)
+}
+
+export const CheckoutExample = () => {
+  const { cartUuid } = useParams()
+  const query = useQuery()
+  const history = useHistory()
+  const [ordering] = useApi()
+
+  const actionsBeforePlace = async (paymethod, cart) => {
+    switch (paymethod.gateway) {
+      case 'stripe':
+      case 'stripe_connect':
+      case 'stripe_direct': {
+        const stripe = await loadStripe(paymethod.paymethod.credentials.publishable)
+        await stripe.confirmCardPayment(cart.paymethod_data.result.client_secret)
+        return true
+      }
+      case 'stripe_redirect': {
+        const stripe = await loadStripe(paymethod.paymethod.credentials.publishable)
+        stripe.confirmBancontactPayment(
+          cart.paymethod_data.result.client_secret,
+          {
+            payment_method: {
+              billing_details: cart.paymethod_data.data.owner
+            },
+            return_url: `http://localhost:8200/checkout/${cartUuid}`
+          }
+        ).then((result) => {
+          console.log(result)
+        })
+        return true
+      }
+      default:
+        return true
+    }
+  }
+
+  const [{ token }] = useSession()
+  const [{ carts }, { confirmCart }] = useOrder()
+
+  // const [cartUuid, setCartUuid] = useState(params.cartUuid)
+  const [cartState, setCartState] = useState({ loading: false, error: null, cart: null })
+
+  const getOrder = async (cartId) => {
+    setCartState({ ...cartState, loading: true })
+    const response = await fetch(`${ordering.root}/carts/${cartId}`, { method: 'GET', headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` } })
+    const { error, result } = await response.json()
+    if (result.status === 1 && result.order?.uuid) {
+      alert(`REDIRECT TO /orders/${result.order.uuid}`)
+      setCartState({ ...cartState, loading: false })
+      history.push(`/order_details/${result.order.uuid}`)
+    } else if (result.status === 2 && result.paymethod_data.gateway === 'stripe_redirect' && query.get('payment_intent')) {
+      console.log('Confirm order')
+      // const result = await confirmCart(cartUuid)
+      // console.log(result)
+    } else {
+      setCartState({
+        ...cartState,
+        loading: false,
+        cart: result
+      })
+    }
+  }
+
+  useEffect(() => {
+    if (token && cartUuid && !cartState.cart) {
+      getOrder(cartUuid)
+    }
+  }, [token, cartUuid])
+
+  const props = {
+    /**
+     * UI Component, this must be containt all graphic elements and use parent props
+     */
+    UIComponent: CheckoutUI,
+    /**
+     * Id for get business details from API
+     */
+    businessId: 41,
+    actionsBeforePlace,
+    // /**
+    //  * handler values from other components
+    //  */
+    // handlerValues: (e) => { console.log(e) },
+    /**
+     * Custom method to receive props from checkout page
+     */
+    // handleCustomClick: (e) => { console.log('handleCustomClick', e) },
+    /**
+     * onPlaceOrderClick, function to get click event and return business object after default behavior
+     */
+    onPlaceOrderClick: (data, paymethod, cart) => {
+      console.log('onPlaceOrderClick event', data, paymethod, cart)
+      if (cart.order?.uuid) {
+        alert(`REDIRECT TO /orders/${cart.order.uuid}`)
+        history.push(`/order_details/${cart.order.uuid}`)
+      }
+    },
+    /**
+     * Components types before checkout
+     * Array of type components, the parent props will pass to these components
+     */
+    beforeComponents: [TestComponent],
+    /**
+     * Components types after checkout
+     * Array of type components, the parent props will pass to these components
+     */
+    afterComponents: [TestComponent],
+    /**
+     * Elements before checkout
+     * Array of HTML/Components elements, these components will not get the parent props
+     */
+    beforeElements: [<p>Test Element Before</p>],
+    /**
+     * Elements after checkout
+     * Array of HTML/Components elements, these components will not get the parent props
+     */
+    afterElements: [<p>Test Element After</p>]
+  }
+  return (
+    <>
+      {!cartUuid && carts && Object.keys(carts).length === 0 && 'You not have carts'}
+      {!cartUuid && carts && Object.values(carts).map(cart => (
+        <button key={cart.uuid} onClick={() => history.push(`/checkout/${cart.uuid}`)} disabled={cartState.loading}>Checkout cart: {cart.uuid}</button>
+      ))}
+      {cartUuid && cartState.cart && cartState.cart?.status !== 1 && <Checkout {...props} cart={cartUuid} />}
+    </>
+  )
+}

package/example/views/CmsContentExample/index.js

@@ -1,44 +1,44 @@
-import React from 'react'
-
-import { CmsContentUI } from '../../components/CmsContentUI'
-import { CmsContent } from '../../../src/components/CmsContent'
-import { TestComponent } from '../../components/TestComponent'
-
-export const CmsContentExample = ({ ordering }) => {
-  const props = {
-    /**
-     * Instace of Ordering Class
-     * @see See (Ordering API SDK)[https://github.com/sergioaok/ordering-api-sdk]
-     */
-    ordering: ordering,
-    /**
-     * UI Component, this must be containt all graphic elements and use parent props
-     */
-    UIComponent: CmsContentUI,
-    /**
-     * UI Component, this must be containt all graphic elements and use parent props
-     */
-    pageSlug: 'OrderingPages',
-    /**
-     * Components types before login form
-     * Array of type components, the parent props will pass to these components
-     */
-    beforeComponents: [TestComponent],
-    /**
-     * Components types after login form
-     * Array of type components, the parent props will pass to these components
-     */
-    afterComponents: [TestComponent],
-    /**
-     * Elements before login form
-     * Array of HTML/Components elements, these components will not get the parent props
-     */
-    beforeElements: [<p>Test Element Before</p>],
-    /**
-     * Elements after login form
-     * Array of HTML/Components elements, these components will not get the parent props
-     */
-    afterElements: [<p>Test Element After</p>]
-  }
-  return <CmsContent {...props} />
-}
+import React from 'react'
+
+import { CmsContentUI } from '../../components/CmsContentUI'
+import { CmsContent } from '../../../src/components/CmsContent'
+import { TestComponent } from '../../components/TestComponent'
+
+export const CmsContentExample = ({ ordering }) => {
+  const props = {
+    /**
+     * Instace of Ordering Class
+     * @see See (Ordering API SDK)[https://github.com/sergioaok/ordering-api-sdk]
+     */
+    ordering: ordering,
+    /**
+     * UI Component, this must be containt all graphic elements and use parent props
+     */
+    UIComponent: CmsContentUI,
+    /**
+     * UI Component, this must be containt all graphic elements and use parent props
+     */
+    pageSlug: 'OrderingPages',
+    /**
+     * Components types before login form
+     * Array of type components, the parent props will pass to these components
+     */
+    beforeComponents: [TestComponent],
+    /**
+     * Components types after login form
+     * Array of type components, the parent props will pass to these components
+     */
+    afterComponents: [TestComponent],
+    /**
+     * Elements before login form
+     * Array of HTML/Components elements, these components will not get the parent props
+     */
+    beforeElements: [<p>Test Element Before</p>],
+    /**
+     * Elements after login form
+     * Array of HTML/Components elements, these components will not get the parent props
+     */
+    afterElements: [<p>Test Element After</p>]
+  }
+  return <CmsContent {...props} />
+}

package/example/views/DriverTipsExample/index.js

@@ -1,47 +1,47 @@
-import React from 'react'
-
-import { DriverTipsUI } from '../../components/DriverTipsUI'
-import { DriverTips } from '../../../src/components/DriverTips'
-import { TestComponent } from '../../components/TestComponent'
-
-export const DriverTipsExample = () => {
-  const props = {
-    /**
-     * UI Component, this must be containt all graphic elements and use parent props
-     */
-    UIComponent: DriverTipsUI,
-    /**
-     * Cart business id
-     */
-    businessId: 41,
-    /**
-     * driver tips options
-     */
-    driverTipsOptions: [0, 10, 15, 20, 25],
-    /**
-     * method to get option selected
-     */
-    handlerChangeDriverOption: (e) => { console.log(e) },
-    /**
-     * Components types before driver tips
-     * Array of type components, the parent props will pass to these components
-     */
-    beforeComponents: [TestComponent],
-    /**
-     * Components types after driver tips
-     * Array of type components, the parent props will pass to these components
-     */
-    afterComponents: [TestComponent],
-    /**
-     * Elements before driver tips
-     * Array of HTML/Components elements, these components will not get the parent props
-     */
-    beforeElements: [<p>Test Element Before</p>],
-    /**
-     * Elements after driver tips
-     * Array of HTML/Components elements, these components will not get the parent props
-     */
-    afterElements: [<p>Test Element After</p>]
-  }
-  return <DriverTips {...props} />
-}
+import React from 'react'
+
+import { DriverTipsUI } from '../../components/DriverTipsUI'
+import { DriverTips } from '../../../src/components/DriverTips'
+import { TestComponent } from '../../components/TestComponent'
+
+export const DriverTipsExample = () => {
+  const props = {
+    /**
+     * UI Component, this must be containt all graphic elements and use parent props
+     */
+    UIComponent: DriverTipsUI,
+    /**
+     * Cart business id
+     */
+    businessId: 41,
+    /**
+     * driver tips options
+     */
+    driverTipsOptions: [0, 10, 15, 20, 25],
+    /**
+     * method to get option selected
+     */
+    handlerChangeDriverOption: (e) => { console.log(e) },
+    /**
+     * Components types before driver tips
+     * Array of type components, the parent props will pass to these components
+     */
+    beforeComponents: [TestComponent],
+    /**
+     * Components types after driver tips
+     * Array of type components, the parent props will pass to these components
+     */
+    afterComponents: [TestComponent],
+    /**
+     * Elements before driver tips
+     * Array of HTML/Components elements, these components will not get the parent props
+     */
+    beforeElements: [<p>Test Element Before</p>],
+    /**
+     * Elements after driver tips
+     * Array of HTML/Components elements, these components will not get the parent props
+     */
+    afterElements: [<p>Test Element After</p>]
+  }
+  return <DriverTips {...props} />
+}

package/example/views/EventsExample/index.js

@@ -1,26 +1,26 @@
-import React, { useEffect } from 'react'
-import { useEvent } from '../../../src/contexts/EventContext'
-
-export const EventsExample = () => {
-  const [events] = useEvent()
-
-  useEffect(() => {
-    events.on('event_test', (data) => {
-      console.log('event_test >> ', data)
-    })
-    return () => {
-      events.off('event_test')
-    }
-  }, [events])
-
-  const handleClick = () => {
-    events.emit('event_test', { test: 'TEST' })
-  }
-
-  return (
-    <>
-      <p>Events</p>
-      <button onClick={handleClick}>Emit event</button>
-    </>
-  )
-}
+import React, { useEffect } from 'react'
+import { useEvent } from '../../../src/contexts/EventContext'
+
+export const EventsExample = () => {
+  const [events] = useEvent()
+
+  useEffect(() => {
+    events.on('event_test', (data) => {
+      console.log('event_test >> ', data)
+    })
+    return () => {
+      events.off('event_test')
+    }
+  }, [events])
+
+  const handleClick = () => {
+    events.emit('event_test', { test: 'TEST' })
+  }
+
+  return (
+    <>
+      <p>Events</p>
+      <button onClick={handleClick}>Emit event</button>
+    </>
+  )
+}