ordering-ui-react-native 0.15.65 → 0.15.66-release

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

@@ -44,6 +44,35 @@ import { USER_TYPE } from '../../config/constants';
 
 import SignatureScreen from 'react-native-signature-canvas';
 
+const ORDER_STATUS: any = {
+  0: 'ORDER_STATUS_PENDING',
+  1: 'ORDERS_COMPLETED',
+  2: 'ORDER_REJECTED',
+  3: 'ORDER_STATUS_IN_BUSINESS',
+  4: 'ORDER_READY',
+  5: 'ORDER_REJECTED_RESTAURANT',
+  6: 'ORDER_STATUS_CANCELLEDBYDRIVER',
+  7: 'ORDER_STATUS_ACCEPTEDBYRESTAURANT',
+  8: 'ORDER_CONFIRMED_ACCEPTED_BY_DRIVER',
+  9: 'ORDER_PICKUP_COMPLETED_BY_DRIVER',
+  10: 'ORDER_PICKUP_FAILED_BY_DRIVER',
+  11: 'ORDER_DELIVERY_COMPLETED_BY_DRIVER',
+  12: 'ORDER_DELIVERY_FAILED_BY_DRIVER',
+  13: 'PREORDER',
+  14: 'ORDER_NOT_READY',
+  15: 'ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER',
+  16: 'ORDER_STATUS_CANCELLED_BY_CUSTOMER',
+  17: 'ORDER_NOT_PICKEDUP_BY_CUSTOMER',
+  18: 'ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS',
+  19: 'ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER',
+  20: 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS',
+  21: 'ORDER_CUSTOMER_ARRIVED_BUSINESS',
+  22: 'ORDER_LOOKING_FOR_DRIVER',
+  23: 'ORDER_DRIVER_ON_WAY'
+}
+
+const filterSpecialStatus = ['prepared_in', 'delivered_in', 'delivery_datetime']
+
 const ChatUI = (props: MessagesParams) => {
   const {
     type,
@@ -317,71 +346,6 @@ const ChatUI = (props: MessagesParams) => {
     }
   };
 
-  const getStatus = (status: number, attribute: any) => {
-    const hour = Math.trunc(status / 60);
-    const min = Math.round((status / 60 - hour) * 60);
-
-    if (attribute === 'status') {
-      switch (status) {
-        case 0:
-          return 'ORDER_STATUS_PENDING';
-        case 1:
-          return 'ORDERS_COMPLETED';
-        case 2:
-          return 'ORDER_REJECTED';
-        case 3:
-          return 'ORDER_STATUS_IN_BUSINESS';
-        case 4:
-          return 'ORDER_READY';
-        case 5:
-          return 'ORDER_REJECTED_RESTAURANT';
-        case 6:
-          return 'ORDER_STATUS_CANCELLEDBYDRIVER';
-        case 7:
-          return 'ORDER_STATUS_ACCEPTEDBYRESTAURANT';
-        case 8:
-          return 'ORDER_CONFIRMED_ACCEPTED_BY_DRIVER';
-        case 9:
-          return 'ORDER_PICKUP_COMPLETED_BY_DRIVER';
-        case 10:
-          return 'ORDER_PICKUP_FAILED_BY_DRIVER';
-        case 11:
-          return 'ORDER_DELIVERY_COMPLETED_BY_DRIVER';
-        case 12:
-          return 'ORDER_DELIVERY_FAILED_BY_DRIVER';
-        case 13:
-          return 'PREORDER';
-        case 14:
-          return 'ORDER_NOT_READY';
-        case 15:
-          return 'ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER';
-        case 16:
-          return 'ORDER_STATUS_CANCELLED_BY_CUSTOMER';
-        case 17:
-          return 'ORDER_NOT_PICKEDUP_BY_CUSTOMER';
-        case 18:
-          return 'ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS';
-        case 19:
-          return 'ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER';
-        case 20:
-          return 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS';
-        case 21:
-          return 'ORDER_CUSTOMER_ARRIVED_BUSINESS';
-        case 22:
-          return 'ORDER_LOOKING_FOR_DRIVER'
-        case 23:
-          return 'ORDER_DRIVER_ON_WAY'
-        default:
-          return ``;
-      }
-    }
-
-    if (attribute === 'prepared_in' || attribute === 'delivered_in') {
-      return `${hour < 10 ? '0' + hour : hour}:${min < 10 ? '0' + min : min} ${status > 60 ? 'hours' : 'minutes'
-        }`;
-    }
-  };
-
   const onSubmit = (values: any) => {
     handleSend && handleSend();
     setImage && setImage(null);
@@ -403,28 +367,16 @@ const ChatUI = (props: MessagesParams) => {
           numberOfLines={3}
           style={{ ...styles.firstMessageText, textAlign: 'center' }}>
           {message.change?.attribute !== 'driver_id'
-            ? `${t('ORDER', 'Order')} ${t(
-              message.change.attribute.toUpperCase(),
-              message.change.attribute,
-            )} ${t('CHANGED_FROM', 'Changed from')} ${message.change.old !== null
-              ? t(
-                getStatus(
-                  parseInt(message.change.old, 10),
-                  message.change?.attribute,
-                ),
-              )
-              : '0'
-            } ${t('TO', 'to')} ${t(
-              getStatus(
-                parseInt(message.change.new, 10),
-                message.change?.attribute,
-              ),
-            )}`
+            ?
+            `${t('ORDER', 'Order')} ${t(message.change.attribute.toUpperCase(), message.change.attribute.replace('_', ' '))} ${t('CHANGED_FROM', 'Changed from')} ${filterSpecialStatus.includes(message.change.attribute) ?
+              `${message.change.old === null ? '0' : message.change.old} ${t('TO', 'to')} ${message.change.new} ${t('MINUTES', 'Minutes')}` :
+              `${message.change.old !== null && t(ORDER_STATUS[parseInt(message.change.old, 10)])} ${t('TO', 'to')} ${t(ORDER_STATUS[parseInt(message.change.new, 10)])}`
+            }`
             : message.change.new
-              ? `${message.driver?.name} ${message.driver?.lastname !== null ? message.driver.lastname : ''
-              } ${t('WAS_ASSIGNED_AS_DRIVER', 'Was assigned as driver')} ${message.comment ? message.comment.length : ''
-              }`
-              : `${t('DRIVER_UNASSIGNED', 'Driver unassigned')}`}
+              ?
+              `${message.driver?.name} ${message.driver?.lastname !== null ? message.driver.lastname : ''} ${t('WAS_ASSIGNED_AS_DRIVER', 'Was assigned as driver')} ${message.comment ? message.comment.length : ''}`
+              :
+              `${t('DRIVER_UNASSIGNED', 'Driver unassigned')}`}
         </OText>
         <OText size={10} color={'#aaa'} style={{ alignSelf: 'flex-start' }}>
           {parseTime(message?.created_at, { outputFormat: 'hh:mma' })}
@@ -532,12 +484,12 @@ const ChatUI = (props: MessagesParams) => {
           image: message.source,
           system: message.type === 1,
           user: {
-            _id: message.author.id,
-            name: message.author.name,
+            _id: message.author?.id,
+            name: message.author?.name,
             can_see: message?.can_see,
-            level: message.author.level,
+            level: message.author?.level,
             avatar:
-              message.author.id !== user?.id && type === USER_TYPE.DRIVER
+              message.author?.id !== user?.id && type === USER_TYPE.DRIVER
                 ? order?.driver?.photo
                 : order?.business?.logo,
           },

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

@@ -327,6 +327,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
       justifyContent: 'center',
       paddingVertical: 10,
       paddingHorizontal: 80,
+      position: 'absolute'
     },
     showButton: {
       alignSelf: 'center',
@@ -490,14 +491,14 @@ export const DriverMap = (props: GoogleMapsParams) => {
             </View>
           </View>
         </View>
-        <View style={styles.buttonContainer}>
+        <View style={{
+          ...styles.buttonContainer,
+          bottom: showAcceptOrReject ? 80 : 0
+        }}>
           <OButton
             imgRightSrc=''
             textStyle={{ color: theme.colors.white }}
-            style={{
-              ...styles.showButton,
-              bottom: showAcceptOrReject ? 80 : 0
-            }}
+            style={styles.showButton}
             onClick={() => showLocation({
               latitude: destination.latitude,
               longitude: destination.longitude,

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

@@ -0,0 +1,71 @@
+import React, { useState } from 'react'
+import { RefreshControl, ScrollView, View } from 'react-native'
+import { OText } from '../shared'
+import { useLanguage, useSession } from 'ordering-components/native'
+import { DayContainer } from './styles'
+import { useTheme } from 'styled-components/native'
+export const DriverSchedule = (props: any) => {
+    const { schedule } = props
+    const [, t] = useLanguage()
+    const theme = useTheme()
+    const [, { refreshUserInfo }] = useSession()
+    const [refreshing] = useState(false);
+
+    const daysOfWeek = [
+        t('SUNDAY_ABBREVIATION', 'Sun'),
+        t('MONDAY_ABBREVIATION', 'Mon'),
+        t('TUESDAY_ABBREVIATION', 'Tues'),
+        t('WEDNESDAY_ABBREVIATION', 'Wed'),
+        t('THURSDAY_ABBREVIATION', 'Thur'),
+        t('FRIDAY_ABBREVIATION', 'Fri'),
+        t('SATURDAY_ABBREVIATION', 'Sat')
+    ]
+
+    const scheduleFormatted = ({ hour, minute }: any) => {
+        const checkTime = (val: number) => val < 10 ? `0${val}` : val
+        return `${checkTime(hour)}:${checkTime(minute)}`
+    }
+
+    return (
+        <ScrollView
+            refreshControl={<RefreshControl
+                refreshing={refreshing}
+                onRefresh={() => refreshUserInfo()}
+            />}
+        >
+            <OText size={24} style={{ paddingLeft: 30 }}>
+                {t('SCHEDULE', 'Schedule')}
+            </OText>
+            <View style={{ padding: 30 }}>
+                {schedule.map((item: any, i: number) => (
+                    <DayContainer key={daysOfWeek[i]}>
+                        <OText style={{ width: '20%' }} size={22} weight={700}>{daysOfWeek[i]}</OText>
+                        <View style={{ width: '80%', alignItems: 'center' }}>
+                            <>
+                                {item?.enabled ? (
+                                    <View>
+                                        {item?.lapses.map((lapse: any, i: number) => (
+                                            <View key={`${daysOfWeek[i]}_${i}`} style={{ marginTop: 3, marginBottom: 20, flexDirection: 'row', justifyContent: 'space-between' }}>
+                                                <OText size={18} style={{ width: '30%' }}>
+                                                    {scheduleFormatted(lapse.open)}
+                                                </OText>
+                                                <OText size={18} style={{ width: 15 }}>
+                                                    -
+                                                </OText>
+                                                <OText size={18} style={{ width: '30%' }}>
+                                                    {scheduleFormatted(lapse.close)}
+                                                </OText>
+                                            </View>
+                                        ))}
+                                    </View>
+                                ) : (
+                                    <OText size={18} style={{ marginTop: 3, marginBottom: 10 }} color={theme.colors.red}>{t('NOT_AVAILABLE', 'Not available')}</OText>
+                                )}
+                            </>
+                        </View>
+                    </DayContainer>
+                ))}
+            </View>
+        </ScrollView>
+    )
+}

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

@@ -0,0 +1,6 @@
+import styled from "styled-components/native";
+
+export const DayContainer = styled.View`
+    flex-direction: row;
+    width: 100%;
+`

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

@@ -8,6 +8,8 @@ import {
   ScrollView,
 } from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
+import Recaptcha from 'react-native-recaptcha-that-works'
+import { TouchableOpacity } from 'react-native-gesture-handler';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import {
   ToastType,
@@ -25,6 +27,7 @@ import {
   TabsContainer,
   OrSeparator,
   LineSeparator,
+  RecaptchaButton
 } from './styles';
 import { _setStoreData } from '../../providers/StoreUtil'
 import { OText, OButton, OInput, OIconButton, OModal } from '../shared';
@@ -47,7 +50,10 @@ const LoginFormUI = (props: LoginParams) => {
     handleCheckPhoneCode,
     setCheckPhoneCodeState,
     allowedLevels,
-    useRootPoint
+    useRootPoint,
+    notificationState,
+		handleReCaptcha,
+		enableReCaptcha
   } = props;
 
   const [ordering, { setOrdering }] = useApi();
@@ -61,6 +67,7 @@ const LoginFormUI = (props: LoginParams) => {
   const inputRef = useRef<any>(null);
   const inputMailRef = useRef<any>(null);
 
+  const [projectName, setProjectName] = useState({name: '', isFocued: false});
   const [passwordSee, setPasswordSee] = useState(false);
   const [isLoadingVerifyModal, setIsLoadingVerifyModal] = useState(false);
   const [isModalVisible, setIsModalVisible] = useState(false);
@@ -84,6 +91,50 @@ const LoginFormUI = (props: LoginParams) => {
   const [submitted, setSubmitted] = useState(false);
   const [formValues, setFormValues] = useState(null);
 
+  const [recaptchaConfig, setRecaptchaConfig] = useState<any>({})
+	const [recaptchaVerified, setRecaptchaVerified] = useState(false)
+
+  const recaptchaRef = useRef<any>({});
+
+  const handleOpenRecaptcha = () => {
+		setRecaptchaVerified(false)
+	  	if (!recaptchaConfig?.siteKey) {
+			showToast(ToastType.Error, t('NO_RECAPTCHA_SITE_KEY', 'The config doesn\'t have recaptcha site key'));
+			return
+		}
+		if (!recaptchaConfig?.baseUrl) {
+			showToast(ToastType.Error, t('NO_RECAPTCHA_BASE_URL', 'The config doesn\'t have recaptcha base url'));
+			return
+		}
+		recaptchaRef.current.open()
+  	}
+
+	const onRecaptchaVerify = (token: any) => {
+		setRecaptchaVerified(true)
+		handleReCaptcha(token)
+	}
+
+	useEffect(() => {
+		if (configs && Object.keys(configs).length > 0 && enableReCaptcha) {
+			setRecaptchaConfig({
+				siteKey: configs?.security_recaptcha_site_key?.value || null,
+				baseUrl: configs?.security_recaptcha_base_url?.value || null
+			})
+		}
+	}, [configs, enableReCaptcha])
+
+  useEffect(() => {
+    const projectInputInterval = setInterval(() => {
+      if (projectName.name && useRootPoint && projectName.isFocued) {
+        setOrdering({
+          ...ordering,
+          project: projectName.name
+        })
+      }
+    }, 1500)
+    return () => clearInterval(projectInputInterval);
+  }, [projectName])
+
   const getTraduction = (key: string) => {
     const keyList: any = {
       // Add the key and traduction that you need below
@@ -465,6 +516,7 @@ const LoginFormUI = (props: LoginParams) => {
                   icon={theme.images.general.project}
                   iconColor={theme.colors.arrowColor}
                   onChange={(e: any) => {
+                    setProjectName({name: e?.target?.value, isFocued: true})
                     onChange(e?.target?.value);
                     setSubmitted(false);
                   }}
@@ -493,6 +545,7 @@ const LoginFormUI = (props: LoginParams) => {
                   icon={theme.images.logos.emailInputIcon}
                   iconColor={theme.colors.arrowColor}
                   onChange={(e: any) => {
+                    setProjectName({...projectName, isFocued: false})
                     handleChangeInputEmail(e, onChange);
                   }}
                   selectionColor={theme.colors.primary}
@@ -590,7 +643,7 @@ const LoginFormUI = (props: LoginParams) => {
 
           {onNavigationRedirect && (
             <Pressable
-              style={{ marginRight: 'auto', marginBottom: 35 }}
+              style={{ marginRight: 'auto', marginBottom: 20 }}
               onPress={() => onNavigationRedirect('Forgot')}>
               <OText style={styles.textForgot}>
                 {t('FORGOT_YOUR_PASSWORD', 'Forgot your password?')}
@@ -598,6 +651,39 @@ const LoginFormUI = (props: LoginParams) => {
             </Pressable>
           )}
 
+          {enableReCaptcha && (
+            <>
+              <TouchableOpacity
+                style={{ marginBottom: 15 }}
+                onPress={handleOpenRecaptcha}
+              >
+                <RecaptchaButton>
+                  {recaptchaVerified ? (
+                    <MaterialCommunityIcons
+                      name="checkbox-marked"
+                      size={26}
+                      color={theme.colors.primary}
+                    />
+                  ) : (
+                    <MaterialCommunityIcons
+                      name="checkbox-blank-outline"
+                      size={26}
+                      color={theme.colors.mediumGray}
+                    />
+                  )}
+                  <OText size={14} mLeft={8}>{t('VERIFY_ReCAPTCHA', 'Verify reCAPTCHA')}</OText>
+                </RecaptchaButton>
+              </TouchableOpacity>
+              <Recaptcha
+                ref={recaptchaRef}
+                siteKey={recaptchaConfig?.siteKey}
+                baseUrl={recaptchaConfig?.baseUrl}
+                onVerify={onRecaptchaVerify}
+                onExpire={() => setRecaptchaVerified(false)}
+              />
+            </>
+					)}
+
           <OButton
             onClick={handleLogin}
             text={t('LOGIN', 'Login')}
@@ -657,6 +743,7 @@ const LoginFormUI = (props: LoginParams) => {
 export const LoginForm = (props: any) => {
   const loginProps = {
     ...props,
+    isRecaptchaEnable: true,
     UIComponent: LoginFormUI,
   };
 

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

@@ -46,3 +46,9 @@ export const LineSeparator = styled.View`
   height: 1px;
   background-color: ${(props: any) => props.theme.colors.disabled};
 `;
+
+export const RecaptchaButton = styled.View`
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 10px;
+`

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

@@ -15,7 +15,7 @@ const LogoutButtonUI = (props: any) => {
     const data = await _retrieveStoreData('notification_state');
     const res = await handleLogoutClick(data);
     if (res) {
-      _clearStoreData({ excludedKeys: ['project_name'] });
+      _clearStoreData({ excludedKeys: ['isTutorial'] });
     }
   };
 

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

@@ -14,7 +14,8 @@ Sound.setCategory('Playback')
 
 const windowWidth = Dimensions.get('screen').width
 
-const NewOrderNotificationUI = () => {
+const NewOrderNotificationUI = (props: any) => {
+  const { isBusinessApp } = props
   const [events] = useEvent()
   const theme = useTheme()
   const [, t] = useLanguage()
@@ -22,7 +23,7 @@ const NewOrderNotificationUI = () => {
   const [ordering] = useApi()
   const { getCurrentLocation } = useLocation();
   const [soundTimeout, setSoundTimeout] = useState<any>(null)
-  const [currentEvent, setCurrentEvent] = useState<any>(null)
+  let [currentEvent, setCurrentEvent] = useState<any>(null)
 
   const evtList: any = {
     1: {
@@ -45,6 +46,7 @@ const NewOrderNotificationUI = () => {
   const notificationSound = new Sound(theme.sounds.notification, (e) => { console.log(e) });
 
   const handlePlayNotificationSound = () => {
+    if (currentEvent) return
     let times = 0
     const _timeout = setInterval(function () {
       notificationSound.play(success => {
@@ -62,29 +64,40 @@ const NewOrderNotificationUI = () => {
 
   const handleCloseModal = () => {
     clearInterval(soundTimeout)
+    currentEvent = null
     setCurrentEvent({ evt: null })
   }
 
   const handleEventNotification = async (evtType: number, value: any) => {
     if (value?.driver) {
-      const location = await getCurrentLocation()
-      await fetch(`${ordering.root}/users/${user.id}/locations`, {
-        method: 'POST',
-        body: JSON.stringify({
-          location: JSON.stringify({location: `{lat: ${location.latitude}, lng: ${location.longitude}}`})
-        }),
-        headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` }
-      })
-      const assignedTimeDiff = moment.utc(value?.driver?.last_order_assigned_at).local().fromNow()
-      if (assignedTimeDiff === 'a few seconds ago') {
+      try {
+        const location = await getCurrentLocation()
+        await fetch(`${ordering.root}/users/${user.id}/locations`, {
+          method: 'POST',
+          body: JSON.stringify({
+            location: JSON.stringify({location: `{lat: ${location.latitude}, lng: ${location.longitude}}`})
+          }),
+          headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` }
+        })
+      } catch (error) {
+          console.log(error)
+      }
+      const duration = moment.duration(moment().diff(moment.utc(value?.last_driver_assigned_at)))
+      const assignedSecondsDiff = duration.asSeconds()
+      if (assignedSecondsDiff < 5 && !isBusinessApp) {
         handlePlayNotificationSound()
         clearInterval(soundTimeout)
+        currentEvent = { evt: 2, orderId: value?.id }
         setCurrentEvent({ evt: 2, orderId: value?.id })
       }
-      return
     }
+    if (evtType === 3 || value.author_id === user.id) return
     handlePlayNotificationSound()
     clearInterval(soundTimeout)
+    currentEvent = {
+      evt: evtType,
+      orderId: evtList[evtType].event === 'messages' ? value?.order_id : value?.id
+    }
     setCurrentEvent({
       evt: evtType,
       orderId: evtList[evtType].event === 'messages' ? value?.order_id : value?.id

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

@@ -335,7 +335,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
         addressName: order?.business?.address,
         zipcode: order?.business?.zipcode
       },
-      icon: order?.business?.logo || theme.images.dummies.businessLogo,
+      icon: order?.business?.logo || 'https://res.cloudinary.com/demo/image/fetch/c_thumb,g_face,r_max/https://res.cloudinary.com/ordering2/image/upload/v1654619525/hzegwosnplvrbtjkpfi6.png',
       level: 2,
     },
     {
@@ -439,7 +439,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
             <>
               <OrderContentComponent order={order} />
               {(order?.status === 7 || order?.status === 4) &&
-                order?.delivery_type === 1 && (
+                order?.delivery_type === 1 && configs?.assign_driver_enabled?.value === '1' && (
                   <AssignDriver>
                     <OText style={{ marginBottom: 5 }} size={16} weight="600">
                       {t('ASSIGN_DRIVER', 'Assign driver')}

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

@@ -1,6 +1,6 @@
 //React & React Native
 import React, { useState, useEffect } from 'react';
-import { StyleSheet, View, Platform, ScrollView } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 // Thirds
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
@@ -29,7 +29,6 @@ import { NotFoundSource } from '../NotFoundSource';
 import { getOrderStatus } from '../../utils';
 import { OrderHeaderComponent } from './OrderHeaderComponent';
 import { OrderContentComponent } from './OrderContentComponent';
-
 //Styles
 import { OrderDetailsContainer, Pickup } from './styles';
 
@@ -51,7 +50,9 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     orderTitle,
     appTitle,
     handleClickLogisticOrder,
-    forceUpdate
+    forceUpdate,
+    getPermissions,
+    isGrantedPermissions
   } = props;
   const [, { showToast }] = useToast();
   const { order } = props.order
@@ -72,6 +73,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     key?: string | null;
   }>({ open: false, content: [], key: null });
 
+  const validStatusComplete = [9, 19, 23]
+
   const logisticOrderStatus = [4, 6, 7]
 
   const showFloatButtonsPickUp: any = {
@@ -101,9 +104,18 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   };
 
   const handleOpenMapView = async () => {
-    if (permissions?.locationStatus === 'granted') {
+    if (!isGrantedPermissions) {
+      navigation.navigate('RequestPermissions')
+      return
+    }
+    const _permissions = await getPermissions()
+
+    const isBlocked = _permissions.some((_permission: string) => permissions?.locationStatus?.[_permission] === 'blocked')
+    const isGranted = _permissions.reduce((allPermissions: boolean, _permission: string) => allPermissions && permissions?.locationStatus?.[_permission] === 'granted', true)
+
+    if (isGranted) {
       setOpenModalForMapView(!openModalForMapView);
-    } else if (permissions?.locationStatus === 'blocked') {
+    } else if (isBlocked) {
       // redirectToSettings();
       showToast(
         ToastType.Error,
@@ -114,13 +126,18 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       );
     } else {
       const response = await askLocationPermission();
-      if (response === 'granted') {
-        setOpenModalForMapView(!openModalForMapView);
+      const isGranted = _permissions.reduce((allPermissions: boolean, _permission: string) => allPermissions && response?.locationStatus?.[_permission] === 'granted', true)
+      if (isGranted) {
+        setOpenModalForMapView(true)
       }
     }
   };
 
   const handleViewActionOrder = (action: string) => {
+    if (!isGrantedPermissions) {
+      navigation.navigate('RequestPermissions')
+      return
+    }
     if (openModalForMapView) {
       setOpenModalForMapView(false);
     }
@@ -230,17 +247,17 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   let isToFollow = false;
   let isBusinessMarker = false;
 
-  if (order?.status === 7 || order?.status === 8) {
+  if (order?.status === 7 || order?.status === 8 || order?.status === 18) {
     const markerBusiness = 'Business';
     isBusinessMarker = true;
     locationMarker = locations.find(
       (location: any) => location.type === markerBusiness,
     );
 
-    if (order?.status === 8) {
+    if (order?.status === 8 || order?.status === 18) {
       isToFollow = true;
     }
-  } else if (order?.status === 3 || order?.status === 9) {
+  } else if (order?.status === 3 || order?.status === 9 || order?.status === 19 || order?.status === 23) {
     const markerCustomer = 'Customer';
     isToFollow = true;
     isBusinessMarker = false;
@@ -378,7 +395,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                     widthButton={'45%'}
                   />
                 )}
-                {(order?.status === 9 || order?.status === 19) && (
+                {(validStatusComplete.includes(order?.status)) && (
                   <>
                     <FloatingButton
                       disabled={props.order?.loading}