npm - ordering-ui-react-native - Versions diffs - 0.14.27 → 0.14.31 - Mend

ordering-ui-react-native 0.14.27 → 0.14.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.14.27",
+  "version": "0.14.31",
   "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/ProductForm/index.tsx CHANGED Viewed

@@ -132,7 +132,18 @@ export const ProductOptionsUI = (props: any) => {
                 ) : (
                   <>
                     <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', marginTop: 15 }}>
+                        <OText size={20} style={{ flex: I18nManager.isRTL ? 0 : 1, marginBottom: 10 }}>{product?.name || productCart.name}{' '}</OText>
+                        {product?.calories && (
+                          <OText size={16} style={styles.caloriesStyle}>{product?.calories} cal</OText>
+                        )}
+                      </View>
+                      <View style={{ flexDirection: 'row', marginBottom: 10 }}>
+                        <OText size={16} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
+                        {product?.offer_price && (
+                          <OText style={styles.regularPriceStyle}>{parsePrice(product?.offer_price)}</OText>
+                        )}
+                      </View>
                       {(product?.estimated_person || (product?.sku && product?.sku !== '-1' && product?.sku !== '1')) && (
                         <OText size={14} style={{ flex: I18nManager.isRTL ? 1 : 0, marginBottom: 10 }} color={'#909BA9'}>
                           {
@@ -147,12 +158,6 @@ export const ProductOptionsUI = (props: any) => {
                           }
                         </OText>
                       )}
-                      <View style={{ flexDirection: 'row', marginBottom: 10}}>
-                        <OText size={16} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
-                        {product?.offer_price && (
-                          <OText style={styles.regularPriceStyle}>{parsePrice(product?.offer_price)}</OText>
-                        )}
-                      </View>
                     </View>
                   </>
                 )}
@@ -162,17 +167,17 @@ export const ProductOptionsUI = (props: any) => {
               </ProductDescription>
               {loading && !product ? (
                 <>
-                  {[...Array(2)].map((item,i) => (
-                  <Placeholder key={i} style={{marginBottom: 20}} Animation={Fade}>
-                    <PlaceholderLine height={40} style={{ flex: 1, marginTop: 10 }} />
-                    {[...Array(3)].map((item,i) => (
-                      <View key={i} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-                        <PlaceholderLine height={30} width={10} style={{marginBottom: 20}} />
-                        <PlaceholderLine height={30} width={50} style={{marginBottom: 20}} />
-                        <PlaceholderLine height={30} width={30} style={{marginBottom: 20}} />
-                      </View>
-                    ))}
-                  </Placeholder>
+                  {[...Array(2)].map((item, i) => (
+                    <Placeholder key={i} style={{ marginBottom: 20 }} Animation={Fade}>
+                      <PlaceholderLine height={40} style={{ flex: 1, marginTop: 10 }} />
+                      {[...Array(3)].map((item, i) => (
+                        <View key={i} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                          <PlaceholderLine height={30} width={10} style={{ marginBottom: 20 }} />
+                          <PlaceholderLine height={30} width={50} style={{ marginBottom: 20 }} />
+                          <PlaceholderLine height={30} width={30} style={{ marginBottom: 20 }} />
+                        </View>
+                      ))}
+                    </Placeholder>
                   ))}
                 </>
               ) : (
@@ -221,7 +226,7 @@ export const ProductOptionsUI = (props: any) => {
                                           state={currentState}
                                           disabled={isSoldOut || maxProductQuantity <= 0}
                                         />
-                                      ): null
+                                      ) : null
                                     })
                                   }
                                 </WrapperSubOption>
@@ -383,6 +388,9 @@ const styles = StyleSheet.create({
     textDecorationLine: 'line-through',
     marginLeft: 7,
     marginRight: 7
+  },
+  caloriesStyle: {
+    color: '#808080'
   }
 })

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

@@ -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 CHANGED Viewed

@@ -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/BusinessPreorder/index.tsx CHANGED Viewed

@@ -82,7 +82,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
       paddingBottom: 15,
       borderBottomWidth: 1,
       borderColor: theme.colors.backgroundGray200,
-      height: 90
+      height: 100
     },
     calendarHeaderContainer: {
       flex: 1,
@@ -400,6 +400,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
                 iconStyle={{borderWidth: 1}}
                 selectedDate={selectDate}
                 datesWhitelist={datesWhitelist}
+                dayContainerStyle={{height: 40}}
                 disabledDateNameStyle={styles.disabledDateName}
                 disabledDateNumberStyle={styles.disabledDateNumber}
                 disabledDateOpacity={0.6}

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

@@ -42,14 +42,14 @@ 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}
             product={product}
             businessId={businessId}
             onProductClick={() => onProductClick(product)}
