ordering-ui-react-native 0.12.18 → 0.12.19

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

@@ -1,530 +0,0 @@
-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} />;
-};

package/themes/business/src/components 2/SignupForm/styles.tsx

@@ -1,16 +0,0 @@
-import styled from 'styled-components/native';
-
-export const FormSide = styled.View`
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  align-items: center;
-  margin-top: 10px;
-`;
-
-export const FormInput = styled.View`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  margin-bottom: 35px;
-`;