ordering-ui-react-native 0.12.96 → 0.12.97

package/package.json

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

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

@@ -149,6 +149,7 @@ const OrderMessageUI = (props: any) => {
 	} = props;
 	const [openModalForBusiness, setOpenModalForBusiness] = useState(false);
 	const [openModalForDriver, setOpenModalForDriver] = useState(false);
+	const [openMessages, setOpenMessages] = useState({ business: false, driver: false });
 	const [unreadAlert, setUnreadAlert] = useState({
 		business: false,
 		driver: false,
@@ -163,6 +164,11 @@ const OrderMessageUI = (props: any) => {
 		setOpenMessges(false)
 	}
 
+	const handleOpenMessages = (data: any) => {
+		setOpenMessages(data)
+		readMessages && readMessages();
+	}
+
 	useEffect(() => {
 		if (messagesReadList?.length) {
 			openModalForBusiness
@@ -184,19 +190,24 @@ const OrderMessageUI = (props: any) => {
 		};
 	}, []);
 
+	useEffect(() => {
+		handleOpenMessages({ driver: false, business: true })
+	}, [])
+
 	return (
 		<>
-			{(order?.business && !order?.driver) && (
-				<Messages
-					orderId={order?.id}
-					messages={messages}
-					order={order}
-					setMessages={setMessages}
-					readMessages={readMessages}
-					isMeesageListing
-					onClose={() => handleClose()}
-				/>
-			)}
+			<Messages
+				orderId={order?.id}
+				messages={messages}
+				order={order}
+				setMessages={setMessages}
+				readMessages={readMessages}
+				business={openMessages.business}
+				driver={openMessages.driver}
+				onMessages={setOpenMessages}
+				isMeesageListing
+				onClose={() => handleClose()}
+			/>
 		</>
 
 	)
@@ -212,7 +223,10 @@ export const OrderListing = (props: OrdersOptionParams) => {
 			initialPage: 1,
 			pageSize: 10,
 			controlType: 'infinity'
-		}
+		},
+		profileMessages: true,
+		orderBy: 'last_direct_message_at',
+		orderDirection: 'asc'
 	}
 	return <OrderList {...OrderListingProps} />
 }
@@ -258,10 +272,6 @@ export const MessageListing = (props: MessageListingParams) => {
 		}
 	}, [orderListStatus, selectedOrderId])
 
-	useEffect(() => {
-
-	}, [orderListStatus])
-
 	return (
 		<MessageListingWrapper>
 			<NavBar

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

@@ -21,11 +21,15 @@ const MessagesUI = (props: MessagesParams) => {
 		message,
 		messagesToShow,
 		sendMessage,
+		setCanRead,
 		setMessage,
 		handleSend,
 		setImage,
 		readMessages,
 		onClose,
+		business,
+		driver,
+		onMessages,
 		isMeesageListing
 	} = props
 
@@ -161,18 +165,18 @@ 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 _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 firstMessage = {
 			_id: 0,
-			text: console,
+			text: _console,
 			createdAt: order?.created_at,
 			system: true
 		}
+		const newMessage: any = [];
 		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))) {
-				newMessage = {
-					_id: message.id,
+			if (business && message.type !== 0 && (messagesToShow?.messages?.length || message?.can_see?.includes('2'))) {
+				newMessage.push({
+					_id: message?.id,
 					text: message.type === 1 ? messageConsole(message) : message.comment,
 					createdAt: message.type !== 0 && message.created_at,
 					image: message.source,
@@ -182,15 +186,30 @@ const MessagesUI = (props: MessagesParams) => {
 						name: message.author.name,
 						avatar: message.author.id !== user.id && type === USER_TYPE.DRIVER ? order?.driver?.photo : order?.business?.logo
 					}
-				}
+				});
+			}
+
+			if (driver && message.type !== 0 && (messagesToShow?.messages?.length || message?.can_see?.includes('4'))) {
+				newMessage.push({
+					_id: message?.id,
+					text: message.type === 1 ? messageConsole(message) : message.comment,
+					createdAt: message.type !== 0 && message.created_at,
+					image: message.source,
+					system: message.type === 1,
+					user: {
+						_id: message.author.id,
+						name: message.author.name,
+						avatar: message.author.id !== user.id && type === USER_TYPE.DRIVER ? order?.driver?.photo : order?.business?.logo
+					}
+				});
 			}
+
 			if (message.type === 0) {
-				newMessage = firstMessage
+				newMessage.push(firstMessage);
 			}
-			newMessages = [...newMessages, newMessage]
 		})