-            productAddedToCart={currentCart?.products?.find((Cproduct: any) => Cproduct.id === product.id)}
+            productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
           />
         ))}
@@ -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
@@ -72,7 +72,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                       product={product}
                       businessId={businessId}
                       onProductClick={onProductClick}
-                      productAddedToCart={currentCart?.products?.find((Cproduct: any) => Cproduct.id === product.id)}
+                      productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
                     />
                   ),
               )}
@@ -110,14 +110,14 @@ 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}
                           businessId={businessId}
                           product={product}
                           onProductClick={onProductClick}
-                          productAddedToCart={currentCart?.products?.find((Cproduct: any) => Cproduct.id === product.id)}
+                          productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
                         />
                       ))}
                     </>

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

@@ -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/DriverTips/index.tsx CHANGED Viewed

@@ -44,7 +44,7 @@ const DriverTipsUI = (props: any) => {
 			borderWidth: 1,
 			borderColor: theme.colors.inputDisabled,
 			marginRight: 10,
-			height: 44
+			height: 50
 		}
 	})
@@ -63,7 +63,7 @@ const DriverTipsUI = (props: any) => {
 	return (
 		<DTContainer>
 			<DTWrapperTips>
-				{driverTipsOptions.map((option: any, i: number) => (
+				{driverTipsOptions.map((option: any, i: number) => (
 					<TouchableOpacity
 						key={i}
 						onPress={() => handlerChangeOption(option)}
@@ -72,7 +72,7 @@ const DriverTipsUI = (props: any) => {
 							style={style.circle}
 							isActive={option === optionSelected}
 						>
-							<OText size={13} color={option === optionSelected ? '#FFF' : theme.colors.textSecondary}>
+							<OText size={12} numberOfLines={1} color={option === optionSelected ? '#FFF' : theme.colors.textSecondary}>
 								{`${isFixedPrice ? parsePrice(option) : `${option}%`}`}
 							</OText>
 						</DTCard>

package/themes/original/src/components/DriverTips/styles.tsx CHANGED Viewed

@@ -15,7 +15,7 @@ export const DTWrapperTips = styled.View`
   width: 100%;
   justify-content: space-evenly;
   align-items: center;
-  flex-wrap: nowrap;
+  flex-wrap: wrap;
 `
 export const DTCard = styled.View`
@@ -24,10 +24,10 @@ export const DTCard = styled.View`
   align-items: center;
   border: 1px solid ${(props: any) => props.isActive ? props.theme.colors.primary : props.theme.colors.border};
   text-transform: capitalize;
-  min-height: 48px;
-  min-width: 48px;
-  max-width: 48px;
-  max-height: 48px;
+  min-height: 55px;
+  min-width: 55px;
+  max-width: 55px;
+  max-height: 55px;
   margin-right: 10px;
   margin-left: 10px;
   margin-top: 10px;

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

@@ -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>
@@ -380,13 +410,30 @@ export const ProductOptionsUI = (props: any) => {
 									</Placeholder>
 								) : (
 									<>
-										<OText
-											size={20}
-											lineHeight={30}
-											weight={'600'}
-											style={{ flex: 1, marginBottom: 5 }}>
-											{product?.name || productCart.name}
-										</OText>
+										<View style={{ flexDirection: 'row' }}>
+											<OText
+												size={20}
+												lineHeight={30}
+												weight={'600'}
+												style={{ flex: 1, marginBottom: 10 }}>
+												{product?.name || productCart.name}
+											</OText>
+											{product?.calories && (
+												<OText size={16} style={{ color: '#808080' }}>{product?.calories} cal
+												</OText>
+											)}
+										</View>
+										<View style={{ flexDirection: 'row', marginBottom: 10 }}>
+											<OText size={16} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
+											{product?.offer_price && (
+												<OText style={{    fontSize: 14,
+													color: '#808080',
+													textDecorationLine: 'line-through',
+													marginLeft: 7,
+													marginRight: 7
+												}}>{parsePrice(product?.offer_price)}</OText>
+											)}
+										</View>
 										{((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (product?.estimated_person)) && (
 											<OText size={14} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={'#909BA9'} mBottom={7}>
 												{
@@ -401,9 +448,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 +539,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 +548,7 @@ export const ProductOptionsUI = (props: any) => {
 																	productCart.ingredients[`id:${ingredient.id}`]
 																}
 																onChange={handleChangeIngredientState}
+																isSoldOut={isSoldOut}
 															/>
 														))}
 													</WrapperIngredients>
@@ -540,6 +586,7 @@ export const ProductOptionsUI = (props: any) => {
 																					return (
 																						<ProductOptionSubOption
 																							key={suboption.id}
+																							isSoldOut={isSoldOut}
 																							onChange={
 																								handleChangeSuboptionState
 																							}
@@ -573,13 +620,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 +629,7 @@ export const ProductOptionsUI = (props: any) => {
 																	productCart.ingredients[`id:${ingredient.id}`]
 																}
 																onChange={handleChangeIngredientState}
+																isSoldOut={isSoldOut}
 															/>
 														))}
 													</WrapperIngredients>
@@ -720,8 +762,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 +786,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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/ProductItemAccordion/index.tsx CHANGED Viewed

@@ -212,8 +212,8 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 				</View>
 				{((isCartProduct && !isCartPending && product?.valid_menu && !product?.valid_quantity) ||
 					(!product?.valid_menu && isCartProduct && !isCartPending)) && (
-						<View style={{ alignItems: 'flex-end', width: '100%' }}>
-							<OText size={14} color={theme.colors.red} style={{ textAlign: 'right', bottom: 20 }}>
+						<View style={{ alignItems: 'flex-end', width: '100%', }}>
+							<OText size={14} color={theme.colors.red} style={{ textAlign: 'right', marginTop: 5 }}>
 								{t('NOT_AVAILABLE', 'Not available')}
 							</OText>
 						</View>

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

@@ -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'}

package/themes/original/src/components/SingleProductCard/index.tsx CHANGED Viewed

@@ -13,7 +13,7 @@ import { OText, OIcon } from '../shared';
 import FastImage from 'react-native-fast-image'
 export const SingleProductCard = (props: SingleProductCardParams) => {
-	const { businessId, product, isSoldOut, onProductClick, productAddedToCart } = props;
+	const { businessId, product, isSoldOut, onProductClick, productAddedToCartLength } = props;
 	const theme = useTheme();
@@ -90,7 +90,6 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 		maxCartProductConfig,
 		maxCartProductInventory,
 	);
 	return (
 		<CardContainer
 			style={[
@@ -98,11 +97,11 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 				(isSoldOut || maxProductQuantity <= 0) && styles.soldOutBackgroundStyle,
 			]}
 			onPress={() => onProductClick?.(product)}>
-				{productAddedToCart && productAddedToCart?.quantity > 0 && (
+				{productAddedToCartLength > 0 && (
 					<QuantityContainer style={[styles.quantityContainer, {
 						transform: [{ translateX: 10 }, { translateY: -10 }],
 					}]}>
-						<OText color={theme.colors.white}>{productAddedToCart?.quantity}</OText>
+						<OText size={12} color={theme.colors.white}>{productAddedToCartLength.toString()}</OText>
 					</QuantityContainer>
 				)}
 			<CardInfo>

package/themes/original/src/components/SingleProductCard/styles.tsx CHANGED Viewed

@@ -24,4 +24,6 @@ export const SoldOut = styled.View`
 export const QuantityContainer = styled.View`
   background: ${({ theme } : any) => theme.colors.primary};
-`
+  align-items: center;
+  justify-content: center;
+`

package/themes/original/src/types/index.tsx CHANGED Viewed

@@ -221,7 +221,7 @@ export interface SingleProductCardParams {
 	product: any;
 	isSoldOut: boolean;
 	onProductClick: any;
-	productAddedToCart?: any
+	productAddedToCartLength: number
 }
 export interface BusinessInformationParams {
 	navigation?: any,