ordering-ui-react-native 0.17.87 → 0.17.88-release

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

@@ -3,7 +3,6 @@ import { useLanguage, useUtils, useToast, ToastType, useConfig, MultiOrdersDetai
 import { View, StyleSheet, BackHandler, TouchableOpacity } from 'react-native'
 import { useTheme } from 'styled-components/native'
 import { OText, OButton } from '../shared'
-import { Container } from '../../layouts/Container'
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder'
 import { SingleOrderCard } from './SingleOrderCard'
 import AntDesignIcon from 'react-native-vector-icons/AntDesign'
@@ -53,6 +52,7 @@ export const MultiOrdersDetailsUI = (props: any) => {
   const [, { showToast }] = useToast();
   const [{ configs }] = useConfig()
 
+  const isTaxIncludedOnPrice = orders.every((_order: any) => _order.taxes?.length ? _order.taxes?.every((_tax: any) => _tax.type === 1) : true)
   const progressBarStyle = configs.multi_business_checkout_progress_bar_style?.value
   const showBarInOrder = ['group', 'both']
   const showBarInIndividual = ['individual', 'both']
@@ -166,7 +166,7 @@ export const MultiOrdersDetailsUI = (props: any) => {
           <OText key={event.id} size={12} lineHeight={18} color={theme.colors.textNormal}>
             {event?.wallet_event
               ? walletName[event?.wallet_event?.wallet?.type]?.name
-              : event?.paymethod?.name}
+              : t(event?.paymethod?.name.toUpperCase()?.replace(/ /g, '_'), event?.paymethod?.name)}
           </OText>
         ))}
       </Section>
@@ -225,23 +225,27 @@ export const MultiOrdersDetailsUI = (props: any) => {
             </Row>
           ))}
           <BorderLine />
-          <Row>
-            <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
-              {t('TOTAL_BEFORE_TAX', 'Total before tax')}:
-            </OText>
-            <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
-              {parsePrice(ordersSummary?.subtotal)}
-            </OText>
-          </Row>
-          <Row>
-            <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
-              {t('ESTIMATED_TAX_TO_BE_COLLECTED', 'Estimated tax to be collected')}:
-            </OText>
-            <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
-              {parsePrice(ordersSummary?.tax)}
-            </OText>
-          </Row>
-          <BorderLine />
+          {!isTaxIncludedOnPrice && (
+            <>
+              <Row>
+                <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
+                  {t('TOTAL_BEFORE_TAX', 'Total before tax')}:
+                </OText>
+                <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
+                  {parsePrice(ordersSummary?.subtotal)}
+                </OText>
+              </Row>
+              <Row>
+                <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
+                  {t('ESTIMATED_TAX_TO_BE_COLLECTED', 'Estimated tax to be collected')}:
+                </OText>
+                <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
+                  {parsePrice(ordersSummary?.tax)}
+                </OText>
+              </Row>
+              <BorderLine />
+            </>
+          )}
           <Row style={{ marginTop: 10 }}>
             <OText size={14} lineHeight={18} weight={'500'} color={theme.colors.textNormal}>
               {t('PAYMENT_TOTAL', 'Payment total')}:

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

@@ -25,13 +25,14 @@ export const MyOrders = (props: any) => {
   const [ordersLength, setOrdersLength] = useState({
     activeOrdersLength: null,
     previousOrdersLength: 0,
+    preordersLength: 0
   });
   const [selectedOption, setSelectedOption] = useState(!hideOrders ? 'orders' : 'business')
 
   const notOrderOptions = ['business', 'products']
-  const allEmpty = (ordersLength?.activeOrdersLength === 0 && ordersLength?.previousOrdersLength === 0) || ((isEmptyBusinesses || businessOrderIds?.length === 0) && hideOrders)
+  const allEmpty = (ordersLength?.activeOrdersLength === 0 && ordersLength?.previousOrdersLength === 0 && ordersLength?.preordersLength === 0) || ((isEmptyBusinesses || businessOrderIds?.length === 0) && hideOrders)
 
-  const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
+  const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
   const showNavbar = theme?.bar_menu?.components?.orders?.hidden
   const hideOrdersTheme = theme?.bar_menu?.components?.orders?.hidden
   const hideProductsTab = theme?.orders?.components?.products_tab?.hidden
@@ -90,7 +91,7 @@ export const MyOrders = (props: any) => {
           },
           ...props.titleStyle
         }}>
