ordering-ui-react-native 0.17.39 → 0.17.40-release

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

@@ -9,7 +9,8 @@ import {
 	I18nManager,
 	SafeAreaView,
 	Platform,
-	Button
+	Button,
+	Vibration
 } from 'react-native';
 import {
 	ProductForm as ProductOptions,
@@ -18,8 +19,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 +31,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 +55,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 } from '../../utils';
 const windowWidth = Dimensions.get('window').width;
 
 export const ProductOptionsUI = (props: any) => {
@@ -69,11 +76,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: {
@@ -126,6 +138,7 @@ export const ProductOptionsUI = (props: any) => {
 		},
 		slide1: {
 			flex: 1,
+			alignItems: 'center'
 		},
 		mainSwiper: {
 			height: 258,
@@ -162,6 +175,10 @@ export const ProductOptionsUI = (props: any) => {
 			justifyContent: 'space-between',
 			width: '100%',
 			marginTop: 10
+		},
+		wrapperNavbar: {
+			paddingHorizontal: 40,
+			paddingTop: 0,
 		}
 	});
 
@@ -169,6 +186,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)
@@ -187,6 +205,20 @@ export const ProductOptionsUI = (props: any) => {
 	const [headerRefHeight, setHeaderRefHeight] = useState(0)
 	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;
@@ -203,11 +235,12 @@ export const ProductOptionsUI = (props: any) => {
 	};
 
 	const handleSaveProduct = () => {
+		Vibration.vibrate()
 		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;
@@ -226,7 +259,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
 		}
@@ -269,7 +302,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
 		}
@@ -283,6 +316,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
@@ -293,7 +331,8 @@ 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) => (
 		<>
@@ -302,19 +341,25 @@ export const ProductOptionsUI = (props: any) => {
 					{respect_to == null && suboptions?.length > 0 && (
 						<TouchableOpacity
 							key={`eopt_key_${id}`}
-							onPress={() => setSelectedOpt(id)}
+							onPress={() => {
+								setSelectedOpt(id)
+								scrollViewRef?.current?.scrollTo && scrollViewRef.current.scrollTo({
+									y: optionLayout[`id:${id}`]?.y + editionsLayoutY - 50,
+									animated: true
+								})
+							}}
 							style={[
 								styles.extraItem,
 								{
 									borderBottomColor:
-										selOpt == id ? theme.colors.textNormal : theme.colors.border,
+										selOpt == id ? theme.colors.textNormal : theme.colors.backgroundPage,
 								},
 							]}>
 							<OText
 								color={
 									selOpt == id ? theme.colors.textNormal : theme.colors.textSecondary
 								}
-								size={selOpt == id ? 14 : 12}
+								size={12}
 								weight={selOpt == id ? '600' : 'normal'}
 								style={{ maxWidth: 150 }}
 								numberOfLines={1}>
@@ -328,7 +373,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:', ''))
@@ -349,15 +394,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]
@@ -372,7 +420,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)
 					}
 				}
@@ -451,9 +499,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>
 		)
 	}
@@ -467,14 +528,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}
@@ -523,14 +604,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,
@@ -539,7 +620,8 @@ export const ProductOptionsUI = (props: any) => {
 											) : (
 												<>
 													<YoutubePlayer
-														height={300}
+														height={'100%'}
+														width={'100%'}
 														play={playing}
 														videoId={img}
 														onChangeState={onStateChange}
@@ -557,7 +639,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)}
@@ -570,7 +652,7 @@ export const ProductOptionsUI = (props: any) => {
 													opacity: index === thumbsSwiper ? 1 : 0.8
 												}}
 											>
