ordering-ui-react-native 0.22.71 → 0.22.72-release

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.22.71",
+  "version": "0.22.72-release",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -36,7 +36,7 @@
     "@fatnlazycat/react-native-recaptcha-v3": "^1.0.3",
     "@invertase/react-native-apple-authentication": "^2.1.5",
     "@react-native-async-storage/async-storage": "^1.15.5",
-    "@react-native-clipboard/clipboard": "^1.8.4",
+    "@react-native-clipboard/clipboard": "1.14.0",
     "@react-native-community/checkbox": "^0.5.8",
     "@react-native-community/geolocation": "^2.0.2",
     "@react-native-community/masked-view": "^0.1.10",
@@ -51,14 +51,13 @@
     "@react-navigation/stack": "^5.9.3",
     "@segment/analytics-react-native": "2.1.11",
     "@segment/sovran-react-native": "0.2.6",
-    "@sentry/react-native": "^2.6.0",
-		"@stripe/stripe-react-native": "0.23.0",
+    "@stripe/stripe-react-native": "0.23.0",
     "@types/react-native-loading-spinner-overlay": "^0.5.2",
     "@types/react-native-snap-carousel": "^3.8.4",
     "@types/styled-components": "^5.1.3",
     "axios": "^0.21.0",
     "moment": "^2.29.1",
-    "ordering-components": "github:Ordering-Inc/ordering-components#development",
+    "ordering-components": "github:Ordering-Inc/ordering-components#release",
     "patch-package": "^6.4.7",
     "postinstall-postinstall": "^2.1.0",
     "prop-types": "^15.7.2",
@@ -91,7 +90,7 @@
     "react-native-image-picker": "^4.0.6",
     "react-native-intersection-observer": "^0.0.9",
     "react-native-lightbox": "^0.8.1",
-    "react-native-linear-gradient": "^2.5.6",
+    "react-native-linear-gradient": "2.7.3",
     "react-native-loading-spinner-overlay": "^2.0.0",
     "react-native-map-link": "^2.8.2",
     "react-native-maps": "^0.28.0",
@@ -102,7 +101,6 @@
     "react-native-phone-number-input": "^2.0.0",
     "react-native-picker-select": "^8.0.4",
     "react-native-print": "^0.9.0",
-    "react-native-reanimated": "^1.13.1",
     "react-native-recaptcha-that-works": "^1.2.0",
     "react-native-restart": "^0.0.22",
     "react-native-safe-area-context": "^3.1.8",

package/src/components/BusinessesListing/index.tsx

@@ -191,7 +191,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
         {isFarAway && (
 					<FarAwayMessage style={styles.farAwayMsg}>
 						<Ionicons name='md-warning-outline' style={styles.iconStyle} />
-						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</OText>
+						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'Your are far from this address')}</OText>
 					</FarAwayMessage>
 				)}
       </OrderControlContainer>

package/src/components/Checkout/index.tsx

@@ -295,6 +295,7 @@ const CheckoutUI = (props: any) => {
                 </Placeholder>
               ) : (
                 <AddressDetails
+                  cart={cart}
                   navigation={navigation}
                   location={businessDetails?.business?.location}
                   businessLogo={businessDetails?.business?.logo}
@@ -598,14 +599,14 @@ const CheckoutUI = (props: any) => {
                   validationFields?.fields?.checkout?.driver_tip?.enabled &&
                   validationFields?.fields?.checkout?.driver_tip?.required &&
                   (Number(cart?.driver_tip) <= 0) && (
-                  <OText
-                    style={{ textAlign: 'center' }}
-                    color={theme.colors.error}
-                    size={14}
-                  >
-                    {t('WARNING_INVALID_DRIVER_TIP', 'Driver Tip is required.')}
-                  </OText>
-								)}
+                    <OText
+                      style={{ textAlign: 'center' }}
+                      color={theme.colors.error}
+                      size={14}
+                    >
+                      {t('WARNING_INVALID_DRIVER_TIP', 'Driver Tip is required.')}
+                    </OText>
+                  )}
               </ChErrors>
             </ChSection>
           )}