-          {(!props.hideBackBtn || !hideOrdersTheme) && !isChewLayout && (
+          {!props.hideBackBtn && (!isChewLayout || (isChewLayout && hideOrdersTheme)) && (
             <OButton
               imgLeftStyle={{ width: 18 }}
               imgRightSrc={null}
@@ -103,7 +104,7 @@ export const MyOrders = (props: any) => {
                 shadowColor: '#FFF',
                 paddingLeft: 0,
                 paddingRight: 0,
-                marginTop: 50,
+                marginTop: 30,
               }}
               onClick={goToBack}
               icon={AntDesignIcon}
@@ -147,18 +148,26 @@ export const MyOrders = (props: any) => {
       )}
       {selectedOption === 'orders' && (
         <>
-          {ordersLength?.activeOrdersLength !== 0 && (
-            <View style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}>
-              <OrdersOption
-                {...props}
-                activeOrders
-                ordersLength={ordersLength}
-                setOrdersLength={setOrdersLength}
-                setRefreshOrders={setRefreshOrders}
-                refreshOrders={refreshOrders}
-              />
-            </View>
-          )}
+          <View style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}>
+            <OrdersOption
+              {...props}
+              preOrders
+              ordersLength={ordersLength}
+              setOrdersLength={setOrdersLength}
+              setRefreshOrders={setRefreshOrders}
+              refreshOrders={refreshOrders}
+            />
+          </View>
+          <View style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}>
+            <OrdersOption
+              {...props}
+              activeOrders
+              ordersLength={ordersLength}
+              setOrdersLength={setOrdersLength}
+              setRefreshOrders={setRefreshOrders}
+              refreshOrders={refreshOrders}
+            />
+          </View>
           <View style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}>
             <OrdersOption
               {...props}

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

@@ -1,3 +1,6 @@
+
+
+
 import * as React from 'react'
 import styled, { useTheme } from 'styled-components/native'
 import { OButton, OIcon, OText } from '../shared'
@@ -9,7 +12,6 @@ const TitleWrapper = styled.View`
   padding-horizontal: 10px;
 `
 const TitleTopWrapper = styled.View`
-  flex: 1;
   flex-direction: row;
   align-items: center;
 `
@@ -17,8 +19,10 @@ const TitleTopWrapper = styled.View`
 const btnBackArrow = {
 	borderWidth: 0,
 	backgroundColor: '#FFF',
-	borderColor: '#FFF',
-	shadowColor: '#FFF'
+	borderColor: '#fff',
+	shadowColor: '#FFF',
+	paddingLeft: 30,
+	paddingRight: 30
 }
 
 interface Props {
@@ -42,6 +46,7 @@ interface Props {
 	paddingTop?: number,
 	isVertical?: boolean,
 	noMargin?: any
+	hideArrowLeft?: boolean
 }
 
 const NavBar = (props: Props) => {
@@ -52,8 +57,6 @@ const NavBar = (props: Props) => {
 		background-color: ${theme.colors.white};
 		padding: 10px 20px 20px 0px;
 		flex-direction: row;
-		justify-content: center;
-		align-items: center;
 		position: relative;
 	`
 
