ordering-ui-react-native 0.21.9 → 0.21.10

package/package.json

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

package/src/components/shared/OToast.tsx

@@ -1,17 +1,18 @@
 import * as React from "react";
-import { Animated, StyleSheet, Text, View, Platform } from "react-native";
+import { Animated, StyleSheet, Text, View } from "react-native";
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { ToastType, useToast, useLanguage } from "ordering-components/native";
 import { useTheme } from 'styled-components/native';
 import { getTraduction } from '../../utils'
 
 const fadeDuration = 300;
-const topPosition = Platform.OS === 'ios' ? 40 : 20
 
 export const Toast = (props: any) => {
   const [toastConfig, { hideToast }] = useToast();
   const [, t] = useLanguage()
   const opacity = React.useRef(new Animated.Value(0)).current;
   const theme = useTheme();
+  const { top: topPosition } = useSafeAreaInsets();
 
   const fadeIn = React.useCallback(() => {
     Animated.timing(opacity, {

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { formatSeconds } from '../../../utils'
-import { StyleSheet, TouchableOpacity, View, Platform } from 'react-native';
+import { StyleSheet, TouchableOpacity, View, SafeAreaView } from 'react-native';
 import { useCountdownTimer } from '../../../../../../src/hooks/useCountdownTimer';
 import { useLanguage } from 'ordering-components/native';
 import { OTPContainer } from './styles';
@@ -87,20 +87,19 @@ export const Otp = (props: otpParams) => {
       fontSize: 16
     },
     wrapperIcon: {
-      marginTop: Platform.OS === 'ios' ? 40 : 12,
-      marginBottom: 20,
       alignItems: 'center',
       justifyContent: 'center',
-      paddingRight: 35
+      paddingRight: 20
     },
     closeContainer: {
       width: '100%',
       flexDirection: 'row',
+      alignItems: 'center'
     }
   });
 
   return (
-    <>
+    <SafeAreaView style={{ flex: 1, backgroundColor: theme.colors.backgroundPage }}>
       <OTPContainer>
         <View
           style={loginStyle.closeContainer}>
@@ -110,9 +109,7 @@ export const Otp = (props: otpParams) => {
               width={22}
             />
           </TouchableOpacity>
-          <OText size={22} style={{
-            marginTop: 5
-          }}>
+          <OText size={22}>
             {t('ENTER_VERIFICATION_CODE', 'Enter verification code')}
           </OText>
         </View>
@@ -150,6 +147,6 @@ export const Otp = (props: otpParams) => {
           text={t('CANCEL', 'Cancel')}
         />
       </OTPContainer>
-    </>
+    </SafeAreaView>
   )
 }

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

@@ -179,7 +179,7 @@ const LoginFormUI = (props: LoginParams) => {
 				vibrateApp()
 				return
 			}
-			if (!values?.cellphone && otpType === 'cellphone') {
+			if (otpType === 'cellphone' && phoneInputData?.error && !phoneInputData?.phone?.cellphone) {
 				showToast(ToastType.Error, t('PHONE_NUMBER_REQUIRED', 'Phone number is required'));
 				return
 			}

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

@@ -195,38 +195,39 @@ const UserVerificationUI = (props: any) => {
   }
 
   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])
+    if (verificationState.phone) {
+      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, verificationState.phone])
 
   useEffect(() => {
     if (otpState?.length === CODE_LENGTH) {
@@ -460,23 +461,25 @@ const UserVerificationUI = (props: any) => {
           )}
 
         </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>
+        {!!phoneState?.cellphone && (
+          <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>
+        )}
         <View style={{ paddingHorizontal: 20, paddingBottom: 80 }}>
           <UserDetails
             user={user}