ordering-ui-react-native 0.24.43-test → 0.25.1

package/src/config/constants.tsx

@@ -1,73 +1,73 @@
-export const IMAGES = {
-  menu: require('../assets/icons/menu.png'),
-  lunch: require('../assets/icons/lunch.png'),
-  arrow_up: require('../assets/icons/arrow_up.png'),
-  arrow_left: require('../assets/icons/arrow_left.png'),
-  map: require('../assets/icons/map.png'),
-  marker: require('../assets/images/marker.png'),
-  email: require('../assets/icons/ic_email.png'),
-  lock: require('../assets/icons/ic_lock.png'),
-  camera: require('../assets/icons/camera.png'),
-  support: require('../assets/icons/help.png'),
-  trash: require('../assets/icons/trash.png'),
-  phone: require('../assets/icons/phone.png'),
-  mail: require('../assets/icons/mail.png'),
-  chat: require('../assets/icons/chat.png'),
-  user: require('../assets/icons/menu-user.png'),
-  menulogout: require('../assets/icons/menu-logout.png')
-}
-
-export const USER_TYPE = {
-  BUSINESS : 'business',
-  CUSTOMER : 'customer',
-  DRIVER : 'driver'
-}
-
-export const ORDER_STATUS_IMAGES = {
-  orderStatus0: require('../assets/images/status-0.png'),
-  orderStatus1: require('../assets/images/status-1.png'),
-  orderStatus2: require('../assets/images/status-2.png'),
-  orderStatus3: require('../assets/images/status-3.png'),
-  orderStatus4: require('../assets/images/status-4.png'),
-  orderStatus5: require('../assets/images/status-5.png'),
-  orderStatus6: require('../assets/images/status-6.png'),
-  orderStatus7: require('../assets/images/status-7.png'),
-  orderStatus8: require('../assets/images/status-8.png'),
-  orderStatus9: require('../assets/images/status-9.png'),
-  orderStatus10: require('../assets/images/status-10.png'),
-  orderStatus11: require('../assets/images/status-11.png'),
-  orderStatus12: require('../assets/images/status-12.png'),
-  orderStatus13: require('../assets/images/status-13.png'),
-}
-
-export const PAYMENT_IMAGES = {
-  cash: require('../assets/icons/cash.png'),
-  carddelivery: require('../assets/icons/card-delivery.png'),
-  paypal: require('../assets/icons/paypal.png'),
-  stripe: require('../assets/icons/stripe.png'),
-  stripecc: require('../assets/icons/cc-stripe.png'),
-  stripes: require('../assets/icons/stripe-s.png'),
-  stripesb: require('../assets/icons/stripe-sb.png'),
-  creditCard: require('../assets/icons/credit-card.png')
-}
-
-export const DUMMIES_IMAGES = {
-  product: require('../assets/images/dummies/product.png'),
-  store: require('../assets/images/dummies/store.png')
-}
-
-export const CATEGORIES_IMAGES = {
-  all: require('../assets/images/categories/category-all.png'),
-}
-
-export const GENERAL_IMAGES = {
-  emptyActiveOrders: require('../assets/images/empty-active-orders.png'),
-  emptyPastOrders: require('../assets/images/empty-past-orders.png'),
-  notFound: require('../assets/images/not-found.png'),
-  homeHero: require('../assets/images/home-hero.png'),
-}
-
-export const LOGO_IMAGES = {
-  logotype: require('../assets/images/logotype.png'),
-  logotypeInvert: require('../assets/images/logotype-invert.png'),
-}
+export const IMAGES = {
+  menu: require('../assets/icons/menu.png'),
+  lunch: require('../assets/icons/lunch.png'),
+  arrow_up: require('../assets/icons/arrow_up.png'),
+  arrow_left: require('../assets/icons/arrow_left.png'),
+  map: require('../assets/icons/map.png'),
+  marker: require('../assets/images/marker.png'),
+  email: require('../assets/icons/ic_email.png'),
+  lock: require('../assets/icons/ic_lock.png'),
+  camera: require('../assets/icons/camera.png'),
+  support: require('../assets/icons/help.png'),
+  trash: require('../assets/icons/trash.png'),
+  phone: require('../assets/icons/phone.png'),
+  mail: require('../assets/icons/mail.png'),
+  chat: require('../assets/icons/chat.png'),
+  user: require('../assets/icons/menu-user.png'),
+  menulogout: require('../assets/icons/menu-logout.png')
+}
+
+export const USER_TYPE = {
+  BUSINESS : 'business',
+  CUSTOMER : 'customer',
+  DRIVER : 'driver'
+}
+
+export const ORDER_STATUS_IMAGES = {
+  orderStatus0: require('../assets/images/status-0.png'),
+  orderStatus1: require('../assets/images/status-1.png'),
+  orderStatus2: require('../assets/images/status-2.png'),
+  orderStatus3: require('../assets/images/status-3.png'),
+  orderStatus4: require('../assets/images/status-4.png'),
+  orderStatus5: require('../assets/images/status-5.png'),
+  orderStatus6: require('../assets/images/status-6.png'),
+  orderStatus7: require('../assets/images/status-7.png'),
+  orderStatus8: require('../assets/images/status-8.png'),
+  orderStatus9: require('../assets/images/status-9.png'),
+  orderStatus10: require('../assets/images/status-10.png'),
+  orderStatus11: require('../assets/images/status-11.png'),
+  orderStatus12: require('../assets/images/status-12.png'),
+  orderStatus13: require('../assets/images/status-13.png'),
+}
+
+export const PAYMENT_IMAGES = {
+  cash: require('../assets/icons/cash.png'),
+  carddelivery: require('../assets/icons/card-delivery.png'),
+  paypal: require('../assets/icons/paypal.png'),
+  stripe: require('../assets/icons/stripe.png'),
+  stripecc: require('../assets/icons/cc-stripe.png'),
+  stripes: require('../assets/icons/stripe-s.png'),
+  stripesb: require('../assets/icons/stripe-sb.png'),
+  creditCard: require('../assets/icons/credit-card.png')
+}
+
+export const DUMMIES_IMAGES = {
+  product: require('../assets/images/dummies/product.png'),
+  store: require('../assets/images/dummies/store.png')
+}
+
+export const CATEGORIES_IMAGES = {
+  all: require('../assets/images/categories/category-all.png'),
+}
+
+export const GENERAL_IMAGES = {
+  emptyActiveOrders: require('../assets/images/empty-active-orders.png'),
+  emptyPastOrders: require('../assets/images/empty-past-orders.png'),
+  notFound: require('../assets/images/not-found.png'),
+  homeHero: require('../assets/images/home-hero.png'),
+}
+
+export const LOGO_IMAGES = {
+  logotype: require('../assets/images/logotype.png'),
+  logotypeInvert: require('../assets/images/logotype-invert.png'),
+}

