ordering-ui-react-native 0.14.69 → 0.14.72

package/themes/kiosk/src/components/LoginForm/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
 import { useTheme } from 'styled-components/native';
@@ -7,7 +7,8 @@ import {
   LoginForm as LoginFormController,
   useLanguage,
   ToastType,
-  useToast
+  useToast,
+  useApi
 } from 'ordering-components/native';
 
 import {
@@ -18,21 +19,40 @@ import {
 import { OText, OButton, OInput, OIcon } from '../shared';
 import { LoginParams } from '../../types';
 import { LANDSCAPE, PORTRAIT, useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation';
+import { _setStoreData } from '../../../../../src/providers/StoreUtil'
 
 const LoginFormUI = (props: LoginParams) => {
   const {
     loginButtonText,
     formState,
     handleButtonLoginClick,
+    useRootPoint
   } = props;
 
   const theme = useTheme()
+  const [ordering, { setOrdering }] = useApi();
   const [, { showToast }] = useToast();
   const [, t] = useLanguage();
   const {control, handleSubmit, formState: {errors}} = useForm();
   const [orientationState] = useDeviceOrientation();
 
+  const [formsStateValues, setFormsStateValues] = useState<any>({ isSubmitted: false })
+
   const onSubmit = (values: any) => {
+    if (values?.project_name) {
+      setOrdering({
+        ...ordering,
+        project: values?.project_name
+      })
+      _setStoreData('project_name', values?.project_name)
+      setFormsStateValues({
+        ...formsStateValues,
+        isSubmitted: true,
+        values
+      })
+      return
+    }
+
     handleButtonLoginClick(values);
   };
 
@@ -73,9 +93,22 @@ const LoginFormUI = (props: LoginParams) => {
           ? formState.result?.result
           : formState.result?.result[0]
       )
+      setFormsStateValues({
+        ...formsStateValues,
+        isSubmitted: false,
+      })
     }
   }, [formState]);
 
+  useEffect(() => {
+    if (ordering.project === null || !formsStateValues.isSubmitted || !useRootPoint) return
+    const values: any = formsStateValues.values
+    if (values?.project_name) {
+      delete values.project_name
+    }
+    handleButtonLoginClick({ ...values })
+  }, [ordering, formsStateValues.isSubmitted])
+
 
   useEffect(() => {
     if (Object.keys(errors)?.length > 0) {
@@ -97,6 +130,33 @@ const LoginFormUI = (props: LoginParams) => {
 
   const InputControllers = (
     <>
+      {useRootPoint && (
+        <Controller
+          control={control}
+          name='project_name'
+          rules={{ required: t(`VALIDATION_ERROR_PROJECT_NAME_REQUIRED`, 'The field project name is required') }}
+          defaultValue=""
+          render={({ onChange, value }: any) => (
+            <OInput
+              name='project_name'
+              placeholder={t('PROJECT_NAME', 'Project Name')}
+              style={styles.inputStyle}
+              value={value}
+              autoCapitalize='none'
+              autoCorrect={false}
+              inputStyle={{textAlign: 'center'}}
+              onChange={(e: any) => {
+                onChange(e?.target?.value);
+                setFormsStateValues({
+                  ...formsStateValues,
+                  isSubmitted: false,
+                })
+              }}
+            />
+          )}
+        />
+      )}
+
       <Controller
         control={control}
         render={({ onChange, value }: any) => (

package/themes/kiosk/src/components/LogoutButton/index.tsx

@@ -0,0 +1,74 @@
+import React, { useEffect } from 'react';
+import { TouchableOpacity } from 'react-native';
+import { LogoutAction, ToastType, useToast, useLanguage, useCustomer, useBusiness, useOrder } from 'ordering-components/native';
+
+import { OIcon } from '../shared';
+import { useTheme } from 'styled-components/native';
+import { _clearStoreData, _retrieveStoreData } from '../../../../../src/providers/StoreUtil'
+
+const LogoutButtonUI = (props: any) => {
+  const { handleLogoutClick, formState, ButtonUI } = props
+
+  const [theme] = useTheme();
+  const [, { setStateValues }] = useOrder();
+  const [, { showToast }] = useToast();
+  const [, t] = useLanguage();
+  const [, { deleteUserCustomer }] = useCustomer();
+  const [, { setBusiness }] = useBusiness();
+
+  const handleClick = async () => {
+    const data = await _retrieveStoreData('notification_state');
+    const res = await handleLogoutClick(data);
+    if (res) {
+      _clearStoreData({ excludedKeys: ['isTutorial'] })
+      deleteUserCustomer(true)
+      setBusiness({})
+      setStateValues({
+        options: {
+          moment: null
+        },
+        carts: {},
+      })
+    }
+  }
+
+  useEffect(() => {
+    if (!formState.loading && formState.result?.error) {
+      formState.result?.result && showToast(
+        ToastType.Error,
+        typeof formState.result?.result === 'string'
+          ? formState.result?.result
+          : formState.result?.result[0]
+      )
+    }
+  }, [formState])
+
+  return (
+    ButtonUI ? (
+      <ButtonUI onPress={() => handleClick()} />
+    ) : (
+      <TouchableOpacity
+        onPress={() => handleClick()}
+        style={{ flexDirection: 'row', alignItems: 'center' }}
+      >
+        <OIcon
+          src={theme.images.general.menulogout}
+          width={24}
+          height={24}
+          color={theme.colors.disabledContrast}
+        />
+      </TouchableOpacity>
+    )
+  )
+}
+
+export const LogoutButton = (props: any) => {
+  const logoutProps = {
+    ...props,
+    isNative: true,
+    UIComponent: LogoutButtonUI
+  }
+  return (
+    <LogoutAction {...logoutProps} />
+  )
+}

package/themes/kiosk/src/types/index.d.ts

@@ -80,6 +80,7 @@ export interface LoginParams {
   handleButtonLoginClick?: any;
   handleSendVerifyCode?: any;
   handleCheckPhoneCode?: any;
+  useRootPoint?: any;
 }
 
 export interface ProductItemAccordionParams {

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { StyleSheet, View, TouchableOpacity } from 'react-native';
 import { useUtils, useOrder, useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
@@ -7,6 +7,12 @@ import { BusinessBasicInformationParams } from '../../types';
 import { convertHoursToMinutes } from '../../utils';
 import { BusinessInformation } from '../BusinessInformation';
 import { BusinessReviews } from '../BusinessReviews';
+import dayjs from 'dayjs';
+import timezone from 'dayjs/plugin/timezone';
+import isBetween from 'dayjs/plugin/isBetween';
+
+dayjs.extend(timezone);
+dayjs.extend(isBetween);
 
 import {
 	BusinessContainer,
@@ -45,6 +51,31 @@ export const BusinessBasicInformation = (
 		return _types.join(', ');
 	};
 
+	
+	useEffect(() => {
+		if (businessState?.loading) return
+		let timeout: any = null
+		const currentDate = dayjs().tz(businessState?.business?.timezone)
+		let lapse = null
+		if (businessState?.business?.today?.enabled) {
+			lapse = businessState?.business?.today?.lapses?.find((lapse: any) => {
+				const from = currentDate.hour(lapse.open.hour).minute(lapse.open.minute)
+				const to = currentDate.hour(lapse.close.hour).minute(lapse.close.minute)
+				return currentDate.unix() >= from.unix() && currentDate.unix() <= to.unix()
+			})
+		}
+		if (lapse) {
+		  const to = currentDate.hour(lapse.close.hour).minute(lapse.close.minute)
+		  const timeToClose = (to.unix() - currentDate.unix()) * 1000
+		  timeout = setTimeout(() => {
+			navigation.navigate('BusinessPreorder', { business: businessState?.business, handleBusinessClick: () => navigation?.goBack() })
+		  }, timeToClose)
+		}
+		return () => {
+		  timeout && clearTimeout(timeout)
+		}
+	  }, [businessState?.business])
+
 	return (
 		<BusinessContainer>
 			<BusinessHeader

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

@@ -20,7 +20,7 @@ import { Platform, StyleSheet, View } from 'react-native';
 import { BusinessInformationParams } from '../../types';
 import { GoogleMap } from '../GoogleMap';
 import { WebView } from 'react-native-webview';
-
+import { formatUrlVideo } from '../../utils'
 const BusinessInformationUI = (props: BusinessInformationParams) => {
 	const { businessState, businessSchedule, businessLocation } = props;
 
@@ -152,7 +152,12 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
 											style={{ width: 210, height: 127, borderRadius: 7.6 }}
 											javaScriptEnabled={true}
 											domStorageEnabled={true}
-											source={{ uri: v.video }}
+											source={{ 
+												html: `
+													<iframe width='80%' height='80%' src="${formatUrlVideo(v.video)}" frameBorder='0' allow='autoplay; encrypted-media' allowFullScreen />
+												`, 
+											}}
+											mediaPlaybackRequiresUserAction={true}
 										/>
 									))}
 								</MediaWrapper>

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

@@ -300,15 +300,14 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					</View>
 				</OrderControlContainer>
 			</HeaderWrapper>
-			{
-				isFocused && (
-					<OrderProgressWrapper>
-						<OrderProgress
-							{...props}
-						/>
-					</OrderProgressWrapper>
-				)
-			}
+
+			<OrderProgressWrapper>
+				<OrderProgress
+					{...props}
+					isFocused={isFocused}
+				/>
+			</OrderProgressWrapper>
+
 			{
 				!businessId && !props.franchiseId && featuredBusiness && featuredBusiness.length > 0 && (
 					<FeaturedWrapper>

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

@@ -207,10 +207,10 @@ const CartUI = (props: any) => {
                       <OText size={12} lineHeight={18}>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
                     )}
                     <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_1' })}>
-                      <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                      <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
                     </TouchableOpacity>
                     <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
-                      <AntIcon name='closecircle' size={18} color={theme.colors.primary} />
+                      <AntIcon name='closecircle' size={16} color={theme.colors.primary} />
                     </TouchableOpacity>
                   </OSRow>
                   <OText size={12} lineHeight={18}>
@@ -239,7 +239,7 @@ const CartUI = (props: any) => {
                       {`(${verifyDecimals(tax?.rate, parseNumber)}%)`}{' '}
                     </OText>
                     <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: tax, type: 'tax' })} >
-                      <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                      <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
                     </TouchableOpacity>
                   </OSRow>
                   <OText size={12} lineHeight={18}>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0)}</OText>
@@ -255,7 +255,7 @@ const CartUI = (props: any) => {
                       ({parsePrice(fee?.fixed)} + {fee?.percentage}%){' '}
                     </OText>
                     <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee, type: 'fee' })} >
-                      <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                      <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
                     </TouchableOpacity>
                   </OSRow>
                   <OText size={12} lineHeight={18}>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0)}</OText>
@@ -271,10 +271,10 @@ const CartUI = (props: any) => {
                       <OText size={12} lineHeight={18}>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
                     )}
                     <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_3' })}>
-                      <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                      <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
                     </TouchableOpacity>
                     <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
-                      <AntIcon name='closecircle' size={18} color={theme.colors.primary} />
+                      <AntIcon name='closecircle' size={16} color={theme.colors.primary} />
                     </TouchableOpacity>
                   </OSRow>
                   <OText size={12} lineHeight={18}>
@@ -298,10 +298,10 @@ const CartUI = (props: any) => {
                       <OText size={12} lineHeight={18}>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
                     )}
                     <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_2' })}>
-                      <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                      <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
                     </TouchableOpacity>
                     <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
-                      <AntIcon name='closecircle' size={18} color={theme.colors.primary} />
+                      <AntIcon name='closecircle' size={16} color={theme.colors.primary} />
                     </TouchableOpacity>
                   </OSRow>
                   <OText size={12} lineHeight={18}>

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

@@ -39,7 +39,7 @@ import {
 	ChCart,
 	DeliveryOptionsContainer,
 	DeliveryOptionItem,
-  WalletPaymentOptionContainer
+	WalletPaymentOptionContainer
 } from './styles';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 
@@ -133,7 +133,7 @@ const CheckoutUI = (props: any) => {
 	const [webviewPaymethod, setWebviewPaymethod] = useState<any>(null)
 
 
-  	const isWalletEnabled = configs?.wallet_enabled?.value === '1' && (configs?.wallet_cash_enabled?.value === '1' || configs?.wallet_credit_point_enabled?.value === '1')
+	const isWalletEnabled = configs?.wallet_enabled?.value === '1' && (configs?.wallet_cash_enabled?.value === '1' || configs?.wallet_credit_point_enabled?.value === '1')
 
 	const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
 		? JSON.parse(configs?.driver_tip_options?.value) || []
@@ -145,7 +145,7 @@ const CheckoutUI = (props: any) => {
 
 	const deliveryOptions = instructionsOptions?.result && instructionsOptions?.result?.filter((option: any) => option?.enabled)?.map((option: any) => {
 		return {
-			value: option?.id, key: option?.id, label: t(option?.name.toUpperCase().replace(/\s/g, '_'), option?.name) 
+			value: option?.id, key: option?.id, label: t(option?.name.toUpperCase().replace(/\s/g, '_'), option?.name)
 		}
 	})
 
@@ -169,7 +169,7 @@ const CheckoutUI = (props: any) => {
 
 	const onFailPaypal = async () => {
 		if (showGateway.closedByUser === true) {
-		  await confirmCart(cart.uuid)
+			await confirmCart(cart.uuid)
 		}
 	}
 	const changeDeliveryOption = (option: any) => {
@@ -283,14 +283,14 @@ const CheckoutUI = (props: any) => {
 					<ChSection>
 						<ChBusinessDetails>
 							{
-								(businessDetails?.loading || cartState.loading) &&
+								(businessDetails?.loading || cartState.loading || !businessDetails?.business || Object.values(businessDetails?.business).length === 0) &&
 								!businessDetails?.error &&
 								(
 									<Placeholder Animation={Fade}>
 										<PlaceholderLine height={20} width={70} />
-										<PlaceholderLine height={15} width={60} />
-										<PlaceholderLine height={15} width={60} />
-										<PlaceholderLine height={15} width={80} style={{ marginBottom: 20 }} />
+										<PlaceholderLine height={10} width={60} />
+										<PlaceholderLine height={10} width={60} />
+										<PlaceholderLine height={10} width={80} style={{ marginBottom: 20 }} />
 									</Placeholder>
 								)}
 							{
@@ -337,9 +337,9 @@ const CheckoutUI = (props: any) => {
 							{cartState.loading ? (
 								<Placeholder Animation={Fade}>
 									<PlaceholderLine height={20} width={70} />
-									<PlaceholderLine height={15} width={60} />
-									<PlaceholderLine height={15} width={60} />
-									<PlaceholderLine height={15} width={80} style={{ marginBottom: 20 }} />
+									<PlaceholderLine height={10} width={60} />
+									<PlaceholderLine height={10} width={60} />
+									<PlaceholderLine height={10} width={80} style={{ marginBottom: 20 }} />
 								</Placeholder>
 							) : (
 								<UserDetails
@@ -358,54 +358,66 @@ const CheckoutUI = (props: any) => {
 						<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40 }} />
 					</ChSection>
 
-					{!cartState.loading && deliveryOptionSelected !== undefined && options?.type === 1 && (
+					{options?.type === 1 && (
 						<DeliveryOptionsContainer>
-							<OText size={16}>{t('DELIVERY_OPTIONS', 'Delivery options')}</OText>
-							<View
-								style={{
-									backgroundColor: theme.colors.inputDisabled,
-									borderRadius: 7.5,
-									marginBottom: 20,
-									flex: 1
-								}}>
-								<Picker
-									countryCode={undefined}
-									visible={isDeliveryOptionModalVisible}
-									onClose={() => setIsDeliveryOptionModalVisible(false)}
-									withCountryNameButton
-									renderFlagButton={() => (
-										<TouchableOpacity onPress={() => setIsDeliveryOptionModalVisible(true)}>
-											<DeliveryOptionItem backgroundColor={theme?.colors?.inputDisabled}>
-												<OText
-													size={14}
-												>
-													{deliveryOptions.find((option: any) => option.value === deliveryOptionSelected).label}
-												</OText>
-												<MaterialIcons name='keyboard-arrow-down' style={styles.icon} />
-											</DeliveryOptionItem>
-										</TouchableOpacity>
-									)}
-									flatListProps={{
-										keyExtractor: (item: any) => item.value,
-										data: deliveryOptions || [],
-										renderItem: ({ item }: any) => (
-											<TouchableOpacity
-												onPress={() => changeDeliveryOption(item.value)}
-												disabled={
-													deliveryOptionSelected === item.value
-												}
-											>
-												<DeliveryOptionItem backgroundColor={deliveryOptionSelected === item.value ? theme.colors.inputDisabled : 'white'}>
-													<OText>
-														{item.label}
-													</OText>
-												</DeliveryOptionItem>
-											</TouchableOpacity>
-										)
-									}}
-								/>
-							</View>
-							<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40 }} />
+							{cartState.loading || deliveryOptionSelected === undefined ? (
+								<View style={{ height: 110 }}>
+									<Placeholder Animation={Fade}>
+										<PlaceholderLine height={20} width={70} />
+										<PlaceholderLine height={40} width={100} />
+									</Placeholder>
+								</View>
+							) : (
+								<>
+									<OText size={16}>{t('DELIVERY_OPTIONS', 'Delivery options')}</OText>
+									<View
+										style={{
+											backgroundColor: theme.colors.inputDisabled,
+											borderRadius: 7.5,
+											marginBottom: 20,
+											flex: 1
+										}}>
+										<Picker
+											countryCode={undefined}
+											visible={isDeliveryOptionModalVisible}
+											onClose={() => setIsDeliveryOptionModalVisible(false)}
+											withCountryNameButton
+											renderFlagButton={() => (
+												<TouchableOpacity onPress={() => setIsDeliveryOptionModalVisible(true)}>
+													<DeliveryOptionItem backgroundColor={theme?.colors?.inputDisabled}>
+														<OText
+															size={14}
+														>
+															{deliveryOptions.find((option: any) => option.value === deliveryOptionSelected).label}
+														</OText>
+														<MaterialIcons name='keyboard-arrow-down' style={styles.icon} />
+													</DeliveryOptionItem>
+												</TouchableOpacity>
+											)}
+											flatListProps={{
+												keyExtractor: (item: any) => item.value,
+												data: deliveryOptions || [],
+												renderItem: ({ item }: any) => (
+													<TouchableOpacity
+														onPress={() => changeDeliveryOption(item.value)}
+														disabled={
+															deliveryOptionSelected === item.value
+														}
+													>
+														<DeliveryOptionItem backgroundColor={deliveryOptionSelected === item.value ? theme.colors.inputDisabled : 'white'}>
+															<OText>
+																{item.label}
+															</OText>
+														</DeliveryOptionItem>
+													</TouchableOpacity>
+												)
+											}}
+										/>
+									</View>
+									<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40 }} />
+								</>
+							)}
+
 						</DeliveryOptionsContainer>
 					)}
 
@@ -436,7 +448,7 @@ const CheckoutUI = (props: any) => {
                   height={80}
                   borderRadius={80}
                 />
-                <View style={{ marginLeft: 15, width: '85%' }}>
+                <View style={{ marginLeft: 10, width: '85%' }}>
                   <OText size={22} numberOfLines={2} ellipsizeMode='tail' style={{ width: '85%' }}>
                     {businessName || businessDetails?.business?.name}
                   </OText>
@@ -530,14 +542,14 @@ const CheckoutUI = (props: any) => {
 						</ChSection>
 					)}
 
-          {!cartState.loading && cart && isWalletEnabled && (
-            <WalletPaymentOptionContainer>
-              <PaymentOptionWallet
-                cart={cart}
-                businessId={cart?.business_id}
-              />
-            </WalletPaymentOptionContainer>
-          )}
+					{!cartState.loading && cart && isWalletEnabled && (
+						<WalletPaymentOptionContainer>
+							<PaymentOptionWallet
+								cart={cart}
+								businessId={cart?.business_id}
+							/>
+						</WalletPaymentOptionContainer>
+					)}
 
 
 					{!cartState.loading && cart && (
@@ -571,7 +583,7 @@ const CheckoutUI = (props: any) => {
 										<OrderSummary
 											cart={cart}
 											isCartPending={cart?.status === 2}
-                      						onNavigationRedirect={onNavigationRedirect}
+											onNavigationRedirect={onNavigationRedirect}
 										/>
 									</>
 								)}
@@ -580,7 +592,7 @@ const CheckoutUI = (props: any) => {
 					)}
 
 					{!cartState.loading && cart && (
-            <View>
+						<View>
 							<ChErrors style={{ marginBottom: 0 }}>
 								{!cart?.valid_address && cart?.status !== 2 && (
 									<OText
@@ -641,7 +653,7 @@ const CheckoutUI = (props: any) => {
 					}
 					btnRightValueShow
 					btnRightValue={parsePrice(cart?.total)}
-					iosBottom={20}
+					iosBottom={30}
 				/>
 			)}
 			{webviewPaymethod?.gateway === 'paypal' && showGateway.open && (

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

@@ -102,7 +102,8 @@ const LoginFormUI = (props: LoginParams) => {
 		},
 	});
 
-	const inputRef = useRef<any>({});
+	const emailRef = useRef<any>({});
+	const passwordRef = useRef<any>({});
 
 	const handleChangeTab = (val: string) => {
 		props.handleChangeTab(val);
@@ -299,8 +300,9 @@ const LoginFormUI = (props: LoginParams) => {
 										type="email-address"
 										autoCompleteType="email"
 										returnKeyType="next"
-										onSubmitEditing={() => inputRef.current?.focus()}
+										onSubmitEditing={() => passwordRef.current?.focus()}
 										blurOnSubmit={false}
+										forwardRef={emailRef}
 									/>
 								)}
 								name="email"
@@ -327,7 +329,7 @@ const LoginFormUI = (props: LoginParams) => {
 									handleData={(val: any) => setPhoneInputData(val)}
 									textInputProps={{
 										returnKeyType: 'next',
-										onSubmitEditing: () => inputRef?.current?.focus?.(),
+										onSubmitEditing: () => passwordRef?.current?.focus?.(),
 									}}
 								/>
 							</View>
@@ -359,7 +361,7 @@ const LoginFormUI = (props: LoginParams) => {
 										)
 									}
 									value={value}
-									forwardRef={inputRef}
+									forwardRef={passwordRef}
 									onChange={(val: any) => onChange(val)}
 									returnKeyType="done"
 									onSubmitEditing={handleSubmit(onSubmit)}