ordering-ui-react-native 0.25.43-test → 0.26.0

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

@@ -1,946 +1,971 @@
-import React, { useEffect, useState, useRef } from 'react';
-import {
-  Pressable,
-  StyleSheet,
-  Keyboard,
-  View,
-  Dimensions,
-  ScrollView,
-} from 'react-native';
-import { useForm, Controller } from 'react-hook-form';
-import Recaptcha from 'react-native-recaptcha-that-works'
-import ReCaptcha from '@fatnlazycat/react-native-recaptcha-v3'
-import { TouchableOpacity } from 'react-native-gesture-handler';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-import {
-  ToastType,
-  useToast,
-  LoginForm as LoginFormController,
-  useLanguage,
-  useConfig,
-  useApi
-} from 'ordering-components/native';
-import { useTheme } from 'styled-components/native';
-import {
-  LoginWith,
-  ButtonsWrapper,
-  FormInput,
-  TabsContainer,
-  OrSeparator,
-  LineSeparator,
-  RecaptchaButton,
-  TabBtn,
-  OTab
-} from './styles';
-import { _setStoreData } from '../../providers/StoreUtil'
-import { OText, OButton, OInput, OIconButton, OModal } from '../shared';
-import { PhoneInputNumber } from '../PhoneInputNumber';
-import { VerifyPhone } from '../VerifyPhone';
-import { LoginParams } from '../../types';
-
-import { Otp } from './Otp'
-import Alert from '../../../../../src/providers/AlertProvider'
-
-const LoginFormUI = (props: LoginParams) => {
-  const {
-    navigation,
-    formState,
-    handleButtonLoginClick,
-    onNavigationRedirect,
-    loginTab,
-    useLoginByCellphone,
-    useLoginByEmail,
-    handleSendVerifyCode,
-    verifyPhoneState,
-    checkPhoneCodeState,
-    handleCheckPhoneCode,
-    setCheckPhoneCodeState,
-    allowedLevels,
-    useRootPoint,
-    notificationState,
-    handleReCaptcha,
-    enableReCaptcha,
-
-    useLoginOtp,
-		otpType,
-		setOtpType,
-		generateOtpCode,
-		useLoginOtpEmail,
-		useLoginOtpCellphone,
-  } = props;
-
-  const [ordering, { setOrdering }] = useApi();
-  const [, { showToast }] = useToast();
-  const [, t] = useLanguage();
-  const theme = useTheme();
-  const [{ configs }] = useConfig();
-  const { control, handleSubmit, errors, clearErrors } = useForm();
-
-  const scrollRefTab = useRef() as React.MutableRefObject<ScrollView>;
-  const inputRef = useRef<any>(null);
-  const inputMailRef = useRef<any>(null);
-
-  const [projectName, setProjectName] = useState({ name: '', isFocued: false });
-  const [passwordSee, setPasswordSee] = useState(false);
-  const [isLoadingVerifyModal, setIsLoadingVerifyModal] = useState(false);
-  const [isModalVisible, setIsModalVisible] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [phoneInputData, setPhoneInputData] = useState({
-    error: '',
-    phone: {
-      country_phone_code: null,
-      cellphone: null,
-    },
-  });
-  const [windowWidth, setWindowWidth] = useState(
-    parseInt(parseFloat(String(Dimensions.get('window').width)).toFixed(0)),
-  );
-  const [orientation, setOrientation] = useState(
-    Dimensions.get('window').width < Dimensions.get('window').height
-      ? 'Portrait'
-      : 'Landscape',
-  );
-
-  const [submitted, setSubmitted] = useState(false);
-  const [formValues, setFormValues] = useState(null);
-
-  const [recaptchaConfig, setRecaptchaConfig] = useState<any>({})
-  const [recaptchaVerified, setRecaptchaVerified] = useState(false)
-
-  const recaptchaRef = useRef<any>({});
-
-  const [willVerifyOtpState, setWillVerifyOtpState] = useState(false)
-  const [alertState, setAlertState] = useState({ open: false, title: '', content: [] })
-  const isOtpEmail = loginTab === 'otp' && otpType === 'email'
-	const isOtpCellphone = loginTab === 'otp' && otpType === 'cellphone'
-
-
-  const handleOpenRecaptcha = () => {
-    setRecaptchaVerified(false)
-    if (!recaptchaConfig?.siteKey) {
-      showToast(ToastType.Error, t('NO_RECAPTCHA_SITE_KEY', 'The config doesn\'t have recaptcha site key'));
-      return
-    }
-    if (!recaptchaConfig?.baseUrl) {
-      showToast(ToastType.Error, t('NO_RECAPTCHA_BASE_URL', 'The config doesn\'t have recaptcha base url'));
-      return
-    }
-    recaptchaRef.current.open()
-  }
-
-  const onRecaptchaVerify = (token: any) => {
-    setRecaptchaVerified(true)
-    handleReCaptcha({ code: token, version: recaptchaConfig?.version })
-  }
-
-  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(() => {
-    const projectInputInterval = setInterval(() => {
-      if (projectName.name && useRootPoint && projectName.isFocued) {
-        setOrdering({
-          ...ordering,
-          project: projectName.name
-        })
-      }
-    }, 1500)
-    return () => clearInterval(projectInputInterval);
-  }, [projectName])
-
-  const getTraduction = (key: string) => {
-    const keyList: any = {
-      // Add the key and traduction that you need below
-      ERROR_ORDER_WITHOUT_CART: 'The order was placed without a cart',
-      ERROR_INVALID_COUPON: "The coupon doesn't exist",
-      ERROR_IVALID_COUPON_MINIMUM:
-        'You must have more products in your cart to use the coupon',
-      ERROR_ADD_PRODUCT_VERY_FAR_FOR_PICKUP:
-        'The business is too far for order type pickup',
-      ERROR_PLACE_PAY_WITH_CARD2:
-        'An error occurred while trying to pay by card',
-      ERROR_ADD_PRODUCT_BUSINESS_CLOSED: 'The business is closed at the moment',
-      INTERNAL_ERROR: 'Server Error, please wait, we are working to fix it',
-      ERROR_NOT_FOUND_BUSINESSES: 'No businesses found near your location',
-      YOU_DO_NOT_HAVE_PERMISSION: 'You do not have permission',
-      INVALID_CODE: 'Invalid verify code',
-      STRIPE_ERROR: 'Payment service error. Try again later.',
-      ERROR_AUTH_TWILIO_DISABLED: 'Auth error, twilio is disabled',
-      ERROR_CART_SELECT_PAYMETHOD: 'An error occurred with selected pay method',
-      ERROR_YOU_HAVE_ACTIVE_CART: "You can't reorder this cart",
-      ERROR_YOU_HAVE_NOT_CART: 'Cart not found',
-      ERROR_PLACE_PAY_WITH_REDIRECT:
-        'An error occurred while trying to pay by redirect',
-      ERROR_PLACE_PAY_WITH_CARD1:
-        'An error occurred while trying to pay by card',
-      ERROR_PLACE_PAY_WITH_PAYPAL_CAPTURE:
-        'An error occurred while trying to pay by PayPal',
-      ERROR_ADD_PRODUCT_VERY_FAR_FOR_DELIVERY:
-        'Error adding product, very far for delivery',
-      ERROR_AUTH_DRIVER_LOGIN_VALIDATION: 'Error auth driver login validation'
-    };
-
-    return keyList[key] ? t(key, keyList[key]) : t(key);
-  };
-
-  const handleChangeTab = (val: string) => {
-    setPhoneInputData({ ...phoneInputData, error: '' });
-    clearErrors([val]);
-    props.handleChangeTab(val);
-
-    if (loginTab === 'email') {
-      scrollRefTab?.current?.scrollToEnd && scrollRefTab.current?.scrollToEnd({ animated: true });
-    }
-
-    if (loginTab === 'cellphone') {
-      scrollRefTab?.current?.scrollTo && scrollRefTab.current?.scrollTo({ animated: true });
-    }
-  };
-
-  const handleChangeInputEmail = (value: string, onChange: any) => {
-    onChange(value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''));
-  };
-
-  const handleLogin = () => {
-    setLoading(true);
-
-    handleSubmit(onSubmit)();
-  };
-
-  const mainLogin = (values) => {
-    if (loginTab === 'otp') {
-			if (phoneInputData.error && (loginTab !== 'otp' || (otpType === 'cellphone' && loginTab === 'otp'))) {
-				showToast(ToastType.Error, t('INVALID_PHONE_NUMBER', 'Invalid phone number'));
-				return
-			}
-			if (loginTab === 'otp') {
-				generateOtpCode({
-					...values,
-					...phoneInputData.phone
-				})
-			}
-			setWillVerifyOtpState(true)
-		} else {
-			if (phoneInputData.error) {
-				showToast(ToastType.Error, phoneInputData.error);
-				return;
-			}
-			handleButtonLoginClick({
-				...values,
-				...phoneInputData.phone,
-			});
-		}
-  }
-
-  const onSubmit = (values: any) => {
-    Keyboard.dismiss();
-
-    if (phoneInputData.error) {
-      showToast(ToastType.Error, phoneInputData.error);
-      return;
-    }
-
-    if (values?.project_name) {
-      setOrdering({
-        ...ordering,
-        project: values?.project_name
-      })
-      _setStoreData('project_name', values?.project_name)
-      setFormValues({ ...values, ...phoneInputData.phone })
-      setSubmitted(true)
-      return
-    }
-    mainLogin(values)
-  };
-
-  const handleChangeOtpType = (type: string) => {
-		handleChangeTab('otp', type)
-		setOtpType(type)
-	}
-
-	const handleLoginOtp = (code: string) => {
-		handleButtonLoginClick({ code })
-	}
-
-	const closeAlert = () => {
-		setAlertState({
-			open: false,
-			title: '',
-			content: []
-		})
-	}
-
-  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);
-  };
-
-  useEffect(() => {
-    if (!formState?.loading && formState?.result?.error) {
-      if (formState.result?.result?.[0] === 'ERROR_AUTH_VERIFICATION_CODE') {
-        setRecaptchaVerified(false)
-        setSubmitted(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'))
-        return
-      }
-      formState.result?.result && showToast(
-        ToastType.Error,
-        typeof formState.result?.result === 'string'
-          ? formState.result?.result
-          : formState.result?.result[0]
-      )
-      setSubmitted(false)
-    }
-    if (!formState?.loading && !formState?.result?.error) {
-      setWillVerifyOtpState(false)
-    }
-  }, [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]);
-
-  useEffect(() => {
-    if (loading && !formState?.loading) {
-      setLoading(false);
-    }
-  }, [loading]);
-
-  useEffect(() => {
-    if (ordering.project === null || !submitted || !useRootPoint) return
-    const values: any = formValues
-    if (values?.project_name) {
-      delete values.project_name
-    }
-    mainLogin(values)
-    setSubmitted(false)
-  }, [ordering, submitted])
-
-  useEffect(() => {
-		if (checkPhoneCodeState?.result?.error) {
-			setAlertState({
-				open: true,
-				content: t(checkPhoneCodeState?.result?.error, checkPhoneCodeState?.result?.error),
-				title: ''
-			})
-		}
-	}, [checkPhoneCodeState])
-
-  Dimensions.addEventListener('change', ({ window: { width, height } }) => {
-    setWindowWidth(
-      parseInt(parseFloat(String(Dimensions.get('window').width)).toFixed(0)),
-    );
-
-    if (width < height) {
-      setOrientation('Portrait');
-    } else {
-      setOrientation('Landscape');
-    }
-  });
-
-  const styles = StyleSheet.create({
-    container: {
-      justifyContent: 'center',
-      alignItems: 'center',
-      paddingBottom: 40,
-    },
-    header: {
-      marginBottom: 30,
-      justifyContent: 'space-between',
-      width: '100%',
-    },
-    arrowLeft: {
-      maxWidth: 40,
-      height: 25,
-      justifyContent: 'flex-end',
-      marginBottom: 25,
-    },
-    title: {
-      fontFamily: 'Poppins',
-      fontStyle: 'normal',
-      fontWeight: '600',
-      fontSize: 26,
-      color: theme.colors.textGray,
-    },
-    btnTab: {
-      flex: 1,
-      minWidth: 88,
-      alignItems: 'center',
-    },
-    btnTabText: {
-      fontFamily: 'Poppins',
-      fontStyle: 'normal',
-      fontSize: 16,
-      marginBottom: 10,
-      paddingLeft: 8,
-      paddingRight: 8,
-    },
-    input: {
-      color: theme.colors.arrowColor,
-      marginBottom: 20,
-      borderWidth: 1,
-      borderRadius: 7.6,
-      borderColor: theme.colors.inputSignup,
-      backgroundColor: theme.colors.transparent,
-      minHeight: 50,
-      maxHeight : 50
-    },
-    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,
-    },
-
-    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
-		},
-  });
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.header}>
-        <OIconButton
-          icon={theme.images.general.arrow_left}
-          borderColor={theme.colors.clear}
-          iconStyle={{ width: 20, height: 20 }}
-          style={styles.arrowLeft}
-          onClick={() => navigation?.canGoBack() && navigation.goBack()}
-        />
-
-        <OText style={styles.title}>{t('LOGIN', 'Login')}</OText>
-      </View>
-
-      {(Number(useLoginByEmail) + Number(useLoginByCellphone) + Number(useLoginOtpEmail) + Number(useLoginOtpCellphone) > 1) && (
-        <LoginWith>
-          <ScrollView
-            ref={scrollRefTab}
-            showsVerticalScrollIndicator={false}
-            showsHorizontalScrollIndicator={false}
-            horizontal>
-            <TabsContainer width={windowWidth - 42}>
-              {useLoginByEmail && (
-                <Pressable
-                  style={styles.btnTab}
-                  onPress={() => handleChangeTab('email')}>
-                  <OText
-                    style={styles.btnTabText}
-                    color={
-                      loginTab === 'email'
-                        ? theme.colors.textGray
-                        : theme.colors.unselectText
-                    }
-                    weight={loginTab === 'email' ? '600' : 'normal'}>
-                    {t('BY_EMAIL', 'by Email')}
-                  </OText>
-
-                  <View
-                    style={{
-                      width: '100%',
-                      borderBottomColor:
-                        loginTab === 'email'
-                          ? theme.colors.textGray
-                          : theme.colors.tabBar,
-                      borderBottomWidth: 2,
-                    }}></View>
-                </Pressable>
-              )}
-
-              {useLoginByCellphone && (
-                <Pressable
-                  style={styles.btnTab}
-                  onPress={() => handleChangeTab('cellphone')}>
-                  <OText
-                    style={styles.btnTabText}
-                    color={
-                      loginTab === 'cellphone'
-                        ? theme.colors.textGray
-                        : theme.colors.unselectText
-                    }
-                    weight={loginTab === 'cellphone' ? '600' : 'normal'}>
-                    {t('BY_PHONE', 'by Phone')}
-                  </OText>
-
-                  <View
-                    style={{
-                      width: '100%',
-                      borderBottomColor:
-                        loginTab === 'cellphone'
-                          ? theme.colors.textGray
-                          : theme.colors.tabBar,
-                      borderBottomWidth: 2,
-                    }}></View>
-                </Pressable>
-              )}
-
-              {useLoginOtpEmail && (
-								<Pressable
-                  style={styles.btnTab}
-                  onPress={() => handleChangeOtpType('email')}>
-                  <OText
-                    style={styles.btnTabText}
-                    color={
-                      isOtpEmail
-                        ? theme.colors.textNormal
-                        : theme.colors.disabled
-                    }
-                    weight={isOtpEmail ? 'bold' : 'normal'}>
-                    {t('BY_OTP_EMAIL', 'By Otp Email')}
-                  </OText>
-                  <View
-                    style={{
-                      width: '100%',
-                      borderBottomColor:
-                        isOtpEmail
-                          ? theme.colors.textGray
-                          : theme.colors.tabBar,
-                      borderBottomWidth: 2,
-                    }} />
-								</Pressable>
-							)}
-							{useLoginOtpCellphone && (
-								<Pressable
-                  style={styles.btnTab}
-                  onPress={() => handleChangeOtpType('cellphone')}>
-                  <OText
-                    style={styles.btnTabText}
-                    color={
-                      isOtpCellphone
-                        ? theme.colors.textNormal
-                        : theme.colors.disabled
-                    }
-                    weight={isOtpCellphone ? 'bold' : 'normal'}>
-                    {t('BY_OTP_PHONE', 'By Otp Phone')}
-                  </OText>
-                  <View
-                    style={{
-                      width: '100%',
-                      borderBottomColor:
-                      isOtpCellphone
-                          ? theme.colors.textGray
-                          : theme.colors.tabBar,
-                      borderBottomWidth: 2,
-                    }} />
-								</Pressable>
-							)}
-            </TabsContainer>
-          </ScrollView>
-        </LoginWith>
-      )}
-
-      {(useLoginByCellphone || useLoginByEmail || useLoginOtp) && (
-        <FormInput>
-          {useRootPoint && (
-            <Controller
-              control={control}
-              name='project_name'
-              rules={{ required: t(`VALIDATION_ERROR_PROJECT_NAME_REQUIRED`, 'The field project name is required') }}
-              defaultValue=""
-              render={({ onChange, value }: any) => (
-                <OInput
-                  name='project_name'
-                  placeholderTextColor={theme.colors.arrowColor}
-                  placeholder={t('PROJECT_NAME', 'Project Name')}
-                  icon={theme.images.general.project}
-                  iconColor={theme.colors.arrowColor}
-                  onChange={(e: any) => {
-                    setProjectName({ name: e?.target?.value, isFocued: true })
-                    onChange(e?.target?.value);
-                    setSubmitted(false);
-                  }}
-                  selectionColor={theme.colors.primary}
-                  color={theme.colors.textGray}
-                  value={value}
-                  style={styles.input}
-                  returnKeyType='next'
-                  autoCorrect={false}
-                  autoCapitalize='none'
-                  onSubmitEditing={() => inputMailRef.current?.focus()}
-                  blurOnSubmit={false}
-                />
-              )}
-            />
-          )}
-
-          {((useLoginByEmail && loginTab === 'email') || (loginTab === 'otp' && otpType === 'email')) && (
-            <Controller
-              control={control}
-              render={({ onChange, value }: any) => (
-                <OInput
-                  placeholder={t('EMAIL', 'Email')}
-                  placeholderTextColor={theme.colors.arrowColor}
-                  style={styles.input}
-                  icon={theme.images.logos.emailInputIcon}
-                  iconColor={theme.colors.arrowColor}
-                  onChange={(e: any) => {
-                    setProjectName({ ...projectName, isFocued: false })
-                    handleChangeInputEmail(e, onChange);
-                  }}
-                  selectionColor={theme.colors.primary}
-                  color={theme.colors.textGray}
-                  value={value}
-                  autoCapitalize="none"
-                  autoCorrect={false}
-                  type="email-address"
-                  autoCompleteType="email"
-                  forwardRef={inputMailRef}
-                  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') || (loginTab === 'otp' && otpType === 'cellphone')) && (
-            <View style={{ marginBottom: 20 }}>
-              <PhoneInputNumber
-                data={phoneInputData}
-                handleData={(val: any) => setPhoneInputData(val)}
-                flagProps={styles.btnFlag}
-                onSubmitEditing={() => null}
-                textInputProps={{
-                  returnKeyType: 'next',
-                  onSubmitEditing: () => inputRef?.current?.focus?.(),
-                }}
-              />
-            </View>
-          )}
-
-          {loginTab !== 'otp' && (
-            <Controller
-              control={control}
-              render={({ onChange, value }: any) => (
-                <OInput
-                  isSecured={!passwordSee ? true : false}
-                  placeholder={t('PASSWORD', 'Password')}
-                  placeholderTextColor={theme.colors.arrowColor}
-                  style={styles.input}
-                  icon={theme.images.logos.passwordInputIcon}
-                  iconColor={theme.colors.arrowColor}
-                  iconCustomRight={
-                    !passwordSee ? (
-                      <MaterialCommunityIcons
-                        name="eye-outline"
-                        size={24}
-                        color={theme.colors.arrowColor}
-                        onPress={() => setPasswordSee(!passwordSee)}
-                      />
-                    ) : (
-                      <MaterialCommunityIcons
-                        name="eye-off-outline"
-                        size={24}
-                        color={theme.colors.arrowColor}
-                        onPress={() => setPasswordSee(!passwordSee)}
-                      />
-                    )
-                  }
-                  selectionColor={theme.colors.primary}
-                  color={theme.colors.textGray}
-                  value={value}
-                  forwardRef={inputRef}
-                  onChange={(val: any) => onChange(val)}
-                  returnKeyType="done"
-                  onSubmitEditing={() => handleLogin()}
-                  blurOnSubmit
-                />
-              )}
-              name="password"
-              rules={{
-                required: t(
-                  'VALIDATION_ERROR_PASSWORD_REQUIRED',
-                  'The field Password is required',
-                ).replace('_attribute_', t('PASSWORD', 'Password')),
-              }}
-              defaultValue=""
-            />
-          )}
-
-          {onNavigationRedirect && loginTab !== 'otp' && (
-            <Pressable
-              style={{ marginRight: 'auto', marginBottom: 20 }}
-              onPress={() => onNavigationRedirect('Forgot')}>
-              <OText style={styles.textForgot}>
-                {t('FORGOT_YOUR_PASSWORD', 'Forgot your password?')}
-              </OText>
-            </Pressable>
-          )}
-          {(enableReCaptcha && recaptchaConfig?.version) && (
-            <>
-              {recaptchaConfig?.version === 'v3' ? (
-                <ReCaptcha
-                  url={recaptchaConfig?.baseUrl}
-                  siteKey={recaptchaConfig?.siteKey}
-                  containerStyle={{ height: 40 }}
-                  onExecute={onRecaptchaVerify}
-                  reCaptchaType={1}
-                />
-              ) : (
-                <>
-                  <TouchableOpacity
-                    style={{ marginBottom: 15 }}
-                    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={handleLogin}
-            text={loginTab !== 'otp' ? t('LOGIN', 'Login') : t('GET_VERIFY_CODE', 'Get verify code')}
-            bgColor={theme.colors.primary}
-            borderColor={theme.colors.primary}
-            textStyle={styles.btnText}
-            imgRightSrc={null}
-            isLoading={formState?.loading || loading}
-            style={styles.btn}
-          />
-        </FormInput>
-      )}
-
-      {useLoginByCellphone &&
-        loginTab === 'cellphone' &&
-        configs &&
-        Object.keys(configs).length > 0 &&
-        (configs?.twilio_service_enabled?.value === 'true' ||
-          configs?.twilio_service_enabled?.value === '1') && (
-          <>
-            <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')}
-                borderColor={theme.colors.primary}
-                style={styles.btn}
-                imgRightSrc={null}
-                isLoading={isLoadingVerifyModal}
-                indicatorColor={theme.colors.primary}
-              />
-            </ButtonsWrapper>
-          </>
-        )}
-
-      <OModal
-        open={isModalVisible}
-        onClose={() => setIsModalVisible(false)}
-      >
-        <VerifyPhone
-          phone={phoneInputData.phone}
-          verifyPhoneState={verifyPhoneState}
-          checkPhoneCodeState={checkPhoneCodeState}
-          handleCheckPhoneCode={handleCheckPhoneCode}
-          setCheckPhoneCodeState={setCheckPhoneCodeState}
-          handleVerifyCodeClick={handleVerifyCodeClick}
-        />
-      </OModal>
-      <OModal
-				open={willVerifyOtpState}
-				onClose={() => setWillVerifyOtpState(false)}
-				entireModal
-        hideIcons
-				title={t('ENTER_VERIFICATION_CODE', 'Enter verification code')}
-			>
-				<Otp
-					willVerifyOtpState={willVerifyOtpState}
-					setWillVerifyOtpState={setWillVerifyOtpState}
-					handleLoginOtp={handleLoginOtp}
-					onSubmit={handleLogin}
-					setAlertState={setAlertState}
-          formState={formState}
-				/>
-			</OModal>
-			<Alert
-				open={alertState.open}
-				content={alertState.content}
-				title={alertState.title || ''}
-				onAccept={closeAlert}
-				onClose={closeAlert}
-			/>
-    </View>
-  );
-};
-
-export const LoginForm = (props: any) => {
-  const loginProps = {
-    ...props,
-    isRecaptchaEnable: true,
-    UIComponent: LoginFormUI,
-  };
-
-  return <LoginFormController {...loginProps} />;
-};
-
+import React, { useEffect, useState, useRef } from 'react';
+import {
+  Pressable,
+  StyleSheet,
+  Keyboard,
+  View,
+  Dimensions,
+  ScrollView,
+  Platform,
+  NativeModules,
+  Alert as AlertReactNative
+} from 'react-native';
+import { useForm, Controller } from 'react-hook-form';
+import Recaptcha from 'react-native-recaptcha-that-works'
+import ReCaptcha from '@fatnlazycat/react-native-recaptcha-v3'
+import { TouchableOpacity } from 'react-native-gesture-handler';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import {
+  ToastType,
+  useToast,
+  LoginForm as LoginFormController,
+  useLanguage,
+  useConfig,
+  useApi
+} from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
+import {
+  LoginWith,
+  ButtonsWrapper,
+  FormInput,
+  TabsContainer,
+  OrSeparator,
+  LineSeparator,
+  RecaptchaButton,
+  TabBtn,
+  OTab
+} from './styles';
+import { _setStoreData } from '../../providers/StoreUtil'
+import { OText, OButton, OInput, OIconButton, OModal } from '../shared';
+import { PhoneInputNumber } from '../PhoneInputNumber';
+import { VerifyPhone } from '../VerifyPhone';
+import { LoginParams } from '../../types';
+
+import { Otp } from './Otp'
+import Alert from '../../../../../src/providers/AlertProvider'
+
+const LoginFormUI = (props: LoginParams) => {
+  const {
+    navigation,
+    formState,
+    handleButtonLoginClick,
+    onNavigationRedirect,
+    loginTab,
+    useLoginByCellphone,
+    useLoginByEmail,
+    handleSendVerifyCode,
+    verifyPhoneState,
+    checkPhoneCodeState,
+    handleCheckPhoneCode,
+    setCheckPhoneCodeState,
+    allowedLevels,
+    useRootPoint,
+    notificationState,
+    handleReCaptcha,
+    enableReCaptcha,
+
+    useLoginOtp,
+    otpType,
+    setOtpType,
+    generateOtpCode,
+    useLoginOtpEmail,
+    useLoginOtpCellphone,
+    validateDeveloperMode
+  } = props;
+
+  const [ordering, { setOrdering }] = useApi();
+  const [, { showToast }] = useToast();
+  const [, t] = useLanguage();
+  const theme = useTheme();
+  const [{ configs }] = useConfig();
+  const { control, handleSubmit, errors, clearErrors } = useForm();
+
+  const scrollRefTab = useRef() as React.MutableRefObject<ScrollView>;
+  const inputRef = useRef<any>(null);
+  const inputMailRef = useRef<any>(null);
+
+  const [projectName, setProjectName] = useState({ name: '', isFocued: false });
+  const [passwordSee, setPasswordSee] = useState(false);
+  const [isLoadingVerifyModal, setIsLoadingVerifyModal] = useState(false);
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [phoneInputData, setPhoneInputData] = useState({
+    error: '',
+    phone: {
+      country_phone_code: null,
+      cellphone: null,
+    },
+  });
+  const [windowWidth, setWindowWidth] = useState(
+    parseInt(parseFloat(String(Dimensions.get('window').width)).toFixed(0)),
+  );
+  const [orientation, setOrientation] = useState(
+    Dimensions.get('window').width < Dimensions.get('window').height
+      ? 'Portrait'
+      : 'Landscape',
+  );
+
+  const [submitted, setSubmitted] = useState(false);
+  const [formValues, setFormValues] = useState(null);
+
+  const [recaptchaConfig, setRecaptchaConfig] = useState<any>({})
+  const [recaptchaVerified, setRecaptchaVerified] = useState(false)
+
+  const recaptchaRef = useRef<any>({});
+
+  const [willVerifyOtpState, setWillVerifyOtpState] = useState(false)
+  const [alertState, setAlertState] = useState({ open: false, title: '', content: [] })
+  const isOtpEmail = loginTab === 'otp' && otpType === 'email'
+  const isOtpCellphone = loginTab === 'otp' && otpType === 'cellphone'
+
+
+  const handleOpenRecaptcha = () => {
+    setRecaptchaVerified(false)
+    if (!recaptchaConfig?.siteKey) {
+      showToast(ToastType.Error, t('NO_RECAPTCHA_SITE_KEY', 'The config doesn\'t have recaptcha site key'));
+      return
+    }
+    if (!recaptchaConfig?.baseUrl) {
+      showToast(ToastType.Error, t('NO_RECAPTCHA_BASE_URL', 'The config doesn\'t have recaptcha base url'));
+      return
+    }
+    recaptchaRef.current.open()
+  }
+
+  const onRecaptchaVerify = (token: any) => {
+    setRecaptchaVerified(true)
+    handleReCaptcha({ code: token, version: recaptchaConfig?.version })
+  }
+
+  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(() => {
+    const projectInputInterval = setInterval(() => {
+      if (projectName.name && useRootPoint && projectName.isFocued) {
+        setOrdering({
+          ...ordering,
+          project: projectName.name
+        })
+      }
+    }, 1500)
+    return () => clearInterval(projectInputInterval);
+  }, [projectName])
+
+  const getTraduction = (key: string) => {
+    const keyList: any = {
+      // Add the key and traduction that you need below
+      ERROR_ORDER_WITHOUT_CART: 'The order was placed without a cart',
+      ERROR_INVALID_COUPON: "The coupon doesn't exist",
+      ERROR_IVALID_COUPON_MINIMUM:
+        'You must have more products in your cart to use the coupon',
+      ERROR_ADD_PRODUCT_VERY_FAR_FOR_PICKUP:
+        'The business is too far for order type pickup',
+      ERROR_PLACE_PAY_WITH_CARD2:
+        'An error occurred while trying to pay by card',
+      ERROR_ADD_PRODUCT_BUSINESS_CLOSED: 'The business is closed at the moment',
+      INTERNAL_ERROR: 'Server Error, please wait, we are working to fix it',
+      ERROR_NOT_FOUND_BUSINESSES: 'No businesses found near your location',
+      YOU_DO_NOT_HAVE_PERMISSION: 'You do not have permission',
+      INVALID_CODE: 'Invalid verify code',
+      STRIPE_ERROR: 'Payment service error. Try again later.',
+      ERROR_AUTH_TWILIO_DISABLED: 'Auth error, twilio is disabled',
+      ERROR_CART_SELECT_PAYMETHOD: 'An error occurred with selected pay method',
+      ERROR_YOU_HAVE_ACTIVE_CART: "You can't reorder this cart",
+      ERROR_YOU_HAVE_NOT_CART: 'Cart not found',
+      ERROR_PLACE_PAY_WITH_REDIRECT:
+        'An error occurred while trying to pay by redirect',
+      ERROR_PLACE_PAY_WITH_CARD1:
+        'An error occurred while trying to pay by card',
+      ERROR_PLACE_PAY_WITH_PAYPAL_CAPTURE:
+        'An error occurred while trying to pay by PayPal',
+      ERROR_ADD_PRODUCT_VERY_FAR_FOR_DELIVERY:
+        'Error adding product, very far for delivery',
+      ERROR_AUTH_DRIVER_LOGIN_VALIDATION: 'Error auth driver login validation'
+    };
+
+    return keyList[key] ? t(key, keyList[key]) : t(key);
+  };
+
+  const handleChangeTab = (val: string) => {
+    setPhoneInputData({ ...phoneInputData, error: '' });
+    clearErrors([val]);
+    props.handleChangeTab(val);
+
+    if (loginTab === 'email') {
+      scrollRefTab?.current?.scrollToEnd && scrollRefTab.current?.scrollToEnd({ animated: true });
+    }
+
+    if (loginTab === 'cellphone') {
+      scrollRefTab?.current?.scrollTo && scrollRefTab.current?.scrollTo({ animated: true });
+    }
+  };
+
+  const handleChangeInputEmail = (value: string, onChange: any) => {
+    onChange(value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''));
+  };
+
+  const handleLogin = () => {
+    setLoading(true);
+
+    handleSubmit(onSubmit)();
+  };
+
+  const mainLogin = (values) => {
+    if (loginTab === 'otp') {
+      if (phoneInputData.error && (loginTab !== 'otp' || (otpType === 'cellphone' && loginTab === 'otp'))) {
+        showToast(ToastType.Error, t('INVALID_PHONE_NUMBER', 'Invalid phone number'));
+        return
+      }
+      if (loginTab === 'otp') {
+        generateOtpCode({
+          ...values,
+          ...phoneInputData.phone
+        })
+      }
+      setWillVerifyOtpState(true)
+    } else {
+      if (phoneInputData.error) {
+        showToast(ToastType.Error, phoneInputData.error);
+        return;
+      }
+      handleButtonLoginClick({
+        ...values,
+        ...phoneInputData.phone,
+      });
+    }
+  }
+
+  const isDeveloperModeEnabled = async (): Promise<boolean> => {
+    if (Platform.OS === 'android') {
+      return NativeModules.DeveloperOptions?.isDeveloperModeEnabled?.();
+    }
+    return false
+  }
+
+  const onSubmit = async (values: any) => {
+    Keyboard.dismiss();
+
+    if (phoneInputData.error) {
+      showToast(ToastType.Error, phoneInputData.error);
+      return;
+    }
+    if (validateDeveloperMode) {
+      const isDeveloperMode = await isDeveloperModeEnabled()
+      if (isDeveloperMode) {
+        AlertReactNative.alert(
+          t('DEVELOPER_MODE', 'Developer mode'),
+          t('PLEASE_DISABLE_DEVELOPER_MODE', 'Please disable developer mode for sign in'),
+          [{
+            text: t('GO_TO_SETTINGS', 'Go to settings'),
+            onPress: async () => await NativeModules.DeveloperOptions?.openDeveloperSettings(),
+          },
+          { text: 'OK', onPress: () => { } },]
+        )
+        return
+      }
+    }
+    if (values?.project_name) {
+      setOrdering({
+        ...ordering,
+        project: values?.project_name
+      })
+      _setStoreData('project_name', values?.project_name)
+      setFormValues({ ...values, ...phoneInputData.phone })
+      setSubmitted(true)
+      return
+    }
+    mainLogin(values)
+  };
+
+  const handleChangeOtpType = (type: string) => {
+    handleChangeTab('otp', type)
+    setOtpType(type)
+  }
+
+  const handleLoginOtp = (code: string) => {
+    handleButtonLoginClick({ code })
+  }
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      title: '',
+      content: []
+    })
+  }
+
+  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);
+  };
+
+  useEffect(() => {
+    if (!formState?.loading && formState?.result?.error) {
+      if (formState.result?.result?.[0] === 'ERROR_AUTH_VERIFICATION_CODE') {
+        setRecaptchaVerified(false)
+        setSubmitted(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'))
+        return
+      }
+      formState.result?.result && showToast(
+        ToastType.Error,
+        typeof formState.result?.result === 'string'
+          ? formState.result?.result
+          : formState.result?.result[0]
+      )
+      setSubmitted(false)
+    }
+    if (!formState?.loading && !formState?.result?.error) {
+      setWillVerifyOtpState(false)
+    }
+  }, [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]);
+
+  useEffect(() => {
+    if (loading && !formState?.loading) {
+      setLoading(false);
+    }
+  }, [loading]);
+
+  useEffect(() => {
+    if (ordering.project === null || !submitted || !useRootPoint) return
+    const values: any = formValues
+    if (values?.project_name) {
+      delete values.project_name
+    }
+    mainLogin(values)
+    setSubmitted(false)
+  }, [ordering, submitted])
+
+  useEffect(() => {
+    if (checkPhoneCodeState?.result?.error) {
+      setAlertState({
+        open: true,
+        content: t(checkPhoneCodeState?.result?.error, checkPhoneCodeState?.result?.error),
+        title: ''
+      })
+    }
+  }, [checkPhoneCodeState])
+
+  Dimensions.addEventListener('change', ({ window: { width, height } }) => {
+    setWindowWidth(
+      parseInt(parseFloat(String(Dimensions.get('window').width)).toFixed(0)),
+    );
+
+    if (width < height) {
+      setOrientation('Portrait');
+    } else {
+      setOrientation('Landscape');
+    }
+  });
+
+  const styles = StyleSheet.create({
+    container: {
+      justifyContent: 'center',
+      alignItems: 'center',
+      paddingBottom: 40,
+    },
+    header: {
+      marginBottom: 30,
+      justifyContent: 'space-between',
+      width: '100%',
+    },
+    arrowLeft: {
+      maxWidth: 40,
+      height: 25,
+      justifyContent: 'flex-end',
+      marginBottom: 25,
+    },
+    title: {
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontWeight: '600',
+      fontSize: 26,
+      color: theme.colors.textGray,
+    },
+    btnTab: {
+      flex: 1,
+      minWidth: 88,
+      alignItems: 'center',
+    },
+    btnTabText: {
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontSize: 16,
+      marginBottom: 10,
+      paddingLeft: 8,
+      paddingRight: 8,
+    },
+    input: {
+      color: theme.colors.arrowColor,
+      marginBottom: 20,
+      borderWidth: 1,
+      borderRadius: 7.6,
+      borderColor: theme.colors.inputSignup,
+      backgroundColor: theme.colors.transparent,
+      minHeight: 50,
+      maxHeight: 50
+    },
+    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,
+    },
+
+    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
+    },
+  });
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <OIconButton
+          icon={theme.images.general.arrow_left}
+          borderColor={theme.colors.clear}
+          iconStyle={{ width: 20, height: 20 }}
+          style={styles.arrowLeft}
+          onClick={() => navigation?.canGoBack() && navigation.goBack()}
+        />
+
+        <OText style={styles.title}>{t('LOGIN', 'Login')}</OText>
+      </View>
+
+      {(Number(useLoginByEmail) + Number(useLoginByCellphone) + Number(useLoginOtpEmail) + Number(useLoginOtpCellphone) > 1) && (
+        <LoginWith>
+          <ScrollView
+            ref={scrollRefTab}
+            showsVerticalScrollIndicator={false}
+            showsHorizontalScrollIndicator={false}
+            horizontal>
+            <TabsContainer width={windowWidth - 42}>
+              {useLoginByEmail && (
+                <Pressable
+                  style={styles.btnTab}
+                  onPress={() => handleChangeTab('email')}>
+                  <OText
+                    style={styles.btnTabText}
+                    color={
+                      loginTab === 'email'
+                        ? theme.colors.textGray
+                        : theme.colors.unselectText
+                    }
+                    weight={loginTab === 'email' ? '600' : 'normal'}>
+                    {t('BY_EMAIL', 'by Email')}
+                  </OText>
+
+                  <View
+                    style={{
+                      width: '100%',
+                      borderBottomColor:
+                        loginTab === 'email'
+                          ? theme.colors.textGray
+                          : theme.colors.tabBar,
+                      borderBottomWidth: 2,
+                    }}></View>
+                </Pressable>
+              )}
+
+              {useLoginByCellphone && (
+                <Pressable
+                  style={styles.btnTab}
+                  onPress={() => handleChangeTab('cellphone')}>
+                  <OText
+                    style={styles.btnTabText}
+                    color={
+                      loginTab === 'cellphone'
+                        ? theme.colors.textGray
+                        : theme.colors.unselectText
+                    }
+                    weight={loginTab === 'cellphone' ? '600' : 'normal'}>
+                    {t('BY_PHONE', 'by Phone')}
+                  </OText>
+
+                  <View
+                    style={{
+                      width: '100%',
+                      borderBottomColor:
+                        loginTab === 'cellphone'
+                          ? theme.colors.textGray
+                          : theme.colors.tabBar,
+                      borderBottomWidth: 2,
+                    }}></View>
+                </Pressable>
+              )}
+
+              {useLoginOtpEmail && (
+                <Pressable
+                  style={styles.btnTab}
+                  onPress={() => handleChangeOtpType('email')}>
+                  <OText
+                    style={styles.btnTabText}
+                    color={
+                      isOtpEmail
+                        ? theme.colors.textNormal
+                        : theme.colors.disabled
+                    }
+                    weight={isOtpEmail ? 'bold' : 'normal'}>
+                    {t('BY_OTP_EMAIL', 'By Otp Email')}
+                  </OText>
+                  <View
+                    style={{
+                      width: '100%',
+                      borderBottomColor:
+                        isOtpEmail
+                          ? theme.colors.textGray
+                          : theme.colors.tabBar,
+                      borderBottomWidth: 2,
+                    }} />
+                </Pressable>
+              )}
+              {useLoginOtpCellphone && (
+                <Pressable
+                  style={styles.btnTab}
+                  onPress={() => handleChangeOtpType('cellphone')}>
+                  <OText
+                    style={styles.btnTabText}
+                    color={
+                      isOtpCellphone
+                        ? theme.colors.textNormal
+                        : theme.colors.disabled
+                    }
+                    weight={isOtpCellphone ? 'bold' : 'normal'}>
+                    {t('BY_OTP_PHONE', 'By Otp Phone')}
+                  </OText>
+                  <View
+                    style={{
+                      width: '100%',
+                      borderBottomColor:
+                        isOtpCellphone
+                          ? theme.colors.textGray
+                          : theme.colors.tabBar,
+                      borderBottomWidth: 2,
+                    }} />
+                </Pressable>
+              )}
+            </TabsContainer>
+          </ScrollView>
+        </LoginWith>
+      )}
+
+      {(useLoginByCellphone || useLoginByEmail || useLoginOtp) && (
+        <FormInput>
+          {useRootPoint && (
+            <Controller
+              control={control}
+              name='project_name'
+              rules={{ required: t(`VALIDATION_ERROR_PROJECT_NAME_REQUIRED`, 'The field project name is required') }}
+              defaultValue=""
+              render={({ onChange, value }: any) => (
+                <OInput
+                  name='project_name'
+                  placeholderTextColor={theme.colors.arrowColor}
+                  placeholder={t('PROJECT_NAME', 'Project Name')}
+                  icon={theme.images.general.project}
+                  iconColor={theme.colors.arrowColor}
+                  onChange={(e: any) => {
+                    setProjectName({ name: e?.target?.value, isFocued: true })
+                    onChange(e?.target?.value);
+                    setSubmitted(false);
+                  }}
+                  selectionColor={theme.colors.primary}
+                  color={theme.colors.textGray}
+                  value={value}
+                  style={styles.input}
+                  returnKeyType='next'
+                  autoCorrect={false}
+                  autoCapitalize='none'
+                  onSubmitEditing={() => inputMailRef.current?.focus()}
+                  blurOnSubmit={false}
+                />
+              )}
+            />
+          )}
+
+          {((useLoginByEmail && loginTab === 'email') || (loginTab === 'otp' && otpType === 'email')) && (
+            <Controller
+              control={control}
+              render={({ onChange, value }: any) => (
+                <OInput
+                  placeholder={t('EMAIL', 'Email')}
+                  placeholderTextColor={theme.colors.arrowColor}
+                  style={styles.input}
+                  icon={theme.images.logos.emailInputIcon}
+                  iconColor={theme.colors.arrowColor}
+                  onChange={(e: any) => {
+                    setProjectName({ ...projectName, isFocued: false })
+                    handleChangeInputEmail(e, onChange);
+                  }}
+                  selectionColor={theme.colors.primary}
+                  color={theme.colors.textGray}
+                  value={value}
+                  autoCapitalize="none"
+                  autoCorrect={false}
+                  type="email-address"
+                  autoCompleteType="email"
+                  forwardRef={inputMailRef}
+                  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') || (loginTab === 'otp' && otpType === 'cellphone')) && (
+            <View style={{ marginBottom: 20 }}>
+              <PhoneInputNumber
+                data={phoneInputData}
+                handleData={(val: any) => setPhoneInputData(val)}
+                flagProps={styles.btnFlag}
+                onSubmitEditing={() => null}
+                textInputProps={{
+                  returnKeyType: 'next',
+                  onSubmitEditing: () => inputRef?.current?.focus?.(),
+                }}
+              />
+            </View>
+          )}
+
+          {loginTab !== 'otp' && (
+            <Controller
+              control={control}
+              render={({ onChange, value }: any) => (
+                <OInput
+                  isSecured={!passwordSee ? true : false}
+                  placeholder={t('PASSWORD', 'Password')}
+                  placeholderTextColor={theme.colors.arrowColor}
+                  style={styles.input}
+                  icon={theme.images.logos.passwordInputIcon}
+                  iconColor={theme.colors.arrowColor}
+                  iconCustomRight={
+                    !passwordSee ? (
+                      <MaterialCommunityIcons
+                        name="eye-outline"
+                        size={24}
+                        color={theme.colors.arrowColor}
+                        onPress={() => setPasswordSee(!passwordSee)}
+                      />
+                    ) : (
+                      <MaterialCommunityIcons
+                        name="eye-off-outline"
+                        size={24}
+                        color={theme.colors.arrowColor}
+                        onPress={() => setPasswordSee(!passwordSee)}
+                      />
+                    )
+                  }
+                  selectionColor={theme.colors.primary}
+                  color={theme.colors.textGray}
+                  value={value}
+                  forwardRef={inputRef}
+                  onChange={(val: any) => onChange(val)}
+                  returnKeyType="done"
+                  onSubmitEditing={() => handleLogin()}
+                  blurOnSubmit
+                />
+              )}
+              name="password"
+              rules={{
+                required: t(
+                  'VALIDATION_ERROR_PASSWORD_REQUIRED',
+                  'The field Password is required',
+                ).replace('_attribute_', t('PASSWORD', 'Password')),
+              }}
+              defaultValue=""
+            />
+          )}
+
+          {onNavigationRedirect && loginTab !== 'otp' && (
+            <Pressable
+              style={{ marginRight: 'auto', marginBottom: 20 }}
+              onPress={() => onNavigationRedirect('Forgot')}>
+              <OText style={styles.textForgot}>
+                {t('FORGOT_YOUR_PASSWORD', 'Forgot your password?')}
+              </OText>
+            </Pressable>
+          )}
+          {(enableReCaptcha && recaptchaConfig?.version) && (
+            <>
+              {recaptchaConfig?.version === 'v3' ? (
+                <ReCaptcha
+                  url={recaptchaConfig?.baseUrl}
+                  siteKey={recaptchaConfig?.siteKey}
+                  containerStyle={{ height: 40 }}
+                  onExecute={onRecaptchaVerify}
+                  reCaptchaType={1}
+                />
+              ) : (
+                <>
+                  <TouchableOpacity
+                    style={{ marginBottom: 15 }}
+                    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={handleLogin}
+            text={loginTab !== 'otp' ? t('LOGIN', 'Login') : t('GET_VERIFY_CODE', 'Get verify code')}
+            bgColor={theme.colors.primary}
+            borderColor={theme.colors.primary}
+            textStyle={styles.btnText}
+            imgRightSrc={null}
+            isLoading={formState?.loading || loading}
+            style={styles.btn}
+          />
+        </FormInput>
+      )}
+
+      {useLoginByCellphone &&
+        loginTab === 'cellphone' &&
+        configs &&
+        Object.keys(configs).length > 0 &&
+        (configs?.twilio_service_enabled?.value === 'true' ||
+          configs?.twilio_service_enabled?.value === '1') && (
+          <>
+            <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')}
+                borderColor={theme.colors.primary}
+                style={styles.btn}
+                imgRightSrc={null}
+                isLoading={isLoadingVerifyModal}
+                indicatorColor={theme.colors.primary}
+              />
+            </ButtonsWrapper>
+          </>
+        )}
+
+      <OModal
+        open={isModalVisible}
+        onClose={() => setIsModalVisible(false)}
+      >
+        <VerifyPhone
+          phone={phoneInputData.phone}
+          verifyPhoneState={verifyPhoneState}
+          checkPhoneCodeState={checkPhoneCodeState}
+          handleCheckPhoneCode={handleCheckPhoneCode}
+          setCheckPhoneCodeState={setCheckPhoneCodeState}
+          handleVerifyCodeClick={handleVerifyCodeClick}
+        />
+      </OModal>
+      <OModal
+        open={willVerifyOtpState}
+        onClose={() => setWillVerifyOtpState(false)}
+        entireModal
+        hideIcons
+        title={t('ENTER_VERIFICATION_CODE', 'Enter verification code')}
+      >
+        <Otp
+          willVerifyOtpState={willVerifyOtpState}
+          setWillVerifyOtpState={setWillVerifyOtpState}
+          handleLoginOtp={handleLoginOtp}
+          onSubmit={handleLogin}
+          setAlertState={setAlertState}
+          formState={formState}
+        />
+      </OModal>
+      <Alert
+        open={alertState.open}
+        content={alertState.content}
+        title={alertState.title || ''}
+        onAccept={closeAlert}
+        onClose={closeAlert}
+      />
+    </View>
+  );
+};
+
+export const LoginForm = (props: any) => {
+  const loginProps = {
+    ...props,
+    isRecaptchaEnable: true,
+    UIComponent: LoginFormUI,
+  };
+
+  return <LoginFormController {...loginProps} />;
+};
+