ordering-ui-react-native 0.22.1 → 0.22.2-release

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

@@ -26,9 +26,9 @@ import { BusinessTypeFilterParams } from '../../types';
 const windowWidth = Dimensions.get('window').width;
 
 export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
-	const { 
-		typesState, 
-		currentTypeSelected, 
+	const {
+		typesState,
+		currentTypeSelected,
 		handleChangeBusinessType,
 		setBusinessTypes,
 		isAppoint
@@ -38,13 +38,13 @@ export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
 
 	const theme = useTheme();
 	const [isOpenAllCategories, setIsOpenAllCategories] = useState(false)
-	const defaultImage = (name : string) => theme.images?.categories?.[name.toLowerCase().replace(' ', '')]
+	const defaultImage = (name: string) => theme.images?.categories?.[name.toLowerCase().replace(' ', '')]
 
 	useEffect(() => {
-		if(typesState?.types?.length > 0){
-		  setBusinessTypes && setBusinessTypes(typesState?.types)
+		if (typesState?.types?.length > 0) {
+			setBusinessTypes && setBusinessTypes(typesState?.types)
 		}
-	  }, [typesState])
+	}, [typesState])
 
 	const handleChangeServiceType = (serviceId: any) => {
 		if (serviceId === currentTypeSelected) {
@@ -119,10 +119,11 @@ export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
 									<OButton
 										key={i}
 										bgColor={(currentTypeSelected === businessType?.id) ? theme.colors.primary : theme.colors.backgroundGray200}
+										borderColor={(currentTypeSelected === businessType?.id) ? theme.colors.primary : theme.colors.backgroundGray200}
 										onClick={() => handleChangeServiceType(businessType?.id)}
 										text={`${businessType?.name} ${(currentTypeSelected === businessType?.id) ? ' X' : ''}`}
 										style={styles.businessType}
-										textStyle={{ fontSize: 10, color: (currentTypeSelected === businessType?.id) ? theme.colors.backgroundLight : theme.colors.textNormal }}
+										textStyle={{ fontSize: 10, color: (currentTypeSelected === businessType?.id) ? theme.colors.white : theme.colors.textNormal }}
 									/>
 								))}
 							</ServiceWrapper>

package/themes/original/src/components/BusinessesListing/Layout/Appointment/index.tsx

@@ -392,10 +392,11 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 							<OButton
 								key={i}
 								bgColor={(priceLevelSelected === price?.level) ? theme.colors.primary : theme.colors.backgroundGray200}
+								borderColor={(priceLevelSelected === price?.level) ? theme.colors.primary : theme.colors.backgroundGray200}
 								onClick={() => handleChangePriceLevel(price?.level)}
 								text={`${price.content} ${(priceLevelSelected === price?.level) ? ' X' : ''}`}
 								style={styles.priceLevel}
-								textStyle={{ fontSize: 10, color: (priceLevelSelected === price?.level) ? theme.colors.backgroundLight : theme.colors.textNormal }}
+								textStyle={{ fontSize: 10, color: (priceLevelSelected === price?.level) ? theme.colors.backgroundLight : theme.colors.black }}
 							/>
 						))}
 					</ScrollView>

package/themes/original/src/components/BusinessesListing/Layout/Original/index.tsx

@@ -168,7 +168,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			setFeaturedBusinesses(ary);
 		}
 		resetInactivityTimeout()
