ordering-ui-react-native 0.16.10 → 0.16.11-release

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

@@ -270,7 +270,7 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
               }}
               style={{ height: 35, paddingLeft: 5, paddingRight: 5, marginHorizontal: 3, marginVertical: 10 }}
               imgRightSrc={isSelectedComment(commentItem.key) ? theme.images.general.close : null}
-              imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
+              imgRightStyle={{ right: 5, margin: 5 }}
               onClick={() => handleChangeComment(commentItem) }
             />
           ))}

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

@@ -0,0 +1,53 @@
+import React from 'react'
+import { Dimensions, View } from 'react-native'
+import { OButton, OIcon, OText } from '../shared'
+import { useLanguage, useSession } from 'ordering-components/native'
+import { useTheme } from 'styled-components/native'
+
+export const ScheduleBlocked = (props : any) => {
+    const { nextSchedule } = props
+    const [, t] = useLanguage()
+    const [, {logout}] = useSession()
+    const theme = useTheme()
+    const deviceWidth = Dimensions.get('screen').width
+
+    const daysOfWeek = [
+        t('SUNDAY', 'Sunday'),
+        t('MONDAY', 'Monday'),
+        t('TUESDAY', 'Tuesday'),
+        t('WEDNESDAY', 'Wednesday'),
+        t('THURSDAY', 'Thurday'),
+        t('FRIDAY', 'Friday'),
+        t('SATURDAY', 'Saturday'),
+    ]
+
+    const scheduleFormatted = ({ hour, minute }: any) => {
+        const checkTime = (val: number) => val < 10 ? `0${val}` : val
+        return `${checkTime(hour)}:${checkTime(minute)}`
+    }
+
+    const goBack = () => {
+        logout()
+    }
+
+    return (
+        <View style={{ alignItems: 'center', padding: 40 }}>
+            <OText size={20}>{t('YOU_CANT_LOGIN', 'You can\'t login')}</OText>
+            <OIcon
+                src={theme.images?.general?.deliveryWaiting}
+                width={(deviceWidth - 80) * 0.9}
+                height={(deviceWidth - 80) * 0.8}
+            />
+            <OText>{t('OUTSIDE_ESTABLISHED_SCHEDULE', 'You are outside the established schedule')}</OText>
+            <View style={{ flexDirection: 'row', marginBottom: 20 }}>
+                <OText color={theme.colors.primary}>{t('NEXT_TIME', 'Next time')}: </OText>
+                <OText>{daysOfWeek[nextSchedule?.day]} {scheduleFormatted(nextSchedule?.schedule?.open)}</OText>
+            </View>
+            <OButton
+                text={t('GO_BACK', 'Go back')}
+                textStyle={{ color: theme.colors.white }}
+                onClick={goBack}
+            />
+        </View>
+    )
+}

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

@@ -36,6 +36,7 @@ export const UserFormDetailsUI = (props: any) => {
     handleCancelEdit,
     toggleIsEdit,
     isCheckout,
+    isAlsea
   } = props;
 
   const theme = useTheme();
