ordering-ui-react-native 0.24.17 → 0.24.18

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

@@ -1,669 +1,669 @@
-import React, { useEffect, useState, useRef } from 'react'
-import { StyleSheet, View, TouchableOpacity, Keyboard, TouchableWithoutFeedback, TextStyle, Platform } from 'react-native'
-import { AddressForm as AddressFormController, useLanguage, useConfig, useSession, useOrder, ToastType, useToast } from 'ordering-components/native'
-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 { _retrieveStoreData } from '../../providers/StoreUtil';
-import { OInput, OButton, OText, 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,
-	InputWrapper
-} from './styles'
-
-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,
-		isRequiredField,
-		isFromProductsList,
-		hasAddressDefault,
-		afterSignup,
-		isFromCheckout
-	} = props
-
-	const theme = useTheme();
-
-	const styles = StyleSheet.create({
-		iconContainer: {
-			justifyContent: 'center',
-			alignItems: 'center',
-			borderRadius: 10,
-			paddingHorizontal: 18,
-			paddingVertical: 5,
-		},
-		icons: {
-			borderRadius: 20,
-			color: theme.colors.white
-		},
-		inputsStyle: {
-			borderWidth: 0,
-			borderRadius: 7.6,
-			height: 40,
-			minHeight: 40,
-		},
-		textAreaStyles: {
-			borderColor: theme.colors.clear,
-			backgroundColor: theme.colors.backgroundGray,
-			borderRadius: 7.6,
-			marginBottom: 20,
-			borderWidth: 0,
-			height: 92,
-			maxHeight: 92,
-			minHeight: 92,
-			textAlignVertical: 'top',
-			alignItems: 'flex-start'
-		},
-		searchIcon: {
-			position: 'absolute',
-			top: 13,
-			zIndex: 1000
-		}
-	})
-
-	const [, t] = useLanguage()
-	const [{ auth }] = useSession()
-	const [, { showToast }] = useToast()
-	const [configState] = useConfig()
-	const [orderState] = useOrder()
-	const { handleSubmit, errors, control, setValue } = useForm()
-
-	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 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 isGuestUser = props.isGuestUser || props.isGuestFromStore;
-
-	const continueAsGuest = () => navigation.navigate('BusinessList')
-	const goToBack = () => navigation?.canGoBack() && navigation.goBack()
-
-	const tagsName = [
-		{ icon: theme.images.general.tag_home, value: 'home' },
-		{ icon: theme.images.general.tag_office, value: 'office' },
-		{ icon: theme.images.general.tag_favorite, value: 'favorite' },
-		{ icon: theme.images.general.tag_other, value: 'other' }
-	]
-
-	const getAddressFormatted = (address: any) => {
-		const data: any = { address: null, error: null }
-		Geocoder.init(googleMapsApiKey);
-		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()
-						}
-						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) => {
-		if (!data) {
-			updateChanges({ location: details?.geometry?.location })
-			return
-		}
-		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 },
-			zip_code: data?.zip_code || null
-		}
-		updateChanges(addressSelected)
-	}
-
-	const handleAddressTag = (tag: string) => {
-		setAddressTag(tag)
-		handleChangeInput({
-			target: {
-				name: 'tag',
-				value: tag
-			}
-		})
-	}
-
-	const handleToggleMap = () => {
-		setToggleMap(!toggleMap)
-	}
-
-	useEffect(() => {
-		if (orderState.loading && !addressesList && orderState.options.address && auth && !afterSignup && !isFromCheckout) {
-			!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: Math.trunc(locationChange.lat), lng: Math.trunc(locationChange.lng) }
-				const newLocation = { lat: Math.trunc(formState?.changes?.location?.lat), lng: Math.trunc(formState?.changes?.location?.lng) }
-				if (prevLocation.lat !== newLocation.lat && prevLocation.lng !== newLocation.lng) {
-					setLocationChange(formState?.changes?.location)
-				}
-			}
-		}
-	}, [formState])
-
-	useEffect(() => {
-		if (formState?.result?.result && !formState?.loading) {
-			if (formState.result?.error) {
-				showToast(ToastType.Error, formState.result.result);
-			} 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(() => {
-		const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {
-			setIsKeyboardShow(true)
-		})
-		const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
-			setIsKeyboardShow(false)
-		})
-		return () => {
-			keyboardDidShowListener.remove()
-			keyboardDidHideListener.remove()
-		}
-	}, [])
-
-	return (
-		<>
-			<NavBar
-				title={t('ADD_ADDRESS', 'Add address')}
-				titleAlign={'center'}
-				onActionLeft={goToBack}
-			/>
-			<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-				<>
-					<AddressFormContainer style={{ height: 550, overflow: 'scroll' }}>
-						<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)
-											}}
-											query={{ key: googleMapsApiKey }}
-											fetchDetails
-											ref={googleInput}
-											textInputProps={{
-												onChangeText: (text) => {
-													if (!isFirstTime) {
-														handleChangeInput({ target: { name: 'address', value: text } })
-														setValue('address', text)
-													}
-													setIsFirstTime(false)
-												},
-												onSubmitEditing: () => internalNumberRef?.current?.focus?.(),
-												autoCorrect: false,
-												blurOnSubmit: false,
-												returnKeyType: 'next'
-											}}
-											onFail={(error) => setAlertState({ open: true, content: getTraduction(error) })}
-											styles={{
-												listView: {
-													position: 'relative',
-													elevation: 2,
-													marginBottom: 10
-												},
-												container: {
-													zIndex: 100
-												},
-												textInput: {
-													borderWidth: 0,
-													flexGrow: 1,
-													fontSize: 14,
-													lineHeight: 21,
-													fontWeight: Platform.OS == 'ios' ? '600' : 'bold',
-													paddingStart: 30,
-													paddingEnd: 20,
-													minHeight: 50,
-													fontFamily: 'Poppins-Regular',
-													marginBottom: !isKeyboardShow && (addressState?.address?.location || formState?.changes?.location) ? 10 : 20
-												}
-											}}
-										/>
-									)}
-								/>
-								<View style={styles.searchIcon}>
-									<OIcon src={theme.images.general.search} width={16} />
-								</View>
-							</AutocompleteInput>
-
-							{(addressState?.address?.location || formState?.changes?.location) && (
-								<GoogleMapContainer>
-									<GoogleMap
-										location={!auth
-											? (addressState?.address?.location || formState.changes?.location)
-											: (formState.changes?.location || locationChange)
-										}
-										handleChangeAddressMap={handleChangeAddress}
-										maxLimitLocation={maxLimitLocation}
-										saveLocation={saveMapLocation}
-										setSaveLocation={setSaveMapLocation}
-										handleToggleMap={handleToggleMap}
-									/>
-								</GoogleMapContainer>
-							)}
-
-							{!isKeyboardShow && (addressState?.address?.location || formState?.changes?.location) && (
-								<OText>{address?.address || formState.changes?.address || addressState.address.address || ''}</OText>
-							)}
-
-							<InputWrapper style={{ marginTop: 0 }}>
-								<OText style={{ ...theme.labels.middle, flexBasis: '35%' }}>{t('APT_SUITE', 'Apt./Suite')}</OText>
-								<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={(text: string) => {
-												handleChangeInput(text)
-												setValue('internal_number', text)
-											}}
-											value={address?.internal_number || formState.changes?.internal_number || addressState?.address?.internal_number || ''}
-											style={styles.inputsStyle}
-											forwardRef={internalNumberRef}
-											returnKeyType='next'
-											onSubmitEditing={() => zipCodeRef?.current?.focus?.()}
-											blurOnSubmit={false}
-											inputStyle={{ fontSize: 12 }}
-										/>
-									)}
-								/>
-							</InputWrapper>
-							<InputWrapper>
-								<OText style={{ ...theme.labels.middle, flexBasis: '35%' }}>{t('ZIPCODE', 'Zipcode')}</OText>
-								<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={(text: string) => {
-												handleChangeInput(text)
-												setValue('zipcode', text)
-											}}
-											value={address?.zipcode || formState.changes?.zipcode || addressState.address.zipcode || ''}
-											style={styles.inputsStyle}
-											forwardRef={zipCodeRef}
-											returnKeyType='next'
-											onSubmitEditing={() => addressNotesRef?.current?.focus?.()}
-											blurOnSubmit={false}
-											inputStyle={{ fontSize: 12 }}
-										/>
-									)}
-								/>
-							</InputWrapper>
-							<View style={{ marginTop: 17, marginBottom: 20 }}>
-								<OText style={{ ...theme.labels.middle, marginBottom: 8 } as TextStyle}>{t('ADDRESS_NOTES', 'Address notes')}</OText>
-								<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
-											style={styles.textAreaStyles}
-											returnKeyType='done'
-											forwardRef={addressNotesRef}
-											blurOnSubmit
-											inputStyle={{ fontSize: 12 }}
-										/>
-									)}
-								/>
-							</View>
-
-						</FormInput>
-						<View>
-							{!isKeyboardShow && (
-								<IconsContainer>
-									{tagsName.map(tag => (
-										<TouchableOpacity
-											key={tag.value}
-											onPress={() => handleAddressTag(tag.value)}
-										>
-											<View
-												style={{
-													paddingHorizontal: 7,
-													paddingVertical: 4,
-													alignItems: 'center'
-												}}
-											>
-												<OIcon src={tag.icon} width={24} color={addressTag === tag.value ? theme.colors.primary : theme.colors.textSecondary} />
-												<OText color={addressTag === tag.value ? theme.colors.primary : theme.colors.textSecondary} style={{ ...theme.labels.small, textTransform: 'capitalize', marginTop: 3 }}>{tag.value}</OText>
-											</View>
-										</TouchableOpacity>
-									))}
-								</IconsContainer>
-							)}
-						</View>
-
-						{/* <OModal open={toggleMap} onClose={() => handleToggleMap()} entireModal customClose >
-						{(!auth
-							? (addressState?.address?.location || formState.changes?.location)
-							: (formState.changes?.location || locationChange)
-						) && (
-								<GoogleMapContainer>
-									<GoogleMap
-										location={!auth
-											? (addressState?.address?.location || formState.changes?.location)
-											: (formState.changes?.location || locationChange)
-										}
-										handleChangeAddressMap={handleChangeAddress}
-										maxLimitLocation={maxLimitLocation}
-										saveLocation={saveMapLocation}
-										setSaveLocation={setSaveMapLocation}
-										handleToggleMap={handleToggleMap}
-									/>
-								</GoogleMapContainer>
-							)}
-						<OButton
-							text={t('SAVE', 'Save')}
-							textStyle={{ color: theme.colors.white }}
-							imgRightSrc={null}
-							style={{ marginHorizontal: 30, marginBottom: 10 }}
-							onClick={() => setSaveMapLocation(true)}
-						/>
-					</OModal> */}
-						<Spinner visible={saveMapLocation} />
-					</AddressFormContainer>
-					<View style={{ paddingHorizontal: 40, marginBottom: 14 }}>
-						{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')
-								}
-								imgRightSrc=''
-								onClick={handleSubmit(onSubmit)}
-								textStyle={{ ...theme.labels.middle, color: theme.colors.white } as TextStyle}
-								isDisabled={formState.loading}
-								style={{ height: 40, shadowOpacity: 0 }}
-							/>
-						) : (
-							<OButton
-								text={t('CANCEL', 'Cancel')}
-								borderColor={theme.colors.backgroundGray300}
-								bgColor={theme.colors.backgroundGray300}
-								style={{ height: 40, shadowOpacity: 0, borderWidth: 1 }}
-								imgRightSrc={null}
-								textStyle={theme.labels.middle as TextStyle}
-								onClick={() => navigation?.canGoBack() && navigation.goBack()}
-							/>
-						)}
-					</View>
-				</>
-			</TouchableWithoutFeedback>
-		</>
-	)
-}
-
-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, TextStyle, Platform } from 'react-native'
+import { AddressForm as AddressFormController, useLanguage, useConfig, useSession, useOrder, ToastType, useToast } from 'ordering-components/native'
+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 { _retrieveStoreData } from '../../providers/StoreUtil';
+import { OInput, OButton, OText, 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,
+	InputWrapper
+} from './styles'
+
+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,
+		isRequiredField,
+		isFromProductsList,
+		hasAddressDefault,
+		afterSignup,
+		isFromCheckout
+	} = props
+
+	const theme = useTheme();
+
+	const styles = StyleSheet.create({
+		iconContainer: {
+			justifyContent: 'center',
+			alignItems: 'center',
+			borderRadius: 10,
+			paddingHorizontal: 18,
+			paddingVertical: 5,
+		},
+		icons: {
+			borderRadius: 20,
+			color: theme.colors.white
+		},
+		inputsStyle: {
+			borderWidth: 0,
+			borderRadius: 7.6,
+			height: 40,
+			minHeight: 40,
+		},
+		textAreaStyles: {
+			borderColor: theme.colors.clear,
+			backgroundColor: theme.colors.backgroundGray,
+			borderRadius: 7.6,
+			marginBottom: 20,
+			borderWidth: 0,
+			height: 92,
+			maxHeight: 92,
+			minHeight: 92,
+			textAlignVertical: 'top',
+			alignItems: 'flex-start'
+		},
+		searchIcon: {
+			position: 'absolute',
+			top: 13,
+			zIndex: 1000
+		}
+	})
+
+	const [, t] = useLanguage()
+	const [{ auth }] = useSession()
+	const [, { showToast }] = useToast()
+	const [configState] = useConfig()
+	const [orderState] = useOrder()
+	const { handleSubmit, errors, control, setValue } = useForm()
+
+	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 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 isGuestUser = props.isGuestUser || props.isGuestFromStore;
+
+	const continueAsGuest = () => navigation.navigate('BusinessList')
+	const goToBack = () => navigation?.canGoBack() && navigation.goBack()
+
+	const tagsName = [
+		{ icon: theme.images.general.tag_home, value: 'home' },
+		{ icon: theme.images.general.tag_office, value: 'office' },
+		{ icon: theme.images.general.tag_favorite, value: 'favorite' },
+		{ icon: theme.images.general.tag_other, value: 'other' }
+	]
+
+	const getAddressFormatted = (address: any) => {
+		const data: any = { address: null, error: null }
+		Geocoder.init(googleMapsApiKey);
+		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()
+						}
+						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) => {
+		if (!data) {
+			updateChanges({ location: details?.geometry?.location })
+			return
+		}
+		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 },
+			zip_code: data?.zip_code || null
+		}
+		updateChanges(addressSelected)
+	}
+
+	const handleAddressTag = (tag: string) => {
+		setAddressTag(tag)
+		handleChangeInput({
+			target: {
+				name: 'tag',
+				value: tag
+			}
+		})
+	}
+
+	const handleToggleMap = () => {
+		setToggleMap(!toggleMap)
+	}
+
+	useEffect(() => {
+		if (orderState.loading && !addressesList && orderState.options.address && auth && !afterSignup && !isFromCheckout) {
+			!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: Math.trunc(locationChange.lat), lng: Math.trunc(locationChange.lng) }
+				const newLocation = { lat: Math.trunc(formState?.changes?.location?.lat), lng: Math.trunc(formState?.changes?.location?.lng) }
+				if (prevLocation.lat !== newLocation.lat && prevLocation.lng !== newLocation.lng) {
+					setLocationChange(formState?.changes?.location)
+				}
+			}
+		}
+	}, [formState])
+
+	useEffect(() => {
+		if (formState?.result?.result && !formState?.loading) {
+			if (formState.result?.error) {
+				showToast(ToastType.Error, formState.result.result);
+			} 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(() => {
+		const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {
+			setIsKeyboardShow(true)
+		})
+		const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
+			setIsKeyboardShow(false)
+		})
+		return () => {
+			keyboardDidShowListener.remove()
+			keyboardDidHideListener.remove()
+		}
+	}, [])
+
+	return (
+		<>
+			<NavBar
+				title={t('ADD_ADDRESS', 'Add address')}
+				titleAlign={'center'}
+				onActionLeft={goToBack}
+			/>
+			<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+				<>
+					<AddressFormContainer style={{ height: 550, overflow: 'scroll' }}>
+						<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)
+											}}
+											query={{ key: googleMapsApiKey }}
+											fetchDetails
+											ref={googleInput}
+											textInputProps={{
+												onChangeText: (text) => {
+													if (!isFirstTime) {
+														handleChangeInput({ target: { name: 'address', value: text } })
+														setValue('address', text)
+													}
+													setIsFirstTime(false)
+												},
+												onSubmitEditing: () => internalNumberRef?.current?.focus?.(),
+												autoCorrect: false,
+												blurOnSubmit: false,
+												returnKeyType: 'next'
+											}}
+											onFail={(error) => setAlertState({ open: true, content: getTraduction(error) })}
+											styles={{
+												listView: {
+													position: 'relative',
+													elevation: 2,
+													marginBottom: 10
+												},
+												container: {
+													zIndex: 100
+												},
+												textInput: {
+													borderWidth: 0,
+													flexGrow: 1,
+													fontSize: 14,
+													lineHeight: 21,
+													fontWeight: Platform.OS == 'ios' ? '600' : 'bold',
+													paddingStart: 30,
+													paddingEnd: 20,
+													minHeight: 50,
+													fontFamily: 'Poppins-Regular',
+													marginBottom: !isKeyboardShow && (addressState?.address?.location || formState?.changes?.location) ? 10 : 20
+												}
+											}}
+										/>
+									)}
+								/>
+								<View style={styles.searchIcon}>
+									<OIcon src={theme.images.general.search} width={16} />
+								</View>
+							</AutocompleteInput>
+
+							{(addressState?.address?.location || formState?.changes?.location) && (
+								<GoogleMapContainer>
+									<GoogleMap
+										location={!auth
+											? (addressState?.address?.location || formState.changes?.location)
+											: (formState.changes?.location || locationChange)
+										}
+										handleChangeAddressMap={handleChangeAddress}
+										maxLimitLocation={maxLimitLocation}
+										saveLocation={saveMapLocation}
+										setSaveLocation={setSaveMapLocation}
+										handleToggleMap={handleToggleMap}
+									/>
+								</GoogleMapContainer>
+							)}
+
+							{!isKeyboardShow && (addressState?.address?.location || formState?.changes?.location) && (
+								<OText>{address?.address || formState.changes?.address || addressState.address.address || ''}</OText>
+							)}
+
+							<InputWrapper style={{ marginTop: 0 }}>
+								<OText style={{ ...theme.labels.middle, flexBasis: '35%' }}>{t('APT_SUITE', 'Apt./Suite')}</OText>
+								<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={(text: string) => {
+												handleChangeInput(text)
+												setValue('internal_number', text)
+											}}
+											value={address?.internal_number || formState.changes?.internal_number || addressState?.address?.internal_number || ''}
+											style={styles.inputsStyle}
+											forwardRef={internalNumberRef}
+											returnKeyType='next'
+											onSubmitEditing={() => zipCodeRef?.current?.focus?.()}
+											blurOnSubmit={false}
+											inputStyle={{ fontSize: 12 }}
+										/>
+									)}
+								/>
+							</InputWrapper>
+							<InputWrapper>
+								<OText style={{ ...theme.labels.middle, flexBasis: '35%' }}>{t('ZIPCODE', 'Zipcode')}</OText>
+								<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={(text: string) => {
+												handleChangeInput(text)
+												setValue('zipcode', text)
+											}}
+											value={address?.zipcode || formState.changes?.zipcode || addressState.address.zipcode || ''}
+											style={styles.inputsStyle}
+											forwardRef={zipCodeRef}
+											returnKeyType='next'
+											onSubmitEditing={() => addressNotesRef?.current?.focus?.()}
+											blurOnSubmit={false}
+											inputStyle={{ fontSize: 12 }}
+										/>
+									)}
+								/>
+							</InputWrapper>
+							<View style={{ marginTop: 17, marginBottom: 20 }}>
+								<OText style={{ ...theme.labels.middle, marginBottom: 8 } as TextStyle}>{t('ADDRESS_NOTES', 'Address notes')}</OText>
+								<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
+											style={styles.textAreaStyles}
+											returnKeyType='done'
+											forwardRef={addressNotesRef}
+											blurOnSubmit
+											inputStyle={{ fontSize: 12 }}
+										/>
+									)}
+								/>
+							</View>
+
+						</FormInput>
+						<View>
+							{!isKeyboardShow && (
+								<IconsContainer>
+									{tagsName.map(tag => (
+										<TouchableOpacity
+											key={tag.value}
+											onPress={() => handleAddressTag(tag.value)}
+										>
+											<View
+												style={{
+													paddingHorizontal: 7,
+													paddingVertical: 4,
+													alignItems: 'center'
+												}}
+											>
+												<OIcon src={tag.icon} width={24} color={addressTag === tag.value ? theme.colors.primary : theme.colors.textSecondary} />
+												<OText color={addressTag === tag.value ? theme.colors.primary : theme.colors.textSecondary} style={{ ...theme.labels.small, textTransform: 'capitalize', marginTop: 3 }}>{tag.value}</OText>
+											</View>
+										</TouchableOpacity>
+									))}
+								</IconsContainer>
+							)}
+						</View>
+
+						{/* <OModal open={toggleMap} onClose={() => handleToggleMap()} entireModal customClose >
+						{(!auth
+							? (addressState?.address?.location || formState.changes?.location)
+							: (formState.changes?.location || locationChange)
+						) && (
+								<GoogleMapContainer>
+									<GoogleMap
+										location={!auth
+											? (addressState?.address?.location || formState.changes?.location)
+											: (formState.changes?.location || locationChange)
+										}
+										handleChangeAddressMap={handleChangeAddress}
+										maxLimitLocation={maxLimitLocation}
+										saveLocation={saveMapLocation}
+										setSaveLocation={setSaveMapLocation}
+										handleToggleMap={handleToggleMap}
+									/>
+								</GoogleMapContainer>
+							)}
+						<OButton
+							text={t('SAVE', 'Save')}
+							textStyle={{ color: theme.colors.white }}
+							imgRightSrc={null}
+							style={{ marginHorizontal: 30, marginBottom: 10 }}
+							onClick={() => setSaveMapLocation(true)}
+						/>
+					</OModal> */}
+						<Spinner visible={saveMapLocation} />
+					</AddressFormContainer>
+					<View style={{ paddingHorizontal: 40, marginBottom: 14 }}>
+						{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')
+								}
+								imgRightSrc=''
+								onClick={handleSubmit(onSubmit)}
+								textStyle={{ ...theme.labels.middle, color: theme.colors.white } as TextStyle}
+								isDisabled={formState.loading}
+								style={{ height: 40, shadowOpacity: 0 }}
+							/>
+						) : (
+							<OButton
+								text={t('CANCEL', 'Cancel')}
+								borderColor={theme.colors.backgroundGray300}
+								bgColor={theme.colors.backgroundGray300}
+								style={{ height: 40, shadowOpacity: 0, borderWidth: 1 }}
+								imgRightSrc={null}
+								textStyle={theme.labels.middle as TextStyle}
+								onClick={() => navigation?.canGoBack() && navigation.goBack()}
+							/>
+						)}
+					</View>
+				</>
+			</TouchableWithoutFeedback>
+		</>
+	)
+}
+
+export const AddressForm = (props: AddressFormParams) => {
+	const addressFormProps = {
+		...props,
+		UIComponent: AddressFormUI
+	}
+	return <AddressFormController {...addressFormProps} />
+}