ordering-ui-react-native 0.22.76 → 0.22.77-release

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

@@ -9,31 +9,31 @@ import ReCaptcha from '@fatnlazycat/react-native-recaptcha-v3'
 import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 
 import {
-	LoginForm as LoginFormController,
-	useLanguage,
-	useConfig,
-	useSession,
-	ToastType,
-	useToast,
+  LoginForm as LoginFormController,
+  useLanguage,
+  useConfig,
+  useSession,
+  ToastType,
+  useToast,
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { FacebookLogin } from '../FacebookLogin';
 import { VerifyPhone } from '../../../../../src/components/VerifyPhone';
 import { OModal } from '../../../../../src/components/shared';
 import {
-	Container,
-	ButtonsWrapper,
-	LoginWith,
-	FormSide,
-	FormInput,
-	OTabs,
-	OTab,
-	SocialButtons,
-	OrSeparator,
-	LineSeparator,
-	SkeletonWrapper,
-	TabBtn,
-	RecaptchaButton
+  Container,
+  ButtonsWrapper,
+  LoginWith,
+  FormSide,
+  FormInput,
+  OTabs,
+  OTab,
+  SocialButtons,
+  OrSeparator,
+  LineSeparator,
+  SkeletonWrapper,
+  TabBtn,
+  RecaptchaButton
 } from './styles';
 
 import NavBar from '../NavBar';
@@ -48,840 +48,871 @@ import { TouchableOpacity } from 'react-native-gesture-handler';
 import Alert from '../../../../../src/providers/AlertProvider'
 
 const LoginFormUI = (props: LoginParams) => {
-	const {
-		loginTab,
-		formState,
-		navigation,
-		useLoginByEmail,
-		useLoginByCellphone,
-		useLoginOtp,
-		loginButtonText,
-		forgotButtonText,
-		verifyPhoneState,
-		checkPhoneCodeState,
-		registerButtonText,
-		setCheckPhoneCodeState,
-		handleButtonLoginClick,
-		handleSendVerifyCode,
-		handleCheckPhoneCode,
-		onNavigationRedirect,
-		notificationState,
-		handleReCaptcha,
-		enableReCaptcha,
-		otpType,
-		setOtpType,
-		generateOtpCode,
-		useLoginOtpEmail,
-		useLoginOtpCellphone,
-		isGuest
-	} = props;
-
-	const [, { showToast }] = useToast();
-	const [, t] = useLanguage();
-	const [{ configs }] = useConfig();
-	const [, { login }] = useSession();
-	const { control, handleSubmit, errors, reset, register, setValue } = useForm();
-	const [passwordSee, setPasswordSee] = useState(false);
-	const [isLoadingVerifyModal, setIsLoadingVerifyModal] = useState(false);
-	const [isModalVisible, setIsModalVisible] = useState(false);
-	const [isFBLoading, setIsFBLoading] = useState(false);
-	const [willVerifyOtpState, setWillVerifyOtpState] = useState(false)
-	const [phoneInputData, setPhoneInputData] = useState({
-		error: '',
-		phone: {
-			country_phone_code: null,
-			cellphone: null,
-		},
-	});
-	const [recaptchaConfig, setRecaptchaConfig] = useState<any>({})
-	const [recaptchaVerified, setRecaptchaVerified] = useState(false)
-	const [alertState, setAlertState] = useState({ open: false, title: '', content: [] })
-	const [tabLayouts, setTabLayouts] = useState<any>({})
-	const [otpError, setOtpError] = useState(null)
-	const tabsRef = useRef<any>(null)
-	const enabledPoweredByOrdering = configs?.powered_by_ordering_module?.value
-	const theme = useTheme();
-	const isOtpEmail = loginTab === 'otp' && otpType === 'email'
-	const isOtpCellphone = loginTab === 'otp' && otpType === 'cellphone'
-
-	const [isCheckingCode, setCheckingCode] = useState(false)
-
-	const googleLoginEnabled = configs?.google_login_enabled?.value === '1' || !configs?.google_login_enabled?.enabled
-	const facebookLoginEnabled = configs?.facebook_login_enabled?.value === '1' || !configs?.facebook_login_enabled?.enabled
-	const appleLoginEnabled = Platform.OS === 'ios' && (configs?.apple_login_enabled?.value === '1' || !configs?.apple_login_enabled?.enabled)
-
-	const loginStyle = StyleSheet.create({
-		btnOutline: {
-			backgroundColor: '#FFF',
-			color: theme.colors.primary,
-			borderRadius: 7.6,
-		},
-		inputStyle: {
-			marginBottom: 28,
-			borderWidth: 1,
-			// borderColor: theme.colors.border,
-			borderRadius: 7.6,
-		},
-		line: {
-			height: 1,
-			backgroundColor: theme.colors.border,
-			flexGrow: 1,
-			marginBottom: 7,
-		},
-		recaptchaIcon: {
-			width: 100,
-			height: 100,
-		},
-		borderStyleBase: {
-			width: 30,
-			height: 45
-		},
-
-		borderStyleHighLighted: {
-			borderColor: "#03DAC6",
-		},
-
-		underlineStyleBase: {
-			width: 45,
-			height: 60,
-			borderWidth: 1,
-			fontSize: 16
-		},
-
-		underlineStyleHighLighted: {
-			borderColor: theme.colors.primary,
-			color: theme.colors.primary,
-			fontSize: 16
-		},
-	});
-
-	const emailRef = useRef<any>({});
-	const passwordRef = useRef<any>({});
-	const recaptchaRef = useRef<any>({});
-
-	const handleChangeTab = (val: string, otpType?: string) => {
-		props.handleChangeTab(val);
-		setPasswordSee(false);
-		handleCategoryScroll(otpType ? `${val}_${otpType}` : val)
-	};
-
-	const vibrateApp = (impact?: string) => {
-		const options = {
-			enableVibrateFallback: true,
-			ignoreAndroidSystemSettings: false
-		};
-		ReactNativeHapticFeedback.trigger(impact || "impactLight", options);
-	}
-
-	const onSubmit = (values?: any) => {
-		Keyboard.dismiss();
-		if (loginTab === 'otp') {
-			if (phoneInputData.error && (loginTab !== 'otp' || (otpType === 'cellphone' && loginTab === 'otp'))) {
-				showToast(ToastType.Error, t('INVALID_PHONE_NUMBER', 'Invalid phone number'));
-				vibrateApp()
-				return
-			}
-			if (otpType === 'cellphone' && phoneInputData?.error && !phoneInputData?.phone?.cellphone) {
-				showToast(ToastType.Error, t('PHONE_NUMBER_REQUIRED', 'Phone number is required'));
-				return
-			}
-			if (loginTab === 'otp') {
-				generateOtpCode({
-					...values,
-					...phoneInputData.phone
-				})
-			}
-			setWillVerifyOtpState(true)
-		} else {
-			if (phoneInputData.error) {
-				showToast(ToastType.Error, phoneInputData.error);
-				vibrateApp()
-				return;
-			}
-			handleButtonLoginClick({
-				...values,
-				...phoneInputData.phone,
-			});
-		}
-
-	};
-	const handleVerifyCodeClick = () => {
-		if (phoneInputData.error) {
-			showToast(ToastType.Error, phoneInputData.error);
-			vibrateApp()
-			return;
-		}
-		if (
-			!phoneInputData.error &&
-			!phoneInputData.phone.country_phone_code &&
-			!phoneInputData.phone.cellphone
-		) {
-			showToast(
-				ToastType.Error,
-				t(
-					'VALIDATION_ERROR_MOBILE_PHONE_REQUIRED',
-					'The field Mobile phone is required.',
-				),
-			);
-			vibrateApp()
-			return;
-		}
-		handleSendVerifyCode && handleSendVerifyCode(phoneInputData.phone);
-		setIsLoadingVerifyModal(true);
-	};
-
-	const handleSuccessFacebook = (user: any) => {
-		login({
-			user,
-			token: user.session.access_token,
-		});
-	};
-
-	const handleChangeInputEmail = (value: string, onChange: any) => {
-		onChange(value.toLowerCase().trim().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''));
-	};
-
-	const handleOpenRecaptcha = () => {
-		setRecaptchaVerified(false)
-		if (!recaptchaConfig?.siteKey) {
-			showToast(ToastType.Error, t('NO_RECAPTCHA_SITE_KEY', 'The config doesn\'t have recaptcha site key'));
-			vibrateApp()
-			return
-		}
-		if (!recaptchaConfig?.baseUrl) {
-			showToast(ToastType.Error, t('NO_RECAPTCHA_BASE_URL', 'The config doesn\'t have recaptcha base url'));
-			vibrateApp()
-			return
-		}
-
-		recaptchaRef.current.open()
-	}
-
-	const onRecaptchaVerify = (token: any) => {
-		setRecaptchaVerified(true)
-		handleReCaptcha({ code: token, version: recaptchaConfig?.version })
-	}
-
-	const handleChangeOtpType = (type: string) => {
-		handleChangeTab('otp', type)
-		setOtpType(type)
-	}
-
-	const handleLoginOtp = async (code: string) => {
-		if (!code) return
-		const logged = await handleButtonLoginClick({ code })
-		setCheckingCode(false)
-		if (logged) {
-			setWillVerifyOtpState(false)
-		} else {
-			setOtpError(t('OTP_CODE_INCORRECT', 'Otp code incorrect'))
-		}
-	}
-
-	const closeAlert = () => {
-		setAlertState({
-			open: false,
-			title: '',
-			content: []
-		})
-	}
-
-	const handleCategoryScroll = (opc: string) => {
-		tabsRef.current.scrollTo({
-			x: tabLayouts?.[opc]?.x - 40,
-			animated: true
-		})
-	}
-
-	const handleOnLayout = (event: any, opc: string) => {
-		const _tabLayouts = { ...tabLayouts }
-		const categoryKey = opc
-		_tabLayouts[categoryKey] = event.nativeEvent.layout
-		setTabLayouts(_tabLayouts)
-	}
-
-	useEffect(() => {
-		if (configs && Object.keys(configs).length > 0 && enableReCaptcha) {
-			if (configs?.security_recaptcha_type?.value === 'v3' &&
-				configs?.security_recaptcha_score_v3?.value > 0 &&
-				configs?.security_recaptcha_site_key_v3?.value
-			) {
-				setRecaptchaConfig({
-					version: 'v3',
-					siteKey: configs?.security_recaptcha_site_key_v3?.value || null,
-					baseUrl: configs?.security_recaptcha_base_url?.value || null
-				})
-				return
-			}
-			if (configs?.security_recaptcha_site_key?.value) {
-				setRecaptchaConfig({
-					version: 'v2',
-					siteKey: configs?.security_recaptcha_site_key?.value || null,
-					baseUrl: configs?.security_recaptcha_base_url?.value || null
-				})
-			}
-		}
-	}, [configs, enableReCaptcha])
-
-	useEffect(() => {
-		if (!formState.loading && formState.result?.error) {
-			if (formState.result?.result?.[0] === 'ERROR_AUTH_VERIFICATION_CODE') {
-				setRecaptchaVerified(false)
-				setRecaptchaConfig({
-					version: 'v2',
-					siteKey: configs?.security_recaptcha_site_key?.value || null,
-					baseUrl: configs?.security_recaptcha_base_url?.value || null
-				})
-				showToast(ToastType.Info, t('TRY_AGAIN', 'Please try again'))
-				vibrateApp()
-				return
-			}
-			formState.result?.result &&
-				showToast(
-					ToastType.Error,
-					typeof formState.result?.result === 'string'
-						? formState.result?.result
-						: formState.result?.result[0],
-				);
-			formState.result?.result && vibrateApp()
-		}
-	}, [formState]);
-
-	useEffect(() => {
-		if (verifyPhoneState && !verifyPhoneState?.loading) {
-			if (verifyPhoneState.result?.error) {
-				const message =
-					typeof verifyPhoneState?.result?.result === 'string'
-						? verifyPhoneState?.result?.result
-						: verifyPhoneState?.result?.result[0];
-				verifyPhoneState.result?.result && showToast(ToastType.Error, message);
-				verifyPhoneState.result?.result && vibrateApp();
-				setIsLoadingVerifyModal(false);
-				return;
-			}
-
-			const okResult = verifyPhoneState.result?.result === 'OK';
-			if (okResult) {
-				!isModalVisible && setIsModalVisible(true);
-				setIsLoadingVerifyModal(false);
-			}
-		}
-	}, [verifyPhoneState]);
-
-	useEffect(() => {
-		if (phoneInputData?.phone?.cellphone) setValue('cellphone', phoneInputData?.phone?.cellphone, '')
-		else setValue('cellphone', '')
-	}, [phoneInputData?.phone?.cellphone])
-
-	useEffect(() => {
-		register('cellphone', {
-			required: loginTab === 'cellphone'
-				? t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Mobile phone is required').replace('_attribute_', t('CELLPHONE', 'Cellphone'))
-				: null
-		})
-	}, [register])
-
-	useEffect(() => {
-		reset()
-	}, [loginTab])
-
-	useEffect(() => {
-		if (checkPhoneCodeState?.result?.error) {
-			setAlertState({
-				open: true,
-				content: t(checkPhoneCodeState?.result?.error, checkPhoneCodeState?.result?.error),
-				title: ''
-			})
-		}
-	}, [checkPhoneCodeState])
-
-	useEffect(() => {
-		if (!!Object.values(errors)?.length) vibrateApp()
-	}, [errors])
-
-	return (
-		<Container>
-			{isGuest ? (
-				<OText style={{ textAlign: 'center', marginBottom: 10 }} size={18}>{t('LOGIN', 'Login')}</OText>
-			) : (
-				<NavBar
-					title={t('LOGIN', 'Login')}
-					titleAlign={'center'}
-					onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
-					showCall={false}
-					btnStyle={{ paddingLeft: 0 }}
-					titleWrapStyle={{ paddingHorizontal: 0 }}
-					titleStyle={{ marginRight: 0, marginLeft: 0 }}
-				/>
-			)}
-			<FormSide>
-				{(Number(useLoginByEmail) + Number(useLoginByCellphone) + Number(useLoginOtpEmail) + Number(useLoginOtpCellphone) > 1) && (
-					<LoginWith>
-						<OTabs
-							horizontal
-							showsHorizontalScrollIndicator={false}
-							ref={tabsRef}
-						>
-							{useLoginByEmail && (
-								<TabBtn
-									onPress={() => handleChangeTab('email')}
-									onLayout={(event: any) => handleOnLayout(event, 'email')}
-								>
-									<OTab
-										style={{
-											borderBottomColor:
-												loginTab === 'email'
-													? theme.colors.textNormal
-													: theme.colors.border,
-										}}>
-										<OText
-											size={14}
-											color={
-												loginTab === 'email'
-													? theme.colors.textNormal
-													: theme.colors.disabled
-											}
-											weight={loginTab === 'email' ? 'bold' : 'normal'}>
-											{t('LOGIN_BY_EMAIL', 'by Email')}
-										</OText>
-									</OTab>
-								</TabBtn>
-							)}
-							{useLoginByCellphone && (
-								<TabBtn
-									onPress={() => handleChangeTab('cellphone')}
-									onLayout={(event: any) => handleOnLayout(event, 'cellphone')}
-								>
-									<OTab
-										style={{
-											borderBottomColor:
-												loginTab === 'cellphone'
-													? theme.colors.textNormal
-													: theme.colors.border,
-										}}>
-										<OText
-											size={14}
-											color={
-												loginTab === 'cellphone'
-													? theme.colors.textNormal
-													: theme.colors.disabled
-											}
-											weight={loginTab === 'cellphone' ? 'bold' : 'normal'}>
-											{t('LOGIN_BY_PHONE', 'by Phone')}
-										</OText>
-									</OTab>
-								</TabBtn>
-							)}
-							{useLoginOtpEmail && (
-								<TabBtn
-									onPress={() => handleChangeOtpType('email')}
-									onLayout={(event: any) => handleOnLayout(event, 'otp_email')}
-								>
-									<OTab
-										style={{
-											borderBottomColor:
-												isOtpEmail
-													? theme.colors.textNormal
-													: theme.colors.border,
-										}}>
-										<OText
-											size={14}
-											color={
-												isOtpEmail
-													? theme.colors.textNormal
-													: theme.colors.disabled
-											}
-											weight={isOtpEmail ? 'bold' : 'normal'}>
-											{t('BY_OTP_EMAIL', 'By Otp Email')}
-										</OText>
-									</OTab>
-								</TabBtn>
-							)}
-							{useLoginOtpCellphone && (
-								<TabBtn
-									onPress={() => handleChangeOtpType('cellphone')}
-									onLayout={(event: any) => handleOnLayout(event, 'otp_cellphone')}
-								>
-									<OTab
-										style={{
-											borderBottomColor:
-												isOtpCellphone
-													? theme.colors.textNormal
-													: theme.colors.border,
-										}}>
-										<OText
-											size={14}
-											color={
-												isOtpCellphone
-													? theme.colors.textNormal
-													: theme.colors.disabled
-											}
-											weight={isOtpCellphone ? 'bold' : 'normal'}>
-											{t('BY_OTP_PHONE', 'By Otp Phone')}
-										</OText>
-									</OTab>
-								</TabBtn>
-							)}
-						</OTabs>
-					</LoginWith>
-				)}
-
-				{(useLoginByCellphone || useLoginByEmail || useLoginOtp) && (
-					<FormInput>
-						{((useLoginByEmail && loginTab === 'email') || (loginTab === 'otp' && otpType === 'email')) && (
-							<>
-								{errors?.email && (
-									<OText
-										size={14}
-										color={theme.colors.danger5}
-										weight={'normal'}>
-										{errors?.email?.message}{errors?.email?.type === 'required' && '*'}
-									</OText>
-								)}
-								<Controller
-									control={control}
-									render={({ onChange, value }: any) => (
-										<OInput
-											placeholder={t('EMAIL', 'Email')}
-											style={loginStyle.inputStyle}
-											icon={theme.images.general.email}
-											onChange={(e: any) => {
-												handleChangeInputEmail(e, onChange);
-											}}
-											value={value}
-											autoCapitalize="none"
-											autoCorrect={false}
-											type="email-address"
-											autoCompleteType="email"
-											returnKeyType="next"
-											onSubmitEditing={() => passwordRef.current?.focus()}
-											blurOnSubmit={false}
-											forwardRef={emailRef}
-											borderColor={errors?.email ? theme.colors.danger5 : theme.colors.border}
-										/>
-									)}
-									name="email"
-									rules={{
-										required: {
-											value: true,
-											message: t(
-												'VALIDATION_ERROR_EMAIL_REQUIRED',
-												'The field Email is required',
-											).replace('_attribute_', t('EMAIL', 'Email'))
-										},
-										pattern: {
-											value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
-											message: t(
-												'INVALID_ERROR_EMAIL',
-												'Invalid email address',
-											).replace('_attribute_', t('EMAIL', 'Email')),
-										}
-									}}
-									defaultValue=""
-								/>
-							</>
-
-						)}
-						{((useLoginByCellphone && loginTab === 'cellphone') || (loginTab === 'otp' && otpType === 'cellphone')) && (
-							<View style={{ marginBottom: 28 }}>
-								<PhoneInputNumber
-									data={phoneInputData}
-									handleData={(val: any) => setPhoneInputData(val)}
-									textInputProps={{
-										returnKeyType: 'next',
-										onSubmitEditing: () => passwordRef?.current?.focus?.(),
-									}}
-									isStartValidation={errors?.cellphone}
-								/>
-							</View>
-						)}
-						{errors?.password && (
-							<OText
-								size={14}
-								color={theme.colors.danger5}
-								weight={'normal'}>
-								{errors?.password?.message}{errors?.password?.type === 'required' && '*'}
-							</OText>
-						)}
-						{loginTab !== 'otp' && (
-
-							<Controller
-								control={control}
-								render={({ onChange, value }: any) => (
-									<OInput
-										isSecured={!passwordSee ? true : false}
-										placeholder={t('PASSWORD', 'Password')}
-										style={{ ...loginStyle.inputStyle, marginBottom: 14 }}
-										icon={theme.images.general.lock}
-										iconCustomRight={
-											!passwordSee ? (
-												<MaterialCommunityIcons
-													name="eye-outline"
-													size={24}
-													onPress={() => setPasswordSee(!passwordSee)}
-													color={theme.colors.disabled}
-												/>
-											) : (
-												<MaterialCommunityIcons
-													name="eye-off-outline"
-													size={24}
-													onPress={() => setPasswordSee(!passwordSee)}
-													color={theme.colors.disabled}
-												/>
-											)
-										}
-										autoCapitalize='none'
-										value={value}
-										forwardRef={passwordRef}
-										onChange={(val: any) => onChange(val)}
-										returnKeyType="done"
-										onSubmitEditing={handleSubmit(onSubmit)}
-										blurOnSubmit
-										borderColor={errors?.password ? theme.colors.danger5 : theme.colors.border}
-									/>
-								)}
-								name="password"
-								rules={{
-									required: {
-										value: true,
-										message: t(
-											'VALIDATION_ERROR_PASSWORD_REQUIRED',
-											'The field Password is required',
-										).replace('_attribute_', t('PASSWORD', 'Password'))
-									}
-								}}
-								defaultValue=""
-							/>
-						)}
-						{onNavigationRedirect && forgotButtonText && loginTab !== 'otp' && (
-							<TouchableOpacity onPress={() => onNavigationRedirect('Forgot')}>
-								<OText size={14} mBottom={18}>
-									{forgotButtonText}
-								</OText>
-							</TouchableOpacity>
-						)}
-
-						{(enableReCaptcha && recaptchaConfig?.version) && (
-							<>
-								{recaptchaConfig?.version === 'v3' ? (
-									<ReCaptcha
-										url={recaptchaConfig?.baseUrl}
-										siteKey={recaptchaConfig?.siteKey}
-										containerStyle={{ height: 40 }}
-										onExecute={onRecaptchaVerify}
-										reCaptchaType={1}
-									/>
-								) : (
-									<>
-										<TouchableOpacity
-											onPress={handleOpenRecaptcha}
-										>
-											<RecaptchaButton>
-												{recaptchaVerified ? (
-													<MaterialCommunityIcons
-														name="checkbox-marked"
-														size={26}
-														color={theme.colors.primary}
-													/>
-												) : (
-													<MaterialCommunityIcons
-														name="checkbox-blank-outline"
-														size={26}
-														color={theme.colors.mediumGray}
-													/>
-												)}
-												<OText size={14} mLeft={8}>{t('VERIFY_ReCAPTCHA', 'Verify reCAPTCHA')}</OText>
-											</RecaptchaButton>
-										</TouchableOpacity>
-										<Recaptcha
-											ref={recaptchaRef}
-											siteKey={recaptchaConfig?.siteKey}
-											baseUrl={recaptchaConfig?.baseUrl}
-											onVerify={onRecaptchaVerify}
-											onExpire={() => setRecaptchaVerified(false)}
-										/>
-									</>)
-								}
-							</>
-						)}
-						<OButton
-							onClick={handleSubmit(onSubmit)}
-							text={loginTab !== 'otp' ? loginButtonText : t('GET_VERIFY_CODE', 'Get verify code')}
-							imgRightSrc={null}
-							isLoading={formState.loading}
-							style={{ borderRadius: 7.6, marginTop: 10, marginBottom: 25 }}
-						/>
-						{onNavigationRedirect && registerButtonText && (
-							<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center' }}>
-								<OText size={14}>
-									{t('NEW_ON_PLATFORM', 'New on Ordering?')}
-								</OText>
-								<TouchableOpacity onPress={() => onNavigationRedirect('Signup')}>
-									<OText size={14} mLeft={5} color={theme.colors.primary}>
-										{t('CREATE_ACCOUNT', 'Create account')}
-									</OText>
-								</TouchableOpacity>
-							</View>
-						)}
-					</FormInput>
-				)}
-
-				{useLoginByCellphone &&
-					loginTab === 'cellphone' &&
-					configs && Object.keys(configs).length > 0 &&
-					(configs?.twilio_service_enabled?.value === 'true' ||
-						configs?.twilio_service_enabled?.value === '1') &&
-					configs?.twilio_module?.value && (
-						<>
-							<OrSeparator>
-								<LineSeparator />
-								<OText size={18} mRight={20} mLeft={20}>
-									{t('OR', 'Or')}
-								</OText>
-								<LineSeparator />
-							</OrSeparator>
-
-							<ButtonsWrapper mBottom={20}>
-								<OButton
-									onClick={handleVerifyCodeClick}
-									text={t('GET_VERIFY_CODE', 'Get Verify Code')}
-									style={loginStyle.btnOutline}
-									imgRightSrc={null}
-									isLoading={isLoadingVerifyModal}
-									indicatorColor={theme.colors.primary}
-								/>
-							</ButtonsWrapper>
-						</>
-					)}
-
-				{configs && Object.keys(configs).length > 0 ? (
-					(((configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') && configs?.facebook_id?.value && facebookLoginEnabled) ||
-						((configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && googleLoginEnabled) ||
-						((configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && appleLoginEnabled)) && !isGuest &&
-					(
-						<>
-							<View
-								style={{
-									flexDirection: 'row',
-									width: '100%',
-									justifyContent: 'space-between',
-									alignItems: 'center',
-									marginVertical: 15
-								}}>
-								<View style={loginStyle.line} />
-								<OText
-									size={14}
-									mBottom={10}
-									style={{ paddingHorizontal: 19 }}
-									color={theme.colors.disabled}>
-									{t('OR', 'or')}
-								</OText>
-								<View style={loginStyle.line} />
-							</View>
-							<ButtonsWrapper>
-								<SocialButtons>
-									{(configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') &&
-										configs?.facebook_id?.value &&
-										facebookLoginEnabled && (
-											<FacebookLogin
-												notificationState={notificationState}
-												handleErrors={(err: any) => { showToast(ToastType.Error, err), vibrateApp() }}
-												handleLoading={(val: boolean) => setIsFBLoading(val)}
-												handleSuccessFacebookLogin={handleSuccessFacebook}
-											/>
-										)}
-									{(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && googleLoginEnabled && (
-										<GoogleLogin
-											notificationState={notificationState}
-											webClientId={configs?.google_login_client_id?.value}
-											handleErrors={(err: any) => { showToast(ToastType.Error, err), vibrateApp() }}
-											handleLoading={(val: boolean) => setIsFBLoading(val)}
-											handleSuccessGoogleLogin={handleSuccessFacebook}
-										/>
-									)}
-									{(configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && appleLoginEnabled && (
-										<AppleLogin
-											notificationState={notificationState}
-											handleErrors={(err: any) => { showToast(ToastType.Error, err), vibrateApp() }}
-											handleLoading={(val: boolean) => setIsFBLoading(val)}
-											handleSuccessAppleLogin={handleSuccessFacebook}
-										/>
-									)}
-								</SocialButtons>
-							</ButtonsWrapper>
-						</>
-					)
-				) : (
-					<SkeletonWrapper>
-						<Placeholder Animation={Fade}>
-							<PlaceholderLine
-								height={20}
-								style={{ marginBottom: 15, marginTop: 10 }}
-							/>
-							<PlaceholderLine
-								height={50}
-								style={{ borderRadius: 25, marginBottom: 25 }}
-							/>
-						</Placeholder>
-					</SkeletonWrapper>
-				)}
-
-				{enabledPoweredByOrdering && (
-					<OText>
-						Powered By Ordering.co
-					</OText>
-				)}
-			</FormSide>
-			<OModal
-				open={isModalVisible}
-				onClose={() => setIsModalVisible(false)}
-				entireModal
-				title={t('VERIFY_PHONE', 'Verify Phone')}
-			>
-				<VerifyPhone
-					phone={phoneInputData.phone}
-					verifyPhoneState={verifyPhoneState}
-					checkPhoneCodeState={checkPhoneCodeState}
-					handleCheckPhoneCode={handleCheckPhoneCode}
-					setCheckPhoneCodeState={setCheckPhoneCodeState}
-					handleVerifyCodeClick={handleVerifyCodeClick}
-					onClose={() => setIsModalVisible(false)}
-				/>
-			</OModal>
-			<Modal
-				visible={willVerifyOtpState}
-				onDismiss={() => setWillVerifyOtpState(false)}
-				animationType='slide'
-			>
-				<Otp
-					isCheckingCode={isCheckingCode}
-					setCheckingCode={setCheckingCode}
-					willVerifyOtpState={willVerifyOtpState}
-					otpError={otpError}
-					setOtpError={setOtpError}
-					setWillVerifyOtpState={setWillVerifyOtpState}
-					handleLoginOtp={handleLoginOtp}
-					onSubmit={onSubmit}
-					setAlertState={setAlertState}
-				/>
-			</Modal>
-			<Alert
-				open={alertState.open}
-				content={alertState.content}
-				title={alertState.title || ''}
-				onAccept={closeAlert}
-				onClose={closeAlert}
-			/>
-			<Spinner visible={isFBLoading} />
-		</Container>
-	);
+  const {
+    loginTab,
+    formState,
+    navigation,
+    useLoginByEmail,
+    useLoginByCellphone,
+    useLoginOtp,
+    loginButtonText,
+    forgotButtonText,
+    verifyPhoneState,
+    checkPhoneCodeState,
+    registerButtonText,
+    setCheckPhoneCodeState,
+    handleButtonLoginClick,
+    handleSendVerifyCode,
+    handleCheckPhoneCode,
+    onNavigationRedirect,
+    notificationState,
+    handleReCaptcha,
+    enableReCaptcha,
+    otpType,
+    setOtpType,
+    generateOtpCode,
+    useLoginOtpEmail,
+    useLoginOtpCellphone,
+    useLoginOtpWhatsapp,
+    isGuest,
+    setCellphoneStartZero
+  } = props;
+
+  const [, { showToast }] = useToast();
+  const [, t] = useLanguage();
+  const [{ configs }] = useConfig();
+  const [, { login }] = useSession();
+  const { control, handleSubmit, errors, reset, register, setValue } = useForm();
+  const [passwordSee, setPasswordSee] = useState(false);
+  const [isLoadingVerifyModal, setIsLoadingVerifyModal] = useState(false);
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [isFBLoading, setIsFBLoading] = useState(false);
+  const [willVerifyOtpState, setWillVerifyOtpState] = useState(false)
+  const [phoneInputData, setPhoneInputData] = useState({
+    error: '',
+    phone: {
+      country_phone_code: null,
+      cellphone: null,
+    },
+  });
+  const [recaptchaConfig, setRecaptchaConfig] = useState<any>({})
+  const [recaptchaVerified, setRecaptchaVerified] = useState(false)
+  const [alertState, setAlertState] = useState({ open: false, title: '', content: [] })
+  const [tabLayouts, setTabLayouts] = useState<any>({})
+  const [otpError, setOtpError] = useState(null)
+  const tabsRef = useRef<any>(null)
+  const enabledPoweredByOrdering = configs?.powered_by_ordering_module?.value
+  const theme = useTheme();
+  const isOtpEmail = loginTab === 'otp' && otpType === 'email'
+  const isOtpCellphone = loginTab === 'otp' && otpType === 'cellphone'
+
+  const [isCheckingCode, setCheckingCode] = useState(false)
+
+  const googleLoginEnabled = configs?.google_login_enabled?.value === '1'
+  const facebookLoginEnabled = configs?.facebook_login_enabled?.value === '1'
+  const appleLoginEnabled = Platform.OS === 'ios' && (configs?.apple_login_enabled?.value === '1')
+
+  const loginStyle = StyleSheet.create({
+    btnOutline: {
+      backgroundColor: '#FFF',
+      color: theme.colors.primary,
+      borderRadius: 7.6,
+    },
+    inputStyle: {
+      marginBottom: 28,
+      borderWidth: 1,
+      // borderColor: theme.colors.border,
+      borderRadius: 7.6,
+    },
+    line: {
+      height: 1,
+      backgroundColor: theme.colors.border,
+      flexGrow: 1,
+      marginBottom: 7,
+    },
+    recaptchaIcon: {
+      width: 100,
+      height: 100,
+    },
+    borderStyleBase: {
+      width: 30,
+      height: 45
+    },
+
+    borderStyleHighLighted: {
+      borderColor: "#03DAC6",
+    },
+
+    underlineStyleBase: {
+      width: 45,
+      height: 60,
+      borderWidth: 1,
+      fontSize: 16
+    },
+
+    underlineStyleHighLighted: {
+      borderColor: theme.colors.primary,
+      color: theme.colors.primary,
+      fontSize: 16
+    },
+  });
+
+  const emailRef = useRef<any>({});
+  const passwordRef = useRef<any>({});
+  const recaptchaRef = useRef<any>({});
+  const otpChannelRef = useRef<number>(2);
+
+  const handleChangeTab = (val: string, otpType?: string) => {
+    props.handleChangeTab(val);
+    setPasswordSee(false);
+    handleCategoryScroll(otpType ? `${val}_${otpType}` : val)
+  };
+
+  const vibrateApp = (impact?: string) => {
+    const options = {
+      enableVibrateFallback: true,
+      ignoreAndroidSystemSettings: false
+    };
+    ReactNativeHapticFeedback.trigger(impact || "impactLight", options);
+  }
+
+  const onSubmit = (values?: any) => {
+    Keyboard.dismiss();
+    if (loginTab === 'otp') {
+      if (phoneInputData.error && (loginTab !== 'otp' || (otpType === 'cellphone' && loginTab === 'otp'))) {
+        showToast(ToastType.Error, t('INVALID_PHONE_NUMBER', 'Invalid phone number'));
+        vibrateApp()
+        return
+      }
+      if (otpType === 'cellphone' && phoneInputData?.error && !phoneInputData?.phone?.cellphone) {
+        showToast(ToastType.Error, t('PHONE_NUMBER_REQUIRED', 'Phone number is required'));
+        return
+      }
+      if (loginTab === 'otp') {
+        generateOtpCode({
+          ...values,
+          ...phoneInputData.phone
+        }, otpChannelRef.current)
+      }
+      setWillVerifyOtpState(true)
+    } else {
+      if (phoneInputData.error) {
+        showToast(ToastType.Error, phoneInputData.error);
+        vibrateApp()
+        return;
+      }
+      handleButtonLoginClick({
+        ...values,
+        ...phoneInputData.phone,
+      });
+    }
+
+  };
+  const handleVerifyCodeClick = () => {
+    if (phoneInputData.error) {
+      showToast(ToastType.Error, phoneInputData.error);
+      vibrateApp()
+      return;
+    }
+    if (
+      !phoneInputData.error &&
+      !phoneInputData.phone.country_phone_code &&
+      !phoneInputData.phone.cellphone
+    ) {
+      showToast(
+        ToastType.Error,
+        t(
+          'VALIDATION_ERROR_MOBILE_PHONE_REQUIRED',
+          'The field Mobile phone is required.',
+        ),
+      );
+      vibrateApp()
+      return;
+    }
+    handleSendVerifyCode && handleSendVerifyCode(phoneInputData.phone);
+    setIsLoadingVerifyModal(true);
+  };
+
+  const handleSuccessFacebook = (user: any) => {
+    login({
+      user,
+      token: user.session.access_token,
+    });
+  };
+
+  const handleChangeInputEmail = (value: string, onChange: any) => {
+    onChange(value.toLowerCase().trim().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''));
+  };
+
+  const handleOpenRecaptcha = () => {
+    setRecaptchaVerified(false)
+    if (!recaptchaConfig?.siteKey) {
+      showToast(ToastType.Error, t('NO_RECAPTCHA_SITE_KEY', 'The config doesn\'t have recaptcha site key'));
+      vibrateApp()
+      return
+    }
+    if (!recaptchaConfig?.baseUrl) {
+      showToast(ToastType.Error, t('NO_RECAPTCHA_BASE_URL', 'The config doesn\'t have recaptcha base url'));
+      vibrateApp()
+      return
+    }
+
+    recaptchaRef.current.open()
+  }
+
+  const onRecaptchaVerify = (token: any) => {
+    setRecaptchaVerified(true)
+    handleReCaptcha({ code: token, version: recaptchaConfig?.version })
+  }
+
+  const handleChangeOtpType = (type: string) => {
+    handleChangeTab('otp', type)
+    setOtpType(type)
+  }
+
+  const handleLoginOtp = async (code: string) => {
+    if (!code) return
+    const logged = await handleButtonLoginClick({ code })
+    setCheckingCode(false)
+    if (logged) {
+      setWillVerifyOtpState(false)
+    } else {
+      setOtpError(t('OTP_CODE_INCORRECT', 'Otp code incorrect'))
+    }
+  }
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      title: '',
+      content: []
+    })
+  }
+
+  const handleCategoryScroll = (opc: string) => {
+    tabsRef.current.scrollTo({
+      x: tabLayouts?.[opc]?.x - 40,
+      animated: true
+    })
+  }
+
+  const handleOnLayout = (event: any, opc: string) => {
+    const _tabLayouts = { ...tabLayouts }
+    const categoryKey = opc
+    _tabLayouts[categoryKey] = event.nativeEvent.layout
+    setTabLayouts(_tabLayouts)
+  }
+
+  const handleChangePhoneNumber = (number: any, rawNumber: any) => {
+    setPhoneInputData(number)
+    setCellphoneStartZero && setCellphoneStartZero(rawNumber?.number && rawNumber?.countryCallingCode ? rawNumber?.number : null)
+  }
+
+  useEffect(() => {
+    if (configs && Object.keys(configs).length > 0 && enableReCaptcha) {
+      if (configs?.security_recaptcha_type?.value === 'v3' &&
+        configs?.security_recaptcha_score_v3?.value > 0 &&
+        configs?.security_recaptcha_site_key_v3?.value
+      ) {
+        setRecaptchaConfig({
+          version: 'v3',
+          siteKey: configs?.security_recaptcha_site_key_v3?.value || null,
+          baseUrl: configs?.security_recaptcha_base_url?.value || null
+        })
+        return
+      }
+      if (configs?.security_recaptcha_site_key?.value) {
+        setRecaptchaConfig({
+          version: 'v2',
+          siteKey: configs?.security_recaptcha_site_key?.value || null,
+          baseUrl: configs?.security_recaptcha_base_url?.value || null
+        })
+      }
+    }
+  }, [configs, enableReCaptcha])
+
+  useEffect(() => {
+    if (!formState.loading && formState.result?.error) {
+      if (formState.result?.result?.[0] === 'ERROR_AUTH_VERIFICATION_CODE') {
+        setRecaptchaVerified(false)
+        setRecaptchaConfig({
+          version: 'v2',
+          siteKey: configs?.security_recaptcha_site_key?.value || null,
+          baseUrl: configs?.security_recaptcha_base_url?.value || null
+        })
+        showToast(ToastType.Info, t('TRY_AGAIN', 'Please try again'))
+        vibrateApp()
+        return
+      }
+      formState.result?.result &&
+        showToast(
+          ToastType.Error,
+          typeof formState.result?.result === 'string'
+            ? formState.result?.result
+            : formState.result?.result[0],
+        );
+      formState.result?.result && vibrateApp()
+    }
+  }, [formState]);
+
+  useEffect(() => {
+    if (verifyPhoneState && !verifyPhoneState?.loading) {
+      if (verifyPhoneState.result?.error) {
+        const message =
+          typeof verifyPhoneState?.result?.result === 'string'
+            ? verifyPhoneState?.result?.result
+            : verifyPhoneState?.result?.result[0];
+        verifyPhoneState.result?.result && showToast(ToastType.Error, message);
+        verifyPhoneState.result?.result && vibrateApp();
+        setIsLoadingVerifyModal(false);
+        return;
+      }
+
+      const okResult = verifyPhoneState.result?.result === 'OK';
+      if (okResult) {
+        !isModalVisible && setIsModalVisible(true);
+        setIsLoadingVerifyModal(false);
+      }
+    }
+  }, [verifyPhoneState]);
+
+  useEffect(() => {
+    if (phoneInputData?.phone?.cellphone) setValue('cellphone', phoneInputData?.phone?.cellphone, '')
+    else setValue('cellphone', '')
+  }, [phoneInputData?.phone?.cellphone])
+
+  useEffect(() => {
+    register('cellphone', {
+      required: loginTab === 'cellphone'
+        ? t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Mobile phone is required').replace('_attribute_', t('CELLPHONE', 'Cellphone'))
+        : null
+    })
+  }, [register])
+
+  useEffect(() => {
+    reset()
+  }, [loginTab])
+
+  useEffect(() => {
+    if (checkPhoneCodeState?.result?.error) {
+      setAlertState({
+        open: true,
+        content: t(checkPhoneCodeState?.result?.error, checkPhoneCodeState?.result?.error),
+        title: ''
+      })
+    }
+  }, [checkPhoneCodeState])
+
+  useEffect(() => {
+    if (!!Object.values(errors)?.length) vibrateApp()
+  }, [errors])
+
+  return (
+    <Container>
+      {isGuest ? (
+        <OText style={{ textAlign: 'center', marginBottom: 10 }} size={18}>{t('LOGIN', 'Login')}</OText>
+      ) : (
+        <NavBar
+          title={t('LOGIN', 'Login')}
+          titleAlign={'center'}
+          onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
+          showCall={false}
+          btnStyle={{ paddingLeft: 0 }}
+          titleWrapStyle={{ paddingHorizontal: 0 }}
+          titleStyle={{ marginRight: 0, marginLeft: 0 }}
+        />
+      )}
+      <FormSide>
+        {(Number(useLoginByEmail) + Number(useLoginByCellphone) + Number(useLoginOtpEmail) + Number(useLoginOtpCellphone) > 1) && (
+          <LoginWith>
+            <OTabs
+              horizontal
+              showsHorizontalScrollIndicator={false}
+              ref={tabsRef}
+            >
+              {useLoginByEmail && (
+                <TabBtn
+                  onPress={() => handleChangeTab('email')}
+                  onLayout={(event: any) => handleOnLayout(event, 'email')}
+                >
+                  <OTab
+                    style={{
+                      borderBottomColor:
+                        loginTab === 'email'
+                          ? theme.colors.textNormal
+                          : theme.colors.border,
+                    }}>
+                    <OText
+                      size={14}
+                      color={
+                        loginTab === 'email'
+                          ? theme.colors.textNormal
+                          : theme.colors.disabled
+                      }
+                      weight={loginTab === 'email' ? 'bold' : 'normal'}>
+                      {t('LOGIN_BY_EMAIL', 'by Email')}
+                    </OText>
+                  </OTab>
+                </TabBtn>
+              )}
+              {useLoginByCellphone && (
+                <TabBtn
+                  onPress={() => handleChangeTab('cellphone')}
+                  onLayout={(event: any) => handleOnLayout(event, 'cellphone')}
+                >
+                  <OTab
+                    style={{
+                      borderBottomColor:
+                        loginTab === 'cellphone'
+                          ? theme.colors.textNormal
+                          : theme.colors.border,
+                    }}>
+                    <OText
+                      size={14}
+                      color={
+                        loginTab === 'cellphone'
+                          ? theme.colors.textNormal
+                          : theme.colors.disabled
+                      }
+                      weight={loginTab === 'cellphone' ? 'bold' : 'normal'}>
+                      {t('LOGIN_BY_PHONE', 'by Phone')}
+                    </OText>
+                  </OTab>
+                </TabBtn>
+              )}
+              {useLoginOtpEmail && (
+                <TabBtn
+                  onPress={() => handleChangeOtpType('email')}
+                  onLayout={(event: any) => handleOnLayout(event, 'otp_email')}
+                >
+                  <OTab
+                    style={{
+                      borderBottomColor:
+                        isOtpEmail
+                          ? theme.colors.textNormal
+                          : theme.colors.border,
+                    }}>
+                    <OText
+                      size={14}
+                      color={
+                        isOtpEmail
+                          ? theme.colors.textNormal
+                          : theme.colors.disabled
+                      }
+                      weight={isOtpEmail ? 'bold' : 'normal'}>
+                      {t('BY_OTP_EMAIL', 'By Otp Email')}
+                    </OText>
+                  </OTab>
+                </TabBtn>
+              )}
+              {useLoginOtpCellphone && (
+                <TabBtn
+                  onPress={() => handleChangeOtpType('cellphone')}
+                  onLayout={(event: any) => handleOnLayout(event, 'otp_cellphone')}
+                >
+                  <OTab
+                    style={{
+                      borderBottomColor:
+                        isOtpCellphone
+                          ? theme.colors.textNormal
+                          : theme.colors.border,
+                    }}>
+                    <OText
+                      size={14}
+                      color={
+                        isOtpCellphone
+                          ? theme.colors.textNormal
+                          : theme.colors.disabled
+                      }
+                      weight={isOtpCellphone ? 'bold' : 'normal'}>
+                      {t('BY_OTP_PHONE', 'By Otp Phone')}
+                    </OText>
+                  </OTab>
+                </TabBtn>
+              )}
+            </OTabs>
+          </LoginWith>
+        )}
+
+        {(useLoginByCellphone || useLoginByEmail || useLoginOtp) && (
+          <FormInput>
+            {((useLoginByEmail && loginTab === 'email') || (loginTab === 'otp' && otpType === 'email')) && (
+              <>
+                {errors?.email && (
+                  <OText
+                    size={14}
+                    color={theme.colors.danger5}
+                    weight={'normal'}>
+                    {errors?.email?.message}{errors?.email?.type === 'required' && '*'}
+                  </OText>
+                )}
+                <Controller
+                  control={control}
+                  render={({ onChange, value }: any) => (
+                    <OInput
+                      placeholder={t('EMAIL', 'Email')}
+                      style={loginStyle.inputStyle}
+                      icon={theme.images.general.email}
+                      onChange={(e: any) => {
+                        handleChangeInputEmail(e, onChange);
+                      }}
+                      value={value}
+                      autoCapitalize="none"
+                      autoCorrect={false}
+                      type="email-address"
+                      autoCompleteType="email"
+                      returnKeyType="next"
+                      onSubmitEditing={() => passwordRef.current?.focus()}
+                      blurOnSubmit={false}
+                      forwardRef={emailRef}
+                      borderColor={errors?.email ? theme.colors.danger5 : theme.colors.border}
+                    />
+                  )}
+                  name="email"
+                  rules={{
+                    required: {
+                      value: true,
+                      message: t(
+                        'VALIDATION_ERROR_EMAIL_REQUIRED',
+                        'The field Email is required',
+                      ).replace('_attribute_', t('EMAIL', 'Email'))
+                    },
+                    pattern: {
+                      value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+                      message: t(
+                        'INVALID_ERROR_EMAIL',
+                        'Invalid email address',
+                      ).replace('_attribute_', t('EMAIL', 'Email')),
+                    }
+                  }}
+                  defaultValue=""
+                />
+              </>
+
+            )}
+            {((useLoginByCellphone && loginTab === 'cellphone') || (loginTab === 'otp' && otpType === 'cellphone')) && (
+              <View style={{ marginBottom: 28 }}>
+                <PhoneInputNumber
+                  data={phoneInputData}
+                  handleData={handleChangePhoneNumber}
+                  textInputProps={{
+                    returnKeyType: 'next',
+                    onSubmitEditing: () => passwordRef?.current?.focus?.(),
+                  }}
+                  isStartValidation={errors?.cellphone}
+                />
+              </View>
+            )}
+            {errors?.password && (
+              <OText
+                size={14}
+                color={theme.colors.danger5}
+                weight={'normal'}>
+                {errors?.password?.message}{errors?.password?.type === 'required' && '*'}
+              </OText>
+            )}
+            {loginTab !== 'otp' && (
+
+              <Controller
+                control={control}
+                render={({ onChange, value }: any) => (
+                  <OInput
+                    isSecured={!passwordSee ? true : false}
+                    placeholder={t('PASSWORD', 'Password')}
+                    style={{ ...loginStyle.inputStyle, marginBottom: 14 }}
+                    icon={theme.images.general.lock}
+                    iconCustomRight={
+                      !passwordSee ? (
+                        <MaterialCommunityIcons
+                          name="eye-outline"
+                          size={24}
+                          onPress={() => setPasswordSee(!passwordSee)}
+                          color={theme.colors.disabled}
+                        />
+                      ) : (
+                        <MaterialCommunityIcons
+                          name="eye-off-outline"
+                          size={24}
+                          onPress={() => setPasswordSee(!passwordSee)}
+                          color={theme.colors.disabled}
+                        />
+                      )
+                    }
+                    autoCapitalize='none'
+                    value={value}
+                    forwardRef={passwordRef}
+                    onChange={(val: any) => onChange(val)}
+                    returnKeyType="done"
+                    onSubmitEditing={handleSubmit(onSubmit)}
+                    blurOnSubmit
+                    borderColor={errors?.password ? theme.colors.danger5 : theme.colors.border}
+                  />
+                )}
+                name="password"
+                rules={{
+                  required: {
+                    value: true,
+                    message: t(
+                      'VALIDATION_ERROR_PASSWORD_REQUIRED',
+                      'The field Password is required',
+                    ).replace('_attribute_', t('PASSWORD', 'Password'))
+                  }
+                }}
+                defaultValue=""
+              />
+            )}
+            {onNavigationRedirect && forgotButtonText && loginTab !== 'otp' && (
+              <TouchableOpacity onPress={() => onNavigationRedirect('Forgot')}>
+                <OText size={14} mBottom={18}>
+                  {forgotButtonText}
+                </OText>
+              </TouchableOpacity>
+            )}
+
+            {(enableReCaptcha && recaptchaConfig?.version) && (
+              <>
+                {recaptchaConfig?.version === 'v3' ? (
+                  <ReCaptcha
+                    url={recaptchaConfig?.baseUrl}
+                    siteKey={recaptchaConfig?.siteKey}
+                    containerStyle={{ height: 40 }}
+                    onExecute={onRecaptchaVerify}
+                    reCaptchaType={1}
+                  />
+                ) : (
+                  <>
+                    <TouchableOpacity
+                      onPress={handleOpenRecaptcha}
+                    >
+                      <RecaptchaButton>
+                        {recaptchaVerified ? (
+                          <MaterialCommunityIcons
+                            name="checkbox-marked"
+                            size={26}
+                            color={theme.colors.primary}
+                          />
+                        ) : (
+                          <MaterialCommunityIcons
+                            name="checkbox-blank-outline"
+                            size={26}
+                            color={theme.colors.mediumGray}
+                          />
+                        )}
+                        <OText size={14} mLeft={8}>{t('VERIFY_ReCAPTCHA', 'Verify reCAPTCHA')}</OText>
+                      </RecaptchaButton>
+                    </TouchableOpacity>
+                    <Recaptcha
+                      ref={recaptchaRef}
+                      siteKey={recaptchaConfig?.siteKey}
+                      baseUrl={recaptchaConfig?.baseUrl}
+                      onVerify={onRecaptchaVerify}
+                      onExpire={() => setRecaptchaVerified(false)}
+                    />
+                  </>)
+                }
+              </>
+            )}
+            {(loginTab === 'otp' && otpType === 'cellphone' && useLoginOtpWhatsapp)
+              ? (
+              <View style={{ flexDirection: 'row', gap: 10, marginTop: 10, marginBottom: 25 }}>
+                <OButton
+                  onClick={() => { otpChannelRef.current = 2; handleSubmit(onSubmit)() }}
+                  text={t('SEND_BY_SMS', 'Send by SMS')}
+                  imgRightSrc={null}
+                  isLoading={formState.loading}
+                  parentStyle={{ flex: 1 }}
+                  style={{ borderRadius: 7.6 }}
+                />
+                <OButton
+                  onClick={() => { otpChannelRef.current = 4; handleSubmit(onSubmit)() }}
+                  text={t('SEND_BY_WHATSAPP', 'Send by WhatsApp')}
+                  imgRightSrc={null}
+                  isLoading={formState.loading}
+                  parentStyle={{ flex: 1 }}
+                  style={{ borderRadius: 7.6 }}
+                />
+              </View>
+                )
+              : (
+              <OButton
+                onClick={handleSubmit(onSubmit)}
+                text={loginTab !== 'otp' ? loginButtonText : t('GET_VERIFY_CODE', 'Get verify code')}
+                imgRightSrc={null}
+                isLoading={formState.loading}
+                style={{ borderRadius: 7.6, marginTop: 10, marginBottom: 25 }}
+              />
+                )}
+            {onNavigationRedirect && registerButtonText && (
+              <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center' }}>
+                <OText size={14}>
+                  {t('NEW_ON_PLATFORM', 'New on Ordering?')}
+                </OText>
+                <TouchableOpacity onPress={() => onNavigationRedirect('Signup')}>
+                  <OText size={14} mLeft={5} color={theme.colors.primary}>
+                    {t('CREATE_ACCOUNT', 'Create account')}
+                  </OText>
+                </TouchableOpacity>
+              </View>
+            )}
+          </FormInput>
+        )}
+
+        {useLoginByCellphone &&
+          loginTab === 'cellphone' &&
+          configs && Object.keys(configs).length > 0 &&
+          (configs?.twilio_service_enabled?.value === 'true' ||
+            configs?.twilio_service_enabled?.value === '1') &&
+          configs?.twilio_module?.value && (
+            <>
+              <OrSeparator>
+                <LineSeparator />
+                <OText size={18} mRight={20} mLeft={20}>
+                  {t('OR', 'Or')}
+                </OText>
+                <LineSeparator />
+              </OrSeparator>
+
+              <ButtonsWrapper mBottom={20}>
+                <OButton
+                  onClick={handleVerifyCodeClick}
+                  text={t('GET_VERIFY_CODE', 'Get Verify Code')}
+                  style={loginStyle.btnOutline}
+                  imgRightSrc={null}
+                  isLoading={isLoadingVerifyModal}
+                  indicatorColor={theme.colors.primary}
+                />
+              </ButtonsWrapper>
+            </>
+          )}
+
+        {configs && Object.keys(configs).length > 0 ? (
+          (((configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') && configs?.facebook_id?.value && facebookLoginEnabled) ||
+            ((configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && googleLoginEnabled) ||
+            ((configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && appleLoginEnabled)) && !isGuest &&
+          (
+            <>
+              <View
+                style={{
+                  flexDirection: 'row',
+                  width: '100%',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  marginVertical: 15
+                }}>
+                <View style={loginStyle.line} />
+                <OText
+                  size={14}
+                  mBottom={10}
+                  style={{ paddingHorizontal: 19 }}
+                  color={theme.colors.disabled}>
+                  {t('OR', 'or')}
+                </OText>
+                <View style={loginStyle.line} />
+              </View>
+              <ButtonsWrapper>
+                <SocialButtons>
+                  {(configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') &&
+                    configs?.facebook_id?.value &&
+                    facebookLoginEnabled && (
+                      <FacebookLogin
+                        notificationState={notificationState}
+                        handleErrors={(err: any) => { showToast(ToastType.Error, err), vibrateApp() }}
+                        handleLoading={(val: boolean) => setIsFBLoading(val)}
+                        handleSuccessFacebookLogin={handleSuccessFacebook}
+                      />
+                    )}
+                  {(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && googleLoginEnabled && (
+                    <GoogleLogin
+                      notificationState={notificationState}
+                      webClientId={configs?.google_login_client_id?.value}
+                      handleErrors={(err: any) => { showToast(ToastType.Error, err), vibrateApp() }}
+                      handleLoading={(val: boolean) => setIsFBLoading(val)}
+                      handleSuccessGoogleLogin={handleSuccessFacebook}
+                    />
+                  )}
+                  {(configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && appleLoginEnabled && (
+                    <AppleLogin
+                      notificationState={notificationState}
+                      handleErrors={(err: any) => { showToast(ToastType.Error, err), vibrateApp() }}
+                      handleLoading={(val: boolean) => setIsFBLoading(val)}
+                      handleSuccessAppleLogin={handleSuccessFacebook}
+                    />
+                  )}
+                </SocialButtons>
+              </ButtonsWrapper>
+            </>
+          )
+        ) : (
+          <SkeletonWrapper>
+            <Placeholder Animation={Fade}>
+              <PlaceholderLine
+                height={20}
+                style={{ marginBottom: 15, marginTop: 10 }}
+              />
+              <PlaceholderLine
+                height={50}
+                style={{ borderRadius: 25, marginBottom: 25 }}
+              />
+            </Placeholder>
+          </SkeletonWrapper>
+        )}
+
+        {enabledPoweredByOrdering && (
+          <OText>
+            Powered By Ordering.co
+          </OText>
+        )}
+      </FormSide>
+      <OModal
+        open={isModalVisible}
+        onClose={() => setIsModalVisible(false)}
+        entireModal
+        title={t('VERIFY_PHONE', 'Verify Phone')}
+      >
+        <VerifyPhone
+          phone={phoneInputData.phone}
+          verifyPhoneState={verifyPhoneState}
+          checkPhoneCodeState={checkPhoneCodeState}
+          handleCheckPhoneCode={handleCheckPhoneCode}
+          setCheckPhoneCodeState={setCheckPhoneCodeState}
+          handleVerifyCodeClick={handleVerifyCodeClick}
+          onClose={() => setIsModalVisible(false)}
+        />
+      </OModal>
+      <Modal
+        visible={willVerifyOtpState}
+        onDismiss={() => setWillVerifyOtpState(false)}
+        animationType='slide'
+      >
+        <Otp
+          isCheckingCode={isCheckingCode}
+          setCheckingCode={setCheckingCode}
+          willVerifyOtpState={willVerifyOtpState}
+          otpError={otpError}
+          setOtpError={setOtpError}
+          setWillVerifyOtpState={setWillVerifyOtpState}
+          handleLoginOtp={handleLoginOtp}
+          onSubmit={onSubmit}
+          setAlertState={setAlertState}
+        />
+      </Modal>
+      <Alert
+        open={alertState.open}
+        content={alertState.content}
+        title={alertState.title || ''}
+        onAccept={closeAlert}
+        onClose={closeAlert}
+      />
+      <Spinner visible={isFBLoading} />
+    </Container>
+  );
 };
 
 export const LoginForm = (props: any) => {
-	const loginProps = {
-		...props,
-		isRecaptchaEnable: true,
-		UIComponent: LoginFormUI,
-	};
-	return <LoginFormController {...loginProps} />;
+  const loginProps = {
+    ...props,
+    isRecaptchaEnable: true,
+    UIComponent: LoginFormUI,
+  };
+  return <LoginFormController {...loginProps} />;
 };