ordering-ui-react-native 0.15.42 → 0.15.43-release

package/themes/business/src/components/PreviousOrders/index.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { StyleSheet, TouchableOpacity, View, Platform, PlatformIOSStatic } from 'react-native';
 import { useTheme } from 'styled-components/native';
 import moment from 'moment'
-import { useLanguage, useUtils } from 'ordering-components/native';
+import { useLanguage, useUtils, useConfig } from 'ordering-components/native';
 import { OButton, OIcon, OText } from '../shared';
 import {
   Card, Logo, Information, MyOrderOptions, NotificationIcon, AcceptOrRejectOrder, Timestatus
@@ -27,8 +27,14 @@ export const PreviousOrders = (props: any) => {
   } = props;
   const [, t] = useLanguage();
   const [{ parseDate, optimizeImage }] = useUtils();
+  const [configState] = useConfig()
   const theme = useTheme();
-  const [currentTime, setCurrentTime] = useState()
+  const [, setCurrentTime] = useState()
+  const [allowColumns, setAllowColumns] = useState({
+    timer: true,
+    slaBar: true,
+  })
+
   const [orientationState] = useDeviceOrientation();
 
   const IS_PORTRAIT = orientationState.orientation === PORTRAIT
@@ -93,23 +99,42 @@ export const PreviousOrders = (props: any) => {
     },
   });
 
