ordering-ui-react-native 0.24.18 → 0.25.1

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

@@ -1,959 +1,958 @@
-import React, { useEffect, useState, useRef } from 'react';
-import {
-	StyleSheet,
-	View,
-	TouchableOpacity,
-	Keyboard,
-	TouchableWithoutFeedback,
-	Platform,
-} from 'react-native';
-import {
-	AddressForm as AddressFormController,
-	useLanguage,
-	useConfig,
-	useSession,
-	useOrder,
-	useToast,
-	ToastType
-} from 'ordering-components/native';
-import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrientation'
-
-import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
-import Spinner from 'react-native-loading-spinner-overlay';
-import { useForm, Controller } from 'react-hook-form';
-import Geocoder from 'react-native-geocoding';
-
-import { OInput, OButton, OModal, OIcon } from '../shared';
-import { AddressFormParams } from '../../types';
-import { getTraduction } from '../../utils';
-import { useTheme } from 'styled-components/native';
-import { GoogleMap } from '../GoogleMap';
-import NavBar from '../NavBar';
-
-import {
-	AddressFormContainer,
-	AutocompleteInput,
-	IconsContainer,
-	GoogleMapContainer,
-	FormInput,
-} from './styles';
-import { GPSButton } from '../GPSButton';
-import { ScrollView } from 'react-native-gesture-handler';
-
-const { useDeviceOrientation } = DeviceOrientationMethods
-
-const inputNames = [
-	{ name: 'address', code: 'Address' },
-	{ name: 'internal_number', code: 'Internal number' },
-	{ name: 'zipcode', code: 'Zipcode' },
-	{ name: 'address_notes', code: 'Address notes' },
-];
-
-const AddressFormUI = (props: AddressFormParams) => {
-	const {
-		navigation,
-		updateChanges,
-		address,
-		formState,
-		isEditing,
-		handleChangeInput,
-		addressState,
-		addressesList,
-		saveAddress,
-		isGuestUser,
-		isRequiredField,
-		showField,
-		isFromProductsList,
-		hasAddressDefault,
-		afterSignup,
-		businessSlug,
-		isFromCheckout,
-		onNavigationRedirect
-	} = props;
-
-	const theme = useTheme();
-	const [orientationState] = useDeviceOrientation();
-
-	const [autoCompleteInputFocused, setAutoCompleteInputFocused] = useState(false)
-
-	const isEmptyField = (key: any, str: any) => isRequiredField && isRequiredField(key) && (!str || str.trim().length === 0)
-
-	const tagsName = [
-		{ icon: theme.images.general.tag_home, value: 'home' },
-		{ icon: theme.images.general.tag_building, value: 'office' },
-		{ icon: theme.images.general.tag_heart, value: 'favorite' },
-		{ icon: theme.images.general.tag_plus, value: 'other' },
-	];
-
-	const HEIGHT_SCREEN = orientationState?.dimensions?.height
-
-	const styles = StyleSheet.create({
-		iconContainer: {
-			display: 'flex',
-			justifyContent: 'center',
-			alignItems: 'center',
-			paddingHorizontal: 18,
-			paddingVertical: 5,
-			backgroundColor: theme.colors.clear
-		},
-		inputsStyle: {
-			borderRadius: 10,
-			marginBottom: 20,
-			height: 50,
-			maxHeight: 50,
-			minHeight: 50,
-			flex: 1,
-		},
-		textAreaStyles: {
-			borderRadius: 10,
-			marginBottom: 20,
-			height: 104,
-			maxHeight: 104,
-			minHeight: 104,
-			textAlignVertical: 'top',
-			alignItems: 'flex-start',
-		},
-		pinIcon: {
-			position: 'absolute',
-			end: 0,
-			top: 12,
-			zIndex: 1002,
-			right: autoCompleteInputFocused && (
-				!!address?.address ||
-				!!formState.changes?.address ||
-				!!addressState.address.address
-			) ? 30 : 15,
-			width: 16
-		},
-		wrapperNavbar: Platform.OS === 'ios'
-			? { paddingVertical: 0, paddingLeft: 20, paddingRight: 20 }
-			: { paddingVertical: 10, paddingLeft: 20, paddingRight: 20 }
-	});
-
-	const [, t] = useLanguage();
-	const [{ auth }] = useSession();
-	const [, { showToast }] = useToast();
-	const [configState] = useConfig();
-	const [orderState] = useOrder();
-	const { handleSubmit, errors, control, setValue } = useForm();
-	const [autoCompleteAddress, setAutoCompleteAddress] = useState(false)
-
-	const [toggleMap, setToggleMap] = useState(false);
-	const [alertState, setAlertState] = useState<{
-		open: boolean;
-		content: Array<string>;
-		key?: string | null;
-	}>({ open: false, content: [], key: null });
-	const [addressTag, setAddressTag] = useState(addressState?.address?.tag);
-	const [firstLocationNoEdit, setFirstLocationNoEdit] = useState({
-		value: { lat: null, lng: null },
-		address: null,
-	});
-	const [isFirstTime, setIsFirstTime] = useState(true);
-	const [locationChange, setLocationChange] = useState(
-		isEditing
-			? addressState?.address?.location
-			: formState.changes?.location ?? null,
-	);
-	const [saveMapLocation, setSaveMapLocation] = useState(false);
-	const [isKeyboardShow, setIsKeyboardShow] = useState(false);
-	const [isSignUpEffect, setIsSignUpEffect] = useState(false);
-	const [hasEditing, setAddressEditing] = useState(false);
-
-	const googleInput: any = useRef(null);
-	const internalNumberRef: any = useRef(null);
-	const zipCodeRef: any = useRef(null);
-	const addressNotesRef: any = useRef(null);
-
-	const googleMapsApiKey = configState?.configs?.google_maps_api_key?.value;
-	const isLocationRequired =
-		configState.configs?.google_autocomplete_selection_required?.value ===
-		'1' ||
-		configState.configs?.google_autocomplete_selection_required?.value ===
-		'true';
-	const maxLimitLocation =
-		configState?.configs?.meters_to_change_address?.value;
-	const countryCode = configState?.configs?.country_autocomplete?.value
-	const isHideMap = theme?.address?.components?.map?.hidden
-	const isHideIcons = theme?.address?.components?.icons?.hidden
-	const continueAsGuest = () => navigation.navigate(!!businessSlug ? 'Business' : 'BusinessList', { isGuestUser: true });
-	const unaddressedTypes = configState?.configs?.unaddressed_order_types_allowed?.value.split('|').map((value: any) => Number(value)) || []
-	const isAllowUnaddressOrderType = unaddressedTypes.includes(orderState?.options?.type)
-	const goToBack = () => navigation?.canGoBack() && navigation.goBack();
-
-	const getAddressFormatted = (address: any) => {
-		const data: any = { address: null, error: null };
-		Geocoder.from(address)
-			.then((json) => {
-				if (json.results && json.results?.length > 0) {
-					let postalCode = null;
-					for (const component of json.results?.[0].address_components) {
-						const addressType = component.types?.[0];
-						if (addressType === 'postal_code') {
-							postalCode = component.short_name;
-							break;
-						}
-					}
-					data.address = {
-						address,
-						location: json.results[0].geometry.location,
-						map_data: {
-							library: 'google',
-							place_id: json.results?.[0].place_id,
-						},
-					};
-					if (postalCode) {
-						data.address.zipcode = postalCode;
-					}
-
-					const arrayList = isEditing
-						? addressesList?.addresses?.filter(
-							(address: any) => address.id !== addressState?.address?.id,
-						) || []
-						: addressesList || [];
-					const addressToCompare = isEditing
-						? { ...addressState.address, ...data.address, ...formState.changes }
-						: { ...data.address, ...formState?.changes };
-
-					const isAddressAlreadyExist =
-						arrayList
-							.map((address: any) => checkAddress(address, addressToCompare))
-							.some((value: any) => value) ?? false;
-
-					if (!isAddressAlreadyExist) {
-						saveAddress(data.address);
-						if (isGuestUser) {
-							continueAsGuest();
-							return;
-						}
-						if (!isGuestUser && !auth) {
-							!isFromProductsList
-								? navigation.navigate('Business')
-								: navigation?.canGoBack() && navigation.goBack();
-						}
-						return;
-					}
-
-					setAlertState({
-						open: true,
-						content: [t('ADDRESS_ALREADY_EXIST', 'The address already exists')],
-					});
-				} else {
-					setAlertState({
-						open: true,
-						content: [t('ERROR_NOT_FOUND_ADDRESS', 'Error, address not found')],
-					});
-				}
-			})
-			.catch((error) => {
-				setAlertState({
-					open: true,
-					content: [error?.message || error?.toString()],
-				});
-			});
-	};
-
-	const onSubmit = () => {
-		if (
-			!auth &&
-			formState?.changes?.address === '' &&
-			addressState?.address?.address
-		) {
-			setAlertState({
-				open: true,
-				content: [
-					t(
-						'VALIDATION_ERROR_ADDRESS_REQUIRED',
-						'The field Address is required',
-					),
-				],
-			});
-			return;
-		}
-		if (formState?.changes?.address && !formState?.changes?.location) {
-			if (isLocationRequired) {
-				setAlertState({
-					open: true,
-					content: [
-						t(
-							'ADDRESS_REQUIRE_LOCATION',
-							'The address needs a location, please select one of the suggested',
-						),
-					],
-				});
-				return;
-			}
-			getAddressFormatted(formState?.changes?.address);
-			return;
-		}
-
-		const arrayList = isEditing
-			? addressesList?.addresses?.filter(
-				(address: any) => address.id !== addressState?.address?.id,
-			) || []
-			: addressesList || [];
-		const addressToCompare = isEditing
-			? { ...addressState.address, ...formState.changes }
-			: formState?.changes;
-
-		const isAddressAlreadyExist =
-			arrayList
-				.map((address: any) => checkAddress(address, addressToCompare))
-				.some((value: any) => value) ?? false;
-
-		if (!isAddressAlreadyExist) {
-			saveAddress();
-			if (isGuestUser) {
-				continueAsGuest();
-			}
-			if (!isGuestUser && !auth && !afterSignup) {
-				!isFromProductsList
-					? navigation.navigate('Business')
-					: navigation?.canGoBack() && navigation.goBack();
-			}
-			return;
-		}
-
-		setAlertState({
-			open: true,
-			content: [t('ADDRESS_ALREADY_EXIST', 'The address already exists')],
-		});
-	};
-
-	/**
-	 * Returns true when the user made no changes
-	 * @param {object} address
-	 */
-	const checkAddress = (address: any, addressToCompare: any) => {
-		const props = [
-			'address',
-			'address_notes',
-			'zipcode',
-			'location',
-			'internal_number',
-		];
-		const values: any = [];
-		props.forEach((prop) => {
-			if (addressToCompare[prop]) {
-				if (prop === 'location') {
-					values.push(
-						address[prop]?.lat === addressToCompare[prop]?.lat &&
-						address[prop]?.lng === addressToCompare[prop]?.lng,
-					);
-				} else {
-					values.push(address[prop] === addressToCompare[prop]);
-				}
-			} else {
-				values.push(!address[prop]);
-			}
-		});
-		return values.every((value: any) => value);
-	};
-
-	const handleChangeAddress = (data: any, details: any) => {
-		const addressObj: any = {}
-		if (details?.address_components) {
-			details.address_components.map((component: any) => {
-				const addressType = component.types[0]
-				if (addressType === 'postal_code') {
-					addressObj.zipcode = component.short_name
-				}
-				if (addressType === 'street_number') {
-					addressObj.street_number = component.long_name
-				}
-				if (addressType === 'neighborhood') {
-					addressObj.neighborhood = component.long_name
-				}
-				if (addressType === 'route') {
-					addressObj.route = component.short_name
-				}
-				if (addressType === 'locality') {
-					addressObj.locality = component.long_name
-				}
-				if (component.types?.includes('sublocality')) {
-					addressObj.sublocality = component.long_name
-				}
-				if (addressType === 'country') {
-					addressObj.country = component.long_name
-					addressObj.country_code = component.short_name
-				}
-				if (addressType === 'administrative_area_level_1') {
-					addressObj.state = component.long_name
-				}
-				if (addressType === 'administrative_area_level_2') {
-					addressObj.city = component.long_name
-				}
-			})
-		}
-		const addressSelected = {
-			address: data?.description || data?.address,
-			location: details?.geometry?.location,
-			utc_offset: details?.utc_offset || null,
-			map_data: { library: 'google', place_id: data.place_id },
-			zipcode: data?.zipcode || null,
-			...addressObj
-		};
-		updateChanges(addressSelected);
-	};
-
-	const handleAddressTag = (tag: string) => {
-		setAddressTag(tag);
-		handleChangeInput({
-			target: {
-				name: 'tag',
-				value: tag,
-			},
-		});
-	};
-
-	const handleToggleMap = () => {
-		setToggleMap(!toggleMap);
-	};
-
-	const showFieldWithTheme = (name) => {
-		return !theme?.address?.components?.[name]?.hidden
-	}
-
-	useEffect(() => {
-		if (
-			orderState.loading &&
-			!addressesList &&
-			orderState?.options?.address &&
-			auth &&
-			!afterSignup
-		) {
-			isFromCheckout
-				? navigation.goBack()
-				: !isFromProductsList
-					? navigation.navigate('BottomTab')
-					: navigation.navigate('Business');
-		}
-	}, [orderState?.options?.address]);
-
-	useEffect(() => {
-		if (alertState.open && alertState?.key !== 'ERROR_MAX_LIMIT_LOCATION') {
-			alertState.content && showToast(ToastType.Error, alertState.content);
-		}
-	}, [alertState.content]);
-
-	useEffect(() => {
-		if (!auth) {
-			inputNames.forEach((field) =>
-				setValue(
-					field.name,
-					formState?.changes[field.name] ||
-					(orderState?.options?.address &&
-						orderState?.options?.address[field.name]) ||
-					'',
-				),
-			);
-			return;
-		}
-
-		if (!formState.loading && formState.result?.error) {
-			setAlertState({
-				open: true,
-				content: formState.result?.result || [t('ERROR', 'Error')],
-			});
-		}
-
-		setValue(
-			'address',
-			formState?.changes?.address ?? addressState.address?.address ?? '',
-		);
-		if (!isEditing) {
-			formState?.changes?.address &&
-				setLocationChange(formState?.changes?.location);
-			if (
-				formState?.changes?.address &&
-				formState?.changes?.address !== firstLocationNoEdit?.address &&
-				formState?.changes?.location &&
-				formState?.changes?.location?.lat !== firstLocationNoEdit.value?.lat &&
-				formState?.changes?.location?.lng !== firstLocationNoEdit.value?.lng
-			) {
-				setFirstLocationNoEdit({
-					value: formState?.changes?.location,
-					address: formState?.changes?.address,
-				});
-			}
-		}
-
-		if (isEditing) {
-			if (formState?.changes?.location) {
-				const prevLocation = {
-					lat: locationChange?.lat?.toFixed(5),
-					lng: locationChange?.lng?.toFixed(5),
-				};
-				const newLocation = {
-					lat: formState?.changes?.location?.lat?.toFixed(5),
-					lng: formState?.changes?.location?.lng?.toFixed(5),
-				};
-				if (
-					prevLocation?.lat !== newLocation?.lat &&
-					prevLocation?.lng !== newLocation?.lng
-				) {
-					setLocationChange(formState?.changes?.location);
-				}
-			}
-		}
-	}, [formState]);
-
-	useEffect(() => {
-		if (formState?.result && !formState?.loading) {
-			if (formState?.error) {
-				showToast(ToastType.Error, formState.error[0]);
-			} else {
-				showToast(
-					ToastType.Success,
-					t('UPDATE_SUCCESSFULLY', 'Update successfully'),
-				);
-			}
-		}
-	}, [formState.result]);
-
-	useEffect(() => {
-		if (Object.keys(errors).length > 0) {
-			// Convert all errors in one string to show in toast provider
-			const list = Object.values(errors);
-			let stringError = '';
-			list.map((item: any, i: number) => {
-				stringError +=
-					i + 1 === list.length ? `- ${item.message}` : `- ${item.message}\n`;
-			});
-			showToast(ToastType.Error, stringError);
-		}
-	}, [errors]);
-
-	useEffect(() => {
-		if (googleInput?.current) {
-			googleInput?.current?.setAddressText(
-				address?.address ||
-				formState.changes?.address ||
-				addressState.address.address ||
-				'',
-			);
-		}
-	}, []);
-
-	useEffect(() => {
-		Geocoder.init(googleMapsApiKey);
-	}, [googleMapsApiKey]);
-
-	useEffect(() => {
-		const keyboardDidShowListener = Keyboard.addListener(
-			'keyboardDidShow',
-			() => {
-				setIsKeyboardShow(true);
-			},
-		);
-		const keyboardDidHideListener = Keyboard.addListener(
-			'keyboardDidHide',
-			() => {
-				setIsKeyboardShow(false);
-			},
-		);
-		return () => {
-			keyboardDidShowListener.remove();
-			keyboardDidHideListener.remove();
-		};
-	}, []);
-
-	useEffect(() => {
-		if (!orderState.loading && auth && !hasAddressDefault && isSignUpEffect) {
-			navigation.navigate('BottomTab');
-		}
-		setIsSignUpEffect(true);
-	}, [orderState.loading]);
-
-	useEffect(() => {
-		if (isAllowUnaddressOrderType) {
-			onNavigationRedirect && onNavigationRedirect(!!businessSlug ? 'Business' : 'BusinessList')
-		}
-	}, [isAllowUnaddressOrderType])
-
-	return (
-		<ScrollView
-			keyboardShouldPersistTaps='always'
-			listViewDisplayed={false}
-		>
-			<View style={styles.wrapperNavbar}>
-				<NavBar
-					title={t('WHERE_DO_WE_DELIVERY', 'Where do we delivery?')}
-					titleAlign={'center'}
-					onActionLeft={goToBack}
-					showCall={false}
-					btnStyle={{ paddingLeft: 0, paddingRight: 5 }}
-					style={{ marginTop: Platform.OS === 'ios' ? 0 : 10 }}
-					titleWrapStyle={{ paddingHorizontal: 0, width: '100%' }}
-					titleStyle={{ marginRight: 0, marginLeft: 0, paddingRight: 5 }}
-				/>
-			</View>
-			<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-				<AddressFormContainer style={{ overflow: 'scroll' }}>
-					<View>
-						<FormInput>
-							<AutocompleteInput>
-								<Controller
-									control={control}
-									name="address"
-									defaultValue={
-										address?.address ||
-										formState.changes?.address ||
-										addressState.address.address ||
-										''
-									}
-									rules={{
-										required:
-											isRequiredField && isRequiredField('address')
-												? t(
-													`VALIDATION_ERROR_ADDRESS_REQUIRED`,
-													`The field Address is required`,
-												)
-												: null,
-									}}
-									render={() => (
-										<GooglePlacesAutocomplete
-											placeholder={t('ADD_ADDRESS', 'Add a address')}
-											onPress={(data, details: any) => {
-												handleChangeAddress(data, details);
-												setAutoCompleteAddress(true);
-											}}
-											query={{
-												key: googleMapsApiKey,
-												components: countryCode && countryCode !== '*' ? `country:${countryCode}` : ''
-											}}
-											fetchDetails
-											ref={googleInput}
-											textInputProps={{
-												onChangeText: (text) => {
-													if (!isFirstTime) {
-														handleChangeInput({
-															target: { name: 'address', value: text },
-														});
-														setValue('address', text);
-														setAutoCompleteAddress(true)
-													}
-													setIsFirstTime(false);
-													setAddressEditing(text.length == 0);
-												},
-												onSubmitEditing: () =>
-													internalNumberRef?.current?.focus?.(),
-												autoCorrect: false,
-												blurOnSubmit: false,
-												returnKeyType: 'next',
-												onFocus: () => setAutoCompleteInputFocused(true),
-												onBlur: () => setAutoCompleteInputFocused(false)
-											}}
-											onFail={(error) =>
-												setAlertState({
-													open: true,
-													content: getTraduction(error, t),
-												})
-											}
-											styles={{
-												listView: {
-													position: 'relative',
-													borderBottomStartRadius: 15,
-													borderBottomEndRadius: 15,
-													elevation: 2,
-													borderWidth: 1,
-													borderColor: '#ddd',
-													bottom: 20,
-												},
-												container: {
-													zIndex: 100,
-												},
-												textInput: {
-													borderWidth: 1,
-													borderRadius: 7.6,
-													borderColor: autoCompleteInputFocused ? theme.colors.primary : theme.colors.border,
-													flexGrow: 1,
-													fontSize: 15,
-													paddingLeft: 16,
-													paddingRight: 32,
-													minHeight: 50,
-													fontFamily: 'Poppins-Regular',
-													marginBottom: 24
-												},
-											}}
-										/>
-									)}
-								/>
-
-								{(
-									((!isEditing && !isGuestUser) ||
-										(isEditing && !isGuestUser)) ||
-									(isGuestUser)) &&
-									(
-										<View style={styles.pinIcon}>
-											<GPSButton
-												apiKey={googleMapsApiKey}
-												handleGPS={(data: any, detail: any) => {
-													handleChangeAddress(data, detail);
-													setValue('address', data.address);
-													if (googleInput?.current) {
-														googleInput?.current?.setAddressText(data.address);
-													}
-												}}
-												IconButton={<OIcon src={theme.images.general.pin} width={16} />}
-												isIntGeoCoder
-											/>
-										</View>
-									)}
-							</AutocompleteInput>
-
-							{!isHideMap && (locationChange || formState.changes?.location) && (
-								<View
-									style={{
-										height: 189,
-										borderRadius: 7.6,
-										overflow: 'hidden',
-										marginBottom: 24,
-									}}>
-									<GoogleMapContainer>
-										<GoogleMap
-											location={locationChange || formState.changes?.location}
-											handleChangeAddressMap={handleChangeAddress}
-											maxLimitLocation={maxLimitLocation}
-											saveLocation={saveMapLocation}
-											setSaveLocation={setSaveMapLocation}
-											handleToggleMap={handleToggleMap}
-											isIntGeoCoder
-											setAutoCompleteAddress={setAutoCompleteAddress}
-											autoCompleteAddress={autoCompleteAddress}
-										/>
-									</GoogleMapContainer>
-								</View>
-							)}
-
-							<View style={{ flexDirection: 'row', flexBasis: '50%' }}>
-								{showField?.('internal_number') && ((isRequiredField && isRequiredField('internal_number')) || showFieldWithTheme('internal_number')) && (
-									<Controller
-										control={control}
-										name="internal_number"
-										rules={{
-											required:
-												isRequiredField && isRequiredField('internal_number')
-													? t(
-														`VALIDATION_ERROR_INTERNAL_NUMBER_REQUIRED`,
-														`The field internal number is required`,
-													)
-													: null,
-										}}
-										defaultValue={
-											address?.internal_number ||
-											formState.changes?.internal_number ||
-											addressState?.address?.internal_number ||
-											''
-										}
-										render={() => (
-											<OInput
-												name="internal_number"
-												placeholder={t('INTERNAL_NUMBER', 'Internal number')}
-												onChange={(data: any) => {
-													handleChangeInput(data);
-													setValue('internal_number', isEmptyField('internal_number', data?.target?.value) ? null : data);
-												}}
-												value={
-													address?.internal_number ||
-													formState.changes?.internal_number ||
-													addressState?.address?.internal_number ||
-													''
-												}
-												isFocusHighlight
-												style={{
-													...styles.inputsStyle,
-													marginRight: showField?.('internal_number') && showField?.('zipcode') ? 24 : 0
-												}}
-												forwardRef={internalNumberRef}
-												returnKeyType="next"
-												onSubmitEditing={() => zipCodeRef?.current?.focus?.()}
-												blurOnSubmit={false}
-											/>
-										)}
-									/>
-								)}
-
-								{showField?.('zipcode') && ((isRequiredField && isRequiredField('zipcode')) || showFieldWithTheme('zipcode')) && (
-									<Controller
-										control={control}
-										name="zipcode"
-										rules={{
-											required:
-												isRequiredField && isRequiredField('zipcode')
-													? t(
-														`VALIDATION_ERROR_ZIP_CODE_REQUIRED`,
-														`The field Zip Code is required`,
-													)
-													: null,
-										}}
-										defaultValue={
-											address?.zipcode ||
-											formState.changes?.zipcode ||
-											addressState.address.zipcode ||
-											''
-										}
-										render={() => (
-											<OInput
-												name="zipcode"
-												placeholder={t('ZIP_CODE', 'Zip code')}
-												onChange={(data: any) => {
-													handleChangeInput(data);
-													setValue('zipcode', isEmptyField('zipcode', data?.target?.value) ? null : data);
-												}}
-												value={
-													address?.zipcode ||
-													formState.changes?.zipcode ||
-													addressState.address.zipcode ||
-													''
-												}
-												isFocusHighlight
-												style={styles.inputsStyle}
-												forwardRef={zipCodeRef}
-												returnKeyType="next"
-												onSubmitEditing={() => addressNotesRef?.current?.focus?.()}
-												blurOnSubmit={false}
-											/>
-										)}
-									/>
-								)}
-							</View>
-
-							{showField?.('address_notes') && ((isRequiredField && isRequiredField('address_notes')) || showFieldWithTheme('address_notes')) && (
-								<Controller
-									control={control}
-									name="address_notes"
-									rules={{
-										required:
-											isRequiredField && isRequiredField('address_notes')
-												? t(
-													`VALIDATION_ERROR_ADDRESS_NOTES_REQUIRED`,
-													`The field address notes is required`,
-												)
-												: null,
-									}}
-									defaultValue={
-										address?.address_notes ||
-										formState.changes?.address_notes ||
-										addressState.address.address_notes ||
-										''
-									}
-									render={() => (
-										<OInput
-											name="address_notes"
-											placeholder={t('ADDRESS_NOTES', 'Address notes')}
-											onChange={(text: any) => {
-												handleChangeInput(text);
-												setValue('address_notes', text);
-											}}
-											value={
-												address?.address_notes ||
-												formState.changes?.address_notes ||
-												addressState.address.address_notes ||
-												''
-											}
-											multiline
-											isFocusHighlight
-											style={styles.textAreaStyles}
-											returnKeyType="done"
-											forwardRef={addressNotesRef}
-											blurOnSubmit
-										/>
-									)}
-								/>
-							)}
-						</FormInput>
-						{!isHideIcons && (
-							<IconsContainer>
-								{tagsName.map((tag) => (
-									<TouchableOpacity
-										key={tag.value}
-										onPress={() => handleAddressTag(tag.value)}>
-										<View
-											style={{
-												...styles.iconContainer,
-											}}>
-											<OIcon
-												src={tag.icon}
-												width={24}
-												color={
-													addressTag === tag.value ?
-														theme.colors.primary : theme.colors.disabled
-												}
-											/>
-										</View>
-									</TouchableOpacity>
-								))}
-							</IconsContainer>
-						)}
-					</View>
-
-					<View>
-						{Object.keys(formState?.changes).length > 0 ? (
-							<OButton
-								text={
-									!formState.loading
-										? isEditing ||
-											(!auth && orderState.options?.address?.address)
-											? t('UPDATE', 'Update')
-											: t('CONTINUE', 'Continue')
-										: t('LOADING', 'Loading')
-								}
-								onClick={handleSubmit(onSubmit)}
-								isDisabled={formState.loading}
-								style={{ borderRadius: 7.6, shadowOpacity: 0 }}
-								showNextIcon
-							/>
-						) : (
-							<OButton
-								text={t('CANCEL', 'Cancel')}
-								bgColor={theme.colors.secundary}
-								borderColor={theme.colors.secundary}
-								textStyle={{ color: theme.colors.textNormal }}
-								style={{ borderRadius: 7.6, borderWidth: 1, shadowOpacity: 0 }}
-								onClick={() => navigation?.canGoBack() && navigation.goBack()}
-							/>
-						)}
-					</View>
-					<OModal
-						open={toggleMap}
-						onClose={() => handleToggleMap()}
-						entireModal
-						customClose>
-						{(locationChange || formState.changes?.location) && (
-							<GoogleMapContainer>
-								<GoogleMap
-									location={locationChange || formState.changes?.location}
-									handleChangeAddressMap={handleChangeAddress}
-									maxLimitLocation={maxLimitLocation}
-									saveLocation={saveMapLocation}
-									setSaveLocation={setSaveMapLocation}
-									handleToggleMap={handleToggleMap}
-									isIntGeoCoder
-								/>
-							</GoogleMapContainer>
-						)}
-						<OButton
-							text={t('SAVE', 'Save')}
-							imgRightSrc={null}
-							style={{ marginHorizontal: 30, marginBottom: 10 }}
-							onClick={() => {
-								setSaveMapLocation(true)
-								handleToggleMap && handleToggleMap()
-							}}
-						/>
-					</OModal>
-					<Spinner visible={saveMapLocation} />
-				</AddressFormContainer>
-			</TouchableWithoutFeedback>
-		</ScrollView>
-	);
-};
-
-export const AddressForm = (props: AddressFormParams) => {
-	const addressFormProps = {
-		...props,
-		UIComponent: AddressFormUI,
-	};
-	return <AddressFormController {...addressFormProps} />;
-};
+import React, { useEffect, useState, useRef } from 'react';
+import {
+	StyleSheet,
+	View,
+	TouchableOpacity,
+	Keyboard,
+	TouchableWithoutFeedback,
+	Platform,
+} from 'react-native';
+import {
+	AddressForm as AddressFormController,
+	useLanguage,
+	useConfig,
+	useSession,
+	useOrder,
+	useToast,
+	ToastType
+} from 'ordering-components/native';
+import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrientation'
+
+import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
+import Spinner from 'react-native-loading-spinner-overlay';
+import { useForm, Controller } from 'react-hook-form';
+import Geocoder from 'react-native-geocoding';
+
+import { OInput, OButton, OModal, OIcon } from '../shared';
+import { AddressFormParams } from '../../types';
+import { getTraduction } from '../../utils';
+import { useTheme } from 'styled-components/native';
+import { GoogleMap } from '../GoogleMap';
+import NavBar from '../NavBar';
+
+import {
+	AddressFormContainer,
+	AutocompleteInput,
+	IconsContainer,
+	GoogleMapContainer,
+	FormInput,
+} from './styles';
+import { GPSButton } from '../GPSButton';
+import { ScrollView } from 'react-native-gesture-handler';
+
+const { useDeviceOrientation } = DeviceOrientationMethods
+
+const inputNames = [
+	{ name: 'address', code: 'Address' },
+	{ name: 'internal_number', code: 'Internal number' },
+	{ name: 'zipcode', code: 'Zipcode' },
+	{ name: 'address_notes', code: 'Address notes' },
+];
+
+const AddressFormUI = (props: AddressFormParams) => {
+	const {
+		navigation,
+		updateChanges,
+		address,
+		formState,
+		isEditing,
+		handleChangeInput,
+		addressState,
+		addressesList,
+		saveAddress,
+		isGuestUser,
+		isRequiredField,
+		showField,
+		isFromProductsList,
+		hasAddressDefault,
+		afterSignup,
+		businessSlug,
+		isFromCheckout,
+		onNavigationRedirect
+	} = props;
+
+	const theme = useTheme();
+	const [orientationState] = useDeviceOrientation();
+
+	const [autoCompleteInputFocused, setAutoCompleteInputFocused] = useState(false)
+
+	const isEmptyField = (key: any, str: any) => isRequiredField && isRequiredField(key) && (!str || str.trim().length === 0)
+
+	const tagsName = [
+		{ icon: theme.images.general.tag_home, value: 'home' },
+		{ icon: theme.images.general.tag_building, value: 'office' },
+		{ icon: theme.images.general.tag_heart, value: 'favorite' },
+		{ icon: theme.images.general.tag_plus, value: 'other' },
+	];
+
+	const HEIGHT_SCREEN = orientationState?.dimensions?.height
+
+	const styles = StyleSheet.create({
+		iconContainer: {
+			display: 'flex',
+			justifyContent: 'center',
+			alignItems: 'center',
+			paddingHorizontal: 18,
+			paddingVertical: 5,
+			backgroundColor: theme.colors.clear
+		},
+		inputsStyle: {
+			borderRadius: 10,
+			marginBottom: 20,
+			height: 50,
+			maxHeight: 50,
+			minHeight: 50,
+			flex: 1,
+		},
+		textAreaStyles: {
+			borderRadius: 10,
+			marginBottom: 20,
+			height: 104,
+			maxHeight: 104,
+			minHeight: 104,
+			textAlignVertical: 'top',
+			alignItems: 'flex-start',
+		},
+		pinIcon: {
+			position: 'absolute',
+			end: 0,
+			top: 12,
+			zIndex: 1002,
+			right: autoCompleteInputFocused && (
+				!!address?.address ||
+				!!formState.changes?.address ||
+				!!addressState.address.address
+			) ? 30 : 15,
+			width: 16
+		},
+		wrapperNavbar: Platform.OS === 'ios'
+			? { paddingVertical: 0, paddingLeft: 20, paddingRight: 20 }
+			: { paddingVertical: 10, paddingLeft: 20, paddingRight: 20 }
+	});
+
+	const [, t] = useLanguage();
+	const [{ auth }] = useSession();
+	const [, { showToast }] = useToast();
+	const [configState] = useConfig();
+	const [orderState] = useOrder();
+	const { handleSubmit, errors, control, setValue } = useForm();
+	const [autoCompleteAddress, setAutoCompleteAddress] = useState(false)
+
+	const [toggleMap, setToggleMap] = useState(false);
+	const [alertState, setAlertState] = useState<{
+		open: boolean;
+		content: Array<string>;
+		key?: string | null;
+	}>({ open: false, content: [], key: null });
+	const [addressTag, setAddressTag] = useState(addressState?.address?.tag);
+	const [firstLocationNoEdit, setFirstLocationNoEdit] = useState({
+		value: { lat: null, lng: null },
+		address: null,
+	});
+	const [isFirstTime, setIsFirstTime] = useState(true);
+	const [locationChange, setLocationChange] = useState(
+		isEditing
+			? addressState?.address?.location
+			: formState.changes?.location ?? null,
+	);
+	const [saveMapLocation, setSaveMapLocation] = useState(false);
+	const [isKeyboardShow, setIsKeyboardShow] = useState(false);
+	const [isSignUpEffect, setIsSignUpEffect] = useState(false);
+	const [hasEditing, setAddressEditing] = useState(false);
+
+	const googleInput: any = useRef(null);
+	const internalNumberRef: any = useRef(null);
+	const zipCodeRef: any = useRef(null);
+	const addressNotesRef: any = useRef(null);
+
+	const googleMapsApiKey = configState?.configs?.google_maps_api_key?.value;
+	const isLocationRequired =
+		configState.configs?.google_autocomplete_selection_required?.value ===
+		'1' ||
+		configState.configs?.google_autocomplete_selection_required?.value ===
+		'true';
+	const maxLimitLocation =
+		configState?.configs?.meters_to_change_address?.value;
+	const countryCode = configState?.configs?.country_autocomplete?.value
+	const isHideMap = theme?.address?.components?.map?.hidden
+	const isHideIcons = theme?.address?.components?.icons?.hidden
+	const continueAsGuest = () => navigation.navigate(!!businessSlug ? 'Business' : 'BusinessList', { isGuestUser: true });
+	const unaddressedTypes = configState?.configs?.unaddressed_order_types_allowed?.value.split('|').map((value: any) => Number(value)) || []
+	const isAllowUnaddressOrderType = unaddressedTypes.includes(orderState?.options?.type)
+	const goToBack = () => navigation?.canGoBack() && navigation.goBack();
+
+	const getAddressFormatted = (address: any) => {
+		const data: any = { address: null, error: null };
+		Geocoder.from(address)
+			.then((json) => {
+				if (json.results && json.results?.length > 0) {
+					let postalCode = null;
+					for (const component of json.results?.[0].address_components) {
+						const addressType = component.types?.[0];
+						if (addressType === 'postal_code') {
+							postalCode = component.short_name;
+							break;
+						}
+					}
+					data.address = {
+						address,
+						location: json.results[0].geometry.location,
+						map_data: {
+							library: 'google',
+							place_id: json.results?.[0].place_id,
+						},
+					};
+					if (postalCode) {
+						data.address.zipcode = postalCode;
+					}
+
+					const arrayList = isEditing
+						? addressesList?.addresses?.filter(
+							(address: any) => address.id !== addressState?.address?.id,
+						) || []
+						: addressesList || [];
+					const addressToCompare = isEditing
+						? { ...addressState.address, ...data.address, ...formState.changes }
+						: { ...data.address, ...formState?.changes };
+
+					const isAddressAlreadyExist =
+						arrayList
+							.map((address: any) => checkAddress(address, addressToCompare))
+							.some((value: any) => value) ?? false;
+
+					if (!isAddressAlreadyExist) {
+						saveAddress(data.address);
+						if (isGuestUser) {
+							continueAsGuest();
+							return;
+						}
+						if (!isGuestUser && !auth) {
+							!isFromProductsList
+								? navigation.navigate('Business')
+								: navigation?.canGoBack() && navigation.goBack();
+						}
+						return;
+					}
+
+					setAlertState({
+						open: true,
+						content: [t('ADDRESS_ALREADY_EXIST', 'The address already exists')],
+					});
+				} else {
+					setAlertState({
+						open: true,
+						content: [t('ERROR_NOT_FOUND_ADDRESS', 'Error, address not found')],
+					});
+				}
+			})
+			.catch((error) => {
+				setAlertState({
+					open: true,
+					content: [error?.message || error?.toString()],
+				});
+			});
+	};
+
+	const onSubmit = () => {
+		if (
+			!auth &&
+			formState?.changes?.address === '' &&
+			addressState?.address?.address
+		) {
+			setAlertState({
+				open: true,
+				content: [
+					t(
+						'VALIDATION_ERROR_ADDRESS_REQUIRED',
+						'The field Address is required',
+					),
+				],
+			});
+			return;
+		}
+		if (formState?.changes?.address && !formState?.changes?.location) {
+			if (isLocationRequired) {
+				setAlertState({
+					open: true,
+					content: [
+						t(
+							'ADDRESS_REQUIRE_LOCATION',
+							'The address needs a location, please select one of the suggested',
+						),
+					],
+				});
+				return;
+			}
+			getAddressFormatted(formState?.changes?.address);
+			return;
+		}
+
+		const arrayList = isEditing
+			? addressesList?.addresses?.filter(
+				(address: any) => address.id !== addressState?.address?.id,
+			) || []
+			: addressesList || [];
+		const addressToCompare = isEditing
+			? { ...addressState.address, ...formState.changes }
+			: formState?.changes;
+
+		const isAddressAlreadyExist =
+			arrayList
+				.map((address: any) => checkAddress(address, addressToCompare))
+				.some((value: any) => value) ?? false;
+
+		if (!isAddressAlreadyExist) {
+			saveAddress();
+			if (isGuestUser) {
+				continueAsGuest();
+			}
+			if (!isGuestUser && !auth && !afterSignup) {
+				!isFromProductsList
+					? navigation.navigate('Business')
+					: navigation?.canGoBack() && navigation.goBack();
+			}
+			return;
+		}
+
+		setAlertState({
+			open: true,
+			content: [t('ADDRESS_ALREADY_EXIST', 'The address already exists')],
+		});
+	};
+
+	/**
+	 * Returns true when the user made no changes
+	 * @param {object} address
+	 */
+	const checkAddress = (address: any, addressToCompare: any) => {
+		const props = [
+			'address',
+			'address_notes',
+			'zipcode',
+			'location',
+			'internal_number',
+		];
+		const values: any = [];
+		props.forEach((prop) => {
+			if (addressToCompare[prop]) {
+				if (prop === 'location') {
+					values.push(
+						address[prop]?.lat === addressToCompare[prop]?.lat &&
+						address[prop]?.lng === addressToCompare[prop]?.lng,
+					);
+				} else {
+					values.push(address[prop] === addressToCompare[prop]);
+				}
+			} else {
+				values.push(!address[prop]);
+			}
+		});
+		return values.every((value: any) => value);
+	};
+
+	const handleChangeAddress = (data: any, details: any) => {
+		const addressObj: any = {}
+		if (details?.address_components) {
+			details.address_components.map((component: any) => {
+				const addressType = component.types[0]
+				if (addressType === 'postal_code') {
+					addressObj.zipcode = component.short_name
+				}
+				if (addressType === 'street_number') {
+					addressObj.street_number = component.long_name
+				}
+				if (addressType === 'neighborhood') {
+					addressObj.neighborhood = component.long_name
+				}
+				if (addressType === 'route') {
+					addressObj.route = component.short_name
+				}
+				if (addressType === 'locality') {
+					addressObj.locality = component.long_name
+				}
+				if (component.types?.includes('sublocality')) {
+					addressObj.sublocality = component.long_name
+				}
+				if (addressType === 'country') {
+					addressObj.country = component.long_name
+					addressObj.country_code = component.short_name
+				}
+				if (addressType === 'administrative_area_level_1') {
+					addressObj.state = component.long_name
+				}
+				if (addressType === 'administrative_area_level_2') {
+					addressObj.city = component.long_name
+				}
+			})
+		}
+		const addressSelected = {
+			address: data?.description || data?.address,
+			location: details?.geometry?.location,
+			utc_offset: details?.utc_offset || null,
+			map_data: { library: 'google', place_id: data.place_id },
+			zipcode: data?.zipcode || null,
+			...addressObj
+		};
+		updateChanges(addressSelected);
+	};
+
+	const handleAddressTag = (tag: string) => {
+		setAddressTag(tag);
+		handleChangeInput({
+			target: {
+				name: 'tag',
+				value: tag,
+			},
+		});
+	};
+
+	const handleToggleMap = () => {
+		setToggleMap(!toggleMap);
+	};
+
+	const showFieldWithTheme = (name) => {
+		return !theme?.address?.components?.[name]?.hidden
+	}
+
+	useEffect(() => {
+		if (
+			orderState.loading &&
+			!addressesList &&
+			orderState?.options?.address &&
+			auth &&
+			!afterSignup
+		) {
+			isFromCheckout
+				? navigation.goBack()
+				: !isFromProductsList
+					? navigation.navigate('BottomTab')
+					: navigation.navigate('Business');
+		}
+	}, [orderState?.options?.address]);
+
+	useEffect(() => {
+		if (alertState.open && alertState?.key !== 'ERROR_MAX_LIMIT_LOCATION') {
+			alertState.content && showToast(ToastType.Error, alertState.content);
+		}
+	}, [alertState.content]);
+
+	useEffect(() => {
+		if (!auth) {
+			inputNames.forEach((field) =>
+				setValue(
+					field.name,
+					formState?.changes[field.name] ||
+					(orderState?.options?.address &&
+						orderState?.options?.address[field.name]) ||
+					'',
+				),
+			);
+			return;
+		}
+
+		if (!formState.loading && formState.result?.error) {
+			setAlertState({
+				open: true,
+				content: formState.result?.result || [t('ERROR', 'Error')],
+			});
+		}
+
+		setValue(
+			'address',
+			formState?.changes?.address ?? addressState.address?.address ?? '',
+		);
+		if (!isEditing) {
+			formState?.changes?.address &&
+				setLocationChange(formState?.changes?.location);
+			if (
+				formState?.changes?.address &&
+				formState?.changes?.address !== firstLocationNoEdit?.address &&
+				formState?.changes?.location &&
+				formState?.changes?.location?.lat !== firstLocationNoEdit.value?.lat &&
+				formState?.changes?.location?.lng !== firstLocationNoEdit.value?.lng
+			) {
+				setFirstLocationNoEdit({
+					value: formState?.changes?.location,
+					address: formState?.changes?.address,
+				});
+			}
+		}
+
+		if (isEditing) {
+			if (formState?.changes?.location) {
+				const prevLocation = {
+					lat: locationChange?.lat?.toFixed(5),
+					lng: locationChange?.lng?.toFixed(5),
+				};
+				const newLocation = {
+					lat: formState?.changes?.location?.lat?.toFixed(5),
+					lng: formState?.changes?.location?.lng?.toFixed(5),
+				};
+				if (
+					prevLocation?.lat !== newLocation?.lat &&
+					prevLocation?.lng !== newLocation?.lng
+				) {
+					setLocationChange(formState?.changes?.location);
+				}
+			}
+		}
+	}, [formState]);
+
+	useEffect(() => {
+		if (formState?.result && !formState?.loading) {
+			if (formState?.error) {
+				showToast(ToastType.Error, formState.error[0]);
+			} else {
+				showToast(
+					ToastType.Success,
+					t('UPDATE_SUCCESSFULLY', 'Update successfully'),
+				);
+			}
+		}
+	}, [formState.result]);
+
+	useEffect(() => {
+		if (Object.keys(errors).length > 0) {
+			// Convert all errors in one string to show in toast provider
+			const list = Object.values(errors);
+			let stringError = '';
+			list.map((item: any, i: number) => {
+				stringError +=
+					i + 1 === list.length ? `- ${item.message}` : `- ${item.message}\n`;
+			});
+			showToast(ToastType.Error, stringError);
+		}
+	}, [errors]);
+
+	useEffect(() => {
+		if (googleInput?.current) {
+			googleInput?.current?.setAddressText(
+				address?.address ||
+				formState.changes?.address ||
+				addressState.address.address ||
+				'',
+			);
+		}
+	}, []);
+
+	useEffect(() => {
+		Geocoder.init(googleMapsApiKey);
+	}, [googleMapsApiKey]);
+
+	useEffect(() => {
+		const keyboardDidShowListener = Keyboard.addListener(
+			'keyboardDidShow',
+			() => {
+				setIsKeyboardShow(true);
+			},
+		);
+		const keyboardDidHideListener = Keyboard.addListener(
+			'keyboardDidHide',
+			() => {
+				setIsKeyboardShow(false);
+			},
+		);
+		return () => {
+			keyboardDidShowListener.remove();
+			keyboardDidHideListener.remove();
+		};
+	}, []);
+
+	useEffect(() => {
+		if (!orderState.loading && auth && !hasAddressDefault && isSignUpEffect) {
+			navigation.navigate('BottomTab');
+		}
+		setIsSignUpEffect(true);
+	}, [orderState.loading]);
+
+	useEffect(() => {
+		if (isAllowUnaddressOrderType) {
+			onNavigationRedirect && onNavigationRedirect(!!businessSlug ? 'Business' : 'BusinessList')
+		}
+	}, [isAllowUnaddressOrderType])
+
+	return (
+		<ScrollView
+			keyboardShouldPersistTaps='always'
+			listViewDisplayed={false}
+		>
+			<View style={styles.wrapperNavbar}>
+				<NavBar
+					title={t('WHERE_DO_WE_DELIVERY', 'Where do we delivery?')}
+					titleAlign={'center'}
+					onActionLeft={goToBack}
+					showCall={false}
+					btnStyle={{ paddingLeft: 0, paddingRight: 5 }}
+					style={{ marginTop: Platform.OS === 'ios' ? 0 : 10 }}
+					titleWrapStyle={{ paddingHorizontal: 0, width: '100%' }}
+					titleStyle={{ marginRight: 0, marginLeft: 0, paddingRight: 5 }}
+				/>
+			</View>
+			<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+				<AddressFormContainer style={{ overflow: 'scroll' }}>
+					<View>
+						<FormInput>
+							<AutocompleteInput>
+								<Controller
+									control={control}
+									name="address"
+									defaultValue={
+										address?.address ||
+										formState.changes?.address ||
+										addressState.address.address ||
+										''
+									}
+									rules={{
+										required:
+											isRequiredField && isRequiredField('address')
+												? t(
+													`VALIDATION_ERROR_ADDRESS_REQUIRED`,
+													`The field Address is required`,
+												)
+												: null,
+									}}
+									render={() => (
+										<GooglePlacesAutocomplete
+											placeholder={t('ADD_ADDRESS', 'Add a address')}
+											onPress={(data, details: any) => {
+												handleChangeAddress(data, details);
+												setAutoCompleteAddress(true);
+											}}
+											query={{
+												key: googleMapsApiKey,
+												components: countryCode && countryCode !== '*' ? `country:${countryCode}` : ''
+											}}
+											fetchDetails
+											ref={googleInput}
+											textInputProps={{
+												onChangeText: (text) => {
+													if (!isFirstTime) {
+														handleChangeInput({
+															target: { name: 'address', value: text },
+														});
+														setValue('address', text);
+														setAutoCompleteAddress(true)
+													}
+													setIsFirstTime(false);
+													setAddressEditing(text.length == 0);
+												},
+												onSubmitEditing: () =>
+													internalNumberRef?.current?.focus?.(),
+												autoCorrect: false,
+												blurOnSubmit: false,
+												returnKeyType: 'next',
+												onFocus: () => setAutoCompleteInputFocused(true),
+												onBlur: () => setAutoCompleteInputFocused(false)
+											}}
+											onFail={(error) =>
+												setAlertState({
+													open: true,
+													content: getTraduction(error, t),
+												})
+											}
+											styles={{
+												listView: {
+													position: 'relative',
+													borderBottomStartRadius: 15,
+													borderBottomEndRadius: 15,
+													elevation: 2,
+													borderWidth: 1,
+													borderColor: '#ddd',
+													bottom: 20,
+												},
+												container: {
+													zIndex: 100,
+												},
+												textInput: {
+													borderWidth: 1,
+													borderRadius: 7.6,
+													borderColor: autoCompleteInputFocused ? theme.colors.primary : theme.colors.border,
+													flexGrow: 1,
+													fontSize: 15,
+													paddingLeft: 16,
+													paddingRight: 32,
+													minHeight: 50,
+													fontFamily: 'Poppins-Regular',
+													marginBottom: 24
+												},
+											}}
+										/>
+									)}
+								/>
+
+								{(
+									((!isEditing && !isGuestUser) ||
+										(isEditing && !isGuestUser)) ||
+									(isGuestUser)) &&
+									(
+										<View style={styles.pinIcon}>
+											<GPSButton
+												apiKey={googleMapsApiKey}
+												handleGPS={(data: any, detail: any) => {
+													handleChangeAddress(data, detail);
+													setValue('address', data.address);
+													if (googleInput?.current) {
+														googleInput?.current?.setAddressText(data.address);
+													}
+												}}
+												IconButton={<OIcon src={theme.images.general.pin} width={16} />}
+												isIntGeoCoder
+											/>
+										</View>
+									)}
+							</AutocompleteInput>
+
+							{!isHideMap && (locationChange || formState.changes?.location) && (
+								<View
+									style={{
+										height: 189,
+										borderRadius: 7.6,
+										overflow: 'hidden',
+										marginBottom: 24,
+									}}>
+									<GoogleMapContainer>
+										<GoogleMap
+											location={locationChange || formState.changes?.location}
+											handleChangeAddressMap={handleChangeAddress}
+											maxLimitLocation={maxLimitLocation}
+											saveLocation={saveMapLocation}
+											setSaveLocation={setSaveMapLocation}
+											handleToggleMap={handleToggleMap}
+											isIntGeoCoder
+											setAutoCompleteAddress={setAutoCompleteAddress}
+											autoCompleteAddress={autoCompleteAddress}
+										/>
+									</GoogleMapContainer>
+								</View>
+							)}
+
+							<View style={{ flexDirection: 'row', flexBasis: '50%' }}>
+								{showField?.('internal_number') && ((isRequiredField && isRequiredField('internal_number')) || showFieldWithTheme('internal_number')) && (
+									<Controller
+										control={control}
+										name="internal_number"
+										rules={{
+											required:
+												isRequiredField && isRequiredField('internal_number')
+													? t(
+														`VALIDATION_ERROR_INTERNAL_NUMBER_REQUIRED`,
+														`The field internal number is required`,
+													)
+													: null,
+										}}
+										defaultValue={
+											address?.internal_number ||
+											formState.changes?.internal_number ||
+											addressState?.address?.internal_number ||
+											''
+										}
+										render={() => (
+											<OInput
+												name="internal_number"
+												placeholder={t('INTERNAL_NUMBER', 'Internal number')}
+												onChange={(data: any) => {
+													handleChangeInput(data);
+													setValue('internal_number', isEmptyField('internal_number', data?.target?.value) ? null : data);
+												}}
+												value={
+													address?.internal_number ||
+													formState.changes?.internal_number ||
+													addressState?.address?.internal_number ||
+													''
+												}
+												isFocusHighlight
+												style={{
+													...styles.inputsStyle,
+													marginRight: showField?.('internal_number') && showField?.('zipcode') ? 24 : 0
+												}}
+												forwardRef={internalNumberRef}
+												returnKeyType="next"
+												onSubmitEditing={() => zipCodeRef?.current?.focus?.()}
+												blurOnSubmit={false}
+											/>
+										)}
+									/>
+								)}
+
+								{showField?.('zipcode') && ((isRequiredField && isRequiredField('zipcode')) || showFieldWithTheme('zipcode')) && (
+									<Controller
+										control={control}
+										name="zipcode"
+										rules={{
+											required:
+												isRequiredField && isRequiredField('zipcode')
+													? t(
+														`VALIDATION_ERROR_ZIP_CODE_REQUIRED`,
+														`The field Zip Code is required`,
+													)
+													: null,
+										}}
+										defaultValue={
+											address?.zipcode ||
+											formState.changes?.zipcode ||
+											addressState.address.zipcode ||
+											''
+										}
+										render={() => (
+											<OInput
+												name="zipcode"
+												placeholder={t('ZIP_CODE', 'Zip code')}
+												onChange={(data: any) => {
+													handleChangeInput(data);
+													setValue('zipcode', isEmptyField('zipcode', data?.target?.value) ? null : data);
+												}}
+												value={
+													address?.zipcode ||
+													formState.changes?.zipcode ||
+													addressState.address.zipcode ||
+													''
+												}
+												isFocusHighlight
+												style={styles.inputsStyle}
+												forwardRef={zipCodeRef}
+												returnKeyType="next"
+												onSubmitEditing={() => addressNotesRef?.current?.focus?.()}
+												blurOnSubmit={false}
+											/>
+										)}
+									/>
+								)}
+							</View>
+
+							{showField?.('address_notes') && ((isRequiredField && isRequiredField('address_notes')) || showFieldWithTheme('address_notes')) && (
+								<Controller
+									control={control}
+									name="address_notes"
+									rules={{
+										required:
+											isRequiredField && isRequiredField('address_notes')
+												? t(
+													`VALIDATION_ERROR_ADDRESS_NOTES_REQUIRED`,
+													`The field address notes is required`,
+												)
+												: null,
+									}}
+									defaultValue={
+										address?.address_notes ||
+										formState.changes?.address_notes ||
+										addressState.address.address_notes ||
+										''
+									}
+									render={() => (
+										<OInput
+											name="address_notes"
+											placeholder={t('ADDRESS_NOTES', 'Address notes')}
+											onChange={(text: any) => {
+												handleChangeInput(text);
+												setValue('address_notes', text);
+											}}
+											value={
+												address?.address_notes ||
+												formState.changes?.address_notes ||
+												addressState.address.address_notes ||
+												''
+											}
+											multiline
+											isFocusHighlight
+											style={styles.textAreaStyles}
+											returnKeyType="done"
+											forwardRef={addressNotesRef}
+											blurOnSubmit
+										/>
+									)}
+								/>
+							)}
+						</FormInput>
+						{!isHideIcons && (
+							<IconsContainer>
+								{tagsName.map((tag) => (
+									<TouchableOpacity
+										key={tag.value}
+										onPress={() => handleAddressTag(tag.value)}>
+										<View
+											style={{
+												...styles.iconContainer,
+											}}>
+											<OIcon
+												src={tag.icon}
+												width={24}
+												color={
+													addressTag === tag.value ?
+														theme.colors.primary : theme.colors.disabled
+												}
+											/>
+										</View>
+									</TouchableOpacity>
+								))}
+							</IconsContainer>
+						)}
+					</View>
+
+					<View>
+						{Object.keys(formState?.changes).length > 0 ? (
+							<OButton
+								text={
+									!formState.loading
+										? isEditing ||
+											(!auth && orderState.options?.address?.address)
+											? t('UPDATE', 'Update')
+											: t('CONTINUE', 'Continue')
+										: t('LOADING', 'Loading')
+								}
+								onClick={handleSubmit(onSubmit)}
+								isDisabled={formState.loading}
+								style={{ borderRadius: 7.6, shadowOpacity: 0 }}
+								showNextIcon
+							/>
+						) : (
+							<OButton
+								text={t('CANCEL', 'Cancel')}
+								bgColor={theme.colors.secundary}
+								borderColor={theme.colors.secundary}
+								textStyle={{ color: theme.colors.textNormal }}
+								style={{ borderRadius: 7.6, borderWidth: 1, shadowOpacity: 0 }}
+								onClick={() => navigation?.canGoBack() && navigation.goBack()}
+							/>
+						)}
+					</View>
+					<OModal
+						open={toggleMap}
+						onClose={() => handleToggleMap()}
+						entireModal
+						customClose>
+						{(locationChange || formState.changes?.location) && (
+							<GoogleMapContainer style={{ minHeight: HEIGHT_SCREEN - 50 }}>
+								<GoogleMap
+									location={locationChange || formState.changes?.location}
+									handleChangeAddressMap={handleChangeAddress}
+									maxLimitLocation={maxLimitLocation}
+									saveLocation={saveMapLocation}
+									setSaveLocation={setSaveMapLocation}
+									isIntGeoCoder
+								/>
+							</GoogleMapContainer>
+						)}
+						<OButton
+							text={t('SAVE', 'Save')}
+							imgRightSrc={null}
+							style={{ marginHorizontal: 30, marginBottom: 10 }}
+							onClick={() => {
+								setSaveMapLocation(true)
+								handleToggleMap && handleToggleMap()
+							}}
+						/>
+					</OModal>
+					<Spinner visible={saveMapLocation} />
+				</AddressFormContainer>
+			</TouchableWithoutFeedback>
+		</ScrollView>
+	);
+};
+
+export const AddressForm = (props: AddressFormParams) => {
+	const addressFormProps = {
+		...props,
+		UIComponent: AddressFormUI,
+	};
+	return <AddressFormController {...addressFormProps} />;
+};