ordering-ui-react-native 0.16.53 → 0.16.54-release

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

@@ -1,4 +1,17 @@
-import React, { useEffect, useRef, useCallback } from 'react';
+import React, { useEffect, useRef, useState, useCallback } from 'react';
+import {
+	View,
+	Keyboard,
+	TextInput,
+	TouchableOpacity,
+	StyleSheet,
+	Dimensions,
+	I18nManager,
+	SafeAreaView,
+	Platform,
+	Button,
+	Vibration
+} from 'react-native';
 import {
 	ProductForm as ProductOptions,
 	useSession,
@@ -15,17 +28,10 @@ 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 { TextInput } from 'react-native'
-import {
-	Grayscale
-} from 'react-native-color-matrix-image-filters'
-
-import { View, TouchableOpacity, StyleSheet, Dimensions, I18nManager, SafeAreaView, Platform, Button } from 'react-native';
 
 import {
 	WrapHeader,
 	TopHeader,
-	WrapContent,
 	ProductTitle,
 	ProductDescription,
 	ProductEditions,
@@ -45,8 +51,6 @@ import { ScrollView } from 'react-native-gesture-handler';
 import { ProductOptionSubOption } from '../ProductOptionSubOption';
 import { NotFoundSource } from '../NotFoundSource';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
-import { useState } from 'react';
-const windowHeight = Dimensions.get('window').height;
 const windowWidth = Dimensions.get('window').width;
 
 export const ProductOptionsUI = (props: any) => {
@@ -66,11 +70,14 @@ export const ProductOptionsUI = (props: any) => {
 		handleChangeSuboptionState,
 		handleChangeCommentState,
 		productObject,
+		productAddedToCartLength
 	} = props;
 
 	const theme = useTheme();
 	const [, { showToast }] = useToast()
 
+	const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
+
 	const styles = StyleSheet.create({
 		mainContainer: {
 
@@ -122,6 +129,7 @@ export const ProductOptionsUI = (props: any) => {
 		},
 		slide1: {
 			flex: 1,
+			alignItems: 'center'
 		},
 		mainSwiper: {
 			height: 258,
@@ -151,6 +159,13 @@ export const ProductOptionsUI = (props: any) => {
 		productTagNameStyle: {
 			paddingHorizontal: 6,
 			marginRight: 5
+		},
+		actionContainer: {
+			flexDirection: 'row',
+			alignItems: 'center',
+			justifyContent: 'space-between',
+			width: '100%',
+			marginTop: 10
 		}
 	});
 
@@ -162,7 +177,7 @@ export const ProductOptionsUI = (props: any) => {
 	const [gallery, setGallery] = useState([])
 	const [thumbsSwiper, setThumbsSwiper] = useState(0)
 	const [indexGallery, setIndexGallery] = useState(0)
-	const [selOpt, setSelectedOpt] = useState(0);
+	const [selOpt, setSelectedOpt] = useState(-1);
 	const [isHaveWeight, setIsHaveWeight] = useState(false)
 	const [playing, setPlaying] = useState(false);
 	const [qtyBy, setQtyBy] = useState({
@@ -176,6 +191,7 @@ 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 isError = (id: number) => {
 		let bgColor = theme.colors.white;
@@ -192,6 +208,7 @@ 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
@@ -284,6 +301,7 @@ export const ProductOptionsUI = (props: any) => {
 		maxProductQuantity === 0 ||
 		Object.keys(errors).length > 0;
 
+	
 	const ExtraOptions = ({ eID, options }: any) => (
 		<>
 			{options.map(({ id, name, respect_to, suboptions }: any) => (
@@ -291,20 +309,28 @@ 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}
-								weight={selOpt == id ? '600' : 'normal'}>
+								size={12}
+								weight={selOpt == id ? '600' : 'normal'}
+								style={{ maxWidth: 150 }}
+								numberOfLines={1}>
 								{name}
 							</OText>
 						</TouchableOpacity>
@@ -314,6 +340,14 @@ export const ProductOptionsUI = (props: any) => {
 		</>
 	);
 
+	const handleScroll = ({ nativeEvent: { contentOffset, layoutMeasurement } }: any) => {
+
+		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:', ''))
+		}
+	}
+
 	const handleGoBack = navigation?.canGoBack()
 		? () => navigation.goBack()
 		: () => navigation.navigate('Business', { store: props.businessSlug })
@@ -328,7 +362,10 @@ export const ProductOptionsUI = (props: any) => {
 	useEffect(() => {
 		const imageList: any = []
 		const videoList: any = []
-		product?.images && imageList.push(product.images)
+		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) {
@@ -366,18 +403,101 @@ export const ProductOptionsUI = (props: any) => {
 		}
 	}, [product])
 
+	const ActionButton = () => {
+		return (
+			<View
+				style={{
+					width: isHaveWeight ? '100%' : ((isSoldOut || maxProductQuantity <= 0) ? '60%' : '40%'),
+				}}>
+				{((productCart &&
+					auth &&
+					orderState.options?.address_id) || (isSoldOut || maxProductQuantity <= 0)) && (
+						<OButton
+							onClick={() => handleSaveProduct()}
+							imgRightSrc=""
+							text={`${orderState.loading
+								? t('LOADING', 'Loading')
+								: (isSoldOut || maxProductQuantity <= 0)
+									? t('SOLD_OUT', 'Sold out')
+									: editMode
+										? t('UPDATE', 'Update')
+										: t('ADD', 'Add')
+								}`}
+							isDisabled={isSoldOut || maxProductQuantity <= 0 || (product?.minimum_per_order && ((productCart?.quantity + productAddedToCartLength) < product?.minimum_per_order)) || (product?.maximum_per_order && ((productCart?.quantity + productAddedToCartLength) > product?.maximum_per_order))}
+							textStyle={{
+								color: saveErrors || isSoldOut || maxProductQuantity <= 0 ? theme.colors.primary : theme.colors.white,
+								fontSize: orderState.loading || editMode ? 10 : 14
+							}}
+							style={{
+								backgroundColor: saveErrors || isSoldOut || maxProductQuantity <= 0 || (product?.minimum_per_order && ((productCart?.quantity + productAddedToCartLength) < product?.minimum_per_order)) || (product?.maximum_per_order && ((productCart?.quantity + productAddedToCartLength) > product?.maximum_per_order)) ? theme.colors.lightGray : theme.colors.primary,
+								borderColor: saveErrors || isSoldOut || maxProductQuantity <= 0 || (product?.minimum_per_order && ((productCart?.quantity + productAddedToCartLength) < product?.minimum_per_order)) || (product?.maximum_per_order && ((productCart?.quantity + productAddedToCartLength) > product?.maximum_per_order)) ? theme.colors.white : theme.colors.primary,
+								opacity: saveErrors || isSoldOut || maxProductQuantity <= 0 ? 0.3 : 1,
+								borderRadius: 7.6,
+								height: 44,
+								shadowOpacity: 0,
+								borderWidth: 1,
+								marginTop: isHaveWeight ? 10 : 0
+							}}
+						/>
+					)}
+				{auth &&
+					!orderState.options?.address_id &&
+					(orderState.loading ? (
+						<OButton
+							isDisabled
+							text={t('LOADING', 'Loading')}
+							imgRightSrc=""
+							textStyle={{ fontSize: 10 }}
+						/>
+					) : (
+						<OButton onClick={navigation.navigate('AddressList')} />
+					))}
+				{!auth && (
+					<OButton
+						isDisabled={isSoldOut || maxProductQuantity <= 0}
+						onClick={() => handleRedirectLogin()}
+						text={
+							isSoldOut || maxProductQuantity <= 0
+								? t('SOLD_OUT', 'Sold out')
+								: t('LOGIN_SIGNUP', 'Login / Sign Up')
+						}
+						imgRightSrc=""
+						textStyle={{ color: theme.colors.primary, fontSize: 14 }}
+						style={{
+							height: 44,
+							borderColor: theme.colors.primary,
+							backgroundColor: theme.colors.white,
+						}}
+					/>
+				)}
+			</View>
+		)
+	}
+
+	useEffect(() => {
+		const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {
+			scrollViewRef.current.scrollToEnd({ animated: true })
+		})
+		return () => {
+			keyboardDidShowListener.remove()
+		}
+	}, [])
+
+
 	return (
 		<SafeAreaView style={{ flex: 1 }}>
 			<TopHeader>
 				<TopActions onPress={() => handleGoBack()}>
-					<OIcon src={theme.images.general.arrow_left} width={30} />
+					<IconAntDesign name='arrowleft' size={26} />
 				</TopActions>
 			</TopHeader>
 			{!error && (
 				<ScrollView
 					ref={scrollViewRef}
 					contentContainerStyle={{ paddingBottom: 80 }}
-					stickyHeaderIndices={[2]}>
+					stickyHeaderIndices={[2]}
+					onScroll={handleScroll}
+				>
 					<WrapHeader onLayout={(event: any) => setHeaderRefHeight(event.nativeEvent.layout?.height)}>
 						{loading && !product ? (
 							<View style={styles.productHeaderSkeleton}>
@@ -424,18 +544,19 @@ export const ProductOptionsUI = (props: any) => {
 											style={styles.slide1}
 											key={i}
 										>
-											{img.includes('image') ? (
+											{(String(img).includes('http') || typeof img === 'number') ? (
 												<FastImage
-													style={{ height: '100%', opacity: isSoldOut ? 0.5 : 1 }}
-													source={{
+													style={{ height: '100%', opacity: isSoldOut ? 0.5 : 1, aspectRatio: 3 / 2 }}
+													source={typeof img !== 'number' ? {
 														uri: optimizeImage(img, 'h_1024,c_limit'),
 														priority: FastImage.priority.normal,
-													}}
+													} : img}
 												/>
 											) : (
 												<>
 													<YoutubePlayer
-														height={300}
+														height={'100%'}
+														width={'100%'}
 														play={playing}
 														videoId={img}
 														onChangeState={onStateChange}
@@ -466,7 +587,7 @@ export const ProductOptionsUI = (props: any) => {
 													opacity: index === thumbsSwiper ? 1 : 0.8
 												}}
 											>
-												{img.includes('image') ? (
+												{String(img).includes('http') ? (
 													<OIcon
 														url={img}
 														style={{
@@ -481,7 +602,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,
@@ -501,7 +622,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}>
@@ -597,40 +721,35 @@ export const ProductOptionsUI = (props: any) => {
 						<ExtraOptionWrap
 							horizontal
 							showsHorizontalScrollIndicator={false}
-							style={{ marginBottom: 20 }}
-							contentContainerStyle={{ marginHorizontal: 40, 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_all_0`}
-								onPress={() => setSelectedOpt(0)}
-								style={[
-									styles.extraItem,
-									{
-										borderBottomColor: selOpt == 0 ? theme.colors.textNormal : theme.colors.border,
-									},
-								]}>
-								<OText
-									color={selOpt == 0 ? theme.colors.textNormal : theme.colors.textSecondary}
-									size={selOpt == 0 ? 14 : 12}
-									weight={selOpt == 0 ? '600' : 'normal'}>
-									{t('ALL', 'All')}
-								</OText>
-							</TouchableOpacity>
 							{product?.ingredients.length > 0 && (
 								<TouchableOpacity
-									key={`eopt_all_00`}
-									onPress={() => setSelectedOpt(-1)}
+									key={`eopt_key_01`}
+									onPress={() => {
+										setSelectedOpt(0)
+										scrollViewRef?.current?.scrollTo && scrollViewRef.current.scrollTo({
+											y: optionLayout[`id:0`]?.y + editionsLayoutY - 50,
+											animated: true
+										})
+									}}
 									style={[
 										styles.extraItem,
 										{
 											borderBottomColor:
-												selOpt == -1 ? theme.colors.textNormal : theme.colors.border,
+												selOpt == 0 ? theme.colors.textNormal : theme.colors.backgroundPage,
 										},
 									]}>
 									<OText
-										color={selOpt == -1 ? theme.colors.textNormal : theme.colors.textSecondary}
-										size={selOpt == -1 ? 14 : 12}
-										weight={selOpt == -1 ? '600' : 'normal'}>
+										color={selOpt == 0 ? theme.colors.textNormal : theme.colors.textSecondary}
+										size={12}
+										weight={selOpt == 0 ? '600' : 'normal'}>
 										{t('INGREDIENTS', 'Ingredients')}
 									</OText>
 								</TouchableOpacity>
@@ -679,184 +798,94 @@ export const ProductOptionsUI = (props: any) => {
 							))}
 						</>
 					) : (
-						<ProductEditions>
-							{selOpt == 0 ? (
-								<>
-									{product?.ingredients.length > 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.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 == -1 ? (
-										<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>
@@ -886,173 +915,117 @@ export const ProductOptionsUI = (props: any) => {
 				</ScrollView>
 			)}
 			{!loading && !error && product && (
-				<ProductActions ios={Platform?.OS === 'ios'}>
-					<View>
-						<OText size={16} lineHeight={24} weight={'600'}>
-							{productCart.total ? parsePrice(productCart?.total) : ''}
-						</OText>
-						{product?.minimum_per_order && productCart?.quantity < product?.minimum_per_order && <OText size={12} color={theme.colors?.red}>{t('MOBILE_MINIMUM_TO_ORDER', 'Min. _number_ ').replace('_number_', product?.minimum_per_order)}</OText>}
-						{product?.maximum_per_order && productCart?.quantity > product?.maximum_per_order && <OText size={12} color={theme.colors?.red}>{t('MOBILE_MAXIMUM_TO_ORDER', 'Max. _number_'.replace('_number_', product?.maximum_per_order))}</OText>}
-					</View>
-					{productCart && !isSoldOut && maxProductQuantity > 0 && (
-						<View style={styles.quantityControl}>
-							<TouchableOpacity
-								onPress={decrement}
-								disabled={productCart.quantity === 1 || isSoldOut}>
-								<OIcon
-									src={theme.images.general.minus}
-									width={16}
-									color={
-										productCart.quantity === 1 || isSoldOut
-											? theme.colors.backgroundGray
-											: theme.colors.backgroundDark
-									}
-								/>
-							</TouchableOpacity>
-							{qtyBy?.pieces && (
-								<TextInput
-									keyboardType='numeric'
-									value={`${productCart?.quantity > 0 ? productCart?.quantity : ''}`}
-									onChangeText={(val: any) => onChangeProductCartQuantity(parseInt(val))}
-									editable={!orderState.loading}
-									style={{
-										borderWidth: 1,
-										textAlign: 'center',
-										minWidth: 60,
-										borderRadius: 8,
-										borderColor: theme.colors.inputBorderColor,
-										height: 44,
-										marginHorizontal: 10
-									}}
-								/>
-							)}
-							{qtyBy?.weight_unit && (
-								<OText
-									size={12}
-									lineHeight={18}
-									style={{ minWidth: 40, textAlign: 'center' }}
-								>
-									{productCart.quantity * product?.weight}
-								</OText>
-							)}
-							<TouchableOpacity
-								onPress={increment}
-								disabled={
-									maxProductQuantity <= 0 ||
-									productCart.quantity >= maxProductQuantity ||
-									isSoldOut
-								}>
-								<OIcon
-									src={theme.images.general.plus}
-									width={16}
-									color={
-										maxProductQuantity <= 0 ||
-											productCart.quantity >= maxProductQuantity ||
-											isSoldOut
-											? theme.colors.backgroundGray
-											: theme.colors.backgroundDark
-									}
-								/>
-							</TouchableOpacity>
-							{isHaveWeight && (
-								<WeightUnitSwitch>
+				<ProductActions ios={Platform?.OS === 'ios'} isColumn={isHaveWeight}>
+					<View style={styles.actionContainer}>
+						<View>
+							<OText size={16} lineHeight={24} weight={'600'}>
+								{productCart.total ? parsePrice(productCart?.total) : ''}
+							</OText>
+							{product?.minimum_per_order && (productCart?.quantity + productAddedToCartLength) <= product?.minimum_per_order && productCart?.quantity !== 1 && <OText size={12} color={theme.colors?.red}>{t('MOBILE_MINIMUM_TO_ORDER', 'Min. _number_ ').replace('_number_', product?.minimum_per_order)}</OText>}
+							{product?.maximum_per_order && (productCart?.quantity + productAddedToCartLength) >= product?.maximum_per_order && <OText size={12} color={theme.colors?.red}>{t('MOBILE_MAXIMUM_TO_ORDER', 'Max. _number_'.replace('_number_', product?.maximum_per_order))}</OText>}
+						</View>
+						{productCart && !isSoldOut && maxProductQuantity > 0 && (
+							<>
+								<View style={styles.quantityControl}>
 									<TouchableOpacity
-										onPress={() => handleSwitchQtyUnit('pieces')}
-									>
-										<WeightUnitItem active={qtyBy?.pieces}>
-											<OText
-												size={12}
-												lineHeight={18}
-												color={qtyBy?.pieces ? theme.colors.primary : theme.colors.textNormal}
-											>
-												{t('PIECES', 'pcs')}
-											</OText>
-										</WeightUnitItem>
+										onPress={decrement}
+										disabled={productCart.quantity === 1 || !productCart.quantity || isSoldOut || ((productCart?.quantity + productAddedToCartLength) <= product?.minimum_per_order)}>
+										<OIcon
+											src={theme.images.general.minus}
+											width={20}
+											color={
+												productCart.quantity === 1 || isSoldOut
+													? theme.colors.backgroundGray
+													: theme.colors.backgroundDark
+											}
+										/>
 									</TouchableOpacity>
-									<View style={{ alignItems: 'flex-start' }}>
+									{qtyBy?.pieces && (
+										<TextInput
+											keyboardType='numeric'
+											value={`${productCart?.quantity > 0 ? productCart?.quantity : ''}`}
+											onChangeText={(val: any) => onChangeProductCartQuantity(parseInt(val))}
+											editable={!orderState.loading}
+											style={{
+												borderWidth: 1,
+												textAlign: 'center',
+												minWidth: 60,
+												borderRadius: 8,
+												borderColor: theme.colors.inputBorderColor,
+												height: 44,
+												marginHorizontal: 10,
+												fontSize: 16
+											}}
+										/>
+									)}
+									{qtyBy?.weight_unit && (
+										<OText
+											size={12}
+											lineHeight={18}
+											style={{ minWidth: 40, textAlign: 'center' }}
+										>
+											{productCart.quantity * product?.weight}
+										</OText>
+									)}
+									<TouchableOpacity
+										onPress={increment}
+										disabled={
+											maxProductQuantity <= 0 ||
+											(productCart?.quantity + productAddedToCartLength) >= maxProductQuantity ||
+											((productCart?.quantity + productAddedToCartLength) >= product?.maximum_per_order && product?.maximum_per_order) ||
+											isSoldOut
+										}>
+										<OIcon
+											src={theme.images.general.plus}
+											width={20}
+											color={
+												maxProductQuantity <= 0 ||
+													(productCart?.quantity + productAddedToCartLength) >= maxProductQuantity ||
+													((productCart?.quantity + productAddedToCartLength) >= product?.maximum_per_order && product?.maximum_per_order) ||
+													isSoldOut
+													? theme.colors.backgroundGray
+													: theme.colors.backgroundDark
+											}
+										/>
+									</TouchableOpacity>
+								</View>
+								{isHaveWeight && (
+									<WeightUnitSwitch>
 										<TouchableOpacity
-											onPress={() => handleSwitchQtyUnit('weight_unit')}
+											onPress={() => handleSwitchQtyUnit('pieces')}
 										>
-											<WeightUnitItem active={qtyBy?.weight_unit}>
+											<WeightUnitItem active={qtyBy?.pieces}>
 												<OText
 													size={12}
 													lineHeight={18}
-													color={qtyBy?.weight_unit ? theme.colors.primary : theme.colors.textNormal}
+													color={qtyBy?.pieces ? theme.colors.primary : theme.colors.textNormal}
 												>
-													{product?.weight_unit}
+													{t('PIECES', 'pcs')}
 												</OText>
 											</WeightUnitItem>
 										</TouchableOpacity>
-									</View>
-								</WeightUnitSwitch>
-							)}
-						</View>
-					)}
-					<View
-						style={{
-							width: isSoldOut || maxProductQuantity <= 0 ? '60%' : '40%',
-						}}>
-						{((productCart &&
-							auth &&
-							orderState.options?.address_id) || (isSoldOut || maxProductQuantity <= 0)) && (
-								<OButton
-									onClick={() => handleSaveProduct()}
-									imgRightSrc=""
-									text={`${orderState.loading
-										? t('LOADING', 'Loading')
-										: (isSoldOut || maxProductQuantity <= 0)
-											? t('SOLD_OUT', 'Sold out')
-											: editMode
-												? t('UPDATE', 'Update')
-												: t('ADD', 'Add')
-										}`}
-									isDisabled={isSoldOut || maxProductQuantity <= 0 || (product?.minimum_per_order && (productCart?.quantity < product?.minimum_per_order)) || (product?.maximum_per_order && (productCart?.quantity > product?.maximum_per_order))}
-									textStyle={{
-										color: saveErrors || isSoldOut || maxProductQuantity <= 0 ? theme.colors.primary : theme.colors.white,
-										fontSize: orderState.loading || editMode ? 10 : 14
-									}}
-									style={{
-										backgroundColor: saveErrors || isSoldOut || maxProductQuantity <= 0 || (product?.minimum_per_order && (productCart?.quantity < product?.minimum_per_order)) || (product?.maximum_per_order && (productCart?.quantity > product?.maximum_per_order)) ? theme.colors.lightGray : theme.colors.primary,
-										borderColor: saveErrors || isSoldOut || maxProductQuantity <= 0 || (product?.minimum_per_order && (productCart?.quantity < product?.minimum_per_order)) || (product?.maximum_per_order && (productCart?.quantity > product?.maximum_per_order)) ? theme.colors.white : theme.colors.primary,
-										opacity: saveErrors || isSoldOut || maxProductQuantity <= 0 ? 0.3 : 1,
-										borderRadius: 7.6,
-										height: 44,
-										shadowOpacity: 0,
-										borderWidth: 1,
-									}}
-								/>
-							)}
-						{auth &&
-							!orderState.options?.address_id &&
-							(orderState.loading ? (
-								<OButton
-									isDisabled
-									text={t('LOADING', 'Loading')}
-									imgRightSrc=""
-									textStyle={{ fontSize: 10 }}
-								/>
-							) : (
-								<OButton onClick={navigation.navigate('AddressList')} />
-							))}
-						{!auth && (
-							<OButton
-								isDisabled={isSoldOut || maxProductQuantity <= 0}
-								onClick={() => handleRedirectLogin()}
-								text={
-									isSoldOut || maxProductQuantity <= 0
-										? t('SOLD_OUT', 'Sold out')
-										: t('LOGIN_SIGNUP', 'Login / Sign Up')
-								}
-								imgRightSrc=""
-								textStyle={{ color: theme.colors.primary, fontSize: 14 }}
-								style={{
-									height: 44,
-									borderColor: theme.colors.primary,
-									backgroundColor: theme.colors.white,
-								}}
-							/>
+										<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>
+								)}
+							</>
 						)}
+						{!isHaveWeight && <ActionButton />}
 					</View>
+					{isHaveWeight && <ActionButton />}
 				</ProductActions>
 			)}
 		</SafeAreaView>
@@ -1063,8 +1036,18 @@ export const ProductOptionsUI = (props: any) => {
 export const ProductForm = (props: any) => {
 	const productOptionsProps = {
 		...props,
-		UIComponent: ProductOptionsUI,
-	};
+		productCart: {
+			...props.productCart,
+			quantity: props.productCart?.code
+				? props.productCart?.quantity
+				: props?.product?.minimum_per_order || 1
+		},
+		UIComponent: ProductOptionsUI
+	}
 
-	return <ProductOptions {...productOptionsProps} />;
+	return <ProductOptions {...productOptionsProps} />
 };
+
+ProductForm.defaultProps = {
+	productAddedToCartLength: 0
+}