329 lines
12 KiB
JavaScript
329 lines
12 KiB
JavaScript
import * as React from 'react';
|
|
import { useState, useEffect } from 'react';
|
|
import { connect } from "react-redux";
|
|
import { StyleSheet, SafeAreaView, TouchableOpacity, Button, View, Text, Image, TextInput, Alert, Platform } from 'react-native';
|
|
import {useNetInfo} from "@react-native-community/netinfo";
|
|
// import NetInfo from "@react-native-community/netinfo";
|
|
import NetInfo from "../../components/netstatus";
|
|
import CustomHeader from '../../components/header.js';
|
|
import Assets from '../../components/assets.manager.js';
|
|
import Elements from '../../components/elements.js';
|
|
import Theme from '../../components/theme.style.js';
|
|
import Icon from '../../components/icons.js';
|
|
import DB from '../../components/storage/';
|
|
import REQUEST from '../../components/api/';
|
|
import CustomInput from '../../components/custominput';
|
|
import { Container } from 'native-base';
|
|
import CustomSafeArea from '../../components/safeArea.component';
|
|
|
|
class ActivateAccountCard extends React.PureComponent {
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
}
|
|
|
|
state = {
|
|
loading: false,
|
|
cardnumber: "",
|
|
valid: false,
|
|
phoneNumber: ""
|
|
}
|
|
|
|
componentDidMount() {
|
|
console.log(this.props)
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
|
|
}
|
|
|
|
handleRedirect = (res, uuid, SESSION) => {
|
|
Alert.alert(
|
|
'Error',
|
|
"\n"+res.message+'\n',
|
|
[{
|
|
text: 'NO',
|
|
style: 'cancel',
|
|
},
|
|
{
|
|
text: 'YES', onPress: async () => {
|
|
let phoneNumber = Theme.formatter.PMBL(this.state.phoneNumber)
|
|
this.setState({ loading: true })
|
|
this.validateMobilenumber(uuid, phoneNumber, success => {
|
|
this.setState({ loading: false })
|
|
this.props.navigation.navigate("LoginSendOTP", {
|
|
lcard_uuid: success.data.user_id,
|
|
mobile_number: this.state.phoneNumber,
|
|
card_number: success.data.card_number
|
|
})
|
|
}, error => {
|
|
Alert.alert(
|
|
'Error',
|
|
"\n"+res.message+'\n',
|
|
[{
|
|
text: 'Cancel',
|
|
style: 'cancel',
|
|
}],
|
|
{cancelable: true}
|
|
);
|
|
})
|
|
}
|
|
},
|
|
],
|
|
{cancelable: true}
|
|
);
|
|
}
|
|
|
|
stripString = (regex, regexReplace ,string, replaceString) => {
|
|
let validMobileNumber = regex.test(string);
|
|
if(!validMobileNumber) {
|
|
return null
|
|
}
|
|
return string.replace(regexReplace, replaceString)
|
|
}
|
|
|
|
setCardNumber = (cn) => {
|
|
this.setState({ valid: cn.length == 16 ? true : false })
|
|
}
|
|
|
|
validateEnrollCard = async (successCallback, errorCallback) => {
|
|
this.setState({ loading: true })
|
|
let uuid = await DB.get("deviceUUID")
|
|
let SESSION = await DB.session()
|
|
await REQUEST("card_validation_enroll", "post", {}, {}, {
|
|
card_number: this.state.cardnumber,
|
|
deviceUUID: uuid
|
|
},
|
|
function(res){
|
|
console.log(res)
|
|
successCallback(res, uuid, SESSION)
|
|
}, function(error){
|
|
console.log(error)
|
|
errorCallback(error)
|
|
})
|
|
}
|
|
|
|
validateMobilenumber = async (uuid, phoneNumber, successCallback, errorCallback) => {
|
|
await REQUEST("login_mobile", "post", {}, {}, {
|
|
deviceUUID: uuid,
|
|
mobile_number: phoneNumber
|
|
}, function(data){
|
|
successCallback(data)
|
|
}, function(error){
|
|
errorCallback(error)
|
|
})
|
|
}
|
|
|
|
onSubmit = () => {
|
|
if(this.state.valid) {
|
|
NetInfo.netstatus(isConnected => {
|
|
if(isConnected){
|
|
this.validateEnrollCard((success, uuid, session) => {
|
|
this.setState({ loading: false })
|
|
if(success.status == 0 && success.data.code == 1) {
|
|
Platform.OS == 'ios' ? setTimeout(() => {
|
|
Alert.alert("Error", success.message)
|
|
}, 300) : Alert.alert("Error", success.message)
|
|
} else if(success.status == 0 && success.data.code == 2) {
|
|
this.props.navigation.navigate("EnrollPin", {card_number: this.state.cardnumber, transactionType: "ActivateCard"})
|
|
} else if(success.status == 0 && success.data.code == 4) {
|
|
this.setState({ phoneNumber: success.data.number })
|
|
Platform.OS == 'ios' ? setTimeout(() => {
|
|
this.handleRedirect(success, uuid, session)
|
|
}, 300) :
|
|
this.handleRedirect(success, uuid, session)
|
|
} else{
|
|
this.props.navigation.navigate("EnrollPin", {card_number: this.state.cardnumber, transactionType: "ActivateCard"})
|
|
}
|
|
}, error => {
|
|
this.setState({ loading: false })
|
|
})
|
|
}else{
|
|
Elements.nointernet2(this.props)
|
|
}
|
|
})
|
|
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<CustomSafeArea>
|
|
<Elements.loaderView
|
|
title="Validating"
|
|
message="Please wait, validating your card number..."
|
|
isDarkMode={this.props.app_theme?.theme.dark}
|
|
backgroundColor={this.props.app_theme?.theme.colors.border}
|
|
color={this.props.app_theme?.theme.colors.text}
|
|
visible={this.state.loading} />
|
|
<CustomHeader title="" navigation={this.props.navigation} main={false} backscreen={this.props.route.params ? this.props.route.params.screen : "Account"} back={true} />
|
|
<View style={{flex: 1}}>
|
|
<View style={{width: '100%', height: 90, alignSelf: 'center', marginTop: 50}}>
|
|
<Image source={Assets.logo.unioil} style={{width: '100%', height: '85%', resizeMode: 'contain'}} />
|
|
</View>
|
|
<View style={{flex: 1, alignItems: 'center'}}>
|
|
<Text style={{alignSelf: 'center', fontFamily: 'Arial', fontWeight: 'bold', fontSize: 25, padding: 15, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>Enroll Card</Text>
|
|
<Text style={{alignSelf: 'center', marginTop: 5, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, fontFamily: 'Arial', fontSize: 16}}>
|
|
Have a new card?
|
|
</Text>
|
|
<Text style={{alignSelf: 'center', marginTop: 1, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, fontFamily: 'Arial', fontSize: 16}}>
|
|
Please enter your card number.
|
|
</Text>
|
|
<View style={{flexDirection: 'row', marginTop: 20, alignItems: 'center'}}>
|
|
<CustomInput
|
|
textColor={this.props.app_theme?.theme.colors.text}
|
|
isDarkMode={this.props.app_theme?.theme.dark}
|
|
onChangeText={(val) => {
|
|
this.setState({ cardnumber: val, valid: val.length == 16 ? true : false })
|
|
}}
|
|
/>
|
|
</View>
|
|
<View style={{alignItems: 'center', justifyContent: 'flex-end', padding: 20, marginTop: 10}}>
|
|
<TouchableOpacity onPress={() => this.onSubmit()} disabled={!this.state.valid} style={{padding: 20, paddingTop: 15, width: Theme.screen.w - 80, paddingBottom: 15, borderRadius: 10, backgroundColor: this.state.valid ? Theme.colors.primary : this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.primary + "15"}}>
|
|
<Text style={{fontSize: 16, fontFamily: 'Arial', textAlign: 'center', color: '#fff'}}>Next</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</CustomSafeArea>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
app_theme: state.appThemeReducer.theme
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps, null)(ActivateAccountCard)
|
|
|
|
// export default function ActivateAccountCard(navigation) {
|
|
|
|
// const [loading, setloading] = useState(false);
|
|
// const [cardnumber, setcardnumber] = useState("");
|
|
// const [valid, setvalid] = useState(false);
|
|
|
|
// const setCardNumber = (cn) => {
|
|
// console.log(cn.length, cn)
|
|
// setvalid(cn.length == 16 ? true : false)
|
|
// }
|
|
|
|
// const handleRedirect = (res, uuid, SESSION) => {
|
|
// Alert.alert(
|
|
// 'Error',
|
|
// "\n"+res.message+'\n',
|
|
// [{
|
|
// text: 'No',
|
|
// style: 'cancel',
|
|
// },
|
|
// {
|
|
// text: 'YES', onPress: async () => {
|
|
// navigation.navigation.navigate("LoginBirthday", {
|
|
// cardnumber: cardnumber,
|
|
// deviceUUID: uuid
|
|
// })
|
|
// }
|
|
// },
|
|
// ],
|
|
// {cancelable: true}
|
|
// );
|
|
// }
|
|
|
|
// const Submit = async () => {
|
|
// setloading(true)
|
|
// let uuid = await DB.get("deviceUUID")
|
|
// let SESSION = await DB.session()
|
|
// await REQUEST("card_validation_enroll", "post", {}, {}, {
|
|
// card_number: cardnumber,
|
|
// deviceUUID: uuid
|
|
// }, function(res){
|
|
// setloading(false)
|
|
// console.log("RES", res)
|
|
// if(res.status == 0 && res.data.code == 2){
|
|
// // Platform.OS == 'ios' ? setTimeout(() => {
|
|
// // Alert.alert("Error", "\n" + res.message)
|
|
// // }, 300) :
|
|
// // Alert.alert("Error", "\n" + res.message)
|
|
// // handleRedirect(res, uuid, SESSION)
|
|
// navigation.navigation.navigate("EnrollPin", {card_number: cardnumber})
|
|
// }else if(res.status == 0 && res.data.code == 4){
|
|
// console.log("RES", res)
|
|
// Platform.OS == 'ios' ? setTimeout(() => {
|
|
// handleRedirect(res, uuid, SESSION)
|
|
// }, 300) :
|
|
// handleRedirect(res, uuid, SESSION)
|
|
// }
|
|
// else{
|
|
// //PROCEED NOW!!!!
|
|
// navigation.navigation.navigate("EnrollPin", {card_number: cardnumber})
|
|
// }
|
|
|
|
// }, function(error){
|
|
// console.log(error)
|
|
// setloading(false)
|
|
// })
|
|
// }
|
|
|
|
// const onSubmit = () => {
|
|
// if(valid) Submit()
|
|
// // if(valid) alert("Card number is " + cardnumber)
|
|
// }
|
|
|
|
// return (
|
|
// <SafeAreaView style={{flex: 1}}>
|
|
// <Elements.loader visible={loading} />
|
|
// <CustomHeader title="" navigation={navigation} main={false} backscreen={navigation.route.params ? navigation.route.params.screen : "Account"} back={true} />
|
|
// <Content>
|
|
// <View style={{flex: 1}}>
|
|
// <View style={{width: '100%', height: 90, alignSelf: 'center', marginTop: 50}}>
|
|
// <Image source={Assets.logo.unioil} style={{width: '100%', height: '85%', resizeMode: 'contain'}} />
|
|
// </View>
|
|
// <View style={{flex: 1, alignItems: 'center'}}>
|
|
// <Text style={{alignSelf: 'center', fontFamily: 'Arial', fontWeight: 'bold', fontSize: 25, padding: 15, color: Theme.colors.textPrimary}}>Enroll Card</Text>
|
|
// <Text style={{alignSelf: 'center', marginTop: 5, color: Theme.colors.textPrimary, fontFamily: 'Arial', fontSize: 16}}>
|
|
// Have a new card?
|
|
// </Text>
|
|
// <Text style={{alignSelf: 'center', marginTop: 1, color: Theme.colors.textPrimary, fontFamily: 'Arial', fontSize: 16}}>
|
|
// Please enter your card number.
|
|
// </Text>
|
|
// <View style={{flexDirection: 'row', marginTop: 20, alignItems: 'center'}}>
|
|
|
|
// <CustomInput
|
|
// onChangeText={(val) => {
|
|
// setcardnumber(val)
|
|
// setvalid(val.length == 16 ? true : false)
|
|
// }}
|
|
// />
|
|
|
|
// </View>
|
|
|
|
// <View style={{alignItems: 'center', justifyContent: 'flex-end', padding: 20, marginTop: 10}}>
|
|
// <TouchableOpacity onPress={() => {
|
|
// NetInfo.fetch().then(state => {
|
|
// console.log("Connection type", state.type);
|
|
// console.log("Is connected?", state.isConnected);
|
|
// if(state.isConnected){
|
|
// onSubmit()
|
|
// }else{
|
|
// Elements.nointernet2()
|
|
// }
|
|
// })
|
|
// }} disabled={!valid} style={{padding: 20, paddingTop: 15, width: Theme.screen.w - 80, paddingBottom: 15, borderRadius: 10, backgroundColor: valid ? Theme.colors.primary : Theme.colors.primary + "15"}}>
|
|
// <Text style={{fontSize: 16, fontFamily: 'Arial', textAlign: 'center', color: '#fff'}}>Next</Text>
|
|
// </TouchableOpacity>
|
|
// </View>
|
|
|
|
// </View>
|
|
// </View>
|
|
// </Content>
|
|
|
|
// </SafeAreaView>
|
|
// );
|
|
// }
|
|
|
|
const styles = StyleSheet.create({
|
|
input: {
|
|
flex: 1, padding: 0, margin: 5, fontSize: 18, textAlign: 'center', borderBottomColor: Theme.colors.accent, borderBottomWidth: 1.5
|
|
}
|
|
}); |