ordering-ui-react-native 0.14.61 → 0.14.62-release

package/themes/original/src/components/UserVerification/index.tsx

@@ -0,0 +1,514 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { useTheme } from 'styled-components/native';
+import {
+  StyleSheet,
+  Text,
+  View,
+  TextInput,
+  SafeAreaView,
+  TouchableOpacity,
+} from 'react-native';
+import {
+  UserVerification as UserVerificationController,
+  UserFormDetails as UserFormController,
+  useToast,
+  useSession,
+  useLanguage,
+  ToastType,
+  useConfig
+} from 'ordering-components/native';
+
+import { OText, OInput, OButton, OModal } from '../shared';
+import { LogoutButton } from '../LogoutButton'
+import { UserFormDetailsUI } from '../UserFormDetails'
+import { PhoneInputNumber } from '../PhoneInputNumber';
+
+import {
+  Container,
+  InputsSection,
+  WrapperText,
+  InputWrapper,
+  WrappCountdown,
+  CountDownContainer,
+  OtpSection,
+  DigitInput,
+  ButtonsActions,
+  WrapperActions
+} from './styles'
+
+const TIME_COUNTDOWN = 60 * 10 // 10 minutes
+
+const UserDetails = (props: any) => {
+  const userDetailsProps = {
+    ...props,
+    isEdit: true,
+    useValidationFields: true,
+    useDefualtSessionManager: true,
+    UIComponent: UserFormDetailsUI
+  }
+
+  return <UserFormController {...userDetailsProps} />
+}
+
+const UserVerificationUI = (props: any) => {
+  const {
+    verifyEmailState,
+    verifyPhoneState,
+    sendVerifyEmailCode,
+    sendVerifyPhoneCode,
+    checkVerifyEmailCode,
+    checkVerifyPhoneCode,
+    cleanErrorsState,
+  } = props
+
+  const theme = useTheme();
+  const [, t] = useLanguage()
+  const [{ configs }] = useConfig()
+  const [{ auth, user }] = useSession()
+  const [, { showToast }] = useToast();
+
+  const isEmailVerifyRequired = auth && configs?.verification_email_required?.value === '1' && !user?.email_verified
+  const isPhoneVerifyRequired = auth && configs?.verification_phone_required?.value === '1' && !user?.phone_verified
+
+  const CODE_LENGTH = isEmailVerifyRequired ? 6 : 4
+
+  const ref = useRef<TextInput>(null);
+
+  const [otpState, setOtpState] = useState('')
+
+  const [timer, setTimer] = useState(`${TIME_COUNTDOWN / 60}:00`)
+  const [isSendCodeAgain, setIsSendCodeAgain] = useState(false)
+  const [containerIsFocused, setContainerIsFocused] = useState(false);
+
+  const [phoneState, setPhoneState] = useState<any>(null)
+  const [modalIsOpen, setModalIsOpen] = useState(false)
+  const [verificationState, setVerificationState] = useState({ email: false, phone: false })
+
+  const codeDigitsArray = new Array(CODE_LENGTH).fill(0);
+
+  const phoneLength = phoneState?.cellphone && phoneState?.country_phone_code && phoneState?.cellphone?.split('')?.length
+  const lastNumbers = phoneState?.cellphone && phoneState?.country_phone_code && phoneState?.cellphone?.split('').fill('*', 0, phoneLength - 2).join('')
+
+  const style = StyleSheet.create({
+    inputContainer: {
+      borderWidth: 1,
+      borderRadius: 7.6,
+      padding: 12,
+      borderColor: theme.colors.disabled,
+    },
+    inputContainerFocused: {
+      borderColor: theme.colors.primary,
+    },
+    hiddenCodeInput: {
+      position: 'absolute',
+      height: 0,
+      width: 0,
+      opacity: 0,
+    },
+    inputStyle: {
+      marginBottom: 28,
+      borderWidth: 1,
+      borderColor: theme.colors.border,
+      borderRadius: 7.6,
+    },
+    btnStyle: {
+      borderRadius: 7.6,
+      marginTop: 5,
+      marginBottom: 2
+    },
+    phoneSelect: {
+      borderWidth: 0,
+      marginStart: -5,
+      marginEnd: 0,
+      marginTop: -3,
+      height: 32,
+      width: 44
+    },
+    phoneInputStyle: {
+      height: 30,
+      borderWidth: 1,
+      fontSize: 12,
+      paddingBottom: 0,
+      marginBottom: -0,
+      paddingHorizontal: 10
+    }
+  });
+
+  const handleOnPress = () => {
+    setContainerIsFocused(true);
+    ref?.current?.focus();
+  };
+
+  const handleOnBlur = () => {
+    setContainerIsFocused(false);
+  };
+
+  const toDigitInput = (_value: number, idx: number) => {
+    const emptyInputChar = '0';
+    const digit = otpState[idx] || emptyInputChar;
+
+    const isCurrentDigit = idx === otpState.length;
+    const isLastDigit = idx === CODE_LENGTH - 1;
+    const isCodeFull = otpState.length === CODE_LENGTH;
+
+    const isFocused = isCurrentDigit || (isLastDigit && isCodeFull);
+
+    const containerStyle =
+      containerIsFocused && isFocused
+        ? {...style.inputContainer, ...style.inputContainerFocused}
+        : style.inputContainer;
+
+    return (
+      <View key={idx} style={containerStyle}>
+        <Text
+          style={{
+            fontSize: 20,
+            color: otpState[idx] ? theme.colors.black : theme.colors.disabled
+          }}
+        >
+          {digit}
+        </Text>
+      </View>
+    );
+  };
+
+  const handleSendOtp = (opt: string = '') => {
+    setTimer(`${TIME_COUNTDOWN / 60}:00`)
+    setIsSendCodeAgain(true)
+    if (opt === 'phone') {
+      sendVerifyPhoneCode({
+        cellphone: phoneState?.cellphone,
+        country_phone_code: phoneState?.country_phone_code
+      })
+      return
+    }
+    sendVerifyEmailCode({ email: user?.email })
+  }
+
+  const setupUserPhoneNumber = () => {
+    if (!user || !user?.cellphone || !user?.country_phone_code) return
+    setPhoneState({
+      cellphone: user?.cellphone,
+      country_phone_code: user?.country_phone_code,
+      formatted: `+${user?.country_phone_code} ${user?.cellphone}`
+    })
+  }
+
+  useEffect(() => {
+    let _timer = TIME_COUNTDOWN - 1;
+    let minutes = 0;
+    let seconds = 0;
+    const interval = setInterval(() => {
+      minutes = _timer / 60;
+      seconds = _timer % 60;
+
+      minutes = minutes < 10 ? 0 + minutes : minutes;
+      seconds = seconds < 10 ? 0 + seconds : seconds;
+
+      const formatMinutes = parseInt(minutes.toString()) < 10
+        ? `0${parseInt(minutes.toString())}`
+        : parseInt(minutes.toString());
+
+      const formatseconds = parseInt(seconds.toString()) < 10
+        ? `0${parseInt(seconds.toString())}`
+        : parseInt(seconds.toString());
+
+      setTimer(`${formatMinutes}:${formatseconds}`);
+
+      if (--_timer < 0) {
+        clearInterval(interval);
+      }
+
+      if (timer === `${TIME_COUNTDOWN / 60}:00` && isSendCodeAgain) {
+        setIsSendCodeAgain(false)
+        clearInterval(interval);
+      }
+    }, 1000);
+
+    return () => clearInterval(interval)
+  }, [isSendCodeAgain])
+
+  useEffect(() => {
+    if (otpState?.length === CODE_LENGTH) {
+      if (verificationState.email) {
+        checkVerifyEmailCode({ code: otpState })
+        return
+      }
+      if (verificationState.phone) {
+        checkVerifyPhoneCode({
+          cellphone: phoneState?.cellphone,
+          country_phone_code: +(phoneState?.country_phone_code),
+          code: otpState
+        })
+        return
+      }
+    }
+  }, [otpState])
+
+  useEffect(() => {
+    if (verifyEmailState?.errorSendCode || verifyEmailState?.errorCheckCode) {
+      showToast(
+        ToastType.Error,
+        verifyEmailState?.errorSendCode?.[0]
+          ?? verifyEmailState?.errorCheckCode?.[0]
+          ?? t('ERROR', 'Error'),
+      );
+      setTimeout(() => {
+        cleanErrorsState();
+        cleanErrorsState('phone');
+        setOtpState('');
+      }, 2000);
+    }
+
+    if (verifyPhoneState?.errorSendCode || verifyPhoneState?.errorCheckCode) {
+      showToast(
+        ToastType.Error,
+        verifyPhoneState?.errorSendCode?.[0]
+          ?? verifyPhoneState?.errorCheckCode?.[0]
+          ?? t('ERROR', 'Error'),
+      );
+      setTimeout(() => {
+        cleanErrorsState();
+        cleanErrorsState('phone');
+        setOtpState('');
+      }, 2000);
+    }
+  }, [verifyEmailState, verifyPhoneState])
+
+  useEffect(() => {
+    if (!verifyEmailState?.loadingSendCode && isEmailVerifyRequired) {
+      setVerificationState({
+        ...verificationState,
+        email: !!verifyEmailState?.resultSendCode
+      })
+    }
+    if (!verifyPhoneState?.loadingSendCode && isPhoneVerifyRequired && !isEmailVerifyRequired) {
+      setVerificationState({
+        ...verificationState,
+        phone: !!verifyPhoneState?.resultSendCode
+      })
+    }
+  }, [verifyEmailState, verifyPhoneState])
+
+  useEffect(() => {
+    setupUserPhoneNumber()
+  }, [user])
+
+  return (
+    <SafeAreaView style={{ flex: 1 }}>
+      <Container>
+        <WrapperActions>
+          <WrapperText>
+            <OText size={22} weight='bold' style={{ marginBottom: 10 }}>
+              {t('VERIFICATION_CODE', 'Verification Code')}
+            </OText>
+            {isEmailVerifyRequired && (
+              <OText size={14} color={theme.colors.disabled} style={{ textAlign: 'center', paddingVertical: 20 }}>
+                {!verificationState.email ? (
+                  t('VERIFICATION_EMAIL_CODE_MESSAGE', 'In order to continue using our platform please verify your email')
+                ) : (
+                  t('VERIFICATION_EMAIL_CODE_SENT_MESSAGE', 'Please type the verification code sent to your email')
+                )}
+              </OText>
+            )}
+
+            {isPhoneVerifyRequired && !isEmailVerifyRequired && (
+              <OText size={14} color={theme.colors.disabled} style={{ textAlign: 'center', paddingVertical: 20 }}>
+                {!verificationState.phone ? (
+                  t('VERIFICATION_PHONE_CODE_MESSAGE', 'In order to continue using our platform please verify your phone number')
+                ) : (
+                  t('VERIFICATION_PHONE_CODE_SENT_MESSAGE', 'Please, enter the verification code we sent to your mobile ending with :number').replace(':number', lastNumbers)
+                )}
+              </OText>
+            )}
+          </WrapperText>
+          <View style={{ position: 'absolute', top: 0, right: 0 }}>
+            <LogoutButton iconSize={20} />
+          </View>
+        </WrapperActions>
+
+        {isEmailVerifyRequired && (
+          !verificationState.email ? (
+            <InputWrapper>
+              <OInput
+                placeholder={user?.email}
+                style={style.inputStyle}
+                icon={theme.images.general.email}
+                isDisabled
+              />
+            </InputWrapper>
+          ) : (
+            <>
+              <WrappCountdown>
+                <CountDownContainer color={timer === '00:00' ? theme.colors.error: theme.colors.success}>
+                  <OText
+                    size={26}
+                    color={timer === '00:00' ? theme.colors.error: theme.colors.success}
+                  >
+                    {timer}
+                  </OText>
+                </CountDownContainer>
+              </WrappCountdown>
+
+              <InputsSection>
+                <OtpSection>
+                  <DigitInput
+                    disabled={otpState.length === CODE_LENGTH}
+                    onPress={handleOnPress}
+                  >
+                    {codeDigitsArray.map(toDigitInput)}
+                  </DigitInput>
+                  <TextInput
+                    ref={ref}
+                    value={otpState}
+                    placeholder='0'
+                    onChangeText={setOtpState}
+                    onSubmitEditing={handleOnBlur}
+                    keyboardType="number-pad"
+                    returnKeyType="done"
+                    textContentType="oneTimeCode"
+                    maxLength={CODE_LENGTH}
+                    style={style.hiddenCodeInput}
+                  />
+                </OtpSection>
+              </InputsSection>
+
+              <WrapperText>
+                <TouchableOpacity
+                  onPress={() => handleSendOtp()}
+                >
+                  <OText color={theme.colors.primary}>
+                    {t('RESEND_AGAIN', 'Resend again?')}
+                  </OText>
+                </TouchableOpacity>
+              </WrapperText>
+            </>
+          )
+        )}
+
+        {isPhoneVerifyRequired && !isEmailVerifyRequired && (
+          !verificationState.phone ? (
+            phoneState?.formatted ? (
+              <>
+                <InputWrapper phone>
+                  <PhoneInputNumber
+                    handleData={() => {}}
+                    defaultValue={phoneState?.cellphone}
+                    defaultCode={phoneState?.country_phone_code.replace('+', '')}
+                    boxStyle={style.phoneSelect}
+                    inputStyle={style.phoneInputStyle}
+                    textStyle={{ color: theme.colors.textNormal, fontSize: 12, padding: 0 }}
+                    noDropIcon
+                    isDisabled
+                  />
+                </InputWrapper>
+              </>
+            ) : (
+              <>
+                <OText size={14} color={theme.colors.disabled} style={{ textAlign: 'center', paddingVertical: 20 }}>
+                  {t('WARNING_PHONE_CODE_VALIDATION', 'Please update your phone number to continue')}
+                </OText>
+                <WrapperText>
+                  <TouchableOpacity
+                    onPress={() => setModalIsOpen(true)}
+                  >
+                    <OText color={theme.colors.primary}>
+                      {t('UPDATE_PROFILE', 'Update profile')}
+                    </OText>
+                  </TouchableOpacity>
+                </WrapperText>
+              </>
+            )
+          ) : (
+            <>
+              <WrappCountdown>
+                <CountDownContainer color={timer === '00:00' ? theme.colors.error: theme.colors.success}>
+                  <OText
+                    size={26}
+                    color={timer === '00:00' ? theme.colors.error: theme.colors.success}
+                  >
+                    {timer}
+                  </OText>
+                </CountDownContainer>
+              </WrappCountdown>
+
+              <InputsSection>
+                <OtpSection>
+                  <DigitInput
+                    disabled={otpState.length === CODE_LENGTH}
+                    onPress={handleOnPress}
+                  >
+                    {codeDigitsArray.map(toDigitInput)}
+                  </DigitInput>
+                  <TextInput
+                    ref={ref}
+                    value={otpState}
+                    placeholder='0'
+                    onChangeText={setOtpState}
+                    onSubmitEditing={handleOnBlur}
+                    keyboardType="number-pad"
+                    returnKeyType="done"
+                    textContentType="oneTimeCode"
+                    maxLength={CODE_LENGTH}
+                    style={style.hiddenCodeInput}
+                  />
+                </OtpSection>
+              </InputsSection>
+
+              <WrapperText>
+                <TouchableOpacity
+                  onPress={() => handleSendOtp('phone')}
+                  disabled={verifyPhoneState?.loadingSendCode || verifyPhoneState?.loadingCheckCode}
+                >
+                  <OText color={theme.colors.primary}>
+                    {t('RESEND_AGAIN', 'Resend again?')}
+                  </OText>
+                </TouchableOpacity>
+              </WrapperText>
+            </>
+          )
+        )}
+
+      </Container>
+      <ButtonsActions>
+        <View style={{ width: '100%' }}>
+          <OButton
+            onClick={(verificationState.email || verificationState.phone)
+              ? () => setVerificationState({ email: false, phone: false })
+              : () => handleSendOtp(isPhoneVerifyRequired && !isEmailVerifyRequired ? 'phone' : '')
+            }
+            text={(verificationState.email || verificationState.phone) ? t('CANCEL', 'Cancel') : t('SEND_CODE', 'Send code')}
+            bgColor={(verificationState.email || verificationState.phone) ? theme.colors.secundary : theme.colors.primary}
+            borderColor={(verificationState.email || verificationState.phone) ? theme.colors.secundary : theme.colors.primary}
+            textStyle={{ color: (verificationState.email || verificationState.phone) ? 'black' : 'white' }}
+            imgRightSrc={null}
+            isLoading={verifyEmailState?.loadingSendCode || verifyEmailState?.loadingCheckCode || verifyPhoneState?.loadingSendCode || verifyPhoneState?.loadingCheckCode}
+            style={(verificationState.email || verificationState.phone) ? style.btnStyle : { borderRadius: 7.6 }}
+          />
+        </View>
+      </ButtonsActions>
+
+      <OModal
+        open={modalIsOpen}
+        entireModal
+        customClose
+        onClose={() => setModalIsOpen(false)}
+      >
+        <UserDetails
+          user={user}
+          handleSuccessUpdate={() => setModalIsOpen(false)}
+        />
+      </OModal>
+    </SafeAreaView>
+  )
+}
+
+export const UserVerification = (props: any) => {
+  const verifyProps = {
+    ...props,
+    UIComponent: UserVerificationUI
+  }
+  return (
+    <UserVerificationController {...verifyProps} />
+  )
+}

