ordering-ui-react-native 0.12.14 → 0.12.18

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

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

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

@@ -0,0 +1,16 @@
+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;
+`;