ordering-ui-react-native 0.22.2 → 0.22.3-release

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

@@ -0,0 +1,56 @@
+import React from 'react'
+import { Pressable } from 'react-native'
+import {
+    TimeItem,
+} from './styles'
+import { OIcon, OText } from '../shared'
+import { useTheme } from 'styled-components/native'
+
+const timeListItemPropsAreEqual = (prevProps: any, nextProps: any) => {
+    return JSON.stringify(prevProps.time) === JSON.stringify(nextProps.time) && 
+    JSON.stringify(prevProps.selectedTime) === JSON.stringify(nextProps.selectedTime) &&
+    JSON.stringify(prevProps.cateringPreorder) === JSON.stringify(nextProps.cateringPreorder)
+}
+export const TimeListItem = React.memo((props : any) => {
+    const {
+        time,
+        selectedTime,
+        handleChangeTimeSelected,
+        cateringPreorder
+    } = props
+    const theme = useTheme()
+
+    return (
+        <Pressable onPress={() => handleChangeTimeSelected(time.value)}>
+            <TimeItem
+                active={selectedTime === time.value}
+                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>
+    )
+}, timeListItemPropsAreEqual)

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 (
 		<>
@@ -395,26 +427,20 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 									{selectDate && datesWhitelist[0]?.start !== null && (
 										<CalendarStrip
 											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 />}
 										/>
@@ -422,44 +448,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>
 					)}
@@ -468,7 +484,14 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 			</Container>
 			{!isCart && !cateringPreorder && (
 				<View style={{ position: 'absolute', bottom: bottom, paddingBottom: 20, paddingHorizontal: 20, backgroundColor: 'white', width: '100%' }}>
-					<OButton onClick={() => handleChangeMoment()} isDisabled={!selectedTime} text={t('CONTINUE', 'Continue')} style={{ borderRadius: 7.6, height: 44, shadowOpacity: 0 }} textStyle={{ color: 'white', fontSize: 14 }} showNextIcon />
+					<OButton
+						onClick={() => handleChangeMoment()}
+						isDisabled={!selectedTime}
+						text={t('CONTINUE', 'Continue')}
+						style={{ borderRadius: 7.6, height: 44, shadowOpacity: 0 }}
+						textStyle={{ fontSize: 14 }}
+						showNextIcon
+					/>
 				</View>
 			)}
 		</>

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

@@ -194,4 +194,4 @@ export const MomentSelector = (props: any) => {
     maxDate: currentDate
   }
   return <MomentOptionController {...businessPreorderProps} />
-}
+}

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

@@ -51,7 +51,7 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
   const { confirmApplePayPayment } = useApplePay()
 
   const [addCardOpen, setAddCardOpen] = useState({ stripe: false, stripeConnect: false });
-
+  const [newCardAdded, setNewCardAdded] = useState(null)
   const isWalletCashEnabled = configs?.wallet_cash_enabled?.value === '1'
   const isWalletPointsEnabled = configs?.wallet_credit_point_enabled?.value === '1'
 
@@ -223,6 +223,8 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
             handlePaymethodDataChange={handlePaymethodDataChange}
             clientSecret={props.clientSecret}
             onPaymentChange={handlePaymethodDataChange}
+            newCardAdded={newCardAdded}
+            addNewCardAsDefault
           />
         </View>
       )}
@@ -233,6 +235,7 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
           toSave
           businessId={businessIds[0]}
           businessIds={businessIds}
+          businessNames={openCarts?.map?.((cart: any) => cart?.business?.name)}
           publicKey={paymethodSelected?.data?.publishable}
           requirements={props.clientSecret}
           handleSource={handlePaymethodDataChange}
@@ -306,7 +309,7 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
         </>
       )}
 
-      {/* <OModal
+      <OModal
         entireModal
         title={t('ADD_CREDIT_OR_DEBIT_CARD', 'Add credit or debit card')}
         open={addCardOpen.stripe}
@@ -326,10 +329,11 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
             publicKey={paymethodSelected?.data?.publishable}
             requirements={props.clientSecret}
             onSelectCard={handlePaymethodDataChange}
+            setNewCardAdded={setNewCardAdded}
             onCancel={() => setAddCardOpen({ ...addCardOpen, stripe: false })}
           />
         </KeyboardAvoidingView>
-      </OModal> */}
+      </OModal>
     </PMContainer>
   )
 }

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) {
@@ -394,15 +420,11 @@ const MultiCheckoutUI = (props: any) => {
                   </OText>
                   <OButton
                     text={t('SIGN_UP', 'Sign up')}
-                    textStyle={{ color: theme.colors.white }}
                     style={{ borderRadius: 7.6, marginTop: 20 }}
                     onClick={() => setOpenModal({ ...openModal, signup: true })}
                   />
                   <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 })}
                   />
