ordering-ui-react-native 0.22.53 → 0.22.54-release

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,
@@ -146,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)
@@ -168,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)
@@ -176,10 +175,20 @@ const CheckoutUI = (props: any) => {
 	const [showTitle, setShowTitle] = useState(false)
 	const [cardList, setCardList] = useState<any>({ cards: [], loading: false, error: null })
 	const [isGiftCardCart, setIsGiftCardCart] = useState(!cart?.business_id)
+	const [userHasCards, setUserHasCards] = useState(false)
 	const containerRef = useRef<any>()
 	const cardsMethods = ['credomatic']
-	const stripePaymethods: any = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect']
+	const stripePaymethods: any = ['stripe', 'stripe_connect', 'stripe_redirect']
+	const cardsPaymethods: any = ['stripe', 'stripe_connect']
+
 	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 ?? []
@@ -197,6 +206,7 @@ const CheckoutUI = (props: any) => {
 	const creditPointPlanOnBusiness = creditPointPlan?.businesses?.find((b: any) => b.business_id === cart?.business_id && b.accumulates)
 	const methodsPay = ['google_pay', 'apple_pay']
 
+	const commentDelayTime = 1500
 	const isPreOrder = configs?.preorder_status_enabled?.value === '1'
 	const subtotalWithTaxes = cart?.taxes?.reduce((acc: any, item: any) => {
 		if (item?.type === 1)
@@ -204,27 +214,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 ||
+		(!userHasCards && cardsPaymethods.includes(paymethodSelected?.gateway))
 
 	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)) || []
 
@@ -245,7 +256,7 @@ const CheckoutUI = (props: any) => {
 		}
 	}
 
-	const vibrateApp = (impact?: string) => {
+	const vibrateApp = (impact?: HapticFeedbackTypes) => {
 		const options = {
 			enableVibrateFallback: true,
 			ignoreAndroidSystemSettings: false
@@ -253,12 +264,11 @@ const CheckoutUI = (props: any) => {
 		ReactNativeHapticFeedback.trigger(impact || "impactLight", options);
 	}
 
-	const handleSuccessSignup = (user: any) => {
-		login({
+	const handleSuccessSignup = async (user: any) => {
+		await login({
 			user,
 			token: user?.session?.access_token
 		})
-		openModal?.isGuest && handlePlaceOrderAsGuest()
 		setOpenModal({ ...openModal, signup: false, isGuest: false })
 	}
 
@@ -311,53 +321,63 @@ const CheckoutUI = (props: any) => {
 
 	const checkValidationFields = () => {
 		setUserErrors([])
-		const errors = []
-		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 &&
+			.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])
-			.map((item: any) => item?.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?.cellphone &&
+			!userSelected?.guest_cellphone &&
 			((guestCheckoutCellPhone?.enabled &&
-				guestCheckoutCellPhone?.required) ||
+				guestCheckoutCellPhone?.required_with_guest) ||
 				configs?.verification_phone_required?.value === '1')
 		) {
-			_requiredFields.push('cellphone')
+			requiredFieldsCode.push('cellphone')
 		}
-		setRequiredFields(_requiredFields)
+		if (
+			userSelected &&
+			!userSelected?.guest_email &&
+			guestCheckoutEmail?.enabled &&
+			guestCheckoutEmail?.required_with_guest
+		) {
+			requiredFieldsCode.push('email')
+		}
+		setRequiredFields(requiredFieldsCode)
 	}
 
 	const togglePhoneUpdate = (val: boolean) => {
@@ -368,16 +388,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 && !user?.guest_id) {
+		if (checkoutFieldsState?.loading || userLoading) return
+		if (user?.guest_id) {
+			checkGuestValidationFields()
+		} else {
 			checkValidationFields()
 		}
-	}, [validationFields, user])
-
-	useEffect(() => {
-		if (checkoutFieldsState?.loading || !user?.guest_id) return
-		checkGuestValidationFields()
-	}, [user, checkoutFieldsState])
+	}, [checkoutFieldsState, user, options?.type])
 
 	useEffect(() => {
 		if (errors) {
@@ -387,12 +411,14 @@ const CheckoutUI = (props: any) => {
 	}, [errors])
 
 	useEffect(() => {
-		if (cart?.products?.length === 0) {
-			if (cart?.business_id !== null) {
-				onNavigationRedirect('Business', { store: cart?.business?.slug, header: null, logo: null, fromMulti: props.fromMulti })
-			} else if (isGiftCardCart) {
-				onNavigationRedirect('Wallets')
-			}
+		if (cart?.products?.length === 0 || !userLoading) return
+		if (cart?.business_id !== null) {
+			onNavigationRedirect('Business', { store: cart?.business?.slug, header: null, logo: null, fromMulti: props.fromMulti })
+			return
+		}
+		if (isGiftCardCart) {
+			onNavigationRedirect('Wallets')
+			return
 		}
 	}, [cart?.products?.length])
 
@@ -454,15 +480,6 @@ const CheckoutUI = (props: any) => {
 		}
 	}, [cartState?.error, cartState?.cart, cartState?.loading, isFocused])
 
-	useEffect(() => {
-		const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {
-			containerRef?.current?.scrollToEnd && containerRef.current.scrollToEnd({ animated: true })
-		})
-		return () => {
-			keyboardDidShowListener.remove()
-		}
-	}, [])
-
 	useEffect(() => {
 		const onBackFunction = () => {
 			if (webviewPaymethod?.gateway === 'paypal' && showGateway.open) {
@@ -483,7 +500,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}
@@ -509,7 +526,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 }}
@@ -675,6 +692,9 @@ const CheckoutUI = (props: any) => {
 											isCheckout
 											phoneUpdate={phoneUpdate}
 											togglePhoneUpdate={togglePhoneUpdate}
+											isOrderTypeValidationField
+											requiredFields={requiredFields}
+											checkoutFields={checkoutFields}
 										/>
 									)
 								)}
@@ -772,6 +792,7 @@ const CheckoutUI = (props: any) => {
 									</Placeholder>
 								) : (
 									<AddressDetails
+										cart={cart}
 										navigation={navigation}
 										location={options?.address?.location}
 										businessLogo={businessDetails?.business?.logo}
@@ -787,14 +808,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>
@@ -854,6 +868,7 @@ const CheckoutUI = (props: any) => {
 									openUserModal={setIsOpen}
 									paymethodClicked={paymethodClicked}
 									setPaymethodClicked={setPaymethodClicked}
+									setUserHasCards={setUserHasCards}
 								/>
 							</ChPaymethods>
 						</ChSection>
@@ -932,6 +947,7 @@ const CheckoutUI = (props: any) => {
 											cart={cart}
 											isCartPending={cart?.status === 2}
 											onNavigationRedirect={onNavigationRedirect}
+											commentDelayTime={commentDelayTime}
 											placeSpotTypes={placeSpotTypes}
 											businessConfigs={businessConfigs}
 											maxDate={maxDate}
@@ -939,6 +955,8 @@ const CheckoutUI = (props: any) => {
 												creditPointPlanOnBusiness?.accumulation_rate ??
 												(!!creditPointPlanOnBusiness && creditPointPlan?.accumulation_rate) ?? 0
 											}
+											hideCommentsByValidationCheckout={!guestCheckoutComment?.enabled}
+											hideCouponByValidationCheckout={!guestCheckoutCoupon?.enabled}
 										/>
 									</>
 								)}
@@ -985,10 +1003,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}
@@ -996,7 +1012,6 @@ const CheckoutUI = (props: any) => {
 											{t('WARNING_INVALID_DRIVER_TIP', 'Driver Tip is required.')}
 										</OText>
 									)}
