ordering-ui-react-native 0.16.83 → 0.16.84

package/package.json

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

package/src/components/BusinessProductsList/index.tsx

@@ -68,9 +68,9 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
 
       {
         !category.id && categories && categories.filter(category => category.id !== null).map((category, i, _categories) => {
-          const products = categoryState.products?.filter((product: any) => product.category_id === category.id) || []
+          const products = categoryState.products?.filter((product: any) => category?.children?.some((cat: any) => cat?.category_id === product?.category_id)) || []
           return (
-            <View key={category.id} style={{alignItems: 'flex-start', flex:1}}>
+            <View key={category.id} style={{ alignItems: 'flex-start', flex: 1 }}>
               {
                 products.length > 0 && (
                   <>
@@ -104,8 +104,8 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                 <View style={{ flexDirection: 'row' }}>
                   <PlaceholderLine width={24} height={70} style={{ marginRight: 10, marginBottom: 10 }} />
                   <Placeholder style={{ paddingVertical: 10 }}>
-                      <PlaceholderLine width={60} style={{marginBottom: 25}}/>
-                      <PlaceholderLine width={20} />
+                    <PlaceholderLine width={60} style={{ marginBottom: 25 }} />
+                    <PlaceholderLine width={20} />
                   </Placeholder>
                 </View>
               </Placeholder>

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

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState } from 'react';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import {
 	BusinessController as BusinessSingleCard,
@@ -59,7 +59,6 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 	const [, t] = useLanguage();
 	const theme = useTheme()
 	const [isIntersectionObserver, setIsIntersectionObserver] = useState(!enableIntersection)
-	const fadeAnim = useRef(new Animated.Value(0)).current;
 
 	const styles = StyleSheet.create({
 		headerStyle: {
@@ -146,23 +145,10 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 		}
 	}
 
-	const fadeIn = () => {
-    Animated.timing(fadeAnim, {
-      toValue: 1,
-      duration: 500,
-			useNativeDriver: true
-    }).start();
-  };
-
 	const handleChangeInterSection = (inView: boolean) => {
 		setIsIntersectionObserver(inView)
-		fadeIn()
 	}
 
-	useEffect(() => {
-		if (!enableIntersection) fadeIn()
-	}, [enableIntersection])
-
 	return (
 		<InView style={{ minHeight: 200 }} triggerOnce={true} onChange={(inView: boolean) => handleChangeInterSection(inView)}>
 			{isIntersectionObserver ? (
@@ -186,13 +172,6 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 						</RibbonBox>
 					)}
 					<BusinessHero>
-					<Animated.View
-						style={[
-							{
-								opacity: fadeAnim
-							}
-						]}
-					>
 						<FastImage
 							style={{ height: 120 }}
 							source={{
@@ -201,7 +180,6 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 							}}
 							resizeMode={FastImage.resizeMode.cover}
 						/>
-					</Animated.View>
 						{(businessFeatured ?? business?.featured) && (
 							<View style={styles.featured}>
 								<FontAwesomeIcon name="crown" size={26} color="gold" />

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

@@ -41,10 +41,10 @@ export const BusinessItemAccordion = (props: any) => {
 	useEffect(() => {
 		const cartsArray = Object.values(orderState?.carts)
 		const cartsLength = cartsArray.filter((cart: any) => cart.products.length > 0).length ?? 0
-		if ((cartsLength === 1) && !isClosed) {
-			setActiveState(true)
+		if (cartsLength === 1) {
+			setActiveState(!isClosed)
 		}
-	}, [orderState?.carts])
+	}, [orderState?.carts, isClosed])
 
 	return (
 		<BIContainer isClosed={isClosed} isMultiCheckout={isMultiCheckout} checkoutVisible={!isActive && !isClosed && !!isProducts && !checkoutButtonDisabled}>

package/themes/original/src/components/BusinessListingSearch/BusinessControllerSkeletons/index.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import { View } from 'react-native'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
+
+export const BusinessControllerSkeletons = ({ paginationProps }: any) => {
+  return (
+    <>
+      {[
+        ...Array(
+          paginationProps.nextPageItems
+            ? paginationProps.nextPageItems
+            : 3,
+        ).keys(),
+      ].map((item, i) => (
+        <Placeholder
+          Animation={Fade}
+          key={i}
+          style={{ width: 320, marginRight: 20, marginTop: 20 }}>
+          <View style={{ width: 320 }}>
+            <PlaceholderLine
+              height={155}
+              style={{ marginBottom: 20, borderRadius: 25 }}
+            />
+            <View style={{ paddingHorizontal: 10 }}>
+              <View
+                style={{
+                  flexDirection: 'row',
+                  justifyContent: 'space-between',
+                }}>
+                <PlaceholderLine
+                  height={25}
+                  width={40}
+                  style={{ marginBottom: 10 }}
+                />
+                <PlaceholderLine
+                  height={25}
+                  width={20}
+                  style={{ marginBottom: 10 }}
+                />
+              </View>
+              <PlaceholderLine
+                height={20}
+                width={30}
+                style={{ marginBottom: 10 }}
+              />
+              <PlaceholderLine
+                height={20}
+                width={80}
+                style={{ marginBottom: 0 }}
+              />
+            </View>
+          </View>
+        </Placeholder>
+      ))}
+    </>
+  )
+}

package/themes/original/src/components/BusinessListingSearch/MaxSectionItem/index.tsx

@@ -0,0 +1,59 @@
+import { useLanguage, useUtils } from 'ordering-components/native'
+import React from 'react'
+import { View, TouchableOpacity, StyleSheet } from 'react-native'
+import { OText } from '../../shared'
+
+import { ProgressContentWrapper, ProgressBar } from './styles'
+
+export const MaxSectionItem = (props: any) => {
+    const {
+        filters,
+        handleChangeFilters,
+        title,
+        options,
+        filter
+    } = props
+
+    const [, t] = useLanguage()
+    const [{ parsePrice }] = useUtils();
+
+    const styles = StyleSheet.create({
+        maxContainer: {
+            flexDirection: 'row',
+            justifyContent: 'space-between'
+        }
+    });
+
+    const parseValue = (option: number) => {
+        return filter === 'max_distance'
+            ? `${option / 1000} ${t('KM', 'Km')}`
+            : filter === 'max_eta'
+                ? `${option} ${t('MIN', 'min')}`
+                : parsePrice(option)
+    }
+    return (
+        <View style={{ marginBottom: 20 }}>
+            <OText weight='bold' mBottom={10} size={16}>
+                {title}
+            </OText>
+            <ProgressContentWrapper>
+                <ProgressBar style={{ width: `${((options.indexOf(filters?.[filter]) / 3) * 100) ?? 100}%` }} />
+            </ProgressContentWrapper>
+            <View style={styles.maxContainer}>
+                {options.map((option: any, i: number) => (
+                    <TouchableOpacity
+                        onPress={() => handleChangeFilters(filter, option)}
+                        key={option}
+                    >
+                        <OText
+                            size={12}
+                            weight={filters?.[filter] === option || (option === 'default' && (filters?.[filter] === 'default' || !filters?.[filter])) ? 'bold' : '500'}
+                        >
+                            {option === 'default' ? `${parseValue(options[i - 1])}+` : parseValue(option)}
+                        </OText>
+                    </TouchableOpacity>
+                ))}
+            </View>
+        </View>
+    )
+}

package/themes/original/src/components/BusinessListingSearch/MaxSectionItem/styles.tsx

@@ -0,0 +1,13 @@
+import styled from 'styled-components/native';
+
+export const ProgressBar = styled.View`
+  height: 4px;
+  background: ${(props: any) => props.theme.colors.textNormal};
+`
+
+export const ProgressContentWrapper = styled.View`
+  height: 4px;
+  background: #F8F9FA;
+  margin-bottom: 10px;
+  flex: 1;
+`

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

@@ -3,7 +3,7 @@ import { useLanguage, BusinessSearchList, useOrder, useUtils, showToast, ToastTy
 import { ScrollView, StyleSheet, TouchableOpacity, Platform, View, Dimensions } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from 'styled-components/native'
-import { OButton, OIcon, OModal, OText } from '../shared'
+import { OButton, OModal, OText } from '../shared'
 import { SearchBar } from '../SearchBar';
 import { BusinessController } from '../BusinessController'
 import { NotFoundSource } from '../NotFoundSource'
@@ -19,14 +19,13 @@ import {
   Metadata,
   SingleBusinessContainer,
   LoadMoreBusinessContainer,
-  ProgressContentWrapper,
-  ProgressBar,
   TagsContainer,
   SortContainer,
   BrandContainer,
   BrandItem,
   PriceFilterWrapper,
-  OptionTitle
+  OptionTitle,
+  BContainer
 } from './styles'
 import FastImage from 'react-native-fast-image'
 import { convertHoursToMinutes } from '../../utils'
@@ -34,8 +33,8 @@ import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
 import { BusinessSearchParams } from '../../types'
 import { MyOrders } from '../MyOrders'
 import { useIsFocused } from '@react-navigation/native';
-
-
+import { MaxSectionItem } from './MaxSectionItem'
+import { BusinessControllerSkeletons } from './BusinessControllerSkeletons'
 export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
   const {
     navigation,
@@ -101,10 +100,6 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
     productsContainer: {
       marginTop: 20
     },
-    maxContainer: {
-      flexDirection: 'row',
-      justifyContent: 'space-between'
-    },
     businessTypesContainer: {
       width: '100%',
       flexDirection: 'row',
@@ -220,116 +215,16 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
     handleSearchbusinessAndProducts(true)
   }, [])
 
-  
+
   useEffect(() => {
     handleChangeTermValue('')
   }, [isFocused])
 
-  const MaxSectionItem = ({ title, options, filter }: any) => {
-    const parseValue = (option: number) => {
-      return filter === 'max_distance'
-        ? `${option / 1000} ${t('KM', 'Km')}`
-        : filter === 'max_eta'
-          ? `${option} ${t('MIN', 'min')}`
-          : parsePrice(option)
-    }
-    return (
-      <View style={{ marginBottom: 20 }}>
-        <OText weight='bold' mBottom={10} size={16}>
-          {title}
-        </OText>
-        <ProgressContentWrapper>
-          <ProgressBar style={{ width: `${((options.indexOf(filters?.[filter]) / 3) * 100) ?? 100}%` }} />
-        </ProgressContentWrapper>
-        <View style={styles.maxContainer}>
-          {options.map((option: any, i: number) => (
-            <TouchableOpacity
-              onPress={() => handleChangeFilters(filter, option)}
-              key={option}
-            >
-              <OText
-                size={12}
-                weight={filters?.[filter] === option || (option === 'default' && (filters?.[filter] === 'default' || !filters?.[filter])) ? 'bold' : '500'}
-              >
-                {option === 'default' ? `${parseValue(options[i - 1])}+` : parseValue(option)}
-              </OText>
-            </TouchableOpacity>
-          ))}
-        </View>
-      </View>
-    )
-  }
-
-  const BusinessControllerSkeletons = () => {
-    return (
-      <>
-        {[
-          ...Array(
-            paginationProps.nextPageItems
-              ? paginationProps.nextPageItems
-              : 3,
-          ).keys(),
-        ].map((item, i) => (
-          <Placeholder
-            Animation={Fade}
-            key={i}
-            style={{ width: 320, marginRight: 20, marginTop: 20 }}>
-            <View style={{ width: 320 }}>
-              <PlaceholderLine
-                height={155}
-                style={{ marginBottom: 20, borderRadius: 25 }}
-              />
-              <View style={{ paddingHorizontal: 10 }}>
-                <View
-                  style={{
-                    flexDirection: 'row',
-                    justifyContent: 'space-between',
-                  }}>
-                  <PlaceholderLine
-                    height={25}
-                    width={40}
-                    style={{ marginBottom: 10 }}
-                  />
-                  <PlaceholderLine
-                    height={25}
-                    width={20}
-                    style={{ marginBottom: 10 }}
-                  />
-                </View>
-                <PlaceholderLine
-                  height={20}
-                  width={30}
-                  style={{ marginBottom: 10 }}
-                />
-                <PlaceholderLine
-                  height={20}
-                  width={80}
-                  style={{ marginBottom: 0 }}
-                />
-              </View>
-            </View>
-          </Placeholder>
-        ))}
-      </>
-    )
-  }
-
   return (
-    <ScrollView style={styles.container}>
-      <WrapHeader style={{ paddingTop: top + 20, marginVertical: 2 }}>
-        <OText
-          size={20}
-          mBottom={15}
-          weight='bold'
-          style={{ marginTop: 10 }}
-        >
-          {t('SEARCH', 'Search')}
-        </OText>
-      </WrapHeader>
+    <BContainer>
       <SearchWrapper>
         {isFocused && (
           <SearchBar
-            autoFocus
             lazyLoad
             inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
             placeholder={`${t('SEARCH_BUSINESSES', 'Search Businesses')} / ${t('TYPE_AT_LEAST_3_CHARACTERS', 'type at least 3 characters')}`}
@@ -348,12 +243,13 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
           </View>
         )
       }
-      {businessesSearchList.businesses?.length > 0 && (
+      {businessesSearchList.businesses?.length > 0 && termValue?.length === 0 && (
         <MyOrders
           hideOrders
           businessesSearchList={businessesSearchList}
           onNavigationRedirect={onNavigationRedirect}
           BusinessControllerSkeletons={BusinessControllerSkeletons}
+          businessPaginationProps={paginationProps}
         />
       )}
 
@@ -387,7 +283,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
           </LoadMoreBusinessContainer>
         )}
         {businessesSearchList.loading && (
-          <BusinessControllerSkeletons />
+          <BusinessControllerSkeletons paginationProps={paginationProps} />
         )}
       </ScrollView>
       <ProductsList>
@@ -630,7 +526,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
           onClick={() => handleApplyFilters()}
         />
       </OModal>
-    </ScrollView>
+    </BContainer>
   )
 }
 

package/themes/original/src/components/BusinessListingSearch/styles.tsx

@@ -1,5 +1,9 @@
 import styled, { css } from 'styled-components/native'
 
+export const BContainer = styled.View`
+  padding: 20px 40px;
+`
+
 export const WrapHeader = styled.View`
   width: 100%;
 	padding-vertical: 20px;
@@ -55,18 +59,6 @@ export const LoadMoreBusinessContainer = styled.View`
   margin-left: 20px;
 `
 
-export const ProgressBar = styled.View`
-  height: 4px;
-  background: ${(props: any) => props.theme.colors.textNormal};
-`
-
-export const ProgressContentWrapper = styled.View`
-  height: 4px;
-  background: #F8F9FA;
-  margin-bottom: 10px;
-  flex: 1;
-`
-
 export const TagsContainer = styled.View`
   padding-bottom: 10px;
 `

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

@@ -91,6 +91,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
           navigation={navigation}
           handleUpdateProducts={handleUpdateProducts}
           currentCart={currentCart}
+          searchValue={searchValue}
         />
       )}
       {category.id &&

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

@@ -30,10 +30,10 @@ export const CartContent = (props: any) => {
 							{cart.products.length > 0 && (
 								<>
 									<Cart
-                    singleBusiness={props.singleBusiness}
-                    isFranchiseApp={props.isFranchiseApp}
+										singleBusiness={props.singleBusiness}
+										isFranchiseApp={props.isFranchiseApp}
 										cart={cart}
-                    cartuuid={cart.uuid}
+										cartuuid={cart.uuid}
 										onNavigationRedirect={props.onNavigationRedirect}
 										isCartsLoading={isCartsLoading}
 										setIsCartsLoading={setIsCartsLoading}

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

@@ -3,7 +3,8 @@ import { useLanguage } from 'ordering-components/native'
 import { HelpAccountAndPaymentParams } from '../../types'
 import { OText, OButton, OIcon } from '../shared'
 import { useTheme } from 'styled-components/native'
-import { StyleSheet } from 'react-native'
+import { StyleSheet, TouchableOpacity } from 'react-native'
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 import {
   Content
@@ -38,10 +39,14 @@ export const HelpAccountAndPayment = (props: HelpAccountAndPaymentParams) => {
   return (
     <>
       <OButton
-        imgLeftSrc={theme.images.general.arrow_left}
         imgRightSrc={null}
         style={styles.btnBackArrow}
         onClick={() => goToBack()}
+        icon={AntDesignIcon}
+        iconProps={{
+          name: 'arrowleft',
+          size: 26
+        }}
       />
       <OText size={22} weight={600}>{t('ACCOUNT_PAYMENT_OPTIONS', 'Account and Payment Options')}</OText>
       <Content>
@@ -65,4 +70,4 @@ export const HelpAccountAndPayment = (props: HelpAccountAndPaymentParams) => {
       </Content>
     </>
   )
-}
+}

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

@@ -3,10 +3,11 @@ import { useLanguage } from 'ordering-components/native'
 import { HelpGuideParams } from '../../types'
 import { OText, OButton, OIcon } from '../shared'
 import { useTheme } from 'styled-components/native'
-import { StyleSheet } from 'react-native'
+import { StyleSheet, TouchableOpacity } from 'react-native'
 import {
   Content
 } from './styles'
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 export const HelpGuide = (props: HelpGuideParams) => {
   const {
@@ -37,10 +38,14 @@ export const HelpGuide = (props: HelpGuideParams) => {
   return (
     <>
       <OButton
-        imgLeftSrc={theme.images.general.arrow_left}
         imgRightSrc={null}
         style={styles.btnBackArrow}
         onClick={() => goToBack()}
+        icon={AntDesignIcon}
+        iconProps={{
+          name: 'arrowleft',
+          size: 26
+        }}
       />
       <OText size={22} weight={600}>{t('GUIDE_TO_ORDERING', 'Guide to Ordering')}</OText>
       <Content>
@@ -64,4 +69,4 @@ export const HelpGuide = (props: HelpGuideParams) => {
       </Content>
     </>
   )
-}
+}

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

@@ -3,8 +3,9 @@ import { useLanguage } from 'ordering-components/native'
 import { HelpOrderParams } from '../../types'
 import { OText, OButton, OIcon } from '../shared'
 import { useTheme } from 'styled-components/native'
-import { StyleSheet } from 'react-native'
+import { StyleSheet, TouchableOpacity } from 'react-native'
 import { WebView } from 'react-native-webview'
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 import {
   Content
@@ -42,10 +43,14 @@ export const HelpOrder = (props: HelpOrderParams) => {
   return (
     <>
       <OButton
-        imgLeftSrc={theme.images.general.arrow_left}
         imgRightSrc={null}
         style={styles.btnBackArrow}
         onClick={() => goToBack()}
+        icon={AntDesignIcon}
+        iconProps={{
+          name: 'arrowleft',
+          size: 26
+        }}
       />
       <OText size={22} weight={600}>{t('HELP_WITH_ORDER', 'Help with an order')}</OText>
       <Content>
@@ -76,4 +81,4 @@ export const HelpOrder = (props: HelpOrderParams) => {
       </Content>
     </>
   )
-}
+}

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

@@ -5,6 +5,7 @@ import { launchImageLibrary } from 'react-native-image-picker'
 import { GiftedChat, Actions, ActionsProps, InputToolbar, Composer, Send, Bubble, MessageImage, InputToolbarProps, ComposerProps } from 'react-native-gifted-chat'
 import { USER_TYPE } from '../../config/constants'
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 import { OIcon, OIconButton, OText, OButton } from '../shared'
 import { TouchableOpacity, ActivityIndicator, StyleSheet, View, Platform, Keyboard } from 'react-native'
 import { Header, TitleHeader, Wrapper, QuickMessageContainer, ProfileMessageHeader, MessageTypeItem } from './styles'
@@ -36,7 +37,7 @@ const ORDER_STATUS: any = {
 	20: 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS',
 	21: 'ORDER_CUSTOMER_ARRIVED_BUSINESS',
 	22: 'ORDER_LOOKING_FOR_DRIVER',
-  	23: 'ORDER_DRIVER_ON_WAY'
+	23: 'ORDER_DRIVER_ON_WAY'
 }
 
 const filterSpecialStatus = ['prepared_in', 'delivered_in', 'delivery_datetime']
@@ -122,18 +123,17 @@ 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)])}`
-		  }`
-		  : 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')}`
-	  }
+			`${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')}`
+	}
 
 	useEffect(() => {
 		let newMessages: Array<any> = []
@@ -402,7 +402,9 @@ const MessagesUI = (props: MessagesParams) => {
 			<Wrapper>
 				{!isMeesageListing ? (
 					<Header>
-						<OIconButton icon={theme.images.general.arrow_left} style={{ paddingStart: 10, borderColor: theme.colors.clear }} onClick={onClose} />
+						<TouchableOpacity onPress={onClose} style={{ paddingStart: 10, borderColor: theme.colors.clear }}>
+							<AntDesignIcon name='arrowleft' size={26} />
+						</TouchableOpacity>
 						<View style={{ marginRight: 10, shadowColor: theme.colors.black, shadowOpacity: 0.1, shadowOffset: { width: 0, height: 1 }, shadowRadius: 2 }}>
 							<OIcon
 								url={type === USER_TYPE.DRIVER ? order?.driver?.photo : order?.business?.logo}
@@ -419,10 +421,8 @@ const MessagesUI = (props: MessagesParams) => {
 				) : (
 					<ProfileMessageHeader>
 						<View style={{ ...styles.headerTitle }}>
-							<TouchableOpacity
-								style={styles.headerItem}
-								onPress={onClose}>
-								<OIcon src={theme.images.general.arrow_left} width={16} />
+							<TouchableOpacity onPress={onClose} style={styles.headerItem}>
+								<AntDesignIcon name='arrowleft' size={26} />
 							</TouchableOpacity>
 							<OText size={18}>{t('ORDER', theme?.defaultLanguages?.ORDER || 'Order')} #{order?.id}</OText>
 						</View>