@@ -617,15 +618,15 @@ const CheckoutUI = (props: any) => {
             <FloatingButton
               handleClick={() => handlePlaceOrder()}
               isSecondaryBtn={loading || !cart?.valid || !paymethodSelected || placing || errorCash || cart?.subtotal_to_calculate < cart?.minimum || paymethodSelected?.gateway === 'paypal' ||
-                              (options.type === 1 &&
-                                validationFields?.fields?.checkout?.driver_tip?.enabled &&
-                                validationFields?.fields?.checkout?.driver_tip?.required &&
-                                (Number(cart?.driver_tip) <= 0))}
+                (options.type === 1 &&
+                  validationFields?.fields?.checkout?.driver_tip?.enabled &&
+                  validationFields?.fields?.checkout?.driver_tip?.required &&
+                  (Number(cart?.driver_tip) <= 0))}
               disabled={loading || !cart?.valid || !paymethodSelected || placing || errorCash || cart?.subtotal_to_calculate < cart?.minimum || paymethodSelected?.gateway === 'paypal' ||
-                        (options.type === 1 &&
-                          validationFields?.fields?.checkout?.driver_tip?.enabled &&
-                          validationFields?.fields?.checkout?.driver_tip?.required &&
-                          (Number(cart?.driver_tip) <= 0))}
+                (options.type === 1 &&
+                  validationFields?.fields?.checkout?.driver_tip?.enabled &&
+                  validationFields?.fields?.checkout?.driver_tip?.required &&
+                  (Number(cart?.driver_tip) <= 0))}
               btnText={cart?.subtotal_to_calculate >= cart?.minimum
                 ? (
                   placing
@@ -641,31 +642,31 @@ const CheckoutUI = (props: any) => {
         </>
       )}
       {webviewPaymethod?.gateway === 'paypal' && showGateway.open && (
-          <PaymentOptionsWebView
-            onNavigationRedirect={onNavigationRedirect}
-            uri={`${ordering.root}/html/paypal_react_native`}
-            user={user}
-            token={token}
-            cart={cart}
-            currency={currency}
-            webviewPaymethod={webviewPaymethod}
-            setShowGateway={setShowGateway}
-            setOpenOrderCreating={setOpenOrderCreating}
-          />
+        <PaymentOptionsWebView
+          onNavigationRedirect={onNavigationRedirect}
+          uri={`${ordering.root}/html/paypal_react_native`}
+          user={user}
+          token={token}
+          cart={cart}
+          currency={currency}
+          webviewPaymethod={webviewPaymethod}
+          setShowGateway={setShowGateway}
+          setOpenOrderCreating={setOpenOrderCreating}
+        />
       )}
       {webviewPaymethod?.gateway === 'square' && showGateway.open && (
-          <PaymentOptionsWebView
-            onNavigationRedirect={onNavigationRedirect}
-            uri={`https://test-square-f50f7.web.app`}
-            user={user}
-            token={token}
-            cart={cart}
-            currency={currency}
-            webviewPaymethod={webviewPaymethod}
-            setShowGateway={setShowGateway}
-            setOpenOrderCreating={setOpenOrderCreating}
-            locationId={'L1NGAY5M6KJRX'}
-          />
+        <PaymentOptionsWebView
+          onNavigationRedirect={onNavigationRedirect}
+          uri={`https://test-square-f50f7.web.app`}
+          user={user}
+          token={token}
+          cart={cart}
+          currency={currency}
+          webviewPaymethod={webviewPaymethod}
+          setShowGateway={setShowGateway}
+          setOpenOrderCreating={setOpenOrderCreating}
+          locationId={'L1NGAY5M6KJRX'}
+        />
       )}
       {openOrderCreating && (
         <View style={{ zIndex: 9999, height: '100%', width: '100%', position: 'absolute', backgroundColor: 'white' }}>

package/src/components/VerifyPhone/styles.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components/native';
 
 export const Container = styled.View`
   width: 100%;
-  padding: 0 43px;
+  padding: 0 30px;
 `
 
 export const CountDownContainer = styled.View`
@@ -20,7 +20,6 @@ export const ResendSection = styled.View`
   display: flex;
   flex-direction: row;
   justify-content: center;
-  flex-wrap: wrap;
 `
 
 export const WrappCountdown = styled.View`

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/providers/AlertProvider.tsx

@@ -8,7 +8,8 @@ interface Props {
   title: string,
   content: Array<string>,
   onClose: () => void,
-  onAccept: () => void
+  onAccept: () => void,
+  onCancel: () => void
 }
 
 const Alert = (props: Props) => {
@@ -38,6 +39,7 @@ const Alert = (props: Props) => {
       confirmText={t('ACCEPT', 'Accept')}
       confirmButtonColor={theme.colors.primary}
       onCancelPressed={() => onClose()}
+      showCancelButton={!!props.onCancel}
       onConfirmPressed={() => onAccept()}
     />
   )

package/themes/business/src/components/AcceptOrRejectOrder/index.tsx

@@ -428,13 +428,15 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
             {action === 'accept' && (
               <View style={{ height: 300, justifyContent: 'center' }}>
                 <Timer onPress={() => openTimerIOnput()}>
-                  <OText weight="600" style={{ textAlign: 'center' }} size={55}>
+                  <OText weight="600" size={55}>
                     {hour}
                   </OText>
-                  {hour.length > 0 && <OText size={55}>:</OText>}
-                  <OText weight="600" style={{ textAlign: 'center' }} size={55}>
+                  {hour.length > 0 && <OText size={55} style={{ marginBottom: 10 }}>:</OText>}
+                  <OText weight="600" size={55}>
                     {min}
                   </OText>
+                  {time?.length > 2 && <OText style={{ position: 'absolute', bottom: 60, left: 55 }}>{t('HOURS', 'Hours')}</OText>}
+                  <OText style={{ position: 'absolute', bottom: 60, right: time?.length > 2 ? 55 : 95 }}>{t('MINUTES', 'Minutes')}</OText>
                 </Timer>
               </View>
             )}

package/themes/business/src/components/AcceptOrRejectOrder/styles.tsx

@@ -10,6 +10,7 @@ export const TopActions = styled.View`
 `
 
 export const Timer = styled.TouchableOpacity`
+  position: relative;
   padding: 40px;
   justify-content: center;
   flex-direction: row;

package/themes/business/src/components/BusinessController/index.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { StyleSheet, View, ActivityIndicator, TouchableOpacity } from 'react-native';
+import FastImage from 'react-native-fast-image'
 import ToggleSwitch from 'toggle-switch-react-native';
 import { useTheme } from 'styled-components/native';
 import {
@@ -99,10 +100,14 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
               onPress={() => navigation && business?.slug && navigation.navigate('BusinessProductListing', { slug: business?.slug })}
             >
               <Logo style={styles.logo}>
-                <OIcon
-                  url={optimizeImage(business?.logo, 'h_300,c_limit')}
-                  src={!business?.logo && theme?.images?.dummies?.businessLogo}
+                <FastImage
                   style={styles.icon}
+                  source={business?.logo?.includes('https') ? {
+                    uri: business?.logo,
+                    priority: FastImage.priority.high,
+                    cache: FastImage.cacheControl.immutable
+                  } : business?.logo ?? theme?.images?.dummies?.businessLogo}
+                  resizeMode={FastImage.resizeMode.cover}
                 />
               </Logo>
               <Information>

package/themes/business/src/components/BusinessProductList/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { View, StyleSheet, ScrollView, Dimensions, TouchableOpacity } from 'react-native';
+import { View, StyleSheet, ScrollView, Dimensions, TouchableOpacity, Platform } from 'react-native';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import { useTheme } from 'styled-components/native';
 import { SearchBar } from '../SearchBar';
@@ -115,7 +115,7 @@ const BusinessProductListUI = (props: any) => {
       <ScrollView
         showsVerticalScrollIndicator={false}
         style={styles.container}>
-        {!loading && business?.categories?.length === 0 && (
+        {!loading && categories?.length === 0 && (
           <NotFoundSource
             content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
             image={theme.images.general.notFound}
@@ -190,6 +190,7 @@ export const BusinessProductList = (props: any) => {
   const businessProductListProps = {
     ...props,
     UIComponent: BusinessProductListUI,
+    isIos: Platform.OS === 'ios'
   };
 
   return <StoreProductList {...businessProductListProps} />;

package/themes/business/src/components/Chat/index.tsx

@@ -36,6 +36,7 @@ import {
   useSession,
   useUtils,
   useLanguage,
+  useConfig
 } from 'ordering-components/native';
 import { Header, TitleHeader, Wrapper, QuickMessageContainer } from './styles';
 import { OIcon, OIconButton, OText, OButton } from '../shared';
@@ -68,8 +69,9 @@ const ChatUI = (props: MessagesParams) => {
   const [, t] = useLanguage();
   const [, { showToast }] = useToast();
   const theme = useTheme();
+  const [{ configs }] = useConfig();
   const [messageList, setMessageList] = useState<any>([])
-  const previousStatus = [1, 2, 5, 6, 10, 11, 12, 16, 17]
+  const previousStatus = [1, 2, 5, 6, 10, 11, 12, 15, 16, 17]
   const chatDisabled = previousStatus.includes(order?.status)
 
   const ORDER_STATUS: any = {
@@ -96,7 +98,10 @@ const ChatUI = (props: MessagesParams) => {
     20: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', 'Order customer almost arrived to business'),
     21: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Order customer arrived to business'),
     22: t('ORDER_LOOKING_FOR_DRIVER', 'Order looking for driver'),
-    23: t('ORDER_DRIVER_ON_WAY', 'Driver on way')
+    23: t('ORDER_DRIVER_ON_WAY', 'Driver on way'),
+    24: t('ORDER_DRIVER_WAITING_FOR_ORDER', 'Driver waiting for order'),
+    25: t('ORDER_ACCEPTED_BY_DRIVER_COMPANY', 'Accepted by driver company'),
+    26: t('ORDER_DRIVER_ARRIVED_CUSTOMER', 'Driver arrived to customer')
   }
 
   const getLogisticTag = (status: any) => {
@@ -498,6 +503,7 @@ const ChatUI = (props: MessagesParams) => {
 
     const firstMessage = {
       _id: 0,
+      type: 0,
       text: console,
       createdAt: parseDate(order?.created_at, { outputFormat: 'YYYY-MM-DD HH:mm:ss' }),
       system: true,
@@ -517,6 +523,7 @@ const ChatUI = (props: MessagesParams) => {
           text: message.type === 1 ? messageConsole(message) : message.comment,
           createdAt: message.type !== 0 && parseDate(message?.created_at, { outputFormat: 'YYYY-MM-DD HH:mm:ss' }),
           image: message.source,
+          type: message.type,
           system: message.type === 1,
           user: {
             _id: message.author?.id,
@@ -537,7 +544,12 @@ const ChatUI = (props: MessagesParams) => {
         newMessages = [...newMessages, newMessage];
       }
     });
-    setFormattedMessages([...newMessages.reverse()]);
+    let _arrayMessages = [...newMessages.reverse()]
+
+    if (configs?.order_logbook_enabled?.value === '0' && user?.level === 4) {
+      _arrayMessages = _arrayMessages.filter(msg => msg.type !== 1 && msg.type !== 0)
+    }
+    setFormattedMessages(_arrayMessages);
   }, [messages?.messages?.length]);
 
   useEffect(() => {