ordering-ui-react-native 0.22.55 → 0.22.56-release

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

@@ -29,7 +29,8 @@ import {
 	TimeItem
 } from './styles';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { locale, monthsEnum } from '../../utils';
+import { monthsEnum, setLocalMoment } from '../../utils';
+import { TimeListItem } from './TimeListItem';
 
 const MomentOptionUI = (props: MomentOptionParams) => {
 	const {
@@ -161,6 +162,8 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 	const [datesWhitelist, setDateWhitelist] = useState<any>([{ start: null, end: null }])
 	const [selectDate, setSelectedDate] = useState<any>(dateSelected)
 	const [timeList, setTimeList] = useState<any>(hoursList)
+	const [nextTime, setNextTime] = useState(null)
+
 	const goToBack = () => navigation?.canGoBack() && navigation.goBack();
 
 	const _handleAsap = () => {
@@ -256,7 +259,7 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 				setDateWhitelist([{ start: _minDate, end: _maxDate }])
 			}
 		}
-	}, [JSON.stringify(datesList), preorderMinimumDays, preorderMaximumDays, cateringPreorder])
+	}, [JSON.stringify(datesList), preorderMinimumDays, preorderMaximumDays])
 
 	useEffect(() => {
 		if (dateSelected) {
@@ -278,13 +281,21 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 			let _timeLists = []
 			const schedule = business && getActualSchedule()
 			if (!schedule && business) {
+				setTimeList([])
 				return
 			}
 			_timeLists = hoursList
-				.filter(hour => (!business || schedule?.lapses?.some((lapse: any) =>
-					moment(dateSelected + ` ${hour.startTime}`) >= moment(dateSelected + ` ${lapse.open.hour}:${lapse.open.minute}`).add(preorderLeadTime, 'minutes') && moment(dateSelected + ` ${hour.endTime}`) <= moment(dateSelected + ` ${lapse.close.hour}:${lapse.close.minute}`))) &&
-					moment(dateSelected + ` ${hour.startTime}`) < moment(dateSelected + ` ${hour.endTime}`) &&
-					(moment().add(preorderLeadTime, 'minutes') < moment(dateSelected + ` ${hour.startTime}`) || !cateringPreorder))
+				.filter(hour => {
+					return (Object.keys(business || {})?.length === 0 || schedule?.lapses?.some((lapse: any) => {
+						const openHour = lapse.open.hour < 10 ? `0${lapse.open.hour}` : lapse.open.hour
+						const openMinute = lapse.open.minute < 10 ? `0${lapse.open.minute}` : lapse.open.minute
+						const closeHour = lapse.close.hour < 10 ? `0${lapse.close.hour}` : lapse.close.hour
+						const closeMinute = lapse.close.minute < 10 ? `0${lapse.close.minute}` : lapse.close.minute
+						return moment(dateSelected + ` ${hour.startTime}`) >= moment(dateSelected + ` ${openHour}:${openMinute}`).add(preorderLeadTime, 'minutes') && moment(dateSelected + ` ${hour.endTime}`) <= moment(dateSelected + ` ${closeHour}:${closeMinute}`)
+					})) &&
+						(moment(dateSelected + ` ${hour.startTime}`) < moment(dateSelected + ` ${hour.endTime}`)) &&
+						(moment().add(preorderLeadTime, 'minutes') < moment(dateSelected + ` ${hour.startTime}`) || !cateringPreorder)
+				})
 				.map(hour => {
 					return {
 						value: hour.startTime,
@@ -321,7 +332,28 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 				}
 			}))
 		}
-	}, [dateSelected, JSON.stringify(hoursList), JSON.stringify(datesWhitelist), cateringPreorder, JSON.stringify(business)])
+	}, [dateSelected, hoursList?.length, JSON.stringify(datesWhitelist), JSON.stringify(business)])
+
+	useEffect(() => {
+		setLocalMoment(moment, t)
+	}, [])
+
+	useEffect(() => {
+		if (preorderMinimumDays === 0 && preorderLeadTime === 0) return
+		const isToday = dateSelected === moment().format('YYYY-MM-DD')
+		if (isCart && isToday && !orderState?.loading && timeList?.length > 0) {
+			setNextTime(timeList?.[0] ?? null)
+		}
+	}, [timeList?.length])
+
+	useEffect(() => {
+		if (nextTime?.value && timeList?.length > 0 && isCart && !orderState?.loading && !(preorderMinimumDays === 0 && preorderLeadTime === 0)) {
+			const notime = timeList?.filter((_: any, i: number) => i !== 0)?.find?.((time: any) => time?.value === timeSelected)
+			if (!notime) {
+				handleChangeTime(nextTime?.value)
+			}
+		}
+	}, [nextTime?.value])
 
 	return (
 		<>
@@ -345,7 +377,7 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 							titleWrapStyle={{ paddingHorizontal: 0 }}
 						/>
 					)}
