ordering-ui-react-native 0.14.29 → 0.14.31-release

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

@@ -21,10 +21,10 @@ import { Cart as TypeCart } from '../../types';
 import CartItem from '../CartItem';
 import NavBar from '../NavBar';
 import { CouponControl } from '../CouponControl';
-import { LANDSCAPE, PORTRAIT, useDeviceOrientation} from "../../../../../src/hooks/DeviceOrientation";
+import { LANDSCAPE, PORTRAIT, useDeviceOrientation } from "../../../../../src/hooks/DeviceOrientation";
 import { useCartBottomSheet } from '../../providers/CartBottomSheetProvider';
 import { Container } from '../../../../../src/layouts/Container';
-
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 const CartUI = (props: any) => {
   const {
     cart,
@@ -35,7 +35,7 @@ const CartUI = (props: any) => {
     removeProduct,
     setIsCartsLoading,
     navigation,
-  } : CartUIProps = props
+  }: CartUIProps = props
 
   const theme = useTheme()
   const [, t] = useLanguage()
@@ -83,8 +83,8 @@ const CartUI = (props: any) => {
 
   const handleChangeOrderType = () => {
     navigation.push('DeliveryType', {
-      callback : () => {navigation.pop(1)},
-      goBack: () => {navigation.pop(1)},
+      callback: () => { navigation.pop(1) },
+      goBack: () => { navigation.pop(1) },
     });
   }
 
@@ -97,7 +97,7 @@ const CartUI = (props: any) => {
           title={t('CONFIRM_YOUR_ORDER', 'Confirm your order')}
           onActionLeft={goToBack}
           style={{ height: orientationState?.dimensions?.height * 0.08 }}
-          btnStyle={{paddingLeft: 0}}
+          btnStyle={{ paddingLeft: 0 }}
           rightComponent={(
             <OButton
               text={t('CANCEL_ORDER', 'Cancel order')}
@@ -183,6 +183,7 @@ const CartUI = (props: any) => {
                 </OText>
               </OSTable>
               {cart?.discount > 0 && cart?.total >= 0 && orientationState?.orientation == PORTRAIT && (
+
                 <OSTable
                   style={{
                     backgroundColor: theme.colors.success,
@@ -197,10 +198,7 @@ const CartUI = (props: any) => {
                       flexDirection: 'row',
                     }}
                   >
-                    <OIcon
-                      src={theme.images.general.check_decagram}
-                    />
-
+                    <AntDesignIcon name='checkcircle' size={24} color='#00D27A' />
                     {cart?.discount_type === 1 ? (
                       <OText
                         mLeft={15}
@@ -219,8 +217,6 @@ const CartUI = (props: any) => {
                       </OText>
                     )}
                   </View>
-
-
                   <OText
                     size={16}
                     color={theme.colors.green}
@@ -252,9 +248,9 @@ const CartUI = (props: any) => {
                     {cart?.driver_tip_rate > 0 &&
                       parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
                       !!!parseInt(configs?.driver_tip_use_custom?.value, 10) &&
-                    (
-                      `(${parseNumber(cart?.driver_tip_rate)}%)`
-                    )}
+                      (
+                        `(${parseNumber(cart?.driver_tip_rate)}%)`
+                      )}
                   </OText>
                   <OText>{parsePrice(cart?.driver_tip)}</OText>
                 </OSTable>
@@ -294,7 +290,7 @@ const CartUI = (props: any) => {
       <>
         <FloatingLayout isIos={Platform.OS === 'ios'}>
           <CheckoutAction>
-            <View style={{display: 'flex', flexDirection: 'row'}}>
+            <View style={{ display: 'flex', flexDirection: 'row' }}>
               {cart?.discount > 0 && cart?.total >= 0 && orientationState?.orientation == LANDSCAPE && (
                 <OSTable
                   style={{
@@ -311,10 +307,7 @@ const CartUI = (props: any) => {
                       flexDirection: 'row',
                     }}
                   >
-                    <OIcon
-                      src={theme.images.general.check_decagram}
-                    />
-
+                    <AntDesignIcon name='checkcircle' size={24} color='#00D27A' />
                     {cart?.discount_type === 1 ? (
                       <OText
                         mLeft={15}
@@ -369,7 +362,7 @@ const CartUI = (props: any) => {
                   imgRightSrc={null}
                   textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
                   onClick={() => { navigation?.navigate('CustomerName', { cartUuid: cart?.uuid }) }}
-                  style={{width: '100%', marginTop: 4}}
+                  style={{ width: '100%', marginTop: 4 }}
                 />
               </View>
             </View>

package/themes/kiosk/src/components/CartItem/index.tsx

@@ -16,6 +16,7 @@ import { Product } from '../../types';
 import QuantityControl from '../QuantityControl';
 import { LANDSCAPE, useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation';
 import { useTheme } from 'styled-components/native';
+import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome'
 
 const CartItem = (props: CartItemProps) => {
   const theme = useTheme()
@@ -97,7 +98,6 @@ const CartItem = (props: CartItemProps) => {
                 <OButton
                   bgColor="transparent"
                   borderColor="transparent"
-                  imgLeftSrc={theme.images.general.edit}
                   text={t('EDIT', 'Edit')}
                   style={{ justifyContent: 'flex-start', paddingLeft: 0, maxWidth: 80 }}
                   textStyle={{
@@ -105,16 +105,18 @@ const CartItem = (props: CartItemProps) => {
                     marginLeft: 6,
                   }}
                   onClick={() => { onEditProduct ? onEditProduct(product) : null }}
+                  iconProps={{ name: 'edit' }}
+                  IconCustom={() => <FontAwesomeIcon name='edit' size={24} color={theme.colors.primary} />}
                 />
                 <OIconButton
                   bgColor="transparent"
                   borderColor="transparent"
-                  RenderIcon={isProductIngredients && (() => 
-                      <EvilIcons
-                        name={isActive ? 'chevron-up': 'chevron-down'}
-                        size={40}
-                        color={theme.colors.primary}
-                      />
+                  RenderIcon={isProductIngredients && (() =>
+                    <EvilIcons
+                      name={isActive ? 'chevron-up' : 'chevron-down'}
+                      size={40}
+                      color={theme.colors.primary}
+                    />
                   )}
                   style={{ justifyContent: 'flex-start', right: 40 }}
                   onClick={() => (!product?.valid_menu && isCartProduct)

package/themes/kiosk/src/components/CustomerName/index.tsx

@@ -72,12 +72,13 @@ const CustomerName = (props: Props): React.ReactElement => {
       <OButton
         text={t('SKIP', 'Skip')}
         onClick={onProceedToPay}
-        textStyle={{color: theme.colors.primaryContrast, fontSize: 20}}
+        textStyle={{color: theme.colors.primary, fontSize: 20}}
         parentStyle={{
           height: orientationState?.orientation === PORTRAIT
             ? 50 : 100
         }}
         style={{
+          backgroundColor: theme.colors.white,
           width: orientationState?.orientation === PORTRAIT
             ? orientationState?.dimensions.width - 40
             : orientationState?.dimensions.width * 0.1,

package/themes/kiosk/src/components/Intro/index.tsx

@@ -8,7 +8,7 @@ import OImage from '../../components/shared/OImage';
 import OButton from '../../components/shared/OButton';
 import { LanguageSelector } from '../../components/LanguageSelector';
 import { LogoutPopup } from '../../components/LogoutPopup';
-import {PORTRAIT, LANDSCAPE, useDeviceOrientation} from "../../../../../src/hooks/DeviceOrientation";
+import { PORTRAIT, LANDSCAPE, useDeviceOrientation } from "../../../../../src/hooks/DeviceOrientation";
 
 const Intro = (props: any): React.ReactElement => {
   const { navigation } = props;
@@ -87,7 +87,7 @@ const Intro = (props: any): React.ReactElement => {
               source={theme.images.general.homeHeroLandscape}
               width={orientationState?.dimensions?.width * 0.40}
               height={orientationState?.dimensions?.height * 1.1}
-              style={{bottom: 100, right: 100}}
+              style={{ bottom: 100, right: 100 }}
               resizeMode='cover'
             />
 
@@ -114,7 +114,7 @@ const Intro = (props: any): React.ReactElement => {
 
                 <OButton
                   style={styles.buttonLandStyle}
-                  text={t('TOUCH_TO_ORDER', 'Touch to order')}
+                  text={t('TOUCH_ANYWHERE_TO_ORDER', 'Touch anywhere to order')}
                   parentStyle={{
                     alignItems: 'center',
                     width: orientationState?.dimensions?.width - _offset
@@ -138,7 +138,7 @@ const Intro = (props: any): React.ReactElement => {
 
 const styles = StyleSheet.create({
   buttonLandStyle: {
-    width: 260,
+    width: 290,
     marginBottom: 16
   }
 });

package/themes/kiosk/src/components/OptionCard/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 import { ImageSourcePropType, ImageStyle, TextStyle, ViewStyle, ActivityIndicator } from 'react-native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import { useTheme } from 'styled-components/native';
@@ -28,11 +28,15 @@ const OptionCard = (props: Props) => {
               <ActivityIndicator size='large' color='#ffffff' />
             </ActivityIndicatorContainer>
           )}
-          <OIcon
-            src={props.icon}
-            style={{ marginBottom: 10, ...props?.iconStyle }}
-          />
-
+          {props.icon && (
+            <OIcon
+              src={props.icon}
+              style={{ marginBottom: 10, ...props?.iconStyle }}
+            />
+          )}
+          {props.VectorIcon && (
+            <props.VectorIcon />
+          )}
           <OText
             weight="700"
             color="white"
@@ -97,6 +101,7 @@ interface Props {
   callToActionTextStyle?: TextStyle;
   callToActionIcon?: ImageSourcePropType;
   callToActionIconStyle?: ImageStyle;
+  VectorIcon?: FunctionComponent;
 }
 
 export default OptionCard;

package/themes/kiosk/src/components/PaymentOptions/index.tsx

@@ -19,6 +19,8 @@ import Spinner from 'react-native-loading-spinner-overlay';
 import { LANDSCAPE, PORTRAIT, useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation';
 import GridContainer from '../../layouts/GridContainer';
 import { OModal, PaymentOptionStripe } from '../../../../../src';
+import AntIconDesign from 'react-native-vector-icons/AntDesign'
+import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 
 const PaymentOptionsUI = (props: any) => {
   const {
@@ -41,7 +43,7 @@ const PaymentOptionsUI = (props: any) => {
   } = props;
 
   const theme = useTheme();
-  const [, {showToast}] = useToast();
+  const [, { showToast }] = useToast();
   const [, t] = useLanguage();
   const [orientationState] = useDeviceOrientation();
   const [userErrors, setUserErrors] = useState<any>([]);
@@ -134,52 +136,52 @@ const PaymentOptionsUI = (props: any) => {
     CASH_ID:
       cashIndex !== -1
         ? {
-            style: cardStyle,
-            title: t('CASH', 'Cash'),
-            description: t(
-              'GO_FOR_YOR_RECEIPT_AND_GO_TO_THE_FRONT_COUNTER',
-              'Pay with cash in the front counter',
-            ),
-            bgImage: theme.images.general.cash,
-            icon: theme.images.general.shoppingCart,
-            callToActionText: t('LETS_GO', 'LETS_GO'),
-            onClick: () =>
-              onSelectPaymethod(supportedMethods[cashIndex], false),
-            ...supportedMethods[cashIndex],
-          }
+          style: cardStyle,
+          title: t('CASH', 'Cash'),
+          description: t(
+            'GO_FOR_YOR_RECEIPT_AND_GO_TO_THE_FRONT_COUNTER',
+            'Pay with cash in the front counter',
+          ),
+          bgImage: theme.images.general.cash,
+          callToActionText: t('LETS_GO', 'LETS_GO'),
+          VectorIcon: () => <AntIconDesign name='shoppingcart' size={28} color='white' style={{ marginBottom: 10 }} />,
+          onClick: () =>
+            onSelectPaymethod(supportedMethods[cashIndex], false),
+          ...supportedMethods[cashIndex],
+        }
         : null,
 
     CARD_ON_DELIVERY_ID:
       cardOnDeliveryIndex !== -1
         ? {
-            style: cardStyle,
-            title: t('CARD', supportedMethods[cardOnDeliveryIndex]?.name),
-            description: t(
-              'WE_ACCEPT_EVERY_DEBIT_OR_CREDIT_CARD',
-              'We accept every debit or credit card',
-            ),
-            bgImage: theme.images.general.carddelivery,
-            icon: theme.images.general.pushPin,
-            callToActionText: t("LETS_GO", "Let's go"),
-            onClick: () => onSelectPaymethod(supportedMethods[cardOnDeliveryIndex], false),
-            ...supportedMethods[cardOnDeliveryIndex],
-          }
+          style: cardStyle,
+          title: t('CARD', supportedMethods[cardOnDeliveryIndex]?.name),
+          description: t(
+            'WE_ACCEPT_EVERY_DEBIT_OR_CREDIT_CARD',
+            'We accept every debit or credit card',
+          ),
+          bgImage: theme.images.general.carddelivery,
+          callToActionText: t("LETS_GO", "Let's go"),
+          VectorIcon: () => <MaterialIcon name='pin-outline' size={28} color='white' style={{ marginBottom: 10 }} />,
+          onClick: () => onSelectPaymethod(supportedMethods[cardOnDeliveryIndex], false),
+          ...supportedMethods[cardOnDeliveryIndex],
+        }
         : null,
     STRIPE:
       stripeIndex !== -1
         ? {
-            style: cardStyle,
-            title: t('STRIPE', supportedMethods[stripeIndex]?.name),
-            description: t('STRIPE', 'Stripe'),
-            bgImage: theme.images.general.carddelivery,
-            icon: theme.images.general.pushPin,
-            callToActionText: t('INSERT_INFO', 'Test info'),
-            onClick: () => {
-              onSelectPaymethod(supportedMethods[stripeIndex], false);
-              setIsOpenModal(true)
-            },
-            ...supportedMethods[stripeIndex],
-          }
+          style: cardStyle,
+          title: t('STRIPE', supportedMethods[stripeIndex]?.name),
+          description: t('STRIPE', 'Stripe'),
+          bgImage: theme.images.general.carddelivery,
+          callToActionText: t('INSERT_INFO', 'Test info'),
+          VectorIcon: () => <MaterialIcon name='pin-outline' size={28} color='white' style={{ marginBottom: 10 }} />,
+          onClick: () => {
+            onSelectPaymethod(supportedMethods[stripeIndex], false);
+            setIsOpenModal(true)
+          },
+          ...supportedMethods[stripeIndex],
+        }
         : null,
   };
 
@@ -193,11 +195,11 @@ const PaymentOptionsUI = (props: any) => {
         <NavBar
           title={t('PAYMENT_METHODS', 'Payment methods')}
           onActionLeft={goToBack}
-          btnStyle={{paddingLeft: 0}}
+          btnStyle={{ paddingLeft: 0 }}
         />
 
         <View
-          style={{marginVertical: orientationState?.dimensions?.height * 0.03}}>
+          style={{ marginVertical: orientationState?.dimensions?.height * 0.03 }}>
           <OText size={orientationState?.dimensions?.width * 0.048}>
             {t('HOW_WOULD_YOU', 'How would you')} {'\n'}
             <OText
@@ -209,10 +211,10 @@ const PaymentOptionsUI = (props: any) => {
         </View>
 
         {supportedMethods?.length > 0 && (
-          <GridContainer style={{justifyContent: 'space-between'}}>
+          <GridContainer style={{ justifyContent: 'space-between' }}>
             {propsOfItems.CARD_ON_DELIVERY_ID && (
-              <View style={{marginBottom: orientationState?.orientation === LANDSCAPE ? 20 : 0}}>
-                <OptionCard {...propsOfItems?.CARD_ON_DELIVERY_ID} styke/>
+              <View style={{ marginBottom: orientationState?.orientation === LANDSCAPE ? 20 : 0 }}>
+                <OptionCard {...propsOfItems?.CARD_ON_DELIVERY_ID} styke />
               </View>
             )}
 
@@ -249,7 +251,7 @@ const PaymentOptionsUI = (props: any) => {
             )}
           </GridContainer>
         )}
-        <View style={{height: orientationState?.dimensions?.height * 0.05}} />
+        <View style={{ height: orientationState?.dimensions?.height * 0.05 }} />
         <OModal
           open={isOpenModal}
           onClose={() => setIsOpenModal(false)}

package/themes/original/index.tsx

@@ -30,6 +30,8 @@ import { NotFoundSource } from './src/components/NotFoundSource';
 import { OrderTypeSelector } from './src/components/OrderTypeSelector';
 import { Wallets } from './src/components/Wallets';
 import { PaymentOptionWallet } from './src/components/PaymentOptionWallet';
+import { ProductForm } from './src/components/ProductForm';
+import { UpsellingProducts } from './src/components/UpsellingProducts';
 
 import { Toast } from './src/components/shared/OToast';
 import {
@@ -90,6 +92,8 @@ export {
 	OrderTypeSelector,
   Wallets,
   PaymentOptionWallet,
+  ProductForm,
+  UpsellingProducts,
 
 	// OComponents
 	Toast,

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

@@ -139,17 +139,20 @@ export const BusinessItemAccordion = (props: any) => {
 					)}
 				</BIActions>
 			</BIHeader>
-			{!isActive && !isClosed && !!isProducts && !checkoutButtonDisabled && (
+			{!isActive && !isClosed && !!isProducts && (
 				<PriceContainer>
 					<OText>{parsePrice(cart?.total)}</OText>
-					<OButton
-						onClick={handleClickCheckout}
-						textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
-						style={{ width: 160, flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
-						text={t('CHECKOUT', 'Checkout')}
-						bgColor={(cart?.subtotal < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
-						borderColor={theme.colors.primary}
-					/>
+					{cart?.valid_products && (
+						<OButton
+							onClick={handleClickCheckout}
+							textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
+							style={{ width: 160, flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
+							text={t('CHECKOUT', 'Checkout')}
+							bgColor={(cart?.subtotal < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
+							borderColor={theme.colors.primary}
+							isDisabled={checkoutButtonDisabled}
+						/>
+					)}
 				</PriceContainer>
 			)}
 

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

@@ -7,9 +7,10 @@ export const BIContainer = styled.View`
   opacity: 1;
   border-radius: 7.6px;
   overflow: hidden;
-
+  min-height: 120px;
   ${(props: any) => props.isClosed && css`
-	 opacity: 0.5;
+	  opacity: 0.5;
+    min-height: 60px;
   `}
 `
 

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

@@ -46,7 +46,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
   const [menu, setMenu] = useState({})
   const [timeList, setTimeList] = useState<any>([])
   const [selectDate, setSelectedDate] = useState<any>(null)
-  const [datesWhitelist, setDateWhitelist] = useState<any>([{start: null, end: null}])
+  const [datesWhitelist, setDateWhitelist] = useState<any>([{ start: null, end: null }])
 
   const styles = StyleSheet.create({
     container: {
@@ -54,19 +54,19 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
       paddingVertical: 30,
       paddingHorizontal: 40
     },
-		businessLogo: {
-			backgroundColor: 'white',
-			width: 60,
-			height: 60,
-			borderRadius: 7.6,
-			justifyContent: 'center',
-			alignItems: 'center',
-			shadowColor: '#000000',
-			shadowOffset: { width: 0, height: 1 },
-			shadowOpacity: 0.1,
-			shadowRadius: 1,
-			elevation: 2
-		},
+    businessLogo: {
+      backgroundColor: 'white',
+      width: 60,
+      height: 60,
+      borderRadius: 7.6,
+      justifyContent: 'center',
+      alignItems: 'center',
+      shadowColor: '#000000',
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 0.1,
+      shadowRadius: 1,
+      elevation: 2
+    },
     selectOption: {
       backgroundColor: theme.colors.backgroundGray100,
       borderRadius: 7.6,
@@ -82,7 +82,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
       paddingBottom: 15,
       borderBottomWidth: 1,
       borderColor: theme.colors.backgroundGray200,
-      height: 90
+      height: 100,
     },
     calendarHeaderContainer: {
       flex: 1,
@@ -101,35 +101,36 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
     dateNumber: {
       color: '#B1BCCC',
       fontSize: 16,
-      fontWeight: '500'
+      fontWeight: '500',
     },
     dateName: {
       color: '#B1BCCC',
       fontSize: 12,
-      textTransform: 'capitalize'
+      textTransform: 'capitalize',
     },
     highlightDateName: {
       color: '#344050',
       fontSize: 12,
-      textTransform: 'capitalize'
+      textTransform: 'capitalize',
     },
     highlightDateNumber: {
       color: '#344050',
       fontSize: 16,
-      textTransform: 'capitalize'
+      textTransform: 'capitalize',
     },
     disabledDateName: {
       color: '#B1BCCC',
       fontSize: 10,
       textTransform: 'capitalize',
-      opacity: 1
+      opacity: 1,
     },
     disabledDateNumber: {
       color: '#B1BCCC',
       fontSize: 14,
-      fontWeight: '500'
+      fontWeight: '500',
+
     }
-	})
+  })
 
   const preorderTypeList = [
     { key: 'business_hours', name: t('BUSINESS_HOURS', 'Business hours') },
@@ -191,7 +192,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
 
   const LeftSelector = () => {
     return (
-      <View style={{height: '100%', justifyContent: 'flex-end'}}>
+      <View style={{ height: '100%', justifyContent: 'flex-end' }}>
         <IconAntDesign
           name='caretleft'
           color={theme.colors.textNormal}
@@ -203,7 +204,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
 
   const RightSelector = () => {
     return (
-      <View style={{height: '100%', justifyContent: 'flex-end'}}>
+      <View style={{ height: '100%', justifyContent: 'flex-end' }}>
         <IconAntDesign
           name='caretright'
           color={theme.colors.textNormal}
@@ -280,7 +281,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
             name='close'
             color={theme.colors.textThird}
             size={24}
-            style={{ marginLeft: -4}}
+            style={{ marginLeft: -4 }}
           />
         </TouchableOpacity>
         <BusinessInfoWrapper>
@@ -294,8 +295,8 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
             <FastImage
               style={{ width: 59, height: 59 }}
               source={{
-                  uri: optimizeImage(business?.logo, 'h_60,c_limit'),
-                  priority: FastImage.priority.normal,
+                uri: optimizeImage(business?.logo, 'h_60,c_limit'),
+                priority: FastImage.priority.normal,
               }}
               resizeMode={FastImage.resizeMode.cover}
             />
@@ -372,7 +373,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
               setMenu={setMenu}
               menu={menu}
             />
-          </MenuWrapper> 
+          </MenuWrapper>
         )}
         <OrderTimeWrapper>
           <OText
@@ -393,11 +394,13 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
                 calendarHeaderStyle={styles.calendarHeader}
                 dateNumberStyle={styles.dateNumber}
                 dateNameStyle={styles.dateName}
-                iconContainer={{flex: 0.1}}
+                iconContainer={{ flex: 0.1 }}
                 highlightDateNameStyle={styles.highlightDateName}
                 highlightDateNumberStyle={styles.highlightDateNumber}
+                dayContainerStyle={{ height: '100%' }}
+                highlightDateContainerStyle={{ height: '100%' }}
                 calendarHeaderFormat='MMMM, YYYY'
-                iconStyle={{borderWidth: 1}}
+                iconStyle={{ borderWidth: 1 }}
                 selectedDate={selectDate}
                 datesWhitelist={datesWhitelist}
                 disabledDateNameStyle={styles.disabledDateName}
@@ -416,7 +419,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
                   <TimeItem active={timeSelected === time.value}>
                     <OText
                       size={14}
-                      color={timeSelected === time.value ? theme.colors.primary: theme.colors.textNormal}
+                      color={timeSelected === time.value ? theme.colors.primary : theme.colors.textNormal}
                       style={{
                         lineHeight: 24
                       }}
@@ -425,15 +428,15 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
                 </TouchableOpacity>
               ))}
               {timeList.length % 3 === 2 && (
-                <TimeItem style={{backgroundColor: 'transparent'}}/>
+                <TimeItem style={{ backgroundColor: 'transparent' }} />
               )}
             </TimeContentWrapper>
           </TimeListWrapper>
         </OrderTimeWrapper>
         <OButton
           text={t('GO_TO_MENU', 'Go to menu')}
-          textStyle={{color: 'white'}}
-          style={{borderRadius: 7.6, marginBottom: 20, marginTop: 30}}
+          textStyle={{ color: 'white' }}
+          style={{ borderRadius: 7.6, marginBottom: 20, marginTop: 30 }}
           onClick={() => handleClickBusiness()}
         />
       </PreOrderContainer>

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

@@ -49,7 +49,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
             product={product}
             businessId={businessId}
             onProductClick={() => onProductClick(product)}
-            productAddedToCart={currentCart?.products?.find((Cproduct: any) => Cproduct.id === product.id)}
+            productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
           />
         ))}
 
@@ -72,7 +72,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                       product={product}
                       businessId={businessId}
                       onProductClick={onProductClick}
-                      productAddedToCart={currentCart?.products?.find((Cproduct: any) => Cproduct.id === product.id)}
+                      productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
                     />
                   ),
               )}
@@ -117,7 +117,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                           businessId={businessId}
                           product={product}
                           onProductClick={onProductClick}
-                          productAddedToCart={currentCart?.products?.find((Cproduct: any) => Cproduct.id === product.id)}
+                          productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
                         />
                       ))}
                     </>