288 lines
9.7 KiB
JavaScript
288 lines
9.7 KiB
JavaScript
import React, { Component } from 'react'
|
|
import { View, Alert, TouchableOpacity, Platform } from 'react-native'
|
|
import GetWidthHeightDevice from '../../components/GetWidthHeightDevice'
|
|
import { CustomInput } from '../../components/CustomInput'
|
|
import { CustomPicker } from '../../components/CustomPicker'
|
|
import { CustomButton } from '../../components/CustomButton'
|
|
import Text from '../../components/Text';
|
|
import { Picker, Right } from 'native-base'
|
|
import moment from 'moment'
|
|
import CustomDatePicker from './CustomDatePicker';
|
|
import {postReserveRoom} from '../../api/UserApi';
|
|
import {withNavigation} from 'react-navigation';
|
|
import IndicatorLoading from '../../components/IndicatorLoading';
|
|
import { t } from '../../utils/i18n'
|
|
|
|
class PersonRoomReservationScreen extends Component {
|
|
constructor(props) {
|
|
super(props)
|
|
this.state = {
|
|
isLoading:false,
|
|
room_id: this.props.roomDetail.id,
|
|
activeIndex: 0,
|
|
user:{},
|
|
}
|
|
this.sendReserve = this.sendReserve.bind(this)
|
|
}
|
|
|
|
componentDidMount = () => {
|
|
this.setState({
|
|
user: {
|
|
...this.state.user,
|
|
type: 'customer',
|
|
gender: 'ชาย',
|
|
room_type: this.props.roomDetail.type_name,
|
|
project_name: this.props.roomDetail.project.name
|
|
}
|
|
})
|
|
};
|
|
|
|
sendReserve() {
|
|
|
|
var email_validate = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
|
|
if (email_validate.test(this.state.user.email) !== true){
|
|
Alert.alert(null, t('email_format_invalid'))
|
|
return
|
|
}
|
|
|
|
postReserveRoom(this.state.room_id,this.state.user)
|
|
.then(res => {
|
|
console.log('response ---------> ',res.data)
|
|
})
|
|
.then(() => {
|
|
Alert.alert(
|
|
t('booking_success'),null,
|
|
[
|
|
{ text: t('ok'), onPress: () => this.props.navigation.navigate('HomeScreen') },
|
|
]
|
|
)
|
|
})
|
|
}
|
|
|
|
handleDatePickedBirthDay = (date) => {
|
|
console.log("A date birth day has been picked: ", date);
|
|
this.setState({
|
|
user: {
|
|
...this.state.user,
|
|
birth_date: moment(date).format('DD-MM-YYYY')
|
|
}
|
|
})
|
|
};
|
|
|
|
handleDatePickedCheckIn = (date) => {
|
|
console.log("A date check-in has been picked: ", date);
|
|
this.setState({
|
|
user: {
|
|
...this.state.user,
|
|
check_in_date: moment(date).format('DD-MM-YYYY')
|
|
}
|
|
})
|
|
};
|
|
|
|
render() {
|
|
let width_device = GetWidthHeightDevice.WidthDevice
|
|
return (
|
|
<View style={{ flex: 1 }}>
|
|
<View style={{ flex: 1 }}>
|
|
<View style={[styles.form]}>
|
|
<Text style={styles.headerTitle}> {t('profile')} </Text>
|
|
<View style={styles.row}>
|
|
<CustomInput style={styles.custom_input} labelColor={'white'} labelName={t('fullname')} placeholderTextColor={'#FFFFFF40'} placeholder={t('specific_fullname')}
|
|
onEndEditing={e => {
|
|
let input = e.nativeEvent.text
|
|
this.setState({
|
|
user: {
|
|
...this.state.user,
|
|
name: input
|
|
}
|
|
})
|
|
}}/>
|
|
</View>
|
|
<View style={styles.row}>
|
|
<CustomInput style={styles.custom_input} labelColor={'white'} labelName={t('email')} placeholderTextColor={'#FFFFFF40'} placeholder={t('specific_email')}
|
|
onEndEditing={e => {
|
|
let input = e.nativeEvent.text
|
|
this.setState({
|
|
user: {
|
|
...this.state.user,
|
|
email: input
|
|
}
|
|
})
|
|
}}/>
|
|
</View>
|
|
<View style={styles.row}>
|
|
<CustomInput style={styles.custom_input} labelColor={'white'} placeholderTextColor={'#FFFFFF40'} labelName={t('phone2')} placeholder={t('specific_phone')} keyboardType={'phone-pad'} maxLength={10}
|
|
onEndEditing={e => {
|
|
let input = e.nativeEvent.text
|
|
this.setState({
|
|
user: {
|
|
...this.state.user,
|
|
phone: input
|
|
}
|
|
})
|
|
}}/>
|
|
</View>
|
|
<View style={[styles.row]}>
|
|
<View style={{flexDirection:'row',flex:1,width:'100%',backgroundColor:'#FFFFFF40',borderRadius:24,alignItems:'center',paddingHorizontal:10}}>
|
|
<Text style={{color:'white'}}>{t('gender')}</Text>
|
|
<View style={{width:'95%',paddingRight:10}}>
|
|
{
|
|
Platform.OS == 'ios' ?
|
|
<Right>
|
|
<Picker
|
|
mode="dropdown"
|
|
style={{
|
|
flex:1,
|
|
height: 48,
|
|
color:'white'
|
|
}}
|
|
textStyle={{color:'white',fontFamily: 'Prompt-Regular',fontSize:14,textAlign:'right'}}
|
|
itemStyle={{color:'white',fontFamily: 'Prompt-Regular',fontSize:14}}
|
|
itemTextStyle={{color:'black',fontFamily: 'Prompt-Regular',fontSize:14}}
|
|
labelName={t('gender')}
|
|
placeholder={t('male') +"/"+ t('female')}
|
|
selectedValue={this.state.user.gender}
|
|
onValueChange={e => {
|
|
this.setState({
|
|
user: {
|
|
...this.state.user,
|
|
gender: e
|
|
}
|
|
})
|
|
}}>
|
|
<Picker.Item label={t('male')} value="ชาย"/>
|
|
<Picker.Item label={t('female')} value="หญิง"/>
|
|
</Picker>
|
|
</Right>
|
|
: <Picker
|
|
mode="dropdown"
|
|
style={{
|
|
flex:1,
|
|
height: 48,
|
|
color:'white'
|
|
}}
|
|
textStyle={{color:'white',fontFamily: 'Prompt-Regular',fontSize:14,textAlign:'right'}}
|
|
itemStyle={{color:'white',fontFamily: 'Prompt-Regular',fontSize:14}}
|
|
itemTextStyle={{color:'black',fontFamily: 'Prompt-Regular',fontSize:14}}
|
|
labelName={t('gender')}
|
|
placeholder={t('male') +"/"+ t('female')}
|
|
selectedValue={this.state.user.gender}
|
|
onValueChange={e => {
|
|
this.setState({
|
|
user: {
|
|
...this.state.user,
|
|
gender: e
|
|
}
|
|
})
|
|
}}>
|
|
<Picker.Item label={t('male')} value="ชาย"/>
|
|
<Picker.Item label={t('female')} value="หญิง"/>
|
|
</Picker>
|
|
}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<View style={width_device >= 400 ? styles.row : styles.row_minSize}>
|
|
<View style={styles.row_grow}>
|
|
<CustomDatePicker titleText={t('birth_date')} dateText={this.state.user.birth_date} handleDate={this.handleDatePickedBirthDay} maxDate={new Date()}/>
|
|
</View>
|
|
</View>
|
|
<View style={styles.row}>
|
|
<CustomDatePicker titleText={t('expect_checkin')} dateText={this.state.user.check_in_date} handleDate={this.handleDatePickedCheckIn} minDate={new Date()}/>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<View style={{ flexGrow: 0.5, justifyContent: 'flex-end' }}>
|
|
<View style={{ ...styles.buttons }}>
|
|
<CustomButton style={{ backgroundColor: '#145EB3',height: 40, }}
|
|
onPress={() => {
|
|
if(this.state.user.name != null && this.state.user.email != null && this.state.user.phone != null
|
|
&& this.state.user.birth_date != null && this.state.user.check_in_date){
|
|
Alert.alert(
|
|
t('booking_submit'),
|
|
t('booking_confirm'),
|
|
[
|
|
{ text: t('cancel'), style: 'cancel' },
|
|
{ text: t('ok'), onPress: () => this.sendReserve() },
|
|
],
|
|
{ cancelable: false }
|
|
)
|
|
}else{
|
|
Alert.alert(t('error_occurred'), t('required_field'))
|
|
}
|
|
}}
|
|
title={t('book_room')} />
|
|
</View>
|
|
</View>
|
|
<IndicatorLoading loadingVisible={this.state.isLoading}/>
|
|
</View>
|
|
)
|
|
}
|
|
}
|
|
|
|
const styles = {
|
|
container: {
|
|
flex: 1,
|
|
flexDirection: 'column',
|
|
height: GetWidthHeightDevice.HeightDevice,
|
|
},
|
|
row: {
|
|
flexDirection: 'row',
|
|
marginBottom: 7,
|
|
height: 48,
|
|
},
|
|
row_grow_first: {
|
|
flexGrow: 1,
|
|
marginRight: 5,
|
|
width: '9%'
|
|
},
|
|
row_grow_first_minSize: {
|
|
flexGrow: 1,
|
|
marginBottom: 5,
|
|
width: '100%',
|
|
},
|
|
row_grow: {
|
|
flexGrow: 1,
|
|
|
|
},
|
|
form: {
|
|
height: '100%',
|
|
flex: 1,
|
|
padding: 15,
|
|
paddingTop: 5,
|
|
paddingBottom: 0,
|
|
},
|
|
row_minSize: {
|
|
flexDirection: 'column',
|
|
marginBottom: 5,
|
|
},
|
|
box_form_reservation: {
|
|
marginLeft: 15,
|
|
marginRight: 15,
|
|
},
|
|
input_reservation: {
|
|
marginLeft: 15,
|
|
marginRight: 15,
|
|
|
|
},
|
|
contentContainer: {
|
|
paddingVertical: 5
|
|
},
|
|
headerTitle: {
|
|
color: 'white',
|
|
marginVertical: 5
|
|
},
|
|
buttons: {
|
|
paddingHorizontal: 15,
|
|
paddingVertical: 10
|
|
},
|
|
custom_input: {
|
|
backgroundColor: 'rgba(255,255,255,0.3)',
|
|
borderRadius: 30,
|
|
height: 48,
|
|
color: 'white'
|
|
}
|
|
}
|
|
|
|
export default withNavigation(PersonRoomReservationScreen)
|