ordering-ui-react-native 0.24.18 → 0.25.1

package/themes/uber-eats/src/components/AddressForm/index.tsx

@@ -1,715 +1,715 @@
-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, ToastType, useToast } from 'ordering-components/native'
-import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
-import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
-import Spinner from 'react-native-loading-spinner-overlay';
-import { useForm, Controller } from 'react-hook-form';
-import Geocoder from 'react-native-geocoding';
-import { useTheme } from 'styled-components/native';
-
-import { _retrieveStoreData } from '../../providers/StoreUtil';
-import { OInput, OButton, OText, OModal } from '../shared'
-import { AddressFormParams } from '../../types'
-import { getTraduction } from '../../utils'
-import { GoogleMap } from '../GoogleMap'
-import NavBar from '../NavBar'
-import Geolocation from '@react-native-community/geolocation';
-
-import {
-	PERMISSIONS,
-	PermissionStatus,
-	request,
-	openSettings,
-  } from 'react-native-permissions';
-
-import {
-  AddressFormContainer,
-  AutocompleteInput,
-  IconsContainer,
-  GoogleMapContainer,
-  FormInput
-} 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 tagsName = [
-  { icon: 'home-outline', value: 'home' },
-  { icon: 'office-building', value: 'office' },
-  { icon: 'heart-outline', value: 'favorite' },
-  { icon: 'plus', value: 'other' }
-]
-
-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: {
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      borderRadius: 10,
-      paddingHorizontal: 18,
-      paddingVertical: 5,
-    },
-    inputsStyle: {
-      borderRadius: 0,
-      backgroundColor: theme.colors.backgroundGray,
-      height: 50,
-      maxHeight: 50,
-      minHeight: 50
-    },
-    inputWrapper: {
-      width: '48%'
-    },
-    inputGroup : {
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      marginBottom: 20,
-      height: 70,
-      maxHeight: 70
-    },
-    textAreaStyles: {
-      borderRadius: 0,
-      backgroundColor: theme.colors.backgroundGray,
-      marginBottom: 20,
-      height: 90,
-      maxHeight: 90,
-      textAlignVertical: 'top',
-      alignItems: 'flex-start'
-    },
-    modalCloseBtn: {
-      position: 'absolute',
-      top: 20,
-      right: 20,
-      color: theme.colors.black
-    }
-  })
-
-  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 [isLoadingLocation, setLoadingLocation] = useState(false)
-  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 requestLocationPermission = async () => {
-		let permissionStatus: PermissionStatus;
-		setLoadingLocation(true)
-		if (Platform.OS === 'ios') {
-		  permissionStatus = await request(PERMISSIONS.IOS.LOCATION_WHEN_IN_USE);
-		} else {
-		  permissionStatus = await request(
-			PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION,
-		  );
-		}
-
-		if (permissionStatus === 'denied') {
-		  openSettings();
-		}
-		getOneTimeLocation();
-	  };
-
-	const getOneTimeLocation = () => {
-		Geolocation.getCurrentPosition( (position) => {
-		  getAddressFormatted({
-							latitude: position.coords.latitude,
-							longitude: position.coords.longitude
-		  })
-		},(error) => {
-			console.log(error.message);
-		},
-		{
-			enableHighAccuracy: false,
-			timeout: 30000,
-			maximumAge: 1000
-		});
-	};
-
-  const getAddressFormatted = (address: any) => {
-    const data: any = { address: null, error: null }
-    const isObjet = typeof address === 'object';
-		const filterAddressInfo = [
-			{ tag: 'street_number', isShort: true },
-			{ tag: 'route', isShort: true },
-			{ tag: 'locality', isShort: true },
-			{ tag: 'administrative_area_level_1', isShort: false },
-			{ tag: 'country', isShort: false },
-		]
-   	let addressValue: any = [];
-    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 (typeof address === 'object') {
-							for (const filterProps of filterAddressInfo)  {
-							  if(filterProps.tag.includes(addressType)) {
-								addressValue.push(filterProps.isShort ? component.short_name : component.long_name)
-							  }
-							}
-						}
-            if (addressType === 'postal_code') {
-              postalCode = component.short_name
-            }
-          }
-          isObjet ? address = addressValue.join(', ') : address
-          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('ADDRESS_FORM', 'Address Form')}
-        titleAlign={'center'}
-        onActionLeft={goToBack}
-        showCall={false}
-        paddingTop={10}
-      />
-      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-        <AddressFormContainer style={{ height: 600, overflow: 'scroll' }}>
-          <View>
-            <FormInput>
-              {(!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>
-              )}
-              <AutocompleteInput>
-                <OText size={14} mBottom={6}>
-                  {t('MOBILE_FRONT_VISUALS_ADDRESS', 'Address')}
-                </OText>
-                <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, t) })}
-                      styles={{
-                        listView: {
-                          position: 'relative',
-                          borderBottomStartRadius: 15,
-                          borderBottomEndRadius: 15,
-                          elevation: 2,
-                          borderWidth: 1,
-                          borderColor: "#ddd",
-                          bottom: 20
-                        },
-                        container: {
-                          zIndex: 100
-                        },
-                        textInput: {
-                          flexGrow: 1,
-                          fontSize: 15,
-                          borderRadius: 0,
-                          backgroundColor: theme.colors.backgroundGray,
-                          paddingHorizontal: 20,
-                          minHeight: 50,
-                          fontFamily: 'Poppins-Regular',
-                          marginBottom: !isKeyboardShow && (addressState?.address?.location || formState?.changes?.location) ? 10 : 20
-                        }
-                      }}
-                    />
-                  )}
-                />
-              </AutocompleteInput>
-              {!isKeyboardShow && (
-								<TouchableOpacity onPress={requestLocationPermission} style={{ marginBottom: 10 }}>
-								<OText
-									color={theme.colors.primary}
-									style={{ textAlign: 'center' }}
-								>
-									{isLoadingLocation ? t('MOBILE_GETTING_CURRENT_LOCATION', 'Getting current location') : t('USE_MY_CURRENT_LOCATION', 'Use my current location')}
-								</OText>
-								</TouchableOpacity>
-							)}
-              <View style={styles.inputGroup}>
-                <View style={styles.inputWrapper}>
-                  <OText size={14} mBottom={6}>
-                    {t('INTERNAL_NUMBER', 'Internal number')}
-                  </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}
-                      />
-                    )}
-                  />
-                </View>
-
-                <View style={styles.inputWrapper}>
-                  <OText size={14} mBottom={6}>
-                    {t('ZIP_CODE', 'Zip code')}
-                  </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}
-                      />
-                    )}
-                  />
-                </View>
-              </View>
-
-              <View>
-                <OText size={14} mBottom={6}>
-                  {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
-                    />
-                  )}
-                />
-              </View>
-            </FormInput>
-            {!isKeyboardShow && (
-              <IconsContainer>
-                {tagsName.map(tag => (
-                  <TouchableOpacity
-                    key={tag.value}
-                    onPress={() => handleAddressTag(tag.value)}
-                  >
-                    <MaterialIcon
-                      name={tag.icon}
-                      size={40}
-                      style={{
-                        color: addressTag === tag.value
-                          ? theme.colors.black
-                          : theme.colors.gray
-                      }}
-                    />
-                  </TouchableOpacity>
-                ))}
-              </IconsContainer>
-            )}
-          </View>
-
-          <View>
-            {Object.keys(formState?.changes).length > 0 ? (
-              <OButton
-                text={
-                  !formState.loading ? (
-                    isEditing || (!auth && orderState.options?.address?.address)
-                      ? t('UPDATE', 'Update')
-                      : t('SAVE', 'Save')
-                  ) : t('LOADING', 'Loading')
-                }
-                imgRightSrc=''
-                onClick={handleSubmit(onSubmit)}
-                textStyle={{ color: theme.colors.white }}
-                style={{ borderRadius: 0 }}
-                isDisabled={formState.loading}
-              />
-            ) : (
-              <OButton
-                text={t('CANCEL', 'Cancel')}
-                style={{ backgroundColor: theme.colors.white, borderRadius: 0 }}
-                onClick={() => navigation?.canGoBack() && navigation.goBack()}
-              />
-            )}
-          </View>
-          <Spinner visible={saveMapLocation} />
-        </AddressFormContainer>
-      </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, 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 MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
+import Spinner from 'react-native-loading-spinner-overlay';
+import { useForm, Controller } from 'react-hook-form';
+import Geocoder from 'react-native-geocoding';
+import { useTheme } from 'styled-components/native';
+
+import { _retrieveStoreData } from '../../providers/StoreUtil';
+import { OInput, OButton, OText, OModal } from '../shared'
+import { AddressFormParams } from '../../types'
+import { getTraduction } from '../../utils'
+import { GoogleMap } from '../GoogleMap'
+import NavBar from '../NavBar'
+import Geolocation from '@react-native-community/geolocation';
+
+import {
+	PERMISSIONS,
+	PermissionStatus,
+	request,
+	openSettings,
+  } from 'react-native-permissions';
+
+import {
+  AddressFormContainer,
+  AutocompleteInput,
+  IconsContainer,
+  GoogleMapContainer,
+  FormInput
+} 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 tagsName = [
+  { icon: 'home-outline', value: 'home' },
+  { icon: 'office-building', value: 'office' },
+  { icon: 'heart-outline', value: 'favorite' },
+  { icon: 'plus', value: 'other' }
+]
+
+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: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderRadius: 10,
+      paddingHorizontal: 18,
+      paddingVertical: 5,
+    },
+    inputsStyle: {
+      borderRadius: 0,
+      backgroundColor: theme.colors.backgroundGray,
+      height: 50,
+      maxHeight: 50,
+      minHeight: 50
+    },
+    inputWrapper: {
+      width: '48%'
+    },
+    inputGroup : {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      marginBottom: 20,
+      height: 70,
+      maxHeight: 70
+    },
+    textAreaStyles: {
+      borderRadius: 0,
+      backgroundColor: theme.colors.backgroundGray,
+      marginBottom: 20,
+      height: 90,
+      maxHeight: 90,
+      textAlignVertical: 'top',
+      alignItems: 'flex-start'
+    },
+    modalCloseBtn: {
+      position: 'absolute',
+      top: 20,
+      right: 20,
+      color: theme.colors.black
+    }
+  })
+
+  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 [isLoadingLocation, setLoadingLocation] = useState(false)
+  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 requestLocationPermission = async () => {
+		let permissionStatus: PermissionStatus;
+		setLoadingLocation(true)
+		if (Platform.OS === 'ios') {
+		  permissionStatus = await request(PERMISSIONS.IOS.LOCATION_WHEN_IN_USE);
+		} else {
+		  permissionStatus = await request(
+			PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION,
+		  );
+		}
+
+		if (permissionStatus === 'denied') {
+		  openSettings();
+		}
+		getOneTimeLocation();
+	  };
+
+	const getOneTimeLocation = () => {
+		Geolocation.getCurrentPosition( (position) => {
+		  getAddressFormatted({
+							latitude: position.coords.latitude,
+							longitude: position.coords.longitude
+		  })
+		},(error) => {
+			console.log(error.message);
+		},
+		{
+			enableHighAccuracy: false,
+			timeout: 30000,
+			maximumAge: 1000
+		});
+	};
+
+  const getAddressFormatted = (address: any) => {
+    const data: any = { address: null, error: null }
+    const isObjet = typeof address === 'object';
+		const filterAddressInfo = [
+			{ tag: 'street_number', isShort: true },
+			{ tag: 'route', isShort: true },
+			{ tag: 'locality', isShort: true },
+			{ tag: 'administrative_area_level_1', isShort: false },
+			{ tag: 'country', isShort: false },
+		]
+   	let addressValue: any = [];
+    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 (typeof address === 'object') {
+							for (const filterProps of filterAddressInfo)  {
+							  if(filterProps.tag.includes(addressType)) {
+								addressValue.push(filterProps.isShort ? component.short_name : component.long_name)
+							  }
+							}
+						}
+            if (addressType === 'postal_code') {
+              postalCode = component.short_name
+            }
+          }
+          isObjet ? address = addressValue.join(', ') : address
+          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('ADDRESS_FORM', 'Address Form')}
+        titleAlign={'center'}
+        onActionLeft={goToBack}
+        showCall={false}
+        paddingTop={10}
+      />
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+        <AddressFormContainer style={{ height: 600, overflow: 'scroll' }}>
+          <View>
+            <FormInput>
+              {(!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>
+              )}
+              <AutocompleteInput>
+                <OText size={14} mBottom={6}>
+                  {t('MOBILE_FRONT_VISUALS_ADDRESS', 'Address')}
+                </OText>
+                <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, t) })}
+                      styles={{
+                        listView: {
+                          position: 'relative',
+                          borderBottomStartRadius: 15,
+                          borderBottomEndRadius: 15,
+                          elevation: 2,
+                          borderWidth: 1,
+                          borderColor: "#ddd",
+                          bottom: 20
+                        },
+                        container: {
+                          zIndex: 100
+                        },
+                        textInput: {
+                          flexGrow: 1,
+                          fontSize: 15,
+                          borderRadius: 0,
+                          backgroundColor: theme.colors.backgroundGray,
+                          paddingHorizontal: 20,
+                          minHeight: 50,
+                          fontFamily: 'Poppins-Regular',
+                          marginBottom: !isKeyboardShow && (addressState?.address?.location || formState?.changes?.location) ? 10 : 20
+                        }
+                      }}
+                    />
+                  )}
+                />
+              </AutocompleteInput>
+              {!isKeyboardShow && (
+								<TouchableOpacity onPress={requestLocationPermission} style={{ marginBottom: 10 }}>
+								<OText
+									color={theme.colors.primary}
+									style={{ textAlign: 'center' }}
+								>
+									{isLoadingLocation ? t('MOBILE_GETTING_CURRENT_LOCATION', 'Getting current location') : t('USE_MY_CURRENT_LOCATION', 'Use my current location')}
+								</OText>
+								</TouchableOpacity>
+							)}
+              <View style={styles.inputGroup}>
+                <View style={styles.inputWrapper}>
+                  <OText size={14} mBottom={6}>
+                    {t('INTERNAL_NUMBER', 'Internal number')}
+                  </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}
+                      />
+                    )}
+                  />
+                </View>
+
+                <View style={styles.inputWrapper}>
+                  <OText size={14} mBottom={6}>
+                    {t('ZIP_CODE', 'Zip code')}
+                  </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}
+                      />
+                    )}
+                  />
+                </View>
+              </View>
+
+              <View>
+                <OText size={14} mBottom={6}>
+                  {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
+                    />
+                  )}
+                />
+              </View>
+            </FormInput>
+            {!isKeyboardShow && (
+              <IconsContainer>
+                {tagsName.map(tag => (
+                  <TouchableOpacity
+                    key={tag.value}
+                    onPress={() => handleAddressTag(tag.value)}
+                  >
+                    <MaterialIcon
+                      name={tag.icon}
+                      size={40}
+                      style={{
+                        color: addressTag === tag.value
+                          ? theme.colors.black
+                          : theme.colors.gray
+                      }}
+                    />
+                  </TouchableOpacity>
+                ))}
+              </IconsContainer>
+            )}
+          </View>
+
+          <View>
+            {Object.keys(formState?.changes).length > 0 ? (
+              <OButton
+                text={
+                  !formState.loading ? (
+                    isEditing || (!auth && orderState.options?.address?.address)
+                      ? t('UPDATE', 'Update')
+                      : t('SAVE', 'Save')
+                  ) : t('LOADING', 'Loading')
+                }
+                imgRightSrc=''
+                onClick={handleSubmit(onSubmit)}
+                textStyle={{ color: theme.colors.white }}
+                style={{ borderRadius: 0 }}
+                isDisabled={formState.loading}
+              />
+            ) : (
+              <OButton
+                text={t('CANCEL', 'Cancel')}
+                style={{ backgroundColor: theme.colors.white, borderRadius: 0 }}
+                onClick={() => navigation?.canGoBack() && navigation.goBack()}
+              />
+            )}
+          </View>
+          <Spinner visible={saveMapLocation} />
+        </AddressFormContainer>
+      </TouchableWithoutFeedback>
+    </>
+  )
+}
+
+export const AddressForm = (props: AddressFormParams) => {
+  const addressFormProps = {
+    ...props,
+    UIComponent: AddressFormUI
+  }
+  return <AddressFormController {...addressFormProps} />
+}