-		setFormattedMessages([...newMessages.reverse()])
-	}, [messages.messages.length])
+		setFormattedMessages(newMessage.reverse())
+	}, [messages.messages.length, business, driver])
 
 	useEffect(() => {
 		const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {
@@ -205,6 +224,11 @@ const MessagesUI = (props: MessagesParams) => {
 		}
 	}, [])
 
+	useEffect(() => {
+		if (business) setCanRead({ business: true, administrator: true, customer: true, driver: false })
+		else if (driver) setCanRead({ business: false, administrator: true, customer: true, driver: true })
+	}, [business, driver])
+
 	const RenderActions = (props: any) => {
 		return (
 			<Actions
@@ -422,23 +446,39 @@ const MessagesUI = (props: MessagesParams) => {
 							</TouchableOpacity>
 							<OText size={18}>{t('ORDER', theme?.defaultLanguages?.ORDER || 'Order')} #{order?.id}</OText>
 						</View>
-						<View>
+						<View style={{ ...styles.typeWraper }}>
 							{order.business && (
-								<OIcon
-									url={order?.business?.logo}
-									width={32}
-									height={32}
-									style={{ borderRadius: 7.6 }}
-								/>
+								<TouchableOpacity
+									onPress={() => onMessages({ business: true, driver: false })}
+								>
+									<MessageTypeItem
+										active={business}
+									>
+										<OIcon
+											url={order?.business?.logo}
+											width={32}
+											height={32}
+											style={{ borderRadius: 32 }}
+										/>
+									</MessageTypeItem>
+								</TouchableOpacity>
 							)}
 
 							{order?.driver && (
-								<OIcon
-									url={order?.driver?.photo}
-									width={32}
-									height={32}
-									style={{ borderRadius: 7.6 }}
-								/>
+								<TouchableOpacity
+									onPress={() => onMessages({ business: false, driver: true })}
+								>
+									<MessageTypeItem
+										active={driver}
+									>
+										<OIcon
+											url={order?.driver?.photo}
+											width={32}
+											height={32}
+											style={{ borderRadius: 32 }}
+										/>
+									</MessageTypeItem>
+								</TouchableOpacity>
 							)}
 						</View>
 					</ProfileMessageHeader>
@@ -509,6 +549,11 @@ const styles = StyleSheet.create({
 		overflow: 'hidden',
 		width: 35,
 		marginVertical: 18,
+	},
+	typeWraper: {
+		flexDirection: 'row',
+		height: 45,
+		alignItems: 'center'
 	}
 
 })

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

@@ -1,5 +1,6 @@
 
-import styled from 'styled-components/native'
+import styled, { css } from 'styled-components/native'
+
 
 export const Wrapper = styled.View`
   flex: 1;
@@ -24,4 +25,18 @@ export const ProfileMessageHeader = styled.View`
   align-items: center;
   padding-bottom: 0px;
   padding-horizontal: 20px;
+`
+export const MessageTypeItem = styled.View`
+  justify-content: center;
+  align-items: center;
+  padding-horizontal: 5px;
+  padding-bottom: 5px;
+  padding-top: 5px;
+  margin-right: 5px;
+  border-radius: 7.6px;
+  overflow: hidden;
+  
+  ${({ active }: any) => active && css`
+    background-color: ${(props: any) => props.theme.colors.whiteGray};
+  `}
 `

package/themes/original/src/types/index.tsx

@@ -338,7 +338,11 @@ export interface MessagesParams {
 	setMessages?: () => {},
 	readMessages?: () => {},
 	onClose?: () => void,
-	isMeesageListing?: boolean
+	isMeesageListing?: boolean,
+	setCanRead?: any,
+	business: boolean,
+	driver: boolean,
+	onMessages?: any
 }
 export interface ViewInterface {
 	navigation?: any;