ordering-ui-react-native 0.15.16 → 0.15.17-release

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

@@ -2,12 +2,12 @@ import React, { useState, useEffect } from 'react'
 import { OrderList, useLanguage, useOrder, ToastType, useToast } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 import { useFocusEffect } from '@react-navigation/native'
-import { OText, OButton } from '../shared'
+import { OText } from '../shared'
 import { NotFoundSource } from '../NotFoundSource'
 import { ActiveOrders } from '../ActiveOrders'
 import { PreviousOrders } from '../PreviousOrders'
 
-import { OptionTitle, NoOrdersWrapper } from './styles'
+import { OptionTitle } from './styles'
 import { OrdersOptionParams } from '../../types'
 
 import {
@@ -33,7 +33,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 		loadMoreOrders,
 		loadOrders,
 		setOrdersLength,
-		ordersLength
+		ordersLength,
+		refreshOrders,
+		setRefreshOrders
 	} = props
 
 	const theme = useTheme();
@@ -95,7 +97,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 			{ key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', 'Customer almost arrived to business') },
 			{ key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business') },
 			{ key: 22, value: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver') },
-			{ key: 23, value: t('ORDER_DRIVER_ON_WAY', 'Driver on way') }
+      		{ key: 23, value: t('ORDER_DRIVER_ON_WAY', 'Driver on way') }
 		]
 
 		const objectStatus = orderStatus.find((o) => o.key === status)
@@ -105,9 +107,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 
 	useFocusEffect(
 		React.useCallback(() => {
-			loadOrders()
+			loadOrders(false, false, false, true)
 		}, [navigation])
-	)
+	  )
 
 	useEffect(() => {
 		const hasMore = pagination?.totalPages && pagination?.currentPage !== pagination?.totalPages
@@ -128,23 +130,16 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 		}
 	}, [orders, activeOrders])
 
