ordering-ui-react-native 0.16.71 → 0.16.72-release

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

@@ -44,33 +44,6 @@ 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) => {
@@ -97,6 +70,33 @@ const ChatUI = (props: MessagesParams) => {
   const theme = useTheme();
   const [messageList, setMessageList] = useState<any>([])
 
+  const ORDER_STATUS: any = {
+    0: t('ORDER_STATUS_PENDING', 'Order status pending'),
+    1: t('ORDERS_COMPLETED', 'Order completed'),
+    2: t('ORDER_REJECTED', 'Order rejected'),
+    3: t('ORDER_STATUS_IN_BUSINESS', 'Order status in business'),
+    4: t('ORDER_READY', 'Order ready'),
+    5: t('ORDER_REJECTED_RESTAURANT', 'Order rejected by restaurant'),
+    6: t('ORDER_STATUS_CANCELLEDBYDRIVER', 'Order status cancelled by driver'),
+    7: t('ORDER_STATUS_ACCEPTEDBYRESTAURANT', 'Order status accepted by restaurant'),
+    8: t('ORDER_CONFIRMED_ACCEPTED_BY_DRIVER', 'Order confirmed accepted by driver'),
+    9: t('ORDER_PICKUP_COMPLETED_BY_DRIVER', 'Order pickup completed by driver'),
+    10: t('ORDER_PICKUP_FAILED_BY_DRIVER', 'Order pickup failed by driver'),
+    11: t('ORDER_DELIVERY_COMPLETED_BY_DRIVER', 'Order delivery completed by driver'),
+    12: t('ORDER_DELIVERY_FAILED_BY_DRIVER', 'Order delivery failed by driver'),
+    13: t('PREORDER', 'Preorder'),
+    14: t('ORDER_NOT_READY', 'Order not ready'),
+    15: t('ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER', 'Order picked up completed by customer'),
+    16: t('ORDER_STATUS_CANCELLED_BY_CUSTOMER', 'Order status cancelled by customer'),
+    17: t('ORDER_NOT_PICKEDUP_BY_CUSTOMER', 'Order not picked up by customer'),
+    18: t('ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS', 'Order driver almost arrived to business'),
+    19: t('ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER', 'Order driver almost arrived to customer'),
+    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')
+  }
+
   const storeMessageList: any = [
     { key: 'store_message_1', text: t('STORE_MESSAGE_1', 'store_message_1') },
     { key: 'store_message_2', text: t('STORE_MESSAGE_2', 'store_message_2') },
@@ -377,7 +377,7 @@ const ChatUI = (props: MessagesParams) => {
             ?
             `${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.old !== null && ORDER_STATUS[parseInt(message.change.old, 10)]} ${t('TO', 'to')} ${ORDER_STATUS[parseInt(message.change.new, 10)]}`
             }`
             : message.change.new
               ?
@@ -472,7 +472,7 @@ const ChatUI = (props: MessagesParams) => {
     const firstMessage = {
       _id: 0,
       text: console,
-      createdAt: order?.created_at,
+      createdAt: parseDate(order?.created_at, { outputFormat: 'YYYY-MM-DD HH:mm:ss' }),
       system: true,
     };
     messages?.messages.map((message: any) => {
@@ -488,7 +488,7 @@ const ChatUI = (props: MessagesParams) => {
         newMessage = {
           _id: message.id,
           text: message.type === 1 ? messageConsole(message) : message.comment,
-          createdAt: message.type !== 0 && message.created_at,
+          createdAt: message.type !== 0 && parseDate(message?.created_at, { outputFormat: 'YYYY-MM-DD HH:mm:ss' }),
           image: message.source,
           system: message.type === 1,
           user: {
@@ -742,7 +742,7 @@ const ChatUI = (props: MessagesParams) => {
                 color: '#414954'
               }}
               style={{ ...styles.editButton }}
-              onClick={() => handleClickQuickMessage(quickMessage.text)}
+              onClick={() => handleClickQuickMessage(message?.length > 0 ? ' ' + quickMessage.text : quickMessage.text)}
             />
           </React.Fragment>
         ))}

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

@@ -13,6 +13,7 @@ import { useTheme } from 'styled-components/native';
 import { useLocation } from '../../hooks/useLocation';
 import { FloatingButton } from '../FloatingButton';
 import { showLocation } from 'react-native-map-link';
+import { transformDistance } from '../../utils';
 
 export const DriverMap = (props: GoogleMapsParams) => {
   const {
@@ -56,6 +57,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
     content: Array<string>;
     key?: string | null;
   }>({ open: false, content: [], key: null });
+  const distanceUnit = configState?.configs?.distance_unit?.value
 
   const {
     hasLocation,
@@ -475,9 +477,10 @@ export const DriverMap = (props: GoogleMapsParams) => {
                 src={theme.images.general.arrow_distance}
                 style={styles.arrowDistance}
               />
-              <OText size={12} numberOfLines={3}>{`${(
-                distancesFromTwoPlacesKm * 3280.84
-              ).toFixed(0)} ${t('FT', 'Ft')}`}</OText>
+              <OText size={12} numberOfLines={3}>
+                {`${transformDistance(distancesFromTwoPlacesKm, distanceUnit)} ${t(distanceUnit.toUpperCase(), distanceUnit)}`} 
+              </OText>
+
             </View>
             <View style={{ width: '75%', paddingRight: 20 }}>
               <OText
@@ -485,8 +488,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
                 size={13}
                 numberOfLines={2}
                 adjustsFontSizeToFit>
-                {`${travelTime.toFixed(2)} - ${isMin ? t('MINNUTES', 'mins') : t('HOURS', 'hours')
-                  } ${distancesFromTwoPlacesKm.toFixed(2)} km`}
+                {`${travelTime.toFixed(2)} - ${isMin ? t('MINNUTES', 'mins') : t('HOURS', 'hours')}`}
               </OText>
             </View>
           </View>

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

@@ -9,6 +9,7 @@ import {
 } from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
 import Recaptcha from 'react-native-recaptcha-that-works'
+import ReCaptcha from '@fatnlazycat/react-native-recaptcha-v3'
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import {
@@ -52,8 +53,8 @@ const LoginFormUI = (props: LoginParams) => {
     allowedLevels,
     useRootPoint,
     notificationState,
-		handleReCaptcha,
-		enableReCaptcha
+    handleReCaptcha,
+    enableReCaptcha
   } = props;
 
   const [ordering, { setOrdering }] = useApi();
@@ -67,7 +68,7 @@ const LoginFormUI = (props: LoginParams) => {
   const inputRef = useRef<any>(null);
   const inputMailRef = useRef<any>(null);
 
-  const [projectName, setProjectName] = useState({name: '', isFocued: false});
+  const [projectName, setProjectName] = useState({ name: '', isFocued: false });
   const [passwordSee, setPasswordSee] = useState(false);
   const [isLoadingVerifyModal, setIsLoadingVerifyModal] = useState(false);
   const [isModalVisible, setIsModalVisible] = useState(false);
@@ -92,36 +93,50 @@ const LoginFormUI = (props: LoginParams) => {
   const [formValues, setFormValues] = useState(null);
 
   const [recaptchaConfig, setRecaptchaConfig] = useState<any>({})
-	const [recaptchaVerified, setRecaptchaVerified] = useState(false)
+  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])
+    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({ code: token, version: recaptchaConfig?.version })
+  }
+
+  useEffect(() => {
+    if (configs && Object.keys(configs).length > 0 && enableReCaptcha) {
+      if (configs?.security_recaptcha_type?.value === 'v3' &&
+        configs?.security_recaptcha_score_v3?.value > 0 &&
+        configs?.security_recaptcha_site_key_v3?.value
+      ) {
+        setRecaptchaConfig({
+          version: 'v3',
+          siteKey: configs?.security_recaptcha_site_key_v3?.value || null,
+          baseUrl: configs?.security_recaptcha_base_url?.value || null
+        })
+        return
+      }
+      if (configs?.security_recaptcha_site_key?.value) {
+        setRecaptchaConfig({
+          version: 'v2',
+          siteKey: configs?.security_recaptcha_site_key?.value || null,
+          baseUrl: configs?.security_recaptcha_base_url?.value || null
+        })
+      }
+    }
+  }, [configs, enableReCaptcha])
 
   useEffect(() => {
     const projectInputInterval = setInterval(() => {
@@ -164,6 +179,7 @@ const LoginFormUI = (props: LoginParams) => {
         'An error occurred while trying to pay by PayPal',
       ERROR_ADD_PRODUCT_VERY_FAR_FOR_DELIVERY:
         'Error adding product, very far for delivery',
+      ERROR_AUTH_DRIVER_LOGIN_VALIDATION: 'Error auth driver login validation'
     };
 
     return keyList[key] ? t(key, keyList[key]) : t(key);
@@ -245,6 +261,17 @@ const LoginFormUI = (props: LoginParams) => {
 
   useEffect(() => {
     if (!formState?.loading && formState?.result?.error) {
+      if (formState.result?.result?.[0] === 'ERROR_AUTH_VERIFICATION_CODE') {
+        setRecaptchaVerified(false)
+        setSubmitted(false)
+        setRecaptchaConfig({
+          version: 'v2',
+          siteKey: configs?.security_recaptcha_site_key?.value || null,
+          baseUrl: configs?.security_recaptcha_base_url?.value || null
+        })
+        showToast(ToastType.Info, t('TRY_AGAIN', 'Please try again'))
+        return
+      }
       formState?.result?.result &&
         showToast(
           ToastType.Error,
@@ -252,17 +279,17 @@ const LoginFormUI = (props: LoginParams) => {
             ? getTraduction(formState.result?.result)
             : loginTab === 'email' &&
               typeof formState.result?.result !== 'string'
-            ? getTraduction(formState.result?.result[0])
-            : loginTab === 'cellphone' &&
-              typeof formState.result?.result === 'string'
-            ? getTraduction(formState.result?.result).replace(
-                t('USER', 'user').toLowerCase(),
-                t('PHONE_NUMER', 'Phone number'),
-              )
-            : getTraduction(formState.result?.result[0]).replace(
-                t('USER', 'user').toLowerCase(),
-                t('PHONE_NUMER', 'Phone number'),
-              ),
+              ? getTraduction(formState.result?.result[0])
+              : loginTab === 'cellphone' &&
+                typeof formState.result?.result === 'string'
+                ? getTraduction(formState.result?.result).replace(
+                  t('USER', 'user').toLowerCase(),
+                  t('PHONE_NUMER', 'Phone number'),
+                )
+                : getTraduction(formState.result?.result[0]).replace(
+                  t('USER', 'user').toLowerCase(),
+                  t('PHONE_NUMER', 'Phone number'),
+                ),
         );
       setSubmitted(false)
     }
@@ -516,7 +543,7 @@ const LoginFormUI = (props: LoginParams) => {
                   icon={theme.images.general.project}
                   iconColor={theme.colors.arrowColor}
                   onChange={(e: any) => {
-                    setProjectName({name: e?.target?.value, isFocued: true})
+                    setProjectName({ name: e?.target?.value, isFocued: true })
                     onChange(e?.target?.value);
                     setSubmitted(false);
                   }}
@@ -545,7 +572,7 @@ const LoginFormUI = (props: LoginParams) => {
                   icon={theme.images.logos.emailInputIcon}
                   iconColor={theme.colors.arrowColor}
                   onChange={(e: any) => {
-                    setProjectName({...projectName, isFocued: false})
+                    setProjectName({ ...projectName, isFocued: false })
                     handleChangeInputEmail(e, onChange);
                   }}
                   selectionColor={theme.colors.primary}
@@ -650,40 +677,50 @@ const LoginFormUI = (props: LoginParams) => {
               </OText>
             </Pressable>
           )}
-
-          {enableReCaptcha && (
+          {(enableReCaptcha && recaptchaConfig?.version) && (
             <>
-              <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)}
-              />
+              {recaptchaConfig?.version === 'v3' ? (
+                <ReCaptcha
+                  url={recaptchaConfig?.baseUrl}
+                  siteKey={recaptchaConfig?.siteKey}
+                  containerStyle={{ height: 40 }}
+                  onExecute={onRecaptchaVerify}
+                  reCaptchaType={1}
+                />
+              ) : (
+                <>
+                  <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')}

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

@@ -21,6 +21,7 @@ const MapViewComponent = (props: MapViewParams) => {
     customerMarkerGroups,
     alertState,
     setAlertState,
+    setDriverLocation,
     onNavigationRedirect,
     getBusinessLocations,
   } = props;
@@ -102,7 +103,7 @@ const MapViewComponent = (props: MapViewParams) => {
     return () => {
       stopFollowUserLocation();
     };
-  }, []);
+  }, [isFocused]);
 
   useFocusEffect(
     useCallback(() => {
@@ -191,7 +192,7 @@ const MapViewComponent = (props: MapViewParams) => {
             {((customer && marker?.business?.zipcode) || (!customer && marker?.business?.zipcode)) && (
               <OText>{customer ? marker?.customer?.zipcode : marker?.business?.zipcode}</OText>
             )}
-            {customer && marker?.customer?.internal_number && (
+            {customer && !!marker?.customer?.internal_number && (
               <OText>{marker?.customer?.internal_number}</OText>
             )}
             <OText textDecorationLine='underline' color={theme.colors.primary}>
@@ -211,6 +212,16 @@ const MapViewComponent = (props: MapViewParams) => {
     )
   }
 
+  useEffect(() => {
+    if (userLocation.latitude !== 0 && userLocation.longitude !== 0) {
+      const location = {
+        lat: userLocation.latitude,
+        lng: userLocation.longitude
+      }
+      setDriverLocation({ location })
+    }
+  }, [userLocation])
+
   return (
     <SafeAreaView style={{ flex: 1 }}>
       <View style={{ flex: 1 }}>
@@ -241,7 +252,7 @@ const MapViewComponent = (props: MapViewParams) => {
                     orderIds={marker.map((order: any) => order.id).join(', ')}
                   />
                 ))}
-                {Object.values(customerMarkerGroups).map((marker: any) =>  (
+                {Object.values(customerMarkerGroups).map((marker: any) => (
                   <RenderMarker
                     key={marker[0]?.customer_id}
                     marker={marker[0]}

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

@@ -5,6 +5,7 @@ import {
   StyleSheet,
   Dimensions,
   ScrollView,
+  RefreshControl,
 } from 'react-native';
 import { Contacts, useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
@@ -24,6 +25,7 @@ const MessagesOptionUI = (props: MessagesOptionParams) => {
     messages,
     onNavigationRedirect,
     setSortBy,
+    getOrders
   } = props;
 
   const theme = useTheme();
@@ -55,6 +57,7 @@ const MessagesOptionUI = (props: MessagesOptionParams) => {
   const [tabsFilter, setTabsFilter] = useState(tabs[0].tags);
   const [activeTag, setActiveTag] = useState(tags[0].key);
   const [reload, setReload] = useState(false);
+  const [refreshing] = useState(false);
   const [unreadMessages, setUnreadMessages] = useState(
     values?.reduce(
       (total: number, order: any) => total + order.unread_count,
@@ -247,7 +250,14 @@ const MessagesOptionUI = (props: MessagesOptionParams) => {
         />
       )}
 
-      <ScrollView showsVerticalScrollIndicator={false} style={{ flex: 1 }}>
+      <ScrollView 
+        showsVerticalScrollIndicator={false}
+        style={{ flex: 1 }}
+        refreshControl={<RefreshControl
+          refreshing={refreshing}
+          onRefresh={() => getOrders?.()}
+      />}
+      >
         {!reload &&
           !error &&
           values.length > 0 &&

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

@@ -14,6 +14,8 @@ Sound.setCategory('Playback')
 
 const windowWidth = Dimensions.get('screen').width
 
+const SOUND_LOOP = 3
+
 const NewOrderNotificationUI = (props: any) => {
   const { isBusinessApp } = props
   const [events] = useEvent()
@@ -22,8 +24,7 @@ const NewOrderNotificationUI = (props: any) => {
   const [{ user, token }] = useSession()
   const [ordering] = useApi()
   const { getCurrentLocation } = useLocation();
-  const [soundTimeout, setSoundTimeout] = useState<any>(null)
-  let [currentEvent, setCurrentEvent] = useState<any>(null)
+  const [currentEvent, setCurrentEvent] = useState<any>(null)
 
   const evtList: any = {
     1: {
@@ -43,29 +44,27 @@ const NewOrderNotificationUI = (props: any) => {
     },
   }
 
-  const notificationSound = new Sound(theme.sounds.notification, (e) => { console.log(e) });
+  const notificationSound = new Sound(theme.sounds.notification);
 
-  const handlePlayNotificationSound = () => {
-    if (currentEvent) return
-    let times = 0
-    const _timeout = setInterval(function () {
-      notificationSound.play(success => {
-        if (success) {
-          times = times + 1
-        }
-      })
-      setSoundTimeout(_timeout)
-      if (times === 3) {
-        clearInterval(_timeout)
-        clearInterval(soundTimeout)
-      }
-    }, 2500)
+  let _timeout: any = null
+
+  const handleCloseEvents = () => {
+    notificationSound.stop()
+    setCurrentEvent(null)
+    clearInterval(_timeout)
   }
 
-  const handleCloseModal = () => {
-    clearInterval(soundTimeout)
-    currentEvent = null
-    setCurrentEvent({ evt: null })
+  const handlePlayNotificationSound = (eventObj: any = null) => {
+    setCurrentEvent(eventObj)
+    let times = 1
+    if (times < SOUND_LOOP) {
+      _timeout = setInterval(() => {
+        notificationSound.setVolume(1).play(success => success && (times = times + 1))
+        if (times === SOUND_LOOP) {
+          clearInterval(_timeout)
+        }
+      }, 2500)
+    }
   }
 
   const handleEventNotification = async (evtType: number, value: any) => {
@@ -79,26 +78,15 @@ const NewOrderNotificationUI = (props: any) => {
           }),
           headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` }
         })
