import * as React from 'react';
import { SafeAreaView, TouchableOpacity, View, Text, KeyboardAvoidingView, Alert, Platform } from 'react-native';
import { connect } from "react-redux";
import NetInfo from "../../components/netstatus";
import CustomHeader from '../../components/header.js';
import Elements from '../../components/elements.js';
import Theme from '../../components/theme.style.js';
import DB from '../../components/storage/';
import REQUEST from '../../components/api/';
import CustomOTPInput from '../../components/otpinput';
import CustomSafeArea from '../../components/safeArea.component';
class Otp extends React.PureComponent {
constructor(props) {
super(props)
}
state = {
loading: false,
infodialog: false,
errordialog: false,
otp: "",
resend: false,
retries: 0,
valid: false,
session: null,
data: {}
}
componentDidMount() {
this.init()
this.activateResend()
}
componentWillUnmount() {
}
init = async () => {
this.setState({ data: this.props.route.params, session: await DB.get("session") })
}
activateResend = () => {
setTimeout(() => {
this.setState({ resend: true })
}, 15000)
}
onErrorWarning = (success) => {
if(Platform.OS == 'ios'){
if(success.data.code == 1) {
setTimeout(() => {
Alert.alert(
"Information",
'\n'+success.message,
[
{
text: 'Ok',
onPress: async () => {
this.props.navigation.navigate('Mpin');
},
},
],
{cancelable: true},
);
this.setState({ resend: true })
}, 700)
} else {
setTimeout(() => {
Alert.alert("Information", '\n' + success.message)
}, 700)
this.setState({ resend: true })
}
} else {
setTimeout(() => {
Alert.alert("Information", '\n' + success.message)
}, 700)
}
}
onSaveSession = async (success) => {
let sessiondata = {
card_number: this.state.data.cardnumber,
lcard_uuid: this.state.data.lcard_uuid,
mobile_number: Theme.formatter.PMBL(this.state.data.mobile_number)
}
await DB.settoken({token: success.data.token, card_number: sessiondata.card_number}, () => {
DB.setsession(sessiondata, (res) => {
this.props.navigation.navigate("SecurityQuestion", sessiondata)
}, function(error){})
}, function(e){})
}
onSubmit = () => {
NetInfo.netstatus(isConnected => {
if(isConnected){
this.validateOTP(success => {
if(success.status == 1 && success.data.token){
this.setState({ loading: false })
this.onSaveSession(success)
}else{
this.setState({ loading: false })
this.onErrorWarning(success)
}
}, err => {
Alert.alert("Information", `\n${err.message}`);
this.setState({ loading: false, resend: true })
})
}else{
Elements.nointernet2(this.props)
}
})
}
onRetry = async () => {
console.log(this.state.otp)
if(this.state.resend){
this.setState({ loading: true })
this.retryValidateOTP(success => {
if(success.status == 1){
this.activateResend()
this.setState({ loading: false, resend: false })
Platform.OS == 'ios' ? setTimeout(() => {
Alert.alert("Requested.", '\n' + "New OTP code will be submitted on your mobile number.")
}, 300) : Alert.alert("Requested.", '\n' + "New OTP code will be submitted on your mobile number.")
}else{
this.setState({ loading: false, resend: true })
}
}, err => {
Alert.alert("Information", `\n${err.message}`);
this.setState({ loading: false, resend: true })
})
}
}
validateOTP = async (successCallback, errorCallback) => {
this.setState({ loading: true, retries: this.state.retries + 1 })
await REQUEST("sendOTP", "post", {}, {}, {
otp: this.state.otp,
lcard_uuid: this.state.data.lcard_uuid
}, async (data) => {
successCallback(data)
}, function(error){
errorCallback(error)
}, "OTP", "Request")
}
retryValidateOTP = async (successCallback, errorCallback) => {
let params = `lcard_uuid=${this.state.data.lcard_uuid}&mobile=${Theme.formatter.PMBL(this.state.data.mobile_number)}&is_resend=true`;
await REQUEST("requestOTP", "get", {}, params, {},
function(res){
successCallback(res)
}, function(error){
errorCallback(error)
}, "OTP", "Request"
)
}
showContent = () => {
return (
Enter Code
Enter the 4-digit verification code sent to
{Theme.formatter.ENCMBL(this.state.data.mobile_number || "+639000000000")}
{
this.setState({ otp: v, valid: v.length == 4 ? true : false })
}}
/>
this.onSubmit()} disabled={!this.state.valid} style={{backgroundColor: this.state.valid ? Theme.colors.primary : this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.primary + "15", padding: 15, width: '80%', borderRadius: 10, elevation: this.state.valid ? 3 : 0}}>
Submit
this.onRetry()} style={{flex: 2}}>
Resend Code
)
}
render() {
return (
this.setState({ infodialog: false })}
onSubmit={(value) => this.setState({ infodialog: false })}
/>
this.setState({ errordialog: false })}
onSubmit={(value) => this.setState({ errordialog: false })}
/>
this.props.navigation.goBack()} navigation={this.props.navigation} />
{
Theme.platform === "android" ?
this.showContent()
:
{this.showContent()}
}
)
}
}
const mapStateToProps = (state) => {
return {
app_theme: state.appThemeReducer.theme
}
}
export default connect(mapStateToProps, null)(Otp)