ordering-ui-react-native 0.15.8 → 0.15.9

package/package.json

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

package/src/components/Messages/index.tsx

@@ -6,7 +6,7 @@ import { GiftedChat, Actions, InputToolbar, Composer, Send, Bubble, MessageImage
 import { USER_TYPE } from '../../config/constants'
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 import { OIcon, OIconButton, OText, OButton } from '../shared'
-import { TouchableOpacity, ActivityIndicator, StyleSheet, View, Platform, Keyboard,I18nManager } from 'react-native'
+import { TouchableOpacity, ActivityIndicator, StyleSheet, View, Platform, Keyboard, I18nManager } from 'react-native'
 import { Header, TitleHeader, Wrapper, QuickMessageContainer } from './styles'
 import { MessagesParams } from '../../types'
 
@@ -36,6 +36,8 @@ const ORDER_STATUS: any = {
   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 imgOptions = {
@@ -93,7 +95,7 @@ const MessagesUI = (props: MessagesParams) => {
   }
 
   const handleImagePicker = () => {
-    launchImageLibrary(imgOptions, (response : any) => {
+    launchImageLibrary(imgOptions, (response: any) => {
       if (response.didCancel) {
         // showToast(ToastType.Error, response.errorMessage);
       } else if (response.errorMessage) {
@@ -119,10 +121,10 @@ const MessagesUI = (props: MessagesParams) => {
   const messageConsole = (message: any) => {
     return message.change?.attribute !== 'driver_id'
       ?
-      `${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)])}`
+      `${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.attribute === 'status' ? `${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} ${t('TO', 'to')} ${message.change.new || t('EMPTY', 'Empty')}`
       }`
       : message.change.new
         ?
@@ -133,13 +135,17 @@ const MessagesUI = (props: MessagesParams) => {
 
   useEffect(() => {
     let newMessages: Array<any> = []
-    const console = `${t('ORDER_PLACED_FOR', 'Order placed for')} ${parseDate(order?.created_at)} ${t('VIA', 'Via')} ${order?.app_id ? t(order?.app_id.toUpperCase(), order?.app_id) : t('OTHER', 'Other')}`
+    const consoleText = `${t('ORDER_PLACED_FOR', 'Order placed for')} ${parseDate(order?.created_at)} ${t('VIA', 'Via')} ${order?.app_id ? t(order?.app_id.toUpperCase(), order?.app_id) : t('OTHER', 'Other')}`
     const firstMessage = {
       _id: 0,
-      text: console,
+      text: consoleText,
       createdAt: order?.created_at,
-      system: true
+      system: true,
+      user: {
+        _id: 0
+      }
     }
+
     messages.messages.map((message: any) => {
       let newMessage
       if (message.type !== 0 && (messagesToShow?.messages?.length || (message?.can_see?.includes('2')) || (message?.can_see?.includes('4') && type === USER_TYPE.DRIVER))) {
@@ -159,7 +165,9 @@ const MessagesUI = (props: MessagesParams) => {
       if (message.type === 0) {
         newMessage = firstMessage
       }
-      newMessages = [...newMessages, newMessage]
+      if (newMessage) {
+        newMessages = [...newMessages, newMessage]
+      }
     })
     setFormattedMessages([...newMessages.reverse()])
   }, [messages.messages.length])
@@ -177,7 +185,7 @@ const MessagesUI = (props: MessagesParams) => {
     }
   }, [])
 
-  const RenderActions = (props : any) => {
+  const RenderActions = (props: any) => {
     return (
       <Actions
         {...props}
@@ -210,7 +218,7 @@ const MessagesUI = (props: MessagesParams) => {
     )
   }
 
-  const renderInputToolbar = (props : any) => (
+  const renderInputToolbar = (props: any) => (
     <InputToolbar
       {...props}
       containerStyle={{
@@ -271,7 +279,7 @@ const MessagesUI = (props: MessagesParams) => {
         <OText size={14}>{t('NOT_SEND_MESSAGES', 'You can\'t send messages because the order has ended')}</OText>
       </View>
     ) : (
-      <View style={{flexDirection: 'row', width: '80%'}}>
+      <View style={{ flexDirection: 'row', width: '80%' }}>
         <Composer
           {...props}
           textInputStyle={{
@@ -308,20 +316,20 @@ const MessagesUI = (props: MessagesParams) => {
       alwaysShowSend
       containerStyle={styles.containerSend}
     >
-        <OIconButton
-          onClick={onSubmit}
-          style={{
-            height: 32,
-            borderRadius: 25,
-            opacity: (sendMessage?.loading || (message === '' && !image) || messages?.loading) ? 0.4 : 1,
-            borderColor: theme.colors.primary,
-          }}
-          iconStyle={{ marginTop: 3, marginRight: 2 }}
-          icon={!sendMessage?.loading ? paperIcon : undefined}
-          RenderIcon={sendMessage?.loading ? () => <ActivityIndicator size='small' color={theme.colors.primary} /> : undefined}
-          disabled={(sendMessage?.loading || (message === '' && !image) || messages?.loading)}
-          disabledColor={theme.colors.white}
-        />
+      <OIconButton
+        onClick={onSubmit}
+        style={{
+          height: 32,
+          borderRadius: 25,
+          opacity: (sendMessage?.loading || (message === '' && !image) || messages?.loading) ? 0.4 : 1,
+          borderColor: theme.colors.primary,
+        }}
+        iconStyle={{ marginTop: 3, marginRight: 2 }}
+        icon={!sendMessage?.loading ? paperIcon : undefined}
+        RenderIcon={sendMessage?.loading ? () => <ActivityIndicator size='small' color={theme.colors.primary} /> : undefined}
+        disabled={(sendMessage?.loading || (message === '' && !image) || messages?.loading)}
+        disabledColor={theme.colors.white}
+      />
     </Send>
   )
 
@@ -338,7 +346,7 @@ const MessagesUI = (props: MessagesParams) => {
       }}
       wrapperStyle={{
         left: { backgroundColor: '#f7f7f7', padding: 5, borderBottomLeftRadius: 0 },
-        right: { backgroundColor: theme.colors.primary, padding: 5, borderBottomRightRadius: 0}
+        right: { backgroundColor: theme.colors.primary, padding: 5, borderBottomRightRadius: 0 }
       }}
     />
   )
@@ -357,7 +365,7 @@ const MessagesUI = (props: MessagesParams) => {
     <>
       <Wrapper>
         <Header>
-         <OIcon
+          <OIcon
             url={type === USER_TYPE.DRIVER ? order?.driver?.photo : order?.business?.logo}
             width={60}
             height={60}
@@ -415,7 +423,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     marginHorizontal: 4
   },
-  editButton : {
+  editButton: {
     borderRadius: 50,
     backgroundColor: '#E9ECEF',
     marginRight: 10,

package/src/components/OrderDetails/index.tsx

@@ -387,7 +387,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   <OText style={{ textAlign: 'left' }}>{order?.delivery_option?.name}</OText>
                 </View>
               )}
-              {order?.comment && (
+              {!!order?.comment && (
                 <View>
                   <OText size={18} style={{ textAlign: 'left' }} >{t('COMMENT', 'Comment')}</OText>
                   <OText style={{ textAlign: 'left' }}>{order?.comment}</OText>

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

@@ -94,8 +94,8 @@ const ChatUI = (props: MessagesParams) => {
     Dimensions.get('window').width < Dimensions.get('window').height
       ? parseInt(parseFloat(String(Dimensions.get('window').width)).toFixed(0))
       : parseInt(
-          parseFloat(String(Dimensions.get('window').height)).toFixed(0),
-        );
+        parseFloat(String(Dimensions.get('window').height)).toFixed(0),
+      );
 
   const [orientation, setOrientation] = useState<string>(
     Dimensions.get('window').width < Dimensions.get('window').height
@@ -218,7 +218,7 @@ const ChatUI = (props: MessagesParams) => {
       paddingLeft: 12,
       paddingRight: 5,
     },
-    editButton : {
+    editButton: {
       borderRadius: 50,
       backgroundColor: '#E9ECEF',
       marginRight: 10,
@@ -366,15 +366,18 @@ const ChatUI = (props: MessagesParams) => {
           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'
-      }`;
+      return `${hour < 10 ? '0' + hour : hour}:${min < 10 ? '0' + min : min} ${status > 60 ? 'hours' : 'minutes'
+        }`;
     }
   };
 
@@ -400,30 +403,27 @@ const ChatUI = (props: MessagesParams) => {
           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(
+              message.change.attribute.toUpperCase(),
+              message.change.attribute,
+            )} ${t('CHANGED_FROM', 'Changed from')} ${message.change.old !== null
+              ? t(
                 getStatus(
-                  parseInt(message.change.new, 10),
+                  parseInt(message.change.old, 10),
                   message.change?.attribute,
                 ),
-              )}`
+              )
+              : '0'
+            } ${t('TO', 'to')} ${t(
+              getStatus(
+                parseInt(message.change.new, 10),
+                message.change?.attribute,
+              ),
+            )}`
             : 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 : ''
+              ? `${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')}`}
+              : `${t('DRIVER_UNASSIGNED', 'Driver unassigned')}`}
         </OText>
         <OText size={10} color={'#aaa'} style={{ alignSelf: 'flex-start' }}>
           {parseTime(message?.created_at, { outputFormat: 'hh:mma' })}
@@ -928,8 +928,8 @@ const ChatUI = (props: MessagesParams) => {
           borderWidth: 0,
           opacity:
             sendMessage?.loading ||
-            (message === '' && !image) ||
-            messages?.loading
+              (message === '' && !image) ||
+              messages?.loading
               ? 0.6
               : 1,
           borderColor: theme.colors.transparent,
@@ -1034,7 +1034,7 @@ const ChatUI = (props: MessagesParams) => {
               <OIcon
                 url={optimizeImage(
                   order?.customer?.photo ||
-                    theme?.images?.dummies?.customerPhoto,
+                  theme?.images?.dummies?.customerPhoto,
                   'h_300,c_limit',
                 )}
                 style={styles.avatarIcon}
@@ -1141,7 +1141,7 @@ const ChatUI = (props: MessagesParams) => {
           backgroundColor={theme.colors.composerView}
           onEnd={handleEnd}
         />
-         <TouchableOpacity
+        <TouchableOpacity
           style={{
             position: 'absolute',
             right: 35,

package/themes/original/src/components/Messages/index.tsx

@@ -35,6 +35,8 @@ const ORDER_STATUS: any = {
 	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']