229 lines
9.4 KiB
JavaScript
229 lines
9.4 KiB
JavaScript
import * as React from 'react';
|
|
import {
|
|
StyleSheet,
|
|
TouchableOpacity,
|
|
View,
|
|
Text,
|
|
Image,
|
|
Alert,
|
|
Keyboard,
|
|
ImageBackground
|
|
} from 'react-native';
|
|
import { ContactOptions } from '../../components/contact.action';
|
|
import { connect } from "react-redux";
|
|
import DeviceInfo from "react-native-device-info";
|
|
import NetInfo from "../../components/netstatus";
|
|
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 REQUEST from '../../components/api/';
|
|
import DB from '../../components/storage/';
|
|
import CustomInput from '../../components/custominput';
|
|
import CustomSafeArea from '../../components/safeArea.component';
|
|
import { StatusBar } from 'native-base';
|
|
|
|
class AddAccountCard extends React.PureComponent {
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
}
|
|
|
|
state = {
|
|
loading: false,
|
|
focus: false,
|
|
activeInput: null,
|
|
cardnumber: "",
|
|
deviceUUID: "",
|
|
valid: false,
|
|
mobilenumber: "",
|
|
agree: false
|
|
}
|
|
|
|
componentDidMount() {
|
|
if(this.props.route.params?.reset){
|
|
this.reset()
|
|
}
|
|
this.init()
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
|
|
}
|
|
|
|
init = async () => {
|
|
await DB.reset()
|
|
this.setState({ deviceUUID: await DB.get("deviceUUID") })
|
|
}
|
|
|
|
reset = () => {
|
|
this.setState({
|
|
loading: false,
|
|
focus: false,
|
|
activeInput: null,
|
|
cardnumber: "",
|
|
deviceUUID: "",
|
|
valid: false,
|
|
mobilenumber: "",
|
|
agree: false
|
|
})
|
|
}
|
|
|
|
onErrorWarning = (success) => {
|
|
console.log(success)
|
|
if(Platform.OS == 'ios'){
|
|
setTimeout(() => {
|
|
Alert.alert("Error", '\n' + success.message)
|
|
}, 700)
|
|
}else{
|
|
Alert.alert("Error", success.message)
|
|
}
|
|
}
|
|
|
|
onSubmit = () => {
|
|
Keyboard.dismiss();
|
|
NetInfo.netstatus(isConnected => {
|
|
if(isConnected) {
|
|
this.setState({ loading: true })
|
|
this.validateMobileNumber(success => {
|
|
console.log(success)
|
|
if(success.data.is_valid == 1 && success.status == 1){
|
|
this.setState({ loading: false })
|
|
this.props.navigation.navigate("LoginSendOTP", {
|
|
lcard_uuid: success.data.user_id,
|
|
mobile_number: Theme.formatter.MBNF(this.state.mobilenumber, 63),
|
|
card_number: success.data.card_number
|
|
})
|
|
} else {
|
|
this.setState({ loading: false })
|
|
this.onErrorWarning(success)
|
|
}
|
|
}, error => {
|
|
this.setState({ loading: false })
|
|
console.log(error)
|
|
})
|
|
} else {
|
|
this.setState({ loading: false })
|
|
Elements.nointernet2()
|
|
}
|
|
})
|
|
}
|
|
|
|
onAgree = () => {
|
|
this.setState({ agree: this.state.agree == false ? true : false })
|
|
}
|
|
|
|
validateMobileNumber = async (successCallback, errorCallback) => {
|
|
let phoneNumber = Theme.formatter.MBNF(this.state.mobilenumber, "")
|
|
if(phoneNumber == null) {
|
|
setTimeout(() => {
|
|
Alert.alert("Error", '\n' + "Invalid mobile number")
|
|
}, 700)
|
|
this.setState({ loading: false })
|
|
return
|
|
}
|
|
|
|
await REQUEST("login_mobile", "post", {}, {}, {
|
|
deviceUUID: this.state.deviceUUID,
|
|
mobile_number: phoneNumber
|
|
}, function(data){
|
|
successCallback(data)
|
|
}, function(error){
|
|
errorCallback(error)
|
|
})
|
|
}
|
|
|
|
render() {
|
|
let version = `v${DeviceInfo.getReadableVersion()}`
|
|
return (
|
|
<CustomSafeArea customStatusBar={true}>
|
|
<ImageBackground
|
|
source={Assets.bg.login_bg}
|
|
style={{ flex: 1 }}>
|
|
<View style={{flex: 1}}>
|
|
<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} />
|
|
<View style={{flex: 1}}>
|
|
<View style={{width: '100%', height: 90, alignSelf: 'center', marginTop: 50 }}>
|
|
<Image source={Assets.logo.unioil} style={{width: '100%', height: '83%', resizeMode: 'contain'}} />
|
|
</View>
|
|
<View style={{flex: 1, alignItems: 'center'}}>
|
|
<Text style={{alignSelf: 'center', fontFamily: 'Arial', fontSize: 25, paddingLeft: 15, paddingRight: 15, paddingBottom: 15, color: Theme.colors.white, fontStyle: 'italic' }}>Make Life Rewarding</Text>
|
|
<Text style={{alignSelf: 'center', marginTop: 5, color: Theme.colors.white, fontFamily: 'Arial', fontSize: 16}}>
|
|
Enter your mobile number.
|
|
</Text>
|
|
<View>
|
|
<CustomInput
|
|
isMobileNumber={true}
|
|
textColor={Theme.colors.white}
|
|
onChangeText={(val) => {
|
|
let value = val.includes(".") ? val.replace(".", "") : val
|
|
this.setState({ mobilenumber: value, valid: value.length == 13 ? true : false, agree: false })
|
|
}}
|
|
/>
|
|
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
|
|
<TouchableOpacity onPress={() => this.state.valid ? this.onAgree() : null} style={{flex: 0, padding: 8}}>
|
|
{!this.state.agree || !this.state.valid ? <Icon.Feather name="square" size={20} /> : <Icon.AntDesign name="checksquare" color={Theme.colors.primary} size={20} />}
|
|
</TouchableOpacity>
|
|
<View style={{flexDirection: 'row', padding: 8}}>
|
|
<Text style={{ color: Theme.colors.white }}>I agree to Unioil's </Text>
|
|
<TouchableOpacity onPress={() => this.props.navigation.navigate("TermsConditions")}>
|
|
<Text style={{color: Theme.colors.white, textDecorationLine: 'underline'}}>Data Privacy Policy.</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={{alignItems: 'center', justifyContent: 'flex-end', padding: 20, marginTop: 10}}>
|
|
<TouchableOpacity onPress={() => this.onSubmit()} disabled={(!this.state.agree || !this.state.valid)} style={{padding: 20, paddingTop: 15, width: Theme.screen.w * .73, paddingBottom: 15, borderRadius: 10, backgroundColor: (this.state.agree && this.state.valid) ? Theme.colors.primary : Theme.colors.darkGray + "40"}}>
|
|
<Text style={{fontSize: 16, fontFamily: 'Arial', textAlign: 'center', color: '#fff'}}>Log In</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<View style={{alignItems: 'center'}}>
|
|
<Text style={{fontSize: 16, fontFamily: 'Arial', color: Theme.colors.textPrimary, color: '#fff'}}>or</Text>
|
|
</View>
|
|
|
|
<View style={{alignItems: 'center', justifyContent: 'flex-end', padding: 15, marginTop: 5}}>
|
|
<TouchableOpacity onPress={() => this.props.navigation.navigate("EnrollActivate", {screen: "Login"}) } style={{padding: 15, paddingTop: 12, width: Theme.screen.w * .65, paddingBottom: 12, borderRadius: 10, borderWidth: 2, borderColor: Theme.colors.white}}>
|
|
<Text style={{fontSize: 16, fontFamily: 'Arial', textAlign: 'center', color: Theme.colors.white}}>Activate your Card</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
<View style={{alignItems: 'center', justifyContent: 'flex-end', padding: 15, paddingTop: 0}}>
|
|
<TouchableOpacity onPress={() => this.props.navigation.navigate("ApplySelectCard") } style={{padding: 15, paddingTop: 12, width: Theme.screen.w * .65, paddingBottom: 12, borderRadius: 10, borderWidth: 2, borderColor: Theme.colors.white}}>
|
|
<Text style={{fontSize: 16, fontFamily: 'Arial', textAlign: 'center', color: Theme.colors.white}}>Apply for a Card</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
<TouchableOpacity onPress={() => this.props.navigation.navigate("TermsConditions") } style={{paddingHorizontal: 15, width: Theme.screen.w - 80, paddingBottom: 12}}>
|
|
<Text style={{fontSize: 16, fontFamily: 'Arial', textAlign: 'center', color: Theme.colors.white}}>Enter as Guest</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<View style={{flexDirection: 'row'}}>
|
|
<TouchableOpacity onPress={() => {ContactOptions()}} style={{padding: 15, alignItems: 'flex-start', flex: 1}}>
|
|
<Text style={{fontSize: 18, fontFamily: 'Arial', textAlign: 'left', color: Theme.colors.white}}>Contact Us</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity onPress={() => {}} style={{padding: 15, justifyContent: 'flex-end', flex: 1}}>
|
|
<Text style={{fontSize: 18, fontFamily: 'Arial', textAlign: 'right', color: Theme.colors.white}}>{version}</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</ImageBackground>
|
|
</CustomSafeArea>
|
|
)
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
app_theme: state.appThemeReducer.theme
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps, null)(AddAccountCard);
|