ordering-ui-react-native 0.12.14 → 0.12.18

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

@@ -0,0 +1,663 @@
+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 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,
+} 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';
+
+const LoginFormUI = (props: LoginParams) => {
+  const {
+    navigation,
+    formState,
+    handleButtonLoginClick,
+    onNavigationRedirect,
+    loginTab,
+    useLoginByCellphone,
+    useLoginByEmail,
+    handleSendVerifyCode,
+    verifyPhoneState,
+    checkPhoneCodeState,
+    handleCheckPhoneCode,
+    setCheckPhoneCodeState,
+    allowedLevels,
+    useRootPoint
+  } = 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 [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 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',
+    };
+
+    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({ animated: true });
+    }
+
+    if (loginTab === 'cellphone') {
+      scrollRefTab.current?.scrollTo({ animated: true });
+    }
+  };
+
+  const handleChangeInputEmail = (value: string, onChange: any) => {
+    onChange(value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''));
+  };
+
+  const handleLogin = () => {
+    setLoading(true);
+
+    handleSubmit(onSubmit)();
+  };
+
+  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
+    }
+
+    handleButtonLoginClick({
+      ...values,
+      ...phoneInputData.phone
+    });
+  };
+
+  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) {
+      formState?.result?.result &&
+        showToast(
+          ToastType.Error,
+          loginTab === 'email' && typeof formState.result?.result === 'string'
+            ? getTraduction(formState.result?.result)
+            : loginTab === 'email' &&
+              typeof formState.result?.result !== 'string'
+            ? getTraduction(formState.result?.result[0])
+            : loginTab === 'cellphone' &&
+              typeof formState.result?.result === 'string'
+            ? getTraduction(formState.result?.result).replace(
+                t('USER', 'user').toLowerCase(),
+                t('PHONE_NUMER', 'Phone number'),
+              )
+            : getTraduction(formState.result?.result[0]).replace(
+                t('USER', 'user').toLowerCase(),
+                t('PHONE_NUMER', 'Phone number'),
+              ),
+        );
+      setSubmitted(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
+    }
+    handleButtonLoginClick({ ...values })
+  }, [ordering, submitted])
+
+  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,
+    },
+    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,
+    },
+  });
+
+  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>
+
+      {(useLoginByEmail || useLoginByCellphone) && (
+        <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>
+              )}
+            </TabsContainer>
+          </ScrollView>
+        </LoginWith>
+      )}
+
+      {(useLoginByCellphone || useLoginByEmail) && (
+        <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) => {
+                    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' && (
+            <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) => {
+                    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' && (
+            <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>
+          )}
+
+          <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"
+                blurOnSubmit
+              />
+            )}
+            name="password"
+            rules={{
+              required: t(
+                'VALIDATION_ERROR_PASSWORD_REQUIRED',
+                'The field Password is required',
+              ).replace('_attribute_', t('PASSWORD', 'Password')),
+            }}
+            defaultValue=""
+          />
+
+          {onNavigationRedirect && (
+            <Pressable
+              style={{ marginRight: 'auto', marginBottom: 35 }}
+              onPress={() => onNavigationRedirect('Forgot')}>
+              <OText style={styles.textForgot}>
+                {t('FORGOT_YOUR_PASSWORD', 'Forgot your password?')}
+              </OText>
+            </Pressable>
+          )}
+
+          <OButton
+            onClick={handleLogin}
+            text={t('LOGIN', 'Login')}
+            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>
+    </View>
+  );
+};
+
+export const LoginForm = (props: any) => {
+  const loginProps = {
+    ...props,
+    UIComponent: LoginFormUI,
+  };
+
+  return <LoginFormController {...loginProps} />;
+};

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

@@ -0,0 +1,48 @@
+import styled, { css } from 'styled-components/native';
+
+export const LoginWith = styled.View`
+  display: flex;
+  width: 100%;
+  margin-bottom: 30px;
+`;
+
+export const TabsContainer = styled.View`
+  min-width: ${({ width }: { width: number }) => `${width}px`};
+  width: auto;
+  display: flex;
+  flex-direction: row;
+`;
+
+export const FormInput = styled.View`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+
+export const ButtonsWrapper = styled.View`
+  margin: 10px 0px 0px;
+  width: 90%;
+  display: flex;
+  flex-direction: column;
+
+  ${(props: any) =>
+    props.mBottom &&
+    css`
+      margin-bottom: ${props.mBottom}px;
+    `}
+`;
+
+export const OrSeparator = styled.View`
+  width: 90%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+`;
+
+export const LineSeparator = styled.View`
+  width: 40%;
+  height: 1px;
+  background-color: ${(props: any) => props.theme.colors.disabled};
+`;