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

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

@@ -69,6 +69,8 @@ const ChatUI = (props: MessagesParams) => {
   const [, { showToast }] = useToast();
   const theme = useTheme();
   const [messageList, setMessageList] = useState<any>([])
+  const previousStatus = [1, 2, 5, 6, 10, 11, 12, 16, 17]
+  const chatDisabled = previousStatus.includes(order?.status)
 
   const ORDER_STATUS: any = {
     0: t('ORDER_STATUS_PENDING', 'Order status pending'),
@@ -176,12 +178,8 @@ const ChatUI = (props: MessagesParams) => {
       fontSize: 12,
     },
     toolbarStyle: {
-      flexDirection: 'column-reverse',
-      paddingVertical: 15,
-      paddingHorizontal: 30,
-      backgroundColor: theme.colors.white,
-      borderTopWidth: 1,
-      borderTopColor: theme.colors.tabBar,
+      padding: Platform.OS === 'ios' && isKeyboardShow ? 0 : 10,
+      flexDirection: 'column-reverse'
     },
     accessoryIcon: {
       height: 32,
@@ -314,14 +312,16 @@ const ChatUI = (props: MessagesParams) => {
         quality: 1
       },
       (response: any) => {
-        if (response.didCancel) {
+        const image = response.assets?.[0];
+        if (!image) return
+        if (image.didCancel) {
           console.log('User cancelled image picker');
-        } else if (response.errorMessage) {
-          console.log('ImagePicker Error: ', response.errorMessage);
-          showToast(ToastType.Error, response.errorMessage);
+        } else if (image.errorMessage) {
+          console.log('ImagePicker Error: ', image.errorMessage);
+          showToast(ToastType.Error, image.errorMessage);
         } else {
-          if (response.uri) {
-            const url = `data:${response.type};base64,${response.base64}`;
+          if (image.uri) {
+            const url = `data:${image.type};base64,${image.base64}`;
             setImage && setImage(url);
           } else {
             showToast(ToastType.Error, t('IMAGE_NOT_FOUND', 'Image not found'));
@@ -586,16 +586,12 @@ const ChatUI = (props: MessagesParams) => {
   };
 
   const renderAccessory = () => (
+    !chatDisabled &&
     <View>
       <Header
         showsVerticalScrollIndicator={false}
         showsHorizontalScrollIndicator={false}
         horizontal
-        // contentContainerStyle={{
-        //   justifyContent:
-        //     orientation === 'Landscape' ? 'center' : 'space-between',
-        //   width: '100%',
-        // }}
         nestedScrollEnabled={true}
       >
         {user?.level !== 2 && (
@@ -766,113 +762,130 @@ const ChatUI = (props: MessagesParams) => {
       containerStyle={styles.toolbarStyle}
       primaryStyle={{ alignItems: 'center', justifyContent: 'space-between' }}
       accessoryStyle={{ position: 'relative', marginBottom: 45 }}
-      renderAccessory={order ? () => renderAccessory && renderAccessory() : undefined}
+      renderAccessory={() => renderAccessory()}
     />
   );
 
   const renderComposer = (props: any) => (
-    <View
-      style={{
-        flexDirection: 'row',
-        height: 44,
-        width: '85%',
-        backgroundColor: theme.colors.composerView,
-        borderRadius: 7.6,
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingRight: 10,
-      }}>
-      <Composer
-        {...props}
-        textInputStyle={{
-          borderRadius: 7.6,
-          borderColor: theme.colors.transparent,
-          borderWidth: 0,
-          color: '#010300',
-        }}
-        textInputProps={{
-          value: message,
-          onSubmitEditing: onSubmit,
-          returnKeyType: message ? 'send' : 'done',
-          blurOnSubmit: true,
-          multiline: false,
-          numberOfLines: 1,
-          autoCorrect: false,
-          autoCompleteType: 'off',
-          enablesReturnKeyAutomatically: false,
-          selectionColor: theme.colors.primary,
+    chatDisabled ? (
+      <View
+        style={{
+          width: '100%',
+          flexDirection: 'column',
+          alignItems: 'center'
         }}
-        placeholder={t('WRITE_MESSAGE', 'Write message')}
-        placeholderTextColor={theme.colors.composerPlaceHolder}
-      />
-
-      <TouchableOpacity
-        onPress={() => {
-          setImage && setImage(null);
-          setIsShowSignaturePad(!isShowSignaturePad);
-        }}>
+      >
         <MaterialCommunityIcon
-          name="pen"
-          color={
-            isShowSignaturePad ? theme.colors.primary : theme.colors.arrowColor
-          }
+          name='close-octagon-outline'
           size={24}
         />
-      </TouchableOpacity>
-
-      {!file.type && (
-        <Actions
+        <OText size={14}>{t('NOT_SEND_MESSAGES', 'You can\'t send messages because the order has ended')}</OText>
+      </View>
+    ) : (
+      <View
+        style={{
+          flexDirection: 'row',
+          height: 44,
+          width: '85%',
+          backgroundColor: theme.colors.composerView,
+          borderRadius: 7.6,
+          alignItems: 'center',
+          justifyContent: 'center',
+          paddingRight: 10,
+        }}>
+        <Composer
           {...props}
-          containerStyle={styles.containerActions}
-          optionTintColor="#222845"
-          icon={() => (
-            <>
-              {!file?.type && (
-                <>
-                  <OIconButton
-                    borderColor={theme.colors.transparent}
-                    icon={
-                      !isShowSignaturePad && image
-                        ? { uri: image }
-                        : theme.images.general.imageChat
-                    }
-                    iconStyle={{
-                      borderRadius: image ? 10 : 0,
-                      width: image ? 32 : 28,
-                      height: image ? 32 : 28,
-                    }}
-                    onClick={handleImagePicker}
-                    iconCover
-                  />
-
-                  {image && !isShowSignaturePad && (
-                    <TouchableOpacity
-                      style={{
-                        position: 'absolute',
-                        top: -5,
-                        right: -5,
-                        borderColor: theme.colors.backgroundDark,
-                        backgroundColor: theme.colors.white,
-                        borderRadius: 25,
-                      }}
-                      onPress={() => removeImage()}>
-                      <MaterialCommunityIcon
-                        name="close-circle-outline"
-                        color={theme.colors.backgroundDark}
-                        size={24}
-                      />
-                    </TouchableOpacity>
-                  )}
-                </>
-              )}
-            </>
-          )}
+          textInputStyle={{
+            borderRadius: 7.6,
+            borderColor: theme.colors.transparent,
+            borderWidth: 0,
+            color: '#010300',
+          }}
+          textInputProps={{
+            value: message,
+            onSubmitEditing: onSubmit,
+            returnKeyType: message ? 'send' : 'done',
+            blurOnSubmit: true,
+            multiline: false,
+            numberOfLines: 1,
+            autoCorrect: false,
+            autoCompleteType: 'off',
+            enablesReturnKeyAutomatically: false,
+            selectionColor: theme.colors.primary,
+          }}
+          placeholder={t('WRITE_MESSAGE', 'Write message')}
+          placeholderTextColor={theme.colors.composerPlaceHolder}
         />
-      )}
-    </View>
+
+        <TouchableOpacity
+          onPress={() => {
+            setImage && setImage(null);
+            setIsShowSignaturePad(!isShowSignaturePad);
+          }}>
+          <MaterialCommunityIcon
+            name="pen"
+            color={
+              isShowSignaturePad ? theme.colors.primary : theme.colors.arrowColor
+            }
+            size={24}
+          />
+        </TouchableOpacity>
+
+        {!file.type && (
+          <Actions
+            {...props}
+            containerStyle={styles.containerActions}
+            optionTintColor="#222845"
+            icon={() => (
+              <>
+                {!file?.type && (
+                  <>
+                    <OIconButton
+                      borderColor={theme.colors.transparent}
+                      icon={
+                        !isShowSignaturePad && image
+                          ? { uri: image }
+                          : theme.images.general.imageChat
+                      }
+                      iconStyle={{
+                        borderRadius: image ? 10 : 0,
+                        width: image ? 32 : 28,
+                        height: image ? 32 : 28,
+                      }}
+                      onClick={handleImagePicker}
+                      iconCover
+                    />
+
+                    {!!image && !isShowSignaturePad && (
+                      <TouchableOpacity
+                        style={{
+                          position: 'absolute',
+                          top: -5,
+                          right: -5,
+                          borderColor: theme.colors.backgroundDark,
+                          backgroundColor: theme.colors.white,
+                          borderRadius: 25,
+                        }}
+                        onPress={() => removeImage()}>
+                        <MaterialCommunityIcon
+                          name="close-circle-outline"
+                          color={theme.colors.backgroundDark}
+                          size={24}
+                        />
+                      </TouchableOpacity>
+                    )}
+                  </>
+                )}
+              </>
+            )}
+          />
+        )}
+      </View>
+    )
   );
 
   const renderSend = (props: any) => (
+    !chatDisabled &&
     <Send
       {...props}
       disabled={

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

@@ -12,7 +12,7 @@ import Icon from 'react-native-vector-icons/FontAwesome5';
 import { useTheme } from 'styled-components/native';
 import { useLocation } from '../../hooks/useLocation';
 import { FloatingButton } from '../FloatingButton';
-import { showLocation } from 'react-native-map-link';
+import { Popup } from 'react-native-map-link';
 import { transformDistance } from '../../utils';
 
 export const DriverMap = (props: GoogleMapsParams) => {
@@ -48,6 +48,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
   const [distancesFromTwoPlacesKm, setDistancesFromTwoPlacesKm] = useState(0);
   const [isMin, setIsMin] = useState(false);
   const [{ parseDate }] = useUtils();
+  const [popUp, setPopUp] = useState<boolean>(false);
   const mapErrors: any = {
     ERROR_NOT_FOUND_ADDRESS: "Sorry, we couldn't find an address",
     ERROR_MAX_LIMIT_LOCATION_TO: 'Sorry, You can only set the position to',
@@ -452,7 +453,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
                 {order?.delivery_datetime_utc
                   ? parseDate(order?.delivery_datetime_utc)
                   : parseDate(order?.delivery_datetime, { utc: false })}
-                {` - ${order?.paymethod?.name}`}
+                {` - ${t(order?.paymethod?.name?.replace(/\s+/g, '_')?.toUpperCase(), order?.paymethod?.name)}`}
               </OText>
               <OText weight="bold">
                 {t('INVOICE_ORDER_NO', 'Order No.')} {order?.id}
@@ -478,7 +479,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
                 style={styles.arrowDistance}
               />
               <OText size={12} numberOfLines={3}>
-                {`${transformDistance(distancesFromTwoPlacesKm, distanceUnit)} ${t(distanceUnit.toUpperCase(), distanceUnit)}`} 
+                {`${transformDistance(distancesFromTwoPlacesKm, distanceUnit)} ${t(distanceUnit.toUpperCase(), distanceUnit)}`}
               </OText>
 
             </View>
@@ -501,7 +502,18 @@ export const DriverMap = (props: GoogleMapsParams) => {
             imgRightSrc=''
             textStyle={{ color: theme.colors.white }}
             style={styles.showButton}
-            onClick={() => showLocation({
+            onClick={() => setPopUp(true)}
+            text={t('SHOW_IN_OTHER_MAPS', 'Show in other maps')}
+          />
+          <Popup
+            isVisible={popUp}
+            onCancelPressed={() => setPopUp(false)}
+            onAppPressed={() => setPopUp(false)}
+            onBackButtonPressed={() => setPopUp(false)}
+            modalProps={{
+              animationIn: 'slideInUp'
+            }}
+            options={{
               latitude: destination.latitude,
               longitude: destination.longitude,
               sourceLatitude: userLocation.latitude,
@@ -510,8 +522,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
               dialogTitle: t('SHOW_IN_OTHER_MAPS', 'Show in other maps'),
               dialogMessage: t('WHAT_APP_WOULD_YOU_USE', 'What app would you like to use?'),
               cancelText: t('CANCEL', 'Cancel'),
-            })}
-            text={t('SHOW_IN_OTHER_MAPS', 'Show in other maps')}
+            }}
           />
         </View>
         {showAcceptOrReject && (

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

@@ -1,7 +1,7 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { RefreshControl, ScrollView, View } from 'react-native'
 import { OText } from '../shared'
-import { useLanguage, useSession } from 'ordering-components/native'
+import { useLanguage, useSession, useUtils } from 'ordering-components/native'
 import { DayContainer } from './styles'
 import { useTheme } from 'styled-components/native'
 export const DriverSchedule = (props: any) => {
@@ -9,7 +9,9 @@ export const DriverSchedule = (props: any) => {
     const [, t] = useLanguage()
     const theme = useTheme()
     const [, { refreshUserInfo }] = useSession()
+    const [{ parseDate }] = useUtils()
     const [refreshing] = useState(false);
+    const [driverSchedule, setDriverSchedule] = useState([]);
 
     const daysOfWeek = [
         t('SUNDAY_ABBREVIATION', 'Sun'),
@@ -21,11 +23,43 @@ export const DriverSchedule = (props: any) => {
         t('SATURDAY_ABBREVIATION', 'Sat')
     ]
 
+    const getNextDate = (day) => {
+        const now = new Date()
+        now.setDate(now.getDate() + (day + (7 - now.getDay())) % 7)
+        return now
+      }
+
     const scheduleFormatted = ({ hour, minute }: any) => {
         const checkTime = (val: number) => val < 10 ? `0${val}` : val
         return `${checkTime(hour)}:${checkTime(minute)}`
     }
 
+    useEffect(() => {
+        if (schedule) {
+            setDriverSchedule(schedule)
+        } else {
+            const _schedule: any = []
+            for (let i = 0; i < 7; i++) {
+                _schedule.push({
+                enabled: true,
+                lapses: [
+                  {
+                    open: {
+                      hour: 0,
+                      minute: 0
+                    },
+                    close: {
+                      hour: 23,
+                      minute: 59
+                    }
+                  }
+                ]
+              })
+            }
+            setDriverSchedule(_schedule)
+        }
+    }, [schedule])
+
     return (
         <ScrollView
             refreshControl={<RefreshControl
@@ -37,22 +71,25 @@ export const DriverSchedule = (props: any) => {
                 {t('SCHEDULE', 'Schedule')}
             </OText>
             <View style={{ padding: 30 }}>
-                {schedule.map((item: any, i: number) => (
+                {driverSchedule.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' }}>
+                        <View style={{ flex: 1 }}>
+                            <OText size={22} weight={700}>{daysOfWeek[i]}</OText>
+                            <OText size={14}>{parseDate(getNextDate(i), { outputFormat: 'YYYY-MM-DD' })}</OText>
+                        </View>
+                        <View style={{ flex: 1 }}>
                             <>
                                 {item?.enabled ? (
-                                    <View>
+                                    <View style={{ width: '100%' }}>
                                         {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%' }}>
+                                                <OText size={18} style={{ flex: 1 }}>
                                                     {scheduleFormatted(lapse.open)}
                                                 </OText>
                                                 <OText size={18} style={{ width: 15 }}>
                                                     -
                                                 </OText>
-                                                <OText size={18} style={{ width: '30%' }}>
+                                                <OText size={18} style={{ flex: 1, textAlign: 'right' }}>
                                                     {scheduleFormatted(lapse.close)}
                                                 </OText>
                                             </View>

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

@@ -80,9 +80,9 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     locations.map((location: { lat: number; lng: number; level: number }) => {
       return location.level === 4 && driverLocation?.lat
         ? {
-            latitude: driverLocation?.lat,
-            longitude: driverLocation?.lng,
-          }
+          latitude: driverLocation?.lat,
+          longitude: driverLocation?.lng,
+        }
         : { latitude: location.lat, longitude: location.lng };
     });
 
@@ -107,7 +107,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
           }
           let data = null;
           const details = {
-            geometry: { location: { lat: pos.latitude, lng: pos.longitude } },
+            geometry: { location: { lat: pos?.latitude, lng: pos?.longitude } },
           };
           if (isSetInputs) {
             data = {
@@ -165,8 +165,8 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     const lat1 = pointA.lat;
     const lon1 = pointA.lng;
 
-    const lat2 = pointB.latitude;
-    const lon2 = pointB.longitude;
+    const lat2 = pointB?.latitude;
+    const lon2 = pointB?.longitude;
 
     const R = 6371e3;
     const φ1 = lat1 * (Math.PI / 180);
@@ -201,11 +201,11 @@ export const GoogleMap = (props: GoogleMapsParams) => {
       content: !(errKey === 'ERROR_MAX_LIMIT_LOCATION_TO')
         ? [t(errKey, mapErrors[errKey])]
         : [
-            `${t(errKey, mapErrors[errKey])} ${maxLimitLocation} ${t(
-              'METTERS',
-              'meters',
-            )}`,
-          ],
+          `${t(errKey, mapErrors[errKey])} ${maxLimitLocation} ${t(
+            'METTERS',
+            'meters',
+          )}`,
+        ],
       key: errKey,
     });
   };
@@ -237,9 +237,9 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     MARKERS = locations.map((location: { lat: number; lng: number; level: number }) => {
       return location.level === 4 && driverLocation?.lat
         ? {
-            latitude: driverLocation?.lat,
-            longitude: driverLocation?.lng,
-          }
+          latitude: driverLocation?.lat,
+          longitude: driverLocation?.lng,
+        }
         : { latitude: location.lat, longitude: location.lng };
     })
     fitAllMarkers();
@@ -284,7 +284,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
           onRegionChangeComplete={
             !readOnly
               ? coordinates => handleChangeRegion(coordinates)
-              : () => {}
+              : () => { }
           }
           zoomTapEnabled
           zoomEnabled
@@ -302,12 +302,13 @@ export const GoogleMap = (props: GoogleMapsParams) => {
                     i: number,
                   ) => (
                     <React.Fragment key={i}>
-                      <Marker 
-                        coordinate={location} 
-                        onPress={() => { 
+                      <Marker
+                        coordinate={location}
+                        onPress={() => {
                           mapRef.current?.animateCamera({
-                          center: { latitude: location.latitude, longitude:location.longitude },
-                        })}}
+                            center: { latitude: location?.latitude, longitude: location?.longitude },
+                          })
+                        }}
                       >
                         <Icon
                           name="map-marker"
@@ -328,46 +329,46 @@ export const GoogleMap = (props: GoogleMapsParams) => {
                         <Callout
                           onPress={() => {
                             showLocation({
-                                      latitude: location.latitude,
-                                      longitude: location.longitude,
-                                      sourceLatitude: userLocation.latitude,
-                                      sourceLongitude: userLocation.longitude,
-                                      naverCallerName: 'com.businessapp',
-                                      dialogTitle: t('SHOW_IN_OTHER_MAPS', 'Show in other maps'),
-                                      dialogMessage: t('WHAT_APP_WOULD_YOU_USE', 'What app would you like to use?'),
-                                      cancelText: t('CANCEL', 'Cancel'),
+                              latitude: location?.latitude,
+                              longitude: location?.longitude,
+                              sourceLatitude: userLocation?.latitude,
+                              sourceLongitude: userLocation.longitude,
+                              naverCallerName: 'com.businessapp',
+                              dialogTitle: t('SHOW_IN_OTHER_MAPS', 'Show in other maps'),
+                              dialogMessage: t('WHAT_APP_WOULD_YOU_USE', 'What app would you like to use?'),
+                              cancelText: t('CANCEL', 'Cancel'),
                             })
                           }}
                         >
-                          <View style={{flex: 1,width: 250, paddingRight: 10, paddingLeft: 10, justifyContent:'space-between' }}>
-                              <View style={{flex: 1, marginBottom: 20}}>
-                                <OText size={16} weight={'bold'} style={{paddingTop: 10, marginBottom: 10}}>{locations[i]?.title}</OText>
-                                { locations[i]?.address && (
-                                  <>
-                                    <OText size={16} >{locations[i]?.address.addressName}</OText>
-                                    <OText size={16} >{locations[i]?.address.zipcode}</OText>
-                                  </>
-                                )}
-                              </View>
-                              <OButton
-                                text={t('GO_TO_THIS_LOCATION', 'Go to this location')}
-                                imgRightSrc={null}
-                                textStyle={{
-                                  color: theme.colors.white,
-                                  fontFamily: 'Poppins',
-                                  fontStyle: 'normal',
-                                  fontWeight: 'normal',
-                                  fontSize: 16
-                                }}
-                                style={{
-                                  alignContent:'center',
-                                  borderRadius: 10,
-                                  height: 35,
-                                  bottom:10
-                                }}
-                                bgColor={theme.colors.primary}
-                                borderColor={theme.colors.primary}
-                              />   
+                          <View style={{ flex: 1, width: 250, paddingRight: 10, paddingLeft: 10, justifyContent: 'space-between' }}>
+                            <View style={{ flex: 1, marginBottom: 20 }}>
+                              <OText size={16} weight={'bold'} style={{ paddingTop: 10, marginBottom: 10 }}>{locations[i]?.title}</OText>
+                              {locations[i]?.address && (
+                                <>
+                                  <OText size={16} >{locations[i]?.address.addressName}</OText>
+                                  <OText size={16} >{locations[i]?.address.zipcode}</OText>
+                                </>
+                              )}
+                            </View>
+                            <OButton
+                              text={t('GO_TO_THIS_LOCATION', 'Go to this location')}
+                              imgRightSrc={null}
+                              textStyle={{
+                                color: theme.colors.white,
+                                fontFamily: 'Poppins',
+                                fontStyle: 'normal',
+                                fontWeight: 'normal',
+                                fontSize: 16
+                              }}
+                              style={{
+                                alignContent: 'center',
+                                borderRadius: 10,
+                                height: 35,
+                                bottom: 10
+                              }}
+                              bgColor={theme.colors.primary}
+                              borderColor={theme.colors.primary}
+                            />
                           </View>
                         </Callout>
                       </Marker>