-	}, [businessesList.loading])
+	}, [businessesList.loading, businessesList?.businesses])
 
 	const handleOnRefresh = () => {
 		if (!businessesList.loading) {

package/themes/original/src/components/BusinessesListing/Layout/Original/styles.tsx

@@ -60,7 +60,7 @@ export const WrapMomentOption = styled.TouchableOpacity`
 
 export const HeaderWrapper = styled.ImageBackground`
 	width: 100%;
-  height: ${({ bgHeaderHeight } : any) => bgHeaderHeight || '270px'};
+  height: 270px;
 	padding: 20px;
 	background-color: transparent;
 `;

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

@@ -1,4 +1,3 @@
-
 import React, { useState, useEffect } from 'react'
 import { useOrder, useSession, useLanguage, useConfig } from 'ordering-components/native';
 

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

@@ -19,7 +19,7 @@ import { CouponControl } from '../CouponControl';
 import { OButton, OInput, OModal, OText } from '../shared';
 import { UpsellingProducts } from '../UpsellingProducts';
 import { verifyDecimals } from '../../utils';
-import { ActivityIndicator, TouchableOpacity, View } from 'react-native';
+import { ActivityIndicator, TouchableOpacity, View, Vibration } from 'react-native';
 import AntIcon from 'react-native-vector-icons/AntDesign'
 import { TaxInformation } from '../TaxInformation';
 import { CartStoresListing } from '../CartStoresListing';
@@ -114,6 +114,7 @@ const CartUI = (props: any) => {
   }
 
   const handleUpsellingPage = (individualCart: any) => {
+    Vibration.vibrate(100)
     const isProductCartParam = !!individualCart?.products?.length
     setOpenUpselling(false)
     setCanOpenUpselling(false)
@@ -128,8 +129,9 @@ const CartUI = (props: any) => {
         cartUuid: cart?.uuid,
         businessLogo: cart?.business?.logo,
         businessName: cart?.business?.name,
-        cartTotal: cart?.total
-      }, true)
+        cartTotal: cart?.total,
+        fromProductsList: isFromUpselling
+      })
     } else {
       const groupKeys: any = {}
       cartsAvailable.forEach((_cart: any) => {
@@ -145,28 +147,30 @@ const CartUI = (props: any) => {
         onNavigationRedirect('CheckoutNavigator', {
           screen: 'MultiCheckout',
           checkCarts: true
-        }, true)
+        })
       } else {
         onNavigationRedirect('CheckoutNavigator', {
           screen: 'MultiCheckout',
           cartUuid: cartsAvailable[0]?.group?.uuid
-        }, true)
+        })
       }
     }
   }
 
-  const getIncludedTaxes = () => {
+  const getIncludedTaxes = (isDeliveryFee?: boolean) => {
     if (cart?.taxes === null || !cart?.taxes) {
-      return cart.business.tax_type === 1 ? cart?.tax : 0
+      return cart?.business.tax_type === 1 ? cart?.tax : 0
     } else {
       return cart?.taxes.reduce((taxIncluded: number, tax: any) => {
-        return taxIncluded + (tax.type === 1 ? tax.summary?.tax : 0)
+        return taxIncluded +
+          (((!isDeliveryFee && tax.type === 1 && tax.target === 'product') ||
+            (isDeliveryFee && tax.type === 1 && tax.target === 'delivery_fee')) ? tax.summary?.tax : 0)
       }, 0)
     }
   }
 
   const getIncludedTaxesDiscounts = () => {
-    return cart?.taxes?.filter((tax: any) => tax?.type === 1)?.reduce((carry: number, tax: any) => carry + (tax?.summary?.tax_after_discount ?? tax?.summary?.tax), 0)
+    return cart?.taxes?.filter((tax: any) => (tax?.type === 1 && tax?.target === 'product'))?.reduce((carry: number, tax: any) => carry + (tax?.summary?.tax_after_discount ?? tax?.summary?.tax), 0)
   }
 
   const OfferAlert = ({ offerId }: any) => {
@@ -197,6 +201,7 @@ const CartUI = (props: any) => {
   }, cart?.subtotal)
 
   const handleClickCheckout = () => {
+    Vibration.vibrate(100)
     if (cart?.business_id) {
       setOpenUpselling(true)
     } else {
@@ -243,7 +248,10 @@ const CartUI = (props: any) => {
         handleClearProducts={handleClearProducts}
         handleCartOpen={handleCartOpen}
         onNavigationRedirect={props.onNavigationRedirect}
-        handleChangeStore={() => setOpenChangeStore(true)}
+        handleChangeStore={() => {
+          Vibration.vibrate(100)
+          setOpenChangeStore(true)
+        }}
         handleClickCheckout={() => handleClickCheckout()}
         checkoutButtonDisabled={(openUpselling && !canOpenUpselling) || subtotalWithTaxes < cart?.minimum || !cart?.valid_address}
         isMultiCheckout={isMultiCheckout}
@@ -324,7 +332,7 @@ const CartUI = (props: any) => {
               </OSTable>
             )}
             {
-              cart.taxes?.length > 0 && cart.taxes.filter((tax: any) => tax.type === 2 && tax?.rate !== 0).map((tax: any, i: number) => (
+              cart.taxes?.length > 0 && cart.taxes.filter((tax: any) => tax.type === 2 && tax?.rate !== 0 && tax?.target === 'product').map((tax: any, i: number) => (
                 <OSTable key={`${tax.id}_${i}`}>
                   <OSRow>
                     <OText size={12} lineHeight={18} numberOfLines={1} >
@@ -379,9 +387,25 @@ const CartUI = (props: any) => {
             {orderState?.options?.type === 1 && cart?.delivery_price_with_discount > 0 && !hideDeliveryFee && (
               <OSTable>
                 <OText size={12} lineHeight={18}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
-                <OText size={12} lineHeight={18}>{parsePrice(cart?.delivery_price_with_discount)}</OText>
+                <OText size={12} lineHeight={18}>{parsePrice(cart?.delivery_price_with_discount + getIncludedTaxes(true))}</OText>
               </OSTable>
             )}
+            {
+              cart?.taxes?.length > 0 && cart?.taxes?.filter((tax: any) => tax?.type === 2 && tax?.rate !== 0 && tax?.target === 'delivery_fee').map((tax: any, i: number) => (
+                <OSTable key={`${tax.description}_${i}`}>
+                  <OSRow>
+                    <OText size={12} lineHeight={18} numberOfLines={1}>
+                      {tax.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
+                      {`(${verifyDecimals(tax?.rate, parseNumber)}%)`}
+                    </OText>
+                    <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: tax, type: 'tax' })}>
+                      <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
+                    </TouchableOpacity>
+                  </OSRow>
+                  <OText size={12} lineHeight={18}>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0)}</OText>
+                </OSTable>
+              ))
+            }
             {
               cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 2)?.map((offer: any, i: number) => (
                 <OSTable key={`${offer.id}_${i}`}>
@@ -557,10 +581,10 @@ const CartUI = (props: any) => {
                     `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(cart?.minimum)}`
                   )}
                   bgColor={(subtotalWithTaxes < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
+                  borderColor={(subtotalWithTaxes < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
                   isDisabled={(openUpselling && !canOpenUpselling) || subtotalWithTaxes < cart?.minimum || !cart?.valid_address}
-                  borderColor={theme.colors.primary}
                   imgRightSrc={null}
-                  textStyle={{ color: '#fff', textAlign: 'center', flex: 1 }}
+                  textStyle={{ textAlign: 'center', flex: 1 }}
                   onClick={() => handleClickCheckout()}
                   style={{ width: '100%', flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
                 />

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { View } from 'react-native';
+import { Vibration, View } from 'react-native';
 import { useLanguage, useConfig, useUtils, useOrder } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { CCContainer, CCNotCarts, CCList, CheckoutAction, ChCartsTotal } from './styles';
@@ -39,6 +39,7 @@ export const CartContent = (props: any) => {
 		?.filter((cart: any) => cart?.status !== 1 && cart?.valid && cart?.products?.length)
 		?.reduce((total: any, cart: any) => { return total + (cart?.delivery_price_with_discount) }, 0)
 	const handleCheckoutRedirect = () => {
+		Vibration.vibrate(100)
 		if (cartsAvailable.length === 1) {
 			onNavigationRedirect('CheckoutNavigator', {
 				screen: 'CheckoutPage',
@@ -173,11 +174,8 @@ export const CartContent = (props: any) => {
 									<CheckoutAction style={{ marginTop: 0 }}>
 										<OButton
 											text={t('CHECKOUT', 'Checkout')}
-											bgColor={!cartsAvailable.length ? theme.colors.secundary : theme.colors.primary}
 											isDisabled={!cartsAvailable.length}
-											borderColor={theme.colors.primary}
 											imgRightSrc={null}
-											textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
 											onClick={() => handleCheckoutRedirect()}
 											style={{ width: '100%', flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
 										/>

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,65 @@ 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 : any) => (field?.order_type_id === options?.type) && field?.enabled && field?.required_with_guest &&
+				!notFields.includes(field?.validation_field?.code) &&
+				field?.validation_field?.code !== 'email' &&
+				userSelected && !userSelected[field?.validation_field?.code])
+		const requiredFieldsCode = _requiredFields.map((item : any) => item?.validation_field?.code)
+		const guestCheckoutCellPhone = checkoutFieldsState?.fields?.find((field : any) => field.order_type_id === options?.type && field?.validation_field?.code === 'mobile_phone')
+		const guestCheckoutEmail = checkoutFieldsState?.fields?.find((field : any) => field.order_type_id === options?.type && field?.validation_field?.code === 'email')
+		if (
+			userSelected &&
+			!userSelected?.guest_cellphone &&
+			((guestCheckoutCellPhone?.enabled &&
+				guestCheckoutCellPhone?.required_with_guest) ||
+				configs?.verification_phone_required?.value === '1')
+		) {
+			requiredFieldsCode.push('cellphone')
+		}
+		if (
+			userSelected &&
+			!userSelected?.guest_email &&
+			guestCheckoutEmail?.enabled &&
+			guestCheckoutEmail?.required_with_guest
+		) {
+			requiredFieldsCode.push('email')
+		}
+		setRequiredFields(requiredFieldsCode)
+	}
+
 	const togglePhoneUpdate = (val: boolean) => {
 		setPhoneUpdate(val)
 	}
@@ -346,11 +385,20 @@ const CheckoutUI = (props: any) => {
 		setShowTitle(contentOffset.y > 30)
 	}
 
+	const handleRedirect = () => {
+		props.fromProductsList
+			? navigation?.goBack()
+			: onNavigationRedirect('BottomTab', { screen: 'Cart' }, !props.fromMulti)
+	}
+
 	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) {
@@ -456,7 +504,7 @@ const CheckoutUI = (props: any) => {
 			<SafeAreaView style={{ backgroundColor: theme.colors.backgroundPage }}>
 				<View style={styles.wrapperNavbar}>
 					<TopHeader>
-						<TopActions onPress={() => onNavigationRedirect('BottomTab', { screen: 'Cart' }, !props.fromMulti)}>
+						<TopActions onPress={() => handleRedirect()}>
 							<IconAntDesign
 								name='arrowleft'
 								size={26}
@@ -482,7 +530,7 @@ const CheckoutUI = (props: any) => {
 						hideArrowLeft
 						title={t('CHECKOUT', 'Checkout')}
 						titleAlign={'center'}
-						onActionLeft={() => onNavigationRedirect('BottomTab', { screen: 'Cart' }, !props.fromMulti)}
+						onActionLeft={() => handleRedirect()}
 						showCall={false}
 						btnStyle={{ paddingLeft: 0, paddingTop: Platform.OS == 'ios' ? 0 : 2 }}
 						titleWrapStyle={{ paddingHorizontal: 0 }}
@@ -619,15 +667,11 @@ const CheckoutUI = (props: any) => {
 											<HeaderTitle text={t('CUSTOMER_DETAILS', 'Customer details')} />
 											<OButton
 												text={t('SIGN_UP', 'Sign up')}
-												textStyle={{ color: theme.colors.white }}
 												style={{ borderRadius: 7.6, marginTop: 20 }}
 												onClick={() => setOpenModal({ ...openModal, signup: true })}
 											/>
 											<OButton
 												text={t('LOGIN', 'Login')}
-												textStyle={{ color: theme.colors.primary }}
-												bgColor={theme.colors.white}
-												borderColor={theme.colors.primary}
 												style={{ borderRadius: 7.6, marginTop: 20 }}
 												onClick={() => setOpenModal({ ...openModal, login: true })}
 											/>
@@ -652,6 +696,9 @@ const CheckoutUI = (props: any) => {
 											isCheckout
 											phoneUpdate={phoneUpdate}
 											togglePhoneUpdate={togglePhoneUpdate}
+											isOrderTypeValidationField
+											requiredFields={requiredFields}
+											checkoutFields={checkoutFields}
 										/>
 									)
 								)}
@@ -749,6 +796,7 @@ const CheckoutUI = (props: any) => {
 									</Placeholder>
 								) : (
 									<AddressDetails
+										cart={cart}
 										navigation={navigation}
 										location={options?.address?.location}
 										businessLogo={businessDetails?.business?.logo}
@@ -764,14 +812,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>
@@ -916,6 +957,8 @@ const CheckoutUI = (props: any) => {
 												creditPointPlanOnBusiness?.accumulation_rate ??
 												(!!creditPointPlanOnBusiness && creditPointPlan?.accumulation_rate) ?? 0
 											}
+											hideCommentsByValidationCheckout={!guestCheckoutComment?.enabled}
+											hideCouponByValidationCheckout={!guestCheckoutCoupon?.enabled}
 										/>
 									</>
 								)}
@@ -962,10 +1005,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}
@@ -973,7 +1014,6 @@ const CheckoutUI = (props: any) => {
 											{t('WARNING_INVALID_DRIVER_TIP', 'Driver Tip is required.')}
 										</OText>
 									)}
-
 								{validateCommentsCartField && (
 									<OText
 										color={theme.colors.error}
@@ -991,6 +1031,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>
 					)}
@@ -1008,20 +1057,23 @@ const CheckoutUI = (props: any) => {
 					<OModal
 						open={isOpen}
 						onClose={() => setIsOpen(false)}
+						showToastInsideModal
 					>
 						<View style={styles.detailWrapper}>
 							<UserDetails
 								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/CitiesControl/index.tsx

@@ -69,10 +69,7 @@ export const CitiesControl = (props: any) => {
       </View>
       <OButton
         text={t('CONTINUE', 'Continue')}
-        bgColor={theme.colors.primary}
-        borderColor={theme.colors.primary}
         style={styles.btnStyle}
-        textStyle={{ color: 'white' }}
         onClick={() => handleClick()}
       />
     </Container>

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

@@ -102,9 +102,7 @@ const CouponControlUI = (props: any) => {
 					/>
 					<OButton
 						onClick={() => onButtonApplyClick()}
-						bgColor={theme.colors.primary}
-						borderColor={theme.colors.primary}
-						textStyle={{ color: 'white', fontSize: 12 }}
+						textStyle={{ fontSize: 12 }}
 						imgRightSrc={null}
 						text={t('APPLY', 'Apply')}
 						isDisabled={!couponInput}

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

@@ -125,9 +125,7 @@ const DriverTipsUI = (props: any) => {
 						/>
 						<OButton
 							text={t('APPLY_TIP', 'Apply Tip')}
-							bgColor={theme.colors.primary}
-							borderColor={theme.colors.primary}
-							textStyle={{ color: 'white', fontSize: 14 }}
+							textStyle={{ fontSize: 14 }}
 							imgRightSrc={null}
 							style={{ borderRadius: 5, height: 44 }}
 							isDisabled={parseFloat(value || '0') < 0 || parseFloat(value || '0') === driverTip || value === ''}