ordering-ui-react-native 0.21.14 → 0.21.16

package/package.json

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

package/src/components/BusinessInformation/index.tsx

@@ -19,6 +19,8 @@ import { BusinessBasicInformation } from '../BusinessBasicInformation'
 import { BusinessInformationParams } from '../../types'
 import { GoogleMap } from '../GoogleMap'
 import { useTheme } from 'styled-components/native';
+import moment from 'moment';
+
 const BusinessInformationUI = (props: BusinessInformationParams) => {
   const {
     businessState,
@@ -38,14 +40,13 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
     t('FRIDAY_ABBREVIATION', 'Fri'),
     t('SATURDAY_ABBREVIATION', 'Sat')
   ]
-  const is12hours = configs?.format_time?.value?.includes('12')
 
-  const scheduleFormatted = ({ hour, minute } : { hour : number | string, minute : number | string}) => {
-    const checkTime = (val: number | string) => (val < 10 ? `0${val}` : val);
-		const zz = hour === 0 ? t('AM', 'AM') : hour >= 12 ? t('PM', 'PM') : t('AM', 'AM');
-		const h = parseInt(`${hour}`);
-		return is12hours ? `${h === 0 ? 12 : h > 12 ? h - 12 : h}:${checkTime(minute)} ${zz}` : `${checkTime(hour)}:${checkTime(minute)}`;
-  }
+  const formatTime = configs?.general_hour_format?.value
+
+	const checkTime = (val: number) => (val < 10 ? `0${val}` : val);
+	const timeFormated = (time: any) => {
+		return moment(`1900-01-01 ${checkTime(time.hour)}:${checkTime(time.minute)}`).format(formatTime)
+	}
 
   return (
     <BusinessInformationContainer>
@@ -105,13 +106,13 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
                   {schedule.enabled ? (
                     schedule.lapses.map( (time: any, k: number) => (
                     <React.Fragment key={k}>
-                      <OText>{scheduleFormatted(time.open)}</OText>
+                      <OText>{timeFormated(time.open)}</OText>
                       <OText mBottom={10} style={{
                         padding: 3,
                         borderBottomColor: theme.colors.primary,
                         borderBottomWidth: 1
                       }}
-                      >{scheduleFormatted(time.close)}</OText>
+                      >{timeFormated(time.close)}</OText>
                     </React.Fragment>
                   ))) : ( <OText>{t('CLOSED', 'Closed')}</OText>)}
                 </ScheduleBlock>

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 {