133 lines
4.9 KiB
JavaScript
133 lines
4.9 KiB
JavaScript
import React, { Component } from 'react';
|
|
import { StatusBar, StyleSheet, View } from 'react-native';
|
|
import I18n from 'react-native-i18n';
|
|
import { Appbar, Provider } from 'react-native-paper';
|
|
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
|
|
import { Color } from '../../config/Color';
|
|
import { IlinkEmitter } from "../../utils/events";
|
|
import OutlineTextInput from '../../components/OutlineTextInput';
|
|
import CustomButton from '../../components/CustomButton';
|
|
import { ScrollView } from 'react-native-gesture-handler';
|
|
const route = require('../../route.json');
|
|
let slugify = require('slugify');
|
|
|
|
export default class PaiementFacture extends Component {
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
IlinkEmitter.on("langueChange", this.updateLangue.bind(this));
|
|
this.state = {
|
|
title: this.props.navigation.state.params.title,
|
|
type: this.props.navigation.state.params.type,
|
|
}
|
|
console.log("Paiement facture props", this.props);
|
|
|
|
}
|
|
|
|
updateLangue() {
|
|
this.props.navigation.setParams({ name: I18n.t('WALLET') })
|
|
this.forceUpdate();
|
|
}
|
|
|
|
static navigationOptions = ({ navigation }) => ({
|
|
header: null,
|
|
headerMode: 'none',
|
|
headerTitle: null,
|
|
activeColor: '#f0edf6',
|
|
inactiveColor: '#3e2465',
|
|
barStyle: { backgroundColor: '#694fad' },
|
|
drawerLabel: I18n.t('CREDIT_MANAGE'),
|
|
drawerIcon: ({ tintColor }) => (
|
|
<Icon
|
|
name={'credit-card'}
|
|
size={24}
|
|
/>)
|
|
});
|
|
|
|
renderLabel = () => {
|
|
const { type } = this.state;
|
|
|
|
switch (type) {
|
|
case 'PAIEMENT_ECOLE':
|
|
return I18n.t('IDENTIFIANT_ETUDIANT')
|
|
case 'PAIEMENT_EAU_ELECTRICITE':
|
|
return I18n.t('NUMERO_ABONNE')
|
|
case 'PAIEMENT_CREDIT_TELEPHONE':
|
|
return I18n.t('PHONE_NUMBER')
|
|
case 'PAIEMENT_ABONNEMENT_TV':
|
|
return I18n.t('NUMERO_ABONNE')
|
|
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<Provider>
|
|
<View style={{ flex: 1 }}>
|
|
|
|
<StatusBar
|
|
backgroundColor={Color.primaryDarkColor}
|
|
barStyle="light-content"
|
|
translucent={false}
|
|
/>
|
|
|
|
<Appbar.Header dark={true} style={{ backgroundColor: Color.primaryColor }}>
|
|
<Appbar.BackAction
|
|
onPress={() => { this.props.navigation.pop() }}
|
|
/>
|
|
<Appbar.Content
|
|
title={this.state.title}
|
|
/>
|
|
</Appbar.Header>
|
|
|
|
<View style={styles.container}>
|
|
|
|
<ScrollView style={{ padding: 20 }}>
|
|
|
|
<View style={{ marginTop: 10, marginRight: 20, marginLeft: 20 }}>
|
|
<OutlineTextInput
|
|
borderBottomColor={'black'}
|
|
keyboardType="numeric"
|
|
label={this.renderLabel()}
|
|
style={{ marginTop: 10 }}
|
|
placeholder={this.renderLabel()}
|
|
/>
|
|
</View>
|
|
|
|
<View style={{ marginTop: 10, marginRight: 20, marginLeft: 20, marginBottom: 10 }}>
|
|
<OutlineTextInput
|
|
borderBottomColor={'black'}
|
|
keyboardType="numeric"
|
|
label={I18n.t('AMOUNT')}
|
|
style={{ marginTop: 10 }}
|
|
placeholder={I18n.t('AMOUNT_LABEL_DESCRIPTION')}
|
|
/>
|
|
</View>
|
|
|
|
|
|
<View style={{ margin: 10 }}>
|
|
<CustomButton outline onPress={() => { }}>
|
|
{I18n.t('VALIDATE')}
|
|
</CustomButton>
|
|
</View>
|
|
|
|
</ScrollView>
|
|
|
|
|
|
</View>
|
|
|
|
</View>
|
|
</Provider>
|
|
);
|
|
}
|
|
}
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: Color.containerBackgroundColor
|
|
},
|
|
}); |