ordering-ui-react-native 0.14.41 → 0.14.42-release

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

@@ -48,7 +48,7 @@ export const Help = (props: HelpParams) => {
 
       <LastOrdersContainer>
         <OText size={18} weight={600}>{t('LAST_ORDERS', 'Last Orders')}</OText>
-        <LastOrders businessId={props.businessId} onRedirect={onRedirect} />
+        <LastOrders {...props} onRedirect={onRedirect} />
       </LastOrdersContainer>
     </>
   )

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

@@ -103,6 +103,7 @@ const HighestRatedBusinessesUI = (props: HighestRatedBusinessesParams) => {
                     >
                       <BusinessController
                         business={business}
+                        isBusinessOpen={business?.open}
                         handleCustomClick={onBusinessClick}
                         orderType={orderState?.options?.type}
                         navigation={navigation}

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { useLanguage, useOrder, ToastType, useToast, OrderList, OrderDetails as OrderDetailsConTableoller } from 'ordering-components/native'
+import { useLanguage, useOrder, ToastType, useToast, OrderList, OrderDetails as OrderDetailsConTableoller, useBusiness } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 import { useFocusEffect } from '@react-navigation/native'
 import { OText, OModal } from '../shared'
@@ -214,6 +214,7 @@ const OrderMessageUI = (props: any) => {
 }
 
 export const OrderListing = (props: OrdersOptionParams) => {
+  const [businessState] = useBusiness();
 	const OrderListingProps = {
 		...props,
 		UIComponent: OrdersOptionUI,
@@ -224,6 +225,7 @@ export const OrderListing = (props: OrdersOptionParams) => {
 			pageSize: 10,
 			controlType: 'infinity'
 		},
+    businessId: businessState?.business?.id,
 		profileMessages: true,
 		orderBy: 'last_direct_message_at',
 		orderDirection: 'asc'
@@ -287,6 +289,7 @@ export const MessageListing = (props: MessageListingParams) => {
 				setSelectedOrderId={setSelectedOrderId}
 				setOrderList={setOrderListStatus}
 				setOpenMessges={setOpenMessges}
+        franchiseId={props.franchiseId}
 			/>
 			{openMessages && seletedOrder && (
 				<OModal
@@ -304,4 +307,3 @@ export const MessageListing = (props: MessageListingParams) => {
 		</MessageListingWrapper>
 	)
 }
-

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

@@ -20,19 +20,11 @@ import NavBar from '../NavBar';
 import { OButton, OIcon, OText } from '../shared';
 import { Container } from '../../layouts/Container';
 import {
-	HeaderTitle,
 	WrapSelectOption,
-	Days,
-	Day,
-	WrapHours,
-	Hours,
-	Hour,
 	WrapDelveryTime,
 } from './styles';
 import CalendarPicker from 'react-native-calendar-picker';
-import { TouchableRipple } from 'react-native-paper';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
 import SelectDropdown from 'react-native-select-dropdown';
 
 const MomentOptionUI = (props: MomentOptionParams) => {
@@ -179,165 +171,165 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 
 	useEffect(() => {
 		if (datesList?.length > 0) {
-		  const _datesList = datesList.slice(0, Number(configs?.max_days_preorder?.value || 6))
-		  const minDateParts = _datesList[0].split('-')
-		  const maxDateParts = _datesList[_datesList.length - 1].split('-')
-		  const _minDate = new Date(minDateParts[0], minDateParts[1] - 1, minDateParts[2])
-		  const _maxDate = new Date(maxDateParts[0], maxDateParts[1] - 1, maxDateParts[2])
-		  setMinDate(_minDate)
-		  setMaxDate(_maxDate)
+			const _datesList = datesList.slice(0, Number(configs?.max_days_preorder?.value || 6))
+			const minDateParts = _datesList[0].split('-')
+			const maxDateParts = _datesList[_datesList.length - 1].split('-')
+			const _minDate = new Date(minDateParts[0], minDateParts[1] - 1, minDateParts[2])
+			const _maxDate = new Date(maxDateParts[0], maxDateParts[1] - 1, maxDateParts[2])
+			setMinDate(_minDate)
+			setMaxDate(_maxDate)
 		}
 	}, [datesList])
 
 	return (
 		<>
-		<Container style={{ paddingLeft: 40, paddingRight: 40 }}>
-			<View style={{ paddingBottom: 90 }}>
-				<NavBar
-					onActionLeft={() => goToBack()}
-					btnStyle={{ paddingLeft: 0 }}
-					paddingTop={0}
-					style={{ paddingBottom: 0, flexDirection: 'column', alignItems: 'flex-start' }}
-					title={t('QUESTION_WHEN_ORDER', 'When do you want your order?')}
-					titleAlign={'center'}
-					titleStyle={{ fontSize: 14, marginRight: 0, marginLeft: 0 }}
-					titleWrapStyle={{ paddingHorizontal: 0 }}
-				/>
+			<Container style={{ paddingLeft: 40, paddingRight: 40 }}>
+				<View style={{ paddingBottom: 90 }}>
+					<NavBar
+						onActionLeft={() => goToBack()}
+						btnStyle={{ paddingLeft: 0 }}
+						paddingTop={0}
+						style={{ paddingBottom: 0, flexDirection: 'column', alignItems: 'flex-start' }}
+						title={t('QUESTION_WHEN_ORDER', 'When do you want your order?')}
+						titleAlign={'center'}
+						titleStyle={{ fontSize: 14, marginRight: 0, marginLeft: 0 }}
+						titleWrapStyle={{ paddingHorizontal: 0 }}
+					/>
 
-				<WrapSelectOption
-					onPress={() => _handleAsap()}
-					disabled={orderState.loading} style={{ alignItems: 'flex-start' }}>
-					{optionSelected.isAsap ? (
-						<OIcon
-							src={theme.images.general.option_checked}
-							width={16}
-							style={{ marginEnd: 24 }}
-						/>
-					) : (
-						<OIcon
-							src={theme.images.general.option_normal}
-							width={16}
-							style={{ marginEnd: 24 }}
-						/>
-					)}
-					<OText color={optionSelected.isAsap ? theme.colors.textNormal : theme.colors.disabled}>{t('ASAP_ABBREVIATION', 'ASAP') + ` (${moment().format('dddd, MMM d, yyyy h:mm A')} + delivery time)`}</OText>
-				</WrapSelectOption>
-				<WrapSelectOption
-					onPress={() => setOptionSelected({ isAsap: false, isSchedule: true })}
-					disabled={orderState.loading}>
-					{optionSelected.isSchedule ? (
-						<OIcon
-							src={theme.images.general.option_checked}
-							width={16}
-							style={{ marginEnd: 24 }}
-						/>
-					) : (
-						<OIcon
-							src={theme.images.general.option_normal}
-							width={16}
-							style={{ marginEnd: 24 }}
-						/>
-					)}
-					<OText color={optionSelected.isSchedule ? theme.colors.textNormal : theme.colors.disabled}>{t('SCHEDULE_FOR_LATER', 'Schedule for later')}</OText>
-				</WrapSelectOption>
+					<WrapSelectOption
+						onPress={() => _handleAsap()}
+						disabled={orderState.loading} style={{ alignItems: 'flex-start' }}>
+						{optionSelected.isAsap ? (
+							<OIcon
+								src={theme.images.general.option_checked}
+								width={16}
+								style={{ marginEnd: 24 }}
+							/>
+						) : (
+							<OIcon
+								src={theme.images.general.option_normal}
+								width={16}
+								style={{ marginEnd: 24 }}
+							/>
+						)}
+						<OText color={optionSelected.isAsap ? theme.colors.textNormal : theme.colors.disabled}>{t('ASAP_ABBREVIATION', 'ASAP') + ` (${moment().format('dddd, MMM D, yyyy h:mm A')} + delivery time)`}</OText>
+					</WrapSelectOption>
+					<WrapSelectOption
+						onPress={() => setOptionSelected({ isAsap: false, isSchedule: true })}
+						disabled={orderState.loading}>
+						{optionSelected.isSchedule ? (
+							<OIcon
+								src={theme.images.general.option_checked}
+								width={16}
+								style={{ marginEnd: 24 }}
+							/>
+						) : (
+							<OIcon
+								src={theme.images.general.option_normal}
+								width={16}
+								style={{ marginEnd: 24 }}
+							/>
+						)}
+						<OText color={optionSelected.isSchedule ? theme.colors.textNormal : theme.colors.disabled}>{t('SCHEDULE_FOR_LATER', 'Schedule for later')}</OText>
+					</WrapSelectOption>
 
-				{optionSelected.isSchedule && (
-					<WrapDelveryTime>
-						{datesList.length > 0 && (
-							<View style={styles.dateWrap}>
-								<View style={styles.dateLabel}>
-									<OText size={12} color={theme.colors.textNormal}>{dateSelected}</OText>
+					{optionSelected.isSchedule && (
+						<WrapDelveryTime>
+							{datesList.length > 0 && (
+								<View style={styles.dateWrap}>
+									<View style={styles.dateLabel}>
+										<OText size={12} color={theme.colors.textNormal}>{dateSelected}</OText>
+									</View>
+									<SelectDropdown
+										defaultButtonText={timeSelected ? timeSelected : t('DELIVERY_TIME', 'Delivery Time')}
+										defaultValue={74}
+										data={hoursList}
+										disabled={orderState.loading}
+										onSelect={(selectedItem, index) => {
+											setSelectedTime(selectedItem.startTime)
+										}}
+										buttonTextAfterSelection={(selectedItem, index) => {
+											return `${selectedItem.startTime} - ${selectedItem.endTime}`
+										}}
+										rowTextForSelection={(item, index) => {
+											return `${item.startTime} - ${item.endTime}`
+										}}
+										buttonStyle={{
+											backgroundColor: theme.colors.white,
+											borderColor: theme.colors.border,
+											borderWidth: 1,
+											borderRadius: 8,
+											height: 40,
+											width: '100%',
+											flexDirection: 'column',
+											alignItems: 'flex-start',
+											marginBottom: 20
+										}}
+										buttonTextStyle={{
+											color: theme.colors.textNormal,
+											fontSize: 12,
+											paddingTop: 10
+										}}
+										dropdownStyle={{
+											borderRadius: 8,
+											borderColor: theme.colors.lightGray,
+										}}
+										rowStyle={{
+											borderBottomColor: theme.colors.white,
+											backgroundColor: theme.colors.white,
+											height: 40,
+											flexDirection: 'column',
+											alignItems: 'flex-start',
+											paddingTop: 8,
+											paddingLeft: 22
+										}}
+										rowTextStyle={{
+											color: theme.colors.textNormal,
+											fontSize: 14,
+										}}
+									/>
+									<CalendarPicker
+										nextTitle=">"
+										width={width - 80}
+										previousTitle="<"
+										nextComponent={
+											<OIcon
+												src={theme.images.general.chevron_right}
+												color={theme.colors.disabled}
+												width={12}
+												style={{ marginHorizontal: 4 }}
+											/>
+										}
+										previousComponent={
+											<OIcon
+												src={theme.images.general.chevron_left}
+												color={theme.colors.disabled}
+												width={12}
+												style={{ marginHorizontal: 4 }}
+											/>
+										}
+										onDateChange={(date: moment.Moment) =>
+											handleChangeDate(date.format('YYYY-MM-DD'))
+										}
+										selectedDayColor={theme.colors.primaryContrast}
+										todayBackgroundColor={theme.colors.border}
+										dayLabelsWrapper={{ borderColor: theme.colors.clear }}
+										customDayHeaderStyles={customDayHeaderStylesCallback}
+										weekdays={weekDays}
+										selectedStartDate={momento}
+										minDate={minDate}
+										maxDate={maxDate}
+									/>
 								</View>
-								<SelectDropdown
-									defaultButtonText={timeSelected ? timeSelected : t('DELIVERY_TIME', 'Delivery Time')}
-									defaultValue={74}
-									data={hoursList}
-									disabled={orderState.loading}
-									onSelect={(selectedItem, index) => {
-										setSelectedTime(selectedItem.startTime)
-									}}
-									buttonTextAfterSelection={(selectedItem, index) => {
-										return `${selectedItem.startTime} - ${selectedItem.endTime}`
-									}}
-									rowTextForSelection={(item, index) => {
-										return `${item.startTime} - ${item.endTime}`
-									}}
-									buttonStyle={{
-										backgroundColor: theme.colors.white,
-										borderColor: theme.colors.border,
-										borderWidth: 1,
-										borderRadius: 8,
-										height: 40,
-										width: '100%',
-										flexDirection: 'column',
-										alignItems: 'flex-start',
-										marginBottom: 20
-									}}
-									buttonTextStyle={{
-										color: theme.colors.textNormal,
-										fontSize: 12,
-										paddingTop: 10
-									}}
-									dropdownStyle={{
-										borderRadius: 8,
-										borderColor: theme.colors.lightGray,
-									}}
-									rowStyle={{
-										borderBottomColor: theme.colors.white,
-										backgroundColor: theme.colors.white,
-										height: 40,
-										flexDirection: 'column',
-										alignItems: 'flex-start',
-										paddingTop: 8,
-										paddingLeft: 22
-									}}
-									rowTextStyle={{
-										color: theme.colors.textNormal,
-										fontSize: 14,
-									}}
-								/>							
-								<CalendarPicker
-									nextTitle=">"
-									width={width - 80}
-									previousTitle="<"
-									nextComponent={
-										<OIcon
-											src={theme.images.general.chevron_right}
-											color={theme.colors.disabled}
-											width={12}
-											style={{ marginHorizontal: 4 }}
-										/>
-									}
-									previousComponent={
-										<OIcon
-											src={theme.images.general.chevron_left}
-											color={theme.colors.disabled}
-											width={12}
-											style={{ marginHorizontal: 4 }}
-										/>
-									}
-									onDateChange={(date: moment.Moment) =>
-										handleChangeDate(date.format('YYYY-MM-DD'))
-									}
-									selectedDayColor={theme.colors.primaryContrast}
-									todayBackgroundColor={theme.colors.border}
-									dayLabelsWrapper={{ borderColor: theme.colors.clear }}
-									customDayHeaderStyles={customDayHeaderStylesCallback}
-									weekdays={weekDays}
-									selectedStartDate={momento}
-									minDate={minDate}
-                					maxDate={maxDate}
-								/>
-							</View>
-						)}
-					</WrapDelveryTime>
-				)}
+							)}
+						</WrapDelveryTime>
+					)}
+				</View>
+				<Spinner visible={momentState.isLoading === 1} />
+			</Container>
+			<View style={{ position: 'absolute', bottom: bottom, paddingBottom: 20, paddingHorizontal: 40, 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 />
 			</View>
-			<Spinner visible={momentState.isLoading === 1} />
-		</Container>
-		<View style={{position: 'absolute', bottom: bottom, paddingBottom: 20, paddingHorizontal: 40, 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 />
-		</View>
 		</>
 	);
 };

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

@@ -35,6 +35,7 @@ import {
   Icons,
   OrderDriver,
   Map,
+  Divider,
 } from './styles';
 import { OButton, OIcon, OModal, OText } from '../shared';
 import { ProductItemAccordion } from '../ProductItemAccordion';
@@ -100,7 +101,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     business: false,
     driver: false,
   });
-  const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null })
+  const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, tax: null, type: '' })
 
   const { order, businessData } = props.order;
 
@@ -349,6 +350,10 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     }
   }
 
+  const getIncludedTaxesDiscounts = () => {
+    return order?.taxes?.filter((tax: any) => tax?.type === 1)?.reduce((carry: number, tax: any) => carry + (tax?.summary?.tax_after_discount ?? tax?.summary?.tax), 0)
+  }
+
   const handleClickOrderReview = (order: any) => {
     navigation.navigate(
       'ReviewOrder',
@@ -527,7 +532,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                       onPress={() => order?.business?.cellphone &&
                         Linking.openURL(`tel:${order?.business?.cellphone}`)
                       }
-                      style={{ paddingEnd: 5 }}>
+                      style={{ paddingEnd: 5 }}
+                    >
                       <OIcon
                         src={theme.images.general.phone}
                         width={16}
@@ -730,10 +736,10 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
               <Table>
                 <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{t('SUBTOTAL', 'Subtotal')}</OText>
                 <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
-                  {parsePrice(((order?.summary?.subtotal || order?.subtotal) + getIncludedTaxes()))}
+                  {parsePrice(((order?.summary?.subtotal ?? order?.subtotal) + getIncludedTaxes()))}
                 </OText>
               </Table>
-              {(order?.summary?.discount > 0 || order?.discount > 0) && (
+              {(order?.summary?.discount > 0 ?? order?.discount > 0) && order?.offers?.length === 0 && (
                 <Table>
                   {order?.offer_type === 1 ? (
                     <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
@@ -751,24 +757,53 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   </OText>
                 </Table>
               )}
+              {
+                order?.offers?.length > 0 && order?.offers?.filter((offer: any) => offer?.target === 1)?.map((offer: any) => (
+                  <Table key={offer.id}>
+                    <OSRow>
+                      <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal} numberOfLines={1}>
+                        {offer.name}
+                        {offer.rate_type === 1 && (
+                          <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                        )}
+                      </OText>
+                      <TouchableOpacity style={{ marginLeft: 5 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_1' })}>
+                        <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                    </OSRow>
+                    <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>- {parsePrice(offer?.summary?.discount)}</OText>
+                  </Table>
+                ))
+              }
+              <Divider />
+              {order?.summary?.subtotal_with_discount > 0 && order?.summary?.discount > 0 && order?.summary?.total >= 0 && (
+                <Table>
+                  <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{t('SUBTOTAL_WITH_DISCOUNT', 'Subtotal with discount')}</OText>
+                  {order?.tax_type === 1 ? (
+                    <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{parsePrice((order?.summary?.subtotal_with_discount + getIncludedTaxesDiscounts() ?? 0))}</OText>
+                  ) : (
+                    <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{parsePrice(order?.summary?.subtotal_with_discount ?? 0)}</OText>
+                  )}
+                </Table>
+              )}
               {
                 order?.taxes?.length === 0 && order?.tax_type === 2 && (
                   <Table>
-                    <OText size={12}>
+                    <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
                       {t('TAX', 'Tax')} {`(${verifyDecimals(order?.tax, parseNumber)}%)`}
                     </OText>
-                    <OText size={12}>{parsePrice(order?.summary?.tax || 0)}</OText>
+                    <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{parsePrice(order?.summary?.tax || 0)}</OText>
                   </Table>
                 )
               }
               {
                 order?.fees?.length === 0 && (
                   <Table>
-                    <OText size={12}>
+                    <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
                       {t('SERVICE_FEE', 'Service fee')}
                       {`(${verifyDecimals(order?.service_fee, parseNumber)}%)`}
                     </OText>
-                    <OText size={12}>{parsePrice(order?.summary?.service_fee || 0)}</OText>
+                    <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{parsePrice(order?.summary?.service_fee || 0)}</OText>
                   </Table>
                 )
               }
@@ -776,15 +811,15 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 order?.taxes?.length > 0 && order?.taxes?.filter((tax: any) => tax?.type === 2 && tax?.rate !== 0).map((tax: any) => (
                   <Table key={tax.id}>
                     <OSRow>
-                      <OText size={12} numberOfLines={1}>
+                      <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal} numberOfLines={1}>
                         {tax.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
                         {`(${verifyDecimals(tax?.rate, parseNumber)}%)`}{' '}
                       </OText>
-                      <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: tax })}>
+                      <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: tax, type: 'tax' })}>
                         <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
                       </TouchableOpacity>
                     </OSRow>
-                    <OText size={12}>{parsePrice(tax?.summary?.tax || 0)}</OText>
+                    <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0)}</OText>
                   </Table>
                 ))
               }