-      } catch (error) {
-          console.log(error)
-      }
+      } catch {}
       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 })
+        handlePlayNotificationSound({ evt: 2, orderId: value?.id })
       }
     }
     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({
+    handlePlayNotificationSound({
       evt: evtType,
       orderId: evtList[evtType].event === 'messages' ? value?.order_id : value?.id
     })
@@ -108,18 +96,20 @@ const NewOrderNotificationUI = (props: any) => {
     events.on('message_added_notification', (o: any) => handleEventNotification(1, o))
     events.on('order_added_notification', (o: any) => handleEventNotification(2, o))
     events.on('order_updated_notification', (o: any) => handleEventNotification(3, o))
+    events.on('request_register_notification', (o: any) => handleEventNotification(2, o))
+    events.on('request_update_notification', (o: any) => handleEventNotification(3, o))
+
     return () => {
       events.off('message_added_notification', (o: any) => handleEventNotification(1, o))
       events.off('order_added_notification', (o: any) => handleEventNotification(2, o))
       events.off('order_updated_notification', (o: any) => handleEventNotification(3, o))
+      events.off('request_register_notification', (o: any) => handleEventNotification(2, o))
+      events.off('request_update_notification', (o: any) => handleEventNotification(3, o))
     }
   }, [])
 
   useEffect(() => {
-    notificationSound.setVolume(1);
-    return () => {
-      notificationSound.release();
-    }
+    return () => handleCloseEvents()
   }, [])
 
   return (
@@ -133,7 +123,7 @@ const NewOrderNotificationUI = (props: any) => {
           <View style={styles.modalView}>
             <TouchableOpacity
               style={styles.wrapperIcon}
-              onPress={() => handleCloseModal()}
+              onPress={() => handleCloseEvents()}
             >
               <Icon name="x" size={30} />
             </TouchableOpacity>