395 lines
16 KiB
JavaScript
395 lines
16 KiB
JavaScript
import * as React from 'react';
|
|
import {
|
|
ScrollView,
|
|
TouchableOpacity,
|
|
View,
|
|
Text,
|
|
TextInput,
|
|
Alert,
|
|
Platform
|
|
} from 'react-native';
|
|
import { Container } from 'native-base';
|
|
import { connect } from "react-redux";
|
|
import CustomHeader from '../../../components/header.js';
|
|
import Elements from '../../../components/elements.js';
|
|
import Theme from '../../../components/theme.style.js';
|
|
import Icon from '../../../components/icons.js';
|
|
import moment from 'moment';
|
|
import DB from '../../../components/storage/';
|
|
import REQUEST from '../../../components/api/';
|
|
import MobileValidation from '../../../components/api/mobile.js';
|
|
import CustomSafeArea from '../../../components/safeArea.component.js';
|
|
|
|
const CustomInput = (props) => {
|
|
|
|
const titlecolor = props.current == props.index && props.focus ? Theme.colors.accent : Theme.colors.darkGray
|
|
const bordercolor = props.error ? Theme.colors.primary : (props.focus && props.current == props.index ? Theme.colors.accent : '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={props.isDarkMode ? Theme.colors.darkGray : Theme.colors.gray}
|
|
value={props.value || null}
|
|
onFocus={props.onFocus || null}
|
|
onChangeText={props.onChangeText || null}
|
|
style={style.input}
|
|
/>
|
|
{props.error ? <Text style={style.error}>{props.errorMessage}</Text> : null }
|
|
</View>
|
|
</View>)
|
|
}
|
|
|
|
class ApplyForm extends React.Component {
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
this.cardnumber = ""
|
|
}
|
|
|
|
state = {
|
|
loading: false,
|
|
card: null,
|
|
datepicker: false,
|
|
focus: false,
|
|
activeInput: null,
|
|
agree: false,
|
|
errors: null,
|
|
processed: false,
|
|
fname: null,
|
|
lname: null,
|
|
email: null,
|
|
birthdate: "",
|
|
number: null,
|
|
valid: false,
|
|
validEmail: true,
|
|
validPhone: true
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.setState({ card: this.props.route?.params })
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
|
|
}
|
|
|
|
setCardNumber = () => {
|
|
this.setState({ valid: this.cardnumber == 15 ? true : false })
|
|
}
|
|
|
|
onAgree = () => {
|
|
this.setState({ agree: this.state.agree == false ? true : false, valid: !this.state.agree })
|
|
}
|
|
|
|
validateEmail = () => {
|
|
return this.state.email.includes("@")
|
|
}
|
|
|
|
validateNumber = () => {
|
|
return this.state.number != null ? this.state.number.length > 11 : false
|
|
}
|
|
|
|
validatemobile = async () => {
|
|
let num = this.state.number.substr(1, this.state.number.length-1)
|
|
let validation = await MobileValidation(num)
|
|
console.log("MOBILE VALIDATION", validation)
|
|
if(!this.state.processed && validation.status == 0) {
|
|
Platform.OS == 'ios' ? setTimeout(() => {
|
|
Alert.alert("Error", validation.message)
|
|
}, 300) : Alert.alert("Error", validation.message)
|
|
this.setState({ errors: {mobile: [validation.message]} })
|
|
} else {
|
|
this.setState({ loading: true })
|
|
this.activateCard(success => {
|
|
this.processActivateCard(success)
|
|
}, error => {
|
|
this.setState({ loading: false })
|
|
})
|
|
}
|
|
}
|
|
|
|
activateCard = async (successCallback, errorCallback) => {
|
|
this.setState({ loading: true })
|
|
let uuid = await DB.get("deviceUUID")
|
|
let body = {
|
|
birthdate: Theme.formatter.DT4API(this.state.birthdate || ""),
|
|
cardtype_uuid: this.state.card.card_uuid,
|
|
deviceUUID: uuid,
|
|
email: this.state.email,
|
|
firstname: this.state.fname,
|
|
pin: this.state.card.pin,
|
|
card_number: this.state.card.card_number,
|
|
lastname: this.state.lname,
|
|
mobile: Theme.formatter.PMBL(this.state.number.substr(1, this.state.number.length-1) || "")
|
|
}
|
|
await REQUEST("activateCard", "post", {}, {}, body, async (res) => {
|
|
successCallback(res)
|
|
}, function(error){
|
|
errorCallback(error)
|
|
})
|
|
|
|
}
|
|
|
|
onSubmit = () => {
|
|
if(this.state.valid){
|
|
this.validatemobile()
|
|
}
|
|
}
|
|
|
|
processActivateCard = (success) => {
|
|
if(success.status == 1){
|
|
this.setState({ errors: null, processed: true, loading: false })
|
|
success.data.mobile_number = this.state.number.substr(1, this.state.number.length-1)
|
|
success.data.target = "enroll"
|
|
// success.data.callback = async (token) => {
|
|
// this.setState({ loading: true })
|
|
// const { callback } = this.props.route.params
|
|
// await DB.settoken(token, async () => {
|
|
// this.fetchProfile(success => {
|
|
// if(success.status == 1){
|
|
// DB.addaccount(success, function(){
|
|
// if(callback) callback("success")
|
|
// this.props.navigation.navigate("Account")
|
|
// }, function(error){
|
|
// console.log("Error saving profile", error)
|
|
// })
|
|
// }
|
|
// this.setState({ loading: false })
|
|
// }, error => {
|
|
// this.setState({ loading: false })
|
|
// console.log(error)
|
|
// })
|
|
// }, function(e){
|
|
// console.log("DEVICE INFO SAVING FAILED!", e)
|
|
// })
|
|
// }
|
|
// success.data.catcher = (res) => {
|
|
// if(res.status == 0){
|
|
// setTimeout(() => {
|
|
// this.setState({ mobile: [res.message] })
|
|
// console.log(res)
|
|
// }, 300)
|
|
// }
|
|
// }
|
|
this.setState({ loading: true })
|
|
console.log(this.props)
|
|
this.requestOTP(success.data.lcard_uuid, success.data.mobile_number, onSuccess => {
|
|
this.setState({ loading: false })
|
|
success.data.sessiondata = {
|
|
data: this.state.card,
|
|
callback: this.props.route.params?.callback,
|
|
type: this.props.route.params?.type
|
|
}
|
|
this.props.navigation.navigate("AccountEnrollOtp", success.data)
|
|
}, onError => {
|
|
this.setState({ loading: false })
|
|
})
|
|
} else if(success.status == 0 && Object.keys(success.data).length == 0) {
|
|
Platform.OS == 'ios' ? setTimeout(() => {
|
|
Alert.alert("Error", success.message)
|
|
}, 300) : Alert.alert("Error", success.message)
|
|
this.setState({ errors: null, loading: false })
|
|
} else {
|
|
this.setState({ errors: success.data, loading: false })
|
|
}
|
|
}
|
|
|
|
requestOTP = async (lcard_uuid, mobile_number, successCallback, errorCallback) => {
|
|
let params = `lcard_uuid=${lcard_uuid}&mobile=${Theme.formatter.PMBL(mobile_number)}&is_resend=false`;
|
|
await REQUEST("requestOTP", "get", {}, params, {},
|
|
function(res){
|
|
successCallback(res)
|
|
}, function(error){
|
|
errorCallback(error)
|
|
}
|
|
)
|
|
}
|
|
|
|
onChangeTextValueFirstname = (text) => {
|
|
if (/^[a-zA-Z ]+$/.test(text) || text === "") {
|
|
this.setState({ fname: text })
|
|
}
|
|
}
|
|
|
|
onChangeTextValueLastname = (text) => {
|
|
if (/^[a-zA-Z ]+$/.test(text) || text === "") {
|
|
this.setState({ lname: text })
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<CustomSafeArea>
|
|
<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} />
|
|
<Elements.CustomDatePicker
|
|
visible={this.state.datepicker}
|
|
textColor={this.props.app_theme?.theme.colors.text}
|
|
isDarkMode={this.props.app_theme?.theme.dark}
|
|
modalBackgroundColor={this.props.app_theme?.theme.colors.border}
|
|
date={this.state.birthdate ? new Date(this.state.birthdate) : new Date(Date.now())}
|
|
onConfirm={(selectedDate) => {
|
|
this.setState({ birthdate: selectedDate ? moment(selectedDate).format("DD MMM YYYY") : birthdate != null ? birthdate : null, datepicker: false, agree: false, valid: false })
|
|
}}
|
|
onCancel={() => this.setState({ datepicker: false })}
|
|
/>
|
|
<CustomHeader title="" menu={false} back={true} onBackPress={() => this.props.navigation.goBack()} navigation={this.props.navigation} />
|
|
<ScrollView>
|
|
<Container style={{flex: 1}}>
|
|
<View style={{flex: 1}}>
|
|
<View style={{flex: 1, alignItems: 'center'}}>
|
|
<Text style={{alignSelf: 'center', fontFamily: 'Arial', fontWeight: 'bold', fontSize: 25, padding: 15, marginTop: 25, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>Enter Your Details</Text>
|
|
<Text style={{alignSelf: 'center', textAlign: 'center', width: '90%', marginTop: 0, padding: 15, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, fontFamily: 'Arial', fontSize: 16}}>
|
|
Fill out the remaining forms and you're good to go!
|
|
</Text>
|
|
|
|
<CustomInput
|
|
title="First Name"
|
|
value={this.state.fname}
|
|
index={1}
|
|
current={this.state.activeInput}
|
|
keyboardType={'ascii-capable'}
|
|
focus={this.state.focus}
|
|
textColor={this.props.app_theme?.theme.colors.text}
|
|
isDarkMode={this.props.app_theme?.theme.dark}
|
|
error={this.state.errors && this.state.errors.firstname ? this.state.errors.firstname : false}
|
|
errorMessage={this.state.errors && this.state.errors.firstname ? this.state.errors.firstname[0] : ""}
|
|
onFocus={() => {
|
|
this.setState({ activeInput: 1, focus: true })
|
|
}}
|
|
onChangeText={this.onChangeTextValueFirstname}
|
|
/>
|
|
<CustomInput
|
|
top={50}
|
|
title="Last Name"
|
|
value={this.state.lname}
|
|
index={2}
|
|
current={this.state.activeInput}
|
|
keyboardType={'ascii-capable'}
|
|
focus={this.state.focus}
|
|
textColor={this.props.app_theme?.theme.colors.text}
|
|
isDarkMode={this.props.app_theme?.theme.dark}
|
|
error={this.state.errors && this.state.errors.lastname ? this.state.errors.lastname : false}
|
|
errorMessage={this.state.errors && this.state.errors.lastname ? this.state.errors.lastname[0] : ""}
|
|
onFocus={() => {
|
|
this.setState({ activeInput: 2, focus: true })
|
|
}}
|
|
onChangeText={this.onChangeTextValueLastname}
|
|
/>
|
|
<CustomInput
|
|
top={50}
|
|
title="Email Address"
|
|
value={this.state.email}
|
|
index={3}
|
|
current={this.state.activeInput}
|
|
focus={this.state.focus}
|
|
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] : ""}
|
|
onFocus={() => {
|
|
this.setState({ activeInput: 3, focus: true })
|
|
}}
|
|
onChangeText={(val) => {
|
|
this.setState({ email: val })
|
|
}}
|
|
/>
|
|
|
|
<View style={{flexDirection: 'row', width: '80%', marginTop: 35, alignItems: 'center'}}>
|
|
<View style={{flex: 1}}>
|
|
{this.state.activeInput >= 4 ? <Text style={{fontSize: 12, color: this.state.activeInput == 4 && this.state.focus ? Theme.colors.accent : Theme.colors.darkGray, marginTop: -25, marginBottom: 15}}>Birthday</Text> : null}
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
this.setState({ datepicker: true, activeInput: 4 })
|
|
}}
|
|
style={{}}>
|
|
<View style={{paddingTop: 15, paddingBottom: 5,borderColor: this.state.errors && this.state.errors.birthdate ? Theme.colors.primary : 'gray', borderBottomWidth: this.state.errors && this.state.errors.birthdate ? 1.5 : 1}}>
|
|
<Text style={{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 || "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>
|
|
|
|
<CustomInput
|
|
top={50}
|
|
index={5}
|
|
current={this.state.activeInput}
|
|
focus={this.state.focus}
|
|
title="Mobile Number"
|
|
textColor={this.props.app_theme?.theme.colors.text}
|
|
isDarkMode={this.props.app_theme?.theme.dark}
|
|
value={this.state.number && this.state.number.length <= 2 ? '+63' : this.state.number}
|
|
keyboardType="numeric"
|
|
maxlength={13}
|
|
error={this.state.errors && this.state.errors.mobile ? this.state.errors.mobile : false}
|
|
errorMessage={this.state.errors && this.state.errors.mobile ? this.state.errors.mobile[0] : ""}
|
|
onFocus={() => {
|
|
this.setState({ activeInput: 5, focus: true, errors: null })
|
|
if(this.state.number == null) this.setState({ number: "+63" })
|
|
}}
|
|
onChangeText={(val) => {
|
|
this.setState({ number: val })
|
|
}}
|
|
/>
|
|
|
|
<View style={{flexDirection: 'row', width: '80%', marginTop: 15, alignItems: 'center'}}>
|
|
<TouchableOpacity onPress={() => this.state.fname && this.state.lname && this.state.email && this.state.birthdate && this.state.number ? this.onAgree() : null} style={{flex: 0, paddingTop: 15}}>
|
|
{!this.state.agree ? <Icon.Feather color={this.props.app_theme?.theme.colors.text} name="square" size={20} /> : <Icon.AntDesign name="checksquare" color={Theme.colors.accent} size={20} />}
|
|
</TouchableOpacity>
|
|
<View style={{flex: 1, paddingTop: 10, paddingHorizontal: 10}}>
|
|
<View style={{flexDirection: 'row', paddingTop: 5, alignItems: 'center'}}>
|
|
<Text style={{ color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>I agree to </Text>
|
|
<TouchableOpacity style={{ paddingVertical: 10 }} onPress={() => this.props.navigation.navigate("TermsConditions", {screen: 'back'})}>
|
|
<Text style={{color: Theme.colors.primary}}>Unioil's Data Privacy Policy.</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={{alignItems: 'center', justifyContent: 'flex-end', padding: 20, marginTop: 20}}>
|
|
<TouchableOpacity onPress={() => this.onSubmit()} disabled={!this.state.valid} style={{padding: 20, paddingTop: 15, width: Theme.screen.w - 60, 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'}}>Submit</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</Container>
|
|
</ScrollView>
|
|
</CustomSafeArea>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
app_theme: state.appThemeReducer.theme
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps, null)(ApplyForm);
|