ordering-ui-react-native 0.21.77-release → 0.21.78-release

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.21.77-release",
+  "version": "0.21.78-release",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, useRef } from 'react';
+import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
 import { View, StyleSheet, TouchableOpacity, Platform, I18nManager, ScrollView, Keyboard, BackHandler, SafeAreaView } from 'react-native';
 import { initStripe, useConfirmPayment } from '@stripe/stripe-react-native';
 import NativeStripeSdk from '@stripe/stripe-react-native/src/NativeStripeSdk'
@@ -7,7 +7,7 @@ import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
 import IconAntDesign from 'react-native-vector-icons/AntDesign';
 import { useIsFocused } from '@react-navigation/native';
 
-import ReactNativeHapticFeedback from "react-native-haptic-feedback";
+import ReactNativeHapticFeedback, { HapticFeedbackTypes } from "react-native-haptic-feedback";
 import {
 	Checkout as CheckoutController,
 	useOrder,
@@ -15,7 +15,6 @@ import {
 	useApi,
 	useLanguage,
 	useUtils,
-	useValidationFields,
 	useConfig,
 	useToast,
 	ToastType,
@@ -103,7 +102,8 @@ const CheckoutUI = (props: any) => {
 		setPlaceSpotNumber,
 		maxDate,
 		androidAppId,
-		urlscheme
+		urlscheme,
+		checkoutFieldsState
 	} = props
 
 	const theme = useTheme();
@@ -145,12 +145,11 @@ const CheckoutUI = (props: any) => {
 
 	const [, { showToast }] = useToast();
 	const [, t] = useLanguage();
-	const [{ user, token }, { login }] = useSession();
+	const [{ user, token, loading: userLoading }, { login }] = useSession();
 	const [ordering] = useApi()
 	const [{ configs }] = useConfig();
 	const [{ parsePrice, parseDate }] = useUtils();
 	const [{ options, carts, loading }, { confirmCart }] = useOrder();
-	const [validationFields] = useValidationFields();
 	const [events] = useEvent()
 	const [orientationState] = useDeviceOrientation();
 	const [isReadMore, setIsReadMore] = useState(false)
@@ -167,6 +166,7 @@ const CheckoutUI = (props: any) => {
 	const [webviewPaymethod, setWebviewPaymethod] = useState<any>(null)
 	const [isOpen, setIsOpen] = useState(false)
 	const [requiredFields, setRequiredFields] = useState<any>([])
+	const [orderTypeValidationFields, setOrderTypeValidationFields] = useState<any>([])
 	const [openModal, setOpenModal] = useState({ login: false, signup: false, isGuest: false })
 	const [allowedGuest, setAllowedGuest] = useState(false)
 	const [placeByMethodPay, setPlaceByMethodPay] = useState(false)
@@ -178,6 +178,14 @@ const CheckoutUI = (props: any) => {
 	const containerRef = useRef<any>()
 	const cardsMethods = ['credomatic']
 	const stripePaymethods: any = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect']
+	const notFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'zipcode', 'address_notes', 'comments']
+
+	const checkoutFields = useMemo(() => checkoutFieldsState?.fields?.filter((field : any) => field.order_type_id === options?.type), [checkoutFieldsState, options])
+	const guestCheckoutDriveTip = useMemo(() => checkoutFields?.find((field : any) => field.order_type_id === 1 && field?.validation_field?.code === 'driver_tip'), [JSON.stringify(checkoutFields), options])
+	const guestCheckoutComment = useMemo(() => checkoutFields?.find((field : any) => field.order_type_id === options?.type && field?.validation_field?.code === 'comments'), [JSON.stringify(checkoutFields), options])
+	const guestCheckoutCoupon = useMemo(() => checkoutFields?.find((field : any) => field.order_type_id === options?.type && field?.validation_field?.code === 'coupon'), [JSON.stringify(checkoutFields), options])
+	const guestCheckoutZipcode = useMemo(() => checkoutFields?.find((field : any) => field.order_type_id === options?.type && field?.validation_field?.code === 'zipcode'), [JSON.stringify(checkoutFields), options])
+
 	const placeSpotTypes = [3, 4, 5]
 	const placeSpotsEnabled = placeSpotTypes.includes(options?.type)
 	const businessConfigs = businessDetails?.business?.configs ?? []
@@ -202,27 +210,28 @@ const CheckoutUI = (props: any) => {
 		return acc = acc
 	}, cart?.subtotal)
 
-	const validateCommentsCartField = validationFields?.fields?.checkout?.comments?.enabled && validationFields?.fields?.checkout?.comments?.required && (cart?.comment === null || cart?.comment?.trim().length === 0)
-	const validateZipcodeCard = validationFields?.fields?.card?.zipcode?.enabled &&
-		validationFields?.fields?.card?.zipcode?.required &&
-		paymethodSelected?.data?.card &&
-		!paymethodSelected?.data?.card?.zipcode &&
-		paymethodSelected?.gateway === 'stripe'
+	const validateCommentsCartField = (guestCheckoutComment?.enabled && (user?.guest_id ? guestCheckoutComment?.required_with_guest : guestCheckoutComment?.required)) && (cart?.comment === null || cart?.comment?.trim().length === 0)
+	const validateDriverTipField = options.type === 1 && (guestCheckoutDriveTip?.enabled && (user?.guest_id ? guestCheckoutDriveTip?.required_with_guest : guestCheckoutDriveTip?.required)) && (Number(cart?.driver_tip) <= 0)
+	const validateCouponField = (guestCheckoutCoupon?.enabled && (user?.guest_id ? guestCheckoutCoupon?.required_with_guest : guestCheckoutCoupon?.required)) && !cart?.offers?.some((offer : any) => offer?.type === 2)
+	const validateZipcodeCard = (guestCheckoutZipcode?.enabled && (user?.guest_id ? guestCheckoutZipcode?.required_with_guest : guestCheckoutZipcode?.required)) && paymethodSelected?.gateway === 'stripe' && paymethodSelected?.data?.card && !paymethodSelected?.data?.card?.zipcode
 
 	const isDisabledButtonPlace = loading || !cart?.valid || (!paymethodSelected && cart?.balance > 0) ||
 		placing || errorCash || subtotalWithTaxes < cart?.minimum ||
 		(cardsMethods.includes(paymethodSelected?.gateway) && cardList?.cards?.length === 0) ||
-		(options.type === 1 && !isGiftCardCart &&
-			validationFields?.fields?.checkout?.driver_tip?.enabled &&
-			validationFields?.fields?.checkout?.driver_tip?.required &&
-			(Number(cart?.driver_tip) <= 0)) ||
 		(validateCommentsCartField) ||
-		(validateZipcodeCard)
-		|| (methodsPay.includes(paymethodSelected?.gateway) && (!methodPaySupported.enabled || methodPaySupported.loading))
+		(validateDriverTipField && !isGiftCardCart) ||
+		(validateZipcodeCard) ||
+		(methodsPay.includes(paymethodSelected?.gateway) && (!methodPaySupported.enabled || methodPaySupported.loading)) ||
+		validateCommentsCartField ||
+		validateDriverTipField ||
+		validateCouponField ||
+		validateZipcodeCard
+
 
 	const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
 		? JSON.parse(configs?.driver_tip_options?.value) || []
 		: configs?.driver_tip_options?.value || []
+	const driverTipsField = !cartState.loading && cart && cart?.business_id && options.type === 1 && cart?.status !== 2 && (guestCheckoutDriveTip?.enabled) && driverTipsOptions.length > 0
 
 	const configTypes = configs?.order_types_allowed?.value.split('|').map((value: any) => Number(value)) || []
 
@@ -243,7 +252,7 @@ const CheckoutUI = (props: any) => {
 		}
 	}
 
-	const vibrateApp = (impact?: string) => {
+	const vibrateApp = (impact?: HapticFeedbackTypes) => {
 		const options = {
 			enableVibrateFallback: true,
 			ignoreAndroidSystemSettings: false
@@ -270,7 +279,7 @@ const CheckoutUI = (props: any) => {
 			return
 		}
 
-		if (!userErrors.length && (!requiredFields?.length || allowedGuest) || forcePlace) {
+		if (!userErrors.length && (!requiredFields?.length) || forcePlace) {
 			vibrateApp()
 			handlerClickPlaceOrder && handlerClickPlaceOrder(null, { isNative: true }, confirmPayment, NativeStripeSdk?.dismissPlatformPay)
 			return
@@ -309,35 +318,55 @@ const CheckoutUI = (props: any) => {
 
 	const checkValidationFields = () => {
 		setUserErrors([])
-		const errors = []
-		const notFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'zipcode', 'address_notes', 'comments']
-		const _requiredFields: any = []
-
-		Object.values(validationFields?.fields?.checkout).map((field: any) => {
-			if (field?.required && !notFields.includes(field.code) && field?.enabled) {
-				if (!user[field?.code]) {
-					_requiredFields.push(field?.code)
+		const errors: Array<string> = []
+		const userSelected = user
+		const _requiredFields: Array<string> = []
+		Object.values(checkoutFieldsState?.fields).map((field: any) => {
+			if (options?.type === field?.order_type_id &&
+				field?.enabled &&
+				field?.required &&
+				!notFields.includes(field?.validation_field?.code)
+			) {
+				if (userSelected && !userSelected[field?.validation_field?.code]) {
+					_requiredFields.push(field?.validation_field?.code)
 				}
 			}
 		})
-
+		const mobilePhoneField: any = Object.values(checkoutFieldsState?.fields)?.find((field: any) => field?.order_type_id === options?.type && field?.validation_field?.code === 'mobile_phone')
 		if (
-			!user?.cellphone &&
-			((validationFields?.fields?.checkout?.cellphone?.enabled &&
-				validationFields?.fields?.checkout?.cellphone?.required) ||
+			userSelected &&
+			!userSelected?.cellphone &&
+			((mobilePhoneField?.enabled &&
+				mobilePhoneField?.required) ||
 				configs?.verification_phone_required?.value === '1')
 		) {
 			_requiredFields.push('cellphone')
 		}
 		setRequiredFields(_requiredFields)
 
-		if (phoneUpdate) {
-			errors.push(t('NECESSARY_UPDATE_COUNTRY_PHONE_CODE', 'It is necessary to update your phone number'))
-		}
-
 		setUserErrors(errors)
 	}
 
+	const checkGuestValidationFields = () => {
+		const userSelected = user
+		const _requiredFields = checkoutFieldsState?.fields
+			.filter((field) => (field?.order_type_id === options?.type) && field?.enabled && field?.required_with_guest &&
+				!notFields.includes(field?.validation_field?.code) &&
+				userSelected && !userSelected[field?.validation_field?.code])
+		const requiredFieldsCode = _requiredFields.map((item) => item?.validation_field?.code)
+		const guestCheckoutCellPhone = checkoutFieldsState?.fields?.find((field) => field.order_type_id === options?.type && field?.validation_field?.code === 'mobile_phone')
+		if (
+			userSelected &&
+			!userSelected?.cellphone &&
+			((guestCheckoutCellPhone?.enabled &&
+				guestCheckoutCellPhone?.required_with_guest) ||
+				configs?.verification_phone_required?.value === '1')
+		) {
+			requiredFieldsCode.push('cellphone')
+		}
+		setRequiredFields(requiredFieldsCode)
+	}
+
 	const togglePhoneUpdate = (val: boolean) => {
 		setPhoneUpdate(val)
 	}
@@ -353,10 +382,13 @@ const CheckoutUI = (props: any) => {
 	}
 
 	useEffect(() => {
-		if (validationFields && validationFields?.fields?.checkout) {
+		if (checkoutFieldsState?.loading || userLoading) return
+		if (user?.guest_id) {
+			checkGuestValidationFields()
+		} else {
 			checkValidationFields()
 		}
-	}, [validationFields, user])
+	}, [checkoutFieldsState, user, options?.type])
 
 	useEffect(() => {
 		if (errors) {
@@ -654,6 +686,9 @@ const CheckoutUI = (props: any) => {
 											isCheckout
 											phoneUpdate={phoneUpdate}
 											togglePhoneUpdate={togglePhoneUpdate}
+											isOrderTypeValidationField
+											requiredFields={requiredFields}
+											checkoutFields={checkoutFields}
 										/>
 									)
 								)}
@@ -767,14 +802,7 @@ const CheckoutUI = (props: any) => {
 						</ChSection>
 					)}
 
-					{!cartState.loading &&
-						cart &&
-						cart?.valid &&
-						options.type === 1 &&
-						cart?.status !== 2 &&
-						validationFields?.fields?.checkout?.driver_tip?.enabled &&
-						driverTipsOptions && driverTipsOptions?.length > 0 &&
-						cart?.business_id &&
+					{driverTipsField &&
 						(
 							<ChSection>
 								<ChDriverTips>
@@ -919,6 +947,8 @@ const CheckoutUI = (props: any) => {
 												creditPointPlanOnBusiness?.accumulation_rate ??
 												(!!creditPointPlanOnBusiness && creditPointPlan?.accumulation_rate) ?? 0
 											}
+											hideCommentsByValidationCheckout={!guestCheckoutComment?.enabled}
+											hideCouponByValidationCheckout={!guestCheckoutCoupon?.enabled}
 										/>
 									</>
 								)}
@@ -965,10 +995,8 @@ const CheckoutUI = (props: any) => {
 										{t('INVALID_CART_MOMENT', 'Selected schedule time is invalid, please select a schedule into the business schedule interval.')}
 									</OText>
 								)}
-								{options.type === 1 && !isGiftCardCart &&
-									validationFields?.fields?.checkout?.driver_tip?.enabled &&
-									validationFields?.fields?.checkout?.driver_tip?.required &&
-									(Number(cart?.driver_tip) <= 0) && (
+								{validateDriverTipField && !isGiftCardCart &&
+									(
 										<OText
 											color={theme.colors.error}
 											size={12}
@@ -976,7 +1004,6 @@ const CheckoutUI = (props: any) => {
 											{t('WARNING_INVALID_DRIVER_TIP', 'Driver Tip is required.')}
 										</OText>
 									)}
-
 								{validateCommentsCartField && (
 									<OText
 										color={theme.colors.error}
@@ -994,6 +1021,15 @@ const CheckoutUI = (props: any) => {
 										{t('WARNING_CARD_ZIPCODE_REQUIRED', 'Your card selected has not zipcode')}
 									</OText>
 								)}
+								{validateCouponField &&
+									(
+										<OText
+											color={theme.colors.error}
+											size={12}
+										>
+											{t('WARNING_INVALID_COUPON_FIELD', 'Coupon is required.')}
+										</OText>
+									)}
 							</ChErrors>
 						</View>
 					)}
@@ -1017,14 +1053,16 @@ const CheckoutUI = (props: any) => {
 								isUserDetailsEdit
 								cartStatus={cart?.status}
 								businessId={cart?.business_id}
-								useValidationFields
 								useDefualtSessionManager
 								useSessionUser
 								isCheckout
 								isEdit
 								phoneUpdate={phoneUpdate}
 								togglePhoneUpdate={togglePhoneUpdate}
+								isOrderTypeValidationField
 								requiredFields={requiredFields}
+								checkoutFields={checkoutFields}
+								isCheckoutPlace
 								hideUpdateButton
 								handlePlaceOrderAsGuest={handlePlaceOrderAsGuest}
 								onClose={() => {

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react'
+import React, { useState, useEffect, useCallback, useMemo } from 'react'
 import {
   useLanguage,
   useConfig,
@@ -70,7 +70,8 @@ const MultiCheckoutUI = (props: any) => {
     walletState,
     onNavigationRedirectReplace,
     merchantId,
-    cartsInvalid
+    cartsInvalid,
+    checkoutFieldsState
   } = props
 
   const theme = useTheme();
@@ -96,8 +97,9 @@ const MultiCheckoutUI = (props: any) => {
   const [{ parsePrice, parseDate }] = useUtils();
   const [{ options, carts, loading }, { confirmCart }] = useOrder();
   const [validationFields] = useValidationFields();
-  const [{ user }, { login }] = useSession()
+  const [{ user, loading: userLoading }, { login }] = useSession()
 
+  const notFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'zipcode', 'address_notes', 'comments']
   const configTypes = configs?.order_types_allowed?.value.split('|').map((value: any) => Number(value)) || []
   const isPreOrder = configs?.preorder_status_enabled?.value === '1'
   const isMultiDriverTips = configs?.checkout_multi_business_enabled?.value === '1'
@@ -121,6 +123,7 @@ const MultiCheckoutUI = (props: any) => {
 
   const creditPointGeneralPlan = loyaltyPlansState?.result?.find((loyal: any) => loyal.type === 'credit_point')
   const loyalBusinessAvailable = creditPointGeneralPlan?.businesses?.filter((b: any) => b.accumulates) ?? []
+  const checkoutFields = useMemo(() => checkoutFieldsState?.fields?.filter((field : any) => field.order_type_id === options?.type), [checkoutFieldsState, options])
 
   const accumulationRateBusiness = (businessId: number) => {
     const value = loyalBusinessAvailable?.find((loyal: any) => loyal.business_id === businessId)?.accumulation_rate ?? 0
@@ -169,35 +172,55 @@ const MultiCheckoutUI = (props: any) => {
 
   const checkValidationFields = () => {
     setUserErrors([])
-    const errors = []
-    const notFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'zipcode', 'address_notes']
-    const _requiredFields: any = []
-
-    Object.values(validationFields?.fields?.checkout).map((field: any) => {
-      if (field?.required && !notFields.includes(field.code)) {
-        if (!user[field?.code]) {
-          _requiredFields.push(field?.code)
+    const errors: Array<string> = []
+    const userSelected = user
+    const _requiredFields: Array<string> = []
+    Object.values(checkoutFieldsState?.fields).map((field: any) => {
+      if (options?.type === field?.order_type_id &&
+        field?.enabled &&
+        field?.required &&
+        !notFields.includes(field?.validation_field?.code)
+      ) {
+        if (userSelected && !userSelected[field?.validation_field?.code]) {
+          _requiredFields.push(field?.validation_field?.code)
         }
       }
     })
-
+    const mobilePhoneField: any = Object.values(checkoutFieldsState?.fields)?.find((field: any) => field?.order_type_id === options?.type && field?.validation_field?.code === 'mobile_phone')
     if (
-      !user?.cellphone &&
-      ((validationFields?.fields?.checkout?.cellphone?.enabled &&
-        validationFields?.fields?.checkout?.cellphone?.required) ||
+      userSelected &&
+      !userSelected?.cellphone &&
+      ((mobilePhoneField?.enabled &&
+        mobilePhoneField?.required) ||
         configs?.verification_phone_required?.value === '1')
     ) {
       _requiredFields.push('cellphone')
     }
     setRequiredFields(_requiredFields)
 
-    if (phoneUpdate) {
-      errors.push(t('NECESSARY_UPDATE_COUNTRY_PHONE_CODE', 'It is necessary to update your phone number'))
-    }
-
     setUserErrors(errors)
   }
 
+  const checkGuestValidationFields = () => {
+    const userSelected = user
+    const _requiredFields = checkoutFieldsState?.fields
+      .filter((field) => (field?.order_type_id === options?.type) && field?.enabled && field?.required_with_guest &&
+        !notFields.includes(field?.validation_field?.code) &&
+        userSelected && !userSelected[field?.validation_field?.code])
+    const requiredFieldsCode = _requiredFields.map((item) => item?.validation_field?.code)
+    const guestCheckoutCellPhone = checkoutFieldsState?.fields?.find((field) => field.order_type_id === options?.type && field?.validation_field?.code === 'mobile_phone')
+    if (
+      userSelected &&
+      !userSelected?.cellphone &&
+      ((guestCheckoutCellPhone?.enabled &&
+        guestCheckoutCellPhone?.required_with_guest) ||
+        configs?.verification_phone_required?.value === '1')
+    ) {
+      requiredFieldsCode.push('cellphone')
+    }
+    setRequiredFields(requiredFieldsCode)
+  }
+
   const togglePhoneUpdate = (val: boolean) => {
     setPhoneUpdate(val)
   }
@@ -208,7 +231,7 @@ const MultiCheckoutUI = (props: any) => {
       return
     }
 
-    if (!userErrors.length && (!requiredFields?.length || allowedGuest)) {
+    if (!userErrors.length && !requiredFields?.length) {
       handleGroupPlaceOrder && handleGroupPlaceOrder(confirmPayment)
       return
     }
@@ -255,10 +278,13 @@ const MultiCheckoutUI = (props: any) => {
   }
 
   useEffect(() => {
-    if (validationFields && validationFields?.fields?.checkout) {
+    if (checkoutFieldsState?.loading || userLoading) return
+    if (user?.guest_id) {
+      checkGuestValidationFields()
+    } else {
       checkValidationFields()
     }
-  }, [validationFields, user])
+  }, [checkoutFieldsState, user, options?.type])
 
   useEffect(() => {
     if (cartsToShow?.length === 1) {
@@ -420,6 +446,9 @@ const MultiCheckoutUI = (props: any) => {
                   isCheckout
                   phoneUpdate={phoneUpdate}
                   togglePhoneUpdate={togglePhoneUpdate}
+                  isOrderTypeValidationField
+                  requiredFields={requiredFields}
+                  checkoutFields={checkoutFields}
                 />
               )}
             </ChUserDetails>
@@ -656,9 +685,12 @@ const MultiCheckoutUI = (props: any) => {
               isEdit
               phoneUpdate={phoneUpdate}
               togglePhoneUpdate={togglePhoneUpdate}
-              requiredFields={requiredFields}
               hideUpdateButton
               handlePlaceOrderAsGuest={handlePlaceOrderAsGuest}
+              isCheckoutPlace
+              isOrderTypeValidationField
+              requiredFields={requiredFields}
+              checkoutFields={checkoutFields}
               onClose={() => {
                 setIsOpen(false)
                 handlePlaceOrder()

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

@@ -47,7 +47,9 @@ const OrderSummaryUI = (props: any) => {
     cateringTypes,
     hideDeliveryFee,
     loyaltyRewardRate,
-    maxDate
+    maxDate,
+    hideCommentsByValidationCheckout,
+    hideCouponByValidationCheckout
   } = props;
 
   const theme = useTheme()
@@ -55,11 +57,10 @@ const OrderSummaryUI = (props: any) => {
   const [{ configs }] = useConfig();
   const [orderState] = useOrder();
   const [{ parsePrice, parseNumber }] = useUtils();
-  const [validationFields] = useValidationFields();
   const commentRef = useRef()
   const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null, type: '' })
-  const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled;
-  const hideCartComments = !validationFields?.fields?.checkout?.comments?.enabled
+  const isCouponEnabled = hideCouponByValidationCheckout
+  const hideCartComments = hideCommentsByValidationCheckout
 
   const cart = orderState?.carts?.[`businessId:${props.cart.business_id}`]
 

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

@@ -80,7 +80,7 @@ export const ActionButton = (props: any) => {
                         textStyle={{ fontSize: 10 }}
                     />
                 ) : (
-                    <OButton onClick={navigation.navigate('AddressList')} />
+                    <OButton onClick={() => navigation.navigate('AddressList')} />
                 ))}
             {!auth && (
                 <OButton

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

@@ -35,7 +35,8 @@ const UserDetailsUI = (props: any) => {
 		handleSendVerifyCode,
 		verifyPhoneState,
 		setFormState,
-		setIsOpen
+		setIsOpen,
+		isCheckoutPlace
 	} = props
 
 	const theme = useTheme();
@@ -158,7 +159,7 @@ const UserDetailsUI = (props: any) => {
 								{t('CUSTOMER_DETAILS', 'Customer Details')}
 							</OText>
 						)}
-						{cartStatus !== 2 && !requiredFields && (
+						{cartStatus !== 2 && !isCheckoutPlace && (
 							!isEdit ? (
 								<EditBtn onPress={() => toggleIsEdit()} activeOpacity={0.7}>
 									<OIcon

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

@@ -38,7 +38,11 @@ export const UserFormDetailsUI = (props: any) => {
 		isCheckout,
 		setIsOpen,
 		handleRemoveAccount,
-		isProfile
+		isProfile,
+		isGuest,
+		isOrderTypeValidationField,
+		checkoutFields,
+		isCheckoutPlace
 	} = props;
 
 	const theme = useTheme();
@@ -97,8 +101,8 @@ export const UserFormDetailsUI = (props: any) => {
 	const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
 
 	const isAdmin = user?.level === 0
-	const showInputPhoneNumber = (validationFields?.fields?.checkout?.cellphone?.enabled ?? false) || configs?.verification_phone_required?.value === '1'
-	const showInputBirthday = validationFields?.fields?.checkout?.birthdate?.enabled ?? false
+	const showInputPhoneNumber = isOrderTypeValidationField ? checkoutFields?.find(field => field?.validation_field?.code === 'mobile_phone')?.enabled : (validationFields?.fields?.checkout?.cellphone?.enabled ?? false)
+	const showInputBirthday = isOrderTypeValidationField ? checkoutFields?.find(field => field?.validation_field?.code === 'birthdate')?.enabled : (validationFields?.fields?.checkout?.birthdate?.enabled ?? false)
 
 	const handleSuccessSignup = (user: any) => {
 		login({
@@ -119,7 +123,7 @@ export const UserFormDetailsUI = (props: any) => {
 		};
 		if (field.code && field.code === 'email') {
 			rules.pattern = {
-				value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+				value: /[&,()%";:ç?<>{}\\[\]\s]/g,
 				message: t('INVALID_ERROR_EMAIL', 'Invalid email address').replace(
 					'_attribute_',
 					t('EMAIL', 'Email'),
@@ -129,7 +133,7 @@ export const UserFormDetailsUI = (props: any) => {
 		return rules;
 	};
 
-  const cellphoneValue = () => {
+	const cellphoneValue = () => {
 		let cellphone = user?.cellphone || null
 		if (cellphone && CONDITIONAL_CODES.includes(user?.country_code)) {
 			if (user?.country_code === 'PR') {
@@ -165,8 +169,13 @@ export const UserFormDetailsUI = (props: any) => {
 	};
 
 	const onSubmit = () => {
+		let content = ''
+		if (requiredFields?.includes?.('birthdate') && !birthdate) {
+			content = content + `${t('VALIDATION_ERROR_BIRTHDATE_REQUIRED', 'Birthdate is required')}\n`
+		}
 		if (phoneInputData.error) {
-			showToast(ToastType.Error, phoneInputData.error);
+			content = content + `${phoneInputData.error}\n`
+			showToast(ToastType.Error, content);
 			return;
 		}
 		if (Object.keys(formState.changes).length > 0) {
@@ -176,15 +185,14 @@ export const UserFormDetailsUI = (props: any) => {
 					validationFields?.fields?.checkout?.cellphone?.required) ||
 					configs?.verification_phone_required?.value === '1')
 			) {
-				showToast(
-					ToastType.Error,
-					t(
-						'VALIDATION_ERROR_MOBILE_PHONE_REQUIRED',
-						'The field Phone Number is required.',
-					),
-				);
+				content = content + `${t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Phone Number is required.',)}\n`
+				showToast(ToastType.Error, content);
 				return;
 			}
+			if (content.length > 0) {
+				showToast(ToastType.Error, content);
+				return
+			}
 			let changes = null;
 			if (user?.cellphone && !userPhoneNumber) {
 				changes = {
@@ -310,16 +318,16 @@ export const UserFormDetailsUI = (props: any) => {
 		<>
 			<UDForm>
 				{!validationFields?.loading &&
-					sortInputFields({ values: validationFields?.fields?.checkout })
+					sortInputFields({ values: isOrderTypeValidationField ? checkoutFields : validationFields?.fields?.checkout })
 						.length > 0 && (
 						<UDWrapper>
 							{sortInputFields({
-								values: validationFields.fields?.checkout,
+								values: isOrderTypeValidationField ? checkoutFields : validationFields?.fields?.checkout,
 							}).map(
 								(item: any) => {
 									const field = item?.validation_field || item
-									return (showField &&
-										showField(field.code) && ((requiredFields && requiredFields?.includes?.(field.code)) || !requiredFields) && (
+									return (
+										((isOrderTypeValidationField ? item?.enabled : (showField && showField(field.code))) && ((requiredFields && requiredFields?.includes?.(field.code)) || !requiredFields || !isCheckoutPlace)) && (
 											<React.Fragment key={field.id}>
 												<Controller
 													key={field.id}
@@ -393,46 +401,51 @@ export const UserFormDetailsUI = (props: any) => {
 										))
 								},
 							)}
-							{showInputBirthday && (
-								<>
-									<WrapperBirthdate>
-										<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ textTransform: 'capitalize', alignSelf: 'flex-start' }}>
-											{t('BIRTHDATE', 'Birthdate')}
-										</OText>
-										<TouchableOpacity onPress={() => setShowDatePicker(!showDatePicker)}>
-											<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ marginTop: 6 }}>
-												{birthdate ? moment(birthdate).format('YYYY-MM-DD') : ''}
+							{((!user?.guest_id && showInputBirthday) || (isOrderTypeValidationField || user?.guest_id)) &&
+								showInputBirthday &&
+								((requiredFields && requiredFields?.includes?.('birthdate')) || !requiredFields || !isCheckoutPlace) &&
+								(
+									<>
+										<WrapperBirthdate>
+											<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ textTransform: 'capitalize', alignSelf: 'flex-start' }}>
+												{t('BIRTHDATE', 'Birthdate')}
 											</OText>
-										</TouchableOpacity>
-									</WrapperBirthdate>
-									<DatePickerUI open={showDatePicker} birthdate={birthdate} onConfirm={_handleChangeDate} onCancel={() => setShowDatePicker(false)} />
-								</>
-							)}
-							{!!showInputPhoneNumber && ((requiredFields && requiredFields.includes('cellphone')) || !requiredFields) && (
-								<WrapperPhone>
-									<OText size={14} lineHeight={21} weight={'500'} color={theme.colors.textNormal}>{t('PHONE', 'Phone')}</OText>
-									<PhoneInputNumber
-										data={phoneInputData}
-										handleData={(val: any) => handleChangePhoneNumber(val)}
-										changeCountry={(val: any) => changeCountry(val)}
-										defaultValue={phoneUpdate ? '' : cellphoneValue()}
-										defaultCode={user?.country_code ?? user?.country_phone_code ?? null}
-										boxStyle={styles.phoneSelect}
-										inputStyle={styles.phoneInputStyle}
-										textStyle={{ color: theme.colors.textNormal, fontSize: 12, padding: 0 }}
-										noDropIcon
-									/>
-									{phoneUpdate && (
-										<OText
-											size={10}
-											color={theme.colors.error}
-											style={{ marginHorizontal: 10, textAlign: 'center' }}>
-											{t('YOUR_PREVIOUS_CELLPHONE', 'Your previous cellphone')}:{' '}
-											{cellphoneValue()}
-										</OText>
-									)}
-								</WrapperPhone>
-							)}
+											<TouchableOpacity onPress={() => setShowDatePicker(!showDatePicker)}>
+												<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ marginTop: 6 }}>
+													{birthdate ? moment(birthdate).format('YYYY-MM-DD') : ''}
+												</OText>
+											</TouchableOpacity>
+										</WrapperBirthdate>
+										<DatePickerUI open={showDatePicker} birthdate={birthdate} onConfirm={_handleChangeDate} onCancel={() => setShowDatePicker(false)} />
+									</>
+								)}
+							{((!user?.guest_id && !!showInputPhoneNumber) || (isOrderTypeValidationField || user?.guest_id)) &&
+								((requiredFields && requiredFields?.includes?.('cellphone')) || !requiredFields || !isCheckoutPlace) &&
+								(
+									<WrapperPhone>
+										<OText size={14} lineHeight={21} weight={'500'} color={theme.colors.textNormal}>{t('PHONE', 'Phone')}</OText>
+										<PhoneInputNumber
+											data={phoneInputData}
+											handleData={(val: any) => handleChangePhoneNumber(val)}
+											changeCountry={(val: any) => changeCountry(val)}
+											defaultValue={phoneUpdate ? '' : cellphoneValue()}
+											defaultCode={user?.country_code ?? user?.country_phone_code ?? null}
+											boxStyle={styles.phoneSelect}
+											inputStyle={styles.phoneInputStyle}
+											textStyle={{ color: theme.colors.textNormal, fontSize: 12, padding: 0 }}
+											noDropIcon
+										/>
+										{phoneUpdate && (
+											<OText
+												size={10}
+												color={theme.colors.error}
+												style={{ marginHorizontal: 10, textAlign: 'center' }}>
+												{t('YOUR_PREVIOUS_CELLPHONE', 'Your previous cellphone')}:{' '}
+												{cellphoneValue()}
+											</OText>
+										)}
+									</WrapperPhone>
+								)}
 							{!requiredFields && (
 								<Controller
 									control={control}
@@ -505,7 +518,7 @@ export const UserFormDetailsUI = (props: any) => {
 						)}
 				</>
 			)}
-			{requiredFields && (
+			{isCheckoutPlace && (
 				<OButton
 					text={
 						formState.loading
@@ -531,10 +544,10 @@ export const UserFormDetailsUI = (props: any) => {
 						borderColor: !user?.guest_id && (formState.loading || !isValid) ? theme.colors.white : theme.colors.primary,
 						opacity: !user?.guest_id && (formState.loading || !isValid) ? 0.3 : 1,
 					}}
-					onClick={!user?.guest_id ? handleSubmit(onSubmit) : () => setIsModalOpen(true)}
+					onClick={handleSubmit(onSubmit)}
 				/>
 			)}
-			{isCheckout && !!user?.guest_id && (
+			{isCheckout && !!user?.guest_id && !requiredFields && (
 				<TouchableOpacity style={{ marginTop: 10 }} onPress={() => handlePlaceOrderAsGuest()}>
 					<OText color={theme.colors.primary} style={{ textAlign: 'center' }}>{t('PLACE_ORDER_AS_GUEST', 'Place order as guest')}</OText>
 				</TouchableOpacity>