ordering-ui-react-native 0.16.21 → 0.16.22-release

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

@@ -5,6 +5,7 @@ import { useForm, Controller } from 'react-hook-form';
 import { PhoneInputNumber } from '../PhoneInputNumber';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import Recaptcha from 'react-native-recaptcha-that-works'
+import ReCaptcha from '@fatnlazycat/react-native-recaptcha-v3'
 
 import {
 	LoginForm as LoginFormController,
@@ -102,7 +103,7 @@ const LoginFormUI = (props: LoginParams) => {
 
 	const googleLoginEnabled = configs?.google_login_enabled?.value === '1' || !configs?.google_login_enabled?.enabled
 	const facebookLoginEnabled = configs?.facebook_login_enabled?.value === '1' || !configs?.facebook_login_enabled?.enabled
-  	const appleLoginEnabled = configs?.apple_login_enabled?.value === '1' || !configs?.apple_login_enabled?.enabled
+	const appleLoginEnabled = configs?.apple_login_enabled?.value === '1' || !configs?.apple_login_enabled?.enabled
 
 	const loginStyle = StyleSheet.create({
 		btnOutline: {
@@ -235,7 +236,7 @@ const LoginFormUI = (props: LoginParams) => {
 
 	const onRecaptchaVerify = (token: any) => {
 		setRecaptchaVerified(true)
-		handleReCaptcha(token)
+		handleReCaptcha({ code: token, version: recaptchaConfig?.version })
 	}
 
 	const handleChangeOtpType = (type: string) => {
@@ -256,7 +257,7 @@ const LoginFormUI = (props: LoginParams) => {
 		})
 	}
 
-	const handleCategoryScroll = (opc : string) => {
+	const handleCategoryScroll = (opc: string) => {
 		tabsRef.current.scrollTo({
 			x: tabLayouts?.[opc]?.x - 40,
 			animated: true
@@ -272,15 +273,39 @@ const LoginFormUI = (props: LoginParams) => {
 
 	useEffect(() => {
 		if (configs && Object.keys(configs).length > 0 && enableReCaptcha) {
-			setRecaptchaConfig({
-				siteKey: configs?.security_recaptcha_site_key?.value || null,
-				baseUrl: configs?.security_recaptcha_base_url?.value || null
-			})
+			if (configs?.security_recaptcha_type?.value === 'v3' &&
+				configs?.security_recaptcha_score_v3?.value > 0 &&
+				configs?.security_recaptcha_site_key_v3?.value
+			) {
+				setRecaptchaConfig({
+					version: 'v3',
+					siteKey: configs?.security_recaptcha_site_key_v3?.value || null,
+					baseUrl: configs?.security_recaptcha_base_url?.value || null
+				})
+				return
+			}
+			if (configs?.security_recaptcha_site_key?.value) {
+				setRecaptchaConfig({
+					version: 'v2',
+					siteKey: configs?.security_recaptcha_site_key?.value || null,
+					baseUrl: configs?.security_recaptcha_base_url?.value || null
+				})
+			}
 		}
 	}, [configs, enableReCaptcha])
 
 	useEffect(() => {
 		if (!formState.loading && formState.result?.error) {
+			if (formState.result?.result?.[0] === 'ERROR_AUTH_VERIFICATION_CODE') {
+				setRecaptchaVerified(false)
+				setRecaptchaConfig({
+					version: 'v2',
+					siteKey: configs?.security_recaptcha_site_key?.value || null,
+					baseUrl: configs?.security_recaptcha_base_url?.value || null
+				})
+				showToast(ToastType.Info, t('TRY_AGAIN', 'Please try again'))
+				return
+			}
 			formState.result?.result &&
 				showToast(
 					ToastType.Error,
@@ -351,15 +376,15 @@ const LoginFormUI = (props: LoginParams) => {
 				titleStyle={{ marginRight: 0, marginLeft: 0 }}
 			/>
 			<FormSide>
-				{((useLoginByEmail && useLoginByCellphone) || useLoginOtp) && (
+				{(Number(useLoginByEmail) + Number(useLoginByCellphone) + Number(useLoginOtpEmail) + Number(useLoginOtpCellphone) > 1) && (
 					<LoginWith>
 						<OTabs
-							horizontal 
+							horizontal
 							showsHorizontalScrollIndicator={false}
 							ref={tabsRef}
 						>
 							{useLoginByEmail && (
-								<TabBtn 
+								<TabBtn
 									onPress={() => handleChangeTab('email')}
 									onLayout={(event: any) => handleOnLayout(event, 'email')}
 								>
@@ -384,7 +409,7 @@ const LoginFormUI = (props: LoginParams) => {
 								</TabBtn>
 							)}
 							{useLoginByCellphone && (
-								<TabBtn 
+								<TabBtn
 									onPress={() => handleChangeTab('cellphone')}
 									onLayout={(event: any) => handleOnLayout(event, 'cellphone')}
 								>
@@ -409,7 +434,7 @@ const LoginFormUI = (props: LoginParams) => {
 								</TabBtn>
 							)}
 							{useLoginOtpEmail && (
-								<TabBtn 
+								<TabBtn
 									onPress={() => handleChangeOtpType('email')}
 									onLayout={(event: any) => handleOnLayout(event, 'otp_email')}
 								>
@@ -434,7 +459,7 @@ const LoginFormUI = (props: LoginParams) => {
 								</TabBtn>
 							)}
 							{useLoginOtpCellphone && (
-								<TabBtn 
+								<TabBtn
 									onPress={() => handleChangeOtpType('cellphone')}
 									onLayout={(event: any) => handleOnLayout(event, 'otp_cellphone')}
 								>
@@ -596,35 +621,47 @@ const LoginFormUI = (props: LoginParams) => {
 							</TouchableOpacity>
 						)}
 
-						{enableReCaptcha && (
+						{(enableReCaptcha && recaptchaConfig?.version) && (
 							<>
-								<TouchableOpacity
-									onPress={handleOpenRecaptcha}
-								>
-									<RecaptchaButton>
-										{recaptchaVerified ? (
-											<MaterialCommunityIcons
-												name="checkbox-marked"
-												size={26}
-												color={theme.colors.primary}
-											/>
-										) : (
-											<MaterialCommunityIcons
-												name="checkbox-blank-outline"
-												size={26}
-												color={theme.colors.mediumGray}
-											/>
-										)}
-										<OText size={14} mLeft={8}>{t('VERIFY_ReCAPTCHA', 'Verify reCAPTCHA')}</OText>
-									</RecaptchaButton>
-								</TouchableOpacity>
-								<Recaptcha
-									ref={recaptchaRef}
-									siteKey={recaptchaConfig?.siteKey}
-									baseUrl={recaptchaConfig?.baseUrl}
-									onVerify={onRecaptchaVerify}
-									onExpire={() => setRecaptchaVerified(false)}
-								/>
+								{recaptchaConfig?.version === 'v3' ? (
+									<ReCaptcha
+										url={recaptchaConfig?.baseUrl}
+										siteKey={recaptchaConfig?.siteKey}
+										containerStyle={{ height: 40 }}
+										onExecute={onRecaptchaVerify}
+										reCaptchaType={1}
+									/>
+								) : (
+									<>
+										<TouchableOpacity
+											onPress={handleOpenRecaptcha}
+										>
+											<RecaptchaButton>
+												{recaptchaVerified ? (
+													<MaterialCommunityIcons
+														name="checkbox-marked"
+														size={26}
+														color={theme.colors.primary}
+													/>
+												) : (
+													<MaterialCommunityIcons
+														name="checkbox-blank-outline"
+														size={26}
+														color={theme.colors.mediumGray}
+													/>
+												)}
+												<OText size={14} mLeft={8}>{t('VERIFY_ReCAPTCHA', 'Verify reCAPTCHA')}</OText>
+											</RecaptchaButton>
+										</TouchableOpacity>
+										<Recaptcha
+											ref={recaptchaRef}
+											siteKey={recaptchaConfig?.siteKey}
+											baseUrl={recaptchaConfig?.baseUrl}
+											onVerify={onRecaptchaVerify}
+											onExpire={() => setRecaptchaVerified(false)}
+										/>
+									</>)
+								}
 							</>
 						)}
 						<OButton
@@ -682,8 +719,9 @@ const LoginFormUI = (props: LoginParams) => {
 					)}
 
 				{configs && Object.keys(configs).length > 0 ? (
-					(((configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') && configs?.facebook_id?.value) ||
-						(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null)) &&
+					(((configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') && configs?.facebook_id?.value && facebookLoginEnabled) ||
+					((configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && googleLoginEnabled) ||
+					((configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && appleLoginEnabled)) &&
 					(
 						<>
 							<View
@@ -707,7 +745,7 @@ const LoginFormUI = (props: LoginParams) => {
 							<ButtonsWrapper>
 								<SocialButtons>
 									{(configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') &&
-										configs?.facebook_id?.value && 
+										configs?.facebook_id?.value &&
 										facebookLoginEnabled && (
 											<FacebookLogin
 												notificationState={notificationState}

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

@@ -5,6 +5,7 @@ import { launchImageLibrary } from 'react-native-image-picker'
 import { GiftedChat, Actions, ActionsProps, InputToolbar, Composer, Send, Bubble, MessageImage, InputToolbarProps, ComposerProps } from 'react-native-gifted-chat'
 import { USER_TYPE } from '../../config/constants'
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 import { OIcon, OIconButton, OText, OButton } from '../shared'
 import { TouchableOpacity, ActivityIndicator, StyleSheet, View, Platform, Keyboard } from 'react-native'
 import { Header, TitleHeader, Wrapper, QuickMessageContainer, ProfileMessageHeader, MessageTypeItem } from './styles'
@@ -36,7 +37,7 @@ const ORDER_STATUS: 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 filterSpecialStatus = ['prepared_in', 'delivered_in', 'delivery_datetime']
@@ -122,18 +123,17 @@ const MessagesUI = (props: MessagesParams) => {
 
 	const messageConsole = (message: any) => {
 		return message.change?.attribute !== 'driver_id'
-		  ?
-		  `${t('ORDER', 'Order')} ${t(message.change.attribute.toUpperCase(), message.change.attribute.replace('_', ' '))} ${t('CHANGED_FROM', 'Changed from')} ${
-			filterSpecialStatus.includes(message.change.attribute) ? 
-			`${message.change.old === null ? '0' : message.change.old} ${t('TO', 'to')} ${message.change.new} ${t('MINUTES', 'Minutes')}` : 
-			`${message.change.old !== null && t(ORDER_STATUS[parseInt(message.change.old, 10)])} ${t('TO', 'to')} ${t(ORDER_STATUS[parseInt(message.change.new, 10)])}`
-		  }`
-		  : message.change.new
 			?
-			`${message.driver?.name} ${message.driver?.lastname !== null ? message.driver.lastname : ''} ${t('WAS_ASSIGNED_AS_DRIVER', 'Was assigned as driver')} ${message.comment ? message.comment.length : ''}`
-			:
-			`${t('DRIVER_UNASSIGNED', 'Driver unassigned')}`
-	  }
+			`${t('ORDER', 'Order')} ${t(message.change.attribute.toUpperCase(), message.change.attribute.replace('_', ' '))} ${t('CHANGED_FROM', 'Changed from')} ${filterSpecialStatus.includes(message.change.attribute) ?
+				`${message.change.old === null ? '0' : message.change.old} ${t('TO', 'to')} ${message.change.new} ${t('MINUTES', 'Minutes')}` :
+				`${message.change.old !== null && t(ORDER_STATUS[parseInt(message.change.old, 10)])} ${t('TO', 'to')} ${t(ORDER_STATUS[parseInt(message.change.new, 10)])}`
+			}`
+			: message.change.new
+				?
+				`${message.driver?.name} ${message.driver?.lastname !== null ? message.driver.lastname : ''} ${t('WAS_ASSIGNED_AS_DRIVER', 'Was assigned as driver')} ${message.comment ? message.comment.length : ''}`
+				:
+				`${t('DRIVER_UNASSIGNED', 'Driver unassigned')}`
+	}
 
 	useEffect(() => {
 		let newMessages: Array<any> = []
@@ -402,7 +402,9 @@ const MessagesUI = (props: MessagesParams) => {
 			<Wrapper>
 				{!isMeesageListing ? (
 					<Header>
-						<OIconButton icon={theme.images.general.arrow_left} style={{ paddingStart: 10, borderColor: theme.colors.clear }} onClick={onClose} />
+						<TouchableOpacity onPress={onClose} style={{ paddingStart: 10, borderColor: theme.colors.clear }}>
+							<AntDesignIcon name='arrowleft' size={26} />
+						</TouchableOpacity>
 						<View style={{ marginRight: 10, shadowColor: theme.colors.black, shadowOpacity: 0.1, shadowOffset: { width: 0, height: 1 }, shadowRadius: 2 }}>
 							<OIcon
 								url={type === USER_TYPE.DRIVER ? order?.driver?.photo : order?.business?.logo}
@@ -419,10 +421,8 @@ const MessagesUI = (props: MessagesParams) => {
 				) : (
 					<ProfileMessageHeader>
 						<View style={{ ...styles.headerTitle }}>
-							<TouchableOpacity
-								style={styles.headerItem}
-								onPress={onClose}>
-								<OIcon src={theme.images.general.arrow_left} width={16} />
+							<TouchableOpacity onPress={onClose} style={styles.headerItem}>
+								<AntDesignIcon name='arrowleft' size={26} />
 							</TouchableOpacity>
 							<OText size={18}>{t('ORDER', theme?.defaultLanguages?.ORDER || 'Order')} #{order?.id}</OText>
 						</View>

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

@@ -0,0 +1,197 @@
+import React, { useEffect, useState } from 'react'
+import { StyleSheet, View, Platform } from 'react-native'
+import SelectDropdown from 'react-native-select-dropdown'
+import { useTheme } from 'styled-components/native'
+import {
+  MomentOption as MomentOptionController,
+  useConfig,
+  useUtils
+} from 'ordering-components/native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import IconAntDesign from 'react-native-vector-icons/AntDesign'
+import { Container } from './styles'
+import moment from 'moment'
+
+const MomentSelectorUI = (props: any) => {
+  const {
+		datesList,
+		hoursList,
+		dateSelected,
+		timeSelected,
+		handleChangeDate,
+		handleChangeTime,
+  } = props
+
+  const theme = useTheme()
+  const { top } = useSafeAreaInsets()
+  const [{ configs }] = useConfig()
+  const [{ parseTime }] = useUtils()
+
+  const [customizedDateList, setCustomizedDateList] = useState([])
+  const [customizedTimeList, setCustomizedTimeList] = useState([])
+
+  const is12hours = configs?.dates_moment_format?.value?.includes('hh:mm')
+
+  const styles = StyleSheet.create({
+    selectOption: {
+      width: '100%',
+      backgroundColor: theme.colors.backgroundGray100,
+      paddingVertical: 5,
+      paddingHorizontal: 14,
+      flexDirection: 'row-reverse',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      height: 30
+    },
+    selectWrapper: {
+      flex: 1
+    }
+  })
+
+  useEffect(() => {
+    const updatedDatesList = datesList?.map((date: any) => {
+      return { value: moment(date).format('MMM DD, YYYY'), key: date }
+    })
+    setCustomizedDateList(updatedDatesList)
+  }, [datesList])
+
+  useEffect(() => {
+    if (hoursList?.length > 0) {
+      
+      const updatedHoursList = hoursList?.map((hour: any) => {
+        const timeValue = is12hours ? (
+          hour?.startTime?.includes('12')
+            ? `${hour.startTime}PM`
+            : parseTime(moment(hour.startTime, 'HH:mm'), { outputFormat: 'hh:mma' })
+        ) : (
+          parseTime(moment(hour.startTime, 'HH:mm'), { outputFormat: 'HH:mm' })
+          )
+          return { value: timeValue, key: hour.startTime }
+        })
+      setCustomizedTimeList(updatedHoursList)
+    }
+  }, [hoursList])
+
+  const dropDownIcon = () => {
+    return (
+      <IconAntDesign
+        name='down'
+        color={theme.colors.textThird}
+        size={12}
+      />
+    )
+  }
+
+  return (
+    <Container>
+      <View style={styles.selectWrapper}>
+        <SelectDropdown
+          defaultValue={customizedDateList?.find((item: any) => item.key === dateSelected)}
+          data={customizedDateList}
+          onSelect={(selectedItem, index) => {
+            handleChangeDate(selectedItem?.key)
+          }}
+          buttonTextAfterSelection={(selectedItem, index) => {
+            return selectedItem?.value
+          }}
+          rowTextForSelection={(item, index) => {
+            return item.value
+          }}
+          buttonStyle={{borderTopLeftRadius: 7.6, borderBottomLeftRadius: 7.6, ...styles.selectOption}}
+          buttonTextStyle={{
+            color: theme.colors.disabled,
+            fontSize: 12,
+            textAlign: 'left',
+            marginHorizontal: 0
+          }}
+          dropdownStyle={{
+            borderRadius: 8,
+            borderColor: theme.colors.lightGray,
+            marginTop: Platform.OS === 'ios' ? 12 : -top
+          }}
+          rowStyle={{
+            borderBottomColor: theme.colors.backgroundGray100,
+            backgroundColor: theme.colors.backgroundGray100,
+            height: 30,
+            flexDirection: 'column',
+            alignItems: 'flex-start',
+            paddingTop: 8,
+            paddingHorizontal: 12
+          }}
+          rowTextStyle={{
+            color: theme.colors.disabled,
+            fontSize: 12,
+            marginHorizontal: 0
+          }}
+          renderDropdownIcon={() => dropDownIcon()}
+          dropdownOverlayColor='transparent'
+        />
+      </View>
+      <View style={styles.selectWrapper}>
+        <SelectDropdown
+          defaultValue={customizedTimeList?.find((item: any) => item.key === timeSelected)}
+          data={customizedTimeList}
+          onSelect={(selectedItem, index) => {
+            handleChangeTime(selectedItem.key)
+          }}
+          buttonTextAfterSelection={(selectedItem, index) => {
+            return selectedItem.value
+          }}
+          rowTextForSelection={(item, index) => {
+            return item.value
+          }}
+          buttonStyle={{borderTopRightRadius: 7.6, borderBottomRightRadius: 7.6, ...styles.selectOption}}
+          buttonTextStyle={{
+            color: theme.colors.disabled,
+            fontSize: 12,
+            textAlign: 'left',
+            marginHorizontal: 0
+          }}
+          dropdownStyle={{
+            borderRadius: 8,
+            borderColor: theme.colors.lightGray,
+            marginTop: Platform.OS === 'ios' ? 12 : -top
+          }}
+          rowStyle={{
+            borderBottomColor: theme.colors.backgroundGray100,
+            backgroundColor: theme.colors.backgroundGray100,
+            height: 30,
+            flexDirection: 'column',
+            alignItems: 'flex-start',
+            paddingTop: 8,
+            paddingHorizontal: 14
+          }}
+          rowTextStyle={{
+            color: theme.colors.disabled,
+            fontSize: 12,
+            marginHorizontal: 0
+          }}
+          renderDropdownIcon={() => dropDownIcon()}
+          dropdownOverlayColor='transparent'
+        />
+      </View>
+    </Container>
+  )
+}
+
+export const MomentSelector = (props: any) => {
+  const [{ configs }] = useConfig()
+
+  const limitDays = parseInt(configs?.max_days_preorder?.value, 10)
+
+  const currentDate = new Date()
+  const time = limitDays > 1
+    ? currentDate.getTime() + ((limitDays - 1) * 24 * 60 * 60 * 1000)
+    : limitDays === 1 ? currentDate.getTime() : currentDate.getTime() + (6 * 24 * 60 * 60 * 1000)
+
+  currentDate.setTime(time)
+  currentDate.setHours(23)
+  currentDate.setMinutes(59)
+
+  const businessPreorderProps = {
+    ...props,
+    UIComponent: MomentSelectorUI,
+    maxDate: currentDate
+  }
+  return <MomentOptionController {...businessPreorderProps} />
+}

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

@@ -0,0 +1,6 @@
+import styled from 'styled-components/native'
+
+export const Container = styled.View`
+  flex-direction: row;
+  width: 100%;
+`

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

@@ -79,6 +79,7 @@ const MultiCheckoutUI = (props: any) => {
 	const isPreOrder = configs?.preorder_status_enabled?.value === '1'
   const maximumCarts = 5
   const isDisablePlaceOrderButton = !(paymethodSelected?.paymethod_id || paymethodSelected?.wallet_id) || openCarts.length > maximumCarts
+  const walletCarts = (Object.values(carts)?.filter((cart: any) => cart?.products && cart?.products?.length && cart?.status !== 2 && cart?.valid_schedule && cart?.valid_products && cart?.valid_address && cart?.valid_maximum && cart?.valid_minimum && cart?.wallets) || null) || []
 
 	const [isUserDetailsEdit, setIsUserDetailsEdit] = useState(false);
 	const [phoneUpdate, setPhoneUpdate] = useState(false);
@@ -253,6 +254,11 @@ const MultiCheckoutUI = (props: any) => {
                   </OText>
                 </CCNotCarts>
               )}
+              {walletCarts.length > 0 && (
+                <OText size={14} color={theme.colors.danger5} style={{ marginVertical: 20 }}>
+                  {t('WARNING_PARTIAL_WALLET_CARTS', 'Important: One or more carts can`t be completed due a partial payment with cash/points wallet and requires to be paid individually')}
+                </OText>
+              )}
               {openCarts.length > 0 && (
                 <ChCartsTotal>
                   <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>

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

@@ -1,11 +1,12 @@
 import React, { useEffect } from 'react'
-import { useLanguage, useUtils, useToast,	ToastType, MultiOrdersDetails as MultiOrdersDetailsController } from 'ordering-components/native'
-import { View, StyleSheet, BackHandler } from 'react-native'
+import { useLanguage, useUtils, useToast, ToastType, MultiOrdersDetails as MultiOrdersDetailsController } from 'ordering-components/native'
+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'
 
 import {
   OrdersDetailsContainer,
@@ -29,20 +30,20 @@ export const MultiOrdersDetailsUI = (props: any) => {
   } = props
 
   const theme = useTheme()
-	const styles = StyleSheet.create({
+  const styles = StyleSheet.create({
     btnBackArrow: {
-			borderWidth: 0,
-			backgroundColor: theme.colors.clear,
-			shadowColor: theme.colors.clear,
-			padding: 0,
+      borderWidth: 0,
+      backgroundColor: theme.colors.clear,
+      shadowColor: theme.colors.clear,
+      padding: 0,
       marginLeft: -20
-		},
-	})
-  
+    },
+  })
+
   const { loading, orders, error } = props.ordersList
   const [, t] = useLanguage()
   const [{ parsePrice, parseNumber, parseDate }] = useUtils();
-	const [, { showToast }] = useToast();
+  const [, { showToast }] = useToast();
 
   const walletName: any = {
     cash: {
@@ -60,7 +61,7 @@ export const MultiOrdersDetailsUI = (props: any) => {
     }
     navigation.navigate('BusinessList');
     return true
-	}
+  }
 
   const handleGoToOrderDetails = (uuid: any) => {
     navigation.navigate('OrderDetails', { orderId: uuid })
@@ -68,7 +69,7 @@ export const MultiOrdersDetailsUI = (props: any) => {
 
   useEffect(() => {
     if (error) {
-	  	showToast(ToastType.Error, error)
+      showToast(ToastType.Error, error)
     }
   }, [error])
 
@@ -83,11 +84,14 @@ export const MultiOrdersDetailsUI = (props: any) => {
     <OrdersDetailsContainer keyboardShouldPersistTaps="handled" contentContainerStyle={{ paddingHorizontal: 40 }}>
       <View style={{ flexDirection: 'row' }}>
         <OButton
-          imgLeftSrc={theme.images.general.arrow_left}
           imgRightSrc={null}
           style={styles.btnBackArrow}
           onClick={() => handleArrowBack()}
-          imgLeftStyle={{ tintColor: theme.colors.textNormal, width: 16 }}
+          icon={AntDesignIcon}
+          iconProps={{
+            name: 'arrowleft',
+            size: 26
+          }}
         />
       </View>
       <Header>
@@ -202,7 +206,7 @@ export const MultiOrdersDetailsUI = (props: any) => {
           </Row>
           <Row>
             <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
-            {t('ESTIMATED_TAX_TO_BE_COLLECTED', 'Estimated tax to be collected')}:
+              {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)}