ordering-ui-react-native 0.17.57 → 0.17.58-release

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

@@ -18,8 +18,11 @@ import {
 	useOrder,
 	useUtils,
 	ToastType,
-	useToast
+	useToast,
+	useConfig,
+	useEvent
 } from 'ordering-components/native';
+import uuid from 'react-native-uuid';
 import { useTheme } from 'styled-components/native';
 import { ProductIngredient } from '../ProductIngredient';
 import { ProductOption } from '../ProductOption';
@@ -27,6 +30,7 @@ import Swiper from 'react-native-swiper'
 import FastImage from 'react-native-fast-image';
 import IconAntDesign from 'react-native-vector-icons/AntDesign';
 import YoutubePlayer from "react-native-youtube-iframe"
+import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 
 import {
 	WrapHeader,
@@ -50,6 +54,8 @@ import { ScrollView } from 'react-native-gesture-handler';
 import { ProductOptionSubOption } from '../ProductOptionSubOption';
 import { NotFoundSource } from '../NotFoundSource';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
+import NavBar from '../NavBar';
+import { orderTypeList, vibrateApp } from '../../utils';
 const windowWidth = Dimensions.get('window').width;
 
 export const ProductOptionsUI = (props: any) => {
@@ -69,11 +75,16 @@ export const ProductOptionsUI = (props: any) => {
 		handleChangeSuboptionState,
 		handleChangeCommentState,
 		productObject,
-		productAddedToCartLength
+		productAddedToCartLength,
+		actionStatus,
+		handleCreateGuestUser
 	} = props;
 
 	const theme = useTheme();
 	const [, { showToast }] = useToast()
+	const [events] = useEvent()
+
+	const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
 
 	const styles = StyleSheet.create({
 		mainContainer: {
@@ -163,6 +174,10 @@ export const ProductOptionsUI = (props: any) => {
 			justifyContent: 'space-between',
 			width: '100%',
 			marginTop: 10
+		},
+		wrapperNavbar: {
+			paddingHorizontal: 40,
+			paddingTop: 0,
 		}
 	});
 
@@ -170,6 +185,7 @@ export const ProductOptionsUI = (props: any) => {
 	const [, t] = useLanguage();
 	const [orderState] = useOrder();
 	const [{ auth }] = useSession();
+	const [{ configs }] = useConfig()
 	const { product, loading, error } = productObject;
 	const [gallery, setGallery] = useState([])
 	const [thumbsSwiper, setThumbsSwiper] = useState(0)
@@ -189,6 +205,19 @@ export const ProductOptionsUI = (props: any) => {
 	const [summaryRefHeight, setSummaryRefHeight] = useState(0)
 	const [isScrollAvailable, setIsScrollAvailable] = useState(null)
 	const [editionsLayoutY, setEditionsLayoutY] = useState(null)
+	const [viewedProduct, setViewedProduct] = useState<any>(null)
+	const [showTitle, setShowTitle] = useState(false)
+
+	const guestCheckoutEnabled = configs?.guest_checkout_enabled?.value === '1'
+	const orderTypeEnabled = !orderTypeList[orderState?.options?.type - 1] || configs?.allowed_order_types_guest_checkout?.value?.includes(orderTypeList[orderState?.options?.type - 1])
+
+	const vibrateApp = (impact?: string) => {
+		const options = {
+			enableVibrateFallback: true,
+			ignoreAndroidSystemSettings: false
+		};
+		ReactNativeHapticFeedback.trigger(impact || "impactLight", options);
+	}
 
 	const isError = (id: number) => {
 		let bgColor = theme.colors.white;
@@ -205,11 +234,12 @@ export const ProductOptionsUI = (props: any) => {
 	};
 
 	const handleSaveProduct = () => {
+		vibrateApp()
 		if (!productCart.quantity) {
 			showToast(ToastType.Error, t('VALIDATION_ERROR_REQUIRED', 'The quantity field is required').replace('_attribute_', t('PRODUCT_POTIONS_QUANTITY', 'Quantity')))
 			return
 		}
-		const isErrors = Object.values(errors).length > 0;
+		const isErrors = Object.values(errors)?.length > 0;
 		if (!isErrors) {
 			handleSave && handleSave();
 			return;
@@ -228,7 +258,7 @@ export const ProductOptionsUI = (props: any) => {
 	};
 
 	const handleChangeMainIndex = (index: number) => {
-		if (index < 0 || index > gallery.length - 1) {
+		if (index < 0 || index > gallery?.length - 1) {
 			setThumbsSwiper(0)
 			return
 		}
@@ -271,7 +301,7 @@ export const ProductOptionsUI = (props: any) => {
 	}
 
 	const scrollDown = (id: any) => {
-		const isErrors = Object.values(errors).length > 0
+		const isErrors = Object.values(errors)?.length > 0
 		if (!isErrors) {
 			return
 		}
@@ -285,6 +315,11 @@ export const ProductOptionsUI = (props: any) => {
 		}
 	}
 
+	const handleUpdateGuest = () => {
+		const guestToken = uuid.v4()
+		if (guestToken) handleCreateGuestUser({ guest_token: guestToken })
+	}
+
 	const handleOnLayout = (event: any, optionId: any) => {
 		const _optionLayout = { ...optionLayout }
 		const optionKey = 'id:' + optionId
@@ -295,9 +330,9 @@ export const ProductOptionsUI = (props: any) => {
 	const saveErrors =
 		orderState.loading ||
 		maxProductQuantity === 0 ||
-		Object.keys(errors).length > 0;
+		Object.keys(errors)?.length > 0;
+
 
-	
 	const ExtraOptions = ({ eID, options }: any) => (
 		<>
 			{options.map(({ id, name, respect_to, suboptions }: any) => (
@@ -337,7 +372,7 @@ export const ProductOptionsUI = (props: any) => {
 	);
 
 	const handleScroll = ({ nativeEvent: { contentOffset, layoutMeasurement } }: any) => {
-
+		setShowTitle(contentOffset.y > 30)
 		const _topOption = Object.keys(optionLayout).find(((option: any) => Math.abs(contentOffset?.y - layoutMeasurement?.height - optionLayout[option]?.y) < 20))
 		if (_topOption) {
 			const _topOptionId = Number(_topOption.replace('id:', ''))
@@ -358,15 +393,18 @@ export const ProductOptionsUI = (props: any) => {
 	useEffect(() => {
 		const imageList: any = []
 		const videoList: any = []
-		product?.images?.length > 0 ? imageList.push(product.images) : imageList.push(theme?.images?.dummies?.product)
-		if (product?.gallery && product?.gallery.length > 0) {
+		imageList.push(product?.images?.length > 0
+			? product.images
+			: theme?.images?.dummies?.product)
+
+		if (product?.gallery && product?.gallery?.length > 0) {
 			for (const img of product?.gallery) {
 				if (img?.file) {
 					imageList.push(img?.file)
 				}
 				if (img?.video) {
 					const keys = img?.video.split('/')
-					let _videoId = keys[keys.length - 1]
+					let _videoId = keys[keys?.length - 1]
 
 					if (_videoId.includes('watch')) {
 						const __url = _videoId.split('=')[1]
@@ -381,7 +419,7 @@ export const ProductOptionsUI = (props: any) => {
 					} else if (_videoId.search(/\?/i) >= 0) {
 						_videoId = _videoId.split('?')[0]
 					}
-					if ((_videoId.length === 11)) {
+					if ((_videoId?.length === 11)) {
 						videoList.push(_videoId)
 					}
 				}
@@ -460,9 +498,22 @@ export const ProductOptionsUI = (props: any) => {
 							height: 44,
 							borderColor: theme.colors.primary,
 							backgroundColor: theme.colors.white,
+							paddingLeft: 0,
+							paddingRight: 0
 						}}
 					/>
 				)}
+				{!auth && guestCheckoutEnabled && orderTypeEnabled && (
+					<TouchableOpacity style={{ marginTop: 10 }} onPress={handleUpdateGuest}>
+						{actionStatus?.loading ? (
+							<Placeholder Animation={Fade}>
+								<PlaceholderLine width={60} height={20} />
+							</Placeholder>
+						) : (
+							<OText color={theme.colors.primary} size={13}>{t('WITH_GUEST_USER', 'With Guest user')}</OText>
+						)}
+					</TouchableOpacity>
+				)}
 			</View>
 		)
 	}
@@ -476,14 +527,34 @@ export const ProductOptionsUI = (props: any) => {
 		}
 	}, [])
 
+	useEffect(() => {
+		if (!product?.id || product?.id === viewedProduct?.id) return
+		setViewedProduct(product)
+		events.emit('product_viewed', product)
+	}, [product?.id, viewedProduct])
 
 	return (
 		<SafeAreaView style={{ flex: 1 }}>
-			<TopHeader>
-				<TopActions onPress={() => handleGoBack()}>
-					<IconAntDesign name='arrowleft' size={26} />
-				</TopActions>
-			</TopHeader>
+			<View style={styles.wrapperNavbar}>
+				<TopHeader>
+					<>
+						<TopActions onPress={() => handleGoBack()}>
+							<OIcon src={theme.images.general.arrow_left} color={theme.colors.textNormal} />
+						</TopActions>
+						{showTitle && (
+							<OText
+								size={16}
+								style={{ flex: 1, textAlign: 'center' }}
+								weight={Platform.OS === 'ios' ? '600' : 'bold'}
+								numberOfLines={2}
+								ellipsizeMode='tail'
+							>
+								{product?.name}
+							</OText>
+						)}
+					</>
+				</TopHeader>
+			</View>
 			{!error && (
 				<ScrollView
 					ref={scrollViewRef}
@@ -532,14 +603,14 @@ export const ProductOptionsUI = (props: any) => {
 										</View>
 									}
 								>
-									{gallery && gallery.length > 0 && gallery.map((img, i) => (
+									{gallery && gallery?.length > 0 && gallery.map((img, i) => (
 										<View
 											style={styles.slide1}
 											key={i}
 										>
-											{String(img).includes('image') || typeof img === 'number' ? (
+											{(String(img).includes('http') || typeof img === 'number') ? (
 												<FastImage
-													style={{ height: '100%', opacity: isSoldOut ? 0.5 : 1, aspectRatio: 3 / 2 }}
+													style={{ height: '100%', opacity: isSoldOut ? 0.5 : 1, aspectRatio: 16 / 9 }}
 													source={typeof img !== 'number' ? {
 														uri: optimizeImage(img, 'h_1024,c_limit'),
 														priority: FastImage.priority.normal,
@@ -548,7 +619,8 @@ export const ProductOptionsUI = (props: any) => {
 											) : (
 												<>
 													<YoutubePlayer
-														height={300}
+														height={'100%'}
+														width={'100%'}
 														play={playing}
 														videoId={img}
 														onChangeState={onStateChange}
@@ -566,7 +638,7 @@ export const ProductOptionsUI = (props: any) => {
 										paddingVertical: 15
 									}}
 								>
-									{gallery.length > 0 && gallery.map((img, index) => (
+									{gallery?.length > 1 && gallery.map((img, index) => (
 										<TouchableOpacity
 											key={index}
 											onPress={() => handleClickThumb(index)}
@@ -579,7 +651,7 @@ export const ProductOptionsUI = (props: any) => {
 													opacity: index === thumbsSwiper ? 1 : 0.8
 												}}
 											>
-												{String(img).includes('image') ? (
+												{String(img).includes('http') ? (
 													<OIcon
 														url={img}
 														style={{
@@ -594,7 +666,7 @@ export const ProductOptionsUI = (props: any) => {
 													/>
 												) : (
 													<OIcon
-														url={'http://img.youtube.com/vi/' + img + '/0.jpg'}
+														url={'https://img.youtube.com/vi/' + img + '/0.jpg'}
 														style={{
 															borderColor: theme.colors.lightGray,
 															borderRadius: 8,
@@ -614,7 +686,10 @@ export const ProductOptionsUI = (props: any) => {
 							</>
 						)}
 					</WrapHeader>
-					<ProductSummary onLayout={(event: any) => setSummaryRefHeight(event.nativeEvent.layout?.height)}>
+					<ProductSummary
+						ph={isChewLayout ? 20 : 40}
+						onLayout={(event: any) => setSummaryRefHeight(event.nativeEvent.layout?.height)}
+					>
 						<ProductTitle>
 							{loading && !product ? (
 								<Placeholder Animation={Fade}>
@@ -714,11 +789,11 @@ export const ProductOptionsUI = (props: any) => {
 								marginBottom: 20,
 								borderBottomWidth: 1,
 								borderBottomColor: theme.colors.border,
-								marginHorizontal: 30,
+								marginHorizontal: isChewLayout ? 20 : 30,
 								backgroundColor: theme.colors.backgroundPage,
 							}}
 						>
-							{product?.ingredients.length > 0 && (
+							{product?.ingredients?.length > 0 && (
 								<TouchableOpacity
 									key={`eopt_key_01`}
 									onPress={() => {
@@ -743,7 +818,7 @@ export const ProductOptionsUI = (props: any) => {
 									</OText>
 								</TouchableOpacity>
 							)}
-							{product?.extras.map((extra: any) =>
+							{product?.extras?.map((extra: any) =>
 								<ExtraOptions key={extra.id} options={extra.options} />
 							)}
 						</ExtraOptionWrap>
@@ -788,12 +863,13 @@ export const ProductOptionsUI = (props: any) => {
 						</>
 					) : (
 						<ProductEditions
+							style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}
 							onLayout={(event: any) => {
 								setEditionsLayoutY(event.nativeEvent.layout?.y)
 							}}
 						>
 							<>
-								{product?.ingredients.length > 0 && (
+								{product?.ingredients?.length > 0 && (
 									<View style={styles.optionContainer} onLayout={(event: any) => handleOnLayout(event, 0)}>
 										<SectionTitle>
 											<OText size={16}>
@@ -815,8 +891,8 @@ export const ProductOptionsUI = (props: any) => {
 										</WrapperIngredients>
 									</View>
 								)}
-								{product?.extras.sort((a: any, b: any) => a.rank - b.rank).map((extra: any) =>
-									extra.options.sort((a: any, b: any) => a.rank - b.rank).map((option: any) => {
+								{product?.extras?.sort((a: any, b: any) => a.rank - b.rank).map((extra: any) =>
+									extra.options?.sort((a: any, b: any) => a.rank - b.rank).map((option: any) => {
 										const currentState =
 											productCart.options[`id:${option.id}`] || {};
 										return (
@@ -832,7 +908,7 @@ export const ProductOptionsUI = (props: any) => {
 																	backgroundColor: isError(option.id),
 																	borderRadius: 7.6
 																}}>
-																{option.suboptions.sort((a: any, b: any) => a.rank - b.rank).map(
+																{option?.suboptions?.sort((a: any, b: any) => a.rank - b.rank).map(
 																	(suboption: any) => {
 																		const currentState =
 																			productCart.options[
@@ -897,7 +973,7 @@ export const ProductOptionsUI = (props: any) => {
 							)}
 						</ProductEditions>
 					)}
-					{!!error && error.length > 0 && (
+					{!!error && error?.length > 0 && (
 						<NotFoundSource content={error[0]?.message || error[0]} />
 					)}
 				</ScrollView>

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

@@ -8,8 +8,8 @@ export const WrapHeader = styled.View`
 export const TopActions = styled.TouchableOpacity`
 	height: 60px;
 	justify-content: center;
-  padding-horizontal: 30px;
-  width: 100px;
+  min-width: 30px;
+  padding-right: 15px;
 `;
 
 export const TopHeader = styled.View`
@@ -44,12 +44,10 @@ export const ProductTitle = styled.View`
   padding-bottom: 7px;
 `
 
-export const ProductDescription = styled.View`
-  margin-bottom: 20px;
-`
+export const ProductDescription = styled.View``
 
 export const ProductEditions = styled.View`
-  padding: 0 40px;
+  padding-vertical: 0;
 `
 
 export const SectionTitle = styled.View`
@@ -96,7 +94,7 @@ export const WeightUnitItem = styled.View`
   `}
 `
 export const ProductSummary = styled.View`
-  padding: 26px 40px;
+  padding: 26px ${(props: any) => props.ph}px 0;
   position: relative;
   background-color: white;
   z-index: 100;

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

@@ -27,6 +27,7 @@ import { ProductItemAccordionParams } from '../../types'
 export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 
 	const {
+		isDisabledEdit,
 		isCartPending,
 		isCartProduct,
 		product,
@@ -76,6 +77,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 	const [isServiceOpen, setIsServiceOpen] = useState(false)
 	// const [setHeight, setHeightState] = useState({ height: new Animated.Value(0) })
 	// const [setRotate, setRotateState] = useState({ angle: new Animated.Value(0) })
+	const [productQuantity, setProductQuantity] = useState(product.quantity.toString())
 
 	const productInfo = () => {
 		if (isCartProduct) {
@@ -106,19 +108,20 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 	/* const toggleAccordion = () => {
 		if ((!product?.valid_menu && isCartProduct)) return
 		if (isActive) {
-		  Animated.timing(setHeight.height, {
+			Animated.timing(setHeight.height, {
 			 toValue: 100,
 			 duration: 500,
 			 easing: Easing.linear,
 			 useNativeDriver: false,
-		  }).start()
+			}).start()
 		} else {
-		  setHeightState({height: new Animated.Value(0)})
+			setHeightState({height: new Animated.Value(0)})
 		}
 	 }*/
 
 	const handleChangeQuantity = (value: string) => {
 		if (!orderState.loading) {
+			setProductQuantity(value)
 			if (parseInt(value) === 0) {
 				onDeleteProduct && onDeleteProduct(product)
 			} else {
@@ -133,7 +136,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 	}
 
 	/*useEffect(() => {
-	  toggleAccordion()
+		toggleAccordion()
 	}, [isActive])*/
 
 	const productOptions = getProductMax && [...Array(getProductMax(product) + 1),].map((_: any, opt: number) => {
@@ -203,12 +206,12 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 								</View>
 							) : (
 								<>
-									{isCartProduct && !isCartPending && getProductMax && (
+									{!isDisabledEdit && isCartProduct && !isCartPending && getProductMax && (
 										<ProductInfo>
 											<RNPickerSelect
 												items={productOptions}
 												onValueChange={handleChangeQuantity}
-												value={product.quantity.toString()}
+												value={productQuantity}
 												style={pickerStyle}
 												useNativeAndroidPickerStyle={false}
 												placeholder={{}}
@@ -225,23 +228,23 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 										</ProductQuantity>
 									)}
 									<View style={{ flex: 1 }}>
-										<OText size={12} lineHeight={18} weight={'400'}>{product.name}</OText>
+										<OText size={12} lineHeight={18} weight={'400'} mLeft={8}>{product.name}</OText>
 									</View>
 								</>
 							)}
 							<View style={{ display: 'flex', flexDirection: 'column', flex: 1, alignItems: 'flex-end', maxWidth: 100 }}>
 								<View style={{ flexDirection: 'row' }}>
 									<OText size={12} lineHeight={18} weight={'400'}>{parsePrice(product.total || product.price)}</OText>
-									{(productInfo().ingredients.length > 0 || productInfo().options.length > 0 || product.comment) && (
+									{(productInfo().ingredients.length > 0 || productInfo().options.length > 0 || !!product.comment) && (
 										<MaterialCommunityIcon name='chevron-down' size={18} />
 									)}
 								</View>
-								<View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start' }}>
-									{onEditProduct && isCartProduct && !isCartPending && product?.valid_menu && (
-										<TouchableOpacity onPress={() => handleEditProduct(product)} style={{ marginEnd: 7 }}>
-											<OIcon
-												src={theme.images.general.pencil}
-												width={20}
+								<View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', height: 20 }}>
+									{!isDisabledEdit && onEditProduct && isCartProduct && !isCartPending && product?.valid_menu && (
+										<TouchableOpacity onPress={() => handleEditProduct(product)} style={{ marginRight: 5 }}>
+											<MaterialCommunityIcon
+												name='pencil-outline'
+												size={20}
 												color={theme.colors.textSecondary}
 											/>
 										</TouchableOpacity>
@@ -252,9 +255,9 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 											message={t('QUESTION_DELETE_PRODUCT', 'Are you sure that you want to delete the product?')}
 											onAccept={() => onDeleteProduct(product)}
 										>
-											<OIcon
-												src={theme.images.general.trash}
-												width={20}
+											<MaterialCommunityIcon
+												name='trash-can-outline'
+												size={20}
 												color={theme.colors.textSecondary}
 											/>
 										</OAlert>
@@ -286,7 +289,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 							)}
 							{productInfo().options.length > 0 && (
 								<ProductOptionsList>
-									{productInfo().options.map((option: any, i: number) => (
+									{productInfo().options.sort((a: any, b: any) => a.rank - b.rank).map((option: any, i: number) => (
 										<ProductOption key={option.id + i}>
 											<OText size={10} color={theme.colors.textSecondary}>{option.name}</OText>
 											{option.suboptions.map((suboption: any) => (
@@ -305,7 +308,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 									))}
 								</ProductOptionsList>
 							)}
-							{product.comment && (
+							{!!product.comment && (
 								<ProductComment>
 									<OText size={10} color={theme.colors.textSecondary}>{t('SPECIAL_COMMENT', 'Special Comment')}</OText>
 									<OText size={10} color={theme.colors.textThird}>{product.comment}</OText>

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

@@ -6,6 +6,7 @@ import {
 } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 import { StyleSheet, View } from 'react-native'
+import IconAntDesign from 'react-native-vector-icons/AntDesign';
 
 import {
 	Container,
@@ -31,15 +32,17 @@ export const ProductOptionSubOptionUI = (props: any) => {
 		setIsScrollAvailable
 	} = props
 
-	const disableIncrement = option?.limit_suboptions_by_max ? balance === option?.max : state.quantity === suboption?.max || (!state.selected && balance === option?.max)
+	const disableIncrement = option?.limit_suboptions_by_max ? balance === option?.max || state.quantity === suboption?.max : state.quantity === suboption?.max || (!state.selected && balance === option?.max)
 	const price = option?.with_half_option && suboption?.half_price && state.position !== 'whole' ? suboption?.half_price : suboption?.price
-	
+
 	const theme = useTheme();
 	const [, t] = useLanguage()
 	const [{ parsePrice }] = useUtils()
 	const [showMessage, setShowMessage] = useState(false)
 	const [isDirty, setIsDirty] = useState(false)
 
+	const iconsSize = 20
+
 	const handleSuboptionClick = () => {
 		toggleSelect()
 		setIsDirty(true)
@@ -64,7 +67,7 @@ export const ProductOptionSubOptionUI = (props: any) => {
 
 	return (
 		<View>
-			<Container onPress={() => handleSuboptionClick()}>
+			<Container onPress={!(option?.with_half_option || option?.allow_suboption_quantity) ? () => handleSuboptionClick() : null}>
 				<IconControl disabled={disabled} onPress={() => handleSuboptionClick()}>
 					{((option?.min === 0 && option?.max === 1) || option?.max > 1) ? (
 						state?.selected ? (
@@ -87,9 +90,9 @@ export const ProductOptionSubOptionUI = (props: any) => {
 					{option?.allow_suboption_quantity && state?.selected && (
 						<>
 							<Checkbox disabled={disabled || state.quantity === 0} onPress={decrement}>
-								<OIcon
-									src={theme.images.general.minus}
-									width={16}
+								<IconAntDesign
+									name='minuscircleo'
+									size={iconsSize}
 									color={state.quantity === 0 || disabled ? theme.colors.disabled : theme.colors.primary}
 								/>
 							</Checkbox>
@@ -97,9 +100,9 @@ export const ProductOptionSubOptionUI = (props: any) => {
 								{state.quantity}
 							</OText>
 							<Checkbox disabled={disabled || disableIncrement} onPress={increment}>
-								<OIcon
-									src={theme.images.general.plus}
-									width={16}
+								<IconAntDesign
+									name='pluscircleo'
+									size={iconsSize}
 									color={disableIncrement || disabled ? theme.colors.disabled : theme.colors.primary}
 								/>
 							</Checkbox>
@@ -113,7 +116,8 @@ export const ProductOptionSubOptionUI = (props: any) => {
 								<OIcon
 									src={theme.images.general.half_l}
 									color={state.selected && state.position === 'left' ? theme.colors.primary : '#cbcbcb'}
-									width={16}
+									width={20}
+									height={20}
 									style={styles.inverse}
 								/>
 							</Circle>
@@ -121,26 +125,32 @@ export const ProductOptionSubOptionUI = (props: any) => {
 								<OIcon
 									src={theme.images.general.half_f}
 									color={state.selected && state.position === 'whole' ? theme.colors.primary : '#cbcbcb'}
-									width={16}
+									width={20}
+									height={20}
 								/>
 							</Circle>
 							<Circle disabled={disabled} onPress={() => changePosition('right')}>
 								<OIcon
 									src={theme.images.general.half_r}
 									color={state.selected && state.position === 'right' ? theme.colors.primary : '#cbcbcb'}
-									width={16}
+									width={20}
+									height={20}
 								/>
 							</Circle>
 						</>
 					)}
 				</PositionControl>
 				{price > 0 && (
-					<OText size={12} lineHeight={18} color={theme.colors.textSecondary}>
+					<OText size={12} lineHeight={18} color={theme.colors.textSecondary} style={{ paddingRight: 10 }}>
 						+ {parsePrice(price)}
 					</OText>
 				)}
 			</Container>
-			{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>}
+			{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>
+			)}
 		</View>
 	)
 }

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

@@ -4,13 +4,13 @@ export const Container = styled.TouchableOpacity`
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  padding: 10px;
   width: 100%;
 `
 
 export const IconControl = styled.TouchableOpacity`
   flex-direction: row;
-  width: 45%;
+  padding: 10px;
+  width: 38%;
   align-items: center;
 `
 
@@ -18,10 +18,9 @@ export const QuantityControl = styled.View`
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
-  margin-horizontal: 5px;
+  margin-right: 5px;
   flex: 1;
   width: 60px;
-
 `
 
 export const PositionControl = styled.View`