ordering-ui-react-native 0.14.89 → 0.14.91-release

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

@@ -9,6 +9,8 @@ import {
 import {
 	PaymentOptions as PaymentOptionsController,
 	useLanguage,
+  ToastType,
+	useToast,
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { PaymentOptionCash } from '../PaymentOptionCash';
@@ -30,8 +32,6 @@ import {
 import { getIconCard, flatArray } from '../../utils';
 
 const stripeOptions: any = ['stripe_direct', 'stripe', 'stripe_connect']
-const methodsPay = ['google_pay', 'apple_pay']
-const stripeDirectMethods = ['stripe_direct', ...methodsPay]
 // const stripeRedirectOptions = [
 //   { name: 'Bancontact', value: 'bancontact' },
 //   { name: 'Alipay', value: 'alipay' },
@@ -54,12 +54,11 @@ const PaymentOptionsUI = (props: any) => {
 		handlePaymethodClick,
 		handlePaymethodDataChange,
 		isOpenMethod,
-		handlePaymentMethodClickCustom,
-		handlePlaceOrder
+		handlePaymentMethodClickCustom
 	} = props
 
 	const theme = useTheme();
-
+  const [, { showToast }] = useToast();
 
 	const getPayIcon = (method: string) => {
 		switch (method) {
@@ -95,11 +94,18 @@ const PaymentOptionsUI = (props: any) => {
 	// ]
 
 	const handlePaymentMethodClick = (paymethod: any) => {
-		const isPopupMethod = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect', 'paypal'].includes(paymethod?.gateway)
-		if (webViewPaymentGateway.includes(paymethod?.gateway)) {
-			handlePaymentMethodClickCustom(paymethod)
-		}
-		handlePaymethodClick(paymethod, isPopupMethod)
+    if (cart?.balance > 0) {
+      const isPopupMethod = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect', 'paypal'].includes(paymethod?.gateway)
+      if (webViewPaymentGateway.includes(paymethod?.gateway)) {
+        handlePaymentMethodClickCustom(paymethod)
+      }
+      handlePaymethodClick(paymethod, isPopupMethod)
+      return
+    }
+    showToast(
+			ToastType.Error,
+			t('CART_BALANCE_ZERO', 'Sorry, the amount to pay is equal to zero and it is not necessary to select a payment method'))
+		;
 	}
 
 	useEffect(() => {
@@ -120,12 +126,6 @@ const PaymentOptionsUI = (props: any) => {
 		}
 	}, [props.paySelected])
 
-	useEffect(() => {
-		if (methodsPay.includes(paymethodSelected?.gateway) && paymethodData?.id && paymethodSelected?.data?.card) {
-		  handlePlaceOrder()
-		}
-	}, [paymethodData, paymethodSelected])
-
 	const renderPaymethods = ({ item }: any) => {
 		return (
 			<TouchableOpacity
@@ -154,7 +154,7 @@ const PaymentOptionsUI = (props: any) => {
 		)
 	}
 
-	const excludeIds: any = [32]; //exclude paypal & connect & redirect
+	const excludeIds: any = [32, 66]; //exclude paypal & connect & redirect
 
 	return (
 		<PMContainer>
@@ -287,11 +287,11 @@ const PaymentOptionsUI = (props: any) => {
 				</KeyboardAvoidingView>
 			</OModal>
 
-			{/* Stripe direct, Google pay, Apple pay */}
+			{/* Stripe direct */}
 			<OModal
 				entireModal
 				title={t('ADD_CREDIT_OR_DEBIT_CARD', 'Add credit or debit card')}
-				open={stripeDirectMethods?.includes(isOpenMethod?.paymethod?.gateway) && !paymethodData.id}
+				open={isOpenMethod?.paymethod?.gateway === 'stripe_direct' && !paymethodData?.id}
 				onClose={() => handlePaymethodClick(null)}
 			>
 				<KeyboardAvoidingView
@@ -300,13 +300,10 @@ const PaymentOptionsUI = (props: any) => {
 					enabled={Platform.OS === 'ios' ? true : false}
 				>
 					<StripeElementsForm
-						cart={cart}
-						paymethod={isOpenMethod?.paymethod?.gateway}
-						methodsPay={methodsPay}
 						businessId={props.businessId}
-						publicKey={isOpenMethod?.paymethod?.credentials?.publishable || isOpenMethod?.paymethod?.credentials?.publishable_key}
+						publicKey={isOpenMethod?.paymethod?.credentials?.publishable}
 						handleSource={handlePaymethodDataChange}
-						onCancel={() => handlePaymethodClick(null)}
+						onCancel={() => handlePaymethodClick(false)}
 					/>
 				</KeyboardAvoidingView>
 			</OModal>

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

@@ -22,18 +22,23 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
 		textStyle,
 		flagStyle,
 		noDropIcon,
-    isDisabled
+    isDisabled,
+		isStartValidation
 	} = props
 
 	const theme = useTheme();
 
+	const [, t] = useLanguage()
+	const [{ configs }] = useConfig()
+	const phoneInput = useRef<PhoneInput>(null);
+	const [userphoneNumber, setUserphoneNumber] = useState('');
 
 	const style = StyleSheet.create({
 		input: {
 			backgroundColor: theme.colors.white,
 			borderRadius: 7.6,
 			borderWidth: 1,
-			borderColor: theme.colors.border,
+			borderColor: (isStartValidation && userphoneNumber === '') ? theme.colors.danger5 : theme.colors.border,
 			paddingBottom: 0,
 			paddingTop: 0,
 			flexGrow: 1,
@@ -48,12 +53,6 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
 		}
 	})
 
-
-	const [, t] = useLanguage()
-	const [{ configs }] = useConfig()
-	const phoneInput = useRef<PhoneInput>(null);
-	const [userphoneNumber, setUserphoneNumber] = useState('');
-
 	const handleChangeNumber = (number: any) => {
 		setUserphoneNumber(number)
 	}
@@ -97,6 +96,14 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
 
 	return (
 		<Wrapper onPress={() => forwardRef?.current?.focus?.()}>
+			{(isStartValidation && userphoneNumber === '') && (
+				<OText
+					size={14}
+					color={theme.colors.danger5}
+				>
+					{t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Mobile phone is required').replace('_attribute_', t('CELLPHONE', 'Cellphone'))}*
+				</OText>
+			)}
 			<PhoneInput
 				ref={phoneInput}
         disabled={isDisabled}

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

@@ -0,0 +1,114 @@
+import React, { useEffect, useState } from 'react'
+import { View } from 'react-native'
+import { PlaceSpot as PlaceSpotController, useLanguage } from 'ordering-components/native'
+import { PlaceGroupContainer, PlaceSpotContainer } from './styles'
+import { NotFoundSource } from '../NotFoundSource'
+import { OText, ODropDown } from '../shared'
+import { Placeholder, PlaceholderLine } from 'rn-placeholder'
+import { PlaceSpotParams } from '../../types'
+
+const PlaceSpotUI = (props: PlaceSpotParams) => {
+  const {
+    isOpenPlaceSpot,
+    cart,
+    placesState,
+    handleChangePlace,
+    getPlacesList,
+    setOpenPlaceModal
+  } = props
+
+  const [, t] = useLanguage()
+  const [placeGroupSelected, setPlaceGroupSelected] = useState<any>(null)
+
+  const getPlacesGroups = () => {
+    const groups = placesState.placeGroups?.filter((group: any) => group?.enabled && placesState?.places?.find((place: any) => place?.enabled && place?.place_group_id === group?.id))
+    return groups.map((group: any) => ({
+      value: group,
+      content: group?.name,
+      showOnSelected: group?.name
+    }))
+  }
+
+  const getPlaces = () => {
+    const places = placeGroupSelected && placesState?.places?.filter((place: any) => place?.enabled && place?.place_group_id === placeGroupSelected?.id)
+    return places.map((place: any) => ({
+      value: place,
+      content: place.name,
+      showOnSelected: place.name
+    }))
+  }
+
+  const handlerChangePlace = (place: any) => {
+    setOpenPlaceModal(false)
+    handleChangePlace(place)
+  }
+
+
+  useEffect(() => {
+    if (!placesState?.loading) {
+      const placeGroupOnCart = placesState?.placeGroups.find((group: any) => group?.id === cart?.place?.place_group_id)
+      setPlaceGroupSelected(placeGroupOnCart)
+    }
+  }, [placesState])
+
+  useEffect(() => {
+    getPlacesList()
+  }, [isOpenPlaceSpot])
+
+  return (
+    <PlaceSpotContainer>
+      {(placesState.error || placesState?.placeGroups?.length === 0) && !placesState?.loading && (
+        <NotFoundSource
+          content={t('NO_PLACES_THIS_BUSINESS', 'There are not places for this business')}
+        />
+      )}
+      {placesState?.loading && (
+        <Placeholder>
+          <PlaceGroupContainer>
+            <PlaceholderLine width={100} height={25} />
+            <PlaceholderLine height={30} />
+          </PlaceGroupContainer>
+          <View>
+            <PlaceholderLine width={120} height={25} />
+            <PlaceholderLine height={30} />
+          </View>
+        </Placeholder>
+      )}
+      {!(placesState.error || placesState?.placeGroups?.length === 0) && !placesState?.loading && (
+        <>
+          <PlaceGroupContainer>
+            <OText size={16} mBottom={10}>{t('PLACE_GROUP', 'Place group')}</OText>
+            <ODropDown
+              placeholder={t('PLACE_GROUP', 'Place group')}
+              options={getPlacesGroups()}
+              onSelect={(group: any) => setPlaceGroupSelected(group)}
+              defaultValue={placeGroupSelected ?? cart?.place}
+              isModal
+            />
+          </PlaceGroupContainer>
+          {placeGroupSelected && (
+            <View>
+              <OText size={16} mBottom={10}>{t('SELECT_YOUR_SPOT', 'Select your spot')}</OText>
+              <ODropDown
+                onSelect={(place: any) => handlerChangePlace(place)}
+                placeholder={t('SELECT_YOUR_SPOT', 'Select your spot')}
+                options={getPlaces()}
+                defaultValue={placesState?.places?.find((place : any) => place?.id === cart?.place_id)}
+                isModal
+              />
+            </View>
+          )}
+        </>
+      )}
+    </PlaceSpotContainer>
+  )
+}
+
+export const PlaceSpot = (props: PlaceSpotParams) => {
+  const placeSpotProps = {
+    ...props,
+    UIComponent: PlaceSpotUI
+  }
+
+  return <PlaceSpotController {...placeSpotProps} />
+}

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

@@ -0,0 +1,11 @@
+import styled from 'styled-components/native'
+
+export const PlaceSpotContainer = styled.View`
+  min-height: 300px;
+  padding: 20px;
+`
+
+export const PlaceGroupContainer = styled.View`
+  margin-bottom: 40px;
+  margin-top: 20px;
+`

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

@@ -86,6 +86,10 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
 					id: order?.id,
 					business_id: order?.business_id,
 					logo: order.business?.logo,
+					driver: order?.driver,
+					products: order?.products,
+					review: order?.review,
+					user_review: order?.user_review
 				},
 			});
 	};

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

@@ -37,7 +37,8 @@ import {
 	ExtraOptionWrap,
 	WeightUnitSwitch,
 	WeightUnitItem,
-	TopActions
+	TopActions,
+	ProductSummary
 } from './styles';
 import { OButton, OIcon, OInput, OText } from '../shared';
 import { ScrollView } from 'react-native-gesture-handler';
@@ -45,7 +46,6 @@ 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;
 
@@ -170,8 +170,11 @@ export const ProductOptionsUI = (props: any) => {
 		pieces: true
 	})
 	const [pricePerWeightUnit, setPricePerWeightUnit] = useState<any>(null)
-
+	const scrollViewRef = useRef<any>(null);
 	const swiperRef: any = useRef(null)
+	const [optionLayout, setOptionLayout] = useState<any>({})
+	const [headerRefHeight, setHeaderRefHeight] = useState(0)
+	const [summaryRefHeight, setSummaryRefHeight] = useState(0)
 
 	const isError = (id: number) => {
 		let bgColor = theme.colors.white;
@@ -253,6 +256,28 @@ export const ProductOptionsUI = (props: any) => {
 		handleChangeProductCartQuantity(quantity)
 	}
 
+	const scrollDown = (id: any) => {
+		const isErrors = Object.values(errors).length > 0
+		if (!isErrors) {
+			return
+		}
+		const targetOptionId = Object.getOwnPropertyNames(errors).filter(item => !item.includes(id))[0]
+		const targetY = optionLayout[targetOptionId]?.y
+		if (targetY) {
+			scrollViewRef.current.scrollTo({
+				y: targetY + headerRefHeight + summaryRefHeight,
+				animated: true
+			})
+		}
+	}
+
+	const handleOnLayout = (event: any, optionId: any) => {
+		const _optionLayout = { ...optionLayout }
+		const optionKey = 'id:' + optionId
+		_optionLayout[optionKey] = { y: event.nativeEvent.layout?.y }
+		setOptionLayout(_optionLayout)
+	}
+
 	useEffect(() => {
 		const imageList: any = []
 		const videoList: any = []
@@ -264,8 +289,24 @@ export const ProductOptionsUI = (props: any) => {
 				}
 				if (img?.video) {
 					const keys = img?.video.split('/')
-					const _videoId = keys[keys.length - 1]
-					videoList.push(_videoId)
+					let _videoId = keys[keys.length - 1]
+
+					if (_videoId.includes('watch')) {
+					  const __url = _videoId.split('=')[1]
+					  _videoId = __url
+					} else if (_videoId.includes('?')) {
+					  const __url = _videoId.split('?')[0]
+					  _videoId = __url
+					}
+
+					if (_videoId.search(/&/i) >= 0) {
+					  _videoId = _videoId.split('&')[0]
+					} else if (_videoId.search(/\?/i) >= 0) {
+					  _videoId = _videoId.split('?')[0]
+					}
+					if ((_videoId.length === 11)) {
+					  videoList.push(_videoId)
+					}
 				}
 			}
 		}
@@ -304,9 +345,9 @@ export const ProductOptionsUI = (props: any) => {
 					</OText>
 				</TouchableOpacity>
 			)}
-			{options.map(({ id, name, respect_to }: any) => (
+			{options.map(({ id, name, respect_to, suboptions }: any) => (
 				<React.Fragment key={`cont_key_${id}`}>
-					{respect_to == null && (
+					{respect_to == null && suboptions?.length > 0 && (
 						<TouchableOpacity
 							key={`eopt_key_${id}`}
 							onPress={() => setSelectedOpt(id)}
@@ -343,10 +384,10 @@ export const ProductOptionsUI = (props: any) => {
 					<OIcon src={theme.images.general.arrow_left} width={15} />
 				</TopActions>
 			</TopHeader>
-			<ScrollView>
+			<ScrollView ref={scrollViewRef}>
 				{!error && (
 					<View style={{ paddingBottom: 80 }}>
-						<WrapHeader>
+						<WrapHeader onLayout={(event: any) => setHeaderRefHeight(event.nativeEvent.layout?.height)}>
 							{loading && !product ? (
 								<View style={styles.productHeaderSkeleton}>
 									<Placeholder Animation={Fade}>
@@ -396,7 +437,7 @@ export const ProductOptionsUI = (props: any) => {
 													<FastImage
 														style={{ height: '100%', opacity: isSoldOut ? 0.5 : 1 }}
 														source={{
-															uri: optimizeImage(img, 'h_258,c_limit'),
+															uri: optimizeImage(img, 'h_1024,c_limit'),
 															priority: FastImage.priority.normal,
 														}}
 													/>
@@ -470,96 +511,98 @@ export const ProductOptionsUI = (props: any) => {
 							)}
 						</WrapHeader>
 						<WrapContent>
-							<ProductTitle>
-								{loading && !product ? (
-									<Placeholder Animation={Fade}>
-										<View
-											style={{
-												flexDirection: 'row',
-												justifyContent: 'space-between',
-											}}>
-											<PlaceholderLine width={40} height={20} />
-											<PlaceholderLine width={30} height={20} />
-										</View>
-									</Placeholder>
-								) : (
-									<>
-										<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
+							<ProductSummary onLayout={(event: any) => setSummaryRefHeight(event.nativeEvent.layout?.height)}>
+								<ProductTitle>
+									{loading && !product ? (
+										<Placeholder Animation={Fade}>
+											<View
+												style={{
+													flexDirection: 'row',
+													justifyContent: 'space-between',
+												}}>
+												<PlaceholderLine width={40} height={20} />
+												<PlaceholderLine width={30} height={20} />
+											</View>
+										</Placeholder>
+									) : (
+										<>
+											<View style={{ flexDirection: 'row' }}>
+												<OText
+													size={20}
+													lineHeight={30}
+													weight={'600'}
+													style={{ flex: 1, marginBottom: 10 }}>
+													{product?.name || productCart.name}
 												</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}>
-												{
-													((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1'))
-													&& <>{t('SKU', 'Sku')}{' '}{product?.sku || productCart?.sku}</>
-												}
-												{product?.sku && product?.sku !== '-1' && product?.sku !== '1' && product?.estimated_person && (
-													<>&nbsp;&#183;&nbsp;</>
-												)}
-												{product?.estimated_person
-													&& <>{product?.estimated_person}{' '}{t('ESTIMATED_PERSONS', 'persons')}</>
-												}
-											</OText>
-										)}
-										{isHaveWeight ? (
-											<OText size={16} lineHeight={24} color={theme.colors.primary}>{parsePrice(pricePerWeightUnit)} / {product?.weight_unit}</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 !== null && product?.in_offer && (
-													<OText style={{
-														fontSize: 14,
-														color: '#808080',
-														textDecorationLine: 'line-through',
-														marginLeft: 7,
-														marginRight: 7
-													}}>{product?.offer_price ? parsePrice(product?.offer_price) : ''}</OText>
+												{!!product?.calories && (
+													<OText size={16} style={{ color: '#808080' }}>{product?.calories} cal
+													</OText>
 												)}
 											</View>
-										)}
-									</>
-								)}
-							</ProductTitle>
-							<ProductDescription>
-								<OText color={theme.colors.textSecondary} size={12} lineHeight={18}>
-									{product?.description || productCart?.description}
-								</OText>
-							</ProductDescription>
-							<ScrollView
-								horizontal
-								showsHorizontalScrollIndicator={false}
-								contentContainerStyle={{ paddingBottom: 30 }}
-							>
-								{product?.tags?.map((tag: any) => (
-									<View
-										key={tag.id}
-										style={styles.productTagWrapper}
-									>
-										{!!tag?.image ? (
-											<OIcon
-												url={optimizeImage(tag?.image, 'h_40,c_limit')}
-												style={styles.productTagImageStyle}
-											/>
-										) : (
-											<OIcon
-												src={theme.images?.dummies?.product}
-												style={styles.productTagImageStyle}
-											/>
-										)}
-										<OText color={theme.colors.textSecondary} size={12} style={styles.productTagNameStyle}>{tag.name}</OText>
-									</View>
-								))}
-							</ScrollView>
+											{((!!product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (!!product?.estimated_person)) && (
+												<OText size={14} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={'#909BA9'} mBottom={7}>
+													{
+														((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1'))
+														&& <>{t('SKU', 'Sku')}{' '}{product?.sku || productCart?.sku}</>
+													}
+													{product?.sku && product?.sku !== '-1' && product?.sku !== '1' && product?.estimated_person && (
+														<>&nbsp;&#183;&nbsp;</>
+													)}
+													{product?.estimated_person
+														&& <>{product?.estimated_person}{' '}{t('ESTIMATED_PERSONS', 'persons')}</>
+													}
+												</OText>
+											)}
+											{isHaveWeight ? (
+												<OText size={16} lineHeight={24} color={theme.colors.primary}>{parsePrice(pricePerWeightUnit)} / {product?.weight_unit}</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 !== null && product?.in_offer && (
+														<OText style={{
+															fontSize: 14,
+															color: '#808080',
+															textDecorationLine: 'line-through',
+															marginLeft: 7,
+															marginRight: 7
+														}}>{product?.offer_price ? parsePrice(product?.offer_price) : ''}</OText>
+													)}
+												</View>
+											)}
+										</>
+									)}
+								</ProductTitle>
+								<ProductDescription>
+									<OText color={theme.colors.textSecondary} size={12} lineHeight={18}>
+										{product?.description || productCart?.description}
+									</OText>
+								</ProductDescription>
+								<ScrollView
+									horizontal
+									showsHorizontalScrollIndicator={false}
+									contentContainerStyle={{ paddingBottom: 30 }}
+								>
+									{product?.tags?.map((tag: any) => (
+										<View
+											key={tag.id}
+											style={styles.productTagWrapper}
+										>
+											{!!tag?.image ? (
+												<OIcon
+													url={optimizeImage(tag?.image, 'h_40,c_limit')}
+													style={styles.productTagImageStyle}
+												/>
+											) : (
+												<OIcon
+													src={theme.images?.dummies?.product}
+													style={styles.productTagImageStyle}
+												/>
+											)}
+											<OText color={theme.colors.textSecondary} size={12} style={styles.productTagNameStyle}>{tag.name}</OText>
+										</View>
+									))}
+								</ScrollView>
+							</ProductSummary>
 							{loading && !product ? (
 								<>
 									{[...Array(2)].map((item, i) => (
@@ -658,7 +701,7 @@ export const ProductOptionsUI = (props: any) => {
 													return (
 														<React.Fragment key={`popt_${option.id}`}>
 															{showOption(option) && (
-																<View style={styles.optionContainer}>
+																<View style={styles.optionContainer} onLayout={(event: any) => handleOnLayout(event, option?.id)}>
 																	<ProductOption
 																		option={option}
 																		currentState={currentState}
@@ -695,6 +738,8 @@ export const ProductOptionsUI = (props: any) => {
 																								isSoldOut ||
 																								maxProductQuantity <= 0
 																							}
+																							scrollDown={scrollDown}
+																							error={errors[`id:${option.id}`]}
 																						/>
 																					);
 																				},
@@ -834,9 +879,13 @@ export const ProductOptionsUI = (props: any) => {
 			</ScrollView>
 			{!loading && !error && product && (
 				<ProductActions ios={Platform?.OS === 'ios'}>
-					<OText size={16} lineHeight={24} weight={'600'}>
-						{productCart.total ? parsePrice(productCart?.total) : ''}
-					</OText>
+					<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
@@ -855,7 +904,7 @@ export const ProductOptionsUI = (props: any) => {
 							{qtyBy?.pieces && (
 								<TextInput
 									keyboardType='numeric'
-									value={`${productCart?.quantity > 0 ? productCart?.quantity: ''}`}
+									value={`${productCart?.quantity > 0 ? productCart?.quantity : ''}`}
 									onChangeText={(val: any) => onChangeProductCartQuantity(parseInt(val))}
 									editable={!orderState.loading}
 									style={{
@@ -949,14 +998,14 @@ export const ProductOptionsUI = (props: any) => {
 												? t('UPDATE', 'Update')
 												: t('ADD', 'Add')
 										}`}
-									isDisabled={isSoldOut || maxProductQuantity <= 0}
+									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 ? theme.colors.lightGray : theme.colors.primary,
-										borderColor: saveErrors || isSoldOut || maxProductQuantity <= 0 ? theme.colors.white : theme.colors.primary,
+										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,