import * as React from 'react';
import {
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 TermsConditions 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.data, session: await DB.get("session") })
}
activateResend = () => {
setTimeout(() => {
this.setState({ resend: true })
}, 15000)
}
encyptNumber = (contact) => {
let replacement = "****"
let index = 6
return contact.substr(0, index) + replacement+ contact.substr(index + replacement.length)
}
getRetries = () => { return retries }
onRetry = async () => {
if(this.state.resend){
this.setState({ loading: true })
this.requestOnRetry(success => {
this.setState({ loading: false })
if(success.status == 1){
Alert.alert("Requested.", '\n' + "New OTP code will be submitted on your mobile number.")
}
}, err => {
Alert.alert("Information", '\n' + err.message)
this.setState({ loading: false })
})
}
}
requestOnRetry = 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")
}
onSubmit = async () => {
NetInfo.netstatus(isConnected => {
if(isConnected){
this.setState({ loading: true })
this.validateOTP(success => {
if(success.status == 1 && success.data.token){
const { callback, type } = this.props.route.params
if(type && type == 'edit'){
if(callback) callback("valid")
this.props.navigation.navigate("EditProfile")
} else {
DB.settoken({token: success.data.token, card_number: this.state.data.card_number}, async () => {
this.requestProfileInfo(success.data.token, onSuccess => {
DB.setsession(this.state.data, (res) => {
this.setState({ loading: false })
if(onSuccess.status == 1){
DB.addaccount(onSuccess, () => {
if(type && type == "addcard"){
if(callback) callback("success", onSuccess)
}
this.props.navigation.navigate("Account")
}, err => {})
}
}, (err) => {
Alert.alert("Information", `\n${err.message}`);
})
}, err => {
Alert.alert("Information", `\n${err.message}`);
})
}, function(e){})
}
} else {
if(Platform.OS == 'ios'){
this.setState({ loading: false })
setTimeout(() => {
Alert.alert("Information", '\n' + success.message)
this.setState({ resend: true })
}, 300)
} else {
this.setState({ loading: false })
setTimeout(() => {
Alert.alert("Information", '\n' + success.message)
this.setState({ resend: true })
}, 300)
}
}
}, err => {
setTimeout(() => {
Alert.alert("Information", '\n' + err.message)
}, 300)
this.setState({ loading: false, resend: true })
})
}else{
Elements.nointernet2(this.props)
}
})
}
requestProfileInfo = async (token, successCallback, errorCallback) => {
await REQUEST("user_profile", "get", {
Authorization: "Bearer " + token,
card_number: this.state.data.card_number
}, {}, {}, function(act){
successCallback(act)
}, function(error){
errorCallback(error)
}, "Profile", "Fetch")
}
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
}, function(data){
successCallback(data)
}, 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()} 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)(TermsConditions);