218 lines
8.1 KiB
JavaScript
218 lines
8.1 KiB
JavaScript
import * as React from 'react';
|
|
import { connect } from "react-redux";
|
|
import {
|
|
TouchableOpacity,
|
|
TextInput,
|
|
View,
|
|
Text,
|
|
Image,
|
|
Alert,
|
|
Platform,
|
|
Keyboard
|
|
} from 'react-native';
|
|
import {
|
|
FormControl,
|
|
Input,
|
|
KeyboardAvoidingView,
|
|
ScrollView,
|
|
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';
|
|
import Icons from '../../../components/icons.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 || {}
|
|
|
|
this.keyboardOpenListener = null;
|
|
this.keyboardCloseListener = null;
|
|
}
|
|
|
|
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) {
|
|
this.setState({ info: res.data })
|
|
} else {
|
|
}
|
|
}, function(err){
|
|
Alert.alert("Information", `\n${err.message}`);
|
|
}, "Get Card Prompt", "Fetch"
|
|
)
|
|
}
|
|
|
|
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("Information", '\n' + res.message)
|
|
else if(res.status == 1) this.proceed(1)
|
|
}, (err) => {
|
|
Alert.alert("Information", `\n${err.message}`);
|
|
}, "Number", "Submit")
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
handleShowForm = () => {
|
|
// (['PUVCARD','PRIVATEB'].includes(this.card.code)) ? 0 :
|
|
return this.card.id_number && this.card.id_number == 1 ? 1 : 0 // returns 0 - 1 if ID NUMBER IS REQUIRED
|
|
}
|
|
|
|
showContent = () => {
|
|
return (
|
|
<ScrollView contentContainerStyle={Platform.OS === "android" ? {flex: 1} : {height: Theme.screen.h * .84}}>
|
|
<View style={{flex: 1, justifyContent: 'flex-start', alignItems: 'flex-start', padding: 20}}>
|
|
<Image source={{uri: this.card.image}} style={{height: 215, width: '100%', borderRadius: 10}} />
|
|
<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 adjustsFontSizeToFit={true} numberOfLines={3} style={{fontSize: 13.5, flex: 1, 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={{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: 15}}>Enter ID Number</Text>
|
|
</View>
|
|
<View style={{alignSelf: 'center', alignItems: 'center', flexDirection: 'row', marginBottom: 10}}>
|
|
<Text>{this.card.id_number_description}</Text>
|
|
{/* <TouchableOpacity onPress={() => Alert.alert("Information", `\n${this.state.info.value}`)}>
|
|
<View style={{backgroundColor: Theme.colors.gray, borderRadius: 8, alignItems: 'center', justifyContent: 'center', height: 15, width: 15, marginLeft: 5}}>
|
|
<Icons.AntDesign name="info" size={10} color={Theme.colors.white} />
|
|
</View>
|
|
</TouchableOpacity> */}
|
|
</View>
|
|
</View>
|
|
|
|
<FormControl style={{width: '100%', opacity: this.handleShowForm()}}>
|
|
<Stack>
|
|
<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>
|
|
<View style={{justifyContent: 'flex-end'}}>
|
|
{
|
|
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>
|
|
</ScrollView>
|
|
)
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<CustomSafeArea>
|
|
<CustomHeader title="" menu={false} back={true} backscreen="ApplySelectCard" navigation={this.props.navigation} />
|
|
{ Theme.platform === "android" ?
|
|
this.showContent()
|
|
:
|
|
<KeyboardAvoidingView
|
|
style={{flex: 1}}
|
|
behavior='padding'
|
|
keyboardVerticalOffset={Platform.OS === 'ios' ? 50 : 70}
|
|
>
|
|
{this.showContent()}
|
|
</KeyboardAvoidingView>}
|
|
</CustomSafeArea>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
app_theme: state.appThemeReducer.theme
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps, null)(ApplyCardDetails);
|