ordering-ui-react-native 0.22.21 → 0.22.22-release

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

@@ -230,7 +230,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
                 </BusinessInfoItem>
                 <OButton
                   onClick={() => onBusinessClick(business)}
-                  textStyle={{ color: theme.colors.primary, fontSize: 10 }}
+                  textStyle={{ fontSize: 10 }}
                   text={t('GO_TO_STORE', 'Go to store')}
                   style={{
                     borderRadius: 23,
@@ -238,7 +238,6 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
                     paddingRight: 10,
                     height: 23,
                     shadowOpacity: 0,
-                    backgroundColor: theme.colors.primaryContrast,
                     borderWidth: 0
                   }}
                 />

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

@@ -11,6 +11,8 @@ import { BusinessMenuList } from '../BusinessMenuList'
 import Spinner from 'react-native-loading-spinner-overlay'
 import { BusinessPreorderParams } from '../../types'
 import moment from 'moment'
+import { setLocalMoment } from '../../utils';
+
 import SelectDropdown from 'react-native-select-dropdown'
 import {
   PreOrderContainer,
@@ -41,7 +43,8 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
     getActualSchedule,
     isAsap,
     cateringPreorder,
-    preorderLeadTime
+    preorderLeadTime,
+    preorderMaximumDays
   } = props
 
   const theme = useTheme()
@@ -261,14 +264,23 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
     if (cateringPreorder) {
       let _timeLists = []
       const schedule = business && getActualSchedule()
-      if (!schedule && cateringPreorder && Object.keys(business)?.length > 0) {
+      if (!schedule && business) {
+        setTimeList([])
         return
       }
+
       _timeLists = hoursList
-        .filter(hour => ((Object.keys(business || {})?.length === 0) || 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,
@@ -296,7 +308,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
       const _times = getTimes(selectDate, selectedMenu)
       setTimeList(_times)
     }
-  }, [selectDate, menu, business, cateringPreorder, hoursList, dateSelected])
+  }, [selectDate, menu, JSON.stringify(datesWhitelist), JSON.stringify(business), cateringPreorder, JSON.stringify(hoursList), dateSelected])
 
   useEffect(() => {
     if (selectedPreorderType === 0 && Object.keys(menu).length > 0) setMenu({})
@@ -311,6 +323,10 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
     }
   }, [dateSelected])
 
