ordering-ui-react-native 0.16.72-release → 0.16.73-release

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

@@ -1,5 +1,18 @@
 import styled from 'styled-components/native';
 
+export const LoginWith = styled.View`
+  display: flex;
+  width: 100%;
+  margin-bottom: 30px;
+`;
+
+export const TabsContainer = styled.View`
+  min-width: ${({ width }: { width: number }) => `${width}px`};
+  width: auto;
+  display: flex;
+  flex-direction: row;
+`;
+
 export const LogoWrapper = styled.View`
   align-items: center;
 `;
@@ -11,4 +24,4 @@ export const RecaptchaButton = styled.View`
   flex-direction: row;
   align-items: center;
   margin-bottom: 10px;
-`
+`

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

@@ -86,6 +86,7 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
   return (
     <Wrapper>
       <PhoneInput
+        containerStyle={{ width: '100%' }}
         ref={phoneInput}
         defaultValue={userphoneNumber || defaultValue}
         defaultCode={defaultCode ? transformCountryCode(defaultCode) : configs?.default_country_code?.value}

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

@@ -1,5 +1,3 @@
 import styled from 'styled-components/native';
 
-export const Wrapper = styled.View`
-    flex: 1
-`
+export const Wrapper = styled.View``;

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

@@ -95,14 +95,14 @@ const styles = StyleSheet.create({
     position: 'relative',
     width: '100%',
   },
-  titleSection: {
-    width: '100%',
-    height: 30,
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: 20,
-  },
+	titleSection: {
+		width: '100%',
+		justifyContent: 'space-between',
+		alignItems: 'flex-start',
+		paddingLeft: 40,
+		paddingRight: 40,
+		marginBottom: 40,
+	},
   cancelBtn: {
     position: 'absolute',
     left: 0,
@@ -111,9 +111,12 @@ const styles = StyleSheet.create({
   },
   modalText: {
     marginTop: 15,
-    fontSize: 25,
-    textAlign: "center",
-    zIndex: 10
+		fontSize: 20,
+		lineHeight: 30,
+		fontWeight: '600',
+		textAlign: "center",
+		zIndex: 10,
+    width: '100%'
   },
   wrapperIcon: {
     overflow: 'hidden',

package/themes/kiosk/src/layouts/Container.tsx

@@ -22,7 +22,13 @@ export const Container = (props: Props) => {
     <SafeAreStyled
       nestedScrollEnabled={props.nestedScrollEnabled}
     >
-      <ContainerStyled {...props} ref={props?.forwardRef}>{props.children}</ContainerStyled>
+      <ContainerStyled
+        {...props}
+        keyboardShouldPersistTaps="handled"
+        ref={props?.forwardRef}
+      >
+        {props.children}
+      </ContainerStyled>
     </SafeAreStyled>
   );
 };

package/themes/kiosk/src/types/index.d.ts

@@ -84,6 +84,12 @@ export interface LoginParams {
   useRootPoint?: any;
   enableReCaptcha?: boolean;
   handleReCaptcha?: (vlaue: any) => void;
+  useLoginOtp?: any;
+  otpType?: any;
+  setOtpType?: any;
+  generateOtpCode?: any;
+  useLoginOtpEmail?: any;
+  useLoginOtpCellphone?: any;
 }
 
 export interface ProductItemAccordionParams {
@@ -482,3 +488,10 @@ export interface Cart {
 export interface NoNetworkParams {
   image?: any;
 }
+export interface otpParams {
+	willVerifyOtpState: boolean,
+	setWillVerifyOtpState: (val : boolean) => void,
+	onSubmit: any,
+	handleLoginOtp: (code : string) => void,
+	setAlertState: any
+}

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

@@ -0,0 +1,15 @@
+export const formatSeconds = (seconds : number) => {
+  // Hours, minutes and seconds
+  const hrs = Math.floor(seconds / 3600)
+  const mins = Math.floor((seconds % 3600) / 60)
+  const secs = Math.floor(seconds % 60)
+
+  // Output like '1:01' or '4:03:59' or '123:03:59'
+  let ret = ''
+  if (hrs > 0) {
+    ret += '' + hrs + ':' + (mins < 10 ? '0' : '')
+  }
+  ret += '' + mins + ':' + (secs < 10 ? '0' : '')
+  ret += '' + secs
+  return ret
+}

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

@@ -240,13 +240,16 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
         <SearchBar
           lazyLoad
           {...(isChewLayout && { height: 55 })}
-          inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
-          placeholder={`${t('SEARCH_BUSINESSES', 'Search Businesses')} / ${t('TYPE_AT_LEAST_3_CHARACTERS', 'type at least 3 characters')}`}
+          inputStyle={{ ...styles.searchInput }}
+          placeholder={t('SEARCH_BUSINESSES', 'Search Businesses')}
           onSearch={(val: string) => handleChangeTermValue(val)}
           value={termValue}
           iconCustomRight={<AntDesignIcon name='filter' size={16} style={{ bottom: 2 }} onPress={() => handleOpenfilters()} />}
         />
       </SearchWrapper>
+      <OText size={12} lineHeight={20} color={theme.colors.textThird} mLeft={5}>
+        {t('TYPE_AT_LEAST_3_CHARACTERS', 'Type at least 3 characters')}
+      </OText>
       {
         noResults && (
           <View>
@@ -273,11 +276,13 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
         />
       )}
 
-      <OptionTitle isBusinessesSearchList={!!businessesSearchList}>
-        <OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={10}>
-          {t('BUSINESSES', 'Businesses')}
-        </OText>
-      </OptionTitle>
+      {businessesSearchList.businesses?.length > 0 && (
+        <OptionTitle isBusinessesSearchList={!!businessesSearchList}>
+          <OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={10}>
+            {t('BUSINESSES', 'Businesses')}
+          </OText>
+        </OptionTitle>
+      )}
       <ScrollView horizontal showsHorizontalScrollIndicator={false}>
         {businessesSearchList.businesses?.length > 0 && businessesSearchList.businesses.map((business: any, i: number) => (
           <View

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

@@ -447,6 +447,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
                 professionals={business?.professionals}
                 professionalSelected={professionalSelected}
                 handleChangeProfessionalSelected={handleChangeProfessionalSelected}
+                handleUpdateProfessionals={handleUpdateProfessionals}
               />
             </ProfessionalFilterWrapper>
           )}

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

@@ -409,12 +409,13 @@ const CartUI = (props: any) => {
                     uuid={cart?.uuid}
                     businessId={cart?.business_id}
                     driverTipsOptions={!driverTipsOptions.includes(0) ? [0, ...driverTipsOptions] : driverTipsOptions}
-                    isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1 || !!parseInt(configs?.driver_tip_use_custom?.value, 10)}
+                    isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1}
                     isDriverTipUseCustom={!!parseInt(configs?.driver_tip_use_custom?.value, 10)}
-                    driverTip={parseInt(configs?.driver_tip_type?.value, 10) === 1 || !!parseInt(configs?.driver_tip_use_custom?.value, 10)
+                    driverTip={parseInt(configs?.driver_tip_type?.value, 10) === 1
                       ? cart?.driver_tip
                       : cart?.driver_tip_rate}
                     useOrderContext
+                    cart={cart}
                   />
                 </DriverTipsContainer>
               )}

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

@@ -303,7 +303,7 @@ const CheckoutUI = (props: any) => {
 						titleAlign={'center'}
 						onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
 						showCall={false}
-						btnStyle={{ paddingLeft: 0 }}
+						btnStyle={{ paddingLeft: 0, paddingTop: Platform.OS == 'ios' ? 0 : 2 }}
 						titleWrapStyle={{ paddingHorizontal: 0 }}
 						titleStyle={{ marginRight: 0, marginLeft: 0 }}
 					/>
@@ -540,12 +540,13 @@ const CheckoutUI = (props: any) => {
 										uuid={cartUuid}
 										businessId={cart?.business_id}
 										driverTipsOptions={!driverTipsOptions.includes(0) ? [0, ...driverTipsOptions] : driverTipsOptions}
-										isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1 || !!parseInt(configs?.driver_tip_use_custom?.value, 10)}
+										isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1}
 										isDriverTipUseCustom={!!parseInt(configs?.driver_tip_use_custom?.value, 10)}
-										driverTip={parseInt(configs?.driver_tip_type?.value, 10) === 1 || !!parseInt(configs?.driver_tip_use_custom?.value, 10)
+										driverTip={parseInt(configs?.driver_tip_type?.value, 10) === 1
 											? cart?.driver_tip
 											: cart?.driver_tip_rate}
 										useOrderContext
+										cart={cart}
 									/>
 								</ChDriverTips>
 							</ChSection>

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

@@ -35,7 +35,7 @@ export const Favorite = (props: any) => {
 
   return (
     <Container
-      pdng={Platform.OS === 'ios' ? '20px' : '30px'}
+      pdng={Platform.OS === 'ios' ? '10px' : '20px'}
     >
       <NavBar
         title={t('FAVORITE', 'Favorite')}

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { RefreshControl } from 'react-native'
+import { Platform, RefreshControl } from 'react-native'
 import { HelpParams } from '../../types'
 import { useLanguage } from 'ordering-components/native'
 import NavBar from '../NavBar'
@@ -31,7 +31,7 @@ export const Help = (props: HelpParams) => {
 
   return (
     <Container
-      pt={10}
+      pt={Platform.OS === 'ios' ? 20 : 10}
       noPadding
       refreshControl={
         <RefreshControl

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

@@ -3,7 +3,7 @@ import { useLanguage } from 'ordering-components/native'
 import { HelpGuideParams } from '../../types'
 import { OText, OIcon } from '../shared'
 import { useTheme } from 'styled-components/native'
-import { StyleSheet } from 'react-native'
+import { Platform, StyleSheet } from 'react-native'
 import NavBar from '../NavBar'
 import {
   Content,
@@ -37,7 +37,7 @@ export const HelpGuide = (props: HelpGuideParams) => {
   const goToBack = () => navigation?.canGoBack() && navigation.goBack()
 
   return (
-    <Container>
+    <Container pdng={Platform.OS === 'ios' ? '10px' : '0px'}>
       <NavBar
         title={t('GUIDE_TO_ORDERING', 'Guide to Ordering')}
         onActionLeft={goToBack}

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

@@ -8,4 +8,5 @@ export const Container = styled.ScrollView`
     position: relative;
     flex: 1;
     margin: 10px 0;
