ordering-ui-react-native 0.22.57 → 0.22.58-release

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';
@@ -73,6 +73,7 @@ const CartUI = (props: any) => {
   const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null, type: '' })
   const [openPlaceModal, setOpenPlaceModal] = useState(false)
   const [maxDate, setMaxDate] = useState<any>(null)
+  const [comment] = useState<any>(cart?.comment ?? '')
   const isCartPending = cart?.status === 2
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled
   const business: any = (orderState?.carts && Object.values(orderState.carts).find((_cart: any) => _cart?.uuid === props.cartuuid)) ?? {}
@@ -83,6 +84,7 @@ const CartUI = (props: any) => {
   const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
     ? JSON.parse(configs?.driver_tip_options?.value) || []
     : configs?.driver_tip_options?.value || []
+  const allowDriverTipPickup = configs?.driver_tip_allowed_at_pickup?.value === '1' && orderState?.options?.type === 2
 
   const momentFormatted = !orderState?.option?.moment
     ? t('RIGHT_NOW', 'Right Now')
@@ -114,6 +116,7 @@ const CartUI = (props: any) => {
   }
 
   const handleUpsellingPage = (individualCart: any) => {
+    Vibration.vibrate(100)
     const isProductCartParam = !!individualCart?.products?.length
     setOpenUpselling(false)
     setCanOpenUpselling(false)
@@ -128,8 +131,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 +149,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 +203,7 @@ const CartUI = (props: any) => {
   }, cart?.subtotal)
 
   const handleClickCheckout = () => {
+    Vibration.vibrate(100)
     if (cart?.business_id) {
       setOpenUpselling(true)
     } else {
@@ -243,7 +250,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 +334,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 +389,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}`}>
@@ -440,7 +466,7 @@ const CartUI = (props: any) => {
             {!isMultiCheckout &&
               cart &&
               cart?.valid &&
-              orderState?.options?.type === 1 &&
+              (orderState?.options?.type === 1 || allowDriverTipPickup) &&
               cart?.status !== 2 &&
               validationFields?.fields?.checkout?.driver_tip?.enabled &&
               driverTipsOptions && driverTipsOptions?.length > 0 &&
@@ -499,7 +525,7 @@ const CartUI = (props: any) => {
                   <OText size={16} lineHeight={18}>{t('COMMENTS', 'Comments')}</OText>
                   <View style={{ flex: 1, width: '100%' }}>
                     <OInput
-                      value={cart?.comment}
+                      value={comment || cart?.comment}
                       placeholder={t('SPECIAL_COMMENTS', 'Special Comments')}
                       onChange={(value: string) => handleChangeComment(value)}
                       style={{
@@ -544,6 +570,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,6 +591,7 @@ 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}
                   imgRightSrc={null}
                   textStyle={{ textAlign: 'center', flex: 1 }}
@@ -616,6 +651,7 @@ const CartUI = (props: any) => {
 export const Cart = (props: any) => {
   const cartProps = {
     ...props,
+    disablePreviousComment: true,
     UIComponent: CartUI
   }
 

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { View } from 'react-native';
+import { Vibration, View } from 'react-native';
 import { useLanguage, useConfig, useUtils, useOrder } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { CCContainer, CCNotCarts, CCList, CheckoutAction, ChCartsTotal } from './styles';
@@ -39,6 +39,7 @@ export const CartContent = (props: any) => {
 		?.filter((cart: any) => cart?.status !== 1 && cart?.valid && cart?.products?.length)
 		?.reduce((total: any, cart: any) => { return total + (cart?.delivery_price_with_discount) }, 0)
 	const handleCheckoutRedirect = () => {
+		Vibration.vibrate(100)
 		if (cartsAvailable.length === 1) {
 			onNavigationRedirect('CheckoutNavigator', {
 				screen: 'CheckoutPage',
@@ -173,9 +174,7 @@ export const CartContent = (props: any) => {
 									<CheckoutAction style={{ marginTop: 0 }}>
 										<OButton
 											text={t('CHECKOUT', 'Checkout')}
-											bgColor={!cartsAvailable.length ? theme.colors.secundary : theme.colors.primary}
 											isDisabled={!cartsAvailable.length}
-											borderColor={!cartsAvailable.length ? theme.colors.secundary : theme.colors.primary}
 											imgRightSrc={null}
 											onClick={() => handleCheckoutRedirect()}
 											style={{ width: '100%', flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}