ordering-ui-react-native 0.12.76 → 0.12.80

package/themes/doordash/src/components/BusinessesListing/index.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
+import Geolocation from '@react-native-community/geolocation'
 import { View, StyleSheet, ScrollView, Platform, PanResponder, I18nManager, TouchableOpacity } from 'react-native'
 import {
 	BusinessList as BusinessesListingController,
@@ -11,7 +12,7 @@ import {
 	ToastType, useToast
 } from 'ordering-components/native'
 
-import { Search, AddressInput, HeaderCont, FeaturedBussiCont } from './styles'
+import { Search, AddressInput, HeaderCont, FeaturedBussiCont, FarAwayMessage } from './styles'
 
 import { useTheme } from 'styled-components/native'
 import { SearchBar } from '../SearchBar'
@@ -21,6 +22,8 @@ import { NotFoundSource } from '../NotFoundSource'
 import { BusinessTypeFilter } from '../BusinessTypeFilter'
 import { BusinessController } from '../BusinessController'
 import BusinessesSortBy from '../BusinessesSortBy'
+import { getDistance } from '../../utils'
+import Ionicons from 'react-native-vector-icons/Ionicons'
 
 const PIXELS_TO_SCROLL = 1200
 
@@ -44,6 +47,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 
 	const [businesses, setBusinesses] = useState(businessesList?.businesses || []);
 	const [hasFeatured, setHasFeatured] = useState(false);
+	const [isFarAway, setIsFarAway] = useState(false);
 
 	const theme = useTheme();
 
@@ -75,6 +79,15 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			borderColor: theme.colors.backgroundGray,
 			borderWidth: 1,
 			borderRadius: 40,
+		},
+		iconStyle: {
+			fontSize: 18,
+			color: theme.colors.warning5,
+			marginRight: 8
+		},
+		farAwayMsg: {
+			paddingVertical: 6,
+			paddingHorizontal: 20
 		}
 	})
 
@@ -145,6 +158,19 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		}
 	}, [businesses])
 
