197 lines
7.7 KiB
JavaScript
197 lines
7.7 KiB
JavaScript
import * as React from 'react';
|
|
import { connect } from "react-redux";
|
|
import {
|
|
TouchableOpacity,
|
|
TextInput,
|
|
View,
|
|
Text,
|
|
Image,
|
|
Alert
|
|
} from 'react-native';
|
|
import {
|
|
FormControl,
|
|
Input,
|
|
Stack
|
|
} from 'native-base';
|
|
import CustomHeader from '../../../components/header.js';
|
|
import Theme from '../../../components/theme.style.js';
|
|
import Icon from '../../../components/icons.js';
|
|
import REQUEST from '../../../components/api/';
|
|
import CustomSafeArea from '../../../components/safeArea.component.js';
|
|
|
|
const CustomInput = (props) => {
|
|
|
|
const titlecolor = props.focused ? Theme.colors.accent : Theme.colors.darkGray
|
|
const bordercolor = props.error ? Theme.colors.primary : (props.focused ? Theme.colors.accent : 'gray')
|
|
const borderwidth = props.error ? 1.6 : (props.focused ? 1.5 : 1)
|
|
|
|
const style = {
|
|
container: {flexDirection: 'row', width: '90%', marginLeft: '5%', marginTop: props.top || 30, alignItems: 'center', opacity: props.shown ? 1 : 0},
|
|
title: {fontSize: 12, color: titlecolor, marginTop: -25, marginBottom: 15},
|
|
input: {width: '100%', fontSize: 16, padding: 0, borderBottomColor: bordercolor, borderBottomWidth: borderwidth},
|
|
error: {fontSize: 12, color: Theme.colors.primary, marginTop: 5, marginBottom: 15}
|
|
}
|
|
|
|
return (
|
|
<View style={style.container}>
|
|
<View style={{flex: 1}}>
|
|
{props.focused ?
|
|
<Text style={style.title}>
|
|
{props.title}
|
|
</Text> : null}
|
|
<TextInput
|
|
keyboardType={props.keyboardType || null}
|
|
maxLength={props.maxlength || null}
|
|
placeholder={props.placeholder || props.title || null}
|
|
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 ApplyCardDetails extends React.Component {
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
this.card = props.route.params || {}
|
|
}
|
|
|
|
state = {
|
|
info: null,
|
|
focus: false,
|
|
cardid: null,
|
|
canProceed: false,
|
|
valid: false
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.init()
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
|
|
}
|
|
|
|
init = async () => {
|
|
if(this.card.id_number == 0 || this.handleShowForm() == 0){
|
|
this.setState({ canProceed: true, valid: true })
|
|
}
|
|
await REQUEST("get_card_prompt_info", "get", {}, {}, {},
|
|
async (res) => {
|
|
if(res.status == 1) {
|
|
console.log("the data: " + JSON.stringify(res.data))
|
|
this.setState({ info: res.data })
|
|
} else {
|
|
console.log(res.message, res.data)
|
|
}
|
|
}, function(error){
|
|
console.log(error)
|
|
})
|
|
}
|
|
|
|
proceed = (method) => {
|
|
this.props.navigation.navigate("ApplyForm", {
|
|
method: method,
|
|
card_uuid: this.card.cardtype_uuid,
|
|
id_number: this.state.cardid ? this.state.cardid : ""
|
|
})
|
|
}
|
|
|
|
onNext = () => {
|
|
if(this.state.valid){
|
|
if(this.card.id_number == 0 || this.handleShowForm() == 0){
|
|
this.proceed(0)
|
|
}else{
|
|
REQUEST("signup_id_number", "post", {}, {}, {
|
|
cardtype_uuid: this.card.cardtype_uuid,
|
|
id_number: this.state.cardid
|
|
}, (res) => {
|
|
if(res.status == 0) Alert.alert("Error", res.message)
|
|
else if(res.status == 1) this.proceed(1)
|
|
}, (error) => {
|
|
console.log(error)
|
|
})
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
handleShowForm = () => {
|
|
return this.card.id_number && this.card.id_number == 1 ? this.card.code == 'PUVCARD' ? 0 : 1 : 0 // returns 0 - 1 if ID NUMBER IS REQUIRED
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<CustomSafeArea>
|
|
<CustomHeader title="" menu={false} back={true} backscreen="ApplySelectCard" navigation={this.props.navigation} />
|
|
<View style={{flex: 1}}>
|
|
<View style={{flex: 1, justifyContent: 'flex-start', alignItems: 'flex-start', padding: 20}}>
|
|
<View style={{padding: 10, width: '100%'}}>
|
|
<Image source={{uri: this.card.image}} style={{width: '100%', height: Theme.screen.h * .32, borderRadius: 10}} />
|
|
</View>
|
|
<Text style={{padding: 15, paddingTop: 5, paddingLeft: 0, fontSize: 16, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black, fontWeight: 'bold'}}>
|
|
{this.card.name}
|
|
</Text>
|
|
<Text style={{fontSize: 13.5, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, width: '100%'}}>
|
|
{this.card.description}
|
|
</Text>
|
|
|
|
<View style={{flex: 1, width: '100%'}}>
|
|
<View style={{width: '100%', opacity: this.handleShowForm()}}>
|
|
<View style={{alignItems: 'center', alignSelf: 'center', marginTop: 20}}>
|
|
<Text style={{fontSize: 20, fontWeight: 'bold', textAlign: 'center', padding: 10, color: 'black', paddingBottom: 20}}>Enter ID Number</Text>
|
|
{/* <View style={{flexDirection: 'row'}}>
|
|
<Text style={{padding: 10, fontSize: 16, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>
|
|
{this.card.id_number_description ? this.card.id_number_description : ""}
|
|
</Text>
|
|
<TouchableOpacity onPress={() => Alert.alert("Information", this.state.info ? this.state.info.value : "")} style={{padding: 10, paddingLeft: 0}}>
|
|
<Icon.Foundation name="info" color={Theme.colors.gray} size={20} />
|
|
</TouchableOpacity>
|
|
</View> */}
|
|
</View>
|
|
</View>
|
|
|
|
<FormControl style={{width: '100%', opacity: this.handleShowForm()}}>
|
|
<Stack>
|
|
<FormControl.Label style={{ color: this.props.app_theme?.theme.colors.text }}>ID Number</FormControl.Label>
|
|
<Input
|
|
style={{ color: this.props.app_theme?.theme.colors.text }}
|
|
placeholder="ID Number"
|
|
value={this.state.cardid || ""}
|
|
onChangeText={(value) => {
|
|
this.setState({ cardid: value })
|
|
if(value != "") this.setState({ valid: true })
|
|
else this.setState({ valid: false })
|
|
}}
|
|
/>
|
|
</Stack>
|
|
</FormControl>
|
|
{
|
|
this.state.canProceed ?
|
|
<TouchableOpacity onPress={() => this.onNext()} style={{backgroundColor: !this.handleShowForm() ? Theme.colors.primary : this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.primary, padding: 15, marginTop: 20, width: '100%', borderRadius: 10, elevation: 3}}>
|
|
<Text style={{textAlign: 'center', color: "#fff", fontSize: 16}}>Next</Text>
|
|
</TouchableOpacity> :
|
|
<TouchableOpacity disabled={!this.state.valid} onPress={() => this.onNext()} 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, marginTop: 20, width: '100%', borderRadius: 10, elevation: this.state.valid ? 3 : 0}}>
|
|
<Text style={{textAlign: 'center', color: "#fff", fontSize: 16}}>Next</Text>
|
|
</TouchableOpacity>
|
|
}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</CustomSafeArea>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
app_theme: state.appThemeReducer.theme
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps, null)(ApplyCardDetails);
|