+  useEffect(() => {
+    setLocalMoment(moment, t)
+  }, [])
+
   useFocusEffect(
     React.useCallback(() => {
       handleAsap && handleAsap()
@@ -438,21 +454,23 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
                   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={selectDate}
                   datesWhitelist={datesWhitelist}
+                  highlightDateNameStyle={styles.highlightDateName}
+                  highlightDateNumberStyle={styles.highlightDateNumber}
+                  minDate={moment()}
+                  maxDate={cateringPreorder ? moment().add(preorderMaximumDays, 'days') : undefined}
                   disabledDateNameStyle={styles.disabledDateName}
                   disabledDateNumberStyle={styles.disabledDateNumber}
+                  dateNumberStyle={styles.dateNumber}
+                  dateNameStyle={styles.dateName}
                   disabledDateOpacity={0.6}
-                  onDateSelected={(date) => onSelectDate(date)}
+                  onDateSelected={(date: any) => onSelectDate(date)}
                   leftSelector={<LeftSelector />}
                   rightSelector={<RightSelector />}
                 />
@@ -527,7 +545,6 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
         )}
         <OButton
           text={t('GO_TO_MENU', 'Go to menu')}
-          textStyle={{ color: 'white' }}
           style={{ borderRadius: 7.6, marginBottom: 20, marginTop: 30 }}
           onClick={() => handleClickBusiness()}
           isDisabled={isAsap || !(dateSelected && timeSelected)}
@@ -553,21 +570,22 @@ export const BusinessPreorder = (props: any) => {
   currentDate.setMinutes(59)
 
   const cateringTypeString = orderState?.options?.type === 7
-  ? 'catering_delivery'
-  : orderState?.options?.type === 8
-    ? 'catering_pickup'
-    : null
+    ? 'catering_delivery'
+    : orderState?.options?.type === 8
+      ? 'catering_pickup'
+      : null
 
-const splitCateringValue = (configName : string) =>
-  Object.values(props?.business?.configs || {})
-    ?.find(config => config?.key === configName)
-    ?.value?.split('|')
-    ?.find(val => val.includes(cateringTypeString || ''))?.split(',')[1]
-const preorderSlotInterval = parseInt(splitCateringValue('preorder_slot_interval'))
-const preorderLeadTime = parseInt(splitCateringValue('preorder_lead_time'))
-const preorderTimeRange = parseInt(splitCateringValue('preorder_time_range'))
-const preorderMaximumDays = parseInt(splitCateringValue('preorder_maximum_days'))
-const preorderMinimumDays = parseInt(splitCateringValue('preorder_minimum_days'))
+  const splitCateringValue = (configName: string) =>
+    Object.values(props?.business?.configs || {})
+      ?.find((config : any) => config?.key === configName)
+      ?.value?.split('|')
+      ?.find((val : any) => val.includes(cateringTypeString || ''))?.split(',')[1]
+
+  const preorderSlotInterval = parseInt(splitCateringValue('preorder_slot_interval'))
+  const preorderLeadTime = parseInt(splitCateringValue('preorder_lead_time'))
+  const preorderTimeRange = parseInt(splitCateringValue('preorder_time_range'))
+  const preorderMaximumDays = parseInt(splitCateringValue('preorder_maximum_days'))
+  const preorderMinimumDays = parseInt(splitCateringValue('preorder_minimum_days'))
 
   const businessPreorderProps = {
     ...props,
@@ -581,4 +599,4 @@ const preorderMinimumDays = parseInt(splitCateringValue('preorder_minimum_days')
     cateringPreorder: !!cateringTypeString
   }
   return <MomentOption {...businessPreorderProps} />
-}
+}

package/themes/original/src/components/BusinessProductsList/SubcategoriesComponent/index.tsx

@@ -1,87 +1,90 @@
 import React from 'react'
-import { useTheme } from 'styled-components/native'
 import { StyleSheet } from 'react-native'
-import { SubCategoriesContainer, ContainerButton } from './styles'
-import { OButton } from '../../shared'
 import { useLanguage } from 'ordering-components/native'
+import FIcon from 'react-native-vector-icons/Feather'
+import { SubCategoriesContainer, ContainerButton } from './styles'
+import { OButton, OText } from '../../shared'
 
 function SubcategoriesComponentPropsAreEqual(prev: any, next: any) {
-    return prev.subcategoriesSelected === next.subcategoriesSelected &&
-        prev.category === next.category
+  return prev.subcategoriesSelected === next.subcategoriesSelected &&
+    prev.category === next.category
 }
 
 interface SubcategoriesComponentParams {
-    subcategoriesSelected?: any,
-    category?: any,
-    onClickSubcategory: any
+  subcategoriesSelected?: any,
+  category?: any,
+  onClickSubcategory: any
 }
 
-const SubcategoriesComponent = (props : SubcategoriesComponentParams) => {
-    const {
-        subcategoriesSelected,
-        category,
-        onClickSubcategory
-    } = props
+const SubcategoriesComponent = (props: SubcategoriesComponentParams) => {
+  const {
+    subcategoriesSelected,
+    category,
+    onClickSubcategory
+  } = props
 
-    const theme = useTheme()
-    const [, t] = useLanguage()
-    const allsubcategorySelected = !subcategoriesSelected?.some((subcategory: any) => category?.id === subcategory?.parent_category_id)
+  const [, t] = useLanguage()
+  const allsubcategorySelected = !subcategoriesSelected?.some((subcategory: any) => category?.id === subcategory?.parent_category_id)
 
-    const bpStyles = StyleSheet.create({
-        catWrap: { flexDirection: 'row', alignItems: 'center', marginBottom: 19 },
-        catIcon: {
-            borderRadius: 7.6,
-            shadowColor: '#000000',
-            shadowOpacity: 0.1,
-            shadowOffset: { width: 0, height: 0 },
-            shadowRadius: 1,
-            marginEnd: 13,
-        },
-        categoryButtonStyle: {
-            borderWidth: 0,
-            marginLeft: 5,
-            marginRight: 5,
-            marginBottom: 10,
-            height: 35,
-            paddingLeft: 3,
-            paddingRight: 3,
-        }
-    });
+  const bpStyles = StyleSheet.create({
+    categoryButtonStyle: {
+      borderWidth: 0,
+      marginRight: 5,
+      borderRadius: 8,
+      marginBottom: 5,
+      height: 35,
+      padding: 0,
+      paddingLeft: 3,
+      paddingRight: 3,
+    }
+  });
 
 
-    return (
-        <SubCategoriesContainer>
-            <ContainerButton
-                isSelected={allsubcategorySelected}
-            >
-                <OButton
-                    onClick={() => onClickSubcategory(null, category)}
-                    bgColor={allsubcategorySelected ? theme.colors.primary : theme.colors.backgroundGray}
-                    text={`${t('ALL', 'All')} ${allsubcategorySelected ? 'X' : ''}`}
-                    style={bpStyles.categoryButtonStyle}
-                    textStyle={{ color: allsubcategorySelected ? theme.colors.white : theme.colors.textNormal, fontSize: 12 }}
-                />
-            </ContainerButton>
-            {category?.subcategories?.map((subcategory: any) => {
-                const isSubcategorySelected = subcategoriesSelected?.find((_subcategory: any) => _subcategory?.id === subcategory?.id)
-                return (
-                    <ContainerButton
-                        key={subcategory?.id}
-                        isSelected={isSubcategorySelected}
-                    >
-                        <OButton
-                            onClick={() => onClickSubcategory(subcategory, category)}
-                            bgColor={isSubcategorySelected ? theme.colors.primary : theme.colors.backgroundGray}
-                            text={`${subcategory?.name} ${isSubcategorySelected ? 'X' : ''}`}
-                            style={bpStyles.categoryButtonStyle}
-                            textStyle={{ color: isSubcategorySelected ? theme.colors.white : theme.colors.textNormal, fontSize: 12 }}
-                        />
-                    </ContainerButton>
-                )
-            }
-            )}
-        </SubCategoriesContainer>
-    )
+  return (
+    <SubCategoriesContainer>
+      <ContainerButton
+        isSelected={allsubcategorySelected}
+      >
+        <OButton
+          onClick={() => onClickSubcategory(null, category)}
+          text={
+            allsubcategorySelected
+              ? <OText color='#FFF'>
+                  {t('ALL', 'All')}{' '}
+                  <FIcon name='x-circle' size={16} />
+                </OText>
+              : t('ALL', 'All')
+          }
+          style={bpStyles.categoryButtonStyle}
+          textStyle={{ fontSize: 12 }}
+        />
+      </ContainerButton>
+      {category?.subcategories?.map((subcategory: any) => {
+        const isSubcategorySelected = subcategoriesSelected?.find((_subcategory: any) => _subcategory?.id === subcategory?.id)
+        return (
+          <ContainerButton
+            key={subcategory?.id}
+            isSelected={isSubcategorySelected}
+          >
+            <OButton
+              onClick={() => onClickSubcategory(subcategory, category)}
+              text={
+                isSubcategorySelected
+                  ? <OText color='#FFF'>
+                      {subcategory?.name}{' '}
+                      <FIcon name='x-circle' size={16} />
+                    </OText>
+                  : subcategory?.name
+              }
+              style={bpStyles.categoryButtonStyle}
+              textStyle={{ fontSize: 12 }}
+            />
+          </ContainerButton>
+        )
+      }
+      )}
+    </SubCategoriesContainer>
+  )
 }
 
 export const SubcategoriesComponentMemoized = React.memo(SubcategoriesComponent, SubcategoriesComponentPropsAreEqual)

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

@@ -65,11 +65,10 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
       return
     }
     const categoryFounded = subcategoriesSelected.find((_subcategory: any) => subCategory?.id === _subcategory?.id)
-    if (categoryFounded) {
-      setSubcategoriesSelected?.(subcategoriesSelected.filter((_subcategory: any) => subCategory?.id !== _subcategory?.id))
-    } else {
-      setSubcategoriesSelected?.([...subcategoriesSelected, subCategory])
-    }
+    setSubcategoriesSelected?.(categoryFounded
+      ? subcategoriesSelected.filter((_subcategory: any) => subCategory?.id !== _subcategory?.id)
+      : [...subcategoriesSelected, subCategory]
+    )
   }
 
   return (
@@ -214,11 +213,11 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                           text={t('VIEW_MORE', 'View more')}
                           parentStyle={{ padding: 0 }}
                           onClick={() => setOpenDescription(category)}
-                          bgColor='transparent'
+                          bgColor={theme.colors.white}
+                          borderColor={theme.colors.primary}
                           textStyle={{
                             fontSize: 12,
                             borderBottomWidth: 1,
-                            borderBottomColor: theme.colors.primary,
                             color: theme.colors.primary
                           }}
                         />

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

@@ -18,15 +18,12 @@ export const RibbonBox = styled.View`
   background-color: ${(props: any) => props.theme.colors.primary};
   padding: 2px 8px;
   max-width: 180px;
-
   ${(props: any) => props.bgColor && css`
     background-color: ${props.bgColor};
   `}
-
   ${(props: any) => props.isRoundRect && css`
     border-radius: 7.6px;
   `}
-
   ${(props: any) => props.isCapsule && css`
     border-radius: 50px;
   `}

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import { View, TouchableOpacity, StyleSheet, SafeAreaView, Dimensions, Platform, KeyboardAvoidingViewBase, KeyboardAvoidingView, Keyboard, KeyboardEvent, BackHandler, ScrollView } from 'react-native'
+import { View, TouchableOpacity, StyleSheet, SafeAreaView, Dimensions, Platform, KeyboardAvoidingViewBase, KeyboardAvoidingView, Keyboard, KeyboardEvent, BackHandler, ScrollView, Vibration } from 'react-native'
 import { IOScrollView } from 'react-native-intersection-observer'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from 'styled-components/native';
@@ -225,8 +225,9 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
         cartUuid: cart?.uuid,
         businessLogo: cart?.business?.logo,
         businessName: cart?.business?.name,
-        cartTotal: cart?.total
-      }, true)
+        cartTotal: cart?.total,
+        fromProductsList: true
+      })
     } else {
       const groupKeys: any = {}
       cartsAvailable.forEach((_cart: any) => {
@@ -242,12 +243,12 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
         props.onNavigationRedirect('CheckoutNavigator', {
           screen: 'MultiCheckout',
           checkCarts: true
-        }, true)
+        })
       } else {
         props.onNavigationRedirect('CheckoutNavigator', {
           screen: 'MultiCheckout',
           cartUuid: cartsAvailable[0]?.group?.uuid
-        }, true)
+        })
       }
     }
   }
@@ -687,7 +688,10 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
               btnLeftValue={currentCart?.products.reduce((prev: number, product: any) => prev + product.quantity, 0)}
               btnRightValue={parsePrice(currentCart?.total)}
               disabled={subtotalWithTaxes < currentCart?.minimum || openUpselling}
-              handleClick={() => setOpenUpselling(true)}
+              handleClick={() => {
+                Vibration.vibrate(100)
+                setOpenUpselling(true)
+              }}
             />
           </View>
         )}

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

@@ -26,9 +26,9 @@ import { BusinessTypeFilterParams } from '../../types';
 const windowWidth = Dimensions.get('window').width;
 
 export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
-	const { 
-		typesState, 
-		currentTypeSelected, 
+	const {
+		typesState,
+		currentTypeSelected,
 		handleChangeBusinessType,
 		setBusinessTypes,
 		isAppoint
@@ -38,13 +38,13 @@ export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
 
 	const theme = useTheme();
 	const [isOpenAllCategories, setIsOpenAllCategories] = useState(false)
-	const defaultImage = (name : string) => theme.images?.categories?.[name.toLowerCase().replace(' ', '')]
+	const defaultImage = (name: string) => theme.images?.categories?.[name.toLowerCase().replace(' ', '')]
 
 	useEffect(() => {
-		if(typesState?.types?.length > 0){
-		  setBusinessTypes && setBusinessTypes(typesState?.types)
+		if (typesState?.types?.length > 0) {
+			setBusinessTypes && setBusinessTypes(typesState?.types)
 		}
-	  }, [typesState])
+	}, [typesState])
 
 	const handleChangeServiceType = (serviceId: any) => {
 		if (serviceId === currentTypeSelected) {
@@ -119,10 +119,11 @@ export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
 									<OButton
 										key={i}
 										bgColor={(currentTypeSelected === businessType?.id) ? theme.colors.primary : theme.colors.backgroundGray200}
+										borderColor={(currentTypeSelected === businessType?.id) ? theme.colors.primary : theme.colors.backgroundGray200}
 										onClick={() => handleChangeServiceType(businessType?.id)}
 										text={`${businessType?.name} ${(currentTypeSelected === businessType?.id) ? ' X' : ''}`}
 										style={styles.businessType}
-										textStyle={{ fontSize: 10, color: (currentTypeSelected === businessType?.id) ? theme.colors.backgroundLight : theme.colors.textNormal }}
+										textStyle={{ fontSize: 10, color: (currentTypeSelected === businessType?.id) ? theme.colors.white : theme.colors.textNormal }}
 									/>
 								))}
 							</ServiceWrapper>

package/themes/original/src/components/BusinessesListing/Layout/Appointment/index.tsx

@@ -392,10 +392,11 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 							<OButton
 								key={i}
 								bgColor={(priceLevelSelected === price?.level) ? theme.colors.primary : theme.colors.backgroundGray200}
+								borderColor={(priceLevelSelected === price?.level) ? theme.colors.primary : theme.colors.backgroundGray200}
 								onClick={() => handleChangePriceLevel(price?.level)}
 								text={`${price.content} ${(priceLevelSelected === price?.level) ? ' X' : ''}`}
 								style={styles.priceLevel}
-								textStyle={{ fontSize: 10, color: (priceLevelSelected === price?.level) ? theme.colors.backgroundLight : theme.colors.textNormal }}
+								textStyle={{ fontSize: 10, color: (priceLevelSelected === price?.level) ? theme.colors.backgroundLight : theme.colors.black }}
 							/>
 						))}
 					</ScrollView>

package/themes/original/src/components/BusinessesListing/Layout/Original/styles.tsx

@@ -60,7 +60,7 @@ export const WrapMomentOption = styled.TouchableOpacity`
 
 export const HeaderWrapper = styled.ImageBackground`
 	width: 100%;
-  height: ${({ bgHeaderHeight } : any) => bgHeaderHeight || '270px'};
+  height: 270px;
 	padding: 20px;
 	background-color: transparent;
 `;

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

@@ -1,4 +1,3 @@
-
 import React, { useState, useEffect } from 'react'
 import { useOrder, useSession, useLanguage, useConfig } from 'ordering-components/native';
 

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

@@ -19,7 +19,7 @@ import { CouponControl } from '../CouponControl';
 import { OButton, OInput, OModal, OText } from '../shared';
 import { UpsellingProducts } from '../UpsellingProducts';
 import { verifyDecimals } from '../../utils';
-import { ActivityIndicator, TouchableOpacity, View } from 'react-native';
+import { ActivityIndicator, TouchableOpacity, View, Vibration } from 'react-native';
 import AntIcon from 'react-native-vector-icons/AntDesign'
 import { TaxInformation } from '../TaxInformation';
 import { CartStoresListing } from '../CartStoresListing';
@@ -114,6 +114,7 @@ const CartUI = (props: any) => {
   }
 
   const handleUpsellingPage = (individualCart: any) => {
+    Vibration.vibrate(100)
     const isProductCartParam = !!individualCart?.products?.length
     setOpenUpselling(false)
     setCanOpenUpselling(false)
@@ -128,8 +129,9 @@ const CartUI = (props: any) => {
         cartUuid: cart?.uuid,
         businessLogo: cart?.business?.logo,
         businessName: cart?.business?.name,
-        cartTotal: cart?.total
-      }, true)
+        cartTotal: cart?.total,
+        fromProductsList: isFromUpselling
+      })
     } else {
       const groupKeys: any = {}
       cartsAvailable.forEach((_cart: any) => {
@@ -145,28 +147,30 @@ const CartUI = (props: any) => {
         onNavigationRedirect('CheckoutNavigator', {
           screen: 'MultiCheckout',
           checkCarts: true
-        }, true)
+        })
       } else {
         onNavigationRedirect('CheckoutNavigator', {
           screen: 'MultiCheckout',
           cartUuid: cartsAvailable[0]?.group?.uuid
-        }, true)
+        })
       }
     }
   }
 
