ordering-ui-react-native 0.21.75 → 0.21.76-release

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

@@ -16,6 +16,8 @@ import { ListItem } from '../UserProfile/styles';
 import moment from 'moment';
 import { DatePickerUI } from '../DatePicker';
 
+const CONDITIONAL_CODES = ['PR']
+
 export const UserFormDetailsUI = (props: any) => {
 	const {
 		isEdit,
@@ -127,6 +129,16 @@ export const UserFormDetailsUI = (props: any) => {
 		return rules;
 	};
 
+  const cellphoneValue = () => {
+		let cellphone = user?.cellphone || null
+		if (cellphone && CONDITIONAL_CODES.includes(user?.country_code)) {
+			if (user?.country_code === 'PR') {
+				cellphone = user?.cellphone?.slice(3)
+			}
+		}
+		return cellphone
+	}
+
 	const setUserCellPhone = (isEdit = false) => {
 		if (userPhoneNumber && !userPhoneNumber.includes('null') && !isEdit) {
 			setUserPhoneNumber(userPhoneNumber);
@@ -144,7 +156,7 @@ export const UserFormDetailsUI = (props: any) => {
 				...phoneInputData,
 				phone: {
 					country_phone_code: user?.country_phone_code || null,
-					cellphone: user?.cellphone || null,
+					cellphone: cellphoneValue()
 				},
 			});
 			return;
@@ -304,93 +316,97 @@ export const UserFormDetailsUI = (props: any) => {
 							{sortInputFields({
 								values: validationFields.fields?.checkout,
 							}).map(
-								(field: any) =>
-									showField &&
-									showField(field.code) && ((requiredFields && requiredFields.includes(field.code)) || !requiredFields) && (
-										<React.Fragment key={field.id}>
-											<Controller
-												key={field.id}
-												control={control}
-												render={() => (
-													<>
-														<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ textTransform: 'capitalize', alignSelf: 'flex-start' }}>
-															{t(field?.code?.toUpperCase(), field?.name)}
-														</OText>
-														<OInput
-															name={field.code}
-															placeholder={t(
-																field.code.toUpperCase(),
-																field?.name,
-															)}
-															inputStyle={styles.inputStyle}
-															style={{ paddingLeft: 0, paddingRight: 0, marginTop: 6, height: 44, minHeight: 44 }}
-															autoCapitalize={
-																field.code === 'email' ? 'none' : 'sentences'
-															}
-															isDisabled={false}
-															value={
-																formState?.changes[field.code] ??
-																(user && user[field.code]) ??
-																''
-															}
-															onChange={(val: any) => {
-																field.code !== 'email'
-																	? setValue(field.code, val.target.value)
-																	: setValue(
-																		field.code,
-																		val.target.value
-																			.toLowerCase()
-																			.replace(
-																				/[&,()%";:ç?<>{}\\[\]\s]/g,
-																				'',
-																			),
-																	);
-																field.code !== 'email'
-																	? handleChangeInput(val)
-																	: handleChangeInput({
-																		target: {
-																			name: 'email',
-																			value: val.target.value
+								(item: any) => {
+									const field = item?.validation_field || item
+									return (showField &&
+										showField(field.code) && ((requiredFields && requiredFields?.includes?.(field.code)) || !requiredFields) && (
+											<React.Fragment key={field.id}>
+												<Controller
+													key={field.id}
+													control={control}
+													render={() => (
+														<>
+															<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ textTransform: 'capitalize', alignSelf: 'flex-start' }}>
+																{t(field?.code?.toUpperCase(), field?.name)}
+															</OText>
+															<OInput
+																name={field.code}
+																placeholder={t(
+																	field.code.toUpperCase(),
+																	field?.name,
+																)}
+																inputStyle={styles.inputStyle}
+																style={{ paddingLeft: 0, paddingRight: 0, marginTop: 6, height: 44, minHeight: 44 }}
+																autoCapitalize={
+																	field.code === 'email' ? 'none' : 'sentences'
+																}
+																isDisabled={false}
+																value={
+																	formState?.changes[field.code] ??
+																	(user && user[field.code]) ??
+																	''
+																}
+																onChange={(val: any) => {
+																	field.code !== 'email'
+																		? setValue(field.code, val.target.value)
+																		: setValue(
+																			field.code,
+																			val.target.value
 																				.toLowerCase()
 																				.replace(
 																					/[&,()%";:ç?<>{}\\[\]\s]/g,
 																					'',
 																				),
-																		},
-																	});
-															}}
-															autoCorrect={field.code === 'email' && false}
-															type={
-																field.code === 'email'
-																	? 'email-address'
-																	: 'default'
-															}
-															returnKeyType="done"
-															autoCompleteType={
-																field.code === 'email' ? 'email' : 'off'
-															}
-														/>
-													</>
-												)}
-												name={field.code}
-												rules={getInputRules(field)}
-												defaultValue={user && user[field.code]}
-											/>
-										</React.Fragment>
-									),
+																		);
+																	field.code !== 'email'
+																		? handleChangeInput(val)
+																		: handleChangeInput({
+																			target: {
+																				name: 'email',
+																				value: val.target.value
+																					.toLowerCase()
+																					.replace(
+																						/[&,()%";:ç?<>{}\\[\]\s]/g,
+																						'',
+																					),
+																			},
+																		});
+																}}
+																autoCorrect={field.code === 'email' && false}
+																type={
+																	field.code === 'email'
+																		? 'email-address'
+																		: 'default'
+																}
+																returnKeyType="done"
+																autoCompleteType={
+																	field.code === 'email' ? 'email' : 'off'
+																}
+															/>
+														</>
+													)}
+													name={field.code}
+													rules={getInputRules(field)}
+													defaultValue={user && user[field.code]}
+												/>
+											</React.Fragment>
+										))
+								},
 							)}
 							{showInputBirthday && (
-								<WrapperBirthdate>
-									<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ textTransform: 'capitalize', alignSelf: 'flex-start' }}>
-										{t('BIRTHDATE', 'Birthdate')}
-									</OText>
-									<TouchableOpacity onPress={() => setShowDatePicker(!showDatePicker)}>
-										<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ marginTop: 6, marginBottom: -15 }}>
-											{birthdate ? moment(birthdate).format('YYYY-MM-DD') : ''}
+								<>
+									<WrapperBirthdate>
+										<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ textTransform: 'capitalize', alignSelf: 'flex-start' }}>
+											{t('BIRTHDATE', 'Birthdate')}
 										</OText>
