327 lines
11 KiB
JavaScript
327 lines
11 KiB
JavaScript
import React, { Component } from 'react'
|
|
import { ScrollView, TouchableOpacity, View, Alert } from 'react-native'
|
|
import Image from 'react-native-fast-image'
|
|
import { CustomStepIndicator } from '../../components/StepIndicator'
|
|
import GetWidthHeightDevice from '../../components/GetWidthHeightDevice'
|
|
import { CustomButton } from '../../components/CustomButton'
|
|
import { connect } from 'react-redux'
|
|
import {checkPaymentMeter, register, registerDevice, testConnect} from '../../api/UserApi'
|
|
import { bindActionCreators } from 'redux'
|
|
import {appSetDevice, appSetPushToken, appSetToken, appSetUser, setPopupNotification} from '../../redux/app/action'
|
|
import messaging from "@react-native-firebase/messaging";
|
|
import moment from 'moment'
|
|
import { setToken } from '../../api/api'
|
|
import { BackgroundImage_RegisterForm } from '../../components/BackgroundImage_RegisterForm'
|
|
import LinearGradient from 'react-native-linear-gradient';
|
|
import DeviceInfo from 'react-native-device-info';
|
|
import Text from '../../components/Text';
|
|
import { t } from '../../utils/i18n'
|
|
|
|
class RegisterProfileScreen extends Component {
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
|
|
this.state = {
|
|
auth: false,
|
|
disableButton: false,
|
|
image_url: require('../../../assets/images/profile.png'),
|
|
}
|
|
|
|
this._register = this._register.bind(this);
|
|
this.initNotification = this.initNotification.bind(this);
|
|
|
|
}
|
|
|
|
componentDidMount() {
|
|
console.log(this.props)
|
|
if (!this.props.push_token) {
|
|
this.initNotification();
|
|
}
|
|
|
|
this.setState({
|
|
image_url: this.props.navigation.getParam('image_url', require('../../../assets/images/profile.png'))
|
|
})
|
|
}
|
|
|
|
|
|
|
|
initNotification = async () => {
|
|
await this.setPermission()
|
|
const fcmToken = await messaging().getToken()
|
|
console.log('fcmToken', fcmToken)
|
|
if (fcmToken) {
|
|
this.props.appSetPushToken(fcmToken)
|
|
console.log('fcmToken', this.props)
|
|
} else {
|
|
Alert.alert(null, 'Cannot get push token.', [{ text: 'ok' }])
|
|
}
|
|
}
|
|
|
|
setPermission = async () => {
|
|
try {
|
|
const enabled = await messaging().hasPermission()
|
|
if (!enabled) {
|
|
await messaging().requestPermission()
|
|
}
|
|
} catch (error) {
|
|
console.log('error', error)
|
|
}
|
|
}
|
|
|
|
|
|
_register() {
|
|
this.setState({disableButton: true})
|
|
if (!this.props.device && this.props.push_token) {
|
|
const resultSendDevice = registerDevice(this.props.push_token)
|
|
if (resultSendDevice.ok && resultSendDevice.data.success) {
|
|
this.props.appSetDevice(resultSendDevice.data.device)
|
|
}
|
|
}
|
|
|
|
let systemName = DeviceInfo.getSystemName();
|
|
let deviceId = null
|
|
if(systemName == "Android") {
|
|
if (!this.props.device) {
|
|
Alert.alert(null, 'Cannot get push token or device.', [{ text: 'ok' }])
|
|
return;
|
|
}
|
|
deviceId = this.props.device.id
|
|
}
|
|
|
|
register({
|
|
...this.props.user,
|
|
device_id: deviceId,
|
|
name: this.props.user.name.replace(/\u00a0/g, /\u0020/),
|
|
fcm_token: this.props.push_token
|
|
}).then(
|
|
(res) => {
|
|
if (res.ok && res.data.success) {
|
|
let token = res.data.token
|
|
//this.props.appSetToken(token)
|
|
if (res.data.customer) {
|
|
this.props.appSetUser(res.data.customer)
|
|
this.props.appSetToken(res.data.token)
|
|
setToken(token)
|
|
|
|
Alert.alert(
|
|
'',
|
|
t('register_success'),
|
|
[
|
|
{ text: 'OK', onPress: () => {
|
|
/*checkPaymentMeter()
|
|
.then(result => {
|
|
if(result.data){
|
|
let data = {
|
|
pending_payment: result.data.pending_payment != null ? result.data.pending_payment : 0,
|
|
is_notified_electric: result.data.user.is_notified_electric,
|
|
is_notified_overdue: result.data.user.is_notified_overdue,
|
|
is_notified_meter: result.data.user.is_notified_meter,
|
|
payment_id: result.data.payment_id,
|
|
notified_meter_at: result.data.notified_meter_at ? result.data.notified_meter_at : moment().format('DD MMM YYYY')
|
|
}
|
|
|
|
this.props.setPopupNotification(data)
|
|
}
|
|
})*/
|
|
|
|
this.setState({isLoading:false},() => {
|
|
this.props.navigation.navigate('HomeScreen',{isLogin:true})
|
|
})
|
|
}
|
|
}
|
|
],
|
|
{ cancelable: false }
|
|
)
|
|
|
|
//Alert.alert(null, t('register_success'), [{ text: t('ok') }])
|
|
//this.props.navigation.navigate('HomeScreen')
|
|
|
|
}
|
|
} else {
|
|
this.props.appSetUser(null)
|
|
let error_text = res.data.error;
|
|
if(res.data.errors && res.data.errors.room[0]){
|
|
error_text = res.data.errors.room[0]
|
|
}
|
|
Alert.alert(null, error_text, [{ text: t('ok') }])
|
|
this.props.navigation.goBack()
|
|
}
|
|
}
|
|
);
|
|
}
|
|
|
|
render() {
|
|
const { user } = this.props
|
|
return (
|
|
<LinearGradient colors={['#3AA40C', '#2C7C0B']} style={{
|
|
flex: 1,
|
|
width: null,
|
|
height: null,
|
|
resizeMode: 'cover'
|
|
}}>
|
|
<ScrollView showsVerticalScrollIndicator={false} style={{ flex: 1 }}>
|
|
<View style={styles.container}>
|
|
<View style={styles.step_indicator}>
|
|
<CustomStepIndicator currentStep={3} totalStep={3} style={{ }} />
|
|
</View>
|
|
<View style={styles.logo}>
|
|
<View style={{
|
|
flexGrow: 1,alignItems: 'center', paddingVertical: 20,
|
|
}}>
|
|
<Image
|
|
style={{ width: 100, height: 100, borderRadius: 50, borderColor: 'white', borderWidth: 2 }}
|
|
source={this.state.image_url}
|
|
/>
|
|
</View>
|
|
{/*<Text> LOGO </Text>*/}
|
|
</View>
|
|
<View style={{ backgroundColor: '#00420A', flex: 1 }}>
|
|
<BackgroundImage_RegisterForm >
|
|
<View style={styles.form}>
|
|
|
|
<Text style={styles.headerTitle}> {t('profile')} </Text>
|
|
<View style={[styles.table]}>
|
|
|
|
<View style={styles.row_title}>
|
|
<Text style={styles.title_data}> {t('name')} </Text>
|
|
{/* <Text style={styles.title_data}> อีเมล </Text> */}
|
|
{/*<Text style={styles.title_data}> {t('gender')} </Text>*/}
|
|
{/*<Text style={styles.title_data}> {t('birth_date')} </Text>*/}
|
|
<Text style={styles.title_data}> {t('phone2')} </Text>
|
|
</View>
|
|
{
|
|
user !== null &&
|
|
<View style={styles.row_data}>
|
|
<Text style={styles.detail_data}> {user.name} </Text>
|
|
{/* <Text style={styles.detail_data}> {user.email} </Text> */}
|
|
{/*<Text style={styles.detail_data}> {user.gender} </Text>*/}
|
|
{/*<Text style={styles.detail_data}> {moment(user.birth_date_show).add(543, 'years').format('D MMMM YYYY')} </Text>*/}
|
|
<Text style={styles.detail_data}> {user.mobile} </Text>
|
|
</View>
|
|
}
|
|
</View>
|
|
|
|
<Text style={[styles.headerTitle]}> {t('accom_info')} </Text>
|
|
<View style={[styles.table]}>
|
|
<View style={styles.row_title}>
|
|
<Text style={styles.title_data}> {t('project')} </Text>
|
|
<Text style={styles.title_data}> {t('building')} </Text>
|
|
<Text style={styles.title_data}> {t('room2')} </Text>
|
|
</View>
|
|
{
|
|
user !== null &&
|
|
<View style={styles.row_data}>
|
|
<Text style={styles.detail_data}> {user.project_name} </Text>
|
|
<Text style={styles.detail_data}> {user.building}</Text>
|
|
<Text style={styles.detail_data}> {user.room} </Text>
|
|
</View>
|
|
}
|
|
|
|
</View>
|
|
</View>
|
|
|
|
</BackgroundImage_RegisterForm>
|
|
</View>
|
|
</View>
|
|
</ScrollView>
|
|
<View style={styles.buttons}>
|
|
<View style={styles.row}>
|
|
<CustomButton style={styles.btn_next_register} title={'ยืนยัน'} sizeText={14}
|
|
onPress={this._register} disabled={this.state.disableButton}/>
|
|
</View>
|
|
</View>
|
|
</LinearGradient>
|
|
)
|
|
}
|
|
}
|
|
|
|
const styles = {
|
|
container: {
|
|
flex: 1,
|
|
flexDirection: 'column',
|
|
height: GetWidthHeightDevice.HeightDevice
|
|
|
|
},
|
|
logo: {
|
|
height: '23%',
|
|
flexDirection: 'row',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
form: {
|
|
// height: '45%',
|
|
|
|
flex: 1,
|
|
padding: 15,
|
|
paddingBottom: 0,
|
|
position: 'relative',
|
|
//backgroundColor: 'rgba(0, 66, 18,0.7)'
|
|
},
|
|
table: {
|
|
flexDirection: 'row',
|
|
},
|
|
row: {
|
|
// flex: 1,
|
|
flexDirection: 'row',
|
|
marginVertical: 5,
|
|
},
|
|
row_title: {
|
|
flex: 2,
|
|
flexDirection: 'column',
|
|
marginVertical: 5,
|
|
},
|
|
row_data: {
|
|
flex: 4,
|
|
flexDirection: 'column',
|
|
marginVertical: 5,
|
|
},
|
|
step_indicator: {
|
|
// flex: 1,
|
|
},
|
|
headerTitle: {
|
|
color: '#8BC34A',
|
|
marginTop: 5,
|
|
marginBottom: 5
|
|
},
|
|
row_grow: {
|
|
flexGrow: 1,
|
|
// marginLeft: 5
|
|
// backgroundColor:"red",
|
|
},
|
|
row_grow_first: {
|
|
flexGrow: 1,
|
|
marginRight: 5,
|
|
// backgroundColor:"blue",
|
|
},
|
|
title_data: {
|
|
color: 'rgba(255, 255, 255, 0.65)',
|
|
fontSize: 14,
|
|
marginVertical: 5
|
|
},
|
|
detail_data: {
|
|
fontSize: 14,
|
|
marginVertical: 5,
|
|
color: 'white',
|
|
},
|
|
buttons: {
|
|
flexGrow: 1,
|
|
// padding: 10,
|
|
// backgroundColor: 'red',
|
|
// alignItems: 'flex-end',
|
|
// justifyContent: 'center',
|
|
position: 'absolute',
|
|
flexDirection: 'row',
|
|
marginHorizontal: 15,
|
|
bottom: 10
|
|
}, btn_next_register: {
|
|
backgroundColor: '#145EB3'
|
|
}
|
|
}
|
|
|
|
const mapDisPatchToProps = state => {
|
|
return state.app
|
|
}
|
|
const setUser = dispatch => bindActionCreators({ appSetToken, appSetPushToken, appSetDevice, appSetUser, setPopupNotification }, dispatch)
|
|
export default connect(mapDisPatchToProps, setUser)(RegisterProfileScreen)
|