ordering-ui-react-native 0.18.38 → 0.18.40

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

@@ -9,8 +9,7 @@ import {
 	I18nManager,
 	SafeAreaView,
 	Platform,
-	Button,
-	Vibration
+	Button
 } from 'react-native';
 import {
 	ProductForm as ProductOptions,
@@ -55,7 +54,7 @@ import { ProductOptionSubOption } from '../ProductOptionSubOption';
 import { NotFoundSource } from '../NotFoundSource';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import NavBar from '../NavBar';
-import { orderTypeList } from '../../utils';
+import { orderTypeList, vibrateApp } from '../../utils';
 const windowWidth = Dimensions.get('window').width;
 
 export const ProductOptionsUI = (props: any) => {
@@ -206,6 +205,7 @@ export const ProductOptionsUI = (props: any) => {
 	const [isScrollAvailable, setIsScrollAvailable] = useState(null)
 	const [editionsLayoutY, setEditionsLayoutY] = useState(null)
 	const [viewedProduct, setViewedProduct] = useState<any>(null)
+	const [showTitle, setShowTitle] = useState(false)
 
 	const guestCheckoutEnabled = configs?.guest_checkout_enabled?.value === '1'
   const orderTypeEnabled = !orderTypeList[orderState?.options?.type - 1] || configs?.allowed_order_types_guest_checkout?.value?.includes(orderTypeList[orderState?.options?.type - 1])
@@ -225,7 +225,7 @@ export const ProductOptionsUI = (props: any) => {
 	};
 
 	const handleSaveProduct = () => {
-		Vibration.vibrate()
+		vibrateApp()
 		if (!productCart.quantity) {
 			showToast(ToastType.Error, t('VALIDATION_ERROR_REQUIRED', 'The quantity field is required').replace('_attribute_', t('PRODUCT_POTIONS_QUANTITY', 'Quantity')))
 			return
@@ -363,7 +363,7 @@ export const ProductOptionsUI = (props: any) => {
 	);
 
 	const handleScroll = ({ nativeEvent: { contentOffset, layoutMeasurement } }: any) => {
-
+		setShowTitle(contentOffset.y > 30)
 		const _topOption = Object.keys(optionLayout).find(((option: any) => Math.abs(contentOffset?.y - layoutMeasurement?.height - optionLayout[option]?.y) < 20))
 		if (_topOption) {
 			const _topOptionId = Number(_topOption.replace('id:', ''))
@@ -527,12 +527,24 @@ export const ProductOptionsUI = (props: any) => {
 	return (
 		<SafeAreaView style={{ flex: 1 }}>
 			<View style={styles.wrapperNavbar}>
-				<NavBar
-					onActionLeft={() => handleGoBack()}
-					showCall={false}
-					btnStyle={{ paddingLeft: 0 }}
-					paddingTop={4}
-				/>
+				<TopHeader>
+					<>
+						<TopActions onPress={() => handleGoBack()}>
+							<OIcon src={theme.images.general.arrow_left} color={theme.colors.textNormal} />
+						</TopActions>
+						{showTitle && (
+							<OText
+								size={16}
+								style={{ flex: 1, textAlign: 'center' }}
+								weight={Platform.OS === 'ios' ? '600' : 'bold'}
+								numberOfLines={2}
+								ellipsizeMode='tail'
+							>
+								{product?.name}
+							</OText>
+						)}
+					</>
+				</TopHeader>
 			</View>
 			{!error && (
 				<ScrollView

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

@@ -41,8 +41,7 @@ export const ProductOptionSubOptionUI = (props: any) => {
 	const [showMessage, setShowMessage] = useState(false)
 	const [isDirty, setIsDirty] = useState(false)
 
-	const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
-	const iconsSize = isChewLayout ? 20 : 16
+	const iconsSize = 20
 
 	const handleSuboptionClick = () => {
 		toggleSelect()
@@ -117,7 +116,8 @@ export const ProductOptionSubOptionUI = (props: any) => {
 								<OIcon
 									src={theme.images.general.half_l}
 									color={state.selected && state.position === 'left' ? theme.colors.primary : '#cbcbcb'}
-									width={16}
+									width={20}
+									height={20}
 									style={styles.inverse}
 								/>
 							</Circle>
@@ -125,14 +125,16 @@ export const ProductOptionSubOptionUI = (props: any) => {
 								<OIcon
 									src={theme.images.general.half_f}
 									color={state.selected && state.position === 'whole' ? theme.colors.primary : '#cbcbcb'}
-									width={16}
+									width={20}
+									height={20}
 								/>
 							</Circle>
 							<Circle disabled={disabled} onPress={() => changePosition('right')}>
 								<OIcon
 									src={theme.images.general.half_r}
 									color={state.selected && state.position === 'right' ? theme.colors.primary : '#cbcbcb'}
-									width={16}
+									width={20}
+									height={20}
 								/>
 							</Circle>
 						</>

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

@@ -10,7 +10,7 @@ export const Container = styled.TouchableOpacity`
 export const IconControl = styled.TouchableOpacity`
   flex-direction: row;
   padding: 10px;
-  width: 45%;
+  width: 38%;
   align-items: center;
 `
 
@@ -18,7 +18,7 @@ export const QuantityControl = styled.View`
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
-  margin-horizontal: 5px;
+  margin-right: 5px;
   flex: 1;
   width: 60px;
 `

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { View, Pressable, StyleSheet, Linking, Platform, TouchableOpacity, Vibration } from 'react-native';
+import { View, Pressable, StyleSheet, Linking, Platform, TouchableOpacity } from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
 import Spinner from 'react-native-loading-spinner-overlay';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
@@ -37,7 +37,7 @@ import Alert from '../../../../../src/providers/AlertProvider'
 import { OText, OButton, OInput } from '../shared';
 import { OModal } from '../../../../../src/components/shared';
 import { SignupParams } from '../../types';
-import { sortInputFields } from '../../utils';
+import { sortInputFields, vibrateApp } from '../../utils';
 import { GoogleLogin } from '../GoogleLogin';
 import { AppleLogin } from '../AppleLogin';
 
@@ -246,7 +246,7 @@ const SignupFormUI = (props: SignupParams) => {
 	const onSubmit = (values?: any) => {
 		if (phoneInputData.error && signUpTab !== 'otpEmail') {
 			showToast(ToastType.Error, phoneInputData.error);
-			Vibration.vibrate()
+			vibrateApp()
 			return;
 		}
 		if (
@@ -264,7 +264,7 @@ const SignupFormUI = (props: SignupParams) => {
 					'The field Mobile phone is required.',
 				),
 			);
-			Vibration.vibrate()
+			vibrateApp()
 			return;
 		}
 		if (signUpTab === 'otpEmail' || signUpTab === 'otpCellphone') {
@@ -333,7 +333,7 @@ const SignupFormUI = (props: SignupParams) => {
 			await Linking.openURL(url);
 		} else {
 			showToast(ToastType.Error, t('VALIDATION_ERROR_ACTIVE_URL', 'The _attribute_ is not a valid URL.').replace('_attribute_', t('URL', 'URL')))
-			Vibration.vibrate()
+			vibrateApp()
 		}
 	}
 
@@ -341,12 +341,12 @@ const SignupFormUI = (props: SignupParams) => {
 		setRecaptchaVerified(false)
 		if (!recaptchaConfig?.siteKey) {
 			showToast(ToastType.Error, t('NO_RECAPTCHA_SITE_KEY', 'The config doesn\'t have recaptcha site key'));
-			Vibration.vibrate()
+			vibrateApp()
 			return
 		}
 		if (!recaptchaConfig?.baseUrl) {
 			showToast(ToastType.Error, t('NO_RECAPTCHA_BASE_URL', 'The config doesn\'t have recaptcha base url'));
-			Vibration.vibrate()
+			vibrateApp()
 			return
 		}
 		recaptchaRef.current.open()
@@ -390,11 +390,11 @@ const SignupFormUI = (props: SignupParams) => {
 					baseUrl: configs?.security_recaptcha_base_url?.value || null
 				})
 				showToast(ToastType.Info, t('TRY_AGAIN', 'Please try again'))
-				Vibration.vibrate()
+				vibrateApp()
 				return
 			}
 			formState.result?.result && showToast(ToastType.Error, formState.result?.result[0]);
-			formState.result?.result && Vibration.vibrate()
+			formState.result?.result && vibrateApp()
 			setIsLoadingVerifyModal(false);
 		}
 	}, [formState]);
@@ -402,7 +402,7 @@ const SignupFormUI = (props: SignupParams) => {
 	useEffect(() => {
 		if (Object.keys(errors).length > 0) {
 			setIsLoadingVerifyModal(false);
-			Vibration.vibrate()
+			vibrateApp()
 		}
 	}, [errors])
 
@@ -431,7 +431,7 @@ const SignupFormUI = (props: SignupParams) => {
 						? verifyPhoneState?.result?.result
 						: verifyPhoneState?.result?.result[0];
 				verifyPhoneState.result?.result && showToast(ToastType.Error, message);
-				verifyPhoneState.result?.result && Vibration.vibrate()
+				verifyPhoneState.result?.result && vibrateApp()
 				setIsLoadingVerifyModal(false);
 				return;
 			}
@@ -930,7 +930,7 @@ const SignupFormUI = (props: SignupParams) => {
 										(
 											<FacebookLogin
 												notificationState={notificationState}
-												handleErrors={(err: any) => { showToast(ToastType.Error, err), Vibration.vibrate() }}
+												handleErrors={(err: any) => { showToast(ToastType.Error, err), vibrateApp() }}
 												handleLoading={(val: boolean) => setIsFBLoading(val)}
 												handleSuccessFacebookLogin={handleSuccessFacebook}
 											/>
@@ -939,7 +939,7 @@ const SignupFormUI = (props: SignupParams) => {
 										<GoogleLogin
 											notificationState={notificationState}
 											webClientId={configs?.google_login_client_id?.value}
-											handleErrors={(err: any) => { showToast(ToastType.Error, err), Vibration.vibrate() }}
+											handleErrors={(err: any) => { showToast(ToastType.Error, err), vibrateApp() }}
 											handleLoading={(val: boolean) => setIsFBLoading(val)}
 											handleSuccessGoogleLogin={handleSuccessFacebook}
 										/>
@@ -947,7 +947,7 @@ const SignupFormUI = (props: SignupParams) => {
 									{(configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && appleLoginEnabled && (
 										<AppleLogin
 											notificationState={notificationState}
-											handleErrors={(err: any) => { showToast(ToastType.Error, err), Vibration.vibrate() }}
+											handleErrors={(err: any) => { showToast(ToastType.Error, err), vibrateApp() }}
 											handleLoading={(val: boolean) => setIsFBLoading(val)}
 											handleSuccessAppleLogin={handleSuccessFacebook}
 										/>

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   SingleOrderCard as SingleOrderCardController,
   useUtils,
@@ -11,6 +11,7 @@ import { OIcon, OText, OButton } from '../shared';
 import { SingleOrderCardParams } from '../../types';
 import { OAlert } from '../../../../../src/components/shared'
 import { OrderEta } from '../OrderDetails/OrderEta'
+import { useIsFocused } from '@react-navigation/native';
 import {
   InnerContainer,
   Logo,
@@ -44,6 +45,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
   const [, t] = useLanguage();
   const [{ carts }] = useOrder()
   const theme = useTheme();
+  const isFocused = useIsFocused();
 
   const [reorderSelected, setReorderSelected] = useState<number | null>(null);
   const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
@@ -198,6 +200,10 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
   const hideFavorite = theme?.orders?.components?.favorite?.hidden
   const hideOrderStatus = theme?.orders?.components?.order_status?.hidden
 
+  useEffect(() => {
+    if (isFocused) setReorderSelected(null)
+  }, [isFocused])
+
   return (
     <>
       <CardAnimation

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { View, StyleSheet, useWindowDimensions, Keyboard } from 'react-native';
+import { View, StyleSheet, useWindowDimensions, Keyboard, Platform } from 'react-native';
 import { useLanguage, useSession, useConfig } from 'ordering-components/native';
 import {
 	StripeProvider,
@@ -45,6 +45,22 @@ const StripeElementsFormUI = (props: any) => {
 	const { top, bottom } = useSafeAreaInsets();
 	const [isKeyboardShow, setIsKeyboardShow] = useState(false);
 
+	const styles = StyleSheet.create({
+		container: {
+			width: '100%',
+			paddingHorizontal: 40,
+			justifyContent: 'space-between',
+			paddingBottom: 12
+		},
+		btnAddStyle: {
+			marginTop: 20,
+			borderRadius: 7.6,
+			shadowOpacity: 0,
+			height: 44,
+			marginBottom: isKeyboardShow && Platform.OS === 'ios' ? 40 : 0
+		},
+	})
+
 	let billingDetails: any = {}
 
 	if (user?.name || user?.lastname) {
@@ -249,21 +265,6 @@ const StripeElementsFormUI = (props: any) => {
 	)
 }
 
-const styles = StyleSheet.create({
-	container: {
-		width: '100%',
-		paddingHorizontal: 40,
-		justifyContent: 'space-between',
-		paddingBottom: 12
-	},
-	btnAddStyle: {
-		marginTop: 20,
-		borderRadius: 7.6,
-		shadowOpacity: 0,
-		height: 44
-	},
-})
-
 export const StripeElementsForm = (props: any) => {
 	const stripeProps = {
 		...props,

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

@@ -7,11 +7,12 @@ import { SignupForm } from '../SignupForm'
 
 import { UDForm, UDLoader, UDWrapper, WrapperPhone } from './styles';
 
-import { OText, OButton, OInput, OModal } from '../shared';
-import Alert from '../../providers/AlertProvider'
+import { OText, OButton, OInput, OModal, OIcon } from '../shared';
+import { OAlert } from '../../../../../src/components/shared'
 
 import { PhoneInputNumber } from '../PhoneInputNumber';
 import { sortInputFields } from '../../utils';
+import { ListItem } from '../UserProfile/styles';
 
 export const UserFormDetailsUI = (props: any) => {
 	const {
@@ -31,7 +32,9 @@ export const UserFormDetailsUI = (props: any) => {
 		setWillVerifyOtpState,
 		handlePlaceOrderAsGuest,
 		isCheckout,
-		setIsOpen
+		setIsOpen,
+		handleRemoveAccount,
+		isProfile
 	} = props;
 
 	const theme = useTheme();
@@ -85,8 +88,9 @@ export const UserFormDetailsUI = (props: any) => {
 			cellphone: null,
 		},
 	});
-	const [alertState, setAlertState] = useState({ open: false, content: '' })
+	const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
 
+	const isAdmin = user?.level === 0
 	const showInputPhoneNumber = (validationFields?.fields?.checkout?.cellphone?.enabled ?? false) || configs?.verification_phone_required?.value === '1'
 
 	const handleSuccessSignup = (user: any) => {
@@ -202,6 +206,18 @@ export const UserFormDetailsUI = (props: any) => {
 		handleChangeInput(countryCode, true);
 	}
 
+	const onRemoveAccount = () => {
+		setConfirm({
+			open: true,
+			content: [t('QUESTION_REMOVE_ACCOUNT', 'Are you sure that you want to remove your account?')],
+			title: t('ACCOUNT_ALERT', 'Account alert'),
+			handleOnAccept: () => {
+				setConfirm({ ...confirm, open: false })
+				handleRemoveAccount && handleRemoveAccount(user?.id)
+			}
+		})
+	}
+
 	useEffect(() => {
 		if (Object.keys(errors).length > 0) {
 			const list = Object.values(errors);
@@ -408,6 +424,12 @@ export const UserFormDetailsUI = (props: any) => {
 							)}
 						</UDWrapper>
 					)}
+				{isProfile && (
+					<ListItem disabled={isAdmin} onPress={() => onRemoveAccount()} activeOpacity={0.7}>
+						<OIcon src={theme.images.general.user} width={16} color={theme.colors.textNormal} style={{ marginEnd: 14 }} />
+						<OText size={14} lineHeight={24} weight={'400'} style={{ opacity: isAdmin ? 0.5 : 1 }} color={theme.colors.danger5}>{t('REMOVE_ACCOUNT', 'Remove account')}</OText>
+					</ListItem>
+				)}
 				{validationFields?.loading && (
 					<UDLoader>
 						<OText size={12}>{t('LOADING', 'Loading')}</OText>
@@ -474,7 +496,14 @@ export const UserFormDetailsUI = (props: any) => {
 					/>
 				</ScrollView>
 			</OModal>
-			
+			<OAlert
+				open={confirm.open}
+				title={confirm.title}
+				content={confirm.content}
+				onAccept={confirm.handleOnAccept}
+				onCancel={() => setConfirm({ ...confirm, open: false, title: null })}
+				onClose={() => setConfirm({ ...confirm, open: false, title: null })}
+			/>
 		</>
 	);
 };

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

@@ -35,7 +35,6 @@ import {
 } from './styles';
 import { useWindowDimensions } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import styled from 'styled-components';
 import ToggleSwitch from 'toggle-switch-react-native';
 
 const ProfileListUI = (props: ProfileParams) => {
@@ -118,8 +117,6 @@ const ProfileListUI = (props: ProfileParams) => {
 	const [, { showToast }] = useToast();
 	const { errors } = useForm();
 
-	const isAdmin = user?.level === 0
-
 	const { height } = useWindowDimensions();
 	const { top, bottom } = useSafeAreaInsets();
 
@@ -153,19 +150,8 @@ const ProfileListUI = (props: ProfileParams) => {
 
 	const detailProps = {
 		goToBack: () => props.navigation?.canGoBack() && props.navigation.goBack(),
-		onNavigationRedirect: (route: string, params: any) => props.navigation.navigate(route, params)
-	}
-
-	const onRemoveAccount = () => {
-		setConfirm({
-			open: true,
-			content: [t('QUESTION_REMOVE_ACCOUNT', 'Are you sure that you want to remove your account?')],
-			title: t('ACCOUNT_ALERT', 'Account alert'),
-			handleOnAccept: () => {
-				setConfirm({ ...confirm, open: false })
-				handleRemoveAccount && handleRemoveAccount(user?.id)
-			}
-		})
+		onNavigationRedirect: (route: string, params: any) => props.navigation.navigate(route, params),
+		handleRemoveAccount
 	}
 
 	useEffect(() => {
@@ -282,10 +268,6 @@ const ProfileListUI = (props: ProfileParams) => {
 					<View style={{ height: 17 }} />
 					<LogoutButton color={theme.colors.textNormal} text={t('LOGOUT', 'Logout')} />
 					<View style={{ height: 17 }} />
-					<ListItem disabled={isAdmin} onPress={() => onRemoveAccount()} activeOpacity={0.7}>
-						<OIcon src={theme.images.general.user} width={16} color={theme.colors.textNormal} style={{ marginEnd: 14 }} />
-						<OText size={14} lineHeight={24} weight={'400'} style={{ opacity: isAdmin ? 0.5 : 1 }} color={theme.colors.danger5}>{t('REMOVE_ACCOUNT', 'Remove account')}</OText>
-					</ListItem>
 				</Actions>
 			</ListWrap>
 			<OAlert

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

@@ -288,12 +288,16 @@ const ProfileUI = (props: ProfileParams) => {
 					showCall={false}
 					btnStyle={{ paddingLeft: 0 }}
 				/>
-				<KeyboardAvoidingView behavior={Platform.OS == 'ios' ? 'padding' : 'height'} enabled style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}>
+				<KeyboardAvoidingView
+					behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
+					enabled={Platform.OS === 'ios' ? true : false}
+					style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}
+				>
 					<CenterView>
 						<View style={styles.photo}>
 							{user?.photo ? (
 								<FastImage
-									style={{ height: 60, width: 80, borderRadius: 8 }}
+									style={{ height: 80, width: 80, borderRadius: 8 }}
 									source={{
 										uri: user?.photo,
 										priority: FastImage.priority.normal,
@@ -316,6 +320,7 @@ const ProfileUI = (props: ProfileParams) => {
 					<Spinner visible={formState?.loading || verifyPhoneState?.loading} />
 					<UserFormDetailsUI
 						{...props}
+						isProfile
 						isEdit
 						setWillVerifyOtpState={setWillVerifyOtpState}
 					/>

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

@@ -63,12 +63,12 @@ export const WalletTransactions = (props: any) => {
           (transactionsList?.error ||
             !transactionsList.list?.[`wallet:${currentWalletSelected?.id}`]?.length) &&
         (
-          <NotFoundSource
-            content={transactionsList?.error
+          <OText color={theme.colors.disabled} size={16} style={{ textAlign: 'center' }}>
+            {transactionsList?.error
               ? t('ERROR_NOT_FOUND_TRANSACTIONS', 'Sorry, an error has occurred')
               : t('NOT_FOUND_TRANSACTIONS', 'No transactions to show at this time.')
             }
-          />
+          </OText>
         )}
       </View>
     </Container>

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

@@ -156,7 +156,7 @@ const WalletsUI = (props: any) => {
               size={20}
               style={{
                 marginTop: 30,
-                marginLeft: (!props.hideBackBtn || !hideWalletsTheme) && !isChewLayout ? 10 : 0,
+                marginLeft: (!props.hideBackBtn || !hideWalletsTheme) && !isChewLayout ? 40 : 0,
                 color: theme.colors.textNormal,
               }}
               weight={Platform.OS === 'ios' ? '600' : 'bold'}
@@ -213,9 +213,9 @@ const WalletsUI = (props: any) => {
                   <LoyaltyContent>
                     <LoyaltyWrapp>
                       <OText size={20}>
-                        {`${t('LOYALTY_LEVEL_TITLE', 'Your level is')}:`}
+                        {`${t('LOYALTY_LEVEL_TITLE', 'Your level is')}`}
                       </OText>
-                      {/* {loyaltyLevel.image ? (
+                      {loyaltyLevel.image ? (
                         <FastImage
                           style={styles.logoStyle}
                           source={{
@@ -230,7 +230,7 @@ const WalletsUI = (props: any) => {
                           source={theme.images.dummies.loyaltyLevel}
                           resizeMode='contain'
                         />
-                      )} */}
+                      )}
                       <OText
                         size={22}
                         weight='bold'

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

@@ -373,8 +373,8 @@ export interface OrdersOptionParams {
 	preOrders?: boolean,
 	reorderState?: any,
 	handleReorder?: (orderId: number) => {},
-	setOrdersLength?: ({ activeOrdersLength, previousOrdersLength }: { activeOrdersLength: number, previousOrdersLength: number }) => void,
-	ordersLength: { activeOrdersLength: number, previousOrdersLength: number },
+	setOrdersLength?: ({ activeOrdersLength, previousOrdersLength, preordersLength }: { activeOrdersLength: number, previousOrdersLength: number, preordersLength: number }) => void,
+	ordersLength: { activeOrdersLength: number, previousOrdersLength: number, preordersLength: number },
 	setSelectedOrderId?: any,
 	setOpenMessges?: any,
 	loadMoreStatus?: boolean,

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()
@@ -612,3 +613,13 @@ export const lightenDarkenColor = (color: any) => {
     return false
   }
 }
+
+export const vibrateApp = (impact ?: string) => {
+  const options = {
+    enableVibrateFallback: true,
+    ignoreAndroidSystemSettings: false
+  };
+
+  ReactNativeHapticFeedback.trigger(impact || "impactLight", options);
+
+}