-									</TouchableOpacity>
+										<TouchableOpacity onPress={() => setShowDatePicker(!showDatePicker)}>
+											<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ marginTop: 6 }}>
+												{birthdate ? moment(birthdate).format('YYYY-MM-DD') : ''}
+											</OText>
+										</TouchableOpacity>
+									</WrapperBirthdate>
 									<DatePickerUI open={showDatePicker} birthdate={birthdate} onConfirm={_handleChangeDate} onCancel={() => setShowDatePicker(false)} />
-								</WrapperBirthdate>
+								</>
 							)}
 							{!!showInputPhoneNumber && ((requiredFields && requiredFields.includes('cellphone')) || !requiredFields) && (
 								<WrapperPhone>
@@ -399,7 +415,7 @@ export const UserFormDetailsUI = (props: any) => {
 										data={phoneInputData}
 										handleData={(val: any) => handleChangePhoneNumber(val)}
 										changeCountry={(val: any) => changeCountry(val)}
-										defaultValue={phoneUpdate ? '' : user?.cellphone}
+										defaultValue={phoneUpdate ? '' : cellphoneValue()}
 										defaultCode={user?.country_code ?? user?.country_phone_code ?? null}
 										boxStyle={styles.phoneSelect}
 										inputStyle={styles.phoneInputStyle}
@@ -412,7 +428,7 @@ export const UserFormDetailsUI = (props: any) => {
 											color={theme.colors.error}
 											style={{ marginHorizontal: 10, textAlign: 'center' }}>
 											{t('YOUR_PREVIOUS_CELLPHONE', 'Your previous cellphone')}:{' '}
-											{user?.cellphone}
+											{cellphoneValue()}
 										</OText>
 									)}
 								</WrapperPhone>
@@ -480,9 +496,7 @@ export const UserFormDetailsUI = (props: any) => {
 										? t('UPDATING', 'Updating...')
 										: t('UPDATE', 'Update')
 								}
-								bgColor={theme.colors.primary}
-								textStyle={{ color: theme.colors.white, fontSize: 14 }}
-								borderColor={theme.colors.primary}
+								textStyle={{ fontSize: 14 }}
 								isDisabled={formState.loading}
 								imgRightSrc={null}
 								style={{ borderRadius: 7.6, shadowOpacity: 0, width: '100%', borderWidth: 1, marginTop: 20, marginBottom: 20 }}
@@ -500,12 +514,10 @@ export const UserFormDetailsUI = (props: any) => {
 								? t('SIGN_UP_AND_PLACE_ORDER', 'Sign up and place order')
 								: t('CONTINUE', 'Continue'))
 					}
-					bgColor={theme.colors.primary}
 					textStyle={{
 						color: !user?.guest_id && (formState.loading || !isValid) ? theme.colors.primary : theme.colors.white,
 						fontSize: 14
 					}}
-					borderColor={theme.colors.primary}
 					isDisabled={!user?.guest_id && (formState.loading || !isValid)}
 					imgRightSrc={null}
 					style={{
@@ -552,4 +564,3 @@ export const UserFormDetailsUI = (props: any) => {
 		</>
 	);
 };
-

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

@@ -20,7 +20,7 @@ import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
 import FontAwesome from 'react-native-vector-icons/FontAwesome'
 import FastImage from 'react-native-fast-image'
 import { OAlert } from '../../../../../src/components/shared'
-
+import { WebsocketStatus } from '../WebsocketStatus'
 import {
 	OIcon,
 	OText,
@@ -44,6 +44,7 @@ const ProfileListUI = (props: ProfileParams) => {
 		handleRemoveAccount,
 		removeAccountState,
 		handleChangePromotions,
+		appVersion
 	} = props;
 
 	const theme = useTheme();
@@ -151,7 +152,7 @@ const ProfileListUI = (props: ProfileParams) => {
 	const detailProps = {
 		goToBack: () => props.navigation?.canGoBack() && props.navigation.goBack(),
 		onNavigationRedirect: (route: string, params: any) => props.navigation.navigate(route, params),
-		handleRemoveAccount
+		handleRemoveAccount,
 	}
 
 	useEffect(() => {
@@ -270,6 +271,14 @@ const ProfileListUI = (props: ProfileParams) => {
 					<View style={{ height: 17 }} />
 				</Actions>
 			</ListWrap>
+			<WebsocketStatus />
+			{appVersion && (
+				<View
+					style={{ alignItems: 'center' }}
+				>
+					<OText>v{appVersion}</OText>
+				</View>
+			)}
 			<OAlert
 				open={confirm.open}
 				title={confirm.title}

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

@@ -141,6 +141,11 @@ const WalletsUI = (props: any) => {
               btnStyle={{ paddingLeft: 0 }}
               isVertical={!hideWalletsTheme}
               hideArrowLeft={!hideWalletsTheme}
+              buttonProps={{
+                bgColor: theme.colors.white,
+                borderColor: theme.colors.white,
+                textStyle: { color: theme.colors.btnFont }
+              }}
             />
             {isChewLayout && !openHistory && (
               <OButton
@@ -304,13 +309,11 @@ const WalletsUI = (props: any) => {
                 borderWidth: 0,
                 width: 26,
                 height: 26,
-                backgroundColor: '#FFF',
-                borderColor: '#FFF',
-                shadowColor: '#FFF',
                 paddingLeft: 0,
                 paddingRight: 0,
                 marginBottom: 10
               }}
+              useArrow
               onClick={() => setOpenHistory(false)}
               icon={AntDesignIcon}
               iconProps={{

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

@@ -0,0 +1,169 @@
+import React, { useState } from 'react'
+import { useLanguage, useUtils, WebsocketStatus as WebsocketStatusController } from 'ordering-components/native'
+import { TouchableOpacity, View, StyleSheet } from 'react-native'
+import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
+import { useTheme } from 'styled-components/native'
+import RNRestart from 'react-native-restart'
+import { OModal, OButton, OText, OIcon } from '../shared'
+
+import {
+  Container,
+  ModalContainer,
+  ModalTitle,
+  StatusItemWrapper,
+  StatusText
+} from './styles'
+
+const SocketStatusUI = (props: any) => {
+  const {
+    socketStatus,
+    connectedDate
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [{ parseDate }] = useUtils()
+  const [openModal, setOpenModal] = useState(false)
+
+  const styles = StyleSheet.create({
+    btnBackArrow: {
+      borderWidth: 0,
+      width: 32,
+      height: 32,
+      tintColor: theme.colors.textGray,
+      backgroundColor: theme.colors.clear,
+      borderColor: theme.colors.clear,
+      shadowColor: theme.colors.clear,
+      paddingLeft: 0,
+      paddingRight: 0,
+      marginBottom: 30,
+      marginTop: 30
+    },
+  })
+
+  const getStatusColor = (status: number) => {
+    switch (status) {
+      case 0:
+        return '#FF9922';
+      case 1:
+        return '#00D27A';
+      case 2:
+        return '#E63757';
+      default:
+        return '#FF9922';
+    }
+  }
+
+  return (
+    <Container>
+      <TouchableOpacity
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: theme.colors.inputChat,
+          borderRadius: 7.6,
+          marginVertical: 10,
+          paddingVertical: 10,
+          paddingHorizontal: 15,
+          marginHorizontal: 15
+        }}
+        activeOpacity={0.6}
+        onPress={() => setOpenModal(true)}
+      >
+        <OText
+          style={{ color: theme.colors.backArrow, fontSize: 16, marginBottom: 0, lineHeight: 16 }}
+        >
+          {t('CONNECTION_STATUS', 'Status')}
+        </OText>
+        <MaterialIcon
+          name='circle'
+          size={12}
+          color={getStatusColor(socketStatus)}
+          style={{ marginLeft: 8 }}
+        />
+      </TouchableOpacity>
+
+      <OModal
+        open={openModal}
+        onClose={() => setOpenModal(false)}
+        entireModal
+        customClose
+      >
+        <ModalContainer nestedScrollEnabled={true}>
+          <TouchableOpacity
+            onPress={() => setOpenModal(false)}
+            style={styles.btnBackArrow}
+          >
+            <OIcon src={theme.images.general.arrow_left} color={theme.colors.textGray} />
+          </TouchableOpacity>
+          <View>
+            <ModalTitle>{t('CONNECTION_STATUS', 'Connection status')}</ModalTitle>
+            <OText style={{ marginBottom: 20 }}>
+              {t('LAST_UPDATE', 'Last update')}: {parseDate(connectedDate)}
+            </OText>
+            <StatusItemWrapper>
+              <MaterialIcon
+                name='circle'
+                size={12}
+                color={getStatusColor(1)}
+                style={{ marginTop: 10, marginHorizontal: 8 }}
+              />
+              <View style={{ marginLeft: 16 }}>
+                <StatusText>{t('OK', 'Ok')}</StatusText>
+                <OText style={{ color: theme.colors.backArrow, fontSize: 14 }}>{t('WEBSOCKET_OK', 'The websocket works normally.')}</OText>
+              </View>
+            </StatusItemWrapper>
+            <StatusItemWrapper>
+              <MaterialIcon
+                name='circle'
+                size={12}
+                color={getStatusColor(0)}
+                style={{ marginTop: 10, marginHorizontal: 8 }}
+              />
+              <View style={{ marginLeft: 16 }}>
+                <StatusText>{t('CONNECTING', 'Connecting')}</StatusText>
+                <OText style={{ color: theme.colors.backArrow, fontSize: 14 }}>{t('WEBSOCKET_CONNECTING', 'The websocket is connecting.')}</OText>
+              </View>
+            </StatusItemWrapper>
+            <StatusItemWrapper>
+              <MaterialIcon
+                name='circle'
+                size={12}
+                color={getStatusColor(2)}
+                style={{ marginTop: 10, marginHorizontal: 8 }}
+              />
+              <View style={{ marginLeft: 16 }}>
+                <StatusText>{t('DISCONNECTED', 'Disconnected')}</StatusText>
+                <OText style={{ color: theme.colors.backArrow, fontSize: 14 }}>{t('WEBSOCKET_DISCONNECTED', 'The server is slow, please reload.')}</OText>
+              </View>
+            </StatusItemWrapper>
+
+            <View style={{ flexDirection: 'row', marginTop: 50 }}>
+              <OButton
+                onClick={() => setOpenModal(false)}
+                bgColor={theme.colors.white}
+                textStyle={{ color: theme.colors.primary }}
+                style={{ borderRadius: 8, height: 48 }}
+                text={t('CLOSE', 'Close')}
+              />
+              <OButton
+                onClick={() => RNRestart.Restart()}
+                style={{ borderRadius: 8, marginLeft: 16, height: 48 }}
+                text={t('UPDATE', 'Update')}
+              />
+            </View>
+          </View>
+        </ModalContainer>
+      </OModal>
+    </Container>
+  )
+}
+
+export const WebsocketStatus = (props: any) => {
+  const socketProps = {
+    ...props,
+    UIComponent: SocketStatusUI
+  }
+  return <WebsocketStatusController {...socketProps} />
+}

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

@@ -0,0 +1,28 @@
+import styled from 'styled-components/native'
+
+export const Container = styled.View`
+  display: flex;
+  flex-direction: column;
+`
+export const ModalContainer = styled.ScrollView`
+  padding: 0px 30px;
+`
+export const ModalTitle = styled.Text`
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 20px;
+  color: ${(props: any) => props.theme.colors.textGray};
+  margin-bottom: 10px;
+`
+export const StatusItemWrapper = styled.View`
+  flex-direction: row;
+  margin-bottom: 16px;
+`
+export const StatusText = styled.Text`
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 18px;
+  color: ${(props: any) => props.theme.colors.textGray};
+`

package/themes/original/src/components/shared/OAlert.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import styled, { css } from 'styled-components/native'
-import { Alert } from 'react-native'
+import { Alert, Vibration } from 'react-native'
 import { useLanguage } from 'ordering-components/native'
 
 const Wrapper = styled.TouchableOpacity`
@@ -41,6 +41,7 @@ const OAlert = (props: Props) => {
   }
 
   const handleClick = () => {
+    Vibration.vibrate(100)
     props.onClick && props.onClick()
     createTwoButtonAlert()
   }

package/themes/original/src/components/shared/OButton.tsx

@@ -85,6 +85,7 @@ interface Props {
 	isDisabledWithSameStyles?: boolean;
 	icon?: any;
 	iconProps?: any
+	useArrow?: boolean;
 }
 
 const OButton = (props: Props): React.ReactElement => {
@@ -94,8 +95,8 @@ const OButton = (props: Props): React.ReactElement => {
 	if (props.isDisabled) {
 		return (
 			<View style={props.parentStyle}>
-				<StyledButtonDisabled style={props.style}>
-					<StyledTextDisabled style={props.textStyle}>
+				<StyledButtonDisabled style={{ ...props.style, backgroundColor: theme.colors.disabled }}>
+					<StyledTextDisabled style={{ ...props.textStyle, color: theme.colors.backgroundGray200 }}>
 						{props.text}
 					</StyledTextDisabled>
 				</StyledButtonDisabled>
@@ -119,7 +120,7 @@ const OButton = (props: Props): React.ReactElement => {
 			style={{ width: props.isCircle ? 52 : props.style?.width, ...props.parentStyle }}
 			disabled={props.isDisabledWithSameStyles}
 		>
-			<StyledButton style={props.bgColor ? { ...props.style, backgroundColor: props.bgColor, borderColor: props.borderColor, borderRadius: parseInt(theme?.general?.components?.buttons?.borderRadius) || props.style?.borderRadius } : { ...props.style, borderRadius: parseInt(theme?.general?.components?.buttons?.borderRadius) || props.style?.borderRadius }}>
+			<StyledButton style={{ ...props.style, backgroundColor: props.useArrow ? theme.colors.white : props.bgColor ?? theme.colors.primary, borderColor: props.useArrow ? theme.colors.white : props.borderColor ?? theme.colors.primary, borderRadius: props.style?.borderRadius }}>
 				{props.icon ? (
 					<props.icon {...props.iconProps} />
 				) : null}
@@ -127,7 +128,7 @@ const OButton = (props: Props): React.ReactElement => {
 					<OIcon style={props.imgLeftStyle} src={props.imgLeftSrc} color={theme.colors.textNormal} />
 				) : null}
 				{props.text ? (
-					<StyledText style={props.textStyle}>{props.text}</StyledText>
+					<StyledText style={{ ...props.textStyle, color: props.useArrow ? theme.colors.btnFont : props?.textStyle?.color ?? theme.colors.white }}>{props.text}</StyledText>
 				) : null}
 				{props.imgRightSrc ? (
 					<EndImage style={props.imgRightStyle} source={props.imgRightSrc} />

package/themes/original/src/components/shared/OInput.tsx

@@ -3,7 +3,7 @@ import { ImageSourcePropType, ImageStyle, ViewStyle, TextInputProps, TextStyle }
 import styled from 'styled-components/native';
 import OIcon from './OIcon';
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
-import { useTheme, css } from 'styled-components/native';
+import { useTheme } from 'styled-components/native';
 
 const Input = styled.TextInput`
   flex-grow: 1;
@@ -53,9 +53,6 @@ const Wrapper = styled.Pressable`
 	align-items: center;
 	justify-content: center;
 	width: 100%;
-	${(props: any) => props?.borderRadius && css`
-      border-radius: ${typeof props?.borderRadius === 'string' ? props?.borderRadius : `${props?.borderRadius}px`};
-  	`}
 `;
 
 const OInput = (props: Props): React.ReactElement => {
@@ -70,7 +67,6 @@ const OInput = (props: Props): React.ReactElement => {
 					? props.borderColor
 					: inputFocused ? theme.colors.primary : theme.colors.border,
 				...props.style,
-				borderRadius: parseInt(theme?.general?.components?.inputs?.borderRadius) || props.style?.borderRadius
 			}}>
 			{props.icon ? (
 				<OIcon
@@ -105,9 +101,9 @@ const OInput = (props: Props): React.ReactElement => {
 					props.forwardRef && (props.forwardRef.current = e)
 				}}
 				style={{
-					...(theme?.general?.components?.inputs?.color && {
-						color: theme?.general?.components?.inputs?.color
-					}),
+          ...(theme?.general?.components?.inputs?.color && {
+            color: theme?.general?.components?.inputs?.color
+          }),
 					...props?.inputStyle
 				}}
 				onFocus={() => setInputFocused(true)}

package/themes/original/src/types/index.tsx

@@ -50,6 +50,7 @@ export interface ProfileParams {
 	removeAccountState?: any;
 	handleChangePromotions?: any;
 	notificationsGroup?: any;
+	appVersion?: string
 }
 
 export interface AddressListParams {
@@ -607,7 +608,7 @@ export interface UpsellingProductsParams {
 	business?: any;
 	businessId?: number;
 	cartProducts?: Array<any>;
-	handleUpsellingPage: (cart ?: any) => void;
+	handleUpsellingPage: (cart?: any) => void;
 	openUpselling: boolean;
 	canOpenUpselling?: boolean;
 	setCanOpenUpselling?: (value: any) => void;
@@ -637,6 +638,9 @@ export interface GoogleMapsParams {
 	isIntGeoCoder: boolean,
 	businessZones?: any
 	delta?: number
+	setAutoCompleteAddress?: (val: boolean) => void,
+	autoCompleteAddress?: boolean,
+	manualZoom?: boolean
 }
 
 export interface HelpParams {

package/themes/original/src/utils/index.tsx

@@ -4,6 +4,7 @@ import FontAwesome from 'react-native-vector-icons/FontAwesome';
 import { CODES } from 'ordering-components/native'
 import { ORDER_TYPES } from '../config/constants';
 import { useTheme } from 'styled-components/native';
+import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 
 const [languageState, t] = useLanguage();
 const theme = useTheme()
@@ -258,7 +259,7 @@ export const sortInputFields = ({ fields, values }: any) => {
 
   fieldsBase.forEach((f: any) => {
     fieldsArray && fieldsArray.forEach((field: any) => {
-      if (f === field.code) {
+      if (f === (field.validation_field?.code || field?.code)) {
         fieldsSorted.push(field)
       }
     })
@@ -725,3 +726,13 @@ export const lightenDarkenColor = (color: any) => {
     return false
   }
 }
+
+export const vibrateApp = (impact ?: string) => {
+  const options = {
+    enableVibrateFallback: true,
+    ignoreAndroidSystemSettings: false
+  };
+
+  ReactNativeHapticFeedback.trigger(impact || "impactLight", options);
+
+}