@@ -792,53 +827,84 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 order?.fees?.length > 0 && order?.fees?.filter((fee: any) => !(fee.fixed === 0 && fee.percentage === 0))?.map((fee: any) => (
                   <Table key={fee.id}>
                     <OSRow>
-                      <OText size={12} numberOfLines={1}>
+                      <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal} numberOfLines={1}>
                         {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
                         ({parsePrice(fee?.fixed)} + {fee.percentage}%){' '}
                       </OText>
-                      <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee })}>
+                      <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee, type: 'fee' })}>
                         <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
                       </TouchableOpacity>
                     </OSRow>
-                    <OText size={12}>{parsePrice(fee?.fixed + fee?.summary?.percentage || 0)}</OText>
+                    <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0)}</OText>
                   </Table>
                 ))
               }
-              {(order?.summary?.delivery_price > 0 ||
-                order?.deliveryFee > 0) && (
-                  <Table>
-                    <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
-                    <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
-                      {parsePrice(
-                        order?.summary?.delivery_price || order?.deliveryFee,
-                      )}
-                    </OText>
+              {
+                order?.offers?.length > 0 && order?.offers?.filter((offer: any) => offer?.target === 3)?.map((offer: any) => (
+                  <Table key={offer.id}>
+                    <OSRow>
+                      <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal} numberOfLines={1}>
+                        {offer.name}
+                        {offer.rate_type === 1 && (
+                          <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                        )}
+                      </OText>
+                      <TouchableOpacity style={{ marginLeft: 5 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_3' })}>
+                        <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                    </OSRow>
+                    <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>- {parsePrice(offer?.summary?.discount)}</OText>
                   </Table>
-                )}
-              <Table>
-                <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
-                  {t('DRIVER_TIP', 'Driver tip')}
-                  {(order?.summary?.driver_tip > 0 || order?.driver_tip > 0) &&
-                    parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
-                    !parseInt(configs?.driver_tip_use_custom?.value, 10) &&
-                    `(${verifyDecimals(order?.driver_tip, parseNumber)}%)`}
-                </OText>
-                <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
-                  {parsePrice(
-                    order?.summary?.driver_tip || order?.totalDriverTip,
-                  )}
-                </OText>
-              </Table>
+                ))
+              }
+              {order?.summary?.delivery_price > 0 && (
+                <Table>
+                  <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
+                  <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{parsePrice(order?.summary?.delivery_price)}</OText>
+                </Table>
+              )}
+              {
+                order?.offers?.length > 0 && order?.offers?.filter((offer: any) => offer?.target === 2)?.map((offer: any) => (
+                  <Table key={offer.id}>
+                    <OSRow>
+                      <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal} numberOfLines={1}>
+                        {offer.name}
+                        {offer.rate_type === 1 && (
+                          <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                        )}
+                      </OText>
+                      <TouchableOpacity style={{ marginLeft: 5 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_2' })}>
+                        <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                    </OSRow>
+                    <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>- {parsePrice(offer?.summary?.discount)}</OText>
+                  </Table>
+                ))
+              }
+              {order?.summary?.driver_tip > 0 && (
+                <Table>
+                  <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
+                    {t('DRIVER_TIP', 'Driver tip')}
+                    {order?.summary?.driver_tip > 0 &&
+                      parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
+                      !parseInt(configs?.driver_tip_use_custom?.value, 10) &&
+                      (
+                        `(${verifyDecimals(order?.summary?.driver_tip, parseNumber)}%)`
+                      )}
+                  </OText>
+                  <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{parsePrice(order?.summary?.driver_tip ?? order?.totalDriverTip)}</OText>
+                </Table>
+              )}
               <Total>
                 <Table>
                   <OText size={20} lineHeight={30} weight={'600'} color={theme.colors.textNormal}>{t('TOTAL', 'Total')}</OText>
                   <OText size={20} lineHeight={30} weight={'600'} color={theme.colors.textNormal}>
-                    {parsePrice(order?.summary?.total || order?.total)}
+                    {parsePrice(order?.summary?.total ?? order?.total)}
                   </OText>
                 </Table>
               </Total>
               {order?.payment_events?.length > 0 && (
-                <View style={{marginTop: 10}}>
+                <View style={{ marginTop: 10 }}>
                   <OText size={20} weight='bold' color={theme.colors.textNormal}>{t('PAYMENTS', 'Payments')}</OText>
                   <View
                     style={{
@@ -904,10 +970,16 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       </OModal>
       <OModal
         open={openTaxModal.open}
-        onClose={() => setOpenTaxModal({ open: false, data: null })}
+        onClose={() => setOpenTaxModal({ open: false, data: null, type: '' })}
         entireModal
+        title={`${openTaxModal.data?.name ||
+          t('INHERIT_FROM_BUSINESS', 'Inherit from business')} ${openTaxModal.data?.rate_type !== 2 ? `(${typeof openTaxModal.data?.rate === 'number' ? `${openTaxModal.data?.rate}%` : `${parsePrice(openTaxModal.data?.fixed ?? 0)} + ${openTaxModal.data?.percentage}%`})` : ''}  `}
       >
-        <TaxInformation data={openTaxModal.data} products={order?.products} />
+        <TaxInformation
+          type={openTaxModal.type}
+          data={openTaxModal.data}
+          products={order?.products}
+        />
       </OModal>
     </OrderDetailsContainer>
   );