ordering-ui-react-native 0.17.56 → 0.17.57-release

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

@@ -1,11 +1,12 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { StyleSheet, View, Keyboard } from 'react-native';
+import { StyleSheet, View, Keyboard, Modal } from 'react-native';
 import Spinner from 'react-native-loading-spinner-overlay';
 import { useForm, Controller } from 'react-hook-form';
 import { PhoneInputNumber } from '../PhoneInputNumber';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import Recaptcha from 'react-native-recaptcha-that-works'
 import ReCaptcha from '@fatnlazycat/react-native-recaptcha-v3'
+import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 
 import {
 	LoginForm as LoginFormController,
@@ -45,6 +46,7 @@ import { AppleLogin } from '../AppleLogin';
 import { Otp } from './Otp'
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import Alert from '../../../../../src/providers/AlertProvider'
+import { vibrateApp } from '../../utils';
 
 const LoginFormUI = (props: LoginParams) => {
 	const {
@@ -72,6 +74,7 @@ const LoginFormUI = (props: LoginParams) => {
 		generateOtpCode,
 		useLoginOtpEmail,
 		useLoginOtpCellphone,
+		isGuest
 	} = props;
 
 	const [, { showToast }] = useToast();
@@ -95,6 +98,7 @@ const LoginFormUI = (props: LoginParams) => {
 	const [recaptchaVerified, setRecaptchaVerified] = useState(false)
 	const [alertState, setAlertState] = useState({ open: false, title: '', content: [] })
 	const [tabLayouts, setTabLayouts] = useState<any>({})
+	const [otpError, setOtpError] = useState(null)
 	const tabsRef = useRef<any>(null)
 	const enabledPoweredByOrdering = configs?.powered_by_ordering_module?.value
 	const theme = useTheme();
@@ -160,11 +164,24 @@ const LoginFormUI = (props: LoginParams) => {
 		handleCategoryScroll(otpType ? `${val}_${otpType}` : val)
 	};
 
+	const vibrateApp = (impact?: string) => {
+		const options = {
+			enableVibrateFallback: true,
+			ignoreAndroidSystemSettings: false
+		};
+		ReactNativeHapticFeedback.trigger(impact || "impactLight", options);
+	}
+
 	const onSubmit = (values?: any) => {
 		Keyboard.dismiss();
 		if (loginTab === 'otp') {
 			if (phoneInputData.error && (loginTab !== 'otp' || (otpType === 'cellphone' && loginTab === 'otp'))) {
 				showToast(ToastType.Error, t('INVALID_PHONE_NUMBER', 'Invalid phone number'));
+				vibrateApp()
+				return
+			}
+			if (!values?.cellphone && otpType === 'cellphone') {
+				showToast(ToastType.Error, t('PHONE_NUMBER_REQUIRED', 'Phone number is required'));
 				return
 			}
 			if (loginTab === 'otp') {
@@ -177,6 +194,7 @@ const LoginFormUI = (props: LoginParams) => {
 		} else {
 			if (phoneInputData.error) {
 				showToast(ToastType.Error, phoneInputData.error);
+				vibrateApp()
 				return;
 			}
 			handleButtonLoginClick({
@@ -189,6 +207,7 @@ const LoginFormUI = (props: LoginParams) => {
 	const handleVerifyCodeClick = () => {
 		if (phoneInputData.error) {
 			showToast(ToastType.Error, phoneInputData.error);
+			vibrateApp()
 			return;
 		}
 		if (
@@ -203,6 +222,7 @@ const LoginFormUI = (props: LoginParams) => {
 					'The field Mobile phone is required.',
 				),
 			);
+			vibrateApp()
 			return;
 		}
 		handleSendVerifyCode && handleSendVerifyCode(phoneInputData.phone);
@@ -217,17 +237,19 @@ const LoginFormUI = (props: LoginParams) => {
 	};
 
 	const handleChangeInputEmail = (value: string, onChange: any) => {
-		onChange(value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''));
+		onChange(value.toLowerCase().trim().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''));
 	};
 
 	const handleOpenRecaptcha = () => {
 		setRecaptchaVerified(false)
 		if (!recaptchaConfig?.siteKey) {
 			showToast(ToastType.Error, t('NO_RECAPTCHA_SITE_KEY', 'The config doesn\'t have recaptcha site key'));
+			vibrateApp()
 			return
 		}
 		if (!recaptchaConfig?.baseUrl) {
 			showToast(ToastType.Error, t('NO_RECAPTCHA_BASE_URL', 'The config doesn\'t have recaptcha base url'));
+			vibrateApp()
 			return
 		}
 
@@ -244,9 +266,14 @@ const LoginFormUI = (props: LoginParams) => {
 		setOtpType(type)
 	}
 
-	const handleLoginOtp = (code: string) => {
-		handleButtonLoginClick({ code })
-		setWillVerifyOtpState(false)
+	const handleLoginOtp = async (code: string) => {
+		if (!code) return
+		const logged = await handleButtonLoginClick({ code })
+		if (logged) {
+			setWillVerifyOtpState(false)
+		} else {
+			setOtpError(t('OTP_CODE_INCORRECT', 'Otp code incorrect'))
+		}
 	}
 
 	const closeAlert = () => {
@@ -304,6 +331,7 @@ const LoginFormUI = (props: LoginParams) => {
 					baseUrl: configs?.security_recaptcha_base_url?.value || null
 				})
 				showToast(ToastType.Info, t('TRY_AGAIN', 'Please try again'))
+				vibrateApp()
 				return
 			}
 			formState.result?.result &&
@@ -313,6 +341,7 @@ const LoginFormUI = (props: LoginParams) => {
 						? formState.result?.result
 						: formState.result?.result[0],
 				);
+			formState.result?.result && vibrateApp()
 		}
 	}, [formState]);
 
@@ -324,6 +353,7 @@ const LoginFormUI = (props: LoginParams) => {
 						? verifyPhoneState?.result?.result
 						: verifyPhoneState?.result?.result[0];
 				verifyPhoneState.result?.result && showToast(ToastType.Error, message);
+				verifyPhoneState.result?.result && vibrateApp();
 				setIsLoadingVerifyModal(false);
 				return;
 			}
@@ -363,18 +393,25 @@ const LoginFormUI = (props: LoginParams) => {
 		}
 	}, [checkPhoneCodeState])
 
+	useEffect(() => {
+		if (!!Object.values(errors)?.length) vibrateApp()
+	}, [errors])
+
 	return (
 		<Container>
-			<NavBar
-				title={t('LOGIN', 'Login')}
-				titleAlign={'center'}
-				onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
-				showCall={false}
-				btnStyle={{ paddingLeft: 0 }}
-				style={{ flexDirection: 'column', alignItems: 'flex-start' }}
-				titleWrapStyle={{ paddingHorizontal: 0 }}
-				titleStyle={{ marginRight: 0, marginLeft: 0 }}
-			/>
+			{isGuest ? (
+				<OText style={{ textAlign: 'center', marginBottom: 10 }} size={18}>{t('LOGIN', 'Login')}</OText>
+			) : (
+				<NavBar
+					title={t('LOGIN', 'Login')}
+					titleAlign={'center'}
+					onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
+					showCall={false}
+					btnStyle={{ paddingLeft: 0 }}
+					titleWrapStyle={{ paddingHorizontal: 0 }}
+					titleStyle={{ marginRight: 0, marginLeft: 0 }}
+				/>
+			)}
 			<FormSide>
 				{(Number(useLoginByEmail) + Number(useLoginByCellphone) + Number(useLoginOtpEmail) + Number(useLoginOtpCellphone) > 1) && (
 					<LoginWith>
@@ -720,8 +757,8 @@ const LoginFormUI = (props: LoginParams) => {
 
 				{configs && Object.keys(configs).length > 0 ? (
 					(((configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') && configs?.facebook_id?.value && facebookLoginEnabled) ||
-					((configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && googleLoginEnabled) ||
-					((configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && appleLoginEnabled)) &&
+						((configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && googleLoginEnabled) ||
+						((configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && appleLoginEnabled)) && !isGuest &&
 					(
 						<>
 							<View
@@ -749,7 +786,7 @@ const LoginFormUI = (props: LoginParams) => {
 										facebookLoginEnabled && (
 											<FacebookLogin
 												notificationState={notificationState}
-												handleErrors={(err: any) => showToast(ToastType.Error, err)}
+												handleErrors={(err: any) => { showToast(ToastType.Error, err), vibrateApp() }}
 												handleLoading={(val: boolean) => setIsFBLoading(val)}
 												handleSuccessFacebookLogin={handleSuccessFacebook}
 											/>
@@ -758,7 +795,7 @@ const LoginFormUI = (props: LoginParams) => {
 										<GoogleLogin
 											notificationState={notificationState}
 											webClientId={configs?.google_login_client_id?.value}
-											handleErrors={(err: any) => showToast(ToastType.Error, err)}
+											handleErrors={(err: any) => { showToast(ToastType.Error, err), vibrateApp() }}
 											handleLoading={(val: boolean) => setIsFBLoading(val)}
 											handleSuccessGoogleLogin={handleSuccessFacebook}
 										/>
@@ -766,7 +803,7 @@ const LoginFormUI = (props: LoginParams) => {
 									{(configs?.apple_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && appleLoginEnabled && (
 										<AppleLogin
 											notificationState={notificationState}
-											handleErrors={(err: any) => showToast(ToastType.Error, err)}
+											handleErrors={(err: any) => { showToast(ToastType.Error, err), vibrateApp() }}
 											handleLoading={(val: boolean) => setIsFBLoading(val)}
 											handleSuccessAppleLogin={handleSuccessFacebook}
 										/>
@@ -812,20 +849,21 @@ const LoginFormUI = (props: LoginParams) => {
 					onClose={() => setIsModalVisible(false)}
 				/>
 			</OModal>
-			<OModal
-				open={willVerifyOtpState}
-				onClose={() => setWillVerifyOtpState(false)}
-				entireModal
-				title={t('ENTER_VERIFICATION_CODE', 'Enter verification code')}
+			<Modal
+				visible={willVerifyOtpState}
+				onDismiss={() => setWillVerifyOtpState(false)}
+				animationType='slide'
 			>
 				<Otp
 					willVerifyOtpState={willVerifyOtpState}
+					otpError={otpError}
+					setOtpError={setOtpError}
 					setWillVerifyOtpState={setWillVerifyOtpState}
 					handleLoginOtp={handleLoginOtp}
 					onSubmit={onSubmit}
 					setAlertState={setAlertState}
 				/>
-			</OModal>
+			</Modal>
 			<Alert
 				open={alertState.open}
 				content={alertState.content}

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

@@ -1,69 +1,103 @@
-import React, { useRef } from 'react'
+import React, { useRef, useState } from 'react'
 import Lottie from 'lottie-react-native';
 import { TouchableOpacity, Easing, ViewStyle, Animated } from 'react-native';
 import IconAntDesign from 'react-native-vector-icons/AntDesign'
 import { useTheme } from 'styled-components';
 
 interface Props {
-    initialValue: number,
-    onClick: any,
-    disableAnimation?: boolean
-    toValue: number,
-    style?: ViewStyle,
-    duration?: number,
-    type: 'favorite', // animation types
-    isActive: boolean,
-    animationType?: ((value : number) => number);
-    useNativeDriver?: boolean,
-    iconProps?: {color?: string, size?: number, style?: ViewStyle} 
+  initialValue: number,
+  onClick: any,
+  disableAnimation?: boolean
+  toValue: number,
+  style?: ViewStyle,
+  duration?: number,
+  type: 'favorite', // animation types
+  isActive: boolean,
+  animationType?: ((value: number) => number);
+  useNativeDriver?: boolean,
+  iconProps?: { color?: string, size?: number, style?: ViewStyle }
 }
 
 export const LottieAnimation = (props: Props) => {
-    const {
-        initialValue,
-        onClick,
-        disableAnimation,
-        toValue,
-        style,
-        duration,
-        type,
-        isActive,
-        useNativeDriver,
-        animationType,
-        iconProps
-    } = props
-    const theme = useTheme()
-    const animationProgress = useRef(new Animated.Value(initialValue))
-    const favoriteArray = ['heart', 'hearto']
-    const icon = type === 'favorite' ? favoriteArray : []
-    const animationGif = type === 'favorite' ? theme.images?.general?.heart : ''
-    const onPressLottie = () => {
-        if (!disableAnimation) {
-            Animated.timing(animationProgress.current, {
-                toValue,
-                duration: duration || 5000,
-                easing: animationType || Easing.linear,
-                useNativeDriver: useNativeDriver ?? true
-            }).start();
-        }
-        onClick()
+  const {
+    initialValue,
+    onClick,
+    disableAnimation,
+    toValue,
+    style,
+    duration,
+    type,
+    isActive,
+    useNativeDriver,
+    animationType,
+    iconProps
+  } = props
+
+  const theme = useTheme()
+  const animationProgress = useRef(new Animated.Value(initialValue))
+  const favRef = useRef<Lottie>(null)
+  const [isHide, setIsHide] = useState(true)
+
+  const favoriteArray = ['heart', 'hearto']
+  const icon = type === 'favorite' ? favoriteArray : []
+  const animationGif = type === 'favorite' ? theme.images?.general?.heart : ''
+
+  const onPressLottie = () => {
+    if (!disableAnimation) {
+      if (type === 'favorite') {
+        favRef.current?.play()
+      } else {
+        setIsHide(false)
+        Animated.timing(animationProgress.current, {
+          toValue,
+          duration: duration || 5000,
+          easing: animationType || Easing.linear,
+          useNativeDriver: useNativeDriver ?? true
+        }).start();
+        hideLottie()
+      }
     }
+    onClick()
+  }
 
-    return (
-        <TouchableOpacity
-            onPress={onPressLottie}
-            style={style}
-        >
+  const hideLottie = () => {
+    setTimeout(() => setIsHide(true), 4500)
+  }
+
+  return (
+    <TouchableOpacity
+      onPress={onPressLottie}
+      style={style}
+    >
+      {type === 'favorite' ? (
+        // <Lottie
+        //   ref={favRef}
+        //   progress={initialValue}
+        //   style={{ width: 20, height: 20 }}
+        //   source={animationGif}
+        // />
+        <IconAntDesign
+          name={isActive ? icon[0] : icon[1]}
+          color={iconProps?.color || theme.colors.danger5}
+          size={iconProps?.size || 16}
+          style={iconProps?.style}
+        />
+      ) : (
+        <>
+          {!isHide &&
             <Lottie
-                progress={animationProgress.current}
-                source={animationGif}
-            />
-            <IconAntDesign
-                name={isActive ? icon[0] : icon[1]}
-                color={iconProps?.color || theme.colors.danger5}
-                size={iconProps?.size || 16}
-                style={iconProps?.style}
+              progress={animationProgress.current}
+              source={animationGif}
             />
-        </TouchableOpacity>
-    )
+          }
+          <IconAntDesign
+            name={isActive ? icon[0] : icon[1]}
+            color={iconProps?.color || theme.colors.danger5}
+            size={iconProps?.size || 16}
+            style={iconProps?.style}
+          />
+        </>
+      )}
+    </TouchableOpacity>
+  )
 }

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

@@ -16,11 +16,12 @@ import {
 	PlaceholderLine,
 	Fade
 } from "rn-placeholder";
-import { View, BackHandler } from 'react-native'
+import { View, BackHandler, Platform } from 'react-native'
 import {
 	MessageListingWrapper,
 	MessageContainer
 } from './styles';
+import { getOrderStatus } from '../../utils'
 
 const OrdersOptionUI = (props: OrdersOptionParams) => {
 	const {
@@ -51,40 +52,6 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 		: 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') },
-			{ key: 22, value: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver') },
-      		{ key: 23, value: t('ORDER_DRIVER_ON_WAY', 'Driver on way') }
-		]
-
-		const objectStatus = orderStatus.find((o) => o.key === status)
-
-		return objectStatus && objectStatus
-	}
-
 	const handleClickOrder = (uuid: string) => {
 		setSelectedOrderId(uuid)
 		setOpenMessges(true)
@@ -102,7 +69,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 	}, [orderList, loading])
 
 	useEffect(() => {
-		if(refreshOrders){
+		if (refreshOrders) {
 			loadOrders(false, false, false, true)
 			setRefreshOrders && setRefreshOrders(false)
 		}
@@ -156,7 +123,9 @@ const OrderMessageUI = (props: any) => {
 		setMessages,
 		readMessages,
 		messagesReadList,
-		setOpenMessges
+		setOpenMessges,
+		setSeletedOrder,
+		setSelectedOrderId
 	} = props;
 	const [openModalForBusiness, setOpenModalForBusiness] = useState(false);
 	const [openModalForDriver, setOpenModalForDriver] = useState(false);
@@ -173,6 +142,8 @@ const OrderMessageUI = (props: any) => {
 
 	const handleClose = () => {
 		setOpenMessges(false)
+		setSeletedOrder(null)
+		setSelectedOrderId(null)
 	}
 
 	const handleOpenMessages = (data: any) => {
@@ -225,7 +196,7 @@ const OrderMessageUI = (props: any) => {
 }
 
 export const OrderListing = (props: OrdersOptionParams) => {
-  const [businessState] = useBusiness();
+	const [businessState] = useBusiness();
 	const OrderListingProps = {
 		...props,
 		UIComponent: OrdersOptionUI,
@@ -236,7 +207,7 @@ export const OrderListing = (props: OrdersOptionParams) => {
 			pageSize: 10,
 			controlType: 'infinity'
 		},
-    businessId: businessState?.business?.id,
+		businessId: businessState?.business?.id,
 		profileMessages: true,
 		orderBy: 'last_direct_message_at',
 		orderDirection: 'asc'
@@ -292,7 +263,7 @@ export const MessageListing = (props: MessageListingParams) => {
 				titleAlign={'center'}
 				onActionLeft={goToBack}
 				showCall={false}
-				paddingTop={10}
+				paddingTop={Platform.OS === 'ios' ? 20 : 10}
 				btnStyle={{ paddingLeft: 0 }}
 			/>
 			<OrderListing
@@ -300,9 +271,9 @@ export const MessageListing = (props: MessageListingParams) => {
 				setSelectedOrderId={setSelectedOrderId}
 				setOrderList={setOrderListStatus}
 				setOpenMessges={setOpenMessges}
-        franchiseId={props.franchiseId}
+				franchiseId={props.franchiseId}
 			/>
-			{openMessages && seletedOrder && (
+			{openMessages && !!seletedOrder?.id && (
 				<OModal
 					open={openMessages}
 					entireModal
@@ -311,7 +282,10 @@ export const MessageListing = (props: MessageListingParams) => {
 				>
 					<MessagesView
 						order={seletedOrder}
+						orderId={seletedOrder?.id}
 						setOpenMessges={setOpenMessges}
+						setSeletedOrder={setSeletedOrder}
+						setSelectedOrderId={setSelectedOrderId}
 					/>
 				</OModal>
 			)}

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

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react'
+import Clipboard from '@react-native-clipboard/clipboard';
 import { Messages as MessagesController, useSession, useUtils, useLanguage, ToastType, useToast } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 import { launchImageLibrary } from 'react-native-image-picker'
@@ -12,6 +13,7 @@ import { Header, TitleHeader, Wrapper, QuickMessageContainer, ProfileMessageHead
 import { MessagesParams } from '../../types'
 import { useWindowDimensions } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { getLogisticTag } from '../../utils'
 
 const ORDER_STATUS: any = {
 	0: 'ORDER_STATUS_PENDING',
@@ -126,7 +128,7 @@ const MessagesUI = (props: MessagesParams) => {
 			?
 			`${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?.attribute !== 'logistic_status' ? message.change.old !== null && t(ORDER_STATUS[parseInt(message.change.old, 10)]) : message.change.old !== null && getLogisticTag(message.change.old)} ${t('TO', 'to')} ${message.change?.attribute !== 'logistic_status' ? t(ORDER_STATUS[parseInt(message.change.new, 10)]) : getLogisticTag(message.change.new)}`
 			}`
 			: message.change.new
 				?
@@ -141,7 +143,7 @@ const MessagesUI = (props: MessagesParams) => {
 		const firstMessage = {
 			_id: 0,
 			text: _console,
-			createdAt: order?.created_at,
+			createdAt: parseDate(order?.created_at, { outputFormat: 'YYYY-MM-DD HH:mm:ss' }),
 			system: true
 		}
 		const newMessage: any = [];
@@ -150,13 +152,13 @@ const MessagesUI = (props: MessagesParams) => {
 				newMessage.push({
 					_id: message?.id,
 					text: message.type === 1 ? messageConsole(message) : message.comment,
-					createdAt: message.type !== 0 && message.created_at,
+					createdAt: message.type !== 0 && parseDate(message?.created_at, { outputFormat: 'YYYY-MM-DD HH:mm:ss' }),
 					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
+						_id: message.author && message.author.id,
+						name: message.author && message.author.name,
+						avatar: message.author && (message.author.id !== user.id && type === USER_TYPE.DRIVER ? order?.driver?.photo : order?.business?.logo)
 					}
 				});
 			}
@@ -165,13 +167,13 @@ const MessagesUI = (props: MessagesParams) => {
 				newMessage.push({
 					_id: message?.id,
 					text: message.type === 1 ? messageConsole(message) : message.comment,
-					createdAt: message.type !== 0 && message.created_at,
+					createdAt: message.type !== 0 && parseDate(message?.created_at, { outputFormat: 'YYYY-MM-DD HH:mm:ss' }),
 					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
+						_id: message.author && message.author.id,
+						name: message.author && message.author.name,
+						avatar: message.author && (message.author.id !== user.id && type === USER_TYPE.DRIVER ? order?.driver?.photo : order?.business?.logo)
 					}
 				});
 			}
@@ -240,6 +242,7 @@ const MessagesUI = (props: MessagesParams) => {
 
 	const renderAccessory = () => {
 		return (
+			!chatDisabled &&
 			<QuickMessageContainer
 				style={{
 					marginLeft: 10,
@@ -397,6 +400,24 @@ const MessagesUI = (props: MessagesParams) => {
 		}
 	}
 
+	const onLongPress = (context: any, message: any) => {
+		const options = [
+			t('COPY_TEXT', 'Copy text'),
+			t('CANCEL', 'Cancel'),
+		];
+		const cancelButtonIndex = options.length - 1;
+		context.actionSheet().showActionSheetWithOptions({
+			options,
+			cancelButtonIndex
+		}, (buttonIndex: any) => buttonIndex === 0 && Clipboard.setString(message.text)
+		);
+	}
+
+	useEffect(() => {
+		if (!order?.id || messages?.loading) return
+		readMessages && readMessages()
+	}, [order?.id, messages?.loading])
+
 	return (
 		<View style={{ height: getViewHeight(), width: '100%', paddingTop: 12, backgroundColor: 'white' }}>
 			<Wrapper>
@@ -473,6 +494,7 @@ const MessagesUI = (props: MessagesParams) => {
 					onSend={onSubmit}
 					onInputTextChanged={onChangeMessage}
 					alignTop
+					onLongPress={(context: any, message: any) => onLongPress(context, message)}
 					scrollToBottom
 					renderAvatarOnTop
 					renderUsernameOnMessage