ordering-ui-react-native 0.12.96 → 0.13.0

package/package.json

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

package/src/components/ReviewProducts/index.tsx

@@ -67,7 +67,7 @@ const ReviewProductsUI = (props: ReviewProductParams) => {
         <NavBar
           title={t('REVIEW_PRODUCT', 'Review product')}
           titleAlign={'center'}
-          onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
+          onActionLeft={() => onNavigationRedirect('MyOrders')}
           showCall={false}
           btnStyle={{ paddingLeft: 0 }}
           paddingTop={0}

package/themes/business/src/components/OrdersOption/styles.tsx

@@ -2,6 +2,7 @@ import styled from 'styled-components/native';
 
 export const FiltersTab = styled.View`
   margin-bottom: 20px;
+  min-height: 30px;
   max-height: 35px;
   flex: 1;
 `;

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

@@ -60,7 +60,7 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
 	}
 
 	const handleClickOrderReview = (order: any) => {
-		onNavigationRedirect && onNavigationRedirect('ReviewOrder', { order: { id: order?.id, business_id: order?.business_id, logo: order.business?.logo } })
+		onNavigationRedirect && onNavigationRedirect('ReviewOrder', { order: { id: order?.id, business_id: order?.business_id, logo: order.business?.logo, products: order?.products } })
 	}
 
 	const handleReorderClick = (id: number) => {

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

@@ -8,7 +8,7 @@ import {
 } from 'ordering-components/native'
 import { ProductIngredient } from '../ProductIngredient'
 import { ProductOption } from '../ProductOption'
-import { View, TouchableOpacity, StyleSheet, Dimensions, ScrollView, I18nManager, TextStyle, Platform } from 'react-native'
+import { View, TouchableOpacity, StyleSheet, Dimensions, ScrollView, I18nManager, TextStyle, Platform, KeyboardAvoidingView } from 'react-native'
 import {
 	ProductHeader,
 	WrapHeader,
@@ -137,7 +137,11 @@ export const ProductOptionsUI = (props: any) => {
 	const saveErrors = orderState.loading || maxProductQuantity === 0 || Object.keys(errors).length > 0
 
 	return (
-		<>
+		<KeyboardAvoidingView
+			style={{ flex: 1 }}
+			behavior={'height'}
+			enabled={Platform.OS === 'ios'}
+		>
 			<ScrollView style={styles.mainContainer}>
 				{!error && (
 					<View style={{ paddingBottom: 80 }}>
@@ -286,7 +290,7 @@ export const ProductOptionsUI = (props: any) => {
 										/>
 									</ProductComment>
 									{productCart && !isSoldOut && maxProductQuantity > 0 && (
-										<View style={{ paddingVertical: 4 }}>
+										<View style={{ paddingVertical: 4, marginBottom: 10 }}>
 											<SectionTitle>
 												<OText style={theme.labels.middle as TextStyle}>{t('PREFERENCES', 'Preferences')}</OText>
 											</SectionTitle>
@@ -335,6 +339,7 @@ export const ProductOptionsUI = (props: any) => {
 							textSub={`${orderState.loading ? '' : productCart.total ? parsePrice(productCart?.total) : ''}`}
 							textStyle={{ color: saveErrors ? theme.colors.textSecondary : theme.colors.white, fontSize: 14, fontWeight: Platform.OS === 'ios' ? '600' : 'bold' }}
 							style={{
+								bottom: 5,
 								backgroundColor: saveErrors ? theme.colors.backgroundGray300 : theme.colors.primary,
 								borderWidth: 1, shadowOpacity: 0, height: 40,
 								borderColor: saveErrors ? theme.colors.backgroundGray300 : theme.colors.primary,
@@ -361,13 +366,13 @@ export const ProductOptionsUI = (props: any) => {
 								text={isSoldOut || maxProductQuantity <= 0 ? t('SOLD_OUT', 'Sold out') : t('LOGIN_SIGNUP', 'Login / Sign Up')}
 								imgRightSrc=''
 								textStyle={{ color: theme.colors.primary, ...theme.labels.middle }}
-								style={{ height: 40, borderWidth: 1, borderColor: theme.colors.primary, backgroundColor: theme.colors.white }}
+								style={{ bottom: 5, marginTop: 2, height: 40, borderWidth: 1, borderColor: theme.colors.primary, backgroundColor: theme.colors.white }}
 							/>
 						)}
 					</View>
 				</ProductActions>
 			)}
-		</>
+		</KeyboardAvoidingView>
 	)
 }
 

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

@@ -81,7 +81,7 @@ const BusinessMenuListUI = (props: BusinessMenuListParams) => {
                 dropdownStyle={{
                   borderRadius: 8,
                   borderColor: theme.colors.lightGray,
-                  marginTop: 5,
+                  marginTop: -15,
                   maxHeight: 160
                 }}
                 rowStyle={{

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

@@ -335,7 +335,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
             dropdownStyle={{
               borderRadius: 8,
               borderColor: theme.colors.lightGray,
-              marginTop: 5
+              marginTop: -15
             }}
             rowStyle={{
               borderBottomColor: theme.colors.backgroundGray100,

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

@@ -7,7 +7,7 @@ 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 } from 'react-native'
-import { Header, TitleHeader, Wrapper, QuickMessageContainer, ProfileMessageHeader } from './styles'
+import { Header, TitleHeader, Wrapper, QuickMessageContainer, ProfileMessageHeader, MessageTypeItem } from './styles'
 import { MessagesParams } from '../../types'
 import { useWindowDimensions } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
@@ -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;