import React, {Component, useEffect, useState} from 'react'; import { View, Text, TextInput, StyleSheet, TouchableOpacity, Platform, Alert, } from 'react-native'; import HeaderBack from '../../../components/Header/HeaderBack'; import { CodeField, Cursor, useBlurOnFulfill, useClearByFocusCell, } from 'react-native-confirmation-code-field'; import { getFontXD, HEIGHTXD, WIDTHXD, encryptRSAString, } from '../../../Config/Functions'; import R from '../../../assets/R'; import {NEWPASSWORD, TABNAVIGATOR} from '../../../routers/ScreenNames'; import { verifyOTPApi, verifyStoreOTPApiSmart, getOTPApiSmartOTP, } from '../../../apis/Functions/users'; import {useNavigation} from '@react-navigation/native'; import I18n from '../../../helper/i18/i18n'; import AppText from '../../../components/AppText'; import {showLoading, hideLoading} from '../../../actions/loadingAction'; import {connect} from 'react-redux'; import {showAlert, TYPE} from '../../../components/DropdownAlert'; import CountDown from '../../../components/CountDown'; import {getOTPApi} from '../../../apis/Functions/users'; const CELL_COUNT = 4; const ConfirmOTP = (propsa) => { const [value, setValue] = useState(''); const [isReset, setReset] = useState(false); const navigate = useNavigation(); const ref = useBlurOnFulfill({value, cellCount: CELL_COUNT}); const [props, getCellOnLayoutHandler] = useClearByFocusCell({ value, setValue, }); const getOTP = async () => { propsa.showLoading(); const res = await getOTPApiSmartOTP({ platform: Platform.OS, otp_by: propsa.user.email, otp_password: '1234', type: 'CREATE_OTP_PASSWORD', }); propsa.hideLoading(); if (res.data.code == 200) { setReset(!isReset); showAlert(TYPE.SUCCESS, I18n.t('Notification'), res.data.message); } else { showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message); } }; const confirm = async () => { console.log(propsa.route.params); if (!value) { showAlert(TYPE.WARN, I18n.t('Notification'), I18n.t('EnterOTPRequest')); } else if (value.length != 4) { showAlert(TYPE.WARN, I18n.t('Notification'), I18n.t('OTPInvalid')); } else { propsa.showLoading(); const res = await verifyStoreOTPApiSmart({ platform: Platform.OS, password: encryptRSAString(propsa.route.params.password), password_confirmation: encryptRSAString( propsa.route.params.password_confirmation, ), otp: value, type: 'CREATE_OTP_PASSWORD', }); propsa.hideLoading(); if (res.data.code == 200) { showAlert(TYPE.SUCCESS, I18n.t('Notification'), res.data.message); if (propsa.route.params.isFromTransaction) { propsa.route.params.setupSmartOTPSuccess(); } else { navigate.navigate(TABNAVIGATOR); } } else { showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message); } } }; return ( <View style={{flex: 1}}> <HeaderBack title={'VerifyOTP'} /> <View style={styles.container}> <View style={{height: 20}} /> <View style={styles.wrap}> <AppText i18nKey={'Verify_code'} style={styles.txtTitle} /> <View style={styles.containerCode}> <CodeField ref={ref} {...props} value={value} onChangeText={setValue} cellCount={CELL_COUNT} rootStyle={styles.codeFieldRoot} keyboardType="number-pad" textContentType="oneTimeCode" renderCell={({index, symbol, isFocused}) => ( <View onLayout={getCellOnLayoutHandler(index)} key={index} style={[styles.cellRoot, isFocused && styles.focusCell]}> <Text style={styles.cellText}> {symbol || (isFocused ? <Cursor /> : null)} </Text> </View> )} /> </View> </View> </View> <View style={styles.footer}> <TouchableOpacity onPress={confirm} style={styles.btn}> <AppText i18nKey={'Continue'} style={styles.txtBtn} /> </TouchableOpacity> <TouchableOpacity style={styles.wrapFooter} onPress={getOTP}> <Text style={styles.txtNote}>{I18n.t('OTPValidFiveMinute')}</Text> <AppText i18nKey={'Re_send'} style={styles.txtSend} /> </TouchableOpacity> <CountDown isReset={isReset} /> </View> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', paddingVertical: 20, }, footer: { height: 200, justifyContent: 'center', alignItems: 'center', }, wrap: { flex: 1, paddingTop: 30, alignItems: 'center', width: '100%', paddingHorizontal: 50, }, containerCode: { height: 50, width: '100%', marginTop: 30, }, codeFieldRoot: { marginTop: 20, }, focusCell: { borderColor: '#000', }, cellRoot: { width: 40, height: 40, justifyContent: 'center', alignItems: 'center', borderBottomColor: '#ccc', borderBottomWidth: 1, }, cellText: { color: '#000', fontSize: 36, textAlign: 'center', }, focusCell: { borderBottomColor: '#007AFF', borderBottomWidth: 2, }, txtTitle: { fontSize: getFontXD(52), color: '#979797', }, btn: { width: WIDTHXD(521), height: HEIGHTXD(120), borderRadius: 15, backgroundColor: '#1C6AF6', justifyContent: 'center', alignItems: 'center', }, txtBtn: { color: R.colors.white, fontSize: getFontXD(52), textTransform: 'uppercase', }, txtSend: { fontSize: getFontXD(42), color: '#1C6AF6', }, wrapFooter: { marginTop: 30, flexDirection: 'row', alignItems: 'center', }, txtNote: { color: '#A2A2A2', fontSize: getFontXD(42), fontStyle: 'italic', }, }); const mapStateToProps = (state) => { return {user: state.userReducer}; }; export default connect(mapStateToProps, {showLoading, hideLoading})(ConfirmOTP);