package/themes/original/src/components/{VerifyEmail → UserVerification}/styles.tsx

@@ -1,77 +1,83 @@
-import styled from 'styled-components/native';
-
-export const Container = styled.View`
-  padding: 20px;
-`
-
-export const WrapperText = styled.View`
-  display: flex;
-  flex-direction: column;
-  margin: 0 auto 0px;
-  align-items: center;
-`
-
-export const InputWrapper = styled.View``
-
-export const WrapperActions = styled.View`
-  position: relative;
-`
-
-export const ButtonsActions = styled.View`
-  position: absolute;
-  bottom: 0px;
-  left: 0;
-  right: 0;
-  padding: 12px 40px;
-  flex-direction: row;
-  border-top-width: 1px;
-  border-color: ${(props: any) => props.theme.colors.border};
-  width: 100%;
-  justify-content: space-between;
-  background-color: #FFF;
-  z-index: 1000;
-  justify-content: space-between;
-`
-
-export const OtpSection = styled.SafeAreaView`
-  flex: 1;
-  align-items: center;
-  justify-content: center;
-`
-
-export const DigitInput = styled.Pressable`
-  width: 80%;
-  flex-direction: row;
-  justify-content: space-between;
-`
-
-export const CountDownContainer = styled.View`
-  background-color: ${(props: any) => `${props.color}4D`};
-  border-radius: 7.6px;
-  padding: 5px 0px 0px;
-  margin: 0 auto;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 80%;
-`
-
-export const WrappCountdown = styled.View`
-  padding-bottom: 20px;
-  padding-top: 20px;
-`
-
-export const InputsSection = styled.View`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  padding-bottom: 20px;
-`
-
-export const ErrorSection = styled.View`
-  margin-bottom: 20px;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-`
+import styled, { css } from 'styled-components/native';
+
+export const Container = styled.View`
+  padding: 20px;
+`
+
+export const WrapperText = styled.View`
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto 0px;
+  align-items: center;
+`
+
+export const InputWrapper = styled.View`
+  ${(props: any) => props.phone && css`
+    width: 60%;
+    align-self: center;
+    padding-top: 20px;
+  `}
+`
+
+export const WrapperActions = styled.View`
+  position: relative;
+`
+
+export const ButtonsActions = styled.View`
+  position: absolute;
+  bottom: 0px;
+  left: 0;
+  right: 0;
+  padding: 12px 40px;
+  flex-direction: row;
+  border-top-width: 1px;
+  border-color: ${(props: any) => props.theme.colors.border};
+  width: 100%;
+  justify-content: space-between;
+  background-color: #FFF;
+  z-index: 1000;
+  justify-content: space-between;
+`
+
+export const OtpSection = styled.SafeAreaView`
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+`
+
+export const DigitInput = styled.Pressable`
+  width: 80%;
+  flex-direction: row;
+  justify-content: space-between;
+`
+
+export const CountDownContainer = styled.View`
+  background-color: ${(props: any) => `${props.color}4D`};
+  border-radius: 7.6px;
+  padding: 5px 0px 0px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 80%;
+`
+
+export const WrappCountdown = styled.View`
+  padding-bottom: 20px;
+  padding-top: 20px;
+`
+
+export const InputsSection = styled.View`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding-bottom: 20px;
+`
+
+export const ErrorSection = styled.View`
+  margin-bottom: 20px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+`