ordering-ui-react-native 0.12.23 → 0.12.27

package/themes/single-business/src/components/OrderDetails/index.tsx

@@ -1,786 +1,786 @@
-import React, { useState, useEffect } from 'react';
-import { View, StyleSheet, BackHandler } from 'react-native';
-import Spinner from 'react-native-loading-spinner-overlay';
-import LinearGradient from 'react-native-linear-gradient';
-import { Messages } from '../Messages';
-import {
-	useLanguage,
-	OrderDetails as OrderDetailsConTableoller,
-	useUtils,
-	useConfig,
-	useSession,
-} from 'ordering-components/native';
-import { useTheme } from 'styled-components/native';
-import {
-	OrderDetailsContainer,
-	Header,
-	OrderContent,
-	OrderBusiness,
-	Logo,
-	OrderData,
-	OrderInfo,
-	OrderStatus,
-	StaturBar,
-	StatusImage,
-	OrderCustomer,
-	CustomerPhoto,
-	InfoBlock,
-	HeaderInfo,
-	Customer,
-	OrderProducts,
-	Table,
-	OrderBill,
-	Total,
-	NavBack,
-	Icons,
-	OrderDriver,
-	Map,
-} from './styles';
-import { OButton, OIcon, OModal, OText } from '../shared';
-import { ProductItemAccordion } from '../ProductItemAccordion';
-import { TouchableOpacity } from 'react-native-gesture-handler';
-import { OrderDetailsParams } from '../../types';
-import { USER_TYPE } from '../../config/constants';
-import { GoogleMap } from '../GoogleMap';
-import { verifyDecimals } from '../../utils';
-
-export const OrderDetailsUI = (props: OrderDetailsParams) => {
-	const {
-		navigation,
-		messages,
-		setMessages,
-		readMessages,
-		messagesReadList,
-		isFromCheckout,
-		driverLocation,
-    onNavigationRedirect
-	} = props;
-
-	const theme = useTheme();
-
-	const styles = StyleSheet.create({
-		rowDirection: {
-			flexDirection: 'row',
-		},
-		statusBar: {
-			height: 12,
-		},
-		logo: {
-			width: 75,
-			height: 75,
-			borderRadius: 10,
-		},
-		textBold: {
-			fontWeight: 'bold',
-		},
-		btnBackArrow: {
-			borderWidth: 0,
-			backgroundColor: theme.colors.clear,
-			borderColor: theme.colors.clear,
-			shadowColor: theme.colors.clear,
-			alignItems: 'flex-start',
-			justifyContent: 'flex-start',
-			paddingLeft: 0,
-			height: 30,
-			width: 40,
-		},
-	});
-
-	const [, t] = useLanguage();
-	const [{ parsePrice, parseNumber, parseDate }] = useUtils();
-	const [{ user }] = useSession();
-	const [{ configs }] = useConfig();
-
-	const [openModalForBusiness, setOpenModalForBusiness] = useState(false);
-	const [openModalForDriver, setOpenModalForDriver] = useState(false);
-  const [isReviewed, setIsReviewed] = useState(false)
-	const [unreadAlert, setUnreadAlert] = useState({
-		business: false,
-		driver: false,
-	});
-	const { order, businessData } = props.order;
-
-	const getOrderStatus = (s: string) => {
-		const status = parseInt(s);
-		const orderStatus = [
-			{
-				key: 0,
-				value: t('PENDING', 'Pending'),
-				slug: 'PENDING',
-				percentage: 0.25,
-				image: theme.images.order.status0,
-			},
-			{
-				key: 1,
-				value: t('COMPLETED', 'Completed'),
-				slug: 'COMPLETED',
-				percentage: 1,
-				image: theme.images.order.status1,
-			},
-			{
-				key: 2,
-				value: t('REJECTED', 'Rejected'),
-				slug: 'REJECTED',
-				percentage: 0,
-				image: theme.images.order.status2,
-			},
-			{
-				key: 3,
-				value: t('DRIVER_IN_BUSINESS', 'Driver in business'),
-				slug: 'DRIVER_IN_BUSINESS',
-				percentage: 0.6,
-				image: theme.images.order.status3,
-			},
-			{
-				key: 4,
-				value: t('PREPARATION_COMPLETED', 'Preparation Completed'),
-				slug: 'PREPARATION_COMPLETED',
-				percentage: 0.7,
-				image: theme.images.order.status4,
-			},
-			{
-				key: 5,
-				value: t('REJECTED_BY_BUSINESS', 'Rejected by business'),
-				slug: 'REJECTED_BY_BUSINESS',
-				percentage: 0,
-				image: theme.images.order.status5,
-			},
-			{
-				key: 6,
-				value: t('REJECTED_BY_DRIVER', 'Rejected by Driver'),
-				slug: 'REJECTED_BY_DRIVER',
-				percentage: 0,
-				image: theme.images.order.status6,
-			},
-			{
-				key: 7,
-				value: t('ACCEPTED_BY_BUSINESS', 'Accepted by business'),
-				slug: 'ACCEPTED_BY_BUSINESS',
-				percentage: 0.35,
-				image: theme.images.order.status7,
-			},
-			{
-				key: 8,
-				value: t('ACCEPTED_BY_DRIVER', 'Accepted by driver'),
-				slug: 'ACCEPTED_BY_DRIVER',
-				percentage: 0.45,
-				image: theme.images.order.status8,
-			},
-			{
-				key: 9,
-				value: t('PICK_UP_COMPLETED_BY_DRIVER', 'Pick up completed by driver'),
-				slug: 'PICK_UP_COMPLETED_BY_DRIVER',
-				percentage: 0.8,
-				image: theme.images.order.status9,
-			},
-			{
-				key: 10,
-				value: t('PICK_UP_FAILED_BY_DRIVER', 'Pick up Failed by driver'),
-				slug: 'PICK_UP_FAILED_BY_DRIVER',
-				percentage: 0,
-				image: theme.images.order.status10,
-			},
-			{
-				key: 11,
-				value: t(
-					'DELIVERY_COMPLETED_BY_DRIVER',
-					'Delivery completed by driver',
-				),
-				slug: 'DELIVERY_COMPLETED_BY_DRIVER',
-				percentage: 1,
-				image: theme.images.order.status11,
-			},
-			{
-				key: 12,
-				value: t('DELIVERY_FAILED_BY_DRIVER', 'Delivery Failed by driver'),
-				slug: 'DELIVERY_FAILED_BY_DRIVER',
-				percentage: 0,
-				image: theme.images.order.status12,
-			},
-			{
-				key: 13,
-				value: t('PREORDER', 'PreOrder'),
-				slug: 'PREORDER',
-				percentage: 0,
-				image: theme.images.order.status13,
-			},
-			{
-				key: 14,
-				value: t('ORDER_NOT_READY', 'Order not ready'),
-				slug: 'ORDER_NOT_READY',
-				percentage: 0,
-				image: theme.images.order.status13,
-			},
-			{
-				key: 15,
-				value: t(
-					'ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER',
-					'Order picked up completed by customer',
-				),
-				slug: 'ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER',
-				percentage: 100,
-				image: theme.images.order.status1,
-			},
-			{
-				key: 16,
-				value: t('CANCELLED_BY_CUSTOMER', 'Cancelled by customer'),
-				slug: 'CANCELLED_BY_CUSTOMER',
-				percentage: 0,
-				image: theme.images.order.status2,
-			},
-			{
-				key: 17,
-				value: t(
-					'ORDER_NOT_PICKEDUP_BY_CUSTOMER',
-					'Order not picked up by customer',
-				),
-				slug: 'ORDER_NOT_PICKEDUP_BY_CUSTOMER',
-				percentage: 0,
-				image: theme.images.order.status2,
-			},
-			{
-				key: 18,
-				value: t(
-					'DRIVER_ALMOST_ARRIVED_TO_BUSINESS',
-					'Driver almost arrived to business',
-				),
-				slug: 'DRIVER_ALMOST_ARRIVED_TO_BUSINESS',
-				percentage: 0.15,
-				image: theme.images.order.status3,
-			},
-			{
-				key: 19,
-				value: t(
-					'DRIVER_ALMOST_ARRIVED_TO_CUSTOMER',
-					'Driver almost arrived to customer',
-				),
-				slug: 'DRIVER_ALMOST_ARRIVED_TO_CUSTOMER',
-				percentage: 0.9,
-				image: theme.images.order.status11,
-			},
-			{
-				key: 20,
-				value: t(
-					'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS',
-					'Customer almost arrived to business',
-				),
-				slug: 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS',
-				percentage: 90,
-				image: theme.images.order.status7,
-			},
-			{
-				key: 21,
-				value: t(
-					'ORDER_CUSTOMER_ARRIVED_BUSINESS',
-					'Customer arrived to business',
-				),
-				slug: 'ORDER_CUSTOMER_ARRIVED_BUSINESS',
-				percentage: 95,
-				image: theme.images.order.status7,
-			},
-		];
-
-		const objectStatus = orderStatus.find((o) => o.key === status);
-
-		return objectStatus && objectStatus;
-	};
-
-	const handleOpenMessagesForBusiness = () => {
-		setOpenModalForBusiness(true);
-		readMessages && readMessages();
-		setUnreadAlert({ ...unreadAlert, business: false });
-	};
-
-	const handleOpenMessagesForDriver = () => {
-		setOpenModalForDriver(true);
-		readMessages && readMessages();
-		setUnreadAlert({ ...unreadAlert, driver: false });
-	};
-
-	const unreadMessages = () => {
-		const length = messages?.messages.length;
-		const unreadLength = order?.unread_count;
-		const unreadedMessages = messages.messages.slice(
-			length - unreadLength,
-			length,
-		);
-		const business = unreadedMessages.some((message: any) =>
-			message?.can_see?.includes(2),
-		);
-		const driver = unreadedMessages.some((message: any) =>
-			message?.can_see?.includes(4),
-		);
-		setUnreadAlert({ business, driver });
-	};
-
-	const handleCloseModal = () => {
-		setOpenModalForBusiness(false);
-		setOpenModalForDriver(false);
-	};
-
-	const handleArrowBack: any = () => {
-		if (!isFromCheckout) {
-			navigation?.canGoBack() && navigation.goBack();
-			return;
-		}
-		navigation.navigate('BottomTab');
-	};
-
-	useEffect(() => {
-		BackHandler.addEventListener('hardwareBackPress', handleArrowBack);
-		return () => {
-			BackHandler.removeEventListener('hardwareBackPress', handleArrowBack);
-		};
-	}, []);
-
-	useEffect(() => {
-		if (messagesReadList?.length) {
-			openModalForBusiness
-				? setUnreadAlert({ ...unreadAlert, business: false })
-				: setUnreadAlert({ ...unreadAlert, driver: false });
-		}
-	}, [messagesReadList]);
-
-	const locations = [
-		{
-			...order?.driver?.location,
-			title: t('DRIVER', 'Driver'),
-			icon:
-				order?.driver?.photo ||
-				'https://res.cloudinary.com/demo/image/fetch/c_thumb,g_face,r_max/https://www.freeiconspng.com/thumbs/driver-icon/driver-icon-14.png',
-		},
-		{
-			...order?.business?.location,
-			title: order?.business?.name,
-			icon: order?.business?.logo || theme.images.dummies.businessLogo,
-		},
-		{
-			...order?.customer?.location,
-			title: t('YOUR_LOCATION', 'Your Location'),
-			icon:
-				order?.customer?.photo ||
-				'https://res.cloudinary.com/demo/image/upload/c_thumb,g_face,r_max/d_avatar.png/non_existing_id.png',
-		},
-	];
-
-	useEffect(() => {
-		if (driverLocation) {
-			locations[0] = driverLocation;
-		}
-	}, [driverLocation]);
-
-	return (
-		<OrderDetailsContainer keyboardShouldPersistTaps="handled">
-			<Spinner visible={!order || Object.keys(order).length === 0} />
-			{order && Object.keys(order).length > 0 && (
-				<>
-					<Header>
-						<OButton
-							imgLeftSrc={theme.images.general.arrow_left}
-							imgRightSrc={null}
-							style={styles.btnBackArrow}
-							onClick={() => handleArrowBack()}
-							imgLeftStyle={{ tintColor: theme.colors.disabled, width: 20 }}
-						/>
-						<OrderInfo>
-							<OrderData>
-								<OText
-									size={20}
-									lineHeight={30}
-									weight={'600'}
-									color={theme.colors.textNormal}>
-									{t('ORDER', 'Order')} #{order?.id}
-								</OText>
-								<OText size={12} lineHeight={18} color={theme.colors.textNormal}>
-									{order?.delivery_datetime_utc
-										? parseDate(order?.delivery_datetime_utc)
-										: parseDate(order?.delivery_datetime, { utc: false })}
-								</OText>
-                {(
-                  parseInt(order?.status, 10) === 1 ||
-                  parseInt(order?.status, 10) === 11 ||
-                  parseInt(order?.status, 10) === 15
-                ) && !order.review && !isReviewed && (
-                  <TouchableOpacity
-                    activeOpacity={0.7}
-                    style={{ marginTop: 6 }}
-                    onPress={() => onNavigationRedirect('ReviewOrder', {
-                      order: {
-                        id: order?.id,
-                        business_id: order?.business_id,
-                        logo: order.business?.logo,
-                        driver: order?.driver,
-                        products: order?.products,
-                        review: order?.review,
-                        user_review: order?.user_review
-                      },
-                      setIsReviewed
-                    })}
-                  >
-                    <OText
-                      size={10}
-                      lineHeight={15}
-                      color={theme.colors.textSecondary}
-                      style={{ textDecorationLine: 'underline' }}>
-                      {t('REVIEW_ORDER', 'Review order')}
-                    </OText>
-                  </TouchableOpacity>
-                )}
-
-								<StaturBar>
-									<LinearGradient
-										start={{ x: 0.0, y: 0.0 }}
-										end={{
-											x: getOrderStatus(order?.status)?.percentage || 0,
-											y: 0,
-										}}
-										locations={[0.9999, 0.9999]}
-										colors={[theme.colors.primary, theme.colors.backgroundGray100]}
-										style={styles.statusBar}
-									/>
-								</StaturBar>
-								<OText
-									size={16}
-									lineHeight={24}
-									weight={'600'}
-									color={theme.colors.textNormal}>
-									{getOrderStatus(order?.status)?.value}
-								</OText>
-							</OrderData>
-							<View
-								style={{
-									height: 8,
-									backgroundColor: theme.colors.backgroundGray100,
-									marginTop: 18,
-									marginHorizontal: -40,
-								}}
-							/>
-						</OrderInfo>
-					</Header>
-					<OrderContent>
-						<OrderBusiness>
-							<OText
-								size={16}
-								lineHeight={24}
-								weight={'500'}
-								color={theme.colors.textNormal}
-								mBottom={12}>
-								{t('FROM', 'From')}
-							</OText>
-							<View
-								style={{
-									display: 'flex',
-									flexDirection: 'column',
-									alignItems: 'flex-start',
-								}}>
-								<View
-									style={{
-										flexDirection: 'row',
-										alignItems: 'center',
-										justifyContent: 'space-between',
-									}}>
-									<OText
-										size={13}
-										lineHeight={20}
-										color={theme.colors.textNormal}
-										style={{ flexGrow: 1, flexBasis: '80%' }}>
-										{order?.business?.name}
-									</OText>
-									<Icons>
-										<TouchableOpacity
-											onPress={() =>
-												props.navigation.navigate('Business', {
-													store: businessData?.slug,
-												})
-											}
-											style={{ paddingEnd: 5 }}>
-											<OIcon
-												src={theme.images.general.phone}
-												width={16}
-												color={theme.colors.disabled}
-											/>
-										</TouchableOpacity>
-										<TouchableOpacity
-											style={{ paddingStart: 5 }}
-											onPress={() => handleOpenMessagesForBusiness()}>
-											<OIcon
-												src={theme.images.general.chat}
-												width={16}
-												color={theme.colors.disabled}
-											/>
-										</TouchableOpacity>
-									</Icons>
-								</View>
-								<OText
-									size={12}
-									lineHeight={18}
-									color={theme.colors.textNormal}
-									mBottom={2}>
-									{order?.business?.email}
-								</OText>
-								<OText
-									size={12}
-									lineHeight={18}
-									color={theme.colors.textNormal}
-									mBottom={2}>
-									{order?.business?.cellphone}
-								</OText>
-								<OText size={12} lineHeight={18} color={theme.colors.textNormal}>
-									{order?.business?.address}
-								</OText>
-							</View>
-						</OrderBusiness>
-						<View
-							style={{
-								height: 8,
-								backgroundColor: theme.colors.backgroundGray100,
-								marginTop: 18,
-								marginHorizontal: -40,
-							}}
-						/>
-						<OrderCustomer>
-							<OText
-								size={16}
-								lineHeight={24}
-								weight={'500'}
-								color={theme.colors.textNormal}
-								mBottom={12}>
-								{t('TO', 'To')}
-							</OText>
-							<Customer>
-								<InfoBlock>
-									<OText
-										size={12}
-										lineHeight={18}
-										color={theme.colors.textNormal}
-										mBottom={2}>
-										{order?.customer?.name} {order?.customer?.lastname}
-									</OText>
-									<OText
-										size={12}
-										lineHeight={18}
-										color={theme.colors.textNormal}
-										mBottom={2}>
-										{order?.customer?.address}
-									</OText>
-									<OText
-										size={12}
-										lineHeight={18}
-										color={theme.colors.textNormal}
-										mBottom={2}>
-										{order?.customer?.cellphone}
-									</OText>
-								</InfoBlock>
-							</Customer>
-							{order?.driver && (
-								<>
-									{order?.driver?.location && parseInt(order?.status) === 9 && (
-										<Map>
-											<GoogleMap
-												location={order?.driver?.location}
-												locations={locations}
-												readOnly
-											/>
-										</Map>
-									)}
-								</>
-							)}
-						</OrderCustomer>
-						{order?.driver && (
-							<>
-								<View
-									style={{
-										height: 8,
-										backgroundColor: theme.colors.backgroundGray100,
-										marginTop: 18,
-										marginHorizontal: -40,
-									}}
-								/>
-								<OrderDriver>
-									<OText size={16} lineHeight={24} weight={'500'} style={{ marginBottom: 10 }}>{t('YOUR_DRIVER', 'Your Driver')}</OText>
-									<Customer>
-										<InfoBlock>
-											<View
-												style={{
-													flexDirection: 'row',
-													alignItems: 'center',
-													justifyContent: 'space-between',
-												}}>
-												<OText size={12} lineHeight={18} color={theme.colors.textNormal} mBottom={2} style={{ flexGrow: 1, flexBasis: '80%' }}>
-													{order?.driver?.name} {order?.driver?.lastname}
-												</OText>
-												<Icons>
-													<TouchableOpacity
-														onPress={() => handleOpenMessagesForDriver()}>
-														<OIcon
-															src={theme.images.general.chat}
-															width={16}
-															color={theme.colors.disabled}
-														/>
-													</TouchableOpacity>
-												</Icons>
-											</View>
-											<OText size={12} lineHeight={18} color={theme.colors.textNormal} mBottom={2}>
-												{order?.driver?.cellphone}
-											</OText>
-										</InfoBlock>
-									</Customer>
-								</OrderDriver>
-							</>
-						)}
-						<View
-							style={{
-								height: 8,
-								backgroundColor: theme.colors.backgroundGray100,
-								marginTop: 18,
-								marginHorizontal: -40,
-							}}
-						/>
-						<HeaderInfo>
-							<OText
-								size={24}
-								color={theme.colors.textNormal}
-								style={{ fontWeight: '600', marginBottom: 16 }}>
-								{t(
-									'YOUR_ORDER_HAS_BEEN_RECEIVED',
-									'Your Order has been received',
-								)}
-							</OText>
-							<OText color={theme.colors.textNormal} size={14} weight={'500'}>
-								{t(
-									'ORDER_MESSAGE_HEADER_TEXT',
-									'Once business accepts your order, we will send you an email, thank you!',
-								)}
-							</OText>
-							<OButton
-								text={t('YOUR_ORDERS', 'Your Orders')}
-								textStyle={{ fontSize: 14, color: theme.colors.primary }}
-								imgRightSrc={null}
-								borderColor={theme.colors.primary}
-								bgColor={theme.colors.clear}
-								style={{ borderRadius: 7.6, borderWidth: 1, height: 44, shadowOpacity: 0 }}
-								parentStyle={{ marginTop: 29, width: '50%' }}
-								onClick={() => navigation.navigate('BottomTab', { screen: 'MyOrders' })}
-							/>
-						</HeaderInfo>
-						<OrderProducts>
-							{order?.products?.length &&
-								order?.products.map((product: any, i: number) => (
-									<ProductItemAccordion
-										key={product?.id || i}
-										product={product}
-										isFromCheckout
-									/>
-								))}
-						</OrderProducts>
-						<OrderBill>
-							<View style={{ height: 1, backgroundColor: theme.colors.border, marginBottom: 17 }} />
-							<Table>
-								<OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{t('SUBTOTAL', 'Subtotal')}</OText>
-								<OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
-									{parsePrice(order?.summary?.subtotal || order?.subtotal)}
-								</OText>
-							</Table>
-							{(order?.summary?.discount > 0 || order?.discount > 0) && (
-								<Table>
-									{order?.offer_type === 1 ? (
-										<OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
-											{t('DISCOUNT', 'Discount')}
-											<OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{`(${verifyDecimals(
-												order?.offer_rate,
-												parsePrice,
-											)}%)`}</OText>
-										</OText>
-									) : (
-										<OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{t('DISCOUNT', 'Discount')}</OText>
-									)}
-									<OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
-										- {parsePrice(order?.summary?.discount || order?.discount)}
-									</OText>
-								</Table>
-							)}
-							{order?.tax_type !== 1 && (
-								<Table>
-									<OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
-										{t('TAX', 'Tax')}
-										{`(${verifyDecimals(order?.tax, parseNumber)}%)`}
-									</OText>
-									<OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
-										{parsePrice(order?.summary?.tax || order?.totalTax)}
-									</OText>
-								</Table>
-							)}
-							{(order?.summary?.delivery_price > 0 ||
-								order?.deliveryFee > 0) && (
-									<Table>
-										<OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
-										<OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
-											{parsePrice(
-												order?.summary?.delivery_price || order?.deliveryFee,
-											)}
-										</OText>
-									</Table>
-								)}
-							<Table>
-								<OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
-									{t('DRIVER_TIP', 'Driver tip')}
-									{(order?.summary?.driver_tip > 0 || order?.driver_tip > 0) &&
-										parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
-										!parseInt(configs?.driver_tip_use_custom?.value, 10) &&
-										`(${verifyDecimals(order?.driver_tip, parseNumber)}%)`}
-								</OText>
-								<OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
-									{parsePrice(
-										order?.summary?.driver_tip || order?.totalDriverTip,
-									)}
-								</OText>
-							</Table>
-							<Table>
-								<OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
-									{t('SERVICE_FEE', 'Service Fee')}
-									{`(${verifyDecimals(order?.service_fee, parseNumber)}%)`}
-								</OText>
-								<OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
-									{parsePrice(
-										order?.summary?.service_fee || order?.serviceFee || 0,
-									)}
-								</OText>
-							</Table>
-							<Total>
-								<Table>
-									<OText size={20} lineHeight={30} weight={'600'} color={theme.colors.textNormal}>{t('TOTAL', 'Total')}</OText>
-									<OText size={20} lineHeight={30} weight={'600'} color={theme.colors.textNormal}>
-										{parsePrice(order?.summary?.total || order?.total)}
-									</OText>
-								</Table>
-							</Total>
-						</OrderBill>
-					</OrderContent>
-				</>
-			)}
-			<OModal
-				open={openModalForBusiness || openModalForDriver}
-				customClose
-				entireModal
-				onClose={() => handleCloseModal()}>
-				<Messages
-					type={openModalForBusiness ? USER_TYPE.BUSINESS : USER_TYPE.DRIVER}
-					orderId={order?.id}
-					messages={messages}
-					order={order}
-					setMessages={setMessages}
-					onClose={() => handleCloseModal()}
-				/>
-			</OModal>
-		</OrderDetailsContainer>
-	);
-};
-
-export const OrderDetails = (props: OrderDetailsParams) => {
-	const orderDetailsProps = {
-		...props,
-		UIComponent: OrderDetailsUI,
-	};
-
-	return <OrderDetailsConTableoller {...orderDetailsProps} />;
-};
+import React, { useState, useEffect } from 'react';
+import { View, StyleSheet, BackHandler } from 'react-native';
+import Spinner from 'react-native-loading-spinner-overlay';
+import LinearGradient from 'react-native-linear-gradient';
+import { Messages } from '../Messages';
+import {
+	useLanguage,
+	OrderDetails as OrderDetailsConTableoller,
+	useUtils,
+	useConfig,
+	useSession,
+} from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
+import {
+	OrderDetailsContainer,
+	Header,
+	OrderContent,
+	OrderBusiness,
+	Logo,
+	OrderData,
+	OrderInfo,
+	OrderStatus,
+	StaturBar,
+	StatusImage,
+	OrderCustomer,
+	CustomerPhoto,
+	InfoBlock,
+	HeaderInfo,
+	Customer,
+	OrderProducts,
+	Table,
+	OrderBill,
+	Total,
+	NavBack,
+	Icons,
+	OrderDriver,
+	Map,
+} from './styles';
+import { OButton, OIcon, OModal, OText } from '../shared';
+import { ProductItemAccordion } from '../ProductItemAccordion';
+import { TouchableOpacity } from 'react-native-gesture-handler';
+import { OrderDetailsParams } from '../../types';
+import { USER_TYPE } from '../../config/constants';
+import { GoogleMap } from '../GoogleMap';
+import { verifyDecimals } from '../../utils';
+
+export const OrderDetailsUI = (props: OrderDetailsParams) => {
+	const {
+		navigation,
+		messages,
+		setMessages,
+		readMessages,
+		messagesReadList,
+		isFromCheckout,
+		driverLocation,
+    onNavigationRedirect
+	} = props;
+
+	const theme = useTheme();
+
+	const styles = StyleSheet.create({
+		rowDirection: {
+			flexDirection: 'row',
+		},
+		statusBar: {
+			height: 12,
+		},
+		logo: {
+			width: 75,
+			height: 75,
+			borderRadius: 10,
+		},
+		textBold: {
+			fontWeight: 'bold',
+		},
+		btnBackArrow: {
+			borderWidth: 0,
+			backgroundColor: theme.colors.clear,
+			borderColor: theme.colors.clear,
+			shadowColor: theme.colors.clear,
+			alignItems: 'flex-start',
+			justifyContent: 'flex-start',
+			paddingLeft: 0,
+			height: 30,
+			width: 40,
+		},
+	});
+
+	const [, t] = useLanguage();
+	const [{ parsePrice, parseNumber, parseDate }] = useUtils();
+	const [{ user }] = useSession();
+	const [{ configs }] = useConfig();
+
+	const [openModalForBusiness, setOpenModalForBusiness] = useState(false);
+	const [openModalForDriver, setOpenModalForDriver] = useState(false);
+  const [isReviewed, setIsReviewed] = useState(false)
+	const [unreadAlert, setUnreadAlert] = useState({
+		business: false,
+		driver: false,
+	});
+	const { order, businessData } = props.order;
+
+	const getOrderStatus = (s: string) => {
+		const status = parseInt(s);
+		const orderStatus = [
+			{
+				key: 0,
+				value: t('PENDING', 'Pending'),
+				slug: 'PENDING',
+				percentage: 0.25,
+				image: theme.images.order.status0,
+			},
+			{
+				key: 1,
+				value: t('COMPLETED', 'Completed'),
+				slug: 'COMPLETED',
+				percentage: 1,
+				image: theme.images.order.status1,
+			},
+			{
+				key: 2,
+				value: t('REJECTED', 'Rejected'),
+				slug: 'REJECTED',
+				percentage: 0,
+				image: theme.images.order.status2,
+			},
+			{
+				key: 3,
+				value: t('DRIVER_IN_BUSINESS', 'Driver in business'),
+				slug: 'DRIVER_IN_BUSINESS',
+				percentage: 0.6,
+				image: theme.images.order.status3,
+			},
+			{
+				key: 4,
+				value: t('PREPARATION_COMPLETED', 'Preparation Completed'),
+				slug: 'PREPARATION_COMPLETED',
+				percentage: 0.7,
+				image: theme.images.order.status4,
+			},
+			{
+				key: 5,
+				value: t('REJECTED_BY_BUSINESS', 'Rejected by business'),
+				slug: 'REJECTED_BY_BUSINESS',
+				percentage: 0,
+				image: theme.images.order.status5,
+			},
+			{
+				key: 6,
+				value: t('REJECTED_BY_DRIVER', 'Rejected by Driver'),
+				slug: 'REJECTED_BY_DRIVER',
+				percentage: 0,
+				image: theme.images.order.status6,
+			},
+			{
+				key: 7,
+				value: t('ACCEPTED_BY_BUSINESS', 'Accepted by business'),
+				slug: 'ACCEPTED_BY_BUSINESS',
+				percentage: 0.35,
+				image: theme.images.order.status7,
+			},
+			{
+				key: 8,
+				value: t('ACCEPTED_BY_DRIVER', 'Accepted by driver'),
+				slug: 'ACCEPTED_BY_DRIVER',
+				percentage: 0.45,
+				image: theme.images.order.status8,
+			},
+			{
+				key: 9,
+				value: t('PICK_UP_COMPLETED_BY_DRIVER', 'Pick up completed by driver'),
+				slug: 'PICK_UP_COMPLETED_BY_DRIVER',
+				percentage: 0.8,
+				image: theme.images.order.status9,
+			},
+			{
+				key: 10,
+				value: t('PICK_UP_FAILED_BY_DRIVER', 'Pick up Failed by driver'),
+				slug: 'PICK_UP_FAILED_BY_DRIVER',
+				percentage: 0,
+				image: theme.images.order.status10,
+			},
+			{
+				key: 11,
+				value: t(
+					'DELIVERY_COMPLETED_BY_DRIVER',
+					'Delivery completed by driver',
+				),
+				slug: 'DELIVERY_COMPLETED_BY_DRIVER',
+				percentage: 1,
+				image: theme.images.order.status11,
+			},
+			{
+				key: 12,
+				value: t('DELIVERY_FAILED_BY_DRIVER', 'Delivery Failed by driver'),
+				slug: 'DELIVERY_FAILED_BY_DRIVER',
+				percentage: 0,
+				image: theme.images.order.status12,
+			},
+			{
+				key: 13,
+				value: t('PREORDER', 'PreOrder'),
+				slug: 'PREORDER',
+				percentage: 0,
+				image: theme.images.order.status13,
+			},
+			{
+				key: 14,
+				value: t('ORDER_NOT_READY', 'Order not ready'),
+				slug: 'ORDER_NOT_READY',
+				percentage: 0,
+				image: theme.images.order.status13,
+			},
+			{
+				key: 15,
+				value: t(
+					'ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER',
+					'Order picked up completed by customer',
+				),
+				slug: 'ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER',
+				percentage: 100,
+				image: theme.images.order.status1,
+			},
+			{
+				key: 16,
+				value: t('CANCELLED_BY_CUSTOMER', 'Cancelled by customer'),
+				slug: 'CANCELLED_BY_CUSTOMER',
+				percentage: 0,
+				image: theme.images.order.status2,
+			},
+			{
+				key: 17,
+				value: t(
+					'ORDER_NOT_PICKEDUP_BY_CUSTOMER',
+					'Order not picked up by customer',
+				),
+				slug: 'ORDER_NOT_PICKEDUP_BY_CUSTOMER',
+				percentage: 0,
+				image: theme.images.order.status2,
+			},
+			{
+				key: 18,
+				value: t(
+					'DRIVER_ALMOST_ARRIVED_TO_BUSINESS',
+					'Driver almost arrived to business',
+				),
+				slug: 'DRIVER_ALMOST_ARRIVED_TO_BUSINESS',
+				percentage: 0.15,
+				image: theme.images.order.status3,
+			},
+			{
+				key: 19,
+				value: t(
+					'DRIVER_ALMOST_ARRIVED_TO_CUSTOMER',
+					'Driver almost arrived to customer',
+				),
+				slug: 'DRIVER_ALMOST_ARRIVED_TO_CUSTOMER',
+				percentage: 0.9,
+				image: theme.images.order.status11,
+			},
+			{
+				key: 20,
+				value: t(
+					'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS',
+					'Customer almost arrived to business',
+				),
+				slug: 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS',
+				percentage: 90,
+				image: theme.images.order.status7,
+			},
+			{
+				key: 21,
+				value: t(
+					'ORDER_CUSTOMER_ARRIVED_BUSINESS',
+					'Customer arrived to business',
+				),
+				slug: 'ORDER_CUSTOMER_ARRIVED_BUSINESS',
+				percentage: 95,
+				image: theme.images.order.status7,
+			},
+		];
+
+		const objectStatus = orderStatus.find((o) => o.key === status);
+
+		return objectStatus && objectStatus;
+	};
+
+	const handleOpenMessagesForBusiness = () => {
+		setOpenModalForBusiness(true);
+		readMessages && readMessages();
+		setUnreadAlert({ ...unreadAlert, business: false });
+	};
+
+	const handleOpenMessagesForDriver = () => {
+		setOpenModalForDriver(true);
+		readMessages && readMessages();
+		setUnreadAlert({ ...unreadAlert, driver: false });
+	};
+
+	const unreadMessages = () => {
+		const length = messages?.messages.length;
+		const unreadLength = order?.unread_count;
+		const unreadedMessages = messages.messages.slice(
+			length - unreadLength,
+			length,
+		);
+		const business = unreadedMessages.some((message: any) =>
+			message?.can_see?.includes(2),
+		);
+		const driver = unreadedMessages.some((message: any) =>
+			message?.can_see?.includes(4),
+		);
+		setUnreadAlert({ business, driver });
+	};
+
+	const handleCloseModal = () => {
+		setOpenModalForBusiness(false);
+		setOpenModalForDriver(false);
+	};
+
+	const handleArrowBack: any = () => {
+		if (!isFromCheckout) {
+			navigation?.canGoBack() && navigation.goBack();
+			return;
+		}
+		navigation.navigate('BottomTab');
+	};
+
+	useEffect(() => {
+		BackHandler.addEventListener('hardwareBackPress', handleArrowBack);
+		return () => {
+			BackHandler.removeEventListener('hardwareBackPress', handleArrowBack);
+		};
+	}, []);
+
+	useEffect(() => {
+		if (messagesReadList?.length) {
+			openModalForBusiness
+				? setUnreadAlert({ ...unreadAlert, business: false })
+				: setUnreadAlert({ ...unreadAlert, driver: false });
+		}
+	}, [messagesReadList]);
+
+	const locations = [
+		{
+			...order?.driver?.location,
+			title: t('DRIVER', 'Driver'),
+			icon:
+				order?.driver?.photo ||
+				'https://res.cloudinary.com/demo/image/fetch/c_thumb,g_face,r_max/https://www.freeiconspng.com/thumbs/driver-icon/driver-icon-14.png',
+		},
+		{
+			...order?.business?.location,
+			title: order?.business?.name,
+			icon: order?.business?.logo || theme.images.dummies.businessLogo,
+		},
+		{
+			...order?.customer?.location,
+			title: t('YOUR_LOCATION', 'Your Location'),
+			icon:
+				order?.customer?.photo ||
+				'https://res.cloudinary.com/demo/image/upload/c_thumb,g_face,r_max/d_avatar.png/non_existing_id.png',
+		},
+	];
+
+	useEffect(() => {
+		if (driverLocation) {
+			locations[0] = driverLocation;
+		}
+	}, [driverLocation]);
+
+	return (
+		<OrderDetailsContainer keyboardShouldPersistTaps="handled">
+			<Spinner visible={!order || Object.keys(order).length === 0} />
+			{order && Object.keys(order).length > 0 && (
+				<>
+					<Header>
+						<OButton
+							imgLeftSrc={theme.images.general.arrow_left}
+							imgRightSrc={null}
+							style={styles.btnBackArrow}
+							onClick={() => handleArrowBack()}
+							imgLeftStyle={{ tintColor: theme.colors.disabled, width: 20 }}
+						/>
+						<OrderInfo>
+							<OrderData>
+								<OText
+									size={20}
+									lineHeight={30}
+									weight={'600'}
+									color={theme.colors.textNormal}>
+									{t('ORDER', 'Order')} #{order?.id}
+								</OText>
+								<OText size={12} lineHeight={18} color={theme.colors.textNormal}>
+									{order?.delivery_datetime_utc
+										? parseDate(order?.delivery_datetime_utc)
+										: parseDate(order?.delivery_datetime, { utc: false })}
+								</OText>
+                {(
+                  parseInt(order?.status, 10) === 1 ||
+                  parseInt(order?.status, 10) === 11 ||
+                  parseInt(order?.status, 10) === 15
+                ) && !order.review && !isReviewed && (
+                  <TouchableOpacity
+                    activeOpacity={0.7}
+                    style={{ marginTop: 6 }}
+                    onPress={() => onNavigationRedirect('ReviewOrder', {
+                      order: {
+                        id: order?.id,
+                        business_id: order?.business_id,
+                        logo: order.business?.logo,
+                        driver: order?.driver,
+                        products: order?.products,
+                        review: order?.review,
+                        user_review: order?.user_review
+                      },
+                      setIsReviewed
+                    })}
+                  >
+                    <OText
+                      size={10}
+                      lineHeight={15}
+                      color={theme.colors.textSecondary}
+                      style={{ textDecorationLine: 'underline' }}>
+                      {t('REVIEW_ORDER', 'Review order')}
+                    </OText>
+                  </TouchableOpacity>
+                )}
+
+								<StaturBar>
+									<LinearGradient
+										start={{ x: 0.0, y: 0.0 }}
+										end={{
+											x: getOrderStatus(order?.status)?.percentage || 0,
+											y: 0,
+										}}
+										locations={[0.9999, 0.9999]}
+										colors={[theme.colors.primary, theme.colors.backgroundGray100]}
+										style={styles.statusBar}
+									/>
+								</StaturBar>
+								<OText
+									size={16}
+									lineHeight={24}
+									weight={'600'}
+									color={theme.colors.textNormal}>
+									{getOrderStatus(order?.status)?.value}
+								</OText>
+							</OrderData>
+							<View
+								style={{
+									height: 8,
+									backgroundColor: theme.colors.backgroundGray100,
+									marginTop: 18,
+									marginHorizontal: -40,
+								}}
+							/>
+						</OrderInfo>
+					</Header>
+					<OrderContent>
+						<OrderBusiness>
+							<OText
+								size={16}
+								lineHeight={24}
+								weight={'500'}
+								color={theme.colors.textNormal}
+								mBottom={12}>
+								{t('FROM', 'From')}
+							</OText>
+							<View
+								style={{
+									display: 'flex',
+									flexDirection: 'column',
+									alignItems: 'flex-start',
+								}}>
+								<View
+									style={{
+										flexDirection: 'row',
+										alignItems: 'center',
+										justifyContent: 'space-between',
+									}}>
+									<OText
+										size={13}
+										lineHeight={20}
+										color={theme.colors.textNormal}
+										style={{ flexGrow: 1, flexBasis: '80%' }}>
+										{order?.business?.name}
+									</OText>
+									<Icons>
+										<TouchableOpacity
+											onPress={() =>
+												props.navigation.navigate('Business', {
+													store: businessData?.slug,
+												})
+											}
+											style={{ paddingEnd: 5 }}>
+											<OIcon
+												src={theme.images.general.phone}
+												width={16}
+												color={theme.colors.disabled}
+											/>
+										</TouchableOpacity>
+										<TouchableOpacity
+											style={{ paddingStart: 5 }}
+											onPress={() => handleOpenMessagesForBusiness()}>
+											<OIcon
+												src={theme.images.general.chat}
+												width={16}
+												color={theme.colors.disabled}
+											/>
+										</TouchableOpacity>
+									</Icons>
+								</View>
+								<OText
+									size={12}
+									lineHeight={18}
+									color={theme.colors.textNormal}
+									mBottom={2}>
+									{order?.business?.email}
+								</OText>
+								<OText
+									size={12}
+									lineHeight={18}
+									color={theme.colors.textNormal}
+									mBottom={2}>
+									{order?.business?.cellphone}
+								</OText>
+								<OText size={12} lineHeight={18} color={theme.colors.textNormal}>
+									{order?.business?.address}
+								</OText>
+							</View>
+						</OrderBusiness>
+						<View
+							style={{
+								height: 8,
+								backgroundColor: theme.colors.backgroundGray100,
+								marginTop: 18,
+								marginHorizontal: -40,
+							}}
+						/>
+						<OrderCustomer>
+							<OText
+								size={16}
+								lineHeight={24}
+								weight={'500'}
+								color={theme.colors.textNormal}
+								mBottom={12}>
+								{t('TO', 'To')}
+							</OText>
+							<Customer>
+								<InfoBlock>
+									<OText
+										size={12}
+										lineHeight={18}
+										color={theme.colors.textNormal}
+										mBottom={2}>
+										{order?.customer?.name} {order?.customer?.lastname}
+									</OText>
+									<OText
+										size={12}
+										lineHeight={18}
+										color={theme.colors.textNormal}
+										mBottom={2}>
+										{order?.customer?.address}
+									</OText>
+									<OText
+										size={12}
+										lineHeight={18}
+										color={theme.colors.textNormal}
+										mBottom={2}>
+										{order?.customer?.cellphone}
+									</OText>
+								</InfoBlock>
+							</Customer>
+							{order?.driver && (
+								<>
+									{order?.driver?.location && parseInt(order?.status) === 9 && (
+										<Map>
+											<GoogleMap
+												location={order?.driver?.location}
+												locations={locations}
+												readOnly
+											/>
+										</Map>
+									)}
+								</>
+							)}
+						</OrderCustomer>
+						{order?.driver && (
+							<>
+								<View
+									style={{
+										height: 8,
+										backgroundColor: theme.colors.backgroundGray100,
+										marginTop: 18,
+										marginHorizontal: -40,
+									}}
+								/>
+								<OrderDriver>
+									<OText size={16} lineHeight={24} weight={'500'} style={{ marginBottom: 10 }}>{t('YOUR_DRIVER', 'Your Driver')}</OText>
+									<Customer>
+										<InfoBlock>
+											<View
+												style={{
+													flexDirection: 'row',
+													alignItems: 'center',
+													justifyContent: 'space-between',
+												}}>
+												<OText size={12} lineHeight={18} color={theme.colors.textNormal} mBottom={2} style={{ flexGrow: 1, flexBasis: '80%' }}>
+													{order?.driver?.name} {order?.driver?.lastname}
+												</OText>
+												<Icons>
+													<TouchableOpacity
+														onPress={() => handleOpenMessagesForDriver()}>
+														<OIcon
+															src={theme.images.general.chat}
+															width={16}
+															color={theme.colors.disabled}
+														/>
+													</TouchableOpacity>
+												</Icons>
+											</View>
+											<OText size={12} lineHeight={18} color={theme.colors.textNormal} mBottom={2}>
+												{order?.driver?.cellphone}
+											</OText>
+										</InfoBlock>
+									</Customer>
+								</OrderDriver>
+							</>
+						)}
+						<View
+							style={{
+								height: 8,
+								backgroundColor: theme.colors.backgroundGray100,
+								marginTop: 18,
+								marginHorizontal: -40,
+							}}
+						/>
+						<HeaderInfo>
+							<OText
+								size={24}
+								color={theme.colors.textNormal}
+								style={{ fontWeight: '600', marginBottom: 16 }}>
+								{t(
+									'YOUR_ORDER_HAS_BEEN_RECEIVED',
+									'Your Order has been received',
+								)}
+							</OText>
+							<OText color={theme.colors.textNormal} size={14} weight={'500'}>
+								{t(
+									'ORDER_MESSAGE_HEADER_TEXT',
+									'Once business accepts your order, we will send you an email, thank you!',
+								)}
+							</OText>
+							<OButton
+								text={t('YOUR_ORDERS', 'Your Orders')}
+								textStyle={{ fontSize: 14, color: theme.colors.primary }}
+								imgRightSrc={null}
+								borderColor={theme.colors.primary}
+								bgColor={theme.colors.clear}
+								style={{ borderRadius: 7.6, borderWidth: 1, height: 44, shadowOpacity: 0 }}
+								parentStyle={{ marginTop: 29, width: '50%' }}
+								onClick={() => navigation.navigate('BottomTab', { screen: 'MyOrders' })}
+							/>
+						</HeaderInfo>
+						<OrderProducts>
+							{order?.products?.length &&
+								order?.products.map((product: any, i: number) => (
+									<ProductItemAccordion
+										key={product?.id || i}
+										product={product}
+										isFromCheckout
+									/>
+								))}
+						</OrderProducts>
+						<OrderBill>
+							<View style={{ height: 1, backgroundColor: theme.colors.border, marginBottom: 17 }} />
+							<Table>
+								<OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{t('SUBTOTAL', 'Subtotal')}</OText>
+								<OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
+									{parsePrice(order?.summary?.subtotal || order?.subtotal)}
+								</OText>
+							</Table>
+							{(order?.summary?.discount > 0 || order?.discount > 0) && (
+								<Table>
+									{order?.offer_type === 1 ? (
+										<OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
+											{t('DISCOUNT', 'Discount')}
+											<OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{`(${verifyDecimals(
+												order?.offer_rate,
+												parsePrice,
+											)}%)`}</OText>
+										</OText>
+									) : (
+										<OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{t('DISCOUNT', 'Discount')}</OText>
+									)}
+									<OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
+										- {parsePrice(order?.summary?.discount || order?.discount)}
+									</OText>
+								</Table>
+							)}
+							{order?.tax_type !== 1 && (
+								<Table>
+									<OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
+										{t('TAX', 'Tax')}
+										{`(${verifyDecimals(order?.tax, parseNumber)}%)`}
+									</OText>
+									<OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
+										{parsePrice(order?.summary?.tax || order?.totalTax)}
+									</OText>
+								</Table>
+							)}
+							{(order?.summary?.delivery_price > 0 ||
+								order?.deliveryFee > 0) && (
+									<Table>
+										<OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
+										<OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
+											{parsePrice(
+												order?.summary?.delivery_price || order?.deliveryFee,
+											)}
+										</OText>
+									</Table>
+								)}
+							<Table>
+								<OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
+									{t('DRIVER_TIP', 'Driver tip')}
+									{(order?.summary?.driver_tip > 0 || order?.driver_tip > 0) &&
+										parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
+										!parseInt(configs?.driver_tip_use_custom?.value, 10) &&
+										`(${verifyDecimals(order?.driver_tip, parseNumber)}%)`}
+								</OText>
+								<OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
+									{parsePrice(
+										order?.summary?.driver_tip || order?.totalDriverTip,
+									)}
+								</OText>
+							</Table>
+							<Table>
+								<OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
+									{t('SERVICE_FEE', 'Service Fee')}
+									{`(${verifyDecimals(order?.service_fee, parseNumber)}%)`}
+								</OText>
+								<OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
+									{parsePrice(
+										order?.summary?.service_fee || order?.serviceFee || 0,
+									)}
+								</OText>
+							</Table>
+							<Total>
+								<Table>
+									<OText size={20} lineHeight={30} weight={'600'} color={theme.colors.textNormal}>{t('TOTAL', 'Total')}</OText>
+									<OText size={20} lineHeight={30} weight={'600'} color={theme.colors.textNormal}>
+										{parsePrice(order?.summary?.total || order?.total)}
+									</OText>
+								</Table>
+							</Total>
+						</OrderBill>
+					</OrderContent>
+				</>
+			)}
+			<OModal
+				open={openModalForBusiness || openModalForDriver}
+				customClose
+				entireModal
+				onClose={() => handleCloseModal()}>
+				<Messages
+					type={openModalForBusiness ? USER_TYPE.BUSINESS : USER_TYPE.DRIVER}
+					orderId={order?.id}
+					messages={messages}
+					order={order}
+					setMessages={setMessages}
+					onClose={() => handleCloseModal()}
+				/>
+			</OModal>
+		</OrderDetailsContainer>
+	);
+};
+
+export const OrderDetails = (props: OrderDetailsParams) => {
+	const orderDetailsProps = {
+		...props,
+		UIComponent: OrderDetailsUI,
+	};
+
+	return <OrderDetailsConTableoller {...orderDetailsProps} />;
+};