ordering-ui-react-native 0.12.18 → 0.12.19

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

@@ -1,513 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { StyleSheet, View } from 'react-native';
-import { useForm, Controller } from 'react-hook-form';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-import { useTheme } from 'styled-components/native';
-import {
-  useSession,
-  useLanguage,
-  ToastType,
-  useToast,
-} from 'ordering-components/native';
-import {
-  UDForm,
-  UDLoader,
-  UDWrapper,
-  WrapperPhone,
-  EditButton,
-} from './styles';
-import { PhoneInputNumber } from '../PhoneInputNumber';
-import { OText, OButton, OInput } from '../shared';
-import { sortInputFields } from '../../utils';
-
-export const UserFormDetailsUI = (props: any) => {
-  const {
-    isEdit,
-    formState,
-    showField,
-    cleanFormState,
-    onCloseProfile,
-    isRequiredField,
-    validationFields,
-    handleChangeInput,
-    handleButtonUpdateClick,
-    phoneUpdate,
-    hideUpdateButton,
-    handleCancelEdit,
-    toggleIsEdit,
-    isCheckout,
-  } = props;
-
-  const theme = useTheme();
-  const [, t] = useLanguage();
-  const [, { showToast }] = useToast();
-  const { handleSubmit, control, errors, setValue, watch } = useForm();
-
-  const [{ user }] = useSession();
-  const [passwordSee, setPasswordSee] = useState(false);
-  const [confirmSee, setConfirmSee] = useState(false);
-  const [userPhoneNumber, setUserPhoneNumber] = useState<any>(null);
-  const [phoneInputData, setPhoneInputData] = useState({
-    error: '',
-    phone: {
-      country_phone_code: null,
-      cellphone: null,
-    },
-  });
-
-  const watchPassword = watch('password');
-  const watchConfirmPassword = watch('confirmPassword');
-
-  const showInputPhoneNumber =
-    validationFields?.fields?.checkout?.cellphone?.enabled ?? false;
-
-  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 setUserCellPhone = (isEdit = false) => {
-    if (userPhoneNumber && !userPhoneNumber.includes('null') && !isEdit) {
-      setUserPhoneNumber(userPhoneNumber);
-      return;
-    }
-    if (user?.cellphone) {
-      let phone = null;
-      if (user?.country_phone_code) {
-        phone = `+${user?.country_phone_code} ${user?.cellphone}`;
-      } else {
-        phone = user?.cellphone;
-      }
-      setUserPhoneNumber(phone);
-      setPhoneInputData({
-        ...phoneInputData,
-        phone: {
-          country_phone_code: user?.country_phone_code || null,
-          cellphone: user?.cellphone || null,
-        },
-      });
-      return;
-    }
-    setUserPhoneNumber(user?.cellphone || '');
-  };
-
-  const onSubmit = (values: any) => {
-    if (phoneInputData.error) {
-      showToast(ToastType.Error, phoneInputData.error);
-      return;
-    }
-    if (
-      Object.keys(formState.changes).length > 0 ||
-      (watchPassword.length > 0 && watchConfirmPassword.length > 0)
-    ) {
-      if (
-        formState.changes?.cellphone === null &&
-        validationFields?.fields?.checkout?.cellphone?.enabled &&
-        validationFields?.fields?.checkout?.cellphone?.required
-      ) {
-        showToast(
-          ToastType.Error,
-          t(
-            'VALIDATION_ERROR_MOBILE_PHONE_REQUIRED',
-            'The field Phone Number is required.',
-          ),
-        );
-        return;
-      }
-      let changes = null;
-      if (user?.cellphone && !userPhoneNumber) {
-        changes = {
-          country_phone_code: '',
-          cellphone: '',
-        };
-      }
-
-      if (values.password && values.confirmPassword) {
-        changes = {
-          password: values.password,
-        };
-      }
-
-      handleButtonUpdateClick(changes);
-    }
-  };
-
-  const handleChangePhoneNumber = (number: any) => {
-    setPhoneInputData(number);
-    let phoneNumber = {
-      country_phone_code: {
-        name: 'country_phone_code',
-        value: number.phone.country_phone_code,
-      },
-      cellphone: {
-        name: 'cellphone',
-        value: number.phone.cellphone,
-      },
-    };
-    handleChangeInput(phoneNumber, true);
-  };
-
-  useEffect(() => {
-    if (Object.keys(errors).length > 0) {
-      const list = Object.values(errors);
-
-      if (phoneInputData.error) {
-        list.push({ message: phoneInputData.error });
-      }
-
-      let stringError = '';
-      list.map((item: any, i: number) => {
-        stringError +=
-          i + 1 === list.length ? `- ${item.message}` : `- ${item.message}\n`;
-      });
-
-      showToast(ToastType.Error, stringError);
-    }
-  }, [errors]);
-
-  useEffect(() => {
-    if (!formState?.loading && formState?.result?.error) {
-      formState.result?.result &&
-        showToast(ToastType.Error, formState.result?.result[0]);
-    }
-  }, [formState?.loading]);
-
-  useEffect(() => {
-    if (!isEdit && onCloseProfile) {
-      onCloseProfile();
-    }
-    if ((user || !isEdit) && !formState?.loading) {
-      setUserCellPhone();
-      if (!isEdit && !formState?.loading) {
-        cleanFormState && cleanFormState({ changes: {} });
-        setUserCellPhone(true);
-      }
-    }
-  }, [user, isEdit]);
-
-  const styles = StyleSheet.create({
-    btnOutline: {
-      backgroundColor: theme.colors.primaryContrast,
-      color: theme.colors.primary,
-    },
-    label: {
-      color: theme.colors.textGray,
-      fontFamily: 'Poppins',
-      fontStyle: 'normal',
-      fontWeight: '600',
-    },
-    errorText: {
-      color: theme.colors.error,
-      fontFamily: 'Poppins',
-      fontStyle: 'normal',
-      fontWeight: 'normal',
-      fontSize: 16,
-      paddingHorizontal: 16,
-      marginBottom: 20,
-    },
-    inputStyle: {
-      marginBottom: 25,
-      borderWidth: 1,
-      borderColor: theme.colors.tabBar,
-      borderTopWidth: 0,
-      borderRightWidth: 0,
-      borderLeftWidth: 0,
-      paddingHorizontal: 0,
-      borderRadius: 0,
-    },
-    editButton: {
-      height: 44,
-      borderRadius: 7.6,
-      borderWidth: 1,
-    },
-    btnText: {
-      color: theme.colors.textGray,
-      fontFamily: 'Poppins',
-      fontStyle: 'normal',
-      fontWeight: 'normal',
-      fontSize: 16,
-    },
-    btnFlag: {
-      width: 79,
-      borderWidth: 1,
-      borderRadius: 7.6,
-      marginRight: 9,
-      borderColor: theme.colors.inputSignup,
-    },
-  });
-
-  return (
-    <>
-      <UDForm>
-        {!validationFields?.loading &&
-          sortInputFields({ values: validationFields?.fields?.checkout })
-            .length > 0 && (
-            <UDWrapper>
-              {sortInputFields({
-                values: validationFields.fields?.checkout,
-              }).map(
-                (field: any) =>
-                  showField &&
-                  showField(field.code) && (
-                    <React.Fragment key={field.id}>
-                      <OText style={styles.label}>
-                        {t(field?.code.toUpperCase(), field?.name)}
-                      </OText>
-
-                      <Controller
-                        key={field.id}
-                        control={control}
-                        render={() => (
-                          <OInput
-                            name={field.code}
-                            placeholder={t(
-                              field.code.toUpperCase(),
-                              field?.name,
-                            )}
-                            placeholderTextColor={theme.colors.arrowColor}
-                            style={styles.inputStyle}
-                            icon={
-                              field.code === 'email'
-                                ? theme.images.general.email
-                                : theme.images.general.user
-                            }
-                            autoCapitalize={
-                              field.code === 'email' ? 'none' : 'sentences'
-                            }
-                            isDisabled={!isEdit}
-                            value={
-                              formState?.changes[field.code] ??
-                              (user && user[field.code]) ??
-                              ''
-                            }
-                            onChange={(val: any) => {
-                              field.code !== 'email'
-                                ? setValue(field.code, val.target.value)
-                                : setValue(
-                                    field.code,
-                                    val.target.value
-                                      .toLowerCase()
-                                      .replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''),
-                                  );
-                              field.code !== 'email'
-                                ? handleChangeInput(val)
-                                : handleChangeInput({
-                                    target: {
-                                      name: 'email',
-                                      value: val.target.value
-                                        .toLowerCase()
-                                        .replace(
-                                          /[&,()%";:ç?<>{}\\[\]\s]/g,
-                                          '',
-                                        ),
-                                    },
-                                  });
-                            }}
-                            autoCorrect={field.code === 'email' && false}
-                            type={
-                              field.code === 'email'
-                                ? 'email-address'
-                                : 'default'
-                            }
-                            returnKeyType="done"
-                            autoCompleteType={
-                              field.code === 'email' ? 'email' : 'off'
-                            }
-                            selectionColor={theme.colors.primary}
-                            color={theme.colors.textGray}
-                          />
-                        )}
-                        name={field.code}
-                        rules={getInputRules(field)}
-                        defaultValue={user && user[field.code]}
-                      />
-                    </React.Fragment>
-                  ),
-              )}
-
-              <OText style={styles.label}>{t('PASSWORD', 'Password')}</OText>
-
-              <Controller
-                control={control}
-                render={({ onChange, value }: any) => (
-                  <OInput
-                    isSecured={!passwordSee ? true : false}
-                    placeholder={t('PASSWORD', 'Password')}
-                    placeholderTextColor={theme.colors.arrowColor}
-                    style={styles.inputStyle}
-                    iconCustomRight={
-                      passwordSee ? (
-                        <MaterialCommunityIcons
-                          name="eye-outline"
-                          color={theme.colors.arrowColor}
-                          size={24}
-                          onPress={() => setPasswordSee(!passwordSee)}
-                        />
-                      ) : (
-                        <MaterialCommunityIcons
-                          name="eye-off-outline"
-                          color={theme.colors.arrowColor}
-                          size={24}
-                          onPress={() => setPasswordSee(!passwordSee)}
-                        />
-                      )
-                    }
-                    selectionColor={theme.colors.primary}
-                    color={theme.colors.textGray}
-                    value={value}
-                    onChange={(val: any) => onChange(val)}
-                    returnKeyType="done"
-                    blurOnSubmit
-                  />
-                )}
-                name="password"
-                defaultValue=""
-              />
-
-              <OText style={styles.label}>
-                {t('MOBILE_CONFIRM_PASSWORD', 'Confirm Password')}
-              </OText>
-
-              <Controller
-                control={control}
-                render={({ onChange, value }: any) => (
-                  <OInput
-                    isSecured={!confirmSee ? true : false}
-                    placeholder={t(
-                      'MOBILE_CONFIRM_PASSWORD',
-                      'Confirm Password',
-                    )}
-                    style={styles.inputStyle}
-                    placeholderTextColor={theme.colors.arrowColor}
-                    iconCustomRight={
-                      confirmSee ? (
-                        <MaterialCommunityIcons
-                          name="eye-outline"
-                          color={theme.colors.arrowColor}
-                          size={24}
-                          onPress={() => setConfirmSee(!confirmSee)}
-                        />
-                      ) : (
-                        <MaterialCommunityIcons
-                          name="eye-off-outline"
-                          color={theme.colors.arrowColor}
-                          size={24}
-                          onPress={() => setConfirmSee(!confirmSee)}
-                        />
-                      )
-                    }
-                    selectionColor={theme.colors.primary}
-                    color={theme.colors.textGray}
-                    value={value}
-                    onChange={(val: any) => onChange(val)}
-                    returnKeyType="done"
-                    blurOnSubmit
-                  />
-                )}
-                rules={{
-                  validate: (value: any) => {
-                    return (
-                      watchPassword === value ||
-                      t(
-                        'VALIDATION_ERROR_PASSWORDS_MATCH',
-                        'The passwords do not match',
-                      )
-                    );
-                  },
-                }}
-                name="confirmPassword"
-                defaultValue=""
-              />
-
-              {errors.confirmPassword && (
-                <OText style={styles.errorText}>
-                  {errors?.confirmPassword.message}
-                </OText>
-              )}
-
-              {!!showInputPhoneNumber && (
-                <WrapperPhone>
-                  <PhoneInputNumber
-                    data={phoneInputData}
-                    handleData={(val: any) => handleChangePhoneNumber(val)}
-                    defaultValue={phoneUpdate ? '' : user?.cellphone}
-                    defaultCode={user?.country_phone_code || null}
-                    flagProps={styles.btnFlag}
-                  />
-
-                  {phoneUpdate && (
-                    <OText style={styles.errorText}>
-                      {t('YOUR_PREVIOUS_CELLPHONE', 'Your previous cellphone')}:{' '}
-                      {user?.cellphone}
-                    </OText>
-                  )}
-                </WrapperPhone>
-              )}
-            </UDWrapper>
-          )}
-      </UDForm>
-
-      {!validationFields.loading && !isCheckout && (
-        <EditButton>
-          <View style={{ flex: 1 }}>
-            <OButton
-              text={t('CANCEL', 'Cancel')}
-              bgColor={theme.colors.white}
-              borderColor={theme.colors.primary}
-              style={styles.editButton}
-              textStyle={styles.btnText}
-              isDisabled={formState.loading}
-              imgRightSrc={null}
-              onClick={handleCancelEdit}
-            />
-          </View>
-
-          {((formState &&
-            Object.keys(formState?.changes).length > 0 &&
-            isEdit) ||
-            (watchPassword?.length > 0 && watchConfirmPassword?.length > 0) ||
-            formState?.loading) && (
-            <View style={{ flex: 1, marginLeft: 5 }}>
-              <OButton
-                text={
-                  formState.loading
-                    ? t('UPDATING', 'Updating')
-                    : t('UPDATE', 'Update')
-                }
-                bgColor={theme.colors.primary}
-                textStyle={{
-                  ...styles.btnText,
-                  color: formState.loading
-                    ? theme.colors.textGray
-                    : theme.colors.white,
-                }}
-                borderColor={theme.colors.primary}
-                isDisabled={formState.loading}
-                imgRightSrc={null}
-                style={styles.editButton}
-                onClick={handleSubmit(onSubmit)}
-              />
-            </View>
-          )}
-        </EditButton>
-      )}
-    </>
-  );
-};

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

@@ -1,40 +0,0 @@
-import styled from 'styled-components/native';
-
-export const UDForm = styled.View`
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  width: 100%;
-  margin-top: 20px;
-`;
-
-export const UDWrapper = styled.View`
-  display: flex;
-  align-items: flex-start;
-  flex-direction: column;
-  width: 100%;
-  margin-top: 20px;
-`;
-
-export const UDLoader = styled.View`
-  width: 100%;
-  justify-content: center;
-  height: auto;
-  display: flex;
-  flex-wrap: wrap;
-  padding: 0;
-  margin-top: 0px;
-`;
-
-export const WrapperPhone = styled.View`
-  margin-bottom: 25px;
-  width: 100%;
-`;
-
-export const EditButton = styled.View`
-  align-items: center;
-  justify-content: center;
-  flex-direction: row;
-  width: 100%;
-  margin-bottom: 25px;
-`;