ordering-ui-react-native 0.17.54 → 0.17.55-release

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

@@ -0,0 +1,92 @@
+import React, { useEffect } from 'react'
+import { formatSeconds } from '../../../utils'
+import { StyleSheet, TouchableOpacity } from 'react-native';
+import { useCountdownTimer } from '../../../../../../src/hooks/useCountdownTimer';
+import { useLanguage } from 'ordering-components/native';
+import { OTPContainer } from './styles';
+import { OText, OButton } from '../../shared';
+import OTPInputView from '@twotalltotems/react-native-otp-input'
+import { useTheme } from 'styled-components/native';
+import { otpParams } from '../../../types'
+
+export const Otp = (props: otpParams) => {
+    const {
+        willVerifyOtpState,
+        setWillVerifyOtpState,
+        onSubmit,
+        handleLoginOtp,
+        setAlertState,
+        pinCount
+    } = props
+
+    const theme = useTheme();
+    const [, t] = useLanguage();
+    const [otpLeftTime, _, resetOtpLeftTime]: any = useCountdownTimer(
+        600, willVerifyOtpState)
+
+
+    const handleOnSubmit = () => {
+        setAlertState({
+            open: true,
+            title: t('CODE_SENT', 'The code has been sent'),
+        })
+        resetOtpLeftTime()
+        onSubmit()
+    }
+
+    useEffect(() => {
+        if (otpLeftTime === 0) {
+            setAlertState({
+                open: true,
+                title: t('TIME_IS_UP', 'Time is up'),
+                content: t('PLEASE_RESEND_CODE', 'Please resend code again')
+            })
+        }
+    }, [otpLeftTime])
+
+    const loginStyle = StyleSheet.create({
+        underlineStyleBase: {
+            width: 45,
+            height: 60,
+            borderWidth: 1,
+            fontSize: 16
+        },
+        underlineStyleHighLighted: {
+            borderColor: theme.colors.primary,
+            color: theme.colors.primary,
+            fontSize: 16
+        },
+    });
+
+    return (
+        <>
+            <OTPContainer>
+                <OText size={24}>
+                    {formatSeconds(otpLeftTime)}
+                </OText>
+                <OTPInputView
+                    style={{ width: '100%', height: 150 }}
+                    pinCount={pinCount || 6}
+                    codeInputFieldStyle={loginStyle.underlineStyleBase}
+                    codeInputHighlightStyle={loginStyle.underlineStyleHighLighted}
+                    onCodeFilled={(code: string) => handleLoginOtp(code)}
+                    selectionColor={theme.colors.primary}
+                    editable
+                />
+                <TouchableOpacity onPress={() => handleOnSubmit()} disabled={otpLeftTime > 520}>
+                    <OText size={16} mBottom={30} color={otpLeftTime > 520 ? theme.colors.disabled : theme.colors.primary}>
+                        {t('RESEND_CODE', 'Resend code')}
+                    </OText>
+                </TouchableOpacity>
+                <OButton
+                    onClick={() => setWillVerifyOtpState(false)}
+                    bgColor={theme.colors.white}
+                    borderColor={theme.colors.primary}
+                    textStyle={{ color: theme.colors.primary }}
+                    style={{ borderRadius: 8, width: '100%' }}
+                    text={t('CANCEL', 'Cancel')}
+                />
+            </OTPContainer>
+        </>
+    )
+}

package/themes/kiosk/src/components/LoginForm/Otp/styles.tsx

@@ -0,0 +1,7 @@
+import styled from 'styled-components/native';
+
+export const OTPContainer = styled.View`
+  padding: 20px;
+  align-items: center;
+  flex: 1 
+`