ordering-ui-react-native 0.17.0 → 0.17.1-release

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

@@ -16,6 +16,8 @@ import {
 	useToast,
 	ToastType
 } from 'ordering-components/native';
+import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrientation'
+
 import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
 import Spinner from 'react-native-loading-spinner-overlay';
 import { useForm, Controller } from 'react-hook-form';
@@ -38,6 +40,8 @@ import {
 import { GPSButton } from '../GPSButton';
 import { ScrollView } from 'react-native-gesture-handler';
 
+const { useDeviceOrientation } = DeviceOrientationMethods
+
 const inputNames = [
 	{ name: 'address', code: 'Address' },
 	{ name: 'internal_number', code: 'Internal number' },
@@ -58,12 +62,17 @@ const AddressFormUI = (props: AddressFormParams) => {
 		saveAddress,
 		isGuestUser,
 		isRequiredField,
+		showField,
 		isFromProductsList,
 		hasAddressDefault,
 		afterSignup,
+		businessSlug
 	} = props;
 
 	const theme = useTheme();
+	const [orientationState] = useDeviceOrientation();
+
+	const [autoCompleteInputFocused, setAutoCompleteInputFocused] = useState(false)
 
 	const tagsName = [
 		{ icon: theme.images.general.tag_home, value: 'home' },
@@ -72,6 +81,8 @@ const AddressFormUI = (props: AddressFormParams) => {
 		{ icon: theme.images.general.tag_plus, value: 'other' },
 	];
 
+	const HEIGHT_SCREEN = orientationState?.dimensions?.height
+
 	const styles = StyleSheet.create({
 		iconContainer: {
 			display: 'flex',
@@ -82,7 +93,6 @@ const AddressFormUI = (props: AddressFormParams) => {
 			backgroundColor: theme.colors.clear
 		},
 		inputsStyle: {
-			borderColor: theme.colors.border,
 			borderRadius: 10,
 			marginBottom: 20,
 			height: 50,
@@ -91,7 +101,6 @@ const AddressFormUI = (props: AddressFormParams) => {
 			flex: 1,
 		},
 		textAreaStyles: {
-			borderColor: theme.colors.border,
 			borderRadius: 10,
 			marginBottom: 20,
 			height: 104,
@@ -105,6 +114,12 @@ const AddressFormUI = (props: AddressFormParams) => {
 			end: 0,
 			top: 12,
 			zIndex: 1002,
+			right: autoCompleteInputFocused && (
+				!!address?.address ||
+				!!formState.changes?.address ||
+				!!addressState.address.address
+			) ? 30 : 15,
+			width: 16
 		},
 		wrapperNavbar: Platform.OS === 'ios'
 			? { paddingVertical: 0, paddingHorizontal: 40 }
@@ -153,8 +168,10 @@ const AddressFormUI = (props: AddressFormParams) => {
 		'true';
 	const maxLimitLocation =
 		configState?.configs?.meters_to_change_address?.value;
-
-	const continueAsGuest = () => navigation.navigate('BusinessList', { isGuestUser: true });
+	const countryCode = configState?.configs?.country_autocomplete?.value
+	const isHideMap = theme?.address?.components?.map?.hidden
+	const isHideIcons = theme?.address?.components?.icons?.hidden
+	const continueAsGuest = () => navigation.navigate(!!businessSlug ? 'Business' : 'BusinessList', { isGuestUser: true });
 	const goToBack = () => navigation?.canGoBack() && navigation.goBack();
 
 	const getAddressFormatted = (address: any) => {
@@ -356,7 +373,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 		if (
 			orderState.loading &&
 			!addressesList &&
-			orderState.options.address &&
+			orderState?.options?.address &&
 			auth &&
 			!afterSignup
 		) {
@@ -364,7 +381,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 				? navigation.navigate('BottomTab')
 				: navigation.navigate('Business');
 		}
-	}, [orderState.options.address]);
+	}, [orderState?.options?.address]);
 
 	useEffect(() => {
 		if (alertState.open && alertState?.key !== 'ERROR_MAX_LIMIT_LOCATION') {
@@ -515,7 +532,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 				/>
 			</View>
 			<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-				<AddressFormContainer style={{ height: 600, overflow: 'scroll' }}>
+				<AddressFormContainer style={{ height: HEIGHT_SCREEN * .78, overflow: 'scroll' }}>
 					<View>
 						<FormInput>
 							<AutocompleteInput>
@@ -543,7 +560,10 @@ const AddressFormUI = (props: AddressFormParams) => {
 											onPress={(data, details: any) => {
 												handleChangeAddress(data, details);
 											}}
-											query={{ key: googleMapsApiKey }}
+											query={{
+												key: googleMapsApiKey,
+												components: countryCode && countryCode !== '*' ? `country:${countryCode}` : ''
+											}}
 											fetchDetails
 											ref={googleInput}
 											textInputProps={{
@@ -562,6 +582,8 @@ const AddressFormUI = (props: AddressFormParams) => {
 												autoCorrect: false,
 												blurOnSubmit: false,
 												returnKeyType: 'next',
+												onFocus: () => setAutoCompleteInputFocused(true),
+												onBlur: () => setAutoCompleteInputFocused(false)
 											}}
 											onFail={(error) =>
 												setAlertState({
@@ -585,13 +607,14 @@ const AddressFormUI = (props: AddressFormParams) => {
 												textInput: {
 													borderWidth: 1,
 													borderRadius: 7.6,
-													borderColor: theme.colors.border,
+													borderColor: autoCompleteInputFocused ? theme.colors.primary : theme.colors.border,
 													flexGrow: 1,
 													fontSize: 15,
-													paddingHorizontal: 16,
+													paddingLeft: 16,
+													paddingRight: 32,
 													minHeight: 50,
 													fontFamily: 'Poppins-Regular',
-													marginBottom: 24,
+													marginBottom: 24
 												},
 											}}
 										/>
@@ -599,10 +622,10 @@ const AddressFormUI = (props: AddressFormParams) => {
 								/>
 
 								{(
-									(!isEditing && !isGuestUser && !formState.changes?.address) ||
-									(isEditing && !isGuestUser && !formState.changes?.address && formState.changes?.address !== undefined)) ||
-									(isGuestUser && !formState.changes?.address && formState.changes?.address !== undefined) &&
-								(
+									((!isEditing && !isGuestUser) ||
+										(isEditing && !isGuestUser)) ||
+									(isGuestUser)) &&
+									(
 										<View style={styles.pinIcon}>
 											<GPSButton
 												apiKey={googleMapsApiKey}
@@ -616,7 +639,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 												IconButton={<OIcon src={theme.images.general.pin} width={16} />}
 											/>
 										</View>
-								)}
+									)}
 							</AutocompleteInput>
 
 							{(locationChange || formState.changes?.location) && (
@@ -641,129 +664,141 @@ const AddressFormUI = (props: AddressFormParams) => {
 							)}
 
 							<View style={{ flexDirection: 'row', flexBasis: '50%' }}>
-								<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, marginRight: 24 }}
-											forwardRef={internalNumberRef}
-											returnKeyType="next"
-											onSubmitEditing={() => zipCodeRef?.current?.focus?.()}
-											blurOnSubmit={false}
-										/>
-									)}
-								/>
+								{showField && showField('internal_number') && (
+									<Controller
+										control={control}
+										name="internal_number"
+										rules={{
+											required:
+												isRequiredField && isRequiredField('internal_number')
+													? t(
+														`VALIDATION_ERROR_INTERNAL_NUMBER_REQUIRED`,
+														`The field internal number is required`,
+													)
+													: null,
+										}}
+										defaultValue={
+											address?.internal_number ||
+											formState.changes?.internal_number ||
+											addressState?.address?.internal_number ||
+											''
+										}
+										render={() => (
+											<OInput
+												name="internal_number"
+												placeholder={t('INTERNAL_NUMBER', 'Internal number')}
+												onChange={(text: string) => {
+													handleChangeInput(text);
+													setValue('internal_number', text);
+												}}
+												value={
+													address?.internal_number ||
+													formState.changes?.internal_number ||
+													addressState?.address?.internal_number ||
+													''
+												}
+												isFocusHighlight
+												style={{
+													...styles.inputsStyle,
+													marginRight: showField('internal_number') && showField('zipcode') ? 24 : 0
+												}}
+												forwardRef={internalNumberRef}
+												returnKeyType="next"
+												onSubmitEditing={() => zipCodeRef?.current?.focus?.()}
+												blurOnSubmit={false}
+											/>
+										)}
+									/>
+								)}
+
+								{showField && showField('zipcode') && (
+									<Controller
+										control={control}
+										name="zipcode"
+										rules={{
+											required:
+												isRequiredField && isRequiredField('zipcode')
+													? t(
+														`VALIDATION_ERROR_ZIP_CODE_REQUIRED`,
+														`The field Zip Code is required`,
+													)
+													: null,
+										}}
+										defaultValue={
+											address?.zipcode ||
+											formState.changes?.zipcode ||
+											addressState.address.zipcode ||
+											''
+										}
+										render={() => (
+											<OInput
+												name="zipcode"
+												placeholder={t('ZIP_CODE', 'Zip code')}
+												onChange={(text: string) => {
+													handleChangeInput(text);
+													setValue('zipcode', text);
+												}}
+												value={
+													address?.zipcode ||
+													formState.changes?.zipcode ||
+													addressState.address.zipcode ||
+													''
+												}
+												isFocusHighlight
+												style={styles.inputsStyle}
+												forwardRef={zipCodeRef}
+												returnKeyType="next"
+												onSubmitEditing={() => addressNotesRef?.current?.focus?.()}
+												blurOnSubmit={false}
+											/>
+										)}
+									/>
+								)}
+							</View>
 
+							{showField && showField('address_notes') && (
 								<Controller
 									control={control}
-									name="zipcode"
+									name="address_notes"
 									rules={{
 										required:
-											isRequiredField && isRequiredField('zipcode')
+											isRequiredField && isRequiredField('address_notes')
 												? t(
-													`VALIDATION_ERROR_ZIP_CODE_REQUIRED`,
-													`The field Zip Code is required`,
+													`VALIDATION_ERROR_ADDRESS_NOTES_REQUIRED`,
+													`The field address notes is required`,
 												)
 												: null,
 									}}
 									defaultValue={
-										address?.zipcode ||
-										formState.changes?.zipcode ||
-										addressState.address.zipcode ||
+										address?.address_notes ||
+										formState.changes?.address_notes ||
+										addressState.address.address_notes ||
 										''
 									}
 									render={() => (
 										<OInput
-											name="zipcode"
-											placeholder={t('ZIP_CODE', 'Zip code')}
-											onChange={(text: string) => {
+											name="address_notes"
+											placeholder={t('ADDRESS_NOTES', 'Address notes')}
+											onChange={(text: any) => {
 												handleChangeInput(text);
-												setValue('zipcode', text);
+												setValue('address_notes', text);
 											}}
 											value={
-												address?.zipcode ||
-												formState.changes?.zipcode ||
-												addressState.address.zipcode ||
+												address?.address_notes ||
+												formState.changes?.address_notes ||
+												addressState.address.address_notes ||
 												''
 											}
-											style={styles.inputsStyle}
-											forwardRef={zipCodeRef}
-											returnKeyType="next"
-											onSubmitEditing={() => addressNotesRef?.current?.focus?.()}
-											blurOnSubmit={false}
+											multiline
+											isFocusHighlight
+											style={styles.textAreaStyles}
+											returnKeyType="done"
+											forwardRef={addressNotesRef}
+											blurOnSubmit
 										/>
 									)}
 								/>
-							</View>
-
-							<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
-									/>
-								)}
-							/>
+							)}
 						</FormInput>
 						<IconsContainer>
 							{tagsName.map((tag) => (

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

@@ -1,9 +1,8 @@
 import React, { useEffect } from 'react'
 import { AddressList as AddressListController, useLanguage, useOrder, useSession } from 'ordering-components/native'
-import { AddressListContainer, AddressItem } from './styles'
+import { AddressItem, Container } from './styles'
 import { Platform, RefreshControl, StyleSheet, View } from 'react-native'
 import { OButton, OText, OAlert, OModal, OIcon } from '../shared'
-import { Container } from '../../layouts/Container'
 import { AddressListParams } from '../../types'
 import { NotFoundSource } from '../NotFoundSource'
 import NavBar from '../NavBar'
@@ -40,9 +39,6 @@ const AddressListUI = (props: AddressListParams) => {
 
 	const [isProfile, setIsProfile] = useState(isFromProfile || route?.params?.isFromProfile);
 
-	const goToBack = () => navigation?.canGoBack() && navigation.goBack()
-	const onNavigationRedirect = (route: string, params?: any) => navigation.navigate(route, params)
-
 	const onNavigatorRedirect = () => {
 		if (route && (isFromBusinesses || isGoBack)) {
 			isGoBack ? goToBack() : onNavigationRedirect('BottomTab')
@@ -104,7 +100,6 @@ const AddressListUI = (props: AddressListParams) => {
 	const handleSetAddress = (address: any) => {
 		if (address.id === orderState?.options?.address_id) return
 		handleSetDefault(address)
-		onNavigatorRedirect()
 	}
 
 	const handleSaveAddress = (address: any) => {
@@ -133,13 +128,21 @@ const AddressListUI = (props: AddressListParams) => {
 		}
 	}
 
+	const goToBack = () => navigation?.canGoBack() && navigation.goBack()
+	const onNavigationRedirect = (route: string, params?: any) => navigation.navigate(route, params)
+
+	useEffect(() => {
+		if (orderState.loading && auth && orderState.options.address?.location) {
+			onNavigatorRedirect()
+		}
+	}, [orderState.options.address])
+
 	useEffect(() => {
 		console.log('From profile : ' + isProfile)
 	}, [])
 
 	return (
-		<Container 
-			noPadding
+		<Container
 			refreshControl={
 				<RefreshControl
 					refreshing={refreshing}
@@ -147,17 +150,18 @@ const AddressListUI = (props: AddressListParams) => {
 				/>
 			}
 		>
-			{isProfile && (
-				<NavBar
-					title={t('SAVED_PLACES', 'My saved places')}
-					titleAlign={'center'}
-					onActionLeft={goToBack}
-					showCall={false}
-					style={{ paddingHorizontal: 40, paddingVertical: Platform.OS === 'ios' ? 0 : 20, marginTop: Platform.OS === 'ios' ? 0 : 30 }}
-				/>
-			)}
 			{(!addressList.loading || (isFromProductsList || isFromBusinesses || isFromProfile || isProfile)) && (
-				<AddressListContainer>
+				<>
+					{isProfile && (
+						<NavBar
+							title={t('SAVED_PLACES', 'My saved places')}
+							titleAlign={'center'}
+							onActionLeft={goToBack}
+							showCall={false}
+							paddingTop={10}
+							btnStyle={{ paddingLeft: 0 }}
+						/>
+					)}
 					{
 						route &&
 						(
@@ -173,8 +177,8 @@ const AddressListUI = (props: AddressListParams) => {
 								onActionLeft={() => goToBack()}
 								showCall={false}
 								btnStyle={{ paddingLeft: 0 }}
-								paddingTop={0}
-								style={{ marginTop: Platform.OS === 'ios' ? 0 : 40 }}
+								paddingTop={10}
+								style={{ marginTop: 0 }}
 								titleWrapStyle={{ paddingHorizontal: 0 }}
 								titleStyle={{ marginLeft: 0, marginRight: 0 }}
 							/>
@@ -323,7 +327,8 @@ const AddressListUI = (props: AddressListParams) => {
 							/>
 						</>
 					)}
-				</AddressListContainer>
+				</>
+
 			)}
 		</Container>
 	)

package/themes/original/src/components/AddressList/styles.tsx

@@ -1,10 +1,12 @@
 import styled from 'styled-components/native'
 
-export const AddressListContainer = styled.View`
+export const Container = styled.ScrollView`
+    position: relative;
     flex: 1;
 	 paddingLeft: 40px;
 	 paddingRight: 40px;
-	 paddingBottom: 20px;
+     margin-bottom: 40px;
+     padding-top: 10px;
 `
 
 export const AddressItem = styled.TouchableOpacity`