ordering-ui-react-native 0.12.49 → 0.12.53

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

@@ -187,7 +187,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
   };
 
   const getOrderStatus = (key: number) => {
-    return orderStatus.find((status: any) => status.key === key)?.text;
+    return orderStatus.find((status: any) => status?.key === key)?.text;
   };
 
   const applyFilters = () => {
@@ -454,7 +454,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
             currentTabSelected !== 'logisticOrders' &&
             (
               <PreviousOrders
-                orders={currentOrdersGroup.orders}
+                orders={currentOrdersGroup?.orders}
                 onNavigationRedirect={onNavigationRedirect}
                 getOrderStatus={getOrderStatus}
                 handleClickOrder={handleClickOrder}
@@ -464,7 +464,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
             logisticOrders?.orders?.length > 0 &&
             currentTabSelected === 'logisticOrders' && (
               <PreviousOrders
-                orders={logisticOrders.orders.filter((order: any) => !order?.expired).map((order: any) => ({ ...order, isLogistic: true }))}
+                orders={logisticOrders?.orders?.filter((order: any) => !order?.expired).map((order: any) => ({ ...order, isLogistic: true }))}
                 onNavigationRedirect={onNavigationRedirect}
                 getOrderStatus={getOrderStatus}
                 handleClickLogisticOrder={handleClickLogisticOrder}
@@ -528,13 +528,13 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
             (currentOrdersGroup?.error?.length ||
               currentOrdersGroup?.orders?.length === 0)) ||
             (currentTabSelected === 'logisticOrders' &&
-              (logisticOrders?.error?.length > 0 || logisticOrders?.orders?.length === 0))
+              (logisticOrders?.error?.length > 0 || logisticOrders?.orders?.length === 0 || !logisticOrders?.orders?.some(order => !order?.expired)))
           ) &&
             (
               <NotFoundSource
                 content={
                   ((currentTabSelected !== 'logisticOrders' && !currentOrdersGroup?.error?.length) ||
-                    (currentTabSelected === 'logisticOrders' && !logisticOrders?.error?.length))
+                    (currentTabSelected === 'logisticOrders' && (!logisticOrders?.error?.length || (logisticOrders?.orders?.length > 0 && !logisticOrders?.orders?.some(order => !order?.expired)))))
                     ? t('NO_RESULTS_FOUND', 'Sorry, no results found')
                     : currentOrdersGroup?.error?.[0]?.message ||
                     currentOrdersGroup?.error?.[0] ||

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

@@ -85,9 +85,9 @@ export const PreviousOrders = (props: any) => {
     <>
       {orders && orders?.length > 0 &&
         orders
-          .filter((order: any) => hash[order?.id] ? false : (hash[order?.id] = true))
-          .map((_order: any) => {
-            const order = _order?.isLogistic && !_order?.order_group ? _order?.order : _order
+          ?.filter((order: any) => hash[order?.id] ? false : (hash[order?.id] = true))
+          ?.map((_order: any) => {
+            const order = _order?.isLogistic && !_order?.order_group && isLogisticOrder ? _order?.order : _order
             return (
               <View
                 style={{
@@ -116,9 +116,9 @@ export const PreviousOrders = (props: any) => {
                         </Logo>
                       )}
                     <Information>
-                      {order?.order_group && order?.order_group_id && (
+                      {order?.order_group_id && (
                         <OText>
-                          <OText>{order?.order_group?.orders?.length} {t('ORDERS', 'Orders')}</OText>
+                          <OText>{(t('INVOICE_GROUP_NO', 'Group No.') + order?.order_group_id)}</OText>
                         </OText>
                       )}
                       {order.business?.name && (
@@ -140,7 +140,7 @@ export const PreviousOrders = (props: any) => {
                         numberOfLines={1}
                         adjustsFontSizeToFit
                         size={20}>
-                        {(order?.order_group && order?.order_group_id ? (t('INVOICE_GROUP_NO', 'Group No.') + order?.order_group_id) : (t('INVOICE_ORDER_NO', 'Order No.') + order.id)) + ' · '}
+                        {(order?.order_group_id && order?.order_group && isLogisticOrder ? `${order?.order_group?.orders?.length} ${t('ORDERS', 'Orders')}` : (t('INVOICE_ORDER_NO', 'Order No.') + order.id)) + ' · '}
                         {order?.delivery_datetime_utc
                           ? parseDate(order?.delivery_datetime_utc)
                           : parseDate(order?.delivery_datetime, { utc: false })}
@@ -171,26 +171,41 @@ export const PreviousOrders = (props: any) => {
                 </TouchableOpacity>
                 {isLogisticOrder && (
                   <AcceptOrRejectOrder>
-                    <OButton
-                      text={t('REJECT', 'Reject')}
-                      onClick={() => handleClickLogisticOrder(2, _order?.id)}
-                      bgColor={theme.colors.danger}
-                      borderColor={theme.colors.danger}
-                      imgRightSrc={null}
-                      style={{ borderRadius: 7, height: 40 }}
-                      parentStyle={{ width: '45%' }}
-                      textStyle={{ color: theme.colors.dangerText }}
-                    />
-                    <OButton
-                      text={t('ACCEPT', 'Accept')}
-                      onClick={() => handleClickLogisticOrder(1, _order?.id)}
-                      bgColor={theme.colors.successOrder}
-                      borderColor={theme.colors.successOrder}
-                      imgRightSrc={null}
-                      style={{ borderRadius: 7, height: 40 }}
-                      parentStyle={{ width: '45%' }}
-                      textStyle={{ color: theme.colors.successText }}
-                    />
+                    {order?.order_group_id && order?.order_group ? (
+                      <OButton
+                        text={t('VIEW_ORDER', 'View order')}
+                        onClick={() => handlePressOrder({ ...order, logistic_order_id: _order?.id })}
+                        bgColor={theme.colors.blueLight}
+                        borderColor={theme.colors.blueLight}
+                        imgRightSrc={null}
+                        style={{ borderRadius: 7, height: 40 }}
+                        parentStyle={{ width: '100%' }}
+                        textStyle={{ color: theme.colors.primary }}
+                      />
+                    ) : (
+                    <>
+                      <OButton
+                        text={t('REJECT', 'Reject')}
+                        onClick={() => handleClickLogisticOrder(2, _order?.id)}
+                        bgColor={theme.colors.danger}
+                        borderColor={theme.colors.danger}
+                        imgRightSrc={null}
+                        style={{ borderRadius: 7, height: 40 }}
+                        parentStyle={{ width: '45%' }}
+                        textStyle={{ color: theme.colors.dangerText }}
+                      />
+                      <OButton
+                        text={t('ACCEPT', 'Accept')}
+                        onClick={() => handleClickLogisticOrder(1, _order?.id)}
+                        bgColor={theme.colors.successOrder}
+                        borderColor={theme.colors.successOrder}
+                        imgRightSrc={null}
+                        style={{ borderRadius: 7, height: 40 }}
+                        parentStyle={{ width: '45%' }}
+                        textStyle={{ color: theme.colors.successText }}
+                      />
+                    </>
+                    )}
                   </AcceptOrRejectOrder>
                 )}
               </View>

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

@@ -172,24 +172,33 @@ export const ProductOptionsUI = (props: any) => {
 										</View>
 									</Placeholder>
 								) : (
-									<>
-										<OText style={{ flex: I18nManager.isRTL ? 0 : 1, ...theme.labels.large }}>{product?.name || productCart.name}</OText>
-										{/* <OText size={20} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText> */}
-									</>
+									<View style={{ flexDirection: 'column', width: '100%' }}>
+										<OText size={20} style={{ flex: I18nManager.isRTL ? 0 : 1, marginBottom: 10 }}>{product?.name || productCart.name}</OText>
+										<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+											{((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (product?.estimated_person)) && (
+												<OText size={14} style={{ marginBottom: 10, flex: I18nManager.isRTL ? 1 : 0 }} color={'#909BA9'}>
+													{
+														((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1'))
+														&& <>{t('SKU', 'Sku')}{' '}{product?.sku || productCart?.sku}</>
+													}
+													{product?.sku && product?.sku !== '-1' && product?.sku !== '1' && product?.estimated_person && (
+														<>&nbsp;&#183;&nbsp;</>
+													)}
+													{product?.estimated_person
+														&& <>{product?.estimated_person}{' '}{t('ESTIMATED_PERSONS', 'persons')}</>
+													}
+												</OText>
+											)}
+										</View>
+										<OText size={16} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
+									</View>
 								)}
 							</ProductTitle>
-							<ProductDescription>
-								<OText style={theme.labels.small as TextStyle} color={theme.colors.textSecondary}>{product?.description || productCart?.description}</OText>
-								{(
-									(product?.sku && product?.sku !== '-1' && product?.sku !== '1') ||
-									(productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1')
-								) && (
-										<>
-											<OText size={20}>{t('SKU', 'Sku')}</OText>
-											<OText>{product?.sku || productCart?.sku}</OText>
-										</>
-									)}
-							</ProductDescription>
+							{(product?.description || productCart?.description) && (
+								<ProductDescription>
+									<OText color={theme.colors.textSecondary}>{product?.description || productCart?.description}</OText>
+								</ProductDescription>
+							)}
 							{loading && !product ? (
 								<>
 									{[...Array(2)].map((item, i) => (
@@ -319,18 +328,18 @@ export const ProductOptionsUI = (props: any) => {
 
 					<View style={{ width: '100%' }}>
 						{/* {productCart && !isSoldOut && maxProductQuantity > 0 && auth && orderState.options?.address_id && ( */}
-							<OButton
-								onClick={() => handleSaveProduct()}
-								imgRightSrc=''
-								text={`${orderState.loading ? t('LOADING', 'Loading') : editMode ? t('UPDATE', 'Update') : t('ADD_TO_CART', 'Add to Cart')}`}
-								textSub={`${orderState.loading ? '' : productCart.total ? parsePrice(productCart?.total) : ''}`}
-								textStyle={{ color: saveErrors ? theme.colors.textSecondary : theme.colors.white, fontSize: 14, fontWeight: Platform.OS === 'ios' ? '600' : 'bold' }}
-								style={{
-									backgroundColor: saveErrors ? theme.colors.backgroundGray300 : theme.colors.primary,
-									borderWidth: 1, shadowOpacity: 0, height: 40,
-									borderColor: saveErrors ? theme.colors.backgroundGray300 : theme.colors.primary,
-								}}
-							/>
+						<OButton
+							onClick={() => handleSaveProduct()}
+							imgRightSrc=''
+							text={`${orderState.loading ? t('LOADING', 'Loading') : editMode ? t('UPDATE', 'Update') : t('ADD_TO_CART', 'Add to Cart')}`}
+							textSub={`${orderState.loading ? '' : productCart.total ? parsePrice(productCart?.total) : ''}`}
+							textStyle={{ color: saveErrors ? theme.colors.textSecondary : theme.colors.white, fontSize: 14, fontWeight: Platform.OS === 'ios' ? '600' : 'bold' }}
+							style={{
+								backgroundColor: saveErrors ? theme.colors.backgroundGray300 : theme.colors.primary,
+								borderWidth: 1, shadowOpacity: 0, height: 40,
+								borderColor: saveErrors ? theme.colors.backgroundGray300 : theme.colors.primary,
+							}}
+						/>
 						{/* )} */}
 						{auth && !orderState.options?.address_id && (
 							orderState.loading ? (

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

@@ -120,7 +120,7 @@ export const ProductOptionsUI = (props: any) => {
 									<ProductHeader
 										source={{ uri: product?.images || productCart?.images }}
 										resizeMode={'contain'}
-										style={{height: windowWidth, maxHeight: windowWidth}}
+										style={{ height: windowWidth, maxHeight: windowWidth }}
 									/>
 								</>
 							)}
@@ -135,22 +135,33 @@ export const ProductOptionsUI = (props: any) => {
 										</View>
 									</Placeholder>
 								) : (
-									<OText mBottom={7} style={{ flex: I18nManager.isRTL ? 0 : 1, ...theme.labels.subtitle, fontWeight: Platform.OS === 'ios' ? '600' : 'bold' }}>{product?.name || productCart.name}</OText>
+									<View style={{ flexDirection: 'column', width: '100%' }}>
+										<OText size={20} style={{ flex: I18nManager.isRTL ? 0 : 1, marginBottom: 10, fontWeight: Platform.OS === 'ios' ? '600' : 'bold' }}>{product?.name || productCart.name}</OText>
+										<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+											{((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (product?.estimated_person)) && (
+												<OText size={14} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={'#909BA9'} mBottom={7}>
+													{
+														((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1'))
+														&& <>{t('SKU', 'Sku')}{' '}{product?.sku || productCart?.sku}</>
+													}
+													{product?.sku && product?.sku !== '-1' && product?.sku !== '1' && product?.estimated_person && (
+														<>&nbsp;&#183;&nbsp;</>
+													)}
+													{product?.estimated_person
+														&& <>{product?.estimated_person}{' '}{t('ESTIMATED_PERSONS', 'persons')}</>
+													}
+												</OText>
+											)}
+										</View>
+										<OText size={16} mBottom={7} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
+									</View>
 								)}
 							</ProductTitle>
-							<ProductDescription>
-								<OText mBottom={7} style={{ ...theme.labels.small }} color={theme.colors.textSecondary}>{product?.description?.trim() || productCart?.description?.trim()}</OText>
-								<OText style={{ flex: I18nManager.isRTL ? 1 : 0, ...theme.labels.subtitle, fontWeight: Platform.OS === 'ios' ? '600' : 'bold' }} color={theme.colors.textPrimary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
-								{(
-									(product?.sku && product?.sku !== '-1' && product?.sku !== '1') ||
-									(productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1')
-								) && (
-										<>
-											<OText size={20}>{t('SKU', 'Sku')}</OText>
-											<OText>{product?.sku || productCart?.sku}</OText>
-										</>
-									)}
-							</ProductDescription>
+							{(product?.description || productCart?.description) && (
+								<ProductDescription>
+									<OText mBottom={7} style={{ ...theme.labels.small }} color={theme.colors.textSecondary}>{product?.description?.trim() || productCart?.description?.trim()}</OText>
+								</ProductDescription>
+							)}
 							<View style={{ height: 16, backgroundColor: theme.colors.secundary, marginHorizontal: -40, marginBottom: 20 }} />
 							{loading && !product ? (
 								<>

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

@@ -10,6 +10,7 @@ import {
 	OrderInformation,
 	BusinessInformation,
 	Price,
+	LoadMore
 } from './styles';
 import { View, StyleSheet } from 'react-native';
 import { getGoogleMapImage } from '../../utils';
@@ -113,6 +114,18 @@ export const ActiveOrders = (props: ActiveOrdersParams) => {
 					orders.map((order: any, index: any) => (
 						<Order key={order?.id || order?.uuid} order={order} index={index} />
 					))}
+				{pagination?.totalPages && pagination?.currentPage < pagination?.totalPages && (
+					<LoadMore>
+						<OButton
+							bgColor={theme.colors.white}
+							textStyle={{ color: theme.colors.primary, fontSize: 14 }}
+							text={t('LOAD_MORE_ORDERS', 'Load more orders')}
+							borderColor={theme.colors.primary}
+							onClick={loadMoreOrders}
+							style={styles.loadMoreButton}
+						/>
+					</LoadMore>
+				)}
 			</ActiveOrdersContainer>
 			<View
 				style={{
@@ -140,4 +153,10 @@ const styles = StyleSheet.create({
 		alignItems: 'center',
 		minWidth: 230,
 	},
+	loadMoreButton: {
+		width: 200,
+		height: 46,
+		marginLeft: 'auto',
+		marginRight: 'auto',
+	},
 });

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

@@ -42,3 +42,8 @@ export const Price = styled.View`
   margin-left: 10px;
   width: 30%;
 `
+export const LoadMore = styled.View`
+  flex-direction: row;
+  justify-content: center;
+  margin-top: 10px;
+`

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

@@ -3,9 +3,9 @@ import styled, { css } from 'styled-components/native';
 export const Card = styled.TouchableOpacity`
   margin-vertical: 20px;
   border-radius: 7.6px;
-  flex: 1;
   width: 100%;
-`;
+  position: relative;
+`
 
 export const BusinessHero = styled.View`
   position: relative;
@@ -40,9 +40,9 @@ export const Metadata = styled.View`
 `;
 
 export const BusinessState = styled.View`
-    position: absolute;
-	 top: 13px;
-	 end: 18px;
+  position: absolute;
+	top: 13px;
+	end: 18px;
 `
 
 export const BusinessLogo = styled.View`

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

@@ -29,7 +29,7 @@ export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
 	const [, t] = useLanguage();
 
 	const theme = useTheme();
-  const [isOpenAllCategories, setIsOpenAllCategories] = useState(false)
+	const [isOpenAllCategories, setIsOpenAllCategories] = useState(false)
 
 	const renderTypes = ({ item }: any) => {
 		return (
@@ -110,17 +110,17 @@ export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
 				entireModal
 			>
 				<ScrollView style={styles.allCategoriesContainer}>
-          <OText
-            size={20}
-            mBottom={30}
-            color={theme.colors.textSecondary}
-            style={{ paddingHorizontal: 10 }}
-          >
-            {t('ALL_CATEGORIES', 'All categories')}
-          </OText>
-          <View style={styles.allCategoriesWrapper}>
-            {typesState?.types.map((item: any) => (
-              <TouchableOpacity
+					<OText
+						size={20}
+						mBottom={30}
+						color={theme.colors.textSecondary}
+						style={{ paddingHorizontal: 10 }}
+					>
+						{t('ALL_CATEGORIES', 'All categories')}
+					</OText>
+					<View style={styles.allCategoriesWrapper}>
+						{typesState?.types.map((item: any) => (
+							<TouchableOpacity
 								key={item.id}
 								style={styles.categoryStyle}
 								onPress={() => {
@@ -149,9 +149,9 @@ export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
 									{t(`BUSINESS_TYPE_${item.name.replace(/\s/g, '_').toUpperCase()}`, item.name)}
 								</OText>
 							</TouchableOpacity>
-            ))}
-          </View>
-        </ScrollView>
+						))}
+					</View>
+				</ScrollView>
 			</OModal>
 		</>
 	);
@@ -178,7 +178,7 @@ const styles = StyleSheet.create({
 		marginHorizontal: 10,
 		marginBottom: 40
 	},
-	allCategoriesContainer : {
+	allCategoriesContainer: {
 		paddingHorizontal: 30,
 		paddingVertical: 30
 	},

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

@@ -5,6 +5,7 @@ export const BCContainer = styled.View`
   width: 100%;
   justify-content: flex-start;
   text-align: center;
+  min-height: 45px; 
 `
 
 export const BusinessCategories = styled.View`

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

@@ -281,15 +281,14 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					/>
 				)}
 				{businessesList.businesses?.map(
-					(business: any) =>
-						!business.featured && (
-							<BusinessController
-								key={business.id}
-								business={business}
-								handleCustomClick={handleBusinessClick}
-								orderType={orderState?.options?.type}
-							/>
-						),
+					(business: any) => (
+						<BusinessController
+							key={business.id}
+							business={business}
+							handleCustomClick={handleBusinessClick}
+							orderType={orderState?.options?.type}
+						/>
+					)
 				)}
 				{businessesList.loading && (
 					<>

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

@@ -71,5 +71,6 @@ export const FeaturedWrapper = styled.View`
 
 export const OrderProgressWrapper = styled.View`
   margin-top: 37px;
+  margin-bottom: 20px;
 	padding-horizontal: 40px;
 `

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

@@ -13,7 +13,7 @@ import Swiper from 'react-native-swiper'
 import FastImage from 'react-native-fast-image';
 import IconAntDesign from 'react-native-vector-icons/AntDesign';
 
-import { View, TouchableOpacity, StyleSheet, Dimensions, Platform, AppRegistry } from 'react-native';
+import { View, TouchableOpacity, StyleSheet, Dimensions, Platform, AppRegistry, I18nManager } from 'react-native';
 
 import {
 	ProductHeader,
@@ -116,7 +116,7 @@ export const ProductOptionsUI = (props: any) => {
 		slide1: {
 			flex: 1,
 		},
-		mainSwiper : {
+		mainSwiper: {
 			height: 258,
 		},
 		swiperButton: {
@@ -196,7 +196,7 @@ export const ProductOptionsUI = (props: any) => {
 	useEffect(() => {
 		const productImgList: any = []
 		product?.images && productImgList.push(product.images)
-		if(product?.gallery && product?.gallery.length > 0) {
+		if (product?.gallery && product?.gallery.length > 0) {
 			for (const img of product?.gallery) {
 				productImgList.push(img.file)
 			}
@@ -296,7 +296,7 @@ export const ProductOptionsUI = (props: any) => {
 													name="caretleft"
 													color={theme.colors.white}
 													size={13}
-													// style={styles.starIcon}
+												// style={styles.starIcon}
 												/>
 											</View>
 										}
@@ -306,7 +306,7 @@ export const ProductOptionsUI = (props: any) => {
 													name="caretright"
 													color={theme.colors.white}
 													size={13}
-													// style={styles.starIcon}
+												// style={styles.starIcon}
 												/>
 											</View>
 										}
@@ -387,6 +387,20 @@ export const ProductOptionsUI = (props: any) => {
 											style={{ flex: 1, marginBottom: 5 }}>
 											{product?.name || productCart.name}
 										</OText>
+										{((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (product?.estimated_person)) && (
+											<OText size={14} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={'#909BA9'} mBottom={7}>
+												{
+													((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1'))
+													&& <>{t('SKU', 'Sku')}{' '}{product?.sku || productCart?.sku}</>
+												}
+												{product?.sku && product?.sku !== '-1' && product?.sku !== '1' && product?.estimated_person && (
+													<>&nbsp;&#183;&nbsp;</>
+												)}
+												{product?.estimated_person
+													&& <>{product?.estimated_person}{' '}{t('ESTIMATED_PERSONS', 'persons')}</>
+												}
+											</OText>
+										)}
 										<OText size={16} lineHeight={24} color={theme.colors.textNormal}>
 											{productCart.price ? parsePrice(productCart.price) : ''}
 										</OText>
@@ -397,17 +411,6 @@ export const ProductOptionsUI = (props: any) => {
 								<OText color={theme.colors.textSecondary} size={12} lineHeight={18}>
 									{product?.description || productCart?.description}
 								</OText>
-								{((product?.sku &&
-									product?.sku !== '-1' &&
-									product?.sku !== '1') ||
-									(productCart?.sku &&
-										productCart?.sku !== '-1' &&
-										productCart?.sku !== '1')) && (
-										<>
-											<OText size={16}>{t('SKU', 'Sku')}</OText>
-											<OText>{product?.sku || productCart?.sku}</OText>
-										</>
-									)}
 							</ProductDescription>
 							{loading && !product ? (
 								<>
@@ -455,25 +458,25 @@ export const ProductOptionsUI = (props: any) => {
 										style={{ marginBottom: 20 }}
 										contentContainerStyle={{ paddingHorizontal: 33 }}
 									>
-									<TouchableOpacity
-										key={`eopt_all_0`}
-										onPress={() => setSelectedOpt(0)}
-										style={[
-											styles.extraItem,
-											{
-												borderBottomColor: selOpt == 0 ? theme.colors.textNormal : theme.colors.border,
-											},
-										]}>
-										<OText
-											color={selOpt == 0 ? theme.colors.textNormal : theme.colors.textSecondary}
-											size={selOpt == 0 ? 14 : 12}
-											weight={selOpt == 0 ? '600' : 'normal'}>
-											{t('ALL', 'All')}
-										</OText>
-									</TouchableOpacity>
-									{product?.extras.map((extra: any) => 					
-										<ExtraOptions key={extra.id} options={extra.options} />
-									)}
+										<TouchableOpacity
+											key={`eopt_all_0`}
+											onPress={() => setSelectedOpt(0)}
+											style={[
+												styles.extraItem,
+												{
+													borderBottomColor: selOpt == 0 ? theme.colors.textNormal : theme.colors.border,
+												},
+											]}>
+											<OText
+												color={selOpt == 0 ? theme.colors.textNormal : theme.colors.textSecondary}
+												size={selOpt == 0 ? 14 : 12}
+												weight={selOpt == 0 ? '600' : 'normal'}>
+												{t('ALL', 'All')}
+											</OText>
+										</TouchableOpacity>
+										{product?.extras.map((extra: any) =>
+											<ExtraOptions key={extra.id} options={extra.options} />
+										)}
 									</ExtraOptionWrap>
 
 									{selOpt == 0 ? (
@@ -778,7 +781,7 @@ export const ProductOptionsUI = (props: any) => {
 									isDisabled
 									text={t('LOADING', 'Loading')}
 									imgRightSrc=""
-									textStyle={{fontSize: 10}}
+									textStyle={{ fontSize: 10 }}
 								/>
 							) : (
 								<OButton onClick={navigation.navigate('AddressList')} />

package/themes/single-business/src/components/ProductForm/index.tsx

@@ -9,7 +9,7 @@ import {
 import { useTheme } from 'styled-components/native';
 import { ProductIngredient } from '../ProductIngredient';
 import { ProductOption } from '../ProductOption';
-import { View, TouchableOpacity, StyleSheet, Dimensions, Platform, useWindowDimensions, Keyboard, KeyboardAvoidingView } from 'react-native';
+import { View, TouchableOpacity, StyleSheet, Dimensions, Platform, useWindowDimensions, Keyboard, KeyboardAvoidingView, I18nManager } from 'react-native';
 
 import {
   ProductHeader,
@@ -312,6 +312,20 @@ export const ProductOptionsUI = (props: any) => {
                       style={{ flex: 1, marginBottom: 5 }}>
                       {product?.name || productCart.name}
                     </OText>
+                    {((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (product?.estimated_person)) && (
+											<OText size={14} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={'#909BA9'} mBottom={7}>
+												{
+													((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1'))
+													&& <>{t('SKU', 'Sku')}{' '}{product?.sku || productCart?.sku}</>
+												}
+												{product?.sku && product?.sku !== '-1' && product?.sku !== '1' && product?.estimated_person && (
+													<>&nbsp;&#183;&nbsp;</>
+												)}
+												{product?.estimated_person
+													&& <>{product?.estimated_person}{' '}{t('ESTIMATED_PERSONS', 'persons')}</>
+												}
+											</OText>
+										)}
                     <OText size={16} lineHeight={24} color={theme.colors.textNormal}>
                       {productCart.price ? parsePrice(productCart.price) : ''}
                     </OText>
@@ -322,17 +336,6 @@ export const ProductOptionsUI = (props: any) => {
                 <OText color={theme.colors.textSecondary} size={12} lineHeight={18}>
                   {product?.description || productCart?.description}
                 </OText>
-                {((product?.sku &&
-                  product?.sku !== '-1' &&
-                  product?.sku !== '1') ||
-                  (productCart?.sku &&
-                    productCart?.sku !== '-1' &&
-                    productCart?.sku !== '1')) && (
-                    <>
-                      <OText size={16}>{t('SKU', 'Sku')}</OText>
-                      <OText>{product?.sku || productCart?.sku}</OText>
-                    </>
-                  )}
               </ProductDescription>
               {loading && !product ? (
                 <>