+    padding-top: ${(props: any) => props.pdng}
 `

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

@@ -13,6 +13,7 @@ import { Header, TitleHeader, Wrapper, QuickMessageContainer, ProfileMessageHead
 import { MessagesParams } from '../../types'
 import { useWindowDimensions } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { getLogisticTag } from '../../utils'
 
 const ORDER_STATUS: any = {
 	0: 'ORDER_STATUS_PENDING',
@@ -127,7 +128,7 @@ const MessagesUI = (props: MessagesParams) => {
 			?
 			`${t('ORDER', 'Order')} ${t(message.change.attribute.toUpperCase(), message.change.attribute.replace('_', ' '))} ${t('CHANGED_FROM', 'Changed from')} ${filterSpecialStatus.includes(message.change.attribute) ?
 				`${message.change.old === null ? '0' : message.change.old} ${t('TO', 'to')} ${message.change.new} ${t('MINUTES', 'Minutes')}` :
-				`${message.change.old !== null && t(ORDER_STATUS[parseInt(message.change.old, 10)])} ${t('TO', 'to')} ${t(ORDER_STATUS[parseInt(message.change.new, 10)])}`
+				`${message.change?.attribute !== 'logistic_status' ? message.change.old !== null && t(ORDER_STATUS[parseInt(message.change.old, 10)]) : message.change.old !== null && getLogisticTag(message.change.old)} ${t('TO', 'to')} ${message.change?.attribute !== 'logistic_status' ? t(ORDER_STATUS[parseInt(message.change.new, 10)]) : getLogisticTag(message.change.new)}`
 			}`
 			: message.change.new
 				?
@@ -155,9 +156,9 @@ const MessagesUI = (props: MessagesParams) => {
 					image: message.source,
 					system: message.type === 1,
 					user: {
-						_id: message.author.id,
-						name: message.author.name,
-						avatar: message.author.id !== user.id && type === USER_TYPE.DRIVER ? order?.driver?.photo : order?.business?.logo
+						_id: message.author && message.author.id,
+						name: message.author && message.author.name,
+						avatar: message.author && (message.author.id !== user.id && type === USER_TYPE.DRIVER ? order?.driver?.photo : order?.business?.logo)
 					}
 				});
 			}
@@ -170,9 +171,9 @@ const MessagesUI = (props: MessagesParams) => {
 					image: message.source,
 					system: message.type === 1,
 					user: {
-						_id: message.author.id,
-						name: message.author.name,
-						avatar: message.author.id !== user.id && type === USER_TYPE.DRIVER ? order?.driver?.photo : order?.business?.logo
+						_id: message.author && message.author.id ,
+						name: message.author && message.author.name,
+						avatar: message.author && (message.author.id !== user.id && type === USER_TYPE.DRIVER ? order?.driver?.photo : order?.business?.logo)
 					}
 				});
 			}

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

@@ -118,6 +118,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const mapValidStatuses = [9, 19, 23]
   const placeSpotTypes = [3, 4, 5]
   const directionTypes = [2, 3, 4, 5]
+  const activeStatus = [0, 3, 4, 7, 8, 9, 14, 18, 19, 20, 21, 22, 23]
   const enabledPoweredByOrdering = configs?.powered_by_ordering_module?.value
 
   const walletName: any = {
@@ -396,9 +397,13 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
               titleWrapStyle={{ paddingHorizontal: 0 }}
               titleStyle={{ marginRight: 0, marginLeft: 0 }}
               subTitle={<OText size={12} lineHeight={18} color={theme.colors.textNormal}>
-                {order?.delivery_datetime_utc
-                  ? parseDate(order?.delivery_datetime_utc)
-                  : parseDate(order?.delivery_datetime, { utc: false })}
+                {
+                  activeStatus.includes(order?.status)
+                    ? order?.eta_time + 'min'
+                    : order?.delivery_datetime_utc
+                        ? parseDate(order?.delivery_datetime_utc)
+                        : parseDate(order?.delivery_datetime, { utc: false })
+                }
               </OText>}
             />
             {enabledPoweredByOrdering && (

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

@@ -77,14 +77,11 @@ const OrderProgressUI = (props: any) => {
   });
 
   const convertDiffToHours = (order: any) => {
-    const time = order.delivery_type === 1 ? order?.business?.delivery_time : order?.business?.pickup_time
+    const minute = order?.eta_time
     const deliveryTime = order?.delivery_datetime_utc
       ? parseDate(order?.delivery_datetime_utc, { outputFormat: 'YYYY-MM-DD HH:mm' })
       : parseDate(order?.delivery_datetime, { utc: false, outputFormat: 'YYYY-MM-DD HH:mm' })
-    const hour = time?.split(':')?.[0]
-    const minute = time?.split(':')?.[1]
-    const result = time ? (parseInt(hour, 10) * 60) + parseInt(minute, 10) : 0
-    const returnedDate = moment(deliveryTime).add(result, 'minutes').format('hh:mm A')
+    const returnedDate = moment(deliveryTime).add(minute, 'minutes').format('hh:mm A')
     return returnedDate
   }
 

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

@@ -3,7 +3,6 @@ import { OrderList, useLanguage, useOrder, ToastType, useToast } from 'ordering-
 import { useTheme } from 'styled-components/native';
 import { useFocusEffect } from '@react-navigation/native'
 import { OText, OButton } from '../shared'
-import { NotFoundSource } from '../NotFoundSource'
 import { ActiveOrders } from '../ActiveOrders'
 import { PreviousOrders } from '../PreviousOrders'
 import { PreviousBusinessOrdered } from './PreviousBusinessOrdered'
@@ -73,22 +72,22 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 	useEffect(() => {
 		if (loading || error) return
 		const ordersReduced = _orders.map((order: any) => order?.cart_group_id
-      ? _orders
-        .filter((_order: any) => _order?.cart_group_id === order?.cart_group_id)
-        .map((_o: any, _: any, _ordersList: any) => {
-          const obj = {
-            ..._o,
-            id: _ordersList.map(o => o.id),
-            review: _o.review,
-            user_review: _o.user_review,
-            total: _ordersList.reduce((acc: any, o: any) => acc + o.summary.total, 0),
-            business: _ordersList.map((o: any) => o.business),
-            business_id: _ordersList.map((o: any) => o.business_id),
-            products: _ordersList.map((o: any) => o.products)
-          }
-          return obj
-        }).find((o: any) => o)
-      : order)
+			? _orders
+				.filter((_order: any) => _order?.cart_group_id === order?.cart_group_id)
+				.map((_o: any, _: any, _ordersList: any) => {
+					const obj = {
+						..._o,
+						id: _ordersList.map(o => o.id),
+						review: _o.review,
+						user_review: _o.user_review,
+						total: _ordersList.reduce((acc: any, o: any) => acc + o.summary.total, 0),
+						business: _ordersList.map((o: any) => o.business),
+						business_id: _ordersList.map((o: any) => o.business_id),
+						products: _ordersList.map((o: any) => o.products)
+					}
+					return obj
+				}).find((o: any) => o)
+			: order)
 		const orders = ordersReduced?.filter((order: any) => {
 			if (!order?.cart_group_id) return true
 			const isDuplicate = uniqueOrders.includes(order?.cart_group_id)
@@ -193,7 +192,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 
 				</NoOrdersWrapper>
 			)}
-			{(ordersLength?.activeOrdersLength > 0 || ordersLength?.previousOrdersLength > 0) && (
+			{((ordersLength?.activeOrdersLength > 0 && activeOrders) || (ordersLength?.previousOrdersLength > 0 && !activeOrders)) && (
 				<>
 					{((titleContent && ((isBusiness && businessOrderIds?.length > 0) || isProducts)) || !titleContent) && (
 						<OptionTitle titleContent={!!titleContent} isBusinessesSearchList={!!businessesSearchList}>
@@ -206,17 +205,6 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 							</OText>
 						</OptionTitle>
 					)}
-
-					{!(ordersLength?.activeOrdersLength === 0 && ordersLength?.previousOrdersLength === 0) &&
-						!loading &&
-						orders.filter((order: any) => orderStatus.includes(order.status)).length === 0 &&
-						(
-							<NotFoundSource
-								content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
-								image={imageFails}
-								conditioned
-							/>
-						)}
 				</>
 			)}
 			{isBusiness && !!businessesSearchList && businesses?.loading && (

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

@@ -19,8 +19,10 @@ import {
 	useOrder,
 	useUtils,
 	ToastType,
-	useToast
+	useToast,
+	useConfig
 } from 'ordering-components/native';
+import uuid from 'react-native-uuid';
 import { useTheme } from 'styled-components/native';
 import { ProductIngredient } from '../ProductIngredient';
 import { ProductOption } from '../ProductOption';
@@ -52,6 +54,7 @@ import { ProductOptionSubOption } from '../ProductOptionSubOption';
 import { NotFoundSource } from '../NotFoundSource';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import NavBar from '../NavBar';
+import { orderTypeList } from '../../utils';
 const windowWidth = Dimensions.get('window').width;
 
 export const ProductOptionsUI = (props: any) => {
@@ -71,7 +74,9 @@ export const ProductOptionsUI = (props: any) => {
 		handleChangeSuboptionState,
 		handleChangeCommentState,
 		productObject,
-		productAddedToCartLength
+		productAddedToCartLength,
+		actionStatus,
+		handleCreateGuestUser
 	} = props;
 
 	const theme = useTheme();
@@ -178,6 +183,7 @@ export const ProductOptionsUI = (props: any) => {
 	const [, t] = useLanguage();
 	const [orderState] = useOrder();
 	const [{ auth }] = useSession();
+	const [{ configs }] = useConfig()
 	const { product, loading, error } = productObject;
 	const [gallery, setGallery] = useState([])
 	const [thumbsSwiper, setThumbsSwiper] = useState(0)
@@ -198,6 +204,9 @@ export const ProductOptionsUI = (props: any) => {
 	const [isScrollAvailable, setIsScrollAvailable] = useState(null)
 	const [editionsLayoutY, setEditionsLayoutY] = useState(null)
 
+	const guestCheckoutEnabled = configs?.guest_checkout_enabled?.value === '1'
+  const orderTypeEnabled = !orderTypeList[orderState?.options?.type - 1] || configs?.allowed_order_types_guest_checkout?.value?.includes(orderTypeList[orderState?.options?.type - 1])
+
 	const isError = (id: number) => {
 		let bgColor = theme.colors.white;
 		if (errors[`id:${id}`]) {
@@ -294,6 +303,11 @@ export const ProductOptionsUI = (props: any) => {
 		}
 	}
 
+	const handleUpdateGuest = () => {
+		const guestToken = uuid.v4()
+		if (guestToken) handleCreateGuestUser({ guest_token: guestToken })
+	}
+
 	const handleOnLayout = (event: any, optionId: any) => {
 		const _optionLayout = { ...optionLayout }
 		const optionKey = 'id:' + optionId
@@ -472,9 +486,22 @@ export const ProductOptionsUI = (props: any) => {
 							height: 44,
 							borderColor: theme.colors.primary,
 							backgroundColor: theme.colors.white,
+							paddingLeft: 0,
+							paddingRight: 0
 						}}
 					/>
 				)}
+				{!auth && guestCheckoutEnabled && orderTypeEnabled && (
+					<TouchableOpacity style={{ marginTop: 10 }} onPress={handleUpdateGuest}>
+						{actionStatus?.loading ? (
+							<Placeholder Animation={Fade}>
+								<PlaceholderLine width={60} height={20} />
+							</Placeholder>
+						) : (
+							<OText color={theme.colors.primary} size={13}>{t('WITH_GUEST_USER', 'With Guest user')}</OText>
+						)}
+					</TouchableOpacity>
+				)}
 			</View>
 		)
 	}

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

@@ -32,7 +32,7 @@ export const ProductOptionSubOptionUI = (props: any) => {
 		setIsScrollAvailable
 	} = props
 
-	const disableIncrement = option?.limit_suboptions_by_max ? balance === option?.max : state.quantity === suboption?.max || (!state.selected && balance === option?.max)
+	const disableIncrement = option?.limit_suboptions_by_max ? balance === option?.max || state.quantity === suboption?.max : state.quantity === suboption?.max || (!state.selected && balance === option?.max)
 	const price = option?.with_half_option && suboption?.half_price && state.position !== 'whole' ? suboption?.half_price : suboption?.price
 
 	const theme = useTheme();

package/themes/original/src/components/ProfessionalFilter/SingleProfessionalCard/index.tsx

@@ -0,0 +1,108 @@
+import React from 'react'
+import {
+  useSession,
+  useUtils,
+  SingleProfessionalCard as SingleProfessionalCardController
+} from 'ordering-components/native'
+import { useTheme } from 'styled-components/native'
+import { StyleSheet, TouchableOpacity, View } from 'react-native'
+import FastImage from 'react-native-fast-image'
+import { OIcon, OText } from '../../shared'
+import IconAntDesign from 'react-native-vector-icons/AntDesign';
+
+const SingleProfessionalCardUI = (props) => {
+  const {
+    professional,
+    handleFavoriteProfessional,
+    active,
+    handleProfessionalClick
+  } = props
+
+  const theme = useTheme()
+  const [{ auth }] = useSession()
+  const [{ optimizeImage }] = useUtils()
+
+  const handleChangeFavorite = () => {
+    if (auth) {
+      handleFavoriteProfessional && handleFavoriteProfessional(!professional?.favorite)
+    }
+  }
+
+  const styles = StyleSheet.create({
+    professionalItem: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      borderRadius: 7.6,
+      padding: 11,
+      borderWidth: 1,
+      marginRight: 12,
+      minHeight: 64
+    },
+		photoStyle: {
+			width: 42,
+			height: 42,
+			borderRadius: 7.6
+		},
+    favoriteIconStyle: {
+			width: 16,
+			height: 16,
+		},
+  })
+
+  return (
+    <TouchableOpacity
+      onPress={() => handleProfessionalClick(professional)}
+    >
+      <View
+        style={{
+          ...styles.professionalItem,
+          borderColor: active
+            ? theme.colors.primary
+            : theme.colors.border 
+        }}
+      >
+        {professional?.photo ? (
+          <FastImage
+            style={styles.photoStyle}
+            source={{
+              uri: optimizeImage(professional?.photo, 'h_250,c_limit'),
+              priority: FastImage.priority.normal,
+            }}
+            resizeMode={FastImage.resizeMode.cover}
+          />
+        ) : (
+          <OIcon
+            src={theme?.images?.general?.user}
+            cover={false}
+            style={styles.photoStyle}
+          />
+        )}
+        <View style={{ marginLeft: 12 }}>
+          <OText
+            size={12}
+            weight={'400'}
+          >
+            {professional?.name} {professional?.lastname}
+          </OText>
+
+          <TouchableOpacity
+            onPress={() => handleChangeFavorite()}
+          >
+            {professional?.favorite
+              ? <IconAntDesign name='heart' size={16} color={theme.colors.danger5} />
+              : <IconAntDesign name='hearto' size={16} color={theme.colors.danger5} />
+            }
+          </TouchableOpacity>
+        </View>
+      </View>
+    </TouchableOpacity>
+  )
+}
+
+export const SingleProfessionalCard = (props) => {
+  const singleProfessionalCardProps = {
+    ...props,
+    UIComponent: SingleProfessionalCardUI
+  }
+  return <SingleProfessionalCardController {...singleProfessionalCardProps} />
+}