@@ -62,13 +65,18 @@ const NavBar = (props: Props) => {
 	}
 	return (
 		<Wrapper style={{ paddingTop: props.paddingTop, ...{ flexDirection: props.isVertical ? 'column' : 'row', alignItems: props.isVertical ? 'flex-start' : 'center' }, ...props.style }}>
-			<OButton
-				imgLeftSrc={theme.images.general.arrow_left}
-				imgLeftStyle={{ width: 26 }}
-				imgRightSrc={null}
-				style={{ ...btnBackArrow, ...props.btnStyle, ...props.isVertical ? (I18nManager.isRTL ? { paddingRight: 0 } : { paddingLeft: 0 }) : {} }}
-				onClick={props?.onActionLeft}
-			/>
+			{!props.hideArrowLeft && (
+				<OButton
+					iconProps={{
+						name: 'arrowleft',
+						size: 26
+					}}
+					icon={AntDesignIcon}
+					imgRightSrc={null}
+					style={{ ...btnBackArrow, ...props.btnStyle, ...props.isVertical ? (I18nManager.isRTL ? { paddingRight: 0 } : { paddingLeft: 0 }) : {} }}
+					onClick={props?.onActionLeft}
+				/>
+			)}
 			<TitleTopWrapper>
 				{props.withIcon
 					? (
@@ -87,7 +95,6 @@ const NavBar = (props: Props) => {
 				<TitleWrapper style={{ ...{ paddingHorizontal: props.isVertical ? 0 : 10 }, ...props.titleWrapStyle }}>
 					<OText
 						size={20}
-						lineHeight={36}
 						weight={Platform.OS === 'ios' ? '600' : 'bold'}
 						style={
 							{

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

@@ -1,8 +1,9 @@
 import React from 'react'
 import { View } from 'react-native'
-import { OButton, OIcon, OText } from '../shared'
+import { OButton, OText } from '../shared'
 import { NotFoundSourceParams } from '../../types'
 import { useTheme } from 'styled-components/native';
+import Foundation from 'react-native-vector-icons/Foundation'
 import {
 	NotFound,
 	NotFoundImage
@@ -10,34 +11,37 @@ import {
 
 export const NotFoundSource = (props: NotFoundSourceParams) => {
 	const {
-		image,
+		hideImage,
 		content,
 		btnTitle,
+		btnStyle,
 		conditioned,
 		onClickButton
 	} = props
 
 	const theme = useTheme();
 
-	const errorImage = image || theme.images.general.notFound
-	const isUrl = typeof errorImage === 'string' && errorImage.includes('http')
-
 	return (
 		<NotFound>
-			{errorImage && (
+			{!hideImage && (
 				<NotFoundImage>
-					<OIcon url={isUrl && errorImage} src={!isUrl && errorImage} width={260} height={220} />
+					<Foundation
+						name='page-search'
+						color={theme.colors.primary}
+						size={60}
+						style={{ marginBottom: 10 }}
+					/>
 				</NotFoundImage>
 			)}
-			{content && conditioned && !errorImage && <OText color={theme.colors.disabled} size={18} style={{ textAlign: 'center' }}>{content}</OText>}
-			{content && !conditioned && <OText color={theme.colors.disabled} size={18} style={{ textAlign: 'center' }}>{content}</OText>}
+			{content && conditioned && <OText color={theme.colors.disabled} size={16} style={{ textAlign: 'center' }}>{content}</OText>}
+			{content && !conditioned && <OText color={theme.colors.disabled} size={16} style={{ textAlign: 'center' }}>{content}</OText>}
 			{!onClickButton && props.children && (
 				props.children
 			)}
 			{onClickButton && (
 				<View style={{ marginTop: 10, width: '100%' }}>
 					<OButton
-						style={{ width: '100%', height: 50 }}
+						style={{ width: '100%', height: 50, ...btnStyle }}
 						bgColor={theme.colors.primary}
 						borderColor={theme.colors.primary}
 						onClick={() => onClickButton()}

package/themes/original/src/components/OrderDetails/OrderEta.tsx

@@ -0,0 +1,76 @@
+import React, { useEffect, useState } from 'react'
+import { useUtils } from 'ordering-components/native'
+import moment from 'moment'
+
+export const OrderEta = (props: any) => {
+  const {
+    order,
+    outputFormat
+  } = props
+
+  const [{ parseDate }] = useUtils()
+  const [estimatedDeliveryTime, setEstimatedDeliveryTime] = useState(null)
+
+  const getEstimatedDeliveryTime = () => {
+    let estimatedUtcTime = null
+    let totalEta = 0
+    if (order?.delivered_in) totalEta += order?.delivered_in
+    if (order?.prepared_in) totalEta += order?.prepared_in
+    if (order?.delivery_type === 1 && order?.eta_drive_time) {
+      totalEta += order?.eta_drive_time
+    }
+
+    const _delivery = order?.delivery_datetime_utc
+      ? order?.delivery_datetime_utc
+      : order?.delivery_datetime
+
+    if (order?.eta_current_status_time) {
+      const currentStatueEta = order?.eta_current_status_time
+      totalEta += currentStatueEta
+      let previousStatusTimes = 0
+      if (order?.eta_previous_status_times) {
+        Object.keys(order.eta_previous_status_times).map(key => {
+          if (!key.includes('status_penalty')) {
+            previousStatusTimes += order.eta_previous_status_times[key]
+          }
+        })
+      }
+      totalEta += previousStatusTimes
+
+      let nextStatusTimes = 0
+      if (order?.eta_next_status_times) {
+        Object.keys(order.eta_next_status_times).map(key => {
+          if (!key.includes('status_penalty')) {
+            nextStatusTimes += order.eta_next_status_times[key]
+          }
+        })
+      }
+      totalEta += nextStatusTimes
+
+      const diffTimeAsSeconds = moment.utc(order?.reporting_data?.at[`status:${order.status}`]).add(order?.eta_current_status_time, 'minutes').diff(moment().utc(), 'seconds')
+      const diffTimeAsMinutes = Math.ceil(diffTimeAsSeconds / 60)
+      if (diffTimeAsMinutes <= 0) {
+        totalEta += (Math.floor(Math.abs(diffTimeAsMinutes / order?.eta_current_status_time) + 1) * order?.eta_current_status_penalty_time)
+      }
+    } else {
+      totalEta = order?.eta_time + totalEta
+    }
+    estimatedUtcTime = moment.utc(_delivery).add(totalEta, 'minutes')
+    const _estimatedTime = outputFormat ? moment(estimatedUtcTime).local().format(outputFormat) : parseDate(estimatedUtcTime, { utc: false })
+    setEstimatedDeliveryTime(_estimatedTime)
+  }
+
+  useEffect(() => {
+    getEstimatedDeliveryTime()
+    const interval = setInterval(() => {
+      getEstimatedDeliveryTime()
+    }, 1000)
+    return () => clearInterval(interval)
+  }, [order, outputFormat])
+
+  return (
+    <>
+      {estimatedDeliveryTime}
+    </>
+  )
+}

package/themes/original/src/components/OrderDetails/OrderHistory.tsx

@@ -4,6 +4,7 @@ import { ScrollView, StyleSheet, View } from 'react-native'
 import { useLanguage, useUtils } from 'ordering-components/native'
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
 import { OText, OButton } from '../shared'
+import { formatSeconds } from '../../utils'
 
 export const OrderHistory = (props: any) => {
   const {
@@ -61,7 +62,7 @@ export const OrderHistory = (props: any) => {
     20: 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS',
     21: 'ORDER_CUSTOMER_ARRIVED_BUSINESS',
     22: 'ORDER_LOOKING_FOR_DRIVER',
-      23: 'ORDER_DRIVER_ON_WAY'
+    23: 'ORDER_DRIVER_ON_WAY'
   }
 
   const getLogisticTagStatus = (status: any) => {
@@ -106,8 +107,12 @@ export const OrderHistory = (props: any) => {
               ellipsizeMode='tail'
             >
               {t('ORDER_PLACED', 'Order placed')} {' '}
-              {t('VIA', 'Via')}{' '}
-              {order.app_id ? t(order.app_id.toUpperCase(), order.app_id) : t('OTHER', 'Other')}
+              {!props.hideViaText && (
+                <>
+                  {t('VIA', 'Via')}{' '}
+                  {order.app_id ? t(order.app_id.toUpperCase(), order.app_id) : t('OTHER', 'Other')}
+                </>
+              )}
             </OText>
             <OText size={12}>{parseDate(order?.created_at, { outputFormat: 'MMM DD, hh:mm A' })}</OText>
           </View>
@@ -128,12 +133,23 @@ export const OrderHistory = (props: any) => {
               <OText
                 size={14}
                 weight='bold'
-                numberOfLines={1}
+                numberOfLines={message.change?.attribute.includes(['delivered_in', 'prepared_in']) ? 2 : 1}
                 ellipsizeMode='tail'
               >
                 {message.change?.attribute === 'logistic_status'
                   ? getLogisticTagStatus(parseInt(message.change.new, 10))
-                  : t(ORDER_STATUS[parseInt(message.change.new, 10)])
+                  : message.change?.attribute === 'delivered_in' ? (
+                    <>
+                      {t('TIME_ADDED_BY_DRIVER', 'Time added by driver')}{'\n'}
+                      {formatSeconds(parseInt(message.change.new, 10))}
+                    </>
+                  )
+                    : message.change?.attribute === 'prepared_in' ? (
+                    <>
+                      {t('TIME_ADDED_BY_BUSINESS', 'Time added by business')}{'\n'}
+                      {formatSeconds(parseInt(message.change.new, 10))}
+                    </>
+                    ) : t(ORDER_STATUS[parseInt(message.change.new, 10)])
                 }
               </OText>
             ) : (

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

@@ -7,7 +7,9 @@ import {
   OrderDetails as OrderDetailsConTableoller,
   useUtils,
   useOrder,
-  useConfig
+  useConfig,
+  useToast,
+  ToastType
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { showLocation } from 'react-native-map-link';
@@ -40,7 +42,7 @@ import { ProductItemAccordion } from '../ProductItemAccordion';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import { OrderDetailsParams } from '../../types';
 import { GoogleMap } from '../GoogleMap';
-import { verifyDecimals, getOrderStatus } from '../../utils';
+import { verifyDecimals, getOrderStatus, getOrderStatuPickUp } from '../../utils';
 import { OSRow } from '../OrderSummary/styles';
 import AntIcon from 'react-native-vector-icons/AntDesign'
 import { TaxInformation } from '../TaxInformation';
@@ -49,6 +51,7 @@ import NavBar from '../NavBar'
 import { OrderHistory } from './OrderHistory';
 import { PlaceSpot } from '../PlaceSpot'
 import { SendGiftCard } from '../GiftCard/SendGiftCard'
+import { OrderEta } from './OrderEta'
 export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const {
     navigation,
@@ -64,7 +67,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   } = props;
 
   const theme = useTheme();
-
+  const [, { showToast }] = useToast()
   const styles = StyleSheet.create({
     rowDirection: {
       flexDirection: 'row',
@@ -120,7 +123,9 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const mapValidStatuses = [9, 19, 23]
   const placeSpotTypes = [3, 4, 5]
   const directionTypes = [2, 3, 4, 5]
-  const activeStatus = [0, 3, 4, 7, 8, 9, 14, 18, 19, 20, 21, 22, 23]
+  const activeStatus = [0, 3, 4, 7, 8, 9, 13, 14, 18, 19, 20, 21, 22, 23]
+  const reorderStatus = [1, 2, 5, 6, 10, 11, 12]
+  const [isPickup, setIsPickup] = useState(order?.delivery_type === 2)
   const enabledPoweredByOrdering = configs?.powered_by_ordering_module?.value
   const isGiftCardOrder = !order?.business_id
   const hideDeliveryDate = theme?.confirmation?.components?.order?.components?.date?.hidden
@@ -134,6 +139,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const hideDriverMessages = theme?.confirmation?.components?.driver?.components?.messages?.hidden
   const hideCustomerPhone = theme?.confirmation?.components?.customer?.components?.phone?.hidden
   const hideCustomerAddress = theme?.confirmation?.components?.customer?.components?.address?.hidden
+  const progressBarObjt = isPickup ? getOrderStatuPickUp : getOrderStatus
   const walletName: any = {
     cash: {
       name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet'),
@@ -191,7 +197,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
         order: {
           id: order?.id,
           business_id: order?.business_id,
-          logo: order.business?.logo,
+          logo: order.business?.logo || theme.images.dummies.businessLogo,
           driver: order?.driver,
           products: order?.products,
           review: order?.review,
@@ -335,6 +341,19 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     }
   }, [driverLocation]);
 
+  useEffect(() => {
+    if (props?.order?.error && !props?.order?.loading) {
+      showToast(ToastType.Error, props?.order?.error)
+      navigation.navigate('BusinessList')
+    }
+  }, [props?.order?.error, props?.order?.loading])
+
+
+  useEffect(() => {
+    if (!order?.delivery_type) return
+    setIsPickup(order?.delivery_type === 2)
+  }, [order?.delivery_type])
+
   return (
     <OrderDetailsContainer
       keyboardShouldPersistTaps="handled"
@@ -410,13 +429,11 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
               titleWrapStyle={{ paddingHorizontal: 0 }}
               titleStyle={{ marginRight: 0, marginLeft: 0 }}
               subTitle={!hideDeliveryDate && <OText size={12} lineHeight={18} color={theme.colors.textNormal}>
-                {
-                  activeStatus.includes(order?.status)
-                    ? order?.eta_time + 'min'
-                    : order?.delivery_datetime_utc
-                      ? parseDate(order?.delivery_datetime_utc)
-                      : parseDate(order?.delivery_datetime, { utc: false })
-                }
+                {activeStatus.includes(order?.status) ? (
+                  <OrderEta order={order} />
+                ) : (
+                  parseDate(order?.reporting_data?.at[`status:${order.status}`])
+                )}
               </OText>}
             />
             {enabledPoweredByOrdering && (
@@ -472,7 +489,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                         <LinearGradient
                           start={{ x: 0.0, y: 0.0 }}
                           end={{
-                            x: getOrderStatus(order?.status)?.percentage || 0,
+                            x: progressBarObjt(order?.status)?.percentage || 0,
                             y: 0,
                           }}
                           locations={[0.9999, 0.9999]}
@@ -485,7 +502,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                         lineHeight={24}
                         weight={'600'}
                         color={theme.colors.textNormal}>
-                        {getOrderStatus(order?.status)?.value}
+                        {progressBarObjt(order?.status)?.value}
                       </OText>
                     </>
                   )}
@@ -783,25 +800,17 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   parentStyle={{ marginTop: 29, marginEnd: 15 }}
                   onClick={() => navigation.navigate('BottomTab', { screen: 'MyOrders' })}
                 />
-                {(
-                  parseInt(order?.status) === 1 ||
-                  parseInt(order?.status) === 2 ||
-                  parseInt(order?.status) === 5 ||
-                  parseInt(order?.status) === 6 ||
-                  parseInt(order?.status) === 10 ||
-                  parseInt(order?.status) === 11 ||
-                  parseInt(order?.status) === 12
-                ) && (
-                    <OButton
-                      text={order.id === reorderState?.loading ? t('LOADING', 'Loading..') : t('REORDER', 'Reorder')}
-                      textStyle={{ fontSize: 14, color: theme.colors.primary }}
-                      imgRightSrc={null}
-                      borderColor='transparent'
-                      bgColor={theme.colors.primary + 10}
-                      style={{ borderRadius: 7.6, borderWidth: 1, height: 44, shadowOpacity: 0, marginTop: 29 }}
-                      onClick={() => handleReorder && handleReorder(order.id)}
-                    />
-                  )}
+                {(reorderStatus?.includes(parseInt(order?.status)) && order?.cart) && (
+                  <OButton
+                    text={order.id === reorderState?.loading ? t('LOADING', 'Loading..') : t('REORDER', 'Reorder')}
+                    textStyle={{ fontSize: 14, color: theme.colors.primary }}
+                    imgRightSrc={null}
+                    borderColor='transparent'
+                    bgColor={theme.colors.primary + 10}
+                    style={{ borderRadius: 7.6, borderWidth: 1, height: 44, shadowOpacity: 0, marginTop: 29 }}
+                    onClick={() => handleReorder && handleReorder(order.id)}
+                  />
+                )}
               </OrderAction>
             </HeaderInfo>
             <OrderProducts>
@@ -935,7 +944,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   </Table>
                 ))
               }
-              {order?.summary?.delivery_price > 0 && (
+              {typeof order?.summary?.delivery_price === 'number' && (
                 <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)}</OText>
@@ -1010,16 +1019,18 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                           <OText>
                             {event?.wallet_event
                               ? walletName[event?.wallet_event?.wallet?.type]?.name
-                              : event?.paymethod?.name}
+                              : t(event?.paymethod?.name.toUpperCase()?.replace(/ /g, '_'), event?.paymethod?.name)}
                           </OText>
-                          {event?.data?.charge_id && (
+                          {/* {event?.data?.charge_id && (
                             <OText>
                               {`${t('CODE', 'Code')}: ${event?.data?.charge_id}`}
                             </OText>
-                          )}
+                          )} */}
                         </View>
                         <OText>
-                          -{parsePrice(event.amount, { isTruncable: true })}
+                          {configs.currency_position?.value === 'left'
+                            ? `${configs.format_number_currency?.value} -${parseNumber(event.amount, { isTruncable: true })}`
+                            : `-${parsePrice(event.amount, { isTruncable: true })}`}
                         </OText>
                       </View>
                     ))}
@@ -1065,6 +1076,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       >
         <OrderHistory
           order={order}
+          hideViaText={props.hideViaText}
           messages={messages}
           enableReview={(
             parseInt(order?.status) === 1 ||

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

@@ -5,7 +5,6 @@ export const OrderDetailsContainer = styled.ScrollView`
 `
 
 export const NavBack = styled.TouchableOpacity`
-
 `
 
 

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

@@ -20,7 +20,8 @@ export const OrderItAgain = (props: OrderItAgainParams) => {
     currentCart,
     handleUpdateProducts,
     navigation,
-    searchValue
+    searchValue,
+    businessSingleId
   } = props
 
   const [, t] = useLanguage()
@@ -65,6 +66,7 @@ export const OrderItAgain = (props: OrderItAgainParams) => {
                 handleUpdateProducts={handleUpdateProducts}
                 navigation={navigation}
                 isPreviously
+                businessSingleId={businessSingleId}
               />
             </ProductWrapper>
           ))}