+	useEffect(() => {
+		if(refreshOrders){
+			loadOrders(false, false, false, true)
+			setRefreshOrders && setRefreshOrders(false)
+		}
+	}, [refreshOrders])
+
 	return (
 		<>
-			{!loading && ordersLength.activeOrdersLength === 0 && ordersLength.previousOrdersLength === 0 && !activeOrders && (
-				<NoOrdersWrapper>
-					<OText size={14} numberOfLines={1}>
-						{t('YOU_DONT_HAVE_ORDERS', 'You don\'t have any orders')}
-					</OText>
-					<OButton
-						text={t('ORDER_NOW', 'Order now')}
-						onClick={() => onNavigationRedirect && onNavigationRedirect('BusinessList')}
-						textStyle={{ color: 'white', fontSize: 14 }}
-						style={{ borderRadius: 7.6, marginBottom: 10, marginTop: 10, height: 44, paddingLeft: 10, paddingRight: 10 }}
-					/>
-
-				</NoOrdersWrapper>
-			)}
-			{(ordersLength.activeOrdersLength > 0 || ordersLength.previousOrdersLength > 0) && (
+			{(orders.length > 0) && (
 				<>
 					<OptionTitle>
 						<OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={10} >
@@ -155,18 +150,15 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 									: t('PAST', 'Past'))}
 						</OText>
 					</OptionTitle>
-					{!(ordersLength.activeOrdersLength === 0 && ordersLength.previousOrdersLength === 0) &&
-						!loading &&
-						orders.filter((order: any) => orderStatus.includes(order.status)).length === 0 &&
-						(
-							<NotFoundSource
-								content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
-								image={imageFails}
-								conditioned
-							/>
-						)}
 				</>
 			)}
+			{!loading && orders.length === 0 && (
+				<NotFoundSource
+					content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
+					image={imageFails}
+					conditioned
+				/>
+			)}
 			{loading && (
 				<>
 					{!activeOrders ? (
@@ -239,8 +231,8 @@ export const OrdersOption = (props: OrdersOptionParams) => {
 		...props,
 		UIComponent: OrdersOptionUI,
 		orderStatus: props.preOrders ? [13] : props.activeOrders
-			? [0, 3, 4, 7, 8, 9, 14, 15, 18, 19, 20, 21, 22, 23]
-			: [1, 2, 5, 6, 10, 11, 12, 16, 17],
+			? [0, 3, 4, 7, 8, 9, 14, 18, 19, 20, 21, 22, 23]
+			: [1, 2, 5, 6, 10, 11, 12, 15, 16, 17],
 		useDefualtSessionManager: true,
 	}
 

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

@@ -3,9 +3,3 @@ import styled from 'styled-components/native'
 export const OptionTitle = styled.View`
 	margin-top: 24px;
 `
-
-export const NoOrdersWrapper = styled.View`
-	flex-direction: column;
-	align-items: center;
-	margin-top: 50px;
-`

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

@@ -20,6 +20,7 @@ import { OText } from '../shared'
 
 const PaymentOptionWalletUI = (props: any) => {
   const {
+    businessConfigs,
     businessId,
     walletsState,
     selectWallet,
@@ -37,6 +38,9 @@ const PaymentOptionWalletUI = (props: any) => {
   const isWalletCashEnabled = configs?.wallet_cash_enabled?.value === '1'
   const isWalletPointsEnabled = configs?.wallet_credit_point_enabled?.value === '1'
 
+  const isBusinessWalletCashEnabled = businessConfigs.find((config: any) => config.key === 'wallet_cash_enabled')?.value === '1'
+  const isBusinessWalletPointsEnabled = businessConfigs.find((config: any) => config.key === 'wallet_credit_point_enabled')?.value === '1'
+
   const styles = StyleSheet.create({
     checkBoxStyle: {
       width: 25,
@@ -53,11 +57,11 @@ const PaymentOptionWalletUI = (props: any) => {
   const walletName: any = {
     cash: {
       name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet'),
-      isActive: isWalletCashEnabled
+      isActive: isWalletCashEnabled && isBusinessWalletCashEnabled
     },
     credit_point: {
       name: t('PAY_WITH_CREDITS_POINTS_WALLET', 'Pay with Credit Points Wallet'),
-      isActive: isWalletPointsEnabled
+      isActive: isWalletPointsEnabled && isBusinessWalletPointsEnabled
     }
   }
 
@@ -96,17 +100,19 @@ const PaymentOptionWalletUI = (props: any) => {
             <Container
               key={wallet.id}
               isBottomBorder={idx === walletsState.result?.filter((wallet: any) => wallet.valid)?.length - 1}
+              onPress={() => handleOnChange(idx, wallet)}
+              disabled={(cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0}
             >
               <SectionLeft>
                 <CheckBox
                   value={checkedState[idx]}
-                  onValueChange={() => handleOnChange(idx, wallet)}
-                  disabled={(cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0 }
+                  disabled={(cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0}
                   boxType={'square'}
                   tintColors={{
                     true: theme.colors.primary,
                     false: theme.colors.disabled
                   }}
+                  onChange={() => handleOnChange(idx, wallet)}
                   tintColor={theme.colors.disabled}
                   onCheckColor={theme.colors.primary}
                   onTintColor={theme.colors.primary}

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

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components/native'
 
-export const Container = styled.View`
+export const Container = styled.TouchableOpacity`
   width: 100%;
   display: flex;
   padding: 20px 0;

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

@@ -32,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' },
@@ -56,8 +54,7 @@ const PaymentOptionsUI = (props: any) => {
 		handlePaymethodClick,
 		handlePaymethodDataChange,
 		isOpenMethod,
-		handlePaymentMethodClickCustom,
-		handlePlaceOrder
+		handlePaymentMethodClickCustom
 	} = props
 
 	const theme = useTheme();
@@ -125,16 +122,12 @@ const PaymentOptionsUI = (props: any) => {
 
 	useEffect(() => {
 		if (props.paySelected && props.paySelected?.data) {
-			setPaymethodData && setPaymethodData(props.paySelected?.data)
+			requestAnimationFrame(() => {
+				setPaymethodData && setPaymethodData(props.paySelected?.data)
+			})
 		}
 	}, [props.paySelected])
 
-	useEffect(() => {
-		if (methodsPay.includes(paymethodSelected?.gateway) && paymethodData?.id && paymethodSelected?.data?.card) {
-		  handlePlaceOrder()
-		}
-	}, [paymethodData, paymethodSelected])
-
 	const renderPaymethods = ({ item }: any) => {
 		return (
 			<TouchableOpacity
@@ -163,7 +156,7 @@ const PaymentOptionsUI = (props: any) => {
 		)
 	}
 
-	const excludeIds: any = [32]; //exclude paypal & connect & redirect
+	const excludeIds: any = [32, 66]; //exclude paypal & connect & redirect
 
 	return (
 		<PMContainer>
@@ -296,11 +289,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
@@ -309,13 +302,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/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

@@ -85,7 +85,11 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
 				order: {
 					id: order?.id,
 					business_id: order?.business_id,
-					logo: order.business?.logo,
+					logo: order?.business?.logo,
+					driver: order?.driver,
+					products: order?.products,
+					review: order?.review,
+					user_review: order?.user_review
 				},
 			});
 	};
@@ -139,18 +143,20 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
 							</OText>
 						</Information>
 						<Status>
-							<OButton
-								text={t('REORDER', 'Reorder')}
-								imgRightSrc={''}
-								textStyle={styles.buttonText}
-								style={
-									reorderLoading && order.id === reorderSelected
-										? styles.reorderLoading
-										: styles.reorderbutton
-								}
-								onClick={() => handleReorderClick(order.id)}
-								isLoading={reorderLoading && order.id === reorderSelected}
-							/>
+							{order.cart && (
+								<OButton
+									text={t('REORDER', 'Reorder')}
+									imgRightSrc={''}
+									textStyle={styles.buttonText}
+									style={
+										reorderLoading && order.id === reorderSelected
+											? styles.reorderLoading
+											: styles.reorderbutton
+									}
+									onClick={() => handleReorderClick(order.id)}
+									isLoading={reorderLoading && order.id === reorderSelected}
+								/>
+							)}
 							{allowedOrderStatus.includes(parseInt(order?.status)) &&
 								!order.review && (
 									<TouchableOpacity

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

@@ -46,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;
 
@@ -291,15 +290,23 @@ export const ProductOptionsUI = (props: any) => {
 				if (img?.video) {
 					const keys = img?.video.split('/')
 					let _videoId = keys[keys.length - 1]
+
 					if (_videoId.includes('watch')) {
 						const __url = _videoId.split('=')[1]
 						_videoId = __url
-					}
-					if (_videoId.includes('?')) {
+					} else if (_videoId.includes('?')) {
 						const __url = _videoId.split('?')[0]
 						_videoId = __url
 					}
-					videoList.push(_videoId)
+
+					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)
+					}
 				}
 			}
 		}
@@ -319,28 +326,9 @@ export const ProductOptionsUI = (props: any) => {
 
 	const ExtraOptions = ({ eID, options }: any) => (
 		<>
-			{product?.ingredients.length > 0 && (
-				<TouchableOpacity
-					key={`eopt_all_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('INGREDIENTS', 'Ingredients')}
-					</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)}
@@ -658,6 +646,25 @@ export const ProductOptionsUI = (props: any) => {
 												{t('ALL', 'All')}
 											</OText>
 										</TouchableOpacity>
+										{product?.ingredients.length > 0 && (
+											<TouchableOpacity
+												key={`eopt_all_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('INGREDIENTS', 'Ingredients')}
+												</OText>
+											</TouchableOpacity>
+										)}
 										{product?.extras.map((extra: any) =>
 											<ExtraOptions key={extra.id} options={extra.options} />
 										)}
@@ -687,8 +694,8 @@ export const ProductOptionsUI = (props: any) => {
 													</WrapperIngredients>
 												</View>
 											)}
-											{product?.extras.map((extra: any) =>
-												extra.options.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 (
@@ -704,7 +711,7 @@ export const ProductOptionsUI = (props: any) => {
 																				backgroundColor: isError(option.id),
 																				borderRadius: 7.6
 																			}}>
-																			{option.suboptions.map(
+																			{option.suboptions.sort((a: any, b: any) => a.rank - b.rank).map(
 																				(suboption: any) => {
 																					const currentState =
 																						productCart.options[
@@ -772,7 +779,7 @@ export const ProductOptionsUI = (props: any) => {
 											) : (
 												<>
 													{product?.extras.map((extra: any) =>
-														extra.options.map((option: any) => {
+														extra.options.sort((a: any, b: any) => a.rank - b.rank).map((option: any) => {
 															if (
 																option.id == selOpt ||
 																(hasRespected(
@@ -797,7 +804,7 @@ export const ProductOptionsUI = (props: any) => {
 																								option.id,
 																							),
 																						}}>
-																						{option.suboptions.map(
+																						{option.suboptions.sort((a: any, b: any) => a.rank - b.rank).map(
 																							(suboption: any) => {
 																								const currentState =
 																									productCart.options[
@@ -887,7 +894,6 @@ export const ProductOptionsUI = (props: any) => {
 								<OIcon
 									src={theme.images.general.minus}
 									width={16}
-									style={{ borderWidth: 1, borderColor: 'red' }}
 									color={
 										productCart.quantity === 1 || isSoldOut
 											? theme.colors.backgroundGray
@@ -931,7 +937,6 @@ export const ProductOptionsUI = (props: any) => {
 								<OIcon
 									src={theme.images.general.plus}
 									width={16}
-									style={{ borderWidth: 1, borderColor: 'red' }}
 									color={
 										maxProductQuantity <= 0 ||
 											productCart.quantity >= maxProductQuantity ||
@@ -993,14 +998,14 @@ export const ProductOptionsUI = (props: any) => {
 												? t('UPDATE', 'Update')
 												: t('ADD', 'Add')
 										}`}
-									isDisabled={isSoldOut || maxProductQuantity <= 0 || productCart?.quantity < product?.minimum_per_order || productCart?.quantity > product?.maximum_per_order}
+									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 || productCart?.quantity < product?.minimum_per_order || productCart?.quantity > product?.maximum_per_order ? theme.colors.lightGray : theme.colors.primary,
-										borderColor: saveErrors || isSoldOut || maxProductQuantity <= 0 || productCart?.quantity < product?.minimum_per_order || productCart?.quantity > product?.maximum_per_order ? 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,

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

@@ -6,9 +6,10 @@ export const WrapHeader = styled.View`
 `
 
 export const TopActions = styled.TouchableOpacity`
-	height: 44px;
+	height: 60px;
 	justify-content: center;
   padding-horizontal: 30px;
+  width: 80px;
 `;
 
 export const TopHeader = styled.View`
@@ -48,7 +49,6 @@ export const ProductDescription = styled.View`
 `
 
 export const ProductEditions = styled.View`
-
 `
 
 export const SectionTitle = styled.View`

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

@@ -128,9 +128,11 @@ export const ProductOptionSubOptionUI = (props: any) => {
 						</>
 					)}
 				</PositionControl>
-				<OText size={12} lineHeight={18} color={theme.colors.textSecondary}>
-					+ {parsePrice(price)}
-				</OText>
+				{price > 0 && (
+					<OText size={12} lineHeight={18} color={theme.colors.textSecondary}>
+						+ {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>}
 		</View>