211 lines
11 KiB
JavaScript
211 lines
11 KiB
JavaScript
import * as React from 'react';
|
|
import { View, Text, TouchableOpacity, ScrollView, SafeAreaView, TextInput, Alert } from 'react-native';
|
|
import { connect } from "react-redux";
|
|
import moment from 'moment';
|
|
import Elements from '../../components/elements.js';
|
|
import NetInfo from "../../components/netstatus";
|
|
import REQUEST from '../../components/api/';
|
|
import Icon from './../../components/icons.js';
|
|
import Theme from '../../components/theme.style.js';
|
|
import DB from '../../components/storage/';
|
|
import CustomSafeArea from '../../components/safeArea.component.js';
|
|
|
|
const CustomInput = (props) => {
|
|
const titlecolor = props.current == props.index && props.focus ? Theme.colors.darkGray : Theme.colors.darkGray
|
|
const bordercolor = props.error ? Theme.colors.primary : (props.focus && props.current == props.index ? Theme.colors.darkGray : 'gray')
|
|
const borderwidth = props.error ? 1.6 : (props.focus && props.current == props.index ? 1.5 : 1)
|
|
|
|
const style = {
|
|
container: {flexDirection: 'row', width: '80%', marginTop: props.top || 30, alignItems: 'center'},
|
|
title: {fontSize: 12, color: titlecolor, marginTop: -25, marginBottom: 15},
|
|
input: {width: '100%', fontSize: 16, padding: 0, borderBottomColor: bordercolor, borderBottomWidth: borderwidth, color: props?.isDarkMode ? props?.textColor : Theme.colors.black },
|
|
error: {fontSize: 12, color: Theme.colors.primary, marginTop: 5, marginBottom: 15}
|
|
}
|
|
|
|
return (
|
|
<View style={style.container}>
|
|
<View style={{flex: 1}}>
|
|
{props.current >= props.index ?
|
|
<Text style={style.title}>
|
|
{props.title}
|
|
</Text> : null}
|
|
<TextInput
|
|
keyboardType={props.keyboardType || null}
|
|
maxLength={props.maxlength || null}
|
|
placeholder={props.placeholder || props.title || null}
|
|
placeholderTextColor={Theme.colors.darkGray}
|
|
value={props.value || null}
|
|
onFocus={props.onFocus || null}
|
|
onChangeText={props.onChangeText || null}
|
|
style={[style.input, props.textInputStyle || null]}
|
|
/>
|
|
{props.error ? <Text style={style.error}>{props.errorMessage}</Text> : null }
|
|
</View>
|
|
</View>)
|
|
}
|
|
|
|
class SecurityQuestion extends React.Component {
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
}
|
|
|
|
state = {
|
|
loading: false,
|
|
email: null,
|
|
birthdate: null,
|
|
openDatepicker: false,
|
|
error: null,
|
|
valid: true,
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.setState({ data: this.props.route.params })
|
|
console.log(this.props.route)
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
|
|
}
|
|
|
|
checkValidAccountInfo = () => {
|
|
return (this.state.email && this.state.birthdate)
|
|
}
|
|
|
|
submitAccountInfo = () => {
|
|
NetInfo.netstatus(async isConnected => {
|
|
if(isConnected) {
|
|
this.setState({ loading: true })
|
|
this.requestUpdateAccountInfo(success => {
|
|
this.setState({ loading: false })
|
|
if(success.status == 1) {
|
|
this.props.navigation.navigate("Setnewmpin", { sessiondata: this.state.data })
|
|
} else {
|
|
Platform.OS == 'ios' ? setTimeout(() => {
|
|
Alert.alert("Account Information.", success.message)
|
|
}, 300) : Alert.alert("Account Information.", success.message)
|
|
}
|
|
}, error => {
|
|
this.setState({ loading: false })
|
|
Platform.OS == 'ios' ? setTimeout(() => {
|
|
Alert.alert("Account Information.", "Failed to submit account information")
|
|
}, 300) : Alert.alert("Account Information.", "Failed to submit account information")
|
|
})
|
|
} else {
|
|
this.setState({ loading: false })
|
|
Elements.nointernet2()
|
|
}
|
|
})
|
|
}
|
|
|
|
requestUpdateAccountInfo = async (successCallback, errorCallback) => {
|
|
const SESSION = await DB.session()
|
|
const params = {
|
|
card_number: this.props.route.params.card_number,
|
|
birthdate: moment(this.state.birthdate).format("YYYY-MM-DD"),
|
|
email_address: this.state.email
|
|
}
|
|
await REQUEST("security_question", "post", {
|
|
Authorization: SESSION.token,
|
|
}, {}, params, function(data){
|
|
console.log(data)
|
|
successCallback(data)
|
|
}, function(error){
|
|
console.log(error)
|
|
errorCallback(error)
|
|
})
|
|
}
|
|
|
|
render() {
|
|
return(
|
|
<CustomSafeArea>
|
|
<View>
|
|
<View style={{flexDirection: 'row', height: this.props.height ? this.props.height : 55, padding: 5, backgroundColor: Theme.colors.primary, top: Platform.OS =='ios' && this.props.top ? this.props.top : 0}}>
|
|
<TouchableOpacity
|
|
style={{ alignSelf: 'center', padding: 15}}
|
|
onPress={() => {
|
|
this.props.navigation.reset({
|
|
index: 0,
|
|
routes: [{name: 'Mpin'}],
|
|
});
|
|
}}>
|
|
<Icon.AntDesign name='arrowleft' size={20} style={{color: "#FFF"}} />
|
|
</TouchableOpacity>
|
|
<View style={{flex:5, justifyContent: 'center', alignItems: 'center'}}>
|
|
<Text style={{textAlign:'center', fontSize: 17, color: '#fff'}}>Account Information</Text>
|
|
</View>
|
|
<TouchableOpacity
|
|
style={{ alignSelf: 'center', padding: 15}}
|
|
onPress={() => {}}>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
<Elements.loaderView
|
|
title="Validating"
|
|
message="Please wait..."
|
|
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} />
|
|
<ScrollView>
|
|
<View style={{ flex: 1, marginTop: 30}}>
|
|
<View style={{ flex: 1, alignItems: 'center' }}>
|
|
<Text style={{ alignSelf: 'flex-start', fontFamily: 'arial', fontSize: 16, width: '80%', alignSelf: 'center', color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black }}>What email address did you use to register to Unioil?</Text>
|
|
<CustomInput
|
|
textInputStyle={{ paddingBottom: 10 }}
|
|
title="Enter Answer"
|
|
value={this.state.email}
|
|
index={3}
|
|
textColor={this.props.app_theme?.theme.colors.text}
|
|
isDarkMode={this.props.app_theme?.theme.dark}
|
|
error={this.state.errors && this.state.errors.email ? this.state.errors.email : false}
|
|
errorMessage={this.state.errors && this.state.errors.email ? this.state.errors.email[0] : ""}
|
|
onChangeText={(val) => {
|
|
this.setState({ email: val, valid: true })
|
|
}}/>
|
|
<Text style={{ alignSelf: 'flex-start', fontFamily: 'arial', fontSize: 16, width: '80%', alignSelf: 'center', color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black, marginTop: 40 }}>When is your Birthday?</Text>
|
|
<View style={{flexDirection: 'row', width: '80%', marginTop: 15, alignItems: 'center'}}>
|
|
<View style={{flex: 1}}>
|
|
<TouchableOpacity onPress={() => {
|
|
this.setState({ openDatepicker: true })
|
|
if(this.state.errors && this.state.errors.birthdate) delete this.state.errors.birthdate
|
|
}} style={{}}>
|
|
{/* <Text style={{fontSize: 14, color: Theme.colors.darkGray}}>Birthday</Text> */}
|
|
<View style={{paddingTop: 15, paddingBottom: 5,borderColor: 'gray',borderBottomWidth: 1}}>
|
|
<Text style={{paddingBottom: 5, fontSize: 17, fontFamily: 'Arial', color: (this.state.birthdate && this.props.app_theme?.theme.dark) ? this.props.app_theme?.theme.colors.text : this.state.birthdate ? Theme.colors.textPrimary : Theme.colors.darkGray}}>{this.state.birthdate || "Enter your Birthday"}</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
{this.state.errors && this.state.errors.birthdate ?
|
|
<Text style={{fontSize: 12, color: Theme.colors.primary, marginTop: 5, marginBottom: 15, width: '90%'}}>
|
|
{this.state.errors?.birthdate[0]}
|
|
</Text> : null}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</ScrollView>
|
|
<Elements.CustomDatePicker
|
|
visible={this.state.openDatepicker}
|
|
date={this.state.birthdate ? new Date(this.state.birthdate) : new Date(Date.now())}
|
|
textColor={this.props.app_theme?.theme.colors.text}
|
|
isDarkMode={this.props.app_theme?.theme.dark}
|
|
modalBackgroundColor={this.props.app_theme?.theme.colors.border}
|
|
onConfirm={(selectedDate) => {
|
|
this.setState({ birthdate: selectedDate ? moment(selectedDate).format("DD MMM YYYY") : this.state.birthdate != null ? this.state.birthdate : null, openDatepicker: false })
|
|
}}
|
|
onCancel={() => this.setState({ openDatepicker: false })}/>
|
|
<TouchableOpacity style={{ marginHorizontal: 30, padding: 20, backgroundColor: this.state.valid && this.checkValidAccountInfo() ? Theme.colors.primary : this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.primary + "15", alignItems: 'center', justifyContent: 'flex-end', borderRadius: 10, marginBottom: 10, elevation: this.state.valid ? 3 : 0 }} onPress={() => this.submitAccountInfo()}>
|
|
<Text style={{ fontFamily: 'arial', fontSize: 18, color: Theme.colors.white }}>Submit</Text>
|
|
</TouchableOpacity>
|
|
</CustomSafeArea>
|
|
)
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
app_theme: state.appThemeReducer.theme
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps, null)(SecurityQuestion) |