+	useEffect(() => {
+		Geolocation.getCurrentPosition((pos) => {
+      const crd = pos.coords
+      const distance = getDistance(crd.latitude, crd.longitude, orderState?.options?.address?.location?.lat, orderState?.options?.address?.location?.lng)
+      if (distance > 20) setIsFarAway(true)
+			else setIsFarAway(false)
+    }, (err) => {
+      console.log(`ERROR(${err.code}): ${err.message}`)
+    }, {
+      enableHighAccuracy: true, timeout: 15000, maximumAge: 10000
+    })
+  }, [orderState?.options?.address?.location])
+
 	return (
 		<ScrollView style={styles.container} onScroll={(e) => handleScroll(e)} scrollEventThrottle={50}>
 			<HeaderCont>
@@ -168,6 +194,12 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				</AddressInput>
 			</HeaderCont>
 			<View style={{ height: 1, backgroundColor: theme.colors.border, marginHorizontal: -40 }} />
+			{isFarAway && (
+				<FarAwayMessage style={styles.farAwayMsg}>
+					<Ionicons name='md-warning-outline' style={styles.iconStyle} />
+					<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'Your are far from this address')}</OText>
+				</FarAwayMessage>
+			)}
 			{!auth && (
 				<Search>
 					<SearchBar

package/themes/doordash/src/components/BusinessesListing/styles.tsx

@@ -55,4 +55,14 @@ export const HeaderCont = styled.View`
 export const FeaturedBussiCont = styled.ScrollView`
 	min-height: 190px;
 	margin-horizontal: -40px;
-`;
+`;
+
+export const FarAwayMessage = styled.View`
+  flex-direction: row;
+  align-items: center;
+	background-color: ${(props: any) => props.theme.colors.warning1};
+  margin-top: -5px;
+  border-radius: 7.6px;
+  border: 1px solid ${(props: any) => props.theme.colors.warning5};
+  width: 100%;
+`

package/themes/doordash/src/utils/index.tsx

@@ -163,3 +163,30 @@ export const transformCountryCode = (countryCode : number) => {
     return parser(value)
   }
 }
+
+/**
+ * Function to transform degree to radian
+ * @param {number} value for transform
+ *
+ */
+ export const convertToRadian = (value: number) => {
+  return value * Math.PI / 180
+}
+
+/**
+ * Function to distance between two locations
+ * @param lat1 Lat for first location
+ * @param lon1 Lon for first location
+ * @param lat2 Lat for second location
+ * @param lon2 Lon for second location
+ */
+export const getDistance = (lat1: any, lon1: any, lat2: any, lon2: any) => {
+  const R = 6371 // km
+  const dLat = convertToRadian(lat2 - lat1)
+  const dLon = convertToRadian(lon2 - lon1)
+  const curLat1 = convertToRadian(lat1)
+  const curLat2 = convertToRadian(lat2)
+  const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(curLat1) * Math.cos(curLat2)
+  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
+  return R * c
+}

package/themes/instacart/src/components/BusinessesListing/index.tsx

@@ -1,5 +1,6 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
+import Geolocation from '@react-native-community/geolocation'
 import { View, StyleSheet, ScrollView, Platform, PanResponder, I18nManager } from 'react-native'
 import MaterialComIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 import {
@@ -13,7 +14,7 @@ import {
 	useToast
 } from 'ordering-components/native'
 
-import { WelcomeTitle, Search, OrderControlContainer, AddressInput, WrapMomentOption } from './styles'
+import { WelcomeTitle, Search, OrderControlContainer, AddressInput, WrapMomentOption, FarAwayMessage } from './styles'
 
 import NavBar from '../NavBar'
 import { SearchBar } from '../SearchBar'
@@ -24,6 +25,8 @@ import { BusinessTypeFilter } from '../BusinessTypeFilter'
 import { BusinessController } from '../BusinessController'
 import { OrderTypeSelector } from '../OrderTypeSelector'
 import { useTheme } from 'styled-components/native'
+import { getDistance } from '../../utils'
+import Ionicons from 'react-native-vector-icons/Ionicons'
 
 const PIXELS_TO_SCROLL = 1200
 
@@ -60,12 +63,22 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			flexDirection: 'row',
 			alignItems: 'center',
 			marginBottom: 10,
+			marginTop: 10,
 			zIndex: 100
 		},
 		borderStyle: {
 			borderColor: theme.colors.backgroundGray,
 			borderWidth: 1,
 			borderRadius: 10,
+		},
+		iconStyle: {
+			fontSize: 18,
+			color: theme.colors.warning5,
+			marginRight: 8
+		},
+		farAwayMsg: {
+			paddingVertical: 6,
+			paddingHorizontal: 20
 		}
 	})
 
@@ -75,6 +88,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	const [{ configs }] = useConfig()
 	const [{ parseDate }] = useUtils()
 	const [, { showToast }] = useToast()
+	const [isFarAway, setIsFarAway] = useState(false)
 
 	const configTypes = configs?.order_types_allowed?.value.split('|').map((value: any) => Number(value)) || []
 
@@ -95,6 +109,19 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		return fBusiness !== undefined && fBusiness !== null;
 	}
 
