ordering-ui-react-native 0.22.95 → 0.22.97

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.22.95",
+  "version": "0.22.97",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/src/context/OfflineActions/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState, createContext, useEffect, useContext } from 'react';
-import { useApi, useSession, useEvent } from 'ordering-components/native'
+import { useApi, useSession, useEvent, useWebsocket } from 'ordering-components/native'
 import { useNetInfo } from '@react-native-community/netinfo';
 
 import { _retrieveStoreData, _setStoreData, _removeStoreData } from '../../providers/StoreUtil'
@@ -8,7 +8,7 @@ type State = {
   isNetConnected: boolean | null
   isCombinedTabs: boolean | null
   canSaveChangesOffline: boolean | null
-  actions: Array<{ [key: string]: any }>
+  actions: { [key: string]: any }
   orders: { [key: string]: any } | null
 }
 
@@ -22,7 +22,7 @@ const defaultState = {
   isNetConnected: null,
   isCombinedTabs: null,
   canSaveChangesOffline: false,
-  actions: [],
+  actions: {},
   orders: null,
 }
 
@@ -41,6 +41,7 @@ export const OfflineActionsProvider = (props: any) => {
   const [ordering] = useApi()
   const [{ token }] = useSession()
   const [events] = useEvent()
+  const socket = useWebsocket()
 
   const [state, setState] = useState<State>({
     isNetConnected: netInfo.isConnected,
@@ -77,7 +78,14 @@ export const OfflineActionsProvider = (props: any) => {
   const applyOffAction = async (changes: any) => {
     if (state.canSaveChangesOffline === false) return false
 
-    const actions = [...new Set([...state.actions, changes])]
+    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)
@@ -127,30 +135,40 @@ export const OfflineActionsProvider = (props: any) => {
   }
 
   const syncChanges = async (changes: any) => {
-    const data = []
-    for (const action of changes) {
-      const eventFunction = eventsDictiorary[action.event];
-      if (eventFunction) {
-        const id = await eventFunction(action.data);
-        id && data.push(id)
+    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 })
       }
-    }
-    data.length && events.emit('offline_order_updated', data)
+      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');
-    const storedActions: any = [...new Set(_storedActions)]
+    const storedActions = await _retrieveStoreData('offline_actions_array');
 
-    if (isConnected && storedActions?.length) {
+    if (isConnected && Object.keys(storedActions)?.length) {
       syncChanges(storedActions)
       return
     }
 
-    storedActions?.length && setState(state => ({ ...state, actions: storedActions }));
+    Object.keys(storedActions)?.length && setState(state => ({ ...state, actions: storedActions }));
   }
 
   useEffect(() => {
@@ -177,6 +195,30 @@ export const OfflineActionsProvider = (props: any) => {
     }
   }
 
+  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
   }

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

@@ -767,7 +767,7 @@ const ChatUI = (props: MessagesParams) => {
                 color: '#414954'
               }}
               style={{ ...styles.editButton }}
-              onClick={() => handleClickQuickMessage(message?.length > 0 ? ' ' + quickMessage.text : quickMessage.text)}
+              onClick={() => handleClickQuickMessage((message?.length ?? 0) > 0 ? ' ' + quickMessage.text : quickMessage.text)}
             />
           </React.Fragment>
         ))}

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { Dimensions, Platform, SafeAreaView, StyleSheet, View } from 'react-native';
 import MapView, {
   PROVIDER_GOOGLE,
@@ -79,10 +79,12 @@ export const DriverMap = (props: GoogleMapsParams) => {
     longitude: typeof initialPosition.longitude === 'string' ? parseFloat(initialPosition.longitude) || 0 : initialPosition.longitude || 0,
   }
 
-  const parsedUserLocation = {
-    latitude: typeof userLocation?.latitude === 'string' ? parseFloat(userLocation?.latitude) || 0 : userLocation?.latitude || 0,
-    longitude: typeof userLocation?.longitude === 'string' ? parseFloat(userLocation?.longitude) || 0 : userLocation?.longitude || 0
-  }
+  const parsedUserLocation = useCallback(() => {
+    return {
+      latitude: typeof userLocation?.latitude === 'string' ? parseFloat(userLocation?.latitude) || 0 : userLocation?.latitude || 0,
+      longitude: typeof userLocation?.longitude === 'string' ? parseFloat(userLocation?.longitude) || 0 : userLocation?.longitude || 0
+    }
+  }, [JSON.stringify(userLocation)])
 
   useEffect(() => {
     if (isToFollow) {
@@ -170,7 +172,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
     if (driverUpdateLocation.error) return;
 
     calculateDistance(
-      { lat: parsedUserLocation.latitude, lng: parsedUserLocation.longitude },
+      { lat: parsedUserLocation().latitude, lng: parsedUserLocation().longitude },
       destination,
     );
     // geocodePosition(userLocation);
@@ -178,13 +180,13 @@ export const DriverMap = (props: GoogleMapsParams) => {
     if (!following.current) return;
     fitCoordinates();
 
-    const { latitude, longitude } = parsedUserLocation;
+    const { latitude, longitude } = parsedUserLocation();
 
     mapRef.current?.animateCamera({
       center: { latitude, longitude },
     });
 
-  }, [parsedUserLocation]);
+  }, [JSON.stringify(userLocation)]);
 
   const handleArrowBack: any = () => {
     setDriverUpdateLocation?.({
@@ -397,8 +399,8 @@ export const DriverMap = (props: GoogleMapsParams) => {
                   </View>
                 </Marker>
                 <Marker coordinate={{
-                  latitude: typeof parsedUserLocation?.latitude !== 'object' ? parsedUserLocation?.latitude : 0,
-                  longitude: typeof parsedUserLocation?.longitude !== 'object' ? parsedUserLocation?.latitude : 0
+                  latitude: userLocation?.latitude,
+                  longitude: userLocation?.longitude
                 }}>
                   <View style={styles.driverIcon}>
                     <OIcon
@@ -413,8 +415,8 @@ export const DriverMap = (props: GoogleMapsParams) => {
             ) : (
               <Marker
                 coordinate={{
-                  latitude: typeof parsedUserLocation?.latitude !== 'object' ? parsedUserLocation?.latitude : 0,
-                  longitude: typeof parsedUserLocation?.longitude !== 'object' ? parsedUserLocation?.latitude : 0
+                  latitude: typeof parsedUserLocation()?.latitude !== 'object' ? parsedUserLocation()?.latitude : 0,
+                  longitude: typeof parsedUserLocation()?.longitude !== 'object' ? parsedUserLocation()?.latitude : 0
                 }}
                 title={markerTitle || t('YOUR_LOCATION', 'Your Location')}
               />
@@ -528,8 +530,8 @@ export const DriverMap = (props: GoogleMapsParams) => {
             options={{
               latitude: destination.latitude,
               longitude: destination.longitude,
-              sourceLatitude: parsedUserLocation.latitude,
-              sourceLongitude: parsedUserLocation.longitude,
+              sourceLatitude: parsedUserLocation().latitude,
+              sourceLongitude: parsedUserLocation().longitude,
               naverCallerName: 'com.deliveryapp',
               dialogTitle: t('SHOW_IN_OTHER_MAPS', 'Show in other maps'),
               dialogMessage: t('WHAT_APP_WOULD_YOU_USE', 'What app would you like to use?'),

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

@@ -7,7 +7,7 @@ import { OIcon, OText } from '../shared';
 import { _retrieveStoreData, _clearStoreData } from '../../providers/StoreUtil';
 
 const LogoutButtonUI = (props: any) => {
-  const { handleLogoutClick } = props;
+  const { handleLogoutClick, setRootState } = props;
   const [, t] = useLanguage();
   const theme = useTheme();
 
@@ -16,6 +16,7 @@ const LogoutButtonUI = (props: any) => {
     const res = await handleLogoutClick(data);
     if (res) {
       _clearStoreData({ excludedKeys: ['isTutorial', 'language'] });
+      setRootState && setRootState({ isAuth: false, token: null })
     }
   };
 

package/themes/business/src/components/OrderDetails/Delivery.tsx

@@ -30,6 +30,7 @@ import { verifyDecimals, getProductPrice, getOrderStatus } from '../../utils';
 import { OrderHeaderComponent } from './OrderHeaderComponent';
 import { OrderContentComponent } from './OrderContentComponent';
 import { OrderDetailsContainer, Pickup } from './styles';
+import { useOfflineActions } from '../../../../../src/context/OfflineActions';
 
 export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const {
@@ -38,7 +39,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     setMessages,
     readMessages,
     messagesReadList,
-    handleChangeOrderStatus,
     permissions,
     askLocationPermission,
     driverLocation,
@@ -69,6 +69,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const theme = useTheme();
   const [, t] = useLanguage();
   const [session] = useSession();
+  const [{ isNetConnected, canSaveChangesOffline }, { applyOffAction, registerOffOrder }] = useOfflineActions()
+
   const [actionOrder, setActionOrder] = useState('');
   const [unreadAlert, setUnreadAlert] = useState({
     business: false,
@@ -83,6 +85,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     key?: string | null;
   }>({ open: false, content: [], key: null });
 
+  const disabledActionsByInternet = !isNetConnected && canSaveChangesOffline === false
+
   const validStatusComplete = [9, 19, 23]
 
   const pendingOrderStatus = [1, 4, 7, 13]
@@ -102,13 +106,23 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     14: true
   };
 
-  const marginContainer: any = {
-    0: true,
-    3: true,
-    7: true,
-    8: true,
-    9: true,
-  };
+  const handleChangeOrderStatus = async (status: number) => {
+    if (!isNetConnected && canSaveChangesOffline !== false) {
+      const result = applyOffAction({
+        event: 'evt_off_change_order_status',
+        data: { orderId: order?.id, body: { status } }
+      })
+    }
+
+    const dataToSave: any = !isNetConnected && canSaveChangesOffline !== false
+      ? { dataToSave: { status, unsync: true } }
+      : null
+    const orderUpdated = await props.handleChangeOrderStatus(status, {}, dataToSave)
+
+    if (!isNetConnected && canSaveChangesOffline !== false) {
+      await registerOffOrder(orderUpdated)
+    }
+  }
 
   const handleOpenMessagesForBusiness = () => {
     setOpenModalForBusiness(true);
@@ -491,8 +505,9 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
               style={styles.btnPickUp}
               textStyle={{ color: theme.colors.primary }}
               text={t('ARRIVED_TO_BUSINESS', 'Arrived to bussiness')}
+              isDisabled={disabledActionsByInternet}
               onClick={() =>
-                handleChangeOrderStatus && isGrantedPermissions ? handleChangeOrderStatus(3) : goToPermissionPage()
+                isGrantedPermissions ? handleChangeOrderStatus(3) : goToPermissionPage()
               }
               imgLeftStyle={{ tintColor: theme.colors.backArrow }}
             />
@@ -590,11 +605,11 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 </OrderDetailsContainer>
                 {showFloatButtonsPickUp[order?.status] && (
                   <FloatingButton
-                    disabled={props.order?.loading}
+                    disabled={props.order?.loading || disabledActionsByInternet}
                     btnText={t('PICKUP_FAILED', 'Pickup failed')}
                     isSecondaryBtn={false}
                     secondButtonClick={() =>
-                      handleChangeOrderStatus && isGrantedPermissions ? handleChangeOrderStatus(9) : goToPermissionPage()
+                      isGrantedPermissions ? handleChangeOrderStatus(9) : goToPermissionPage()
                     }
                     firstButtonClick={() =>
                       handleViewActionOrder && handleViewActionOrder('pickupFailed')
@@ -610,11 +625,11 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 {(validStatusComplete.includes(order?.status)) && (
                   <>
                     <FloatingButton
-                      disabled={props.order?.loading}
+                      disabled={props.order?.loading || disabledActionsByInternet}
                       btnText={t('DELIVERY_FAILED', 'Delivery Failed')}
                       isSecondaryBtn={false}
                       secondButtonClick={() =>
-                        handleChangeOrderStatus && isGrantedPermissions ? handleChangeOrderStatus(11) : goToPermissionPage()
+                        isGrantedPermissions ? handleChangeOrderStatus(11) : goToPermissionPage()
                       }
                       firstButtonClick={() =>
                         handleViewActionOrder && handleViewActionOrder('deliveryFailed')
@@ -630,7 +645,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 )}
                 {showFloatButtonsAcceptOrReject[order?.status] && (
                   <FloatingButton
-                    disabled={props.order?.loading}
+                    disabled={props.order?.loading || disabledActionsByInternet}
                     widthButton={isHideRejectButtons ? '100%' : '45%'}
                     isHideRejectButtons={isHideRejectButtons}
                     btnText={t('REJECT', 'Reject')}
@@ -642,7 +657,11 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                     isSecondaryBtn={false}
                     secondButton={true}
                     secondBtnText={t('ACCEPT', 'Accept')}
-                    secondButtonClick={() => hideTimer ? handleChangeOrderStatus && handleChangeOrderStatus(8) : (order?.isLogistic && (order?.order_group || logisticOrderStatus.includes(order?.status))) ? handleAcceptLogisticOrder(order) : handleViewActionOrder('accept')}
+                    secondButtonClick={() => hideTimer
+                      ? handleChangeOrderStatus(8)
+                      : (order?.isLogistic && (order?.order_group || logisticOrderStatus.includes(order?.status)))
+                        ? handleAcceptLogisticOrder(order)
+                        : handleViewActionOrder('accept')}
                     secondColorCustom={theme.colors.green}
                   />
                 )}
@@ -698,7 +717,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 entireModal
                 customClose>
                 <AcceptOrRejectOrder
-                  handleUpdateOrder={handleChangeOrderStatus}
+                  handleUpdateOrder={props.handleChangeOrderStatus}
                   closeModal={setOpenModalForAccept}
                   customerCellphone={order?.customer?.cellphone}
                   loading={props.order?.loading}

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

@@ -629,11 +629,11 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
             >
               {`${t('LAST_UPDATE', 'Last Update')}: ${lastDateConnection}`}
             </OText>
-            {offlineActionsState?.actions?.length > 0 && (
+            {Object.keys(offlineActionsState?.actions)?.length > 0 && (
               <OText
                 style={{ color: 'white', textAlign: 'center' }}
               >
-                {t('NUMBER_CHANGES_PENDING_SYNC', '_value_ changes pending sync').replace('_value_', offlineActionsState?.actions?.length)}
+                {t('NUMBER_CHANGES_PENDING_SYNC', '_value_ changes pending sync').replace('_value_', Object.keys(offlineActionsState?.actions)?.length)}
               </OText>
             )}
           </View>
@@ -1080,7 +1080,6 @@ export const OrdersOption = (props: OrdersOptionParams) => {
   const ordersProps = {
     ...props,
     UIComponent: OrdersOptionUI,
-    useDefualtSessionManager: true,
     asDashboard: true,
     combineTabs,
     isIos: Platform.OS === 'ios',

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

@@ -11,6 +11,7 @@ import { OrdersList } from './OrderList';
 import { AcceptOrRejectOrder } from '../AcceptOrRejectOrder';
 import { ReviewCustomer } from '../ReviewCustomer';
 import { GoogleMap } from '../GoogleMap';
+import { useOfflineActions } from '../../../../../src/context/OfflineActions';
 
 export const PreviousOrders = (props: any) => {
   const {
@@ -32,7 +33,7 @@ export const PreviousOrders = (props: any) => {
   const [, t] = useLanguage();
   const theme = useTheme();
   const [{ configs }] = useConfig();
-
+  const [{ isNetConnected, canSaveChangesOffline }] = useOfflineActions()
 
   // const [, setCurrentTime] = useState()
   const [openModal, setOpenModal] = useState(false)
@@ -47,6 +48,7 @@ export const PreviousOrders = (props: any) => {
   const isHideRejectButtons = configs?.reject_orders_enabled && configs?.reject_orders_enabled?.value !== '1' && !isBusinessApp
   const isEnabledOrderNotReady = configs?.order_not_ready_enabled?.value === '1'
   const isEnabledFailedPickupDriver = configs?.failed_pickup_by_driver_enabled?.value === '1'
+  const disabledActionsByInternet = !isNetConnected && canSaveChangesOffline === false
 
   const handlePressOrder = (order: any) => {
     if (order?.locked && isLogisticOrder) return
@@ -172,7 +174,7 @@ export const PreviousOrders = (props: any) => {
                       }
                       )
                   }
-                  {_ordersGrouped[k][0]?.status === 0 && (
+                  {_ordersGrouped[k][0]?.status === 0 && !disabledActionsByInternet && (
                     <AcceptOrRejectOrderStyle>
                       {!isHideRejectButtons && (
                         <OButton
@@ -208,7 +210,7 @@ export const PreviousOrders = (props: any) => {
                       />
                     </AcceptOrRejectOrderStyle>
                   )}
-                  {_ordersGrouped[k][0]?.status === 7 && (
+                  {_ordersGrouped[k][0]?.status === 7 && !disabledActionsByInternet && (
                     <View>
                       <OButton
                         text={t('READY_FOR_PICKUP', 'Ready for pickup')}
@@ -226,7 +228,7 @@ export const PreviousOrders = (props: any) => {
                     </View>
                   )}
                   {(_ordersGrouped[k][0]?.status === 8 || _ordersGrouped[k][0]?.status === 18) &&
-                    _ordersGrouped[k][0]?.delivery_type === 1 &&
+                    _ordersGrouped[k][0]?.delivery_type === 1 && !disabledActionsByInternet &&
                     (
                       <AcceptOrRejectOrderStyle>
                         <OButton
@@ -245,6 +247,7 @@ export const PreviousOrders = (props: any) => {
                       </AcceptOrRejectOrderStyle>
                     )}
                   {_ordersGrouped[k][0]?.status === 3 && _ordersGrouped[k][0]?.delivery_type === 1 && !isHideRejectButtons && isEnabledOrderNotReady &&
+                    !disabledActionsByInternet &&
                     (
                       <AcceptOrRejectOrderStyle>
                         <OButton
@@ -282,6 +285,7 @@ export const PreviousOrders = (props: any) => {
                     )}
                   {_ordersGrouped[k][0]?.status === 4 &&
                     ![1].includes(_ordersGrouped[k][0]?.delivery_type) &&
+                    !disabledActionsByInternet &&
                     (
                       <AcceptOrRejectOrderStyle>
                         {!isHideRejectButtons && (
@@ -316,6 +320,7 @@ export const PreviousOrders = (props: any) => {
                     )}
                   {!_ordersGrouped[k][0]?.user_review &&
                     pastOrderStatuses.includes(_ordersGrouped[k][0]?.status) &&
+                    !disabledActionsByInternet &&
                     (
                       <OButton
                         text={t('REVIEW_CUSTOMER', 'Review customer')}
@@ -332,7 +337,8 @@ export const PreviousOrders = (props: any) => {
                         })}
                       />
                     )}
-                  {!!deliveryPickupBtn && deliveryPickupBtn?.includes(_ordersGrouped[k][0]?.status) && isEnabledFailedPickupDriver && (
+                  {!!deliveryPickupBtn && deliveryPickupBtn?.includes(_ordersGrouped[k][0]?.status) && isEnabledFailedPickupDriver &&
+                  !disabledActionsByInternet && (
                     <AcceptOrRejectOrderStyle>
                       {!isHideRejectButtons && isEnabledOrderNotReady && (
                         <OButton
@@ -366,7 +372,8 @@ export const PreviousOrders = (props: any) => {
                       />
                     </AcceptOrRejectOrderStyle>
                   )}
-                  {!!deliveryStatusCompleteBtn && deliveryStatusCompleteBtn.includes(_ordersGrouped[k][0]?.status) && (
+                  {!!deliveryStatusCompleteBtn && deliveryStatusCompleteBtn.includes(_ordersGrouped[k][0]?.status) &&
+                  !disabledActionsByInternet && (
                     <AcceptOrRejectOrderStyle>
                       {!isHideRejectButtons && (
                         <OButton

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

@@ -542,7 +542,7 @@ const ProfileUI = (props: ProfileParams) => {
           <Actions>
             <LanguageSelector />
 
-            <LogoutButton />
+            <LogoutButton setRootState={props.setRootState} />
           </Actions>
           <OModal
             open={openModal}