ordering-ui-react-native 0.21.15 → 0.21.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.21.15",
+  "version": "0.21.16",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/themes/original/src/components/LoginForm/Otp/index.tsx

@@ -5,20 +5,23 @@ import { useCountdownTimer } from '../../../../../../src/hooks/useCountdownTimer
 import { useLanguage } from 'ordering-components/native';
 import { OTPContainer } from './styles';
 import { OText, OButton, OIcon } from '../../shared';
-import OtpInputs from 'react-native-otp-inputs';
+import OtpInputs, { OtpInputsRef } from 'react-native-otp-inputs';
 import { useTheme } from 'styled-components/native';
 import { otpParams } from '../../../types'
+import { ActivityIndicator } from 'react-native';
 
 export const Otp = (props: otpParams) => {
   const {
+    pinCount,
+    otpError,
+    setOtpError,
+    setAlertState,
     willVerifyOtpState,
+    isCheckingCode,
+    setCheckingCode,
     setWillVerifyOtpState,
-    onSubmit,
     handleLoginOtp,
-    setAlertState,
-    pinCount,
-    otpError,
-    setOtpError
+    onSubmit,
   } = props
 
   const theme = useTheme();
@@ -26,8 +29,7 @@ export const Otp = (props: otpParams) => {
   const [otpLeftTime, _, resetOtpLeftTime]: any = useCountdownTimer(
     600, willVerifyOtpState)
 
-  const [code, setCode] = useState('')
-  const inputRef = useRef<any>()
+  const inputRef = useRef<OtpInputsRef | any>(null)
 
   const handleOnSubmit = () => {
     setAlertState({
@@ -39,7 +41,12 @@ export const Otp = (props: otpParams) => {
   }
 
   const handleChangeCode = (code : string) => {
-    setCode(code)
+    if (code?.length === pinCount) {
+      setCheckingCode(true)
+      handleLoginOtp(code)
+      inputRef.current?.reset && inputRef.current.reset()
+      setTimeout(() => inputRef.current?.focus && inputRef.current.focus(), 100)
+    }
     setOtpError(null)
   }
 
@@ -58,13 +65,6 @@ export const Otp = (props: otpParams) => {
     }
   }, [otpLeftTime])
 
-  useEffect(() => {
-    if (code?.length === (pinCount || 6)) {
-      handleLoginOtp(code)
-      inputRef?.current?.reset()
-    }
-  }, [code])
-
   const loginStyle = StyleSheet.create({
     container: {
       width: '100%',
@@ -95,6 +95,13 @@ export const Otp = (props: otpParams) => {
       width: '100%',
       flexDirection: 'row',
       alignItems: 'center'
+    },
+    checkingCode: {
+      height: 50,
+      width: '100%',
+      marginVertical: 30,
+      justifyContent: 'center',
+      alignItems: 'center'
     }
   });
 
@@ -116,14 +123,24 @@ export const Otp = (props: otpParams) => {
         <OText size={24}>
           {formatSeconds(otpLeftTime)}
         </OText>
-        <OtpInputs
-          ref={inputRef}
-          autofillFromClipboard={false}
-          numberOfInputs={pinCount || 6}
-          style={loginStyle.container}
-          inputStyles={loginStyle.underlineStyleBase}
-          handleChange={handleChangeCode}
-        />
+        {isCheckingCode && (
+          <View style={loginStyle.checkingCode}>
+            <OText size={18}>
+              <ActivityIndicator size="large" color={theme.colors.primary} />
+            </OText>
+          </View>
+        )}
+        {!isCheckingCode && (
+          <OtpInputs
+            ref={inputRef}
+            autofillFromClipboard={false}
+            numberOfInputs={pinCount}
+            style={loginStyle.container}
+            returnKeyType={'done'}
+            inputStyles={loginStyle.underlineStyleBase}
+            handleChange={handleChangeCode}
+          />
+        )}
         {!!otpError && (
           <OText
             color={theme?.colors?.error}
@@ -150,3 +167,7 @@ export const Otp = (props: otpParams) => {
     </SafeAreaView>
   )
 }
+
+Otp.defaultProps = {
+  pinCount: 6
+}

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

@@ -104,6 +104,8 @@ const LoginFormUI = (props: LoginParams) => {
 	const isOtpEmail = loginTab === 'otp' && otpType === 'email'
 	const isOtpCellphone = loginTab === 'otp' && otpType === 'cellphone'
 
+	const [isCheckingCode, setCheckingCode] = useState(false)
+
 	const googleLoginEnabled = configs?.google_login_enabled?.value === '1' || !configs?.google_login_enabled?.enabled
 	const facebookLoginEnabled = configs?.facebook_login_enabled?.value === '1' || !configs?.facebook_login_enabled?.enabled
 	const appleLoginEnabled = configs?.apple_login_enabled?.value === '1' || !configs?.apple_login_enabled?.enabled
@@ -268,6 +270,7 @@ const LoginFormUI = (props: LoginParams) => {
 	const handleLoginOtp = async (code: string) => {
 		if (!code) return
 		const logged = await handleButtonLoginClick({ code })
+		setCheckingCode(false)
 		if (logged) {
 			setWillVerifyOtpState(false)
 		} else {
@@ -854,6 +857,8 @@ const LoginFormUI = (props: LoginParams) => {
 				animationType='slide'
 			>
 				<Otp
+					isCheckingCode={isCheckingCode}
+					setCheckingCode={setCheckingCode}
 					willVerifyOtpState={willVerifyOtpState}
 					otpError={otpError}
 					setOtpError={setOtpError}

package/themes/original/src/types/index.tsx

@@ -732,6 +732,8 @@ export interface otpParams {
 	pinCount: number;
 	otpError: any,
 	setOtpError: any
+	isCheckingCode: boolean
+	setCheckingCode: (value: boolean) => void
 }
 
 export interface FavoriteParams {