ordering-ui-react-native 0.24.17 → 0.24.18

package/themes/single-business/src/components/LoginForm/index.tsx

@@ -1,587 +1,587 @@
-import React, { useEffect, useState, useRef } from 'react';
-import { Pressable, StyleSheet, View, Keyboard, ScrollView } from 'react-native';
-import Spinner from 'react-native-loading-spinner-overlay';
-import { useForm, Controller } from 'react-hook-form';
-import { PhoneInputNumber } from '../PhoneInputNumber';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-
-import {
-	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 '../VerifyPhone';
-
-import {
-	Container,
-	ButtonsWrapper,
-	LoginWith,
-	FormSide,
-	FormInput,
-	OTabs,
-	OTab,
-	SocialButtons,
-	OrSeparator,
-	LineSeparator,
-	SkeletonWrapper,
-  TabsContainer,
-} from './styles';
-
-import NavBar from '../NavBar';
-
-import { OText, OButton, OInput, OModal, OIcon } from '../shared';
-import { LoginParams } from '../../types';
-import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
-import { GoogleLogin } from '../GoogleLogin';
-import { AppleLogin } from '../AppleLogin';
-
-const LoginFormUI = (props: LoginParams) => {
-	const {
-		loginTab,
-		formState,
-		navigation,
-		useLoginByEmail,
-		useLoginByCellphone,
-		loginButtonText,
-		forgotButtonText,
-		verifyPhoneState,
-		checkPhoneCodeState,
-		registerButtonText,
-		setCheckPhoneCodeState,
-		handleButtonLoginClick,
-		handleSendVerifyCode,
-		handleCheckPhoneCode,
-		onNavigationRedirect,
-	} = props;
-
-	const [, { showToast }] = useToast();
-	const [, t] = useLanguage();
-	const [{ configs }] = useConfig();
-	const [, { login }] = useSession();
-	const { control, handleSubmit, errors } = useForm();
-	const [passwordSee, setPasswordSee] = useState(false);
-	const [isLoadingVerifyModal, setIsLoadingVerifyModal] = useState(false);
-	const [isModalVisible, setIsModalVisible] = useState(false);
-	const [isFBLoading, setIsFBLoading] = useState(false);
-	const [phoneInputData, setPhoneInputData] = useState({
-		error: '',
-		phone: {
-			country_phone_code: null,
-			cellphone: null,
-		},
-	});
-
-	const theme = useTheme();
-  const scrollRefTab = useRef() as React.MutableRefObject<ScrollView>;
-
-	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,
-		},
-    btnTab: {
-      flex: 1,
-      minWidth: 88,
-      alignItems: 'flex-start',
-      borderBottomWidth: 1,
-    },
-    btnTabText: {
-      fontFamily: 'Poppins',
-      fontStyle: 'normal',
-      fontSize: 14,
-      marginBottom: 10,
-      paddingLeft: 8,
-      paddingRight: 8,
-    },
-    btn: {
-      borderRadius: 7.6,
-      height: 44,
-    },
-    btnText: {
-      color: theme.colors.inputTextColor,
-      fontFamily: 'Poppins',
-      fontStyle: 'normal',
-      fontWeight: 'normal',
-      fontSize: 18,
-    },
-    btnFlag: {
-      width: 79,
-      borderWidth: 1,
-      borderRadius: 7.6,
-      marginRight: 9,
-      borderColor: theme.colors.inputSignup,
-    },
-    textForgot: {
-      color: theme.colors.arrowColor,
-      fontFamily: 'Poppins',
-      fontStyle: 'normal',
-      fontWeight: 'normal',
-      fontSize: 16,
-    },
-    linkTxt: {
-      flexDirection: 'row',
-      justifyContent: 'center',
-    }
-	});
-
-	const inputRef = useRef<any>({});
-
-	const handleChangeTab = (val: string) => {
-		props.handleChangeTab(val);
-		setPasswordSee(false);
-
-    if (loginTab === 'email') {
-      scrollRefTab.current?.scrollToEnd({ animated: true });
-    }
-
-    if (loginTab === 'cellphone') {
-      scrollRefTab.current?.scrollTo({ animated: true });
-    }
-	};
-
-	const onSubmit = (values: any) => {
-		Keyboard.dismiss();
-		if (phoneInputData.error) {
-			showToast(ToastType.Error, phoneInputData.error);
-			return;
-		}
-		handleButtonLoginClick({
-			...values,
-			...phoneInputData.phone,
-		});
-	};
-
-	const handleVerifyCodeClick = () => {
-		if (phoneInputData.error) {
-			showToast(ToastType.Error, phoneInputData.error);
-			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.',
-				),
-			);
-			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().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''));
-	};
-
-	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]);
-
-	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);
-				setIsLoadingVerifyModal(false);
-				return;
-			}
-
-			const okResult = verifyPhoneState.result?.result === 'OK';
-			if (okResult) {
-				!isModalVisible && setIsModalVisible(true);
-				setIsLoadingVerifyModal(false);
-			}
-		}
-	}, [verifyPhoneState]);
-
-	useEffect(() => {
-		if (Object.keys(errors).length > 0) {
-			// Convert all errors in one string to show in toast provider
-			const list = Object.values(errors);
-			let stringError = '';
-			if (phoneInputData.error) {
-				list.unshift({ message: phoneInputData.error });
-			}
-			if (
-				loginTab === 'cellphone' &&
-				!phoneInputData.error &&
-				!phoneInputData.phone.country_phone_code &&
-				!phoneInputData.phone.cellphone
-			) {
-				list.unshift({
-					message: t(
-						'VALIDATION_ERROR_MOBILE_PHONE_REQUIRED',
-						'The field Mobile phone is required.',
-					),
-				});
-			}
-			list.map((item: any, i: number) => {
-				stringError +=
-					i + 1 === list.length ? `- ${item.message}` : `- ${item.message}\n`;
-			});
-			showToast(ToastType.Error, stringError);
-		}
-	}, [errors]);
-
-	return (
-		<Container>
-			<NavBar
-				title={t('LOGIN', 'Login')}
-				onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
-				showCall={false}
-				btnStyle={{ paddingLeft: 0 }}
-				paddingTop={0}
-				isVertical={true}
-			/>
-			<FormSide>
-        {(useLoginByEmail || useLoginByCellphone) && (
-          <LoginWith>
-            <ScrollView
-              ref={scrollRefTab}
-              showsVerticalScrollIndicator={false}
-              showsHorizontalScrollIndicator={false}
-              horizontal
-              style={{
-                borderBottomColor: theme.colors.border,
-                borderBottomWidth: 2
-              }}
-            >
-              <TabsContainer>
-                {useLoginByEmail && (
-                  <Pressable
-                    style={{
-                      ...loginStyle.btnTab,
-                      borderBottomWidth: loginTab === 'email' ? 2 : 0,
-                      borderBottomColor: theme.colors.textNormal,
-                    }}
-                    onPress={() => handleChangeTab('email')}>
-                    <OText
-                      style={loginStyle.btnTabText}
-                      color={
-                        loginTab === 'email'
-                          ? theme.colors.textNormal
-                          : theme.colors.border
-                      }
-                      weight={loginTab === 'email' ? '600' : 'normal'}>
-                      {t('BY_EMAIL', 'by Email')}
-                    </OText>
-                  </Pressable>
-                )}
-
-                {useLoginByCellphone && (
-                  <Pressable
-                    style={{
-                      ...loginStyle.btnTab,
-                      borderBottomWidth: loginTab === 'cellphone' ? 2 : 0,
-                      borderBottomColor: theme.colors.textNormal
-                    }}
-                    onPress={() => handleChangeTab('cellphone')}>
-                    <OText
-                      style={loginStyle.btnTabText}
-                      color={
-                        loginTab === 'cellphone'
-                          ? theme.colors.textNormal
-                          : theme.colors.border
-                      }
-                      weight={loginTab === 'cellphone' ? '600' : 'normal'}>
-                      {t('BY_PHONE', 'by Phone')}
-                    </OText>
-                  </Pressable>
-                )}
-              </TabsContainer>
-            </ScrollView>
-          </LoginWith>
-        )}
-
-				{(useLoginByCellphone || useLoginByEmail) && (
-					<FormInput>
-						{useLoginByEmail && loginTab === 'email' && (
-							<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={() => inputRef.current?.focus()}
-										blurOnSubmit={false}
-									/>
-								)}
-								name="email"
-								rules={{
-									required: 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' && (
-							<View style={{ marginBottom: 28 }}>
-								<PhoneInputNumber
-									data={phoneInputData}
-									handleData={(val: any) => setPhoneInputData(val)}
-									textInputProps={{
-										returnKeyType: 'next',
-										onSubmitEditing: () => inputRef?.current?.focus?.(),
-									}}
-								/>
-							</View>
-						)}
-
-						<Controller
-							control={control}
-							render={({ onChange, value }: any) => (
-								<OInput
-									isSecured={!passwordSee ? true : false}
-									placeholder={t('PASSWORD', 'Password')}
-									style={loginStyle.inputStyle}
-									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}
-											/>
-										)
-									}
-									value={value}
-									forwardRef={inputRef}
-									onChange={(val: any) => onChange(val)}
-									returnKeyType="done"
-									onSubmitEditing={handleSubmit(onSubmit)}
-									blurOnSubmit
-								/>
-							)}
-							name="password"
-							rules={{
-								required: t(
-									'VALIDATION_ERROR_PASSWORD_REQUIRED',
-									'The field Password is required',
-								).replace('_attribute_', t('PASSWORD', 'Password')),
-							}}
-							defaultValue=""
-						/>
-
-            {onNavigationRedirect && forgotButtonText && (
-              <Pressable onPress={() => onNavigationRedirect('Forgot')}>
-                <OText size={14} mBottom={18}>
-                  {forgotButtonText}
-                </OText>
-              </Pressable>
-            )}
-
-						<OButton
-							onClick={handleSubmit(onSubmit)}
-							text={loginButtonText}
-							bgColor={theme.colors.primary}
-							borderColor={theme.colors.primary}
-							textStyle={{ color: 'white' }}
-							imgRightSrc={null}
-							isLoading={formState.loading}
-							style={{ borderRadius: 7.6, marginTop: 10 }}
-						/>
-					</FormInput>
-				)}
-
-        {onNavigationRedirect && registerButtonText && (
-          <View style={loginStyle.linkTxt}>
-            <OText size={14} space>
-              {t('NEW_ON_PLATFORM', 'New on Ordering?')}
-            </OText>
-            <Pressable onPress={() => onNavigationRedirect('Signup')}>
-              <OText size={14} color={theme.colors.primary}>
-                {registerButtonText}
-              </OText>
-            </Pressable>
-          </View>
-        )}
-
-				{useLoginByCellphone &&
-					loginTab === 'cellphone' &&
-					configs &&
-					Object.keys(configs).length > 0 &&
-					(configs?.twilio_service_enabled?.value === 'true' ||
-						configs?.twilio_service_enabled?.value === '1') && (
-						<>
-              <View
-                style={{
-                  flexDirection: 'row',
-                  width: '100%',
-                  justifyContent: 'space-between',
-                  alignItems: 'center',
-                  marginVertical: 30
-                }}>
-                <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 mBottom={20}>
-								<OButton
-									onClick={handleVerifyCodeClick}
-									text={t('GET_VERIFY_CODE', 'Get Verify Code')}
-									borderColor={theme.colors.primary}
-									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 && (
-            <>
-              <View
-                style={{
-                  flexDirection: 'row',
-                  width: '100%',
-                  justifyContent: 'space-between',
-                  alignItems: 'center',
-                  marginVertical: 30
-                }}>
-                <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>
-                  <FacebookLogin
-                    handleErrors={(err: any) => showToast(ToastType.Error, err)}
-                    handleLoading={(val: boolean) => setIsFBLoading(val)}
-                    handleSuccessFacebookLogin={handleSuccessFacebook}
-                  />
-                  {/* <GoogleLogin
-                    handleErrors={(err: any) => showToast(ToastType.Error, err)}
-                    handleLoading={(val: boolean) => setIsFBLoading(val)}
-                    handleSuccessFacebookLogin={handleSuccessFacebook}
-                  />
-                  <AppleLogin
-                    handleErrors={(err: any) => showToast(ToastType.Error, err)}
-                    handleLoading={(val: boolean) => setIsFBLoading(val)}
-                    handleSuccessFacebookLogin={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>
-				)}
-			</FormSide>
-			<OModal open={isModalVisible} onClose={() => setIsModalVisible(false)}>
-				<VerifyPhone
-					phone={phoneInputData.phone}
-					verifyPhoneState={verifyPhoneState}
-					checkPhoneCodeState={checkPhoneCodeState}
-					handleCheckPhoneCode={handleCheckPhoneCode}
-					setCheckPhoneCodeState={setCheckPhoneCodeState}
-					handleVerifyCodeClick={handleVerifyCodeClick}
-				/>
-			</OModal>
-			<Spinner visible={isFBLoading} />
-		</Container>
-	);
-};
-
-export const LoginForm = (props: any) => {
-	const loginProps = {
-		...props,
-		UIComponent: LoginFormUI,
-	};
-	return <LoginFormController {...loginProps} />;
-};
+import React, { useEffect, useState, useRef } from 'react';
+import { Pressable, StyleSheet, View, Keyboard, ScrollView } from 'react-native';
+import Spinner from 'react-native-loading-spinner-overlay';
+import { useForm, Controller } from 'react-hook-form';
+import { PhoneInputNumber } from '../PhoneInputNumber';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+
+import {
+	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 '../VerifyPhone';
+
+import {
+	Container,
+	ButtonsWrapper,
+	LoginWith,
+	FormSide,
+	FormInput,
+	OTabs,
+	OTab,
+	SocialButtons,
+	OrSeparator,
+	LineSeparator,
+	SkeletonWrapper,
+  TabsContainer,
+} from './styles';
+
+import NavBar from '../NavBar';
+
+import { OText, OButton, OInput, OModal, OIcon } from '../shared';
+import { LoginParams } from '../../types';
+import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
+import { GoogleLogin } from '../GoogleLogin';
+import { AppleLogin } from '../AppleLogin';
+
+const LoginFormUI = (props: LoginParams) => {
+	const {
+		loginTab,
+		formState,
+		navigation,
+		useLoginByEmail,
+		useLoginByCellphone,
+		loginButtonText,
+		forgotButtonText,
+		verifyPhoneState,
+		checkPhoneCodeState,
+		registerButtonText,
+		setCheckPhoneCodeState,
+		handleButtonLoginClick,
+		handleSendVerifyCode,
+		handleCheckPhoneCode,
+		onNavigationRedirect,
+	} = props;
+
+	const [, { showToast }] = useToast();
+	const [, t] = useLanguage();
+	const [{ configs }] = useConfig();
+	const [, { login }] = useSession();
+	const { control, handleSubmit, errors } = useForm();
+	const [passwordSee, setPasswordSee] = useState(false);
+	const [isLoadingVerifyModal, setIsLoadingVerifyModal] = useState(false);
+	const [isModalVisible, setIsModalVisible] = useState(false);
+	const [isFBLoading, setIsFBLoading] = useState(false);
+	const [phoneInputData, setPhoneInputData] = useState({
+		error: '',
+		phone: {
+			country_phone_code: null,
+			cellphone: null,
+		},
+	});
+
+	const theme = useTheme();
+  const scrollRefTab = useRef() as React.MutableRefObject<ScrollView>;
+
+	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,
+		},
+    btnTab: {
+      flex: 1,
+      minWidth: 88,
+      alignItems: 'flex-start',
+      borderBottomWidth: 1,
+    },
+    btnTabText: {
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontSize: 14,
+      marginBottom: 10,
+      paddingLeft: 8,
+      paddingRight: 8,
+    },
+    btn: {
+      borderRadius: 7.6,
+      height: 44,
+    },
+    btnText: {
+      color: theme.colors.inputTextColor,
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontWeight: 'normal',
+      fontSize: 18,
+    },
+    btnFlag: {
+      width: 79,
+      borderWidth: 1,
+      borderRadius: 7.6,
+      marginRight: 9,
+      borderColor: theme.colors.inputSignup,
+    },
+    textForgot: {
+      color: theme.colors.arrowColor,
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontWeight: 'normal',
+      fontSize: 16,
+    },
+    linkTxt: {
+      flexDirection: 'row',
+      justifyContent: 'center',
+    }
+	});
+
+	const inputRef = useRef<any>({});
+
+	const handleChangeTab = (val: string) => {
+		props.handleChangeTab(val);
+		setPasswordSee(false);
+
+    if (loginTab === 'email') {
+      scrollRefTab.current?.scrollToEnd({ animated: true });
+    }
+
+    if (loginTab === 'cellphone') {
+      scrollRefTab.current?.scrollTo({ animated: true });
+    }
+	};
+
+	const onSubmit = (values: any) => {
+		Keyboard.dismiss();
+		if (phoneInputData.error) {
+			showToast(ToastType.Error, phoneInputData.error);
+			return;
+		}
+		handleButtonLoginClick({
+			...values,
+			...phoneInputData.phone,
+		});
+	};
+
+	const handleVerifyCodeClick = () => {
+		if (phoneInputData.error) {
+			showToast(ToastType.Error, phoneInputData.error);
+			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.',
+				),
+			);
+			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().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''));
+	};
+
+	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]);
+
+	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);
+				setIsLoadingVerifyModal(false);
+				return;
+			}
+
+			const okResult = verifyPhoneState.result?.result === 'OK';
+			if (okResult) {
+				!isModalVisible && setIsModalVisible(true);
+				setIsLoadingVerifyModal(false);
+			}
+		}
+	}, [verifyPhoneState]);
+
+	useEffect(() => {
+		if (Object.keys(errors).length > 0) {
+			// Convert all errors in one string to show in toast provider
+			const list = Object.values(errors);
+			let stringError = '';
+			if (phoneInputData.error) {
+				list.unshift({ message: phoneInputData.error });
+			}
+			if (
+				loginTab === 'cellphone' &&
+				!phoneInputData.error &&
+				!phoneInputData.phone.country_phone_code &&
+				!phoneInputData.phone.cellphone
+			) {
+				list.unshift({
+					message: t(
+						'VALIDATION_ERROR_MOBILE_PHONE_REQUIRED',
+						'The field Mobile phone is required.',
+					),
+				});
+			}
+			list.map((item: any, i: number) => {
+				stringError +=
+					i + 1 === list.length ? `- ${item.message}` : `- ${item.message}\n`;
+			});
+			showToast(ToastType.Error, stringError);
+		}
+	}, [errors]);
+
+	return (
+		<Container>
+			<NavBar
+				title={t('LOGIN', 'Login')}
+				onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
+				showCall={false}
+				btnStyle={{ paddingLeft: 0 }}
+				paddingTop={0}
+				isVertical={true}
+			/>
+			<FormSide>
+        {(useLoginByEmail || useLoginByCellphone) && (
+          <LoginWith>
+            <ScrollView
+              ref={scrollRefTab}
+              showsVerticalScrollIndicator={false}
+              showsHorizontalScrollIndicator={false}
+              horizontal
+              style={{
+                borderBottomColor: theme.colors.border,
+                borderBottomWidth: 2
+              }}
+            >
+              <TabsContainer>
+                {useLoginByEmail && (
+                  <Pressable
+                    style={{
+                      ...loginStyle.btnTab,
+                      borderBottomWidth: loginTab === 'email' ? 2 : 0,
+                      borderBottomColor: theme.colors.textNormal,
+                    }}
+                    onPress={() => handleChangeTab('email')}>
+                    <OText
+                      style={loginStyle.btnTabText}
+                      color={
+                        loginTab === 'email'
+                          ? theme.colors.textNormal
+                          : theme.colors.border
+                      }
+                      weight={loginTab === 'email' ? '600' : 'normal'}>
+                      {t('BY_EMAIL', 'by Email')}
+                    </OText>
+                  </Pressable>
+                )}
+
+                {useLoginByCellphone && (
+                  <Pressable
+                    style={{
+                      ...loginStyle.btnTab,
+                      borderBottomWidth: loginTab === 'cellphone' ? 2 : 0,
+                      borderBottomColor: theme.colors.textNormal
+                    }}
+                    onPress={() => handleChangeTab('cellphone')}>
+                    <OText
+                      style={loginStyle.btnTabText}
+                      color={
+                        loginTab === 'cellphone'
+                          ? theme.colors.textNormal
+                          : theme.colors.border
+                      }
+                      weight={loginTab === 'cellphone' ? '600' : 'normal'}>
+                      {t('BY_PHONE', 'by Phone')}
+                    </OText>
+                  </Pressable>
+                )}
+              </TabsContainer>
+            </ScrollView>
+          </LoginWith>
+        )}
+
+				{(useLoginByCellphone || useLoginByEmail) && (
+					<FormInput>
+						{useLoginByEmail && loginTab === 'email' && (
+							<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={() => inputRef.current?.focus()}
+										blurOnSubmit={false}
+									/>
+								)}
+								name="email"
+								rules={{
+									required: 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' && (
+							<View style={{ marginBottom: 28 }}>
+								<PhoneInputNumber
+									data={phoneInputData}
+									handleData={(val: any) => setPhoneInputData(val)}
+									textInputProps={{
+										returnKeyType: 'next',
+										onSubmitEditing: () => inputRef?.current?.focus?.(),
+									}}
+								/>
+							</View>
+						)}
+
+						<Controller
+							control={control}
+							render={({ onChange, value }: any) => (
+								<OInput
+									isSecured={!passwordSee ? true : false}
+									placeholder={t('PASSWORD', 'Password')}
+									style={loginStyle.inputStyle}
+									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}
+											/>
+										)
+									}
+									value={value}
+									forwardRef={inputRef}
+									onChange={(val: any) => onChange(val)}
+									returnKeyType="done"
+									onSubmitEditing={handleSubmit(onSubmit)}
+									blurOnSubmit
+								/>
+							)}
+							name="password"
+							rules={{
+								required: t(
+									'VALIDATION_ERROR_PASSWORD_REQUIRED',
+									'The field Password is required',
+								).replace('_attribute_', t('PASSWORD', 'Password')),
+							}}
+							defaultValue=""
+						/>
+
+            {onNavigationRedirect && forgotButtonText && (
+              <Pressable onPress={() => onNavigationRedirect('Forgot')}>
+                <OText size={14} mBottom={18}>
+                  {forgotButtonText}
+                </OText>
+              </Pressable>
+            )}
+
+						<OButton
+							onClick={handleSubmit(onSubmit)}
+							text={loginButtonText}
+							bgColor={theme.colors.primary}
+							borderColor={theme.colors.primary}
+							textStyle={{ color: 'white' }}
+							imgRightSrc={null}
+							isLoading={formState.loading}
+							style={{ borderRadius: 7.6, marginTop: 10 }}
+						/>
+					</FormInput>
+				)}
+
+        {onNavigationRedirect && registerButtonText && (
+          <View style={loginStyle.linkTxt}>
+            <OText size={14} space>
+              {t('NEW_ON_PLATFORM', 'New on Ordering?')}
+            </OText>
+            <Pressable onPress={() => onNavigationRedirect('Signup')}>
+              <OText size={14} color={theme.colors.primary}>
+                {registerButtonText}
+              </OText>
+            </Pressable>
+          </View>
+        )}
+
+				{useLoginByCellphone &&
+					loginTab === 'cellphone' &&
+					configs &&
+					Object.keys(configs).length > 0 &&
+					(configs?.twilio_service_enabled?.value === 'true' ||
+						configs?.twilio_service_enabled?.value === '1') && (
+						<>
+              <View
+                style={{
+                  flexDirection: 'row',
+                  width: '100%',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  marginVertical: 30
+                }}>
+                <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 mBottom={20}>
+								<OButton
+									onClick={handleVerifyCodeClick}
+									text={t('GET_VERIFY_CODE', 'Get Verify Code')}
+									borderColor={theme.colors.primary}
+									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 && (
+            <>
+              <View
+                style={{
+                  flexDirection: 'row',
+                  width: '100%',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  marginVertical: 30
+                }}>
+                <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>
+                  <FacebookLogin
+                    handleErrors={(err: any) => showToast(ToastType.Error, err)}
+                    handleLoading={(val: boolean) => setIsFBLoading(val)}
+                    handleSuccessFacebookLogin={handleSuccessFacebook}
+                  />
+                  {/* <GoogleLogin
+                    handleErrors={(err: any) => showToast(ToastType.Error, err)}
+                    handleLoading={(val: boolean) => setIsFBLoading(val)}
+                    handleSuccessFacebookLogin={handleSuccessFacebook}
+                  />
+                  <AppleLogin
+                    handleErrors={(err: any) => showToast(ToastType.Error, err)}
+                    handleLoading={(val: boolean) => setIsFBLoading(val)}
+                    handleSuccessFacebookLogin={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>
+				)}
+			</FormSide>
+			<OModal open={isModalVisible} onClose={() => setIsModalVisible(false)}>
+				<VerifyPhone
+					phone={phoneInputData.phone}
+					verifyPhoneState={verifyPhoneState}
+					checkPhoneCodeState={checkPhoneCodeState}
+					handleCheckPhoneCode={handleCheckPhoneCode}
+					setCheckPhoneCodeState={setCheckPhoneCodeState}
+					handleVerifyCodeClick={handleVerifyCodeClick}
+				/>
+			</OModal>
+			<Spinner visible={isFBLoading} />
+		</Container>
+	);
+};
+
+export const LoginForm = (props: any) => {
+	const loginProps = {
+		...props,
+		UIComponent: LoginFormUI,
+	};
+	return <LoginFormController {...loginProps} />;
+};