ordering-ui-react-native 0.24.43-test → 0.25.1

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

@@ -1,530 +1,530 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { View, StyleSheet, Keyboard } from 'react-native';
-import { useForm, Controller } from 'react-hook-form';
-import Spinner from 'react-native-loading-spinner-overlay';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-import {
-  SignupForm as SignUpController,
-  useLanguage,
-  ToastType,
-  useToast,
-} from 'ordering-components/native';
-import { useTheme } from 'styled-components/native';
-import { FormInput } from './styles';
-import { PhoneInputNumber } from '../PhoneInputNumber';
-import { VerifyPhone } from '../VerifyPhone';
-import { OButton, OInput, OModal, OIconButton, OText } from '../shared';
-import { _removeStoreData } from '../../providers/StoreUtil';
-import { SignupParams } from '../../types';
-import { sortInputFields } from '../../utils';
-
-const SignupFormUI = (props: SignupParams) => {
-  const {
-    navigation,
-    formState,
-    validationFields,
-    showField,
-    isRequiredField,
-    useSignupByCellphone,
-    handleSuccessSignup,
-    handleButtonSignupClick,
-    verifyPhoneState,
-    checkPhoneCodeState,
-    setCheckPhoneCodeState,
-    handleSendVerifyCode,
-    handleCheckPhoneCode,
-    signupLevel,
-    // notificationState,
-  } = props;
-
-  const notValidationFields = [
-    'coupon',
-    'driver_tip',
-    'mobile_phone',
-    'address',
-    'address_notes',
-    'middle_name',
-    'lastname',
-    'second_lastname',
-  ];
-
-  const showInputPhoneNumber =
-    validationFields?.fields?.checkout?.cellphone?.enabled ?? false;
-
-  const theme = useTheme();
-  const [, { showToast }] = useToast();
-  const [, t] = useLanguage();
-  const { control, handleSubmit, errors } = useForm();
-
-  const [passwordSee, setPasswordSee] = useState(false);
-  const [formValues, setFormValues] = useState(null);
-  const [isModalVisible, setIsModalVisible] = useState(false);
-  const [isLoadingVerifyModal, setIsLoadingVerifyModal] = useState(false);
-  const [phoneInputData, setPhoneInputData] = useState({
-    error: '',
-    phone: {
-      country_phone_code: null,
-      cellphone: null,
-    },
-  });
-
-  const nameRef = useRef<any>(null);
-  const lastnameRef = useRef<any>(null);
-  const middleNameRef = useRef<any>(null);
-  const secondLastnameRef = useRef<any>(null);
-  const emailRef = useRef<any>(null);
-  const phoneRef = useRef<any>(null);
-  const passwordRef = useRef<any>(null);
-
-  const handleRefs = (ref: any, code: string) => {
-    switch (code) {
-      case 'name': {
-        nameRef.current = ref;
-        break;
-      }
-      case 'middle_name': {
-        middleNameRef.current = ref;
-      }
-      case 'lastname': {
-        lastnameRef.current = ref;
-        break;
-      }
-      case 'second_lastname': {
-        secondLastnameRef.current = ref;
-        break;
-      }
-      case 'email': {
-        emailRef.current = ref;
-        break;
-      }
-    }
-  };
-
-  const handleFocusRef = (code: string) => {
-    switch (code) {
-      case 'name': {
-        nameRef?.current?.focus();
-        break;
-      }
-      case 'middle_name': {
-        middleNameRef?.current?.focus();
-        break;
-      }
-      case 'lastname': {
-        lastnameRef?.current?.focus();
-        break;
-      }
-      case 'second_lastname': {
-        secondLastnameRef?.current?.focus();
-        break;
-      }
-      case 'email': {
-        emailRef?.current?.focus();
-        break;
-      }
-    }
-  };
-
-  const getNextFieldCode = (index: number) => {
-    const fields = sortInputFields({
-      values: validationFields?.fields?.checkout,
-    })?.filter(
-      (field: any) =>
-        !notValidationFields.includes(field.code) && showField(field.code),
-    );
-    return fields[index + 1]?.code;
-  };
-
-  const handleSignup = () => {
-    handleSubmit(onSubmit)();
-  };
-
-  const onSubmit = (values: any) => {
-    Keyboard.dismiss();
-
-    if (phoneInputData.error) {
-      showToast(ToastType.Error, phoneInputData.error);
-      return;
-    }
-
-    if (
-      !phoneInputData.phone.country_phone_code &&
-      !phoneInputData.phone.cellphone &&
-      validationFields?.fields?.checkout?.cellphone?.enabled &&
-      validationFields?.fields?.checkout?.cellphone?.required
-    ) {
-      showToast(
-        ToastType.Error,
-        t(
-          'VALIDATION_ERROR_MOBILE_PHONE_REQUIRED',
-          'The field Mobile phone is required.',
-        ),
-      );
-      return;
-    }
-
-    if (!useSignupByCellphone) {
-      handleButtonSignupClick &&
-        handleButtonSignupClick({
-          ...values,
-          ...phoneInputData.phone,
-          level: signupLevel,
-        });
-
-      if (
-        !formState.loading &&
-        formState.result.result &&
-        !formState.result.error
-      ) {
-        handleSuccessSignup && handleSuccessSignup(formState.result.result);
-      }
-      return;
-    }
-
-    setFormValues(values);
-    handleVerifyCodeClick(values);
-  };
-
-  const handleVerifyCodeClick = (values: any) => {
-    const formData = values || formValues;
-
-    handleSendVerifyCode &&
-      handleSendVerifyCode({
-        ...formData,
-        ...phoneInputData.phone,
-      });
-
-    setIsLoadingVerifyModal(true);
-  };
-
-  // get object with rules for hook form inputs
-  const getInputRules = (field: any) => {
-    const rules: any = {
-      required: isRequiredField(field.code)
-        ? t(
-            `VALIDATION_ERROR_${field.code.toUpperCase()}_REQUIRED`,
-            `${field.name} is required`,
-          ).replace('_attribute_', t(field.name, field.code))
-        : null,
-    };
-
-    if (field.code && field.code === 'email') {
-      rules.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'),
-        ),
-      };
-    }
-    return rules;
-  };
-
-  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, formState.result?.result[0]);
-      setIsLoadingVerifyModal(false);
-    }
-  }, [formState]);
-
-  useEffect(() => {
-    if (Object.keys(errors).length > 0) {
-      // Convert all errors in one string to show in toast provider
-      const list = Object.values(errors);
-
-      if (phoneInputData.error) {
-        list.push({ message: phoneInputData.error });
-      }
-
-      if (
-        !phoneInputData.error &&
-        !phoneInputData.phone.country_phone_code &&
-        !phoneInputData.phone.cellphone &&
-        validationFields?.fields?.checkout?.cellphone?.enabled &&
-        validationFields?.fields?.checkout?.cellphone?.required
-      ) {
-        list.push({
-          message: t(
-            'VALIDATION_ERROR_MOBILE_PHONE_REQUIRED',
-            'The field Mobile phone is required.',
-          ),
-        });
-      }
-
-      let stringError = '';
-      list.map((item: any, i: number) => {
-        stringError +=
-          i + 1 === list.length ? `- ${item.message}` : `- ${item.message}\n`;
-      });
-
-      showToast(ToastType.Error, stringError);
-      setIsLoadingVerifyModal(false);
-    }
-  }, [errors]);
-
-  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]);
-
-  const styles = StyleSheet.create({
-    header: {
-      marginBottom: 30,
-      justifyContent: 'space-between',
-    },
-    arrowLeft: {
-      maxWidth: 40,
-      height: 25,
-      justifyContent: 'flex-end',
-      marginBottom: 25,
-    },
-    title: {
-      fontFamily: 'Poppins',
-      fontStyle: 'normal',
-      fontWeight: '600',
-      fontSize: 26,
-      color: theme.colors.textGray,
-    },
-    btn: {
-      borderRadius: 7.6,
-      height: 44,
-    },
-    btnText: {
-      color: theme.colors.inputTextColor,
-      fontFamily: 'Poppins',
-      fontStyle: 'normal',
-      fontWeight: 'normal',
-      fontSize: 18,
-    },
-    btnFlag: {
-      borderWidth: 1,
-      borderRadius: 7.6,
-      marginRight: 9,
-      borderColor: theme.colors.inputSignup,
-    },
-    input: {
-      color: theme.colors.inputTextColor,
-      marginBottom: 20,
-      borderWidth: 1,
-      borderRadius: 7.6,
-      borderColor: theme.colors.inputSignup,
-      backgroundColor: theme.colors.transparent,
-    },
-  });
-
-  return (
-    <View>
-      <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('SIGNUP', 'Sign Up')}</OText>
-      </View>
-
-      <FormInput>
-        {!(validationFields?.loading && validationFields?.fields?.checkout) ? (
-          <>
-            {sortInputFields({
-              values: validationFields?.fields?.checkout,
-            }).map(
-              (field: any, i: number) =>
-                !notValidationFields.includes(field.code) &&
-                showField &&
-                showField(field.code) && (
-                  <Controller
-                    key={field.id}
-                    control={control}
-                    render={({ onChange, value }: any) => (
-                      <OInput
-                        placeholder={t(field.name)}
-                        style={styles.input}
-                        icon={
-                          field.code === 'email'
-                            ? theme.images.logos.emailInputIcon
-                            : theme.images.general.profile
-                        }
-                        value={value}
-                        onChange={(val: any) =>
-                          field.code !== 'email'
-                            ? onChange(val)
-                            : handleChangeInputEmail(val, onChange)
-                        }
-                        autoCapitalize={
-                          field.code === 'email' ? 'none' : 'sentences'
-                        }
-                        autoCorrect={field.code === 'email' && false}
-                        type={
-                          field.code === 'email' ? 'email-address' : 'default'
-                        }
-                        autoCompleteType={
-                          field.code === 'email' ? 'email' : 'off'
-                        }
-                        selectionColor={theme.colors.primary}
-                        color={theme.colors.textGray}
-                        returnKeyType="next"
-                        blurOnSubmit={false}
-                        forwardRef={(ref: any) => handleRefs(ref, field.code)}
-                        onSubmitEditing={() =>
-                          field.code === 'email'
-                            ? phoneRef?.current?.focus?.()
-                            : handleFocusRef(getNextFieldCode(i))
-                        }
-                      />
-                    )}
-                    name={field.code}
-                    rules={getInputRules(field)}
-                    defaultValue=""
-                  />
-                ),
-            )}
-
-            {!!showInputPhoneNumber && (
-              <View style={{ marginBottom: 25 }}>
-                <PhoneInputNumber
-                  data={phoneInputData}
-                  handleData={(val: any) => setPhoneInputData(val)}
-                  forwardRef={phoneRef}
-                  flagProps={styles.btnFlag}
-                  onSubmitEditing={() => null}
-                  textInputProps={{
-                    returnKeyType: 'next',
-                    onSubmitEditing: () => passwordRef?.current?.focus?.(),
-                  }}
-                />
-              </View>
-            )}
-
-            <Controller
-              control={control}
-              render={({ onChange, value }: any) => (
-                <OInput
-                  isSecured={!passwordSee ? true : false}
-                  placeholder={t('PASSWORD', 'Password')}
-                  style={styles.input}
-                  icon={theme.images.logos.passwordInputIcon}
-                  iconCustomRight={
-                    !passwordSee ? (
-                      <MaterialCommunityIcons
-                        name="eye-outline"
-                        size={24}
-                        color={theme.colors.inputSignup}
-                        onPress={() => setPasswordSee(!passwordSee)}
-                      />
-                    ) : (
-                      <MaterialCommunityIcons
-                        name="eye-off-outline"
-                        size={24}
-                        color={theme.colors.inputSignup}
-                        onPress={() => setPasswordSee(!passwordSee)}
-                      />
-                    )
-                  }
-                  selectionColor={theme.colors.primary}
-                  color={theme.colors.textGray}
-                  value={value}
-                  onChange={(val: any) => onChange(val)}
-                  returnKeyType="done"
-                  blurOnSubmit
-                  forwardRef={passwordRef}
-                />
-              )}
-              name="password"
-              rules={{
-                required: isRequiredField('password')
-                  ? t(
-                      'VALIDATION_ERROR_PASSWORD_REQUIRED',
-                      'The field Password is required',
-                    ).replace('_attribute_', t('PASSWORD', 'password'))
-                  : null,
-                minLength: {
-                  value: 8,
-                  message: t(
-                    'VALIDATION_ERROR_PASSWORD_MIN_STRING',
-                    'The Password must be at least 8 characters.',
-                  )
-                    .replace('_attribute_', t('PASSWORD', 'Password'))
-                    .replace('_min_', 8),
-                },
-              }}
-              defaultValue=""
-            />
-          </>
-        ) : (
-          <Spinner visible />
-        )}
-
-        {useSignupByCellphone ? (
-          <OButton
-            onClick={handleSubmit(onSubmit)}
-            text={t('GET_VERIFY_CODE', 'Get Verify Code')}
-            borderColor={theme.colors.primary}
-            textStyle={styles.btnText}
-            style={styles.btn}
-            imgRightSrc={null}
-            isLoading={isLoadingVerifyModal}
-            indicatorColor={theme.colors.white}
-          />
-        ) : (
-          <OButton
-            onClick={handleSignup}
-            text={t('SIGNUP', 'Sign Up')}
-            bgColor={theme.colors.primary}
-            borderColor={theme.colors.primary}
-            textStyle={styles.btnText}
-            style={styles.btn}
-            imgRightSrc={null}
-            isDisabled={formState.loading || validationFields.loading}
-          />
-        )}
-      </FormInput>
-
-      <OModal open={isModalVisible} onClose={() => setIsModalVisible(false)}>
-        <VerifyPhone
-          phone={phoneInputData.phone}
-          formValues={formValues}
-          verifyPhoneState={verifyPhoneState}
-          checkPhoneCodeState={checkPhoneCodeState}
-          handleCheckPhoneCode={handleCheckPhoneCode}
-          setCheckPhoneCodeState={setCheckPhoneCodeState}
-          handleVerifyCodeClick={onSubmit}
-        />
-      </OModal>
-
-      <Spinner visible={formState.loading} />
-    </View>
-  );
-};
-
-export const SignupForm = (props: any) => {
-  const signupProps = {
-    ...props,
-    UIComponent: SignupFormUI,
-  };
-  return <SignUpController {...signupProps} />;
-};
+import React, { useEffect, useRef, useState } from 'react';
+import { View, StyleSheet, Keyboard } from 'react-native';
+import { useForm, Controller } from 'react-hook-form';
+import Spinner from 'react-native-loading-spinner-overlay';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import {
+  SignupForm as SignUpController,
+  useLanguage,
+  ToastType,
+  useToast,
+} from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
+import { FormInput } from './styles';
+import { PhoneInputNumber } from '../PhoneInputNumber';
+import { VerifyPhone } from '../VerifyPhone';
+import { OButton, OInput, OModal, OIconButton, OText } from '../shared';
+import { _removeStoreData } from '../../providers/StoreUtil';
+import { SignupParams } from '../../types';
+import { sortInputFields } from '../../utils';
+
+const SignupFormUI = (props: SignupParams) => {
+  const {
+    navigation,
+    formState,
+    validationFields,
+    showField,
+    isRequiredField,
+    useSignupByCellphone,
+    handleSuccessSignup,
+    handleButtonSignupClick,
+    verifyPhoneState,
+    checkPhoneCodeState,
+    setCheckPhoneCodeState,
+    handleSendVerifyCode,
+    handleCheckPhoneCode,
+    signupLevel,
+    // notificationState,
+  } = props;
+
+  const notValidationFields = [
+    'coupon',
+    'driver_tip',
+    'mobile_phone',
+    'address',
+    'address_notes',
+    'middle_name',
+    'lastname',
+    'second_lastname',
+  ];
+
+  const showInputPhoneNumber =
+    validationFields?.fields?.checkout?.cellphone?.enabled ?? false;
+
+  const theme = useTheme();
+  const [, { showToast }] = useToast();
+  const [, t] = useLanguage();
+  const { control, handleSubmit, errors } = useForm();
+
+  const [passwordSee, setPasswordSee] = useState(false);
+  const [formValues, setFormValues] = useState(null);
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [isLoadingVerifyModal, setIsLoadingVerifyModal] = useState(false);
+  const [phoneInputData, setPhoneInputData] = useState({
+    error: '',
+    phone: {
+      country_phone_code: null,
+      cellphone: null,
+    },
+  });
+
+  const nameRef = useRef<any>(null);
+  const lastnameRef = useRef<any>(null);
+  const middleNameRef = useRef<any>(null);
+  const secondLastnameRef = useRef<any>(null);
+  const emailRef = useRef<any>(null);
+  const phoneRef = useRef<any>(null);
+  const passwordRef = useRef<any>(null);
+
+  const handleRefs = (ref: any, code: string) => {
+    switch (code) {
+      case 'name': {
+        nameRef.current = ref;
+        break;
+      }
+      case 'middle_name': {
+        middleNameRef.current = ref;
+      }
+      case 'lastname': {
+        lastnameRef.current = ref;
+        break;
+      }
+      case 'second_lastname': {
+        secondLastnameRef.current = ref;
+        break;
+      }
+      case 'email': {
+        emailRef.current = ref;
+        break;
+      }
+    }
+  };
+
+  const handleFocusRef = (code: string) => {
+    switch (code) {
+      case 'name': {
+        nameRef?.current?.focus();
+        break;
+      }
+      case 'middle_name': {
+        middleNameRef?.current?.focus();
+        break;
+      }
+      case 'lastname': {
+        lastnameRef?.current?.focus();
+        break;
+      }
+      case 'second_lastname': {
+        secondLastnameRef?.current?.focus();
+        break;
+      }
+      case 'email': {
+        emailRef?.current?.focus();
+        break;
+      }
+    }
+  };
+
+  const getNextFieldCode = (index: number) => {
+    const fields = sortInputFields({
+      values: validationFields?.fields?.checkout,
+    })?.filter(
+      (field: any) =>
+        !notValidationFields.includes(field.code) && showField(field.code),
+    );
+    return fields[index + 1]?.code;
+  };
+
+  const handleSignup = () => {
+    handleSubmit(onSubmit)();
+  };
+
+  const onSubmit = (values: any) => {
+    Keyboard.dismiss();
+
+    if (phoneInputData.error) {
+      showToast(ToastType.Error, phoneInputData.error);
+      return;
+    }
+
+    if (
+      !phoneInputData.phone.country_phone_code &&
+      !phoneInputData.phone.cellphone &&
+      validationFields?.fields?.checkout?.cellphone?.enabled &&
+      validationFields?.fields?.checkout?.cellphone?.required
+    ) {
+      showToast(
+        ToastType.Error,
+        t(
+          'VALIDATION_ERROR_MOBILE_PHONE_REQUIRED',
+          'The field Mobile phone is required.',
+        ),
+      );
+      return;
+    }
+
+    if (!useSignupByCellphone) {
+      handleButtonSignupClick &&
+        handleButtonSignupClick({
+          ...values,
+          ...phoneInputData.phone,
+          level: signupLevel,
+        });
+
+      if (
+        !formState.loading &&
+        formState.result.result &&
+        !formState.result.error
+      ) {
+        handleSuccessSignup && handleSuccessSignup(formState.result.result);
+      }
+      return;
+    }
+
+    setFormValues(values);
+    handleVerifyCodeClick(values);
+  };
+
+  const handleVerifyCodeClick = (values: any) => {
+    const formData = values || formValues;
+
+    handleSendVerifyCode &&
+      handleSendVerifyCode({
+        ...formData,
+        ...phoneInputData.phone,
+      });
+
+    setIsLoadingVerifyModal(true);
+  };
+
+  // get object with rules for hook form inputs
+  const getInputRules = (field: any) => {
+    const rules: any = {
+      required: isRequiredField(field.code)
+        ? t(
+            `VALIDATION_ERROR_${field.code.toUpperCase()}_REQUIRED`,
+            `${field.name} is required`,
+          ).replace('_attribute_', t(field.name, field.code))
+        : null,
+    };
+
+    if (field.code && field.code === 'email') {
+      rules.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'),
+        ),
+      };
+    }
+    return rules;
+  };
+
+  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, formState.result?.result[0]);
+      setIsLoadingVerifyModal(false);
+    }
+  }, [formState]);
+
+  useEffect(() => {
+    if (Object.keys(errors).length > 0) {
+      // Convert all errors in one string to show in toast provider
+      const list = Object.values(errors);
+
+      if (phoneInputData.error) {
+        list.push({ message: phoneInputData.error });
+      }
+
+      if (
+        !phoneInputData.error &&
+        !phoneInputData.phone.country_phone_code &&
+        !phoneInputData.phone.cellphone &&
+        validationFields?.fields?.checkout?.cellphone?.enabled &&
+        validationFields?.fields?.checkout?.cellphone?.required
+      ) {
+        list.push({
+          message: t(
+            'VALIDATION_ERROR_MOBILE_PHONE_REQUIRED',
+            'The field Mobile phone is required.',
+          ),
+        });
+      }
+
+      let stringError = '';
+      list.map((item: any, i: number) => {
+        stringError +=
+          i + 1 === list.length ? `- ${item.message}` : `- ${item.message}\n`;
+      });
+
+      showToast(ToastType.Error, stringError);
+      setIsLoadingVerifyModal(false);
+    }
+  }, [errors]);
+
+  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]);
+
+  const styles = StyleSheet.create({
+    header: {
+      marginBottom: 30,
+      justifyContent: 'space-between',
+    },
+    arrowLeft: {
+      maxWidth: 40,
+      height: 25,
+      justifyContent: 'flex-end',
+      marginBottom: 25,
+    },
+    title: {
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontWeight: '600',
+      fontSize: 26,
+      color: theme.colors.textGray,
+    },
+    btn: {
+      borderRadius: 7.6,
+      height: 44,
+    },
+    btnText: {
+      color: theme.colors.inputTextColor,
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontWeight: 'normal',
+      fontSize: 18,
+    },
+    btnFlag: {
+      borderWidth: 1,
+      borderRadius: 7.6,
+      marginRight: 9,
+      borderColor: theme.colors.inputSignup,
+    },
+    input: {
+      color: theme.colors.inputTextColor,
+      marginBottom: 20,
+      borderWidth: 1,
+      borderRadius: 7.6,
+      borderColor: theme.colors.inputSignup,
+      backgroundColor: theme.colors.transparent,
+    },
+  });
+
+  return (
+    <View>
+      <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('SIGNUP', 'Sign Up')}</OText>
+      </View>
+
+      <FormInput>
+        {!(validationFields?.loading && validationFields?.fields?.checkout) ? (
+          <>
+            {sortInputFields({
+              values: validationFields?.fields?.checkout,
+            }).map(
+              (field: any, i: number) =>
+                !notValidationFields.includes(field.code) &&
+                showField &&
+                showField(field.code) && (
+                  <Controller
+                    key={field.id}
+                    control={control}
+                    render={({ onChange, value }: any) => (
+                      <OInput
+                        placeholder={t(field.name)}
+                        style={styles.input}
+                        icon={
+                          field.code === 'email'
+                            ? theme.images.logos.emailInputIcon
+                            : theme.images.general.profile
+                        }
+                        value={value}
+                        onChange={(val: any) =>
+                          field.code !== 'email'
+                            ? onChange(val)
+                            : handleChangeInputEmail(val, onChange)
+                        }
+                        autoCapitalize={
+                          field.code === 'email' ? 'none' : 'sentences'
+                        }
+                        autoCorrect={field.code === 'email' && false}
+                        type={
+                          field.code === 'email' ? 'email-address' : 'default'
+                        }
+                        autoCompleteType={
+                          field.code === 'email' ? 'email' : 'off'
+                        }
+                        selectionColor={theme.colors.primary}
+                        color={theme.colors.textGray}
+                        returnKeyType="next"
+                        blurOnSubmit={false}
+                        forwardRef={(ref: any) => handleRefs(ref, field.code)}
+                        onSubmitEditing={() =>
+                          field.code === 'email'
+                            ? phoneRef?.current?.focus?.()
+                            : handleFocusRef(getNextFieldCode(i))
+                        }
+                      />
+                    )}
+                    name={field.code}
+                    rules={getInputRules(field)}
+                    defaultValue=""
+                  />
+                ),
+            )}
+
+            {!!showInputPhoneNumber && (
+              <View style={{ marginBottom: 25 }}>
+                <PhoneInputNumber
+                  data={phoneInputData}
+                  handleData={(val: any) => setPhoneInputData(val)}
+                  forwardRef={phoneRef}
+                  flagProps={styles.btnFlag}
+                  onSubmitEditing={() => null}
+                  textInputProps={{
+                    returnKeyType: 'next',
+                    onSubmitEditing: () => passwordRef?.current?.focus?.(),
+                  }}
+                />
+              </View>
+            )}
+
+            <Controller
+              control={control}
+              render={({ onChange, value }: any) => (
+                <OInput
+                  isSecured={!passwordSee ? true : false}
+                  placeholder={t('PASSWORD', 'Password')}
+                  style={styles.input}
+                  icon={theme.images.logos.passwordInputIcon}
+                  iconCustomRight={
+                    !passwordSee ? (
+                      <MaterialCommunityIcons
+                        name="eye-outline"
+                        size={24}
+                        color={theme.colors.inputSignup}
+                        onPress={() => setPasswordSee(!passwordSee)}
+                      />
+                    ) : (
+                      <MaterialCommunityIcons
+                        name="eye-off-outline"
+                        size={24}
+                        color={theme.colors.inputSignup}
+                        onPress={() => setPasswordSee(!passwordSee)}
+                      />
+                    )
+                  }
+                  selectionColor={theme.colors.primary}
+                  color={theme.colors.textGray}
+                  value={value}
+                  onChange={(val: any) => onChange(val)}
+                  returnKeyType="done"
+                  blurOnSubmit
+                  forwardRef={passwordRef}
+                />
+              )}
+              name="password"
+              rules={{
+                required: isRequiredField('password')
+                  ? t(
+                      'VALIDATION_ERROR_PASSWORD_REQUIRED',
+                      'The field Password is required',
+                    ).replace('_attribute_', t('PASSWORD', 'password'))
+                  : null,
+                minLength: {
+                  value: 8,
+                  message: t(
+                    'VALIDATION_ERROR_PASSWORD_MIN_STRING',
+                    'The Password must be at least 8 characters.',
+                  )
+                    .replace('_attribute_', t('PASSWORD', 'Password'))
+                    .replace('_min_', 8),
+                },
+              }}
+              defaultValue=""
+            />
+          </>
+        ) : (
+          <Spinner visible />
+        )}
+
+        {useSignupByCellphone ? (
+          <OButton
+            onClick={handleSubmit(onSubmit)}
+            text={t('GET_VERIFY_CODE', 'Get Verify Code')}
+            borderColor={theme.colors.primary}
+            textStyle={styles.btnText}
+            style={styles.btn}
+            imgRightSrc={null}
+            isLoading={isLoadingVerifyModal}
+            indicatorColor={theme.colors.white}
+          />
+        ) : (
+          <OButton
+            onClick={handleSignup}
+            text={t('SIGNUP', 'Sign Up')}
+            bgColor={theme.colors.primary}
+            borderColor={theme.colors.primary}
+            textStyle={styles.btnText}
+            style={styles.btn}
+            imgRightSrc={null}
+            isDisabled={formState.loading || validationFields.loading}
+          />
+        )}
+      </FormInput>
+
+      <OModal open={isModalVisible} onClose={() => setIsModalVisible(false)}>
+        <VerifyPhone
+          phone={phoneInputData.phone}
+          formValues={formValues}
+          verifyPhoneState={verifyPhoneState}
+          checkPhoneCodeState={checkPhoneCodeState}
+          handleCheckPhoneCode={handleCheckPhoneCode}
+          setCheckPhoneCodeState={setCheckPhoneCodeState}
+          handleVerifyCodeClick={onSubmit}
+        />
+      </OModal>
+
+      <Spinner visible={formState.loading} />
+    </View>
+  );
+};
+
+export const SignupForm = (props: any) => {
+  const signupProps = {
+    ...props,
+    UIComponent: SignupFormUI,
+  };
+  return <SignUpController {...signupProps} />;
+};