-  const getIncludedTaxes = () => {
+  const getIncludedTaxes = (isDeliveryFee?: boolean) => {
     if (cart?.taxes === null || !cart?.taxes) {
-      return cart.business.tax_type === 1 ? cart?.tax : 0
+      return cart?.business.tax_type === 1 ? cart?.tax : 0
     } else {
       return cart?.taxes.reduce((taxIncluded: number, tax: any) => {
-        return taxIncluded + (tax.type === 1 ? tax.summary?.tax : 0)
+        return taxIncluded +
+          (((!isDeliveryFee && tax.type === 1 && tax.target === 'product') ||
+            (isDeliveryFee && tax.type === 1 && tax.target === 'delivery_fee')) ? tax.summary?.tax : 0)
       }, 0)
     }
   }
 
   const getIncludedTaxesDiscounts = () => {
-    return cart?.taxes?.filter((tax: any) => tax?.type === 1)?.reduce((carry: number, tax: any) => carry + (tax?.summary?.tax_after_discount ?? tax?.summary?.tax), 0)
+    return cart?.taxes?.filter((tax: any) => (tax?.type === 1 && tax?.target === 'product'))?.reduce((carry: number, tax: any) => carry + (tax?.summary?.tax_after_discount ?? tax?.summary?.tax), 0)
   }
 
   const OfferAlert = ({ offerId }: any) => {
@@ -197,6 +201,7 @@ const CartUI = (props: any) => {
   }, cart?.subtotal)
 
   const handleClickCheckout = () => {
+    Vibration.vibrate(100)
     if (cart?.business_id) {
       setOpenUpselling(true)
     } else {
@@ -243,7 +248,10 @@ const CartUI = (props: any) => {
         handleClearProducts={handleClearProducts}
         handleCartOpen={handleCartOpen}
         onNavigationRedirect={props.onNavigationRedirect}
-        handleChangeStore={() => setOpenChangeStore(true)}
+        handleChangeStore={() => {
+          Vibration.vibrate(100)
+          setOpenChangeStore(true)
+        }}
         handleClickCheckout={() => handleClickCheckout()}
         checkoutButtonDisabled={(openUpselling && !canOpenUpselling) || subtotalWithTaxes < cart?.minimum || !cart?.valid_address}
         isMultiCheckout={isMultiCheckout}
@@ -324,7 +332,7 @@ const CartUI = (props: any) => {
               </OSTable>
             )}
             {
-              cart.taxes?.length > 0 && cart.taxes.filter((tax: any) => tax.type === 2 && tax?.rate !== 0).map((tax: any, i: number) => (
+              cart.taxes?.length > 0 && cart.taxes.filter((tax: any) => tax.type === 2 && tax?.rate !== 0 && tax?.target === 'product').map((tax: any, i: number) => (
                 <OSTable key={`${tax.id}_${i}`}>
                   <OSRow>
                     <OText size={12} lineHeight={18} numberOfLines={1} >
@@ -379,9 +387,25 @@ const CartUI = (props: any) => {
             {orderState?.options?.type === 1 && cart?.delivery_price_with_discount > 0 && !hideDeliveryFee && (
               <OSTable>
                 <OText size={12} lineHeight={18}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
-                <OText size={12} lineHeight={18}>{parsePrice(cart?.delivery_price_with_discount)}</OText>
+                <OText size={12} lineHeight={18}>{parsePrice(cart?.delivery_price_with_discount + getIncludedTaxes(true))}</OText>
               </OSTable>
             )}
+            {
+              cart?.taxes?.length > 0 && cart?.taxes?.filter((tax: any) => tax?.type === 2 && tax?.rate !== 0 && tax?.target === 'delivery_fee').map((tax: any, i: number) => (
+                <OSTable key={`${tax.description}_${i}`}>
+                  <OSRow>
+                    <OText size={12} lineHeight={18} numberOfLines={1}>
+                      {tax.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
+                      {`(${verifyDecimals(tax?.rate, parseNumber)}%)`}
+                    </OText>
+                    <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: tax, type: 'tax' })}>
+                      <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
+                    </TouchableOpacity>
+                  </OSRow>
+                  <OText size={12} lineHeight={18}>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0)}</OText>
+                </OSTable>
+              ))
+            }
             {
               cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 2)?.map((offer: any, i: number) => (
                 <OSTable key={`${offer.id}_${i}`}>
@@ -544,6 +568,14 @@ const CartUI = (props: any) => {
             />
           </View>
         )}
+        {!cart?.valid_address && cart?.status !== 2 && (
+          <OText
+            color={theme.colors.error}
+            size={12}
+          >
+            {t('INVALID_CART_ADDRESS', 'Selected address is invalid, please select a closer address.')}
+          </OText>
+        )}
         {(!isMultiCheckout || !cart?.business_id) && (
           <>
             {cart?.valid_products ? (
@@ -557,10 +589,10 @@ const CartUI = (props: any) => {
                     `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(cart?.minimum)}`
                   )}
                   bgColor={(subtotalWithTaxes < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
+                  borderColor={(subtotalWithTaxes < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
                   isDisabled={(openUpselling && !canOpenUpselling) || subtotalWithTaxes < cart?.minimum || !cart?.valid_address}
-                  borderColor={theme.colors.primary}
                   imgRightSrc={null}
-                  textStyle={{ color: '#fff', textAlign: 'center', flex: 1 }}
+                  textStyle={{ textAlign: 'center', flex: 1 }}
                   onClick={() => handleClickCheckout()}
                   style={{ width: '100%', flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
                 />