@@ -265,7 +266,9 @@ export const UserFormDetailsUI = (props: any) => {
               }).map(
                 (field: any) =>
                   showField &&
-                  showField(field.code) && (
+                  showField(field.code) &&
+                  !isAlsea
+                  && (
                     <React.Fragment key={field.id}>
                       <OText style={styles.label}>
                         {t(field?.code.toUpperCase(), field?.name)}
@@ -442,7 +445,7 @@ export const UserFormDetailsUI = (props: any) => {
                 </OText>
               )}
 
-              {!!showInputPhoneNumber && (
+              {!!showInputPhoneNumber && !isAlsea && (
                 <WrapperPhone>
                   <PhoneInputNumber
                     data={phoneInputData}

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { View, StyleSheet, ScrollView, ActivityIndicator } from 'react-native';
+import { View, StyleSheet, ScrollView, ActivityIndicator, Pressable } from 'react-native';
 import { useForm } from 'react-hook-form';
 import { launchImageLibrary } from 'react-native-image-picker';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
@@ -22,6 +22,7 @@ import {
 import { LogoutButton } from '../LogoutButton';
 import { LanguageSelector } from '../LanguageSelector';
 import { UserFormDetailsUI } from '../UserFormDetails';
+import { DriverSchedule } from '../DriverSchedule'
 import ToggleSwitch from 'toggle-switch-react-native';
 import { UDWrapper } from '../UserFormDetails/styles';
 import {
@@ -30,11 +31,12 @@ import {
   OText,
   OButton,
   OInput,
+  OModal,
 } from '../../components/shared';
 import { sortInputFields, getTraduction } from '../../utils';
 import { ProfileParams } from '../../types';
 import { NotFoundSource } from '../NotFoundSource';
-
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 const ProfileUI = (props: ProfileParams) => {
   const {
     navigation,
@@ -47,6 +49,7 @@ const ProfileUI = (props: ProfileParams) => {
     handleToggleAvalaibleStatusDriver,
     userState,
     isAvailableLoading,
+    isAlsea
   } = props;
 
   const [{ user }] = useSession();
@@ -66,6 +69,7 @@ const ProfileUI = (props: ProfileParams) => {
   const [phoneUpdate, setPhoneUpdate] = useState(false);
   const [userPhoneNumber, setUserPhoneNumber] = useState<any>(null);
   const [phoneToShow, setPhoneToShow] = useState('');
+  const [openModal, setOpenModal] = useState(false)
 
   useEffect(() => {
     if (phoneInputData.phone.cellphone) {
@@ -456,10 +460,10 @@ const ProfileUI = (props: ProfileParams) => {
                 hideUpdateButton
                 handleCancelEdit={handleCancelEdit}
                 toggleIsEdit={toggleIsEdit}
+                isAlsea={isAlsea}
               />
             </View>
           )}
-
           {!validationFields.loading && !isEdit && (
             <EditButton>
               <OButton
@@ -474,12 +478,32 @@ const ProfileUI = (props: ProfileParams) => {
               />
             </EditButton>
           )}
-
+          {!!user?.schedule && (
+            <Pressable style={{ marginBottom: 10 }} onPress={() => setOpenModal(true)}>
+              <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                <OText size={16}>{t('SCHEDULE', 'Schedule')}</OText>
+                <AntDesignIcon size={18} name='right' />
+              </View>
+              <View style={{
+                borderBottomColor: theme.colors.tabBar,
+                borderBottomWidth: 1,
+                marginTop: 10
+              }} />
+            </Pressable>
+          )}
           <Actions>
             <LanguageSelector />
 
             <LogoutButton />
           </Actions>
+          <OModal
+            open={openModal}
+            onClose={() => setOpenModal(false)}
+            entireModal
+            hideIcons
+          >
+            <DriverSchedule schedule={user?.schedule} />
+          </OModal>
         </ScrollView>
       )}
     </>

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

@@ -4,6 +4,7 @@ import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler'
 import { ScrollView as CustomScrollView, TouchableOpacity as CustomTouchableOpacity, View } from 'react-native'
 import FeatherIcon from 'react-native-vector-icons/Feather';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import { Text } from 'react-native-paper';
 
 interface Props {
@@ -16,7 +17,11 @@ interface Props {
   dropViewMaxHeight?: any,
   isModal?: any,
   bgcolor?: string,
-  textcolor?: string
+  textcolor?: string,
+  handleClear?: any,
+  handleOpenSelect?: any,
+  openedSelect?: string,
+  selectType?: string
 }
 
 const Wrapper = styled.View`
@@ -70,7 +75,11 @@ const ODropDown = (props: Props) => {
     placeholder,
     onSelect,
     dropViewMaxHeight,
-    isModal
+    isModal,
+    handleClear,
+    handleOpenSelect,
+    openedSelect,
+    selectType
   } = props
 
   const theme = useTheme();
@@ -82,6 +91,7 @@ const ODropDown = (props: Props) => {
 
   const onToggle = () => {
     setIsOpen(!isOpen)
+    if (!isOpen) handleOpenSelect?.()
   }
 
   const onSelectOption = (option: any) => {
@@ -91,12 +101,25 @@ const ODropDown = (props: Props) => {
     setIsOpen(false)
   }
 
+  const handleClearSearch = () => {
+    handleClear()
+    if (isOpen) {
+      onToggle()
+    }
+  }
+
   useEffect(() => {
     const _defaultOption = options?.find((option: any) => option.value === defaultValue)
     setSelectedOption(_defaultOption)
     setValue(defaultValue)
   }, [defaultValue, options])
 
+  useEffect(() => {
+    if (openedSelect !== selectType && typeof openedSelect === 'string') {
+      setIsOpen(false)
+    }
+  }, [openedSelect])
+
   return (
     <Wrapper style={props.style}>
       <Selected
@@ -110,11 +133,22 @@ const ODropDown = (props: Props) => {
         >
           {selectedOption?.content || selectedOption?.name || placeholder}
         </SelectedLabel>
-        <FeatherIcon
-          name='chevron-down'
-          color={props.textcolor}
-          size={24}
-        />
+        {selectedOption && handleClear ? (
+          <AntDesign
+            name={'close'}
+            size={20}
+            onPress={() => handleClearSearch()}
+            style={{ position: 'absolute', right: 12, top: 13 }}
+          />
+        ) : (
+          <FeatherIcon
+            name='chevron-down'
+            color={props.textcolor}
+            size={24}
+            style={{ position: 'absolute', right: 12, top: 13 }}
+
+          />
+        )}
       </Selected>
       {isOpen && options && (
         <DropView
@@ -154,7 +188,7 @@ const ODropDown = (props: Props) => {
               maxHeight: dropViewMaxHeight || null,
               paddingBottom: 15
             }}
-            nestedScrollEnabled={true}
+              nestedScrollEnabled={true}
             >
               {options.map((option: any, index: number) => (
                 <CustomTouchableOpacity

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import styled, { css, useTheme } from 'styled-components/native'
 import { useLanguage } from 'ordering-components/native';
 import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler'
@@ -24,6 +24,10 @@ interface Props {
   handleChangeDate?: any,
   rangeDate?: any,
   isCalendarAlwaysVisible?: boolean
+  handleClear?: any;
+  handleOpenSelect?: any,
+  openedSelect?: string,
+  selectType?: string
 }
 
 const Wrapper = styled.View`
@@ -96,7 +100,11 @@ const ODropDownCalendar = (props: Props) => {
     isCalendar,
     handleChangeDate,
     rangeDate,
-    isCalendarAlwaysVisible
+    isCalendarAlwaysVisible,
+    handleClear,
+    handleOpenSelect,
+    openedSelect,
+    selectType
   } = props
 
   const theme = useTheme();
@@ -110,6 +118,7 @@ const ODropDownCalendar = (props: Props) => {
 
   const onToggle = () => {
     setIsOpen(!isOpen)
+    if (!isOpen) handleOpenSelect?.()
   }
 
   const onSelectOption = (option: any) => {
@@ -122,7 +131,7 @@ const ODropDownCalendar = (props: Props) => {
   const onDateChange = (date: any, type: any) => {
     if (!date) return
     if (type === 'END_DATE') {
-      handleChangeDate(rangeDate.from, date.format('MM/DD/YY'))
+      handleChangeDate(rangeDate.from, new Date(date.format('MM/DD/YY')) === rangeDate.from ? '' : date.format('MM/DD/YY'))
     } else {
       handleChangeDate(date.format('MM/DD/YY'), '')
     }
@@ -142,12 +151,31 @@ const ODropDownCalendar = (props: Props) => {
     return (from || to) ? (from + (to ? end : '')) : placeholder
   }
 
+  const handleClearCalendar = () => {
+    handleClear && handleClear()
+    if (isOpen) {
+      onToggle()
+    }
+  }
+
   useEffect(() => {
     const _defaultOption = options?.find((option: any) => option.value === defaultValue)
     setSelectedOption(_defaultOption)
     setValue(defaultValue)
   }, [defaultValue, options])
 
+  useEffect(() => {
+    if (openedSelect !== selectType && typeof openedSelect === 'string') {
+      setIsOpen(false)
+    }
+  }, [openedSelect])
+
+  useEffect(() => {
+    if (rangeDate.to && rangeDate.from) {
+      onSelect('calendar')
+    }
+  }, [rangeDate.to, rangeDate.from])
+
   return (
     <Wrapper style={props.style}>
       <Selected
@@ -165,10 +193,11 @@ const ODropDownCalendar = (props: Props) => {
               : `${selectedOption?.content || selectedOption?.name || placeholder}`
           }
         </SelectedLabel>
-        <FeatherIcon
-          name='calendar'
-          color={theme.colors.backArrow}
-          size={24}
+        <AntDesign
+          name={selectedOption && handleClear ? 'close' : 'calendar'}
+          size={20}
+          onPress={() => handleClearCalendar()}
+          style={{ position: 'absolute', right: 12, top: 13 }}
         />
       </Selected>
       {isOpen && options && (

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

@@ -26,6 +26,7 @@ interface Props {
   isNotDecoration?: boolean;
   styleCloseButton?: any;
   order?: any;
+  hideIcons?: boolean
 }
 
 const OModal = (props: Props): React.ReactElement => {
@@ -47,6 +48,7 @@ const OModal = (props: Props): React.ReactElement => {
     style,
     styleCloseButton,
     order,
+    hideIcons
   } = props;
 
   const theme = useTheme();
@@ -70,8 +72,8 @@ const OModal = (props: Props): React.ReactElement => {
       alignItems: 'center',
       paddingHorizontal: 30,
       paddingTop: 30,
-      paddingBottom: 25,
-      borderBottomWidth: 2,
+      paddingBottom: !hideIcons ? 25 : 15,
+      borderBottomWidth: !hideIcons ? 2 : 0,
       borderBottomColor: '#e6e6e6',
     },
     titleGroups: {
@@ -218,50 +220,51 @@ const OModal = (props: Props): React.ReactElement => {
                     {title}
                   </OText>
                 </View>
+                {!hideIcons && (
+                  <View style={styles.titleGroups}>
+                    <View style={styles.shadow}>
+                      {order?.business?.logo ? (
+                        <OIcon
+                          url={optimizeImage(
+                            order?.business?.logo,
+                            'h_300,c_limit',
+                          )}
+                          style={styles.titleIcons}
+                        />
+                      ) : (
+                        <OIcon
+                          src={theme.images.dummies.businessLogo}
+                          style={styles.titleIcons}
+                        />
+                      )}
+                    </View>
 
-                <View style={styles.titleGroups}>
-                  <View style={styles.shadow}>
-                    {order?.business?.logo ? (
+                    <View style={styles.shadow}>
                       <OIcon
                         url={optimizeImage(
-                          order?.business?.logo,
+                          order?.customer?.photo ||
+                          theme?.images?.dummies?.customerPhoto,
                           'h_300,c_limit',
                         )}
                         style={styles.titleIcons}
                       />
-                    ) : (
-                      <OIcon
-                        src={theme.images.dummies.businessLogo}
-                        style={styles.titleIcons}
-                      />
-                    )}
-                  </View>
+                    </View>
 
-                  <View style={styles.shadow}>
-                    <OIcon
-                      url={optimizeImage(
-                        order?.customer?.photo ||
-                          theme?.images?.dummies?.customerPhoto,
-                        'h_300,c_limit',
-                      )}
-                      style={styles.titleIcons}
-                    />
+                    {order?.driver && (
+                      <View style={styles.shadow}>
+                        <OIcon
+                          url={
+                            optimizeImage(
+                              order?.driver?.photo,
+                              'h_300,c_limit',
+                            ) || theme?.images?.dummies?.driverPhoto
+                          }
+                          style={styles.titleIcons}
+                        />
+                      </View>
+                    )}
                   </View>
-
-                  {order?.driver && (
-                    <View style={styles.shadow}>
-                      <OIcon
-                        url={
-                          optimizeImage(
-                            order?.driver?.photo,
-                            'h_300,c_limit',
-                          ) || theme?.images?.dummies?.driverPhoto
-                        }
-                        style={styles.titleIcons}
-                      />
-                    </View>
-                  )}
-                </View>
+                )}
               </View>
             )}
             {children}

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

@@ -21,8 +21,8 @@ export interface LoginParams {
   allowedLevels?: any;
   useRootPoint?: any;
   notificationState?: any;
-	handleReCaptcha?: any;
-	enableReCaptcha?: any;
+  handleReCaptcha?: any;
+  enableReCaptcha?: any;
 }
 export interface ProfileParams {
   navigation?: any;
@@ -41,6 +41,7 @@ export interface ProfileParams {
   validationFields?: any;
   showField?: any;
   isRequiredField?: any;
+  isAlsea?: boolean;
 }
 
 export interface AddressListParams {
@@ -255,6 +256,7 @@ export interface MessagesOptionParams {
   messagesReadList?: any;
   onNavigationRedirect?: any;
   setSortBy?: any;
+  getOrders: any
 }
 export interface OrdersOptionParams {
   orderList?: any;
@@ -265,7 +267,7 @@ export interface OrdersOptionParams {
   titleContent?: string;
   customArray?: Array<any>;
   loadMoreOrders?: () => {};
-  loadOrders?: ({}: any) => {};
+  loadOrders?: ({ }: any) => {};
   messages?: any;
   setMessages?: () => {};
   loadMessages?: () => {};
@@ -279,7 +281,7 @@ export interface OrdersOptionParams {
   ordersGroup?: any;
   setOrdersGroup?: any;
   setCurrentFilters?: any;
-  onFiltered?: ({}: any) => {};
+  onFiltered?: ({ }: any) => {};
   filtered?: any;
   handleClickOrder?: any;
   orderGroupStatusCustom?: {
@@ -290,9 +292,11 @@ export interface OrdersOptionParams {
   };
   isBusinessApp?: boolean;
   handleClickLogisticOrder: (status: number, orderId: number) => void,
-  logisticOrders: {orders: Array<any>, loading: boolean, error: Array<string> | string},
+  logisticOrders: { orders: Array<any>, loading: boolean, error: Array<string> | string },
   loadLogisticOrders: () => void;
-  isLogisticActivated?: boolean
+  isLogisticActivated?: boolean;
+  isAlsea?: boolean;
+  checkNotification?: boolean;
 }
 export interface ActiveOrdersParams {
   orders?: any;
@@ -390,6 +394,7 @@ export interface ProductItemAccordionParams {
   offsetDisabled?: any;
   isFromCheckout?: any;
   isClickableEvent?: any;
+  currency?: any;
 }
 export interface ReviewOrderParams {
   order?: { orderId: number; businessId: number; logo: string };
@@ -405,7 +410,7 @@ export interface MessagesParams {
   order?: any;
   orderId?: number;
   messages?: any;
-  message?: string;
+  message: string;
   image?: string;
   messagesToShow?: any;
   sendMessage?: any;
@@ -561,13 +566,13 @@ export interface AcceptOrRejectOrderParams {
 }
 
 export interface MapViewParams {
-  onNavigationRedirect: (page : string, params ?: any) => void,
+  onNavigationRedirect: (page: string, params?: any) => void,
   getBusinessLocations: () => void,
   isLoadingBusinessMarkers?: boolean,
   markerGroups: Array<any>,
   customerMarkerGroups: Array<any>,
   alertState: { open: boolean, content: Array<string>, key?: string | null },
-  setAlertState: ({open, content, key} : { open: boolean, content: Array<string>, key?: string | null }) => void
+  setAlertState: ({ open, content, key }: { open: boolean, content: Array<string>, key?: string | null }) => void
 }
 
 export interface ReviewCustomerParams {

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

@@ -38,6 +38,8 @@ export const getTraduction = (key: string, t: any) => {
     ERROR_PRODUCT_NOT_FOUND: 'Error with the product',
     ERROR_USER_UPDATE_YOU_HAVE_ASSIGNED_ORDERS:
       "You can't because you have assigned orders",
+    ERROR_INVALID_OFFER: 'The offer doesn\'t exist',
+    ERROR_AUTH_DRIVER_LOGIN_VALIDATION: 'Error auth driver login validation'
   };
 
   return keyList[key] ? t(key, keyList[key]) : t(key);
@@ -343,3 +345,11 @@ export const getOrderStatus = (s: string, t: any) => {
 
   return objectStatus && objectStatus;
 };
+
+export const transformDistance = (value : number, distanceUnit?: string) => {
+  return distanceUnit === 'mi'
+    ? (value / 1.609).toFixed(2)
+    : distanceUnit === 'ft'
+      ? (value * 3280.84).toFixed(0)
+      : (value).toFixed(2)
+}

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,
@@ -120,6 +120,7 @@ const BusinessMenu = (props:any): React.ReactElement => {
         }}
       >
         <Container nopadding nestedScrollEnabled>
+          {Platform.OS === 'android' && (<View style={{ paddingTop: 20 }} />)}
           <NavBar
             title={t('MENU_V21', 'Menu')}
             onActionLeft={goToBack}

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>