package/src/config.json

@@ -1,16 +1,16 @@
-{
-  "app_id": "react-native-app",
-  "notification_app": "orderingapp",
-  "app_name": "Ordering",
-  "project": "reactdemo",
-  "apple_app_id": "com.delivery",
-  "android_app_id": "com.delivery",
-  "api": {
-    "url": "https://apiv4.ordering.co",
-    "language": "en",
-    "version": "v400"
-  },
-  "socket": {
-    "url": "https://socket-v2.ordering.co"
-  }
-}
+{
+  "app_id": "react-native-app",
+  "notification_app": "orderingapp",
+  "app_name": "Ordering",
+  "project": "reactdemo",
+  "apple_app_id": "com.delivery",
+  "android_app_id": "com.delivery",
+  "api": {
+    "url": "https://apiv4.ordering.co",
+    "language": "en",
+    "version": "v400"
+  },
+  "socket": {
+    "url": "https://socket-v2.ordering.co"
+  }
+}

package/src/context/OfflineActions/index.tsx

@@ -0,0 +1,236 @@
+import React, { useState, createContext, useEffect, useContext } from 'react';
+import { useApi, useSession, useEvent, useWebsocket } from 'ordering-components/native'
+import { useNetInfo } from '@react-native-community/netinfo';
+
+import { _retrieveStoreData, _setStoreData, _removeStoreData } from '../../providers/StoreUtil'
+
+type State = {
+  isNetConnected: boolean | null
+  isCombinedTabs: boolean | null
+  canSaveChangesOffline: boolean | null
+  actions: { [key: string]: any }
+  orders: { [key: string]: any } | null
+}
+
+type Functions = {
+  applyOffAction: (changes: any) => any
+  registerOffOrder: (order: any) => any
+  setState: React.Dispatch<React.SetStateAction<State>>
+}
+
+const defaultState = {
+  isNetConnected: null,
+  isCombinedTabs: null,
+  canSaveChangesOffline: false,
+  actions: {},
+  orders: null,
+}
+
+
+export const OfflineActionsContext = createContext<[State, Functions]>([
+  defaultState,
+  {
+    applyOffAction: () => {},
+    registerOffOrder: () => {},
+    setState: () => {}
+  }
+]);
+
+export const OfflineActionsProvider = (props: any) => {
+  const netInfo = useNetInfo()
+  const [ordering] = useApi()
+  const [{ token }] = useSession()
+  const [events] = useEvent()
+  const socket = useWebsocket()
+
+  const [state, setState] = useState<State>({
+    isNetConnected: netInfo.isConnected,
+    isCombinedTabs: false,
+    canSaveChangesOffline: false,
+    actions: [],
+    orders: null
+  })
+
+  const getStatusById = (id: number) => {
+    if (!id && id !== 0) return
+    const active = [0, 3, 4, 7, 8, 9, 13, 14, 18, 19, 20, 21]
+    const pending = [0, 13]
+    const inProgress = [3, 4, 7, 8, 9, 14, 18, 19, 20, 21]
+    const completed = [1, 11, 15]
+
+    const status = pending.includes(id)
+      ? 'pending'
+      : inProgress.includes(id)
+        ? 'inProgress'
+        : completed.includes(id)
+          ? 'completed'
+          : 'cancelled'
+
+    const combinedStatus = active.includes(id)
+      ? 'active'
+      : completed.includes(id)
+        ? 'completed'
+        : 'cancelled'
+
+    return state.isCombinedTabs ? combinedStatus : status
+  }
+
+  const applyOffAction = async (changes: any) => {
+    if (state.canSaveChangesOffline === false) return false
+
+    let _actions: any = state.actions?.[changes?.data?.orderId] ?? []
+
+    if (state.actions?.[changes?.data?.orderId]) {
+      _actions.push(changes)
+    } else {
+      _actions = [changes]
+    }
+    const actions = { ...state.actions, [changes?.data?.orderId]: _actions }
+
+    setState(state => ({ ...state, actions }))
+    await _setStoreData('offline_actions_array', actions)
+    return true
+  }
+
+  const registerOffOrder = async (order: any) => {
+    if (!order) return
+
+    const oldStatusString = getStatusById(order?.oldStatus)
+    const newStatusString = getStatusById(order?.status)
+
+    const orderStatuses: any = [oldStatusString]
+    oldStatusString !== newStatusString && orderStatuses.push(newStatusString)
+
+    const ordersStoraged: any = {}
+    for (const status of orderStatuses) {
+      ordersStoraged[status] = await _retrieveStoreData(`${status}_orders`)
+
+      if (ordersStoraged[status]) {
+        if (orderStatuses.length === 1) {
+          ordersStoraged[status] = [
+            ...ordersStoraged[status].filter((_order: any) => _order.id !== order.id),
+            order
+          ].sort((a: any, b: any) => b.id - a.id)
+        } else if (orderStatuses.length === 2) {
+          if (status === oldStatusString) {
+            ordersStoraged[status] = ordersStoraged[status]
+              .filter((_order: any) => _order.id !== order.id)
+              .sort((a: any, b: any) => b.id - a.id)
+          }
+          if (status === newStatusString) {
+            ordersStoraged[status] = [
+              ...ordersStoraged[status],
+              order
+            ].sort((a: any, b: any) => b.id - a.id)
+          }
+        }
+        await _setStoreData(`${status}_orders`, ordersStoraged[status]);
+      } else {
+        ordersStoraged[status] = [order]
+      }
+    }
+    if (Object.keys(ordersStoraged).length) {
+      setState(state => ({ ...state, orders: ordersStoraged }))
+    }
+  }
+
+  const syncChanges = async (changes: any) => {
+    const ordersIdUpdated: any = []
+
+    Object.keys(changes).forEach(async (orderId) => {
+      const arr = changes[orderId]
+
+      const [lastChange, ...restOfChanges] = arr.reverse();
+
+      if (restOfChanges.length > 0) {
+        const ordersString = restOfChanges
+          .map((obj: any) => (
+            Object.entries(obj?.data?.body).map(([clave, valor]) => `${clave}: '${valor}'`).join(', ')
+          ))
+          .join(', ')
+        handleSendMessage({ message: ordersString, orderId })
+      }
+      const id = await updateOrderStatus({ orderId, body: lastChange?.data?.body })
+      id && ordersIdUpdated.push(id);
+    });
+
+    ordersIdUpdated.length && events.emit('offline_order_updated', ordersIdUpdated)
+    await _removeStoreData('offline_actions_array');
+    setState(state => ({ ...state, actions: [] }));
+  }
+
+  const actionsFromStorage = async (isConnected: boolean) => {
+    setState(state => ({ ...state, isNetConnected: isConnected }))
+    const storedActions = await _retrieveStoreData('offline_actions_array');
+
+    if (isConnected && Object.keys(storedActions)?.length) {
+      syncChanges(storedActions)
+      return
+    }
+
+    Object.keys(storedActions)?.length && setState(state => ({ ...state, actions: storedActions }));
+  }
+
+  useEffect(() => {
+    if (netInfo.isConnected === null || state.canSaveChangesOffline === false) return
+    actionsFromStorage(netInfo.isConnected)
+  }, [netInfo.isConnected])
+
+  const functions: any = {
+    applyOffAction,
+    registerOffOrder,
+    setState
+  }
+
+  const updateOrderStatus = async (offlineData: any) => {
+    try {
+      const { content: { result: order, error } } = await ordering
+        .setAccessToken(token)
+        .orders(offlineData?.orderId)
+        .save(offlineData?.body)
+
+      return error ? null : order?.id
+    } catch {
+      return null
+    }
+  }
+
+  const handleSendMessage = async (offlineData: any) => {
+    try {
+      const _canRead = [0, 2, 3, 4]
+      const body = {
+        comment: offlineData?.message,
+        type: 2,
+        can_see: _canRead.join(',')
+      }
+      const response = await fetch(`${ordering.root}/orders/${offlineData?.orderId}/messages`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`,
+          'X-App-X': ordering.appId,
+          'X-Socket-Id-X': socket?.getId()
+        },
+        body: JSON.stringify(body)
+      })
+      const { error, result } = await response.json()
+    } catch {
+      return null
+    }
+  }
+
+  const eventsDictiorary: any = {
+    evt_off_change_order_status: updateOrderStatus
+  }
+
+  return (
+    <OfflineActionsContext.Provider value={[{ ...state, isNetConnected: netInfo.isConnected }, functions]}>
+      {props.children}
+    </OfflineActionsContext.Provider>
+  );
+};
+
+export const useOfflineActions = () => {
+  const actionsManager = useContext(OfflineActionsContext)
+  return actionsManager || [defaultState, {}]
+}

package/src/context/Theme/index.tsx

@@ -1,25 +1,25 @@
-import React, { createContext, useContext, useState } from 'react'
-import { ThemeProvider as ThemeProviderStyled } from 'styled-components'
-
-type ITheme = any;
-
-type IThemeContext = [ITheme, React.Dispatch<React.SetStateAction<ITheme>>];
-
-const ThemeContext = createContext<IThemeContext>([[], () => null]);
-
-export const ThemeProvider = ({ children, ...props }: any) => {
-  const [theme, setTheme] = useState<ITheme>(props.theme);
-
-  return (
-    <ThemeContext.Provider value={[theme, setTheme]}>
-      <ThemeProviderStyled theme={theme}>
-        {children}
-      </ThemeProviderStyled>
-    </ThemeContext.Provider>
-  )
-}
-
-export const useTheme = () => {
-  const themeManager = useContext(ThemeContext)
-  return themeManager || [{}]
-}
+import React, { createContext, useContext, useState } from 'react'
+import { ThemeProvider as ThemeProviderStyled } from 'styled-components'
+
+type ITheme = any;
+
+type IThemeContext = [ITheme, React.Dispatch<React.SetStateAction<ITheme>>];
+
+const ThemeContext = createContext<IThemeContext>([[], () => null]);
+
+export const ThemeProvider = ({ children, ...props }: any) => {
+  const [theme, setTheme] = useState<ITheme>(props.theme);
+
+  return (
+    <ThemeContext.Provider value={[theme, setTheme]}>
+      <ThemeProviderStyled theme={theme}>
+        {children}
+      </ThemeProviderStyled>
+    </ThemeContext.Provider>
+  )
+}
+
+export const useTheme = () => {
+  const themeManager = useContext(ThemeContext)
+  return themeManager || [{}]
+}

package/src/hooks/DeviceOrientation.tsx

@@ -1,40 +1,40 @@
-import { useEffect, useState } from 'react';
-import { Dimensions } from 'react-native';
-
-export const PORTRAIT = "portrait";
-export const LANDSCAPE = "landscape";
-
-export const useDeviceOrientation = (): [{
-  orientation: "portrait" | "landscape",
-  dimensions: { width: number, height: number }
-}] => {
-
-  const { width, height } = Dimensions.get('window');
-
-  const [dimensions, setDimensions] = useState({ width, height });
-  const [orientation, setOrientation] = useState<"portrait" | "landscape">(
-    width < height ? PORTRAIT : LANDSCAPE
-  );
-
-  useEffect(() => {
-    Dimensions.addEventListener('change', ({ window: { width, height } }) => {
-
-      setDimensions({ width, height });
-
-      if (width < height) {
-        setOrientation(PORTRAIT);
-      } else {
-        setOrientation(LANDSCAPE);
-      }
-
-    })
-  }, []);
-
-  return [{ orientation, dimensions }];
-}
-
-export const DeviceOrientationMethods = {
-  PORTRAIT,
-  LANDSCAPE,
-  useDeviceOrientation
-}
+import { useEffect, useState } from 'react';
+import { Dimensions } from 'react-native';
+
+export const PORTRAIT = "portrait";
+export const LANDSCAPE = "landscape";
+
+export const useDeviceOrientation = (): [{
+  orientation: "portrait" | "landscape",
+  dimensions: { width: number, height: number }
+}] => {
+
+  const { width, height } = Dimensions.get('window');
+
+  const [dimensions, setDimensions] = useState({ width, height });
+  const [orientation, setOrientation] = useState<"portrait" | "landscape">(
+    width < height ? PORTRAIT : LANDSCAPE
+  );
+
+  useEffect(() => {
+    Dimensions.addEventListener('change', ({ window: { width, height } }) => {
+
+      setDimensions({ width, height });
+
+      if (width < height) {
+        setOrientation(PORTRAIT);
+      } else {
+        setOrientation(LANDSCAPE);
+      }
+
+    })
+  }, []);
+
+  return [{ orientation, dimensions }];
+}
+
+export const DeviceOrientationMethods = {
+  PORTRAIT,
+  LANDSCAPE,
+  useDeviceOrientation
+}

package/src/hooks/useCountdownTimer.tsx

@@ -1,26 +1,26 @@
-import { useEffect, useState } from 'react'
-
-/**
- * Hook for countdown seconds
- * @param {int} initialCount
- * @param {boolean} start
- */
-export function useCountdownTimer (initialCount : number, start : boolean) {
-  const [count, setCount] = useState(initialCount)
-
-  useEffect(() => {
-    if (start) {
-      const secondsLeft = setInterval(() => {
-        setCount(c => c - (c === 0 ? 0 : 1))
-      }, 1000)
-      return () => clearInterval(secondsLeft)
-    }
-  }, [start])
-
-  return [
-    count,
-    setCount,
-    /** reset */
-    () => { setCount(initialCount) }
-  ]
-}
+import { useEffect, useState } from 'react'
+
+/**
+ * Hook for countdown seconds
+ * @param {int} initialCount
+ * @param {boolean} start
+ */
+export function useCountdownTimer (initialCount : number, start : boolean) {
+  const [count, setCount] = useState(initialCount)
+
+  useEffect(() => {
+    if (start) {
+      const secondsLeft = setInterval(() => {
+        setCount(c => c - (c === 0 ? 0 : 1))
+      }, 1000)
+      return () => clearInterval(secondsLeft)
+    }
+  }, [start])
+
+  return [
+    count,
+    setCount,
+    /** reset */
+    () => { setCount(initialCount) }
+  ]
+}