ordering-ui-react-native 0.14.26 → 0.14.30

package/package.json

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

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

@@ -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/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>
 
@@ -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

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