-  const getDelayTime = (order: any) => {
+  const getDelayMinutes = (order: any) => {
     // targetMin = delivery_datetime  + eta_time - now()
+    const offset = 300
+    const cdtToutc = moment(order?.delivery_datetime).add(offset, 'minutes').format('YYYY-MM-DD HH:mm:ss')
     const _delivery = order?.delivery_datetime_utc
+      ? parseDate(order?.delivery_datetime_utc)
+      : parseDate(cdtToutc)
     const _eta = order?.eta_time
-    const tagetedMin = moment(_delivery).add(_eta, 'minutes').diff(moment().utc(), 'minutes')
-    let day = Math.floor(tagetedMin / 1440)
+    const diffTimeAsSeconds = moment(_delivery, 'YYYY-MM-DD hh:mm A').add(_eta, 'minutes').diff(moment().utc(), 'seconds')
+    return Math.ceil(diffTimeAsSeconds / 60)
+  }
+
+  const displayDelayedTime = (order: any) => {
+    let tagetedMin = getDelayMinutes(order)
+    // get day, hour and minutes
+    const sign = tagetedMin >= 0 ? '' : '- '
+    tagetedMin = Math.abs(tagetedMin)
+    let day: string | number = Math.floor(tagetedMin / 1440)
     const restMinOfTargetedMin = tagetedMin - 1440 * day
-    let restHours: any = Math.floor(restMinOfTargetedMin / 60)
-    let restMins: any = restMinOfTargetedMin - 60 * restHours
+    let restHours: string | number = Math.floor(restMinOfTargetedMin / 60)
+    let restMins: string | number = restMinOfTargetedMin - 60 * restHours
+    // make standard time format
+    day = day === 0 ? '' : day + 'day  '
+    restHours = restHours < 10 ? '0' + restHours : restHours
+    restMins = restMins < 10 ? '0' + restMins : restMins
 
-    if (order?.time_status === 'in_time' || order?.time_status === 'at_risk') day = Math.abs(day)
-    if (restHours < 10) restHours = ('0' + restHours)
-    if (restMins < 10) restMins = ('0' + restMins)
-    const finalTaget = day + 'day  ' + restHours + ':' + restMins
+    const finalTaget = sign + day + restHours + ':' + restMins
     return finalTaget
   }
 
+  const getStatusClassName = (minutes: number) => {
+    if (isNaN(Number(minutes))) return 'in_time'
+    const delayTime = configState?.configs?.order_deadlines_delayed_time?.value
+    return minutes > 0 ? 'in_time' : Math.abs(minutes) <= delayTime ? 'at_risk' : 'delayed'
+  }
+
   useEffect(() => {
     const interval = setInterval(() => {
       const date: any = Date.now()
@@ -119,6 +144,15 @@ export const PreviousOrders = (props: any) => {
     return () => clearInterval(interval)
   }, [])
 
+  useEffect(() => {
+    const slaSettings = configState?.configs?.order_deadlines_enabled?.value === '1'
+    setAllowColumns({
+      ...allowColumns,
+      timer: slaSettings,
+      slaBar: slaSettings
+    })
+  }, [configState.loading])
+
   let hash: any = {};
 
   return (
@@ -144,7 +178,9 @@ export const PreviousOrders = (props: any) => {
                   activeOpacity={1}
                 >
                   <Card key={order.id}>
-                    <Timestatus style={{ backgroundColor: order?.time_status === 'in_time' ? '#00D27A' : order?.time_status === 'at_risk' ? '#FFC700' : order?.time_status === 'delayed' ? '#E63757' : '' }} />
+                  {allowColumns?.slaBar && (
+                    <Timestatus style={{ backgroundColor: getStatusClassName(getDelayMinutes(order)) === 'in_time' ? '#00D27A' : getStatusClassName(getDelayMinutes(order)) === 'at_risk' ? '#FFC700' : getStatusClassName(getDelayMinutes(order)) === 'delayed' ? '#E63757' : '' }} />
+                  )}
                     {
                       order.business?.logo && (
                         <Logo style={styles.logo}>
@@ -189,10 +225,10 @@ export const PreviousOrders = (props: any) => {
                             ? parseDate(order?.delivery_datetime_utc, { outputFormat: 'MM/DD/YY · HH:mm a' })
                             : parseDate(order?.delivery_datetime, { utc: false })}
                         </OText>
-                        {(currentTabSelected === 'pending' || currentTabSelected === 'inProgress') && (
+                        {((currentTabSelected === 'pending' || currentTabSelected === 'inProgress') && allowColumns?.timer) && (
                           <>
                             <OText> · </OText>
-                            <OText style={styles.date} color={order?.time_status === 'in_time' ? '#00D27A' : order?.time_status === 'at_risk' ? '#FFC700' : order?.time_status === 'delayed' ? '#E63757' : ''} >{getDelayTime(order)}</OText>
+                            <OText style={styles.date} color={getStatusClassName(getDelayMinutes(order)) === 'in_time' ? '#00D27A' : getStatusClassName(getDelayMinutes(order)) === 'at_risk' ? '#FFC700' : getStatusClassName(getDelayMinutes(order)) === 'delayed' ? '#E63757' : ''} >{displayDelayedTime(order)}</OText>
                           </>
                         )}
                       </View>

package/themes/business/src/components/ProductItemAccordion/index.tsx

@@ -153,7 +153,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
                 {(
                   productInfo?.()?.ingredients?.length > 0 ||
                   productInfo?.()?.options?.length > 0 ||
-                  product.comment
+                  !!product.comment
                 ) && !isClickableEvent && (
                     <MaterialCommunityIcon name="chevron-down" size={12} />
                   )}
@@ -278,7 +278,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
               </ProductOptionsList>
             )}
 
-            {product.comment && (
+            {!!product.comment && (
               <ProductComment>
                 <OText
                   size={12}

package/themes/business/src/components/shared/OModal.tsx

@@ -165,7 +165,7 @@ const OModal = (props: Props): React.ReactElement => {
         transparent={isTransparent}
         visible={open}
         onRequestClose={() => {
-          onClose();
+          onClose && onClose();
         }}
         style={{
           height: '100%',

package/themes/business/src/types/index.tsx

@@ -20,6 +20,9 @@ export interface LoginParams {
   passwordInputIcon?: any;
   allowedLevels?: any;
   useRootPoint?: any;
+  notificationState?: any;
+	handleReCaptcha?: any;
+	enableReCaptcha?: any;
 }
 export interface ProfileParams {
   navigation?: any;
@@ -373,6 +376,7 @@ export interface OrderDetailsParams {
   handleClickLogisticOrder?: (status: number, orderId: number) => void;
   orderTitle?: any;
   forceUpdate?: number;
+  getPermissions?: any
 }
 export interface ProductItemAccordionParams {
   isCartPending?: boolean;
@@ -578,4 +582,4 @@ export interface ReviewCustomerParams {
 
 export interface NoNetworkParams {
   image?: any;
-}
+}

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

@@ -197,7 +197,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			{isFarAway && (
 				<FarAwayMessage style={styles.farAwayMsg}>
 					<Ionicons name='md-warning-outline' style={styles.iconStyle} />
-					<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</OText>
+					<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'Your are far from this address')}</OText>
 				</FarAwayMessage>
 			)}
 			{!auth && (

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

@@ -410,8 +410,7 @@ const LoginFormUI = (props: LoginParams) => {
                     textInputProps={{
                       returnKeyType: 'next',
                       onSubmitEditing: () => inputRef?.current?.focus?.(),
-                      style: { borderWidth: 0, fontSize: 12 },
-					  maxLength: 10
+                      style: { borderWidth: 0, fontSize: 12 }
                     }}
                     textWrapStyle={{ borderColor: theme.colors.clear, borderWidth: 0, height: 40, paddingStart: 0 }}
                   />

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

@@ -155,7 +155,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				{isFarAway && (
 					<FarAwayMessage style={styles.farAwayMsg}>
 						<Ionicons name='md-warning-outline' style={styles.iconStyle} />
-						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</OText>
+						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'Your are far from this address')}</OText>
 					</FarAwayMessage>
 				)}
 				<View style={styles.wrapperOrderOptions}>

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { PanResponder, TouchableOpacity, View } from 'react-native';
+import { PanResponder, Platform, TouchableOpacity, View } from 'react-native';
 import {
   useLanguage,
   useOrder,
@@ -40,7 +40,7 @@ const BusinessMenu = (props:any): React.ReactElement => {
   const clearCartWhenTimeOut = () => {
     if (cart?.uuid) clearCart(cart?.uuid)
   }
-  const timerId = useRef(false);
+  const timerId: any = useRef(false);
 
   const clearInactivityTimeout = () =>{ 
     clearTimeout(timerId.current);
@@ -93,6 +93,17 @@ const BusinessMenu = (props:any): React.ReactElement => {
     else showCartBottomSheet();
   }
 
+  const handleRedirect = () => {
+    navigation.navigate('DeliveryType', {
+      callback: () => {
+        navigation.navigate('Business');
+      },
+      goBack: () => {
+        navigation.goBack();
+      },
+    });
+  };
+
   return (
     <View style={{
       flex: 1,
@@ -109,31 +120,31 @@ const BusinessMenu = (props:any): React.ReactElement => {
         }}
       >
         <Container nopadding nestedScrollEnabled>
-          <View style={{ paddingTop: 20 }}>
-            <NavBar
-              title={t('MENU_V21', 'Menu')}
-              onActionLeft={goToBack}
-              includeOrderTypeSelector
-              rightComponent={cart && (
-                <TouchableOpacity
-                  style={{ paddingHorizontal: 20, flexDirection: 'row', alignItems: 'center' }}
-                  onPress={onToggleCart}
+          {Platform.OS === 'android' && (<View style={{ paddingTop: 20 }} />)}
+          <NavBar
+            title={t('MENU_V21', 'Menu')}
+            onActionLeft={goToBack}
+            includeOrderTypeSelector
+            onClickTypes={handleRedirect}
+            rightComponent={cart && (
+              <TouchableOpacity
+                style={{ flexDirection: 'row', alignItems: 'center' }}
+                onPress={onToggleCart}
+              >
+                <OText
+                  color={theme.colors.mediumGray}
                 >
-                  <OText
-                    color={theme.colors.mediumGray}
-                  >
-                    {`${cart?.products?.length || 0} ${t('ITEMS', 'items')}`} {parsePrice(cart?.total || 0)} {' '}
-                  </OText>
-
-                  <MaterialIcon
-                    name={bottomSheetVisibility ? "cart-off" : "cart-outline"}
-                    color={theme.colors.primary}
-                    size={30}
-                  />
-                </TouchableOpacity>
-              )}
-            />
-          </View>
+                  {`${cart?.products?.length || 0} ${t('ITEMS', 'items')}`} {parsePrice(cart?.total || 0)} {' '}
+                </OText>
+
+                <MaterialIcon
+                  name={bottomSheetVisibility ? "cart-off" : "cart-outline"}
+                  color={theme.colors.primary}
+                  size={30}
+                />
+              </TouchableOpacity>
+            )}
+          />
 
           <BusinessProductsListing
             { ...businessProductsListingProps }
@@ -144,7 +155,7 @@ const BusinessMenu = (props:any): React.ReactElement => {
         </Container>
       </View>
 
-        <View
+        {/* <View
           style={{
             flex: bottomSheetVisibility && orientationState?.orientation === PORTRAIT ? 0 : 0.8,
             display: bottomSheetVisibility ? 'flex' : 'none'
@@ -155,7 +166,7 @@ const BusinessMenu = (props:any): React.ReactElement => {
             resetInactivityTimeout={resetInactivityTimeout}
             clearInactivityTimeout={clearInactivityTimeout}
           />
-        </View>
+        </View> */}
     </View>
   );
 };

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

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
+import React from 'react';
+import { PlaceholderLine } from 'rn-placeholder';
 import { View, ScrollView, Platform } from 'react-native';
 import { useTheme } from 'styled-components/native';
 import { useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation';
@@ -21,7 +21,6 @@ const BusinessesListingUI = (props: any) => {
     navigation,
     businessesList,
     handleBusinessClick,
-    paginationProps,
   } = props;
 
   const theme = useTheme();

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

@@ -10,7 +10,7 @@ import {
   useValidationFields,
 } from 'ordering-components/native';
 
-import { CheckoutAction, OrderTypeWrapper, FloatingLayout } from './styles';
+import { CheckoutAction, OrderTypeWrapper, FloatingLayout, OSRow } from './styles';
 
 import { OSBill, OSCoupon, OSTable } from '../OrderSummary/styles';
 
@@ -90,13 +90,26 @@ const CartUI = (props: any) => {
 
   const goToBack = () => navigation.goBack();
 
+  const getIncludedTaxes = () => {
+    if (cart?.taxes === null) {
+      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)
+      }, 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 (
     <>
       <Container>
         <NavBar
           title={t('CONFIRM_YOUR_ORDER', 'Confirm your order')}
           onActionLeft={goToBack}
-          style={{ height: orientationState?.dimensions?.height * 0.08 }}
           btnStyle={{ paddingLeft: 0 }}
           rightComponent={(
             <OButton
@@ -177,13 +190,10 @@ const CartUI = (props: any) => {
               <OSTable>
                 <OText>{t('SUBTOTAL', 'Subtotal')}</OText>
                 <OText>
-                  {cart.business.tax_type === 1
-                    ? parsePrice((cart?.subtotal + cart?.tax) || 0)
-                    : parsePrice(cart?.subtotal || 0)}
+                  {parsePrice(cart?.subtotal + getIncludedTaxes())}
                 </OText>
               </OSTable>
-              {cart?.discount > 0 && cart?.total >= 0 && orientationState?.orientation == PORTRAIT && (
-
+              {cart?.discount > 0 && cart?.total >= 0 && cart?.offers?.length === 0 && orientationState?.orientation == PORTRAIT && (
                 <OSTable
                   style={{
                     backgroundColor: theme.colors.success,
@@ -226,44 +236,107 @@ const CartUI = (props: any) => {
                   </OText>
                 </OSTable>
               )}
-              {cart.business.tax_type !== 1 && (
+              {
+                cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 1)?.map((offer: any, i: number) => (
+                  <OSTable key={`${offer?.id}_${i}`}>
+                    <OSRow>
+                      <OText>{offer.name}</OText>
+                      {offer.rate_type === 1 && (
+                        <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                      )}
+                    </OSRow>
+                    <OText>
+                      - {parsePrice(offer?.summary?.discount)}
+                    </OText>
+                  </OSTable>
+                ))
+              }
+              {cart?.subtotal_with_discount > 0 && cart?.discount > 0 && cart?.total >= 0 && (
                 <OSTable>
-                  <OText>
-                    {t('TAX', 'Tax')}
-                    {`(${verifyDecimals(cart?.business?.tax, parseNumber)}%)`}
-                  </OText>
-                  <OText>{parsePrice(cart?.tax || 0)}</OText>
+                  <OText numberOfLines={1}>{t('SUBTOTAL_WITH_DISCOUNT', 'Subtotal with discount')}</OText>
+                  {cart?.business?.tax_type === 1 ? (
+                    <OText>{parsePrice(cart?.subtotal_with_discount + getIncludedTaxesDiscounts() ?? 0)}</OText>
+                  ) : (
+                    <OText>{parsePrice(cart?.subtotal_with_discount ?? 0)}</OText>
+                  )}
                 </OSTable>
               )}
+              {
+                cart.taxes?.length > 0 && cart.taxes.filter((tax: any) => tax.type === 2 && tax?.rate !== 0).map((tax: any, i: number) => (
+                  <OSTable key={`${tax?.id}_${i}`}>
+                    <OSRow>
+                      <OText>
+                        {tax.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
+                        {`(${verifyDecimals(tax?.rate, parseNumber)}%)`}{' '}
+                      </OText>
+                    </OSRow>
+                    <OText>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0)}</OText>
+                  </OSTable>
+                ))
+              }
+              {
+                cart?.fees?.length > 0 && cart?.fees?.filter((fee: any) => !(fee.fixed === 0 && fee.percentage === 0)).map((fee: any, i: number) => (
+                  <OSTable key={`${fee?.id}_${i}`}>
+                    <OSRow>
+                      <OText>
+                        {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
+                        ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)}${fee.percentage > 0 ? ' + ' : ''}`}{fee.percentage > 0 && `${fee.percentage}%`}){' '}
+                      </OText>
+                    </OSRow>
+                    <OText>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0)}</OText>
+                  </OSTable>
+                ))
+              }
+              {
+                cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 3)?.map((offer: any, i: number) => (
+                  <OSTable key={`${offer?.id}_${i}`}>
+                    <OSRow>
+                      <OText>{offer.name}</OText>
+                      {offer.rate_type === 1 && (
+                        <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                      )}
+                    </OSRow>
+                    <OText>
+                      - {parsePrice(offer?.summary?.discount)}
+                    </OText>
+                  </OSTable>
+                ))
+              }
               {selectedOrderType === 1 && cart?.delivery_price > 0 && (
                 <OSTable>
                   <OText>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
                   <OText>{parsePrice(cart?.delivery_price)}</OText>
                 </OSTable>
               )}
+              {
+                cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 2)?.map((offer: any, i: number) => (
+                  <OSTable key={`${offer?.id}_${i}`}>
+                    <OSRow>
+                      <OText>{offer.name}</OText>
+                      {offer.rate_type === 1 && (
+                        <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                      )}
+                    </OSRow>
+                    <OText>
+                      - {parsePrice(offer?.summary?.discount)}
+                    </OText>
+                  </OSTable>
+                ))
+              }
               {cart?.driver_tip > 0 && (
                 <OSTable>
                   <OText>
                     {t('DRIVER_TIP', 'Driver tip')}
                     {cart?.driver_tip_rate > 0 &&
                       parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
-                      !!!parseInt(configs?.driver_tip_use_custom?.value, 10) &&
+                      !parseInt(configs?.driver_tip_use_custom?.value, 10) &&
                       (
-                        `(${parseNumber(cart?.driver_tip_rate)}%)`
+                        `(${verifyDecimals(cart?.driver_tip_rate, parseNumber)}%)`
                       )}
                   </OText>
                   <OText>{parsePrice(cart?.driver_tip)}</OText>
                 </OSTable>
               )}
-              {cart?.service_fee > 0 && (
-                <OSTable>
-                  <OText>
-                    {t('SERVICE_FEE', 'Service Fee')}
-                    {`(${verifyDecimals(cart?.business?.service_fee, parseNumber)}%)`}
-                  </OText>
-                  <OText>{parsePrice(cart?.service_fee)}</OText>
-                </OSTable>
-              )}
               {!cart?.discount_type && isCouponEnabled && !isCartPending && orientationState?.orientation == PORTRAIT && (
                 <OSTable>
                   <OSCoupon>
@@ -279,7 +352,7 @@ const CartUI = (props: any) => {
                   {t('TOTAL', 'Total')}
                 </OText>
                 <OText weight='bold' color={theme.colors.primary}>
-                  {cart?.total >= 1 && parsePrice(cart?.total)}
+                  {parsePrice(cart?.total >= 0 ? cart?.total : 0)}
                 </OText>
               </OSTable>
             </OSBill>
@@ -379,7 +452,7 @@ const CartUI = (props: any) => {
         <ProductForm
           productCart={curProduct}
           businessSlug={cart?.business?.slug}
-          businessId={cart?.business_id}
+          businessId={curProduct?.business_id}
           categoryId={curProduct?.category_id}
           productId={curProduct?.id}
           onSave={handlerProductAction}

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

@@ -68,3 +68,9 @@ export const FloatingLayout = styled.View`
     padding-bottom: 20px;
   `)}
 `
+
+export const OSRow = styled.View`
+  flex-direction: row;
+  overflow: hidden;
+  width: 80%;
+`

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

@@ -62,6 +62,10 @@ const CartBottomSheetUI = (props: CartBottomSheetUIProps): React.ReactElement |
   }
 
   const handleEditProduct = (product: any) => {
+    if (props.onEditProduct) {
+      props.onEditProduct(product)
+      return
+    }
     setCurProduct(product)
     setModalIsOpen(true)
   }
@@ -148,7 +152,7 @@ const CartBottomSheetUI = (props: CartBottomSheetUIProps): React.ReactElement |
       <StyledBottomContent
         style={{bottom:10}}
         minHeight={props.height * 0.01}
-      > 
+      >
         <OButton
           text={(cart?.subtotal >= cart?.minimum || !cart?.minimum) && cart?.valid_address ? (
             !openUpselling !== canOpenUpselling ? `${t('CHECKOUT', 'Checkout')} ${parsePrice(cart?.total)}`: t('LOADING', 'Loading')
@@ -198,6 +202,7 @@ const CartBottomSheetUI = (props: CartBottomSheetUIProps): React.ReactElement |
           canOpenUpselling={canOpenUpselling}
           setCanOpenUpselling={setCanOpenUpselling}
           onClose={onCloseUpselling}
+          onAddProduct={props.onAddProduct}
           resetInactivityTimeout={resetInactivityTimeout}
         />
       )}
@@ -231,7 +236,7 @@ const TopBar = (props:any) => {
 			<OIconButton
         bgColor="transparent"
         borderColor="transparent"
-        RenderIcon={() => 
+        RenderIcon={() =>
             <EvilIcons
               name={'close'}
               size={40}
@@ -260,6 +265,8 @@ interface CartBottomSheetUIProps {
 	onNavigationRedirect: any,
   clearInactivityTimeout: any,
   resetInactivityTimeout: any,
+  onEditProduct: any,
+  onAddProduct: any,
 }
 
 export const CartBottomSheet = (props: any) => {

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

@@ -1,10 +1,7 @@
 import React, { useEffect, useState } from 'react';
-import { useLanguage } from 'ordering-components/native';
 import { useCartBottomSheet } from '../../providers/CartBottomSheetProvider';
-import { CCNotCarts } from './styles';
 
 import { Cart } from '../Cart';
-import { OText } from '../shared';
 import Spinner from 'react-native-loading-spinner-overlay';
 import { Cart as TypeCart } from '../../types';
 
@@ -20,7 +17,6 @@ export const CartContent = (props: any) => {
     resetInactivityTimeout,
   }: Props = props
 
-  const [, t] = useLanguage()
   const [isCartsLoading, setIsCartsLoading] = useState(false)
   const [, { hideCartBottomSheet }] = useCartBottomSheet();
 
@@ -56,13 +52,6 @@ export const CartContent = (props: any) => {
           }
         </>
       )}
-      {/* {(!cart && showNotFound) && (
-        <CCNotCarts>
-          <OText size={24} style={{ textAlign: 'center' }}>
-            {t('CARTS_NOT_FOUND', 'You don\'t have carts available')}
-          </OText>
-        </CCNotCarts>
-      )} */}
       <Spinner visible={isCartsLoading} />
     </>
   )

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

@@ -56,9 +56,10 @@ const CartItem = (props: CartItemProps) => {
     return product
   }
   const isProductIngredients = productInfo()?.ingredients.length > 0 || productInfo()?.options.length > 0 || product?.comment
-  const getFormattedSubOptionName = ({ quantity, name, position, price }: { quantity: number, name: string, position: string, price: number }) => {
+  const getFormattedSubOptionName = ({ quantity, name, position, price }: { quantity: number, name: string, position: string, price: any }) => {
     const pos = position ? `(${position})` : ''
-    return `${quantity} x ${name} ${pos} +${price}`
+    const str = `${quantity} x ${name} ${pos}`
+    return price ? `${str} ${price}` : str
   }
 
   return (
@@ -184,7 +185,7 @@ const CartItem = (props: CartItemProps) => {
                             quantity: suboption.quantity,
                             name: suboption.name,
                             position: (suboption.position !== 'whole') ? t(suboption.position.toUpperCase(), suboption.position) : '',
-                            price: parsePrice(suboption.price)
+                            price: suboption.price > 0 && `+${parsePrice(suboption.price)}`
                           })}
                         </OText>
                       </ProductSubOption>