ordering-ui-react-native 0.17.69 → 0.17.70-release

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

@@ -1,6 +1,6 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { formatSeconds } from '../../../utils'
-import { StyleSheet, TouchableOpacity } from 'react-native';
+import { StyleSheet, TouchableOpacity, Alert } from 'react-native';
 import { useCountdownTimer } from '../../../../../../src/hooks/useCountdownTimer';
 import { useLanguage } from 'ordering-components/native';
 import { OTPContainer } from './styles';
@@ -16,11 +16,13 @@ export const Otp = (props: otpParams) => {
         onSubmit,
         handleLoginOtp,
         setAlertState,
-        pinCount
+        pinCount,
+        formState
     } = props
 
     const theme = useTheme();
     const [, t] = useLanguage();
+    const [code, setCode] = useState('')
     const [otpLeftTime, _, resetOtpLeftTime]: any = useCountdownTimer(
         600, willVerifyOtpState)
 
@@ -44,6 +46,30 @@ export const Otp = (props: otpParams) => {
         }
     }, [otpLeftTime])
 
+    useEffect(() => {
+        if (!formState?.loading && formState?.result?.error) {
+            Alert.alert(
+                t('ERROR', 'Error'),
+                typeof formState.result?.result === 'string'
+                  ? formState.result?.result
+                  : formState.result?.result[0],
+                [
+                    {
+                        text: t('ACCEPT', 'Accept'),
+                        onPress: () => {},
+                        style: 'cancel'
+                    },
+                ],
+                { cancelable: false }
+            )
+
+            if (code.length === (pinCount || 6)) {
+                setCode('')
+            }
+
+        }
+    }, [formState])
+
     const loginStyle = StyleSheet.create({
         underlineStyleBase: {
             width: 45,
@@ -72,6 +98,8 @@ export const Otp = (props: otpParams) => {
                     onCodeFilled={(code: string) => handleLoginOtp(code)}
                     selectionColor={theme.colors.primary}
                     editable
+                    code={code}
+                    onCodeChanged={(code: string) => setCode(code)}
                 />
                 <TouchableOpacity onPress={() => handleOnSubmit()} disabled={otpLeftTime > 520}>
                     <OText size={16} mBottom={30} color={otpLeftTime > 520 ? theme.colors.disabled : theme.colors.primary}>

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

@@ -209,11 +209,11 @@ const LoginFormUI = (props: LoginParams) => {
     props.handleChangeTab(val);
 
     if (loginTab === 'email') {
-      scrollRefTab.current?.scrollToEnd({ animated: true });
+      scrollRefTab?.current?.scrollToEnd && scrollRefTab.current?.scrollToEnd({ animated: true });
     }
 
     if (loginTab === 'cellphone') {
-      scrollRefTab.current?.scrollTo({ animated: true });
+      scrollRefTab?.current?.scrollTo && scrollRefTab.current?.scrollTo({ animated: true });
     }
   };
 
@@ -280,7 +280,6 @@ const LoginFormUI = (props: LoginParams) => {
 
 	const handleLoginOtp = (code: string) => {
 		handleButtonLoginClick({ code })
-		setWillVerifyOtpState(false)
 	}
 
 	const closeAlert = () => {
@@ -329,27 +328,17 @@ const LoginFormUI = (props: LoginParams) => {
         showToast(ToastType.Info, t('TRY_AGAIN', 'Please try again'))
         return
       }
-      formState?.result?.result &&
-        showToast(
-          ToastType.Error,
-          loginTab === 'email' && typeof formState.result?.result === 'string'
-            ? 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'),
-                ),
-        );
+      formState.result?.result && showToast(
+        ToastType.Error,
+        typeof formState.result?.result === 'string'
+          ? formState.result?.result
+          : formState.result?.result[0]
+      )
       setSubmitted(false)
     }
+    if (!formState?.loading && !formState?.result?.error) {
+      setWillVerifyOtpState(false)
+    }
   }, [formState]);
 
   useEffect(() => {
@@ -487,6 +476,8 @@ const LoginFormUI = (props: LoginParams) => {
       borderRadius: 7.6,
       borderColor: theme.colors.inputSignup,
       backgroundColor: theme.colors.transparent,
+      minHeight: 50,
+      maxHeight : 50
     },
     btn: {
       borderRadius: 7.6,
@@ -929,6 +920,7 @@ const LoginFormUI = (props: LoginParams) => {
 					handleLoginOtp={handleLoginOtp}
 					onSubmit={handleLogin}
 					setAlertState={setAlertState}
+          formState={formState}
 				/>
 			</OModal>
 			<Alert
@@ -951,3 +943,4 @@ export const LoginForm = (props: any) => {
 
   return <LoginFormController {...loginProps} />;
 };
+

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

@@ -42,7 +42,7 @@ const MapViewComponent = (props: MapViewParams) => {
     followUserLocation
   } = useLocation();
 
-  const location = { lat: userLocation.latitude, lng: userLocation.longitude }
+  const location = { lat: userLocation?.latitude, lng: userLocation?.longitude }
   const haveOrders = Object.values(markerGroups)?.length > 0 && Object.values(customerMarkerGroups)?.length > 0
   const closeAlert = () => {
     setAlertState({
@@ -57,8 +57,8 @@ const MapViewComponent = (props: MapViewParams) => {
         [
           { latitude: location.latitude, longitude: location.longitude },
           {
-            latitude: userLocation.latitude,
-            longitude: userLocation.longitude,
+            latitude: userLocation?.latitude,
+            longitude: userLocation?.longitude,
           },
         ],
         {
@@ -103,7 +103,7 @@ const MapViewComponent = (props: MapViewParams) => {
     return () => {
       stopFollowUserLocation();
     };
-  }, []);
+  }, [isFocused]);
 
   useFocusEffect(
     useCallback(() => {
@@ -213,10 +213,10 @@ const MapViewComponent = (props: MapViewParams) => {
   }
 
   useEffect(() => {
-    if (userLocation.latitude !== 0 && userLocation.longitude !== 0) {
+    if (userLocation?.latitude !== 0 && userLocation?.longitude !== 0) {
       const location = {
-        lat: userLocation.latitude,
-        lng: userLocation.longitude
+        lat: userLocation?.latitude,
+        lng: userLocation?.longitude
       }
       setDriverLocation({ location })
     }
@@ -231,8 +231,8 @@ const MapViewComponent = (props: MapViewParams) => {
               ref={mapRef}
               provider={PROVIDER_GOOGLE}
               initialRegion={{
-                latitude: initialPosition.latitude,
-                longitude: initialPosition.longitude,
+                latitude: initialPosition?.latitude,
+                longitude: initialPosition?.longitude,
                 latitudeDelta: haveOrders ? 0.01 : 0.1,
                 longitudeDelta: haveOrders ? 0.01 * ASPECT_RATIO : 0.1 * ASPECT_RATIO,
               }}
@@ -252,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

@@ -2,20 +2,17 @@ import React, { useState, useEffect } from 'react';
 import {
   View,
   Pressable,
-  StyleSheet,
-  Dimensions,
-  ScrollView,
-  RefreshControl,
+  StyleSheet
 } from 'react-native';
 import { Contacts, useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
-import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
-import { OText, OButton } from '../shared';
+import { OText } from '../shared';
 import { NotFoundSource } from '../NotFoundSource';
 import { PreviousMessages } from '../PreviousMessages';
 import { FiltersTab, TabsContainer, TagsContainer, Tag } from './styles';
 import { MessagesOptionParams } from '../../types';
 import { useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation';
+
 const MessagesOptionUI = (props: MessagesOptionParams) => {
   const {
     orders,
@@ -65,12 +62,6 @@ const MessagesOptionUI = (props: MessagesOptionParams) => {
     ),
   );
 
-  const [orientation, setOrientation] = useState(
-    Dimensions.get('window').width < Dimensions.get('window').height
-      ? 'Portrait'
-      : 'Landscape',
-  );
-
   const getTagFilter = (key: number) => {
     return tags.find(value => value.key === key)?.text;
   };
@@ -114,14 +105,6 @@ const MessagesOptionUI = (props: MessagesOptionParams) => {
     );
   }, [orders]);
 
-  Dimensions.addEventListener('change', ({ window: { width, height } }) => {
-    if (width < height) {
-      setOrientation('Portrait');
-    } else {
-      setOrientation('Landscape');
-    }
-  });
-
   const styles = StyleSheet.create({
     header: {
       marginBottom: 25,
@@ -242,35 +225,28 @@ const MessagesOptionUI = (props: MessagesOptionParams) => {
             !error
               ? t('NO_RESULTS_FOUND', 'Sorry, no results found')
               : error[0]?.message ||
-                error[0] ||
-                t('NETWORK_ERROR', 'Network Error')
+              error[0] ||
+              t('NETWORK_ERROR', 'Network Error')
           }
           image={theme.images.general.notFound}
           conditioned={false}
         />
       )}
-
-      <ScrollView 
-        showsVerticalScrollIndicator={false}
-        style={{ flex: 1 }}
-        refreshControl={<RefreshControl
-          refreshing={refreshing}
-          onRefresh={() => getOrders?.()}
-      />}
-      >
-        {!reload &&
-          !error &&
-          values.length > 0 &&
-          JSON.stringify(tabsFilter) === JSON.stringify(tabs[0].tags) && (
-            <PreviousMessages
-              orders={values}
-              setOrders={setOrders}
-              messages={messages}
-              onNavigationRedirect={onNavigationRedirect}
-            />
-          )}
-
-        {/* {!reload &&
+      <PreviousMessages
+        orders={values}
+        messages={messages}
+        onNavigationRedirect={onNavigationRedirect}
+        getOrders={getOrders}
+        pagination={pagination}
+        loading={loading}
+        reload={reload}
+        tabs={tabs}
+        tabsFilter={tabsFilter}
+        setOrders={setOrders}
+        loadMore={loadMore}
+        error={error}
+      />
+      {/* {!reload &&
         !error &&
         orders.length > 0 &&
         JSON.stringify(tabsFilter) === JSON.stringify(tabs[1].tags) && (
@@ -283,55 +259,6 @@ const MessagesOptionUI = (props: MessagesOptionParams) => {
             onNavigationRedirect={onNavigationRedirect}
           />
         )} */}
-
-        {(loading || reload) && (
-          <>
-            <View>
-              {[...Array(5)].map((item, i) => (
-                <Placeholder key={i} Animation={Fade}>
-                  <View
-                    style={{
-                      width: '100%',
-                      flexDirection: 'row',
-                      marginBottom: 10,
-                    }}>
-                    <PlaceholderLine
-                      width={orientation === 'Portrait' ? 22 : 11}
-                      height={74}
-                      style={{
-                        marginRight: 20,
-                        marginBottom: 20,
-                        borderRadius: 7.6,
-                      }}
-                    />
-                    <Placeholder>
-                      <PlaceholderLine width={30} style={{ marginTop: 5 }} />
-                      <PlaceholderLine width={50} />
-                      <PlaceholderLine width={20} />
-                    </Placeholder>
-                  </View>
-                </Placeholder>
-              ))}
-            </View>
-          </>
-        )}
-
-        {pagination?.totalPages &&
-          !loading &&
-          !reload &&
-          JSON.stringify(tabsFilter) === JSON.stringify(tabs[0].tags) &&
-          pagination?.currentPage < pagination?.totalPages && (
-            <OButton
-              onClick={() => loadMore && loadMore()}
-              text={t('LOAD_MORE_ORDERS', 'Load more orders')}
-              imgRightSrc={null}
-              textStyle={styles.loadButtonText}
-              style={styles.loadButton}
-              bgColor={theme.colors.primary}
-              borderColor={theme.colors.primary}
-            />
-          )}
-      </ScrollView>
     </>
   );
 };

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

@@ -1,16 +1,17 @@
-import React, { useState, useEffect } from 'react'
 import moment from 'moment'
-import { View, Modal, StyleSheet, TouchableOpacity, Dimensions } from 'react-native'
+import { NewOrderNotification as NewOrderNotificationController, useApi, useEvent, useLanguage, useSession } from 'ordering-components/native'
+import React, { useEffect, useState } from 'react'
+import { Dimensions, Modal, StyleSheet, TouchableOpacity, View } from 'react-native'
 import Sound from 'react-native-sound'
 import Icon from 'react-native-vector-icons/Feather'
 import { useTheme } from 'styled-components/native'
-import { useEvent, useLanguage, useSession, useApi, NewOrderNotification as NewOrderNotificationController } from 'ordering-components/native'
 
-import { OText, OIcon } from '../shared'
-import { NotificationContainer } from './styles'
 import { useLocation } from '../../hooks/useLocation'
+import { OIcon, OText } from '../shared'
+import { NotificationContainer } from './styles'
 
-Sound.setCategory('Playback')
+Sound.setCategory('Playback', true)
+Sound.setMode('Default')
 
 const windowWidth = Dimensions.get('screen').width
 
@@ -44,9 +45,10 @@ const NewOrderNotificationUI = (props: any) => {
     },
   }
 
-  const notificationSound = new Sound(theme.sounds.notification);
+  const notificationSound = new Sound(theme.sounds.notification, '', () => { });
 
   let _timeout: any = null
+  let times = 0
 
   const handleCloseEvents = () => {
     notificationSound.stop()
@@ -56,15 +58,22 @@ const NewOrderNotificationUI = (props: any) => {
 
   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)
+    if (times > 0) {
+      if (times === 3) {
+        times = 0
+        return
+      }
+      return
     }
+    _timeout = setInterval(() => {
+      if (times < SOUND_LOOP) {
+        notificationSound.play()
+        times++
+      } else {
+        clearInterval(_timeout)
+        return
+      }
+    }, 2500)
   }
 
   const handleEventNotification = async (evtType: number, value: any) => {
@@ -74,32 +83,37 @@ const NewOrderNotificationUI = (props: any) => {
         await fetch(`${ordering.root}/users/${user.id}/locations`, {
           method: 'POST',
           body: JSON.stringify({
-            location: JSON.stringify({location: `{lat: ${location.latitude}, lng: ${location.longitude}}`})
+            location: JSON.stringify({ location: `{lat: ${location.latitude}, lng: ${location.longitude}}` })
           }),
           headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` }
         })
-      } catch {}
+      } catch { }
       const duration = moment.duration(moment().diff(moment.utc(value?.last_driver_assigned_at)))
       const assignedSecondsDiff = duration.asSeconds()
-      if (assignedSecondsDiff < 5 && !isBusinessApp) {
+      if (assignedSecondsDiff < 5 && !isBusinessApp && !value?.logistic_status) {
         handlePlayNotificationSound({ evt: 2, orderId: value?.id })
       }
     }
     if (evtType === 3 || value.author_id === user.id) return
-    handlePlayNotificationSound({
+    setTimeout(() => handlePlayNotificationSound({
       evt: evtType,
-      orderId: evtList[evtType].event === 'messages' ? value?.order_id : value?.id
-    })
+      orderId: value?.driver ? value?.order_id : evtList[evtType].event === 'messages' ? value?.order?.id : value?.order_id
+    }), 1000)
   }
 
   useEffect(() => {
     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))
     }
   }, [])
 

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

@@ -18,7 +18,7 @@ export const NotFoundSource = (props: NotFoundSourceParams) => {
           <OIcon src={errorImage} width={260} height={220} />
         </NotFoundImage>
       )}
-      {content && conditioned && !errorImage && (
+      {!!content && conditioned && !errorImage && (
         <OText
           color={theme.colors.textSecondary}
           size={textSize ?? 18}
@@ -26,7 +26,7 @@ export const NotFoundSource = (props: NotFoundSourceParams) => {
           {content}
         </OText>
       )}
-      {content && !conditioned && (
+      {!!content && !conditioned && (
         <OText
           color={theme.colors.textSecondary}
           size={textSize ?? 18}

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

@@ -410,7 +410,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
           </View>
         )}
 
-      {(!!error || error) && (
+      {(!!error || error?.length > 0) && (
         <NotFoundSource
           btnTitle={t('GO_TO_MY_ORDERS', 'Go to my orders')}
           content={