-
 								{validateCommentsCartField && (
 									<OText
 										color={theme.colors.error}
@@ -1014,6 +1029,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>
 					)}
@@ -1031,20 +1055,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/Favorite/index.tsx

@@ -14,8 +14,7 @@ import {
 
 export const Favorite = (props: any) => {
   const {
-    navigation,
-    franchiseId
+    navigation
   } = props
   const [, t] = useLanguage()
   const theme = useTheme()
@@ -72,7 +71,6 @@ export const Favorite = (props: any) => {
           originalURL='business'
           location={`${orderState.options?.address?.location?.lat},${orderState.options?.address?.location?.lng}`}
           propsToFetch={['id', 'name', 'header', 'logo', 'location', 'address', 'ribbon', 'timezone', 'schedule', 'open', 'delivery_price', 'distance', 'delivery_time', 'pickup_time', 'reviews', 'featured', 'offers', 'food', 'laundry', 'alcohol', 'groceries', 'slug']}
-          franchiseId={franchiseId}
         />
       )}
       {tabSelected === 'products' && (
@@ -81,7 +79,6 @@ export const Favorite = (props: any) => {
           originalURL='products'
           onNavigationRedirect={onRedirect}
           isProduct
-          franchiseId={franchiseId}
         />
       )}
       {tabSelected === 'orders' && (
@@ -90,7 +87,6 @@ export const Favorite = (props: any) => {
           favoriteURL='favorite_orders'
           originalURL='orders'
           isOrder
-          franchiseId={franchiseId}
         />
       )}
     </Container>

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

@@ -208,8 +208,7 @@ const ForgotPasswordUI = (props: any) => {
 
 					<OButton
 						text={emailSent && !formState.result?.error ? t('LINK_SEND_FORGOT_PASSWORD', 'Link Sent') : t('FRONT_RECOVER_PASSWORD', 'Recover Password')}
-						bgColor={emailSent && !formState.result?.error ? theme.colors.disabled : theme.colors.primary}
-						borderColor={emailSent && !formState.result?.error ? theme.colors.disabled : theme.colors.primary}
+						isDisabled={formState.loading || emailSent && !formState.result?.error}
 						isLoading={formState.loading}
 						imgRightSrc={null}
 						onClick={emailSent && !formState.result?.error ? () => { } : handleSubmit(onSubmit)}

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

@@ -8,7 +8,6 @@ import Alert from '../../../../../src/providers/AlertProvider'
 import { OIcon } from '../shared';
 
 export const GoogleMap = (props: GoogleMapsParams) => {
-
   const {
     location,
     handleChangeAddressMap,
@@ -21,7 +20,10 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     locations,
     isIntGeoCoder,
     businessZones,
-    delta
+    delta,
+    autoCompleteAddress,
+    setAutoCompleteAddress,
+    manualZoom
   } = props
 
   const [, t] = useLanguage()
@@ -59,7 +61,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     strokeWidth: 2
   }
 
-  const geocodePosition = (pos: { latitude: number, longitude: number }, isMovingRegion ?: boolean) => {
+  const geocodePosition = (pos: { latitude: number, longitude: number }, isMovingRegion?: boolean) => {
     Geocoder.from({
       latitude: pos.latitude,
       longitude: pos.longitude
@@ -84,7 +86,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
         }
         handleChangeAddressMap && handleChangeAddressMap(address, details)
         setSaveLocation && setSaveLocation(false)
-        if(!isMovingRegion){ 
+        if (!isMovingRegion) {
           handleToggleMap && handleToggleMap()
         }
       } else {
@@ -95,7 +97,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     })
   }
 
-  const validateResult = (curPos: { latitude: number, longitude: number }) => {
+  const validateResult = (curPos: any) => {
     const loc1 = center
     const loc2 = curPos
     const distance = calculateDistance(loc1, loc2)
@@ -103,25 +105,33 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     if (!maxLimitLocation) {
       geocodePosition(curPos)
       setMarkerPosition(curPos)
-      setRegion({ ...region, longitude: curPos.longitude, latitude: curPos.latitude })
+      if (!autoCompleteAddress) {
+        setRegion({ longitude: curPos?.longitude || 0, latitude: curPos?.latitude || 0, latitudeDelta: curPos?.latitudeDelta || 0.0010, longitudeDelta: curPos?.longitudeDelta || (delta ?? 0.0010) * ASPECT_RATIO })
+      } else {
+        setRegion({ longitude: curPos?.longitude, latitude: curPos?.latitude, latitudeDelta: delta ?? 0.0010, longitudeDelta: (delta ?? 0.0010) * ASPECT_RATIO })
+      }
       return
     }
 
     const _maxLimitLocation = typeof maxLimitLocation === 'string' ? parseInt(maxLimitLocation, 10) : maxLimitLocation
 
     if (distance <= _maxLimitLocation) {
-      if (!aproxEqual(curPos.latitude, center.lat) || !aproxEqual(curPos.longitude, center.lng)){
+      if (!aproxEqual(curPos?.latitude, center.lat) || !aproxEqual(curPos?.longitude, center.lng)) {
         geocodePosition(curPos, true)
       }
       setMarkerPosition(curPos)
-      setRegion({ ...region, longitude: curPos.longitude, latitude: curPos.latitude })
+      if (!autoCompleteAddress) {
+        setRegion({ longitude: curPos?.longitude || 0, latitude: curPos?.latitude || 0, latitudeDelta: curPos?.latitudeDelta || 0.0010, longitudeDelta: curPos?.longitudeDelta || (delta ?? 0.0010) * ASPECT_RATIO })
+      } else {
+        setRegion({ longitude: curPos?.longitude, latitude: curPos?.latitude, latitudeDelta: delta ?? 0.0010, longitudeDelta: (delta ?? 0.0010) * ASPECT_RATIO })
+      }
     } else {
       setMapErrors && setMapErrors('ERROR_MAX_LIMIT_LOCATION')
       setMarkerPosition({ latitude: center.lat, longitude: center.lng })
     }
   }
 
-  const aproxEqual = (n1 : number, n2 : number, epsilon = 0.000001) => {
+  const aproxEqual = (n1: number, n2: number, epsilon = 0.000001) => {
     return Math.abs(n1 - n2) < epsilon
   }
 
@@ -182,11 +192,21 @@ export const GoogleMap = (props: GoogleMapsParams) => {
   }, [isIntGeoCoder])
 
   useEffect(() => {
-    mapRef.current.animateToRegion({
-      ...region,
+    const regionConfig = {
       latitude: location?.lat,
       longitude: location?.lng,
-    })
+      latitudeDelta: region?.latitudeDelta ?? delta ?? 0.0010,
+      longitudeDelta: region?.longitudeDelta ?? (delta ?? 0.0010) * ASPECT_RATIO
+    }
+
+    mapRef.current.animateToRegion(autoCompleteAddress
+      ? regionConfig
+      : { ...region, ...regionConfig }
+    )
+
+    if (autoCompleteAddress) {
+      setAutoCompleteAddress && setAutoCompleteAddress(false)
+    }
   }, [location])
 
   useEffect(() => {
@@ -197,11 +217,12 @@ export const GoogleMap = (props: GoogleMapsParams) => {
 
   useEffect(() => {
     const interval = setInterval(() => {
-      if (mapRef.current && locations) {
+      if (mapRef.current && locations && !manualZoom) {
         fitAllMarkers()
       }
     }, 1000)
     if (locations) {
+      fitAllMarkers()
       SETMARKERS(locations)
     }
     return () => clearInterval(interval)
@@ -213,7 +234,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
         provider={PROVIDER_GOOGLE}
         initialRegion={region}
         style={styles.map}
-        onRegionChangeComplete={!readOnly ? (coordinates) => handleChangeRegion(coordinates) : () => { }}
+        onRegionChangeComplete={!readOnly ? (coordinates) => { handleChangeRegion(coordinates) } : () => { }}
         zoomTapEnabled
         zoomEnabled
         zoomControlEnabled
@@ -249,7 +270,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
           <React.Fragment key={i}>
             {businessZone?.type === 2 && Array.isArray(businessZone?.data) && (
               <Polygon
-                coordinates={businessZone?.data.map((item: any) => ({ latitude: item.lat, longitude: item.lng}))}
+                coordinates={businessZone?.data.map((item: any) => ({ latitude: item.lat, longitude: item.lng }))}
                 fillColor={fillStyles.fillColor}
                 strokeColor={fillStyles.strokeColor}
                 strokeWidth={fillStyles.strokeWidth}
@@ -257,7 +278,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
             )}
             {(businessZone.type === 1 && businessZone?.data?.center && businessZone?.data?.radio) && (
               <Circle
-                center={{ latitude: businessZone?.data?.center.lat, longitude: businessZone?.data?.center.lng}}
+                center={{ latitude: businessZone?.data?.center.lat, longitude: businessZone?.data?.center.lng }}
                 radius={businessZone?.data.radio * 1000}
                 fillColor={fillStyles.fillColor}
                 strokeColor={fillStyles.strokeColor}
@@ -266,7 +287,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
             )}
             {(businessZone.type === 5 && businessZone?.data?.distance) && (
               <Circle
-                center={{ latitude: center.lat, longitude: center.lng}}
+                center={{ latitude: center.lat, longitude: center.lng }}
                 radius={businessZone?.data.distance * units[businessZone?.data?.unit]}
                 fillColor={fillStyles.fillColor}
                 strokeColor={fillStyles.strokeColor}
@@ -275,7 +296,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
             )}
           </React.Fragment>
         ))}
-      </MapView>
+      </MapView >
       <Alert
         open={alertState.open}
         onAccept={closeAlert}

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

@@ -162,4 +162,4 @@ export const HighestRatedBusinesses = (props: any) => {
   };
 
   return <BusinessesListingController {...highestRatedBusinessesProps} />;
-}; 
+};