+	useEffect(() => {
+		Geolocation.getCurrentPosition((pos) => {
+      const crd = pos.coords
+      const distance = getDistance(crd.latitude, crd.longitude, orderState?.options?.address?.location?.lat, orderState?.options?.address?.location?.lng)
+      if (distance > 20) setIsFarAway(true)
+			else setIsFarAway(false)
+    }, (err) => {
+      console.log(`ERROR(${err.code}): ${err.message}`)
+    }, {
+      enableHighAccuracy: true, timeout: 15000, maximumAge: 10000
+    })
+  }, [orderState?.options?.address?.location])
+
 	return (
 		<ScrollView style={styles.container} contentContainerStyle={{ paddingHorizontal: 40 }} onScroll={(e: any) => handleScroll(e)}>
 			{!auth && (
@@ -125,7 +152,12 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 						{orderState?.options?.address?.address}
 					</OText>
 				</AddressInput>
-
+				{isFarAway && (
+					<FarAwayMessage style={styles.farAwayMsg}>
+						<Ionicons name='md-warning-outline' style={styles.iconStyle} />
+						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'Your are far from this address')}</OText>
+					</FarAwayMessage>
+				)}
 				<View style={styles.wrapperOrderOptions}>
 					<OrderTypeSelector configTypes={configTypes} />
 					<WrapMomentOption

package/themes/instacart/src/components/BusinessesListing/styles.tsx

@@ -25,7 +25,6 @@ export const AddressInput = styled.TouchableOpacity`
   border-radius: 3px;
   align-items: center;
   padding-vertical: 4px;
-  margin-bottom: 10px;
   flex: 1;
   width: 100%;
   z-index: -10;
@@ -50,3 +49,14 @@ export const WrapMomentOption = styled.TouchableOpacity`
   margin-start: 15px;
   min-height: 28px;
 `
+
+export const FarAwayMessage = styled.View`
+  flex-direction: row;
+  align-items: center;
+	background-color: ${(props: any) => props.theme.colors.warning1};
+  margin-top: 0px;
+  margin-left: 0px;
+  border-radius: 7.6px;
+  border: 1px solid ${(props: any) => props.theme.colors.warning5};
+  width: 100%;
+`

package/themes/instacart/src/utils/index.tsx

@@ -163,3 +163,30 @@ export const transformCountryCode = (countryCode : number) => {
     return parser(value)
   }
 }
+
+/**
+ * Function to transform degree to radian
+ * @param {number} value for transform
+ *
+ */
+ export const convertToRadian = (value: number) => {
+  return value * Math.PI / 180
+}
+
+/**
+ * Function to distance between two locations
+ * @param lat1 Lat for first location
+ * @param lon1 Lon for first location
+ * @param lat2 Lat for second location
+ * @param lon2 Lon for second location
+ */
+ export const getDistance = (lat1: any, lon1: any, lat2: any, lon2: any) => {
+  const R = 6371 // km
+  const dLat = convertToRadian(lat2 - lat1)
+  const dLon = convertToRadian(lon2 - lon1)
+  const curLat1 = convertToRadian(lat1)
+  const curLat2 = convertToRadian(lat2)
+  const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(curLat1) * Math.cos(curLat2)
+  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
+  return R * c
+}

package/themes/original/index.tsx

@@ -20,6 +20,7 @@ import { BusinessMenuList } from './src/components/BusinessMenuList';
 import { UserProfileForm } from './src/components/UserProfileForm';
 import { ReviewOrder } from './src/components/ReviewOrder';
 import { UserProfile } from './src/components/UserProfile';
+import { MessageListing } from './src/components/MessageListing';
 import { Help } from './src/components/Help';
 import { HelpAccountAndPayment } from './src/components/HelpAccountAndPayment';
 import { HelpGuide } from './src/components/HelpGuide';
@@ -76,6 +77,7 @@ export {
 	ReviewOrder,
 	BusinessMenuList,
 	UserProfile,
+	MessageListing,
 	Help,
 	HelpAccountAndPayment,
 	HelpGuide,

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

@@ -10,6 +10,7 @@ import {
 	OrderInformation,
 	BusinessInformation,
 	Price,
+	UnreadMessageCounter,
 	LoadMore
 } from './styles';
 import { View, StyleSheet } from 'react-native';
@@ -26,6 +27,8 @@ export const ActiveOrders = (props: ActiveOrdersParams) => {
 		pagination,
 		loadMoreOrders,
 		getOrderStatus,
+		isMessageView,
+		handleClickOrder
 	} = props;
 
 	const theme = useTheme();
@@ -38,6 +41,10 @@ export const ActiveOrders = (props: ActiveOrdersParams) => {
 	};
 
 	const handleClickCard = (uuid: string) => {
+		if (isMessageView ) {
+			handleClickOrder(uuid)
+			return
+		}
 		onNavigationRedirect &&
 			onNavigationRedirect('OrderDetails', { orderId: uuid });
 	};
@@ -49,15 +56,15 @@ export const ActiveOrders = (props: ActiveOrdersParams) => {
 				onPress={() => handleClickCard(order?.uuid)}
 				activeOpacity={0.7}>
 				{/* {!!(configs?.google_maps_api_key?.value) && (
-          <Map>
-            <OIcon
-              url={getGoogleMapImage(order?.business?.location, configs?.google_maps_api_key?.value)}
-              height={100}
-              width={320}
-              style={{resizeMode: 'cover', borderTopRightRadius: 24, borderTopLeftRadius: 24}}
-            />
-          </Map>
-        )} */}
+					<Map>
+						<OIcon
+						url={getGoogleMapImage(order?.business?.location, configs?.google_maps_api_key?.value)}
+						height={100}
+						width={320}
+						style={{resizeMode: 'cover', borderTopRightRadius: 24, borderTopLeftRadius: 24}}
+						/>
+					</Map>
+				)} */}
 				<Information>
 					{!!order.business?.logo && (
 						<Logo>
@@ -96,15 +103,28 @@ export const ActiveOrders = (props: ActiveOrdersParams) => {
 							</OText>
 							{/* )} */}
 						</BusinessInformation>
-						<Price>
-							<OText size={12} lineHeight={18}>
-								{parsePrice(order?.summary?.total || order?.total)}
-							</OText>
-						</Price>
+						{isMessageView ? (
+							<>
+								{order?.unread_count > 0 && (
+									<UnreadMessageCounter>
+										<OText size={12} color={theme.colors.primary} lineHeight={18} >
+											{order?.unread_count}
+										</OText>
+									</UnreadMessageCounter>
+								)}
+							</>
+						) : (
+							<Price>
+								<OText size={12} lineHeight={18}>
+									{parsePrice(order?.summary?.total || order?.total)}
+								</OText>
+							</Price>
+						)}
+
 					</OrderInformation>
 				</Information>
-			</Card>
-		</React.Fragment>
+			</Card >
+		</React.Fragment >
 	);
 
 	return (

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

@@ -42,6 +42,16 @@ export const Price = styled.View`
   margin-left: 10px;
   width: 30%;
 `
+
+export const UnreadMessageCounter = styled.View`
+  justify-content: center;
+  align-items: center;
+  margin-left: 10px;
+  width: 24px;
+  height: 24px;
+  border-radius: 7.6px;
+  background-color: ${(props: any) => props.theme.colors.primaryContrast};
+`
 export const LoadMore = styled.View`
   flex-direction: row;
   justify-content: center;

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

@@ -0,0 +1,298 @@
+import React, { useState, useEffect } from 'react'
+import { OrderList, useLanguage, useOrder, ToastType, useToast } from 'ordering-components/native'
+import { OrderDetails as OrderDetailsConTableoller } from './naked'
+import { useTheme } from 'styled-components/native';
+import { useFocusEffect } from '@react-navigation/native'
+import { OText, OModal } from '../shared'
+import { NotFoundSource } from '../NotFoundSource'
+import { ActiveOrders } from '../ActiveOrders'
+import { Messages } from '../Messages';
+import NavBar from '../NavBar'
+import {
+	MessageListingParams,
+	OrdersOptionParams
+} from '../../types'
+import {
+	Placeholder,
+	PlaceholderLine,
+	Fade
+} from "rn-placeholder";
+import { View, BackHandler } from 'react-native'
+import {
+	MessageListingWrapper,
+	MessageContainer
+} from './styles';
+
+const OrdersOptionUI = (props: OrdersOptionParams) => {
+	const {
+		navigation,
+		activeOrders,
+		orderList,
+		pagination,
+		titleContent,
+		customArray,
+		onNavigationRedirect,
+		orderStatus,
+		loadMoreOrders,
+		loadOrders,
+		setSelectedOrderId,
+		setOrderList,
+		setOpenMessges
+	} = props
+
+	const theme = useTheme();
+	const [, t] = useLanguage()
+	const [, { reorder }] = useOrder()
+	const { showToast } = useToast()
+	const { loading, error, orders: values } = orderList
+	const imageFails = activeOrders
+		? theme.images.general.emptyActiveOrders
+		: theme.images.general.emptyPastOrders
+	const orders = customArray || values || []
+
+	const getOrderStatus = (s: string) => {
+		const status = parseInt(s)
+		const orderStatus = [
+			{ key: 0, value: t('PENDING', 'Pending') },
+			{ key: 1, value: t('COMPLETED', 'Completed') },
+			{ key: 2, value: t('REJECTED', 'Rejected') },
+			{ key: 3, value: t('DRIVER_IN_BUSINESS', 'Driver in business') },
+			{ key: 4, value: t('PREPARATION_COMPLETED', 'Preparation Completed') },
+			{ key: 5, value: t('REJECTED_BY_BUSINESS', 'Rejected by business') },
+			{ key: 6, value: t('REJECTED_BY_DRIVER', 'Rejected by Driver') },
+			{ key: 7, value: t('ACCEPTED_BY_BUSINESS', 'Accepted by business') },
+			{ key: 8, value: t('ACCEPTED_BY_DRIVER', 'Accepted by driver') },
+			{ key: 9, value: t('PICK_UP_COMPLETED_BY_DRIVER', 'Pick up completed by driver') },
+			{ key: 10, value: t('PICK_UP_FAILED_BY_DRIVER', 'Pick up Failed by driver') },
+			{ key: 11, value: t('DELIVERY_COMPLETED_BY_DRIVER', 'Delivery completed by driver') },
+			{ key: 12, value: t('DELIVERY_FAILED_BY_DRIVER', 'Delivery Failed by driver') },
+			{ key: 13, value: t('PREORDER', 'PreOrder') },
+			{ key: 14, value: t('ORDER_NOT_READY', 'Order not ready') },
+			{ key: 15, value: t('ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER', 'Order picked up completed by customer') },
+			{ key: 16, value: t('CANCELLED_BY_CUSTOMER', 'Cancelled by customer') },
+			{ key: 17, value: t('ORDER_NOT_PICKEDUP_BY_CUSTOMER', 'Order not picked up by customer') },
+			{ key: 18, value: t('DRIVER_ALMOST_ARRIVED_TO_BUSINESS', 'Driver almost arrived to business') },
+			{ key: 19, value: t('DRIVER_ALMOST_ARRIVED_TO_CUSTOMER', 'Driver almost arrived to customer') },
+			{ key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', 'Customer almost arrived to business') },
+			{ key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business') }
+		]
+
+		const objectStatus = orderStatus.find((o) => o.key === status)
+
+		return objectStatus && objectStatus
+	}
+
+	const handleClickOrder = (uuid: string) => {
+		setSelectedOrderId(uuid)
+		setOpenMessges(true)
+	}
+
+	useFocusEffect(
+		React.useCallback(() => {
+			loadOrders()
+		}, [navigation])
+	)
+
+	useEffect(() => {
+		if (loading) return
+		setOrderList(orderList)
+	}, [orderList, loading])
+
+	return (
+		<>
+			{!loading && orders.length === 0 && (
+				<NotFoundSource
+					content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
+					image={imageFails}
+					conditioned
+				/>
+			)}
+			{loading && (
+				<View style={{ marginTop: 30 }}>
+					{[...Array(6)].map((item, i) => (
+						<Placeholder key={i} Animation={Fade}>
+							<View style={{ width: '100%', flexDirection: 'row' }}>
+								<PlaceholderLine width={20} height={70} style={{ marginRight: 20, marginBottom: 20 }} />
+								<Placeholder>
+									<PlaceholderLine width={30} style={{ marginTop: 5 }} />
+									<PlaceholderLine width={50} />
+									<PlaceholderLine width={20} />
+								</Placeholder>
+							</View>
+						</Placeholder>
+					))}
+				</View>
+			)}
+			{!loading && !error && orders.length > 0 && (
+				<ActiveOrders
+					orders={orders.filter((order: any) => orderStatus.includes(order.status))}
+					pagination={pagination}
+					loadMoreOrders={loadMoreOrders}
+					customArray={customArray}
+					getOrderStatus={getOrderStatus}
+					onNavigationRedirect={onNavigationRedirect}
+					isMessageView
+					handleClickOrder={handleClickOrder}
+				/>
+			)}
+		</>
+	)
+}
+
+const OrderMessageUI = (props: any) => {
+	const {
+		navigation,
+		messages,
+		setMessages,
+		readMessages,
+		messagesReadList,
+		setOpenMessges
+	} = props;
+	const [openModalForBusiness, setOpenModalForBusiness] = useState(false);
+	const [openModalForDriver, setOpenModalForDriver] = useState(false);
+	const [unreadAlert, setUnreadAlert] = useState({
+		business: false,
+		driver: false,
+	});
+	const [, t] = useLanguage()
+	const { order } = props.order;
+	const handleArrowBack: any = () => {
+		navigation.navigate('BottomTab');
+	};
+
+	const handleClose = () => {
+		setOpenMessges(false)
+	}
+
+	useEffect(() => {
+		if (messagesReadList?.length) {
+			openModalForBusiness
+				? setUnreadAlert({ ...unreadAlert, business: false })
+				: setUnreadAlert({ ...unreadAlert, driver: false });
+		}
+	}, [messagesReadList]);
+
+	useEffect(() => {
+		setOpenModalForBusiness(true);
+		setOpenModalForDriver(true);
+		readMessages && readMessages();
+	}, [order])
+
+	useEffect(() => {
+		BackHandler.addEventListener('hardwareBackPress', handleArrowBack);
+		return () => {
+			BackHandler.removeEventListener('hardwareBackPress', handleArrowBack);
+		};
+	}, []);
+
+	return (
+		<>
+			{(order?.business && !order?.driver) && (
+				<Messages
+					orderId={order?.id}
+					messages={messages}
+					order={order}
+					setMessages={setMessages}
+					readMessages={readMessages}
+					isMeesageListing
+					onClose={() => handleClose()}
+				/>
+			)}
+		</>
+
+	)
+}
+
+export const OrderListing = (props: OrdersOptionParams) => {
+	const OrderListingProps = {
+		...props,
+		UIComponent: OrdersOptionUI,
+		orderStatus: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21],
+		useDefualtSessionManager: true,
+		paginationSettings: {
+			initialPage: 1,
+			pageSize: 10,
+			controlType: 'infinity'
+		}
+	}
+	return <OrderList {...OrderListingProps} />
+}
+
+export const MessagesView = (props: any) => {
+	const orderDetailsProps = {
+		...props,
+		UIComponent: OrderMessageUI,
+	};
+	return <OrderDetailsConTableoller {...orderDetailsProps} />;
+};
+
+
+export const MessageListing = (props: MessageListingParams) => {
+	const {
+		navigation
+	} = props
+	const [orderListStatus, setOrderListStatus] = useState({
+		error: null,
+		loading: false,
+		orders: []
+	})
+	const [selectedOrderId, setSelectedOrderId] = useState(null)
+	const [seletedOrder, setSeletedOrder] = useState<any>()
+	const [openMessages, setOpenMessges] = useState(false)
+	const [, t] = useLanguage()
+
+	const goToBack = () => {
+		navigation?.canGoBack() && navigation.goBack()
+		setSelectedOrderId(null)
+		setSeletedOrder([])
+	}
+
+	const handleCloseModal = () => {
+		setOpenMessges(false)
+	}
+
+	useEffect(() => {
+		if (!orderListStatus?.loading && selectedOrderId) {
+			const _orders = orderListStatus?.orders
+			const _seletedOrder = _orders.find((order: any) => order?.uuid === selectedOrderId)
+			setSeletedOrder(_seletedOrder)
+		}
+	}, [orderListStatus, selectedOrderId])
+
+	useEffect(() => {
+
+	}, [orderListStatus])
+
+	return (
+		<MessageListingWrapper>
+			<NavBar
+				title={t('MESSAGES', 'Messages')}
+				titleAlign={'center'}
+				onActionLeft={goToBack}
+				showCall={false}
+				paddingTop={10}
+				btnStyle={{ paddingLeft: 0 }}
+			/>
+			<OrderListing
+				ordersLength={{ activeOrdersLength: 0, previousOrdersLength: 0 }}
+				setSelectedOrderId={setSelectedOrderId}
+				setOrderList={setOrderListStatus}
+				setOpenMessges={setOpenMessges}
+			/>
+			{openMessages && seletedOrder && (
+				<OModal
+					open={openMessages}
+					entireModal
+					customClose
+					onClose={() => handleCloseModal()}
+				>
+					<MessagesView
+						order={seletedOrder}
+						setOpenMessges={setOpenMessges}
+					/>
+				</OModal>
+			)}
+		</MessageListingWrapper>
+	)
+}
+