ordering-ui-react-native 0.14.25 → 0.14.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.14.25",
+  "version": "0.14.29",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -70,6 +70,7 @@
     "react-native-bootsplash": "^3.2.3",
     "react-native-calendar-picker": "^7.1.2",
     "react-native-calendar-strip": "^2.2.5",
+    "react-native-color-matrix-image-filters": "^5.2.10",
     "react-native-country-picker-modal": "^2.0.0",
     "react-native-credit-card-input": "^0.4.1",
     "react-native-document-picker": "^5.2.0",

package/src/components/Checkout/index.tsx

@@ -150,10 +150,10 @@ const CheckoutUI = (props: any) => {
   const isPreOrderSetting = configs?.preorder_status_enabled?.value === '1'
   const cartsWithProducts = carts && Object.values(carts).filter((cart: any) => cart.products.length) || null
 
-  const deliveryOptions = instructionsOptions?.result && instructionsOptions?.result?.filter((option: any) => option?.enabled)?.map(option => {
+  const deliveryOptions = instructionsOptions?.result && instructionsOptions?.result?.filter((option: any) => option?.enabled)?.map((option: any) => {
     return {
-      value: option?.id, key: option?.id, label: option?.name
-    }
+			value: option?.id, key: option?.id, label: t(option?.name.toUpperCase().replace(/\s/g, '_'), option?.name) 
+		}
   })
 
   const handlePlaceOrder = () => {

package/src/components/Messages/index.tsx

@@ -45,6 +45,7 @@ const imgOptions = {
   includeBase64: true,
   selectionLimit: 0
 }
+const filterSpecialStatus = ['prepared_in', 'delivered_in']
 
 const MessagesUI = (props: MessagesParams) => {
   const {
@@ -118,7 +119,11 @@ const MessagesUI = (props: MessagesParams) => {
   const messageConsole = (message: any) => {
     return message.change?.attribute !== 'driver_id'
       ?
-      `${t('ORDER', 'Order')} ${t(message.change.attribute.toUpperCase(), message.change.attribute.replace('_', ' '))} ${t('CHANGED_FROM', 'Changed from')} ${message.change.old !== null && t(ORDER_STATUS[parseInt(message.change.old, 10)])} ${t('TO', 'to')} ${t(ORDER_STATUS[parseInt(message.change.new, 10)])}`
+      `${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.new
         ?
         `${message.driver?.name} ${message.driver?.lastname !== null ? message.driver.lastname : ''} ${t('WAS_ASSIGNED_AS_DRIVER', 'Was assigned as driver')} ${message.comment ? message.comment.length : ''}`

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

@@ -9,16 +9,19 @@ import {
 	BIInfo,
 	BIContentInfo,
 	BITotal,
-	BIActions
+	BIActions,
+	PriceContainer
 } from './styles';
-import { OAlert, OIcon, OText } from '../shared';
+import { OAlert, OButton, OIcon, OText } from '../shared';
 
 export const BusinessItemAccordion = (props: any) => {
 	const {
 		cart,
 		moment,
-    singleBusiness,
-		handleClearProducts
+		singleBusiness,
+		handleClearProducts,
+		handleClickCheckout,
+		checkoutButtonDisabled
 	} = props
 
 	const [orderState] = useOrder();
@@ -41,7 +44,7 @@ export const BusinessItemAccordion = (props: any) => {
 	}, [orderState?.carts])
 
 	return (
-		<BIContainer isClosed={isClosed}>
+		<BIContainer isClosed={isClosed} checkoutVisible={!isActive && !isClosed && !!isProducts && !checkoutButtonDisabled}>
 			<BIHeader
 				isClosed={isClosed}
 				onPress={() => !isClosed ? setActiveState(!isActive) : isClosed}
@@ -71,37 +74,39 @@ export const BusinessItemAccordion = (props: any) => {
 							{props.onNavigationRedirect && !isClosed && (
 								<>
 									<TouchableOpacity onPress={() => props.onNavigationRedirect('Business', { store: cart?.business?.slug })}>
-										<OText color={theme.colors.textSecondary} size={12} lineHeight={18} style={{ textDecorationLine: 'underline' }}>{t('GO_TO_STORE', 'Go to store')}</OText>
+										<OText color={theme.colors.primary} size={12} lineHeight={18} style={{ textDecorationLine: 'underline' }}>{t('GO_TO_STORE', 'Go to store')}</OText>
 									</TouchableOpacity>
-									<OText color={theme.colors.textSecondary}>{' \u2022 '}</OText>
 								</>
 							)}
 							{!isCartPending && !isClosed && (
-								<OAlert
-									title={t('DELETE_CART', 'Delete Cart')}
-									message={t('QUESTION_DELETE_CART', 'Are you sure to you wants delete the selected cart')}
-									onAccept={() => handleClearProducts()}
-								>
-									<OText size={12} lineHeight={18} color={theme.colors.textSecondary} style={{ textDecorationLine: 'underline' }}>{t('CLEAR_CART', 'Clear cart')}</OText>
-								</OAlert>
+								<>
+									<OText color={theme.colors.textSecondary}>{' \u2022 '}</OText>
+									<OAlert
+										title={t('DELETE_CART', 'Delete Cart')}
+										message={t('QUESTION_DELETE_CART', 'Are you sure to you wants delete the selected cart')}
+										onAccept={() => handleClearProducts()}
+									>
+										<OText size={12} lineHeight={18} color={theme.colors.primary} style={{ textDecorationLine: 'underline' }}>{t('CLEAR_CART', 'Clear cart')}</OText>
+									</OAlert>
+								</>
+							)}
+							{props.handleChangeStore && (
+								<>
+									<OText color={theme.colors.textSecondary}>{' \u2022 '}</OText>
+									<TouchableOpacity
+										onPress={props.handleChangeStore}
+									>
+										<OText
+											size={12}
+											lineHeight={18}
+											color={theme.colors.textSecondary}
+											style={{ textDecorationLine: 'underline' }}
+										>
+											{t('CHANGE_STORE', 'Change store')}
+										</OText>
+									</TouchableOpacity>
+								</>
 							)}
-              {props.handleChangeStore && (
-                <>
-                  <OText color={theme.colors.textSecondary}>{' \u2022 '}</OText>
-                  <TouchableOpacity
-                    onPress={props.handleChangeStore}
-                  >
-                    <OText
-                      size={12}
-                      lineHeight={18}
-                      color={theme.colors.textSecondary}
-                      style={{ textDecorationLine: 'underline' }}
-                    >
-                      {t('CHANGE_STORE', 'Change store')}
-                    </OText>
-                  </TouchableOpacity>
-                </>
-              )}
 						</View>
 					</BIContentInfo>
 				</BIInfo>
@@ -134,6 +139,19 @@ export const BusinessItemAccordion = (props: any) => {
 					)}
 				</BIActions>
 			</BIHeader>
+			{!isActive && !isClosed && !!isProducts && !checkoutButtonDisabled && (
+				<PriceContainer>
+					<OText>{parsePrice(cart?.total)}</OText>
+					<OButton
+						onClick={handleClickCheckout}
+						textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
+						style={{ width: 160, flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
+						text={t('CHECKOUT', 'Checkout')}
+						bgColor={(cart?.subtotal < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
+						borderColor={theme.colors.primary}
+					/>
+				</PriceContainer>
+			)}
 
 			<BIContent style={{ display: isActive ? 'flex' : 'none' }}>
 				{props.children}

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

@@ -52,3 +52,10 @@ export const BIActions = styled.View`
   align-items: center;
   justify-content: flex-end;
 `
+
+export const PriceContainer = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  flex: 1
+`

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

@@ -42,7 +42,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
   return (
     <ProductsContainer>
       {category.id &&
-        categoryState.products?.map((product: any) => (
+        categoryState.products?.sort((a: any, b: any) => a.rank - b.rank).map((product: any) => (
           <SingleProductCard
             key={'prod_' + product.id}
             isSoldOut={product.inventoried && !product.quantity}
@@ -63,7 +63,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
               {t('FEATURED', 'Featured')}
             </OText>
             <>
-              {categoryState.products?.map(
+              {categoryState.products?.sort((a: any, b: any) => a.rank - b.rank).map(
                 (product: any, i: any) =>
                   product.featured && (
                     <SingleProductCard
@@ -110,7 +110,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                       </OText>
                     </View>
                     <>
-                      {products.map((product: any, i: any) => (
+                      {products.sort((a: any, b: any) => a.rank - b.rank).map((product: any, i: any) => (
                         <SingleProductCard
                           key={i}
                           isSoldOut={product.inventoried && !product.quantity}

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

@@ -145,6 +145,8 @@ const CartUI = (props: any) => {
         handleCartOpen={handleCartOpen}
         onNavigationRedirect={props.onNavigationRedirect}
         handleChangeStore={props.isFranchiseApp ? () => setOpenChangeStore(true) : null}
+        handleClickCheckout={() => setOpenUpselling(true)}
+        checkoutButtonDisabled={(openUpselling && !canOpenUpselling) || cart?.subtotal < cart?.minimum || !cart?.valid_address}
       >
         {cart?.products?.length > 0 && cart?.products.map((product: any) => (
           <ProductItemAccordion

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

@@ -137,7 +137,7 @@ const CheckoutUI = (props: any) => {
 
 	const deliveryOptions = instructionsOptions?.result && instructionsOptions?.result?.filter((option: any) => option?.enabled)?.map((option: any) => {
 		return {
-			value: option?.id, key: option?.id, label: option?.name
+			value: option?.id, key: option?.id, label: t(option?.name.toUpperCase().replace(/\s/g, '_'), option?.name) 
 		}
 	})
 

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

@@ -12,6 +12,34 @@ import { MessagesParams } from '../../types'
 import { useWindowDimensions } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
+const ORDER_STATUS: any = {
+	0: 'ORDER_STATUS_PENDING',
+	1: 'ORDERS_COMPLETED',
+	2: 'ORDER_REJECTED',
+	3: 'ORDER_STATUS_IN_BUSINESS',
+	4: 'ORDER_READY',
+	5: 'ORDER_REJECTED_RESTAURANT',
+	6: 'ORDER_STATUS_CANCELLEDBYDRIVER',
+	7: 'ORDER_STATUS_ACCEPTEDBYRESTAURANT',
+	8: 'ORDER_CONFIRMED_ACCEPTED_BY_DRIVER',
+	9: 'ORDER_PICKUP_COMPLETED_BY_DRIVER',
+	10: 'ORDER_PICKUP_FAILED_BY_DRIVER',
+	11: 'ORDER_DELIVERY_COMPLETED_BY_DRIVER',
+	12: 'ORDER_DELIVERY_FAILED_BY_DRIVER',
+	13: 'PREORDER',
+	14: 'ORDER_NOT_READY',
+	15: 'ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER',
+	16: 'ORDER_STATUS_CANCELLED_BY_CUSTOMER',
+	17: 'ORDER_NOT_PICKEDUP_BY_CUSTOMER',
+	18: 'ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS',
+	19: 'ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER',
+	20: 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS',
+	21: 'ORDER_CUSTOMER_ARRIVED_BUSINESS',
+}
+
+const filterSpecialStatus = ['prepared_in', 'delivered_in']
+
+
 const MessagesUI = (props: MessagesParams) => {
 	const {
 		type,
@@ -94,58 +122,6 @@ const MessagesUI = (props: MessagesParams) => {
 		});
 	};
 
-	const getStatus = (status: number) => {
-
-		switch (status) {
-			case 0:
-				return 'ORDER_STATUS_PENDING'
-			case 1:
-				return 'ORDERS_COMPLETED'
-			case 2:
-				return 'ORDER_REJECTED'
-			case 3:
-				return 'ORDER_STATUS_IN_BUSINESS'
-			case 4:
-				return 'ORDER_READY'
-			case 5:
-				return 'ORDER_REJECTED_RESTAURANT'
-			case 6:
-				return 'ORDER_STATUS_CANCELLEDBYDRIVER'
-			case 7:
-				return 'ORDER_STATUS_ACCEPTEDBYRESTAURANT'
-			case 8:
-				return 'ORDER_CONFIRMED_ACCEPTED_BY_DRIVER'
-			case 9:
-				return 'ORDER_PICKUP_COMPLETED_BY_DRIVER'
-			case 10:
-				return 'ORDER_PICKUP_FAILED_BY_DRIVER'
-			case 11:
-				return 'ORDER_DELIVERY_COMPLETED_BY_DRIVER'
-			case 12:
-				return 'ORDER_DELIVERY_FAILED_BY_DRIVER'
-			case 13:
-				return 'PREORDER'
-			case 14:
-				return 'ORDER_NOT_READY'
-			case 15:
-				return 'ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER'
-			case 16:
-				return 'ORDER_STATUS_CANCELLED_BY_CUSTOMER'
-			case 17:
-				return 'ORDER_NOT_PICKEDUP_BY_CUSTOMER'
-			case 18:
-				return 'ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS'
-			case 19:
-				return 'ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER'
-			case 20:
-				return 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS'
-			case 21:
-				return 'ORDER_CUSTOMER_ARRIVED_BUSINESS'
-			default:
-				return status
-		}
-	}
-
 	const onSubmit = (values: any) => {
 		handleSend && handleSend()
 		setImage && setImage(null)
@@ -154,14 +130,18 @@ const MessagesUI = (props: MessagesParams) => {
 
 	const messageConsole = (message: any) => {
 		return message.change?.attribute !== 'driver_id'
+		  ?
+		  `${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.new
 			?
-			`${t('ORDER', 'Order')} ${message.change.attribute} ${t('CHANGED_FROM', 'Changed from')} ${message.change.old !== null && t(getStatus(parseInt(message.change.old, 10)))} ${t('TO', 'to')} ${t(getStatus(parseInt(message.change.new, 10)))}`
-			: message.change.new
-				?
-				`${message.driver?.name} ${message.driver?.lastname !== null ? message.driver.lastname : ''} ${t('WAS_ASSIGNED_AS_DRIVER', 'Was assigned as driver')} ${message.comment ? message.comment.length : ''}`
-				:
-				`${t('DRIVER_UNASSIGNED', 'Driver unassigned')}`
-	}
+			`${message.driver?.name} ${message.driver?.lastname !== null ? message.driver.lastname : ''} ${t('WAS_ASSIGNED_AS_DRIVER', 'Was assigned as driver')} ${message.comment ? message.comment.length : ''}`
+			:
+			`${t('DRIVER_UNASSIGNED', 'Driver unassigned')}`
+	  }
 
 	useEffect(() => {
 		let newMessages: Array<any> = []

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

@@ -894,6 +894,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
           orderId={order?.id}
           messages={messages}
           order={order}
+          business={openModalForBusiness}
+          driver={openModalForDriver}
           setMessages={setMessages}
           onClose={handleCloseModal}
         />

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

@@ -12,6 +12,9 @@ import { ProductOption } from '../ProductOption';
 import Swiper from 'react-native-swiper'
 import FastImage from 'react-native-fast-image';
 import IconAntDesign from 'react-native-vector-icons/AntDesign';
+import {
+	Grayscale
+} from 'react-native-color-matrix-image-filters'
 
 import { View, TouchableOpacity, StyleSheet, Dimensions, Platform, AppRegistry, I18nManager } from 'react-native';
 
@@ -28,7 +31,9 @@ import {
 	WrapperSubOption,
 	ProductComment,
 	ProductActions,
-	ExtraOptionWrap
+	ExtraOptionWrap,
+	WeightUnitSwitch,
+	WeightUnitItem
 } from './styles';
 import { OButton, OIcon, OInput, OText } from '../shared';
 import { ScrollView } from 'react-native-gesture-handler';
@@ -127,6 +132,9 @@ export const ProductOptionsUI = (props: any) => {
 			height: 32,
 			borderRadius: 16,
 			backgroundColor: 'rgba(208,208,208,0.5)'
+		},
+		unitItem: {
+			fontSize: 12
 		}
 	});
 
@@ -141,6 +149,12 @@ export const ProductOptionsUI = (props: any) => {
 	const { top, bottom } = useSafeAreaInsets();
 	const { height } = useWindowDimensions();
 	const [selOpt, setSelectedOpt] = useState(0);
+	const [isHaveWeight, setIsHaveWeight] = useState(false)
+	const [qtyBy, setQtyBy] = useState({
+		weight_unit: false,
+		pieces: true
+	})
+	const [pricePerWeightUnit, setPricePerWeightUnit] = useState(null)
 
 	const swiperRef: any = useRef(null)
 
@@ -149,9 +163,12 @@ export const ProductOptionsUI = (props: any) => {
 		if (errors[`id:${id}`]) {
 			bgColor = 'rgba(255, 0, 0, 0.05)';
 		}
-		if (isSoldOut || maxProductQuantity <= 0) {
+		if (maxProductQuantity <= 0) {
 			bgColor = 'hsl(0, 0%, 72%)';
 		}
+		if (isSoldOut) {
+			bgColor = theme.colors.white;
+		}
 		return bgColor;
 	};
 
@@ -193,6 +210,10 @@ export const ProductOptionsUI = (props: any) => {
 		navigation.navigate('Login');
 	};
 
+	const handleSwitchQtyUnit = (val: string) => {
+		setQtyBy({ [val]: true, [!val]: false })
+	}
+
 	useEffect(() => {
 		const productImgList: any = []
 		product?.images && productImgList.push(product.images)
@@ -202,6 +223,11 @@ export const ProductOptionsUI = (props: any) => {
 			}
 		}
 		setGallery(productImgList)
+
+		if (product?.weight && product?.weight_unit) {
+			setIsHaveWeight(true)
+			setPricePerWeightUnit(product?.price / product?.weight)
+		}
 	}, [product])
 
 	const saveErrors =
@@ -316,13 +342,15 @@ export const ProductOptionsUI = (props: any) => {
 												style={styles.slide1}
 												key={i}
 											>
-												<FastImage
-													style={{ height: '100%' }}
-													source={{
-														uri: optimizeImage(img, 'h_258,c_limit'),
-														priority: FastImage.priority.normal,
-													}}
-												/>
+												<Grayscale amount={isSoldOut ? 1 : 0}>
+													<FastImage
+														style={{ height: '100%' }}
+														source={{
+															uri: optimizeImage(img, 'h_258,c_limit'),
+															priority: FastImage.priority.normal,
+														}}
+													/>
+												</Grayscale>
 											</View>
 										))}
 									</Swiper>
@@ -346,17 +374,19 @@ export const ProductOptionsUI = (props: any) => {
 														opacity: index === thumbsSwiper ? 1 : 0.8
 													}}
 												>
-													<OIcon
-														url={img}
-														style={{
-															borderColor: theme.colors.lightGray,
-															borderRadius: 8,
-															minHeight: '100%'
-														}}
-														width={56}
-														height={56}
-														cover
-													/>
+													<Grayscale amount={isSoldOut ? 1 : 0}>
+														<OIcon
+															url={img}
+															style={{
+																borderColor: theme.colors.lightGray,
+																borderRadius: 8,
+																minHeight: '100%'
+															}}
+															width={56}
+															height={56}
+															cover
+														/>
+													</Grayscale>
 												</View>
 											</TouchableOpacity>
 
@@ -401,9 +431,13 @@ export const ProductOptionsUI = (props: any) => {
 												}
 											</OText>
 										)}
-										<OText size={16} lineHeight={24} color={theme.colors.textNormal}>
-											{productCart.price ? parsePrice(productCart.price) : ''}
-										</OText>
+										{isHaveWeight ? (
+											<OText size={16} lineHeight={24} color={theme.colors.textNormal}>{parsePrice(pricePerWeightUnit)} / {product?.weight_unit}</OText>
+										) : (
+											<OText size={16} lineHeight={24} color={theme.colors.textNormal}>
+												{productCart.price ? parsePrice(productCart.price) : ''}
+											</OText>
+										)}
 									</>
 								)}
 							</ProductTitle>
@@ -488,13 +522,7 @@ export const ProductOptionsUI = (props: any) => {
 															{t('INGREDIENTS', 'Ingredients')}
 														</OText>
 													</SectionTitle>
-													<WrapperIngredients
-														style={{
-															backgroundColor:
-																isSoldOut || maxProductQuantity <= 0
-																	? 'hsl(0, 0%, 72%)'
-																	: theme.colors.white,
-														}}>
+													<WrapperIngredients>
 														{product?.ingredients.map((ingredient: any) => (
 															<ProductIngredient
 																key={ingredient.id}
@@ -503,6 +531,7 @@ export const ProductOptionsUI = (props: any) => {
 																	productCart.ingredients[`id:${ingredient.id}`]
 																}
 																onChange={handleChangeIngredientState}
+																isSoldOut={isSoldOut}
 															/>
 														))}
 													</WrapperIngredients>
@@ -540,6 +569,7 @@ export const ProductOptionsUI = (props: any) => {
 																					return (
 																						<ProductOptionSubOption
 																							key={suboption.id}
+																							isSoldOut={isSoldOut}
 																							onChange={
 																								handleChangeSuboptionState
 																							}
@@ -573,13 +603,7 @@ export const ProductOptionsUI = (props: any) => {
 															{t('INGREDIENTS', 'Ingredients')}
 														</OText>
 													</SectionTitle>
-													<WrapperIngredients
-														style={{
-															backgroundColor:
-																isSoldOut || maxProductQuantity <= 0
-																	? 'hsl(0, 0%, 72%)'
-																	: theme.colors.white,
-														}}>
+													<WrapperIngredients>
 														{product?.ingredients.map((ingredient: any) => (
 															<ProductIngredient
 																key={ingredient.id}
@@ -588,6 +612,7 @@ export const ProductOptionsUI = (props: any) => {
 																	productCart.ingredients[`id:${ingredient.id}`]
 																}
 																onChange={handleChangeIngredientState}
+																isSoldOut={isSoldOut}
 															/>
 														))}
 													</WrapperIngredients>
@@ -720,8 +745,10 @@ export const ProductOptionsUI = (props: any) => {
 							<OText
 								size={12}
 								lineHeight={18}
-								style={{ minWidth: 29, textAlign: 'center' }}>
-								{productCart.quantity}
+								style={{ minWidth: 29, textAlign: 'center' }}
+							>
+								{qtyBy?.pieces && productCart.quantity}
+								{qtyBy?.weight_unit && productCart.quantity * product?.weight}
 							</OText>
 							<TouchableOpacity
 								onPress={increment}
@@ -742,6 +769,36 @@ export const ProductOptionsUI = (props: any) => {
 									}
 								/>
 							</TouchableOpacity>
+							<WeightUnitSwitch>
+								<TouchableOpacity
+									onPress={() => handleSwitchQtyUnit('pieces')}
+								>
+									<WeightUnitItem active={qtyBy?.pieces}>
+										<OText
+											size={12}
+											lineHeight={18}
+											color={qtyBy?.pieces ? theme.colors.primary : theme.colors.textNormal}
+										>
+											{t('PIECES', 'pieces')}
+										</OText>
+									</WeightUnitItem>
+								</TouchableOpacity>
+								<View style={{ alignItems: 'flex-start' }}>
+									<TouchableOpacity
+										onPress={() => handleSwitchQtyUnit('weight_unit')}
+									>
+										<WeightUnitItem active={qtyBy?.weight_unit}>
+											<OText
+												size={12}
+												lineHeight={18}
+												color={qtyBy?.weight_unit ? theme.colors.primary : theme.colors.textNormal}
+											>
+												{product?.weight_unit}
+											</OText>
+										</WeightUnitItem>
+									</TouchableOpacity>
+								</View>
+							</WeightUnitSwitch>
 						</View>
 					)}
 					<View

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

@@ -78,3 +78,15 @@ export const ProductActions = styled.View`
 export const ExtraOptionWrap = styled.ScrollView`
 	margin-horizontal: -40px;
 `;
+
+export const WeightUnitSwitch = styled.View`
+  margin-left: 10px;
+`
+export const WeightUnitItem = styled.View`
+  padding: 1px 5px;
+  border-radius: 4px;
+  
+  ${({ active }: any) => active && css`
+    background-color: ${(props: any) => props.theme.colors.primary}20;
+  `}
+`

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

@@ -10,18 +10,19 @@ const ProductIngredientUI = (props: any) => {
 	const {
 		state,
 		ingredient,
-		toggleSelect
+		toggleSelect,
+		isSoldOut
 	} = props
 
 	const theme = useTheme();
 
 	return (
-		<Container onPress={() => toggleSelect()}>
+		<Container disabled={isSoldOut} onPress={() => toggleSelect()}>
 			<View>
-				{state?.selected ? (
+				{state?.selected && !isSoldOut ? (
 					<MaterialCommunityIcon name='checkbox-marked' color={theme.colors.primary} size={24} />
 				) : (
-					<MaterialCommunityIcon name='checkbox-blank-outline' color={theme.colors.backgroundDark} size={24} />
+					<MaterialCommunityIcon name='checkbox-blank-outline' color='#cbcbcb' size={24} />
 				)}
 			</View>
 			<OText mLeft={10}>

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

@@ -53,8 +53,8 @@ export const ProductOptionSubOptionUI = (props: any) => {
 	const price = option?.with_half_option && suboption?.half_price && state.position !== 'whole' ? suboption?.half_price : suboption?.price
 
 	return (
-		<Container disabled={disabled}>
-			<IconControl onPress={() => handleSuboptionClick()}>
+		<Container>
+			<IconControl disabled={disabled} onPress={() => handleSuboptionClick()}>
 				{((option?.min === 0 && option?.max === 1) || option?.max > 1) ? (
 					state?.selected ? (
 						<OIcon src={theme.images.general.check_act} color={theme.colors.primary} width={16} />
@@ -73,30 +73,30 @@ export const ProductOptionSubOptionUI = (props: any) => {
 				</OText>
 			</IconControl>
 			{showMessage && <OText size={10} mLeft={4} mRight={4} style={{ flex: 1, textAlign: 'center' }} color={theme.colors.primary}>{`${t('OPTIONS_MAX_LIMIT', 'Maximum options to choose')}: ${option?.max}`}</OText>}
-			{option?.allow_suboption_quantity && (
+			{option?.allow_suboption_quantity && state?.selected && (
 				<QuantityControl>
-					<Checkbox disabled={state.quantity === 0} onPress={decrement}>
+					<Checkbox disabled={disabled || state.quantity === 0} onPress={decrement}>
 						<OIcon
 							src={theme.images.general.minus}
 							width={16}
-							color={state.quantity === 0 ? theme.colors.disabled : theme.colors.primary}
+							color={state.quantity === 0 || disabled ? theme.colors.disabled : theme.colors.primary}
 						/>
 					</Checkbox>
 					<OText mLeft={5} mRight={5}>
 						{state.quantity}
 					</OText>
-					<Checkbox disabled={disableIncrement} onPress={increment}>
+					<Checkbox disabled={disabled || disableIncrement} onPress={increment}>
 						<OIcon
 							src={theme.images.general.plus}
 							width={16}
-							color={disableIncrement ? theme.colors.disabled : theme.colors.primary}
+							color={disableIncrement || disabled ? theme.colors.disabled : theme.colors.primary}
 						/>
 					</Checkbox>
 				</QuantityControl>
 			)}
-			{option?.with_half_option && (
+			{option?.with_half_option && state?.selected && (
 				<PositionControl>
-					<Circle onPress={() => changePosition('left')}>
+					<Circle disabled={disabled} onPress={() => changePosition('left')}>
 						<OIcon
 							src={theme.images.general.half_l}
 							color={state.selected && state.position === 'left' ? theme.colors.primary : '#cbcbcb'}
@@ -104,14 +104,14 @@ export const ProductOptionSubOptionUI = (props: any) => {
 							style={styles.inverse}
 						/>
 					</Circle>
-					<Circle onPress={() => changePosition('whole')}>
+					<Circle disabled={disabled} onPress={() => changePosition('whole')}>
 						<OIcon
 							src={theme.images.general.half_f}
 							color={state.selected && state.position === 'whole' ? theme.colors.primary : '#cbcbcb'}
 							width={16}
 						/>
 					</Circle>
-					<Circle onPress={() => changePosition('right')}>
+					<Circle disabled={disabled} onPress={() => changePosition('right')}>
 						<OIcon
 							src={theme.images.general.half_r}
 							color={state.selected && state.position === 'right' ? theme.colors.primary : '#cbcbcb'}