@@ -424,6 +446,9 @@ const MultiCheckoutUI = (props: any) => {
                   isCheckout
                   phoneUpdate={phoneUpdate}
                   togglePhoneUpdate={togglePhoneUpdate}
+                  isOrderTypeValidationField
+                  requiredFields={requiredFields}
+                  checkoutFields={checkoutFields}
                 />
               )}
             </ChUserDetails>
@@ -660,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/MultiOrdersDetails/index.tsx

@@ -101,6 +101,7 @@ export const MultiOrdersDetailsUI = (props: any) => {
           style={styles.btnBackArrow}
           onClick={() => handleArrowBack()}
           icon={AntDesignIcon}
+          useArrow
           iconProps={{
             name: 'arrowleft',
             size: 26

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'
@@ -64,6 +67,7 @@ const NavBar = (props: Props) => {
 		<Wrapper style={{ paddingTop: props.paddingTop, ...{ flexDirection: props.isVertical ? 'column' : 'row', alignItems: props.isVertical ? 'flex-start' : 'center' }, ...props.style }}>
 			{!props.hideArrowLeft && (
 				<OButton
+					useArrow
 					iconProps={{
 						name: 'arrowleft',
 						size: 26
@@ -114,8 +118,6 @@ const NavBar = (props: Props) => {
 			{props.showCall
 				? (<OButton
 					isCircle={true}
-					bgColor={theme.colors.primary}
-					borderColor={theme.colors.primary}
 					imgRightSrc={null}
 					imgLeftStyle={{ tintColor: 'white', width: 30, height: 30 }}
 					imgLeftSrc={theme.images.general.support}
@@ -131,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/NetworkError/index.tsx

@@ -45,15 +45,10 @@ export const NetworkError = (props: NoNetworkParams) => {
         />
         <OButton
           text={t('REFRESH', 'Refresh')}
-          bgColor={theme.colors.primary}
-          borderColor={theme.colors.primary}
           style={{
             borderRadius: 8,
             marginTop: 45
           }}
-          textStyle={{
-            color: theme.colors.white
-          }}
           onClick={() => RNRestart.Restart()}
         />
       </ImageContainer>

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

@@ -42,11 +42,8 @@ export const NotFoundSource = (props: NotFoundSourceParams) => {
 				<View style={{ marginTop: 10, width: '100%' }}>
 					<OButton
 						style={{ width: '100%', height: 50, ...btnStyle }}
-						bgColor={theme.colors.primary}
-						borderColor={theme.colors.primary}
 						onClick={() => onClickButton()}
 						text={btnTitle}
-						textStyle={{ color: theme.colors.white }}
 					/>
 				</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,7 +17,9 @@ export const OrderHistory = (props: any) => {
 
   const [, t] = useLanguage()
   const [{ parseDate }] = useUtils()
+  const [{ configs }] = useConfig();
   const theme = useTheme()
+  const changeIdToExternalId = configs?.change_order_id?.value === '1'
 
   const styles = StyleSheet.create({
     historyItem: {
@@ -62,7 +64,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 +95,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}>
@@ -145,10 +150,10 @@ export const OrderHistory = (props: any) => {
                     </>
                   )
                     : message.change?.attribute === 'prepared_in' ? (
-                    <>
-                      {t('TIME_ADDED_BY_BUSINESS', 'Time added by business')}{'\n'}
-                      {formatSeconds(parseInt(message.change.new, 10))}
-                    </>
+                      <>
+                        {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>
@@ -170,11 +175,9 @@ export const OrderHistory = (props: any) => {
       ))}
       <OButton
         text={enableReview ? t('REVIEW_ORDER', 'Review order') : t('CONTINUE', 'Continue')}
-        textStyle={{ fontSize: 14, color: theme.colors.white }}
+        textStyle={{ fontSize: 14 }}
         imgRightSrc={theme.images.general.arrow_right}
         imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
-        borderColor='transparent'
-        bgColor={theme.colors.primary}
         style={{ borderRadius: 7.6, borderWidth: 1, height: 44, shadowOpacity: 0, marginBottom: 30, marginTop: 20 }}
         onClick={() => handleReview()}
       />