-												{String(img).includes('image') ? (
+												{String(img).includes('http') ? (
 													<OIcon
 														url={img}
 														style={{
@@ -585,7 +667,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,
@@ -605,7 +687,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}>
@@ -701,45 +786,40 @@ export const ProductOptionsUI = (props: any) => {
 						<ExtraOptionWrap
 							horizontal
 							showsHorizontalScrollIndicator={false}
-							style={{ marginBottom: 20 }}
-							contentContainerStyle={{ paddingHorizontal: 33, backgroundColor: theme.colors.white }}
+							style={{
+								marginBottom: 20,
+								borderBottomWidth: 1,
+								borderBottomColor: theme.colors.border,
+								marginHorizontal: isChewLayout ? 20 : 30,
+								backgroundColor: theme.colors.backgroundPage,
+							}}
 						>
-							<TouchableOpacity
-								key={`eopt_key_00`}
-								onPress={() => setSelectedOpt(-1)}
-								style={[
-									styles.extraItem,
-									{
-										borderBottomColor: selOpt == -1 ? theme.colors.textNormal : theme.colors.border,
-									},
-								]}>
-								<OText
-									color={selOpt == -1 ? theme.colors.textNormal : theme.colors.textSecondary}
-									size={selOpt == -1 ? 14 : 12}
-									weight={selOpt == -1 ? '600' : 'normal'}>
-									{t('ALL', 'All')}
-								</OText>
-							</TouchableOpacity>
-							{product?.ingredients.length > 0 && (
+							{product?.ingredients?.length > 0 && (
 								<TouchableOpacity
 									key={`eopt_key_01`}
-									onPress={() => setSelectedOpt(0)}
+									onPress={() => {
+										setSelectedOpt(0)
+										scrollViewRef?.current?.scrollTo && scrollViewRef.current.scrollTo({
+											y: optionLayout[`id:0`]?.y + editionsLayoutY - 50,
+											animated: true
+										})
+									}}
 									style={[
 										styles.extraItem,
 										{
 											borderBottomColor:
-												selOpt == 0 ? theme.colors.textNormal : theme.colors.border,
+												selOpt == 0 ? theme.colors.textNormal : theme.colors.backgroundPage,
 										},
 									]}>
 									<OText
 										color={selOpt == 0 ? theme.colors.textNormal : theme.colors.textSecondary}
-										size={selOpt == 0 ? 14 : 12}
+										size={12}
 										weight={selOpt == 0 ? '600' : 'normal'}>
 										{t('INGREDIENTS', 'Ingredients')}
 									</OText>
 								</TouchableOpacity>
 							)}
-							{product?.extras.map((extra: any) =>
+							{product?.extras?.map((extra: any) =>
 								<ExtraOptions key={extra.id} options={extra.options} />
 							)}
 						</ExtraOptionWrap>
@@ -783,184 +863,94 @@ export const ProductOptionsUI = (props: any) => {
 							))}
 						</>
 					) : (
-						<ProductEditions>
-							{selOpt === -1 ? (
-								<>
-									{product?.ingredients.length > 0 && (
-										<View style={styles.optionContainer} onLayout={(event: any) => handleOnLayout(event, 0)}>
-											<SectionTitle>
-												<OText size={16}>
-													{t('INGREDIENTS', 'Ingredients')}
-												</OText>
-											</SectionTitle>
-											<WrapperIngredients>
-												{product?.ingredients.map((ingredient: any) => (
-													<ProductIngredient
-														key={ingredient.id}
-														ingredient={ingredient}
-														state={
-															productCart.ingredients[`id:${ingredient.id}`]
-														}
-														onChange={handleChangeIngredientState}
-														isSoldOut={isSoldOut}
-													/>
-												))}
-											</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) => {
-											const currentState =
-												productCart.options[`id:${option.id}`] || {};
-											return (
-												<React.Fragment key={`popt_${option.id}`}>
-													{showOption(option) && (
-														<View style={styles.optionContainer} onLayout={(event: any) => handleOnLayout(event, option?.id)}>
-															<ProductOption
-																option={option}
-																currentState={currentState}
-																error={errors[`id:${option.id}`]}>
-																<WrapperSubOption
-																	style={{
-																		backgroundColor: isError(option.id),
-																		borderRadius: 7.6
-																	}}>
-																	{option.suboptions.sort((a: any, b: any) => a.rank - b.rank).map(
-																		(suboption: any) => {
-																			const currentState =
-																				productCart.options[
-																					`id:${option.id}`
-																				]?.suboptions[
-																				`id:${suboption.id}`
-																				] || {};
-																			const balance =
-																				productCart.options[
-																					`id:${option.id}`
-																				]?.balance || 0;
-																			return (
-																				<ProductOptionSubOption
-																					key={suboption.id}
-																					isSoldOut={isSoldOut}
-																					onChange={
-																						handleChangeSuboptionState
-																					}
-																					balance={balance}
-																					option={option}
-																					suboption={suboption}
-																					state={currentState}
-																					disabled={
-																						isSoldOut ||
-																						maxProductQuantity <= 0
-																					}
-																					setIsScrollAvailable={setIsScrollAvailable}
-																					error={errors[`id:${option.id}`]}
-																				/>
-																			);
-																		},
-																	)}
-																</WrapperSubOption>
-															</ProductOption>
-														</View>
-													)}
-												</React.Fragment>
-											);
-										}),
-									)}
-								</>
-							) : (
-								<>
-									{selOpt === 0 ? (
-										<View style={styles.optionContainer}>
-											<SectionTitle>
-												<OText size={16}>
-													{t('INGREDIENTS', 'Ingredients')}
-												</OText>
-											</SectionTitle>
-											<WrapperIngredients>
-												{product?.ingredients.map((ingredient: any) => (
-													<ProductIngredient
-														key={ingredient.id}
-														ingredient={ingredient}
-														state={
-															productCart.ingredients[`id:${ingredient.id}`]
-														}
-														onChange={handleChangeIngredientState}
-														isSoldOut={isSoldOut}
-													/>
-												))}
-											</WrapperIngredients>
-										</View>
-									) : (
-										<>
-											{product?.extras.map((extra: any) =>
-												extra.options.sort((a: any, b: any) => a.rank - b.rank).map((option: any) => {
-													if (
-														option.id == selOpt ||
-														(hasRespected(
-															extra.options,
-															option.respect_to,
-														) &&
-															showOption(option))
-													) {
-														const currentState =
-															productCart.options[`id:${option.id}`] || {};
-														return (
-															<React.Fragment key={option.id}>
-																{showOption(option) && (
-																	<View style={styles.optionContainer}>
-																		<ProductOption
-																			option={option}
-																			currentState={currentState}
-																			error={errors[`id:${option.id}`]}>
-																			<WrapperSubOption
-																				style={{
-																					backgroundColor: isError(
-																						option.id,
-																					),
-																				}}>
-																				{option.suboptions.sort((a: any, b: any) => a.rank - b.rank).map(
-																					(suboption: any) => {
-																						const currentState =
-																							productCart.options[
-																								`id:${option.id}`
-																							]?.suboptions[
-																							`id:${suboption.id}`
-																							] || {};
-																						const balance =
-																							productCart.options[
-																								`id:${option.id}`
-																							]?.balance || 0;
-																						return (
-																							<ProductOptionSubOption
-																								key={suboption.id}
-																								onChange={
-																									handleChangeSuboptionState
-																								}
-																								balance={balance}
-																								option={option}
-																								suboption={suboption}
-																								state={currentState}
-																								disabled={
-																									isSoldOut ||
-																									maxProductQuantity <= 0
-																								}
-																							/>
-																						);
-																					},
-																				)}
-																			</WrapperSubOption>
-																		</ProductOption>
-																	</View>
-																)}
-															</React.Fragment>
-														);
+						<ProductEditions
+							style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}
+							onLayout={(event: any) => {
+								setEditionsLayoutY(event.nativeEvent.layout?.y)
+							}}
+						>
+							<>
+								{product?.ingredients?.length > 0 && (
+									<View style={styles.optionContainer} onLayout={(event: any) => handleOnLayout(event, 0)}>
+										<SectionTitle>
+											<OText size={16}>
+												{t('INGREDIENTS', 'Ingredients')}
+											</OText>
+										</SectionTitle>
+										<WrapperIngredients>
+											{product?.ingredients.map((ingredient: any) => (
+												<ProductIngredient
+													key={ingredient.id}
+													ingredient={ingredient}
+													state={
+														productCart.ingredients[`id:${ingredient.id}`]
 													}
-												}),
-											)}
-										</>
-									)}
-								</>
-							)}
+													onChange={handleChangeIngredientState}
+													isSoldOut={isSoldOut}
+												/>
+											))}
+										</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) => {
+										const currentState =
+											productCart.options[`id:${option.id}`] || {};
+										return (
+											<React.Fragment key={`popt_${option.id}`}>
+												{showOption(option) && (
+													<View style={styles.optionContainer} onLayout={(event: any) => handleOnLayout(event, option?.id)}>
+														<ProductOption
+															option={option}
+															currentState={currentState}
+															error={errors[`id:${option.id}`]}>
+															<WrapperSubOption
+																style={{
+																	backgroundColor: isError(option.id),
+																	borderRadius: 7.6
+																}}>
+																{option?.suboptions?.sort((a: any, b: any) => a.rank - b.rank).map(
+																	(suboption: any) => {
+																		const currentState =
+																			productCart.options[
+																				`id:${option.id}`
+																			]?.suboptions[
+																			`id:${suboption.id}`
+																			] || {};
+																		const balance =
+																			productCart.options[
+																				`id:${option.id}`
+																			]?.balance || 0;
+																		return (
+																			<ProductOptionSubOption
+																				key={suboption.id}
+																				isSoldOut={isSoldOut}
+																				onChange={
+																					handleChangeSuboptionState
+																				}
+																				balance={balance}
+																				option={option}
+																				suboption={suboption}
+																				state={currentState}
+																				disabled={
+																					isSoldOut ||
+																					maxProductQuantity <= 0
+																				}
+																				setIsScrollAvailable={setIsScrollAvailable}
+																				error={errors[`id:${option.id}`]}
+																			/>
+																		);
+																	},
+																)}
+															</WrapperSubOption>
+														</ProductOption>
+													</View>
+												)}
+											</React.Fragment>
+										);
+									}),
+								)}
+							</>
 							{!product?.hide_special_instructions && (
 								<ProductComment>
 									<SectionTitle>
@@ -984,7 +974,7 @@ export const ProductOptionsUI = (props: any) => {
 							)}
 						</ProductEditions>
 					)}
-					{!!error && error.length > 0 && (
+					{!!error && error?.length > 0 && (
 						<NotFoundSource content={error[0]?.message || error[0]} />
 					)}
 				</ScrollView>
@@ -1007,7 +997,7 @@ export const ProductOptionsUI = (props: any) => {
 										disabled={productCart.quantity === 1 || !productCart.quantity || isSoldOut || ((productCart?.quantity + productAddedToCartLength) <= product?.minimum_per_order)}>
 										<OIcon
 											src={theme.images.general.minus}
-											width={16}
+											width={20}
 											color={
 												productCart.quantity === 1 || isSoldOut
 													? theme.colors.backgroundGray
@@ -1028,7 +1018,8 @@ export const ProductOptionsUI = (props: any) => {
 												borderRadius: 8,
 												borderColor: theme.colors.inputBorderColor,
 												height: 44,
-												marginHorizontal: 10
+												marginHorizontal: 10,
+												fontSize: 16
 											}}
 										/>
 									)}
@@ -1051,7 +1042,7 @@ export const ProductOptionsUI = (props: any) => {
 										}>
 										<OIcon
 											src={theme.images.general.plus}
-											width={16}
+											width={20}
 											color={
 												maxProductQuantity <= 0 ||
 													(productCart?.quantity + productAddedToCartLength) >= maxProductQuantity ||