-					{(preorderMinimumDays === 0 && preorderLeadTime === 0) || !cateringPreorder && (
+					{((preorderMinimumDays === 0 && preorderLeadTime === 0) || !cateringPreorder) && (
 						<WrapSelectOption
 							onPress={() => _handleAsap()}
 							disabled={orderState.loading} style={{ alignItems: 'flex-start' }}>
@@ -394,28 +426,27 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 								<View style={{ flex: 1 }}>
 									{selectDate && datesWhitelist[0]?.start !== null && (
 										<CalendarStrip
-											locale={locale}
 											scrollable
 											style={styles.calendar}
 											calendarHeaderContainerStyle={styles.calendarHeaderContainer}
 											calendarHeaderStyle={styles.calendarHeader}
-											dateNumberStyle={styles.dateNumber}
-											dateNameStyle={styles.dateName}
 											iconContainer={{ flex: 0.1 }}
-											highlightDateNameStyle={styles.highlightDateName}
-											highlightDateNumberStyle={styles.highlightDateNumber}
 											dayContainerStyle={{ height: '100%' }}
 											highlightDateContainerStyle={{ height: '100%' }}
 											calendarHeaderFormat='MMMM, YYYY'
 											iconStyle={{ borderWidth: 1 }}
 											selectedDate={dateSelected}
 											datesWhitelist={datesWhitelist}
+											highlightDateNumberStyle={styles.highlightDateNumber}
+											highlightDateNameStyle={styles.highlightDateName}
 											minDate={moment()}
 											maxDate={cateringPreorder ? moment().add(preorderMaximumDays, 'days') : undefined}
 											disabledDateNameStyle={styles.disabledDateName}
 											disabledDateNumberStyle={styles.disabledDateNumber}
 											disabledDateOpacity={0.6}
-											onDateSelected={(date) => onSelectDate(date)}
+											dateNumberStyle={styles.dateNumber}
+											dateNameStyle={styles.dateName}
+											onDateSelected={(date: any) => onSelectDate(date)}
 											leftSelector={<LeftSelector />}
 											rightSelector={<RightSelector />}
 										/>
@@ -423,44 +454,34 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 								</View>
 							)}
 							<TimeListWrapper nestedScrollEnabled={true} cateringPreorder={cateringPreorder}>
-								<TimeContentWrapper>
-									{timeList.map((time: any, i: number) => (
-										<Pressable key={i} onPress={() => handleChangeTimeSelected(time.value)}>
-											<TimeItem
-												active={selectedTime === time.value}
+								{timeList?.length > 0 ? (
+									<TimeContentWrapper>
+										{timeList.map((time: any, i: number) => (
+											<TimeListItem
+												key={i}
+												time={time}
+												selectedTime={selectedTime}
+												handleChangeTimeSelected={handleChangeTimeSelected}
 												cateringPreorder={cateringPreorder}
-											>
-												{cateringPreorder && (
-													<>
-														{selectedTime === time.value ? (
-															<OIcon
-																src={theme.images.general.option_checked}
-																width={18}
-																style={{ marginEnd: 24, bottom: 2 }}
-															/>
-														) : (
-															<OIcon
-																src={theme.images.general.option_normal}
-																width={18}
-																style={{ marginEnd: 24, bottom: 2 }}
-															/>
-														)}
-													</>
-												)}
-												<OText
-													size={cateringPreorder ? 18 : 16}
-													color={selectedTime === time.value ? theme.colors.primary : theme.colors.textNormal}
-													style={{
-														lineHeight: 24
-													}}
-												>{time.text} {cateringPreorder && `- ${time.endText}`}</OText>
-											</TimeItem>
-										</Pressable>
-									))}
-									{timeList.length % 3 === 2 && (
-										<TimeItem style={{ backgroundColor: 'transparent' }} />
-									)}
-								</TimeContentWrapper>
+											/>
+										))}
+										{timeList.length % 3 === 2 && (
+											<TimeItem style={{ backgroundColor: 'transparent' }} />
+										)}
+									</TimeContentWrapper>
+								) : (
+									<OText
+										size={16}
+										style={{
+											fontWeight: '600',
+											lineHeight: 24,
+											marginBottom: 12,
+											textAlign: 'center'
+										}}
+									>
+										{t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The business is closed at the moment')}
+									</OText>
+								)}
 							</TimeListWrapper>
 						</OrderTimeWrapper>
 					)}

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

@@ -5,7 +5,8 @@ import { useTheme } from 'styled-components/native'
 import {
   MomentOption as MomentOptionController,
   useConfig,
-  useUtils
+  useUtils,
+  useLanguage
 } from 'ordering-components/native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import IconAntDesign from 'react-native-vector-icons/AntDesign'
@@ -26,6 +27,7 @@ const MomentSelectorUI = (props: any) => {
   const { top } = useSafeAreaInsets()
   const [{ configs }] = useConfig()
   const [{ parseTime }] = useUtils()
+	const [, t] = useLanguage()
 
   const [customizedDateList, setCustomizedDateList] = useState([])
   const [customizedTimeList, setCustomizedTimeList] = useState([])
@@ -130,6 +132,7 @@ const MomentSelectorUI = (props: any) => {
       <View style={styles.selectWrapper}>
         <SelectDropdown
           defaultValue={customizedTimeList?.find((item: any) => item.key === timeSelected)}
+          defaultButtonText={t('SELECT_A_TIME_OPTION', 'Select an option')}
           data={customizedTimeList}
           onSelect={(selectedItem, index) => {
             handleChangeTime(selectedItem.key)
@@ -194,4 +197,4 @@ export const MomentSelector = (props: any) => {
     maxDate: currentDate
   }
   return <MomentOptionController {...businessPreorderProps} />
-}
+}

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react'
+import React, { useState, useEffect, useCallback, useMemo } from 'react'
 import {
   useLanguage,
   useConfig,
@@ -70,7 +70,8 @@ const MultiCheckoutUI = (props: any) => {
     walletState,
     onNavigationRedirectReplace,
     merchantId,
-    cartsInvalid
+    cartsInvalid,
+    checkoutFieldsState
   } = props
 
   const theme = useTheme();
@@ -96,8 +97,9 @@ const MultiCheckoutUI = (props: any) => {
   const [{ parsePrice, parseDate }] = useUtils();
   const [{ options, carts, loading }, { confirmCart }] = useOrder();
   const [validationFields] = useValidationFields();
-  const [{ user }, { login }] = useSession()
+  const [{ user, loading: userLoading }, { login }] = useSession()
 
+  const notFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'zipcode', 'address_notes', 'comments']
   const configTypes = configs?.order_types_allowed?.value.split('|').map((value: any) => Number(value)) || []
   const isPreOrder = configs?.preorder_status_enabled?.value === '1'
   const isMultiDriverTips = configs?.checkout_multi_business_enabled?.value === '1'
@@ -121,6 +123,7 @@ const MultiCheckoutUI = (props: any) => {
 
   const creditPointGeneralPlan = loyaltyPlansState?.result?.find((loyal: any) => loyal.type === 'credit_point')
   const loyalBusinessAvailable = creditPointGeneralPlan?.businesses?.filter((b: any) => b.accumulates) ?? []
+  const checkoutFields = useMemo(() => checkoutFieldsState?.fields?.filter((field : any) => field.order_type_id === options?.type), [checkoutFieldsState, options])
 
   const accumulationRateBusiness = (businessId: number) => {
     const value = loyalBusinessAvailable?.find((loyal: any) => loyal.business_id === businessId)?.accumulation_rate ?? 0
@@ -169,35 +172,55 @@ const MultiCheckoutUI = (props: any) => {
 
   const checkValidationFields = () => {
     setUserErrors([])
-    const errors = []
-    const notFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'zipcode', 'address_notes']
-    const _requiredFields: any = []
-
-    Object.values(validationFields?.fields?.checkout).map((field: any) => {
-      if (field?.required && !notFields.includes(field.code)) {
-        if (!user[field?.code]) {
-          _requiredFields.push(field?.code)
+    const errors: Array<string> = []
+    const userSelected = user
+    const _requiredFields: Array<string> = []
+    Object.values(checkoutFieldsState?.fields).map((field: any) => {
+      if (options?.type === field?.order_type_id &&
+        field?.enabled &&
+        field?.required &&
+        !notFields.includes(field?.validation_field?.code)
+      ) {
+        if (userSelected && !userSelected[field?.validation_field?.code]) {
+          _requiredFields.push(field?.validation_field?.code)
         }
       }
     })
-
+    const mobilePhoneField: any = Object.values(checkoutFieldsState?.fields)?.find((field: any) => field?.order_type_id === options?.type && field?.validation_field?.code === 'mobile_phone')
     if (
-      !user?.cellphone &&
-      ((validationFields?.fields?.checkout?.cellphone?.enabled &&
-        validationFields?.fields?.checkout?.cellphone?.required) ||
+      userSelected &&
+      !userSelected?.cellphone &&
+      ((mobilePhoneField?.enabled &&
+        mobilePhoneField?.required) ||
         configs?.verification_phone_required?.value === '1')
     ) {
       _requiredFields.push('cellphone')
     }
     setRequiredFields(_requiredFields)
 
-    if (phoneUpdate) {
-      errors.push(t('NECESSARY_UPDATE_COUNTRY_PHONE_CODE', 'It is necessary to update your phone number'))
-    }
-
     setUserErrors(errors)
   }
 
+  const checkGuestValidationFields = () => {
+    const userSelected = user
+    const _requiredFields = checkoutFieldsState?.fields
+      .filter((field) => (field?.order_type_id === options?.type) && field?.enabled && field?.required_with_guest &&
+        !notFields.includes(field?.validation_field?.code) &&
+        userSelected && !userSelected[field?.validation_field?.code])
+    const requiredFieldsCode = _requiredFields.map((item) => item?.validation_field?.code)
+    const guestCheckoutCellPhone = checkoutFieldsState?.fields?.find((field) => field.order_type_id === options?.type && field?.validation_field?.code === 'mobile_phone')
+    if (
+      userSelected &&
+      !userSelected?.cellphone &&
+      ((guestCheckoutCellPhone?.enabled &&
+        guestCheckoutCellPhone?.required_with_guest) ||
+        configs?.verification_phone_required?.value === '1')
+    ) {
+      requiredFieldsCode.push('cellphone')
+    }
+    setRequiredFields(requiredFieldsCode)
+  }
+
   const togglePhoneUpdate = (val: boolean) => {
     setPhoneUpdate(val)
   }
@@ -208,7 +231,7 @@ const MultiCheckoutUI = (props: any) => {
       return
     }
 
-    if (!userErrors.length && (!requiredFields?.length || allowedGuest)) {
+    if (!userErrors.length && !requiredFields?.length) {
       handleGroupPlaceOrder && handleGroupPlaceOrder(confirmPayment)
       return
     }
@@ -255,10 +278,13 @@ const MultiCheckoutUI = (props: any) => {
   }
 
   useEffect(() => {
-    if (validationFields && validationFields?.fields?.checkout) {
+    if (checkoutFieldsState?.loading || userLoading) return
+    if (user?.guest_id) {
+      checkGuestValidationFields()
+    } else {
       checkValidationFields()
     }
-  }, [validationFields, user])
+  }, [checkoutFieldsState, user, options?.type])
 
   useEffect(() => {
     if (cartsToShow?.length === 1) {
@@ -399,9 +425,6 @@ const MultiCheckoutUI = (props: any) => {
                   />
                   <OButton
                     text={t('LOGIN', 'Login')}
-                    textStyle={{ color: theme.colors.primary }}
-                    bgColor={theme.colors.white}
-                    borderColor={theme.colors.primary}
                     style={{ borderRadius: 7.6, marginTop: 20 }}
                     onClick={() => setOpenModal({ ...openModal, login: true })}
                   />
@@ -423,6 +446,9 @@ const MultiCheckoutUI = (props: any) => {
                   isCheckout
                   phoneUpdate={phoneUpdate}
                   togglePhoneUpdate={togglePhoneUpdate}
+                  isOrderTypeValidationField
+                  requiredFields={requiredFields}
+                  checkoutFields={checkoutFields}
                 />
               )}
             </ChUserDetails>
@@ -659,9 +685,12 @@ const MultiCheckoutUI = (props: any) => {
               isEdit
               phoneUpdate={phoneUpdate}
               togglePhoneUpdate={togglePhoneUpdate}
-              requiredFields={requiredFields}
               hideUpdateButton
               handlePlaceOrderAsGuest={handlePlaceOrderAsGuest}
+              isCheckoutPlace
+              isOrderTypeValidationField
+              requiredFields={requiredFields}
+              checkoutFields={checkoutFields}
               onClose={() => {
                 setIsOpen(false)
                 handlePlaceOrder()

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

@@ -203,9 +203,9 @@ export const MyOrders = (props: any) => {
           setOrdersLength={setOrdersLength}
         />
       )}
-
+      
       {selectedOption === 'giftCards' && (
-        <View style={{ paddingHorizontal: 20 }}>
+        <View style={{ paddingHorizontal: 20  }}>
           <GiftCardOrdersList
             onNavigationRedirect={props?.onNavigationRedirect}
           />

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'
@@ -130,8 +133,9 @@ NavBar.defaultProps = {
 	textAlign: 'center'
 };
 
-const areEqual = (prevProps: { route?: any; }, nextProps: { route?: any; }) => {
-	return prevProps.route === nextProps.route
+const areEqual = (prevProps: { route?: any, title?: string }, nextProps: { route?: any, title?: string }) => {
+	return prevProps.route === nextProps.route && 
+	JSON.stringify(prevProps.title) === JSON.stringify(nextProps.title)
 	return true
 }
 

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

@@ -5,48 +5,49 @@ import { NotFoundSourceParams } from '../../types'
 import { useTheme } from 'styled-components/native';
 import Foundation from 'react-native-vector-icons/Foundation'
 import {
-	NotFound,
-	NotFoundImage
+  NotFound,
+  NotFoundImage
 } from './styles'
 
 export const NotFoundSource = (props: NotFoundSourceParams) => {
-	const {
-		hideImage,
-		content,
-		btnTitle,
-		btnStyle,
-		conditioned,
-		onClickButton
-	} = props
+  const {
+    hideImage,
+    content,
+    btnTitle,
+    btnStyle,
+    conditioned,
+    onClickButton,
+    simple
+  } = props
 
-	const theme = useTheme();
+  const theme = useTheme();
 
-	return (
-		<NotFound>
-			{!hideImage && (
-				<NotFoundImage>
-					<Foundation
-						name='page-search'
-						color={theme.colors.primary}
-						size={60}
-						style={{ marginBottom: 10 }}
-					/>
-				</NotFoundImage>
-			)}
-			{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, ...btnStyle }}
-						onClick={() => onClickButton()}
-						text={btnTitle}
-					/>
-				</View>
-			)}
-		</NotFound>
-	)
+  return (
+    <NotFound simple={simple}>
+      {!hideImage && !simple && (
+        <NotFoundImage>
+          <Foundation
+            name='page-search'
+            color={theme.colors.primary}
+            size={60}
+            style={{ marginBottom: 10 }}
+          />
+        </NotFoundImage>
+      )}
+      {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, ...btnStyle }}
+            onClick={() => onClickButton()}
+            text={btnTitle}
+          />
+        </View>
+      )}
+    </NotFound>
+  )
 }

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

@@ -1,14 +1,23 @@
-import styled from 'styled-components/native'
+import styled, { css } from 'styled-components/native'
 
 export const NotFound = styled.View`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: auto;
-  margin: 10px auto;
-  padding: 10px;
+  ${(props: any) => props.simple
+    ? css`
+        background-color: ${(props: any) => props.theme.colors?.white};
+        border-radius: 10px;
+        padding: 15px;
+        padding-horizontal: 20px;
+        border: 1px ${(props: any) => props.theme.colors?.border};
+    ` : css`
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: auto;
+      margin: auto auto;
+      padding: 10px;
+    `}
 `
 
 export const NotFoundImage = styled.View`

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

@@ -10,13 +10,14 @@ export const OrderEta = (props: any) => {
 
   const [{ parseDate }] = useUtils()
   const [estimatedDeliveryTime, setEstimatedDeliveryTime] = useState(null)
-
+  const deliveryTypes = [1, 7]
+  
   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) {
+    if (deliveryTypes?.includes?.(order?.delivery_type) && order?.eta_drive_time) {
       totalEta += order?.eta_drive_time
     }
 
@@ -57,7 +58,7 @@ export const OrderEta = (props: any) => {
     }
     estimatedUtcTime = moment.utc(_delivery).add(totalEta, 'minutes')
     const _estimatedTime = outputFormat ? moment(estimatedUtcTime).local().format(outputFormat) : parseDate(estimatedUtcTime, { utc: false })
-    setEstimatedDeliveryTime(_estimatedTime)
+    setEstimatedDeliveryTime(order?.status === 13 ? parseDate(_delivery, { utc: !!order?.delivery_datetime_utc, outputFormat: outputFormat }) : _estimatedTime)
   }
 
   useEffect(() => {

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import { useTheme } from 'styled-components/native'
 import { ScrollView, StyleSheet, View } from 'react-native'
-import { useLanguage, useUtils } from 'ordering-components/native'
+import { useLanguage, useUtils, useConfig } from 'ordering-components/native'
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
 import { OText, OButton } from '../shared'
 import { formatSeconds } from '../../utils'
@@ -17,8 +17,12 @@ export const OrderHistory = (props: any) => {
 
   const [, t] = useLanguage()
   const [{ parseDate }] = useUtils()
+  const [{ configs }] = useConfig();
   const theme = useTheme()
 
+  const excludedMessages = ['manual_driver_assignment_comment', 'driver_group_id', 'manual_driver_assignment_author_id']
+  const changeIdToExternalId = configs?.change_order_id?.value === '1'
+
   const styles = StyleSheet.create({
     historyItem: {
       display: 'flex',
@@ -62,7 +66,10 @@ 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',
+    24: 'ORDER_DRIVER_WAITING_FOR_ORDER',
+    25: 'ORDER_ACCEPTED_BY_DRIVER_COMPANY',
+    26: 'ORDER_DRIVER_ARRIVED_CUSTOMER'
   }
 
   const getLogisticTagStatus = (status: any) => {
@@ -90,7 +97,7 @@ export const OrderHistory = (props: any) => {
   return (
     <ScrollView contentContainerStyle={styles.container}>
       <OText size={20} style={{ alignSelf: 'center', textAlign: 'center' }} mBottom={10}>
-        {t('DETAILS_OF_ORDER', 'Details of Order_NUMBER_').replace('_NUMBER_', ` # ${order?.id}`)}
+        {t('DETAILS_OF_ORDER', 'Details of Order_NUMBER_').replace('_NUMBER_', (changeIdToExternalId && order?.external_id) || `# ${order?.id}`)}
       </OText>
       {!messages?.loading && order && (
         <View style={styles.historyItem}>
@@ -118,7 +125,7 @@ export const OrderHistory = (props: any) => {
           </View>
         </View>
       )}
-      {messages && messages?.messages.map((message: any, i: number) => message.type === 1 && (
+      {messages && messages?.messages.map((message: any, i: number) => (message.type === 1 && !excludedMessages.includes(message?.change?.attribute)) &&  (
         <View
           style={styles.historyItem}
           key={i}