629 lines
27 KiB
JavaScript
629 lines
27 KiB
JavaScript
/**
|
|
* Sample React Native App
|
|
* https://github.com/facebook/react-native
|
|
*
|
|
* @format
|
|
* @flow
|
|
*/
|
|
|
|
import React, { Component } from 'react';
|
|
import {
|
|
Platform, StyleSheet, Text, View, ScrollView,
|
|
Alert,
|
|
FlatList, BackHandler, ProgressBarAndroid, Picker, StatusBar
|
|
} from 'react-native';
|
|
import ActionButton from 'react-native-action-button';
|
|
import MapView from 'react-native-maps';
|
|
import { responsiveHeight, responsiveWidth, responsiveFontSize } from 'react-native-responsive-dimensions';
|
|
import CardView from 'react-native-cardview';
|
|
import { Sae } from 'react-native-textinput-effects';
|
|
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
|
|
import Button from 'apsl-react-native-button';
|
|
import { primary, primaryDark, accent } from '../../utils/theme.json';
|
|
import * as Animatable from 'react-native-animatable';
|
|
import { isNumber } from 'util';
|
|
import { readUser } from './../../webservice/AuthApi'
|
|
import { sendDemande } from './../../webservice/HistoryRequestApi'
|
|
import { sendDemandeSpecificque } from "../../webservice/HistoryRequestApi";
|
|
import { getAgentNetworksList } from "../../webservice/NetworkApi";
|
|
import { HelperText, TextInput, TextInputMask } from 'react-native-paper'
|
|
import I18n from "react-native-i18n"
|
|
type Props = {}
|
|
const route = require('../../route.json')
|
|
import { Card, CardTitle, CardContent, CardAction, CardButton, CardImage, Title } from 'react-native-material-cards'
|
|
export default class HistoryRequester extends Component {
|
|
static navigatorStyle = {
|
|
navBarHidden: true,
|
|
};
|
|
static navigationOptions = {
|
|
drawerLabel: () => null,
|
|
headerTitle: I18n.t('ASK_CREDIT'),
|
|
title: I18n.t('ASK_CREDIT')
|
|
};
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = this.initState();
|
|
this.updateState()
|
|
}
|
|
|
|
|
|
componentDidDisappear() {
|
|
BackHandler.removeEventListener('hardwareBackPress', this.backPressed);
|
|
|
|
}
|
|
|
|
componentDidAppear() {
|
|
BackHandler.addEventListener('hardwareBackPress', this.backPressed);
|
|
}
|
|
|
|
handleViewRef = ref => this.numberView = ref;
|
|
handleMontantRef = ref => this.montantView = ref;
|
|
initState() {
|
|
return {
|
|
phone: null,
|
|
montant: undefined,
|
|
isSending: false,
|
|
isDisabled: true,
|
|
networks: [],
|
|
user: null,
|
|
visibleError: false,
|
|
currentNetwork: { nt: 1 },
|
|
errorAnimation: "",
|
|
}
|
|
}
|
|
|
|
backPressed = () => {
|
|
this.props.navigation.state.params.onGoBack();
|
|
}
|
|
|
|
onUserCancel() {
|
|
console.log(this.props);
|
|
this.props.navigation.state.params.onGoBack();
|
|
this.props.navigation.goBack();
|
|
}
|
|
onUserSend() {
|
|
var validMontant = true
|
|
if (!isNumber(this.state.montant) || this.state.montant > 1000000) {
|
|
validMontant = false
|
|
}
|
|
this.setState({ visibleError: !validMontant })
|
|
if (!validMontant) {
|
|
this.montantView.shake(800)
|
|
setTimeout(() => {
|
|
this.setState({ visibleError: false })
|
|
}, 3000)
|
|
}
|
|
else {
|
|
this.setState({ isSending: true })
|
|
let title = ""
|
|
let message = ""
|
|
sendDemandeSpecificque(this.state.montant, this.state.user.phoneTransaction, this.state.user.code_membre).then((data) => {
|
|
if (data.success !== undefined) {
|
|
if (data.success === 1) {
|
|
title = I18n.t('DEMAND_SEND'),
|
|
message = I18n.t('DEMAND_SEND_SUCCESFUL')
|
|
} else {
|
|
title = "Erreur survenu lors de l'envoie ",
|
|
message = "Une erreur est survenu lors de l'envoie de la demande"
|
|
}
|
|
|
|
} else {
|
|
title = "Erreur survenu lors de l'envoie ",
|
|
message = "Une erreur est survenu lors de l'envoie de la demande"
|
|
|
|
}
|
|
Alert.alert(title, message, [{
|
|
text: 'Ok', onPress: () => {
|
|
this.setState({ montant: "" })
|
|
}
|
|
}])
|
|
setTimeout(() => {
|
|
this.setState({ isSending: false })
|
|
}, 800)
|
|
|
|
}).catch((error) => {
|
|
title = "Erreur survenu lors de l'envoie ",
|
|
message = "Une erreur est survenu lors de l'envoie de la demande"
|
|
Alert.alert(title, message, [{ text: 'Ok' }])
|
|
|
|
})
|
|
}
|
|
}
|
|
render() {
|
|
const { user } = this.state
|
|
return (
|
|
<View style={{ flex: 1, alignItems: 'center', backgroundColor: "lightgrey", paddingTop: responsiveHeight(10) }}>
|
|
<StatusBar
|
|
translucent={false}
|
|
/>
|
|
{user ? ((user.category === "geolocated") ?
|
|
this.multiNetwork() : this.simpleAgent()) :
|
|
<ProgressBarAndroid />
|
|
}
|
|
</View>
|
|
)
|
|
}
|
|
simpleAgent() {
|
|
let montant = 0
|
|
if (true) {
|
|
return (<View style={{ height: 200 }}>
|
|
<Card style={{ width: responsiveWidth(96), paddingTop: 20 }}>
|
|
<CardContent>
|
|
<View>
|
|
<Animatable.View
|
|
ref={this.handleMontantRef}
|
|
>
|
|
<TextInput
|
|
label={I18n.t('AMOUNT')}
|
|
keyboardType={"numeric"}
|
|
style={input.selfitem}
|
|
ref={(ref) => {
|
|
this.refInp = ref
|
|
}}
|
|
|
|
mode={"outlined"}
|
|
inputStyle={input.style}
|
|
onChangeText={(text) => {
|
|
try {
|
|
let neb = parseInt(text)
|
|
this.setState({ montant: neb, isDisabled: isNaN(neb) })
|
|
} catch (e) {
|
|
|
|
}
|
|
}}
|
|
value={this.state.montant}
|
|
/>
|
|
<HelperText
|
|
type="error"
|
|
visible={this.state.visibleError}>
|
|
{I18n.t('INVALID_MONTANT')}
|
|
</HelperText>
|
|
</Animatable.View>
|
|
|
|
</View>
|
|
</CardContent>
|
|
<CardAction
|
|
separator={true}
|
|
inColumn={false}>
|
|
<CardButton
|
|
onPress={() => { this.onUserCancel() }}
|
|
title={I18n.t('CANCEL')}
|
|
color="crimson"
|
|
/>
|
|
<CardButton
|
|
onPress={() => { this.onUserSend() }}
|
|
title={I18n.t('SEND')}
|
|
color="steelblue"
|
|
|
|
/>
|
|
</CardAction>
|
|
</Card>
|
|
</View>)
|
|
} else
|
|
return (<View style={styles.container}>
|
|
<CardView style={styles.cardInput}>
|
|
<View>
|
|
<Text style={styles.title}>Demande de credit</Text>
|
|
<Animatable.View
|
|
ref={this.handleMontantRef}
|
|
>
|
|
<Sae
|
|
label={I18n.t('AMOUNT')}
|
|
iconClass={FontAwesomeIcon}
|
|
iconName={'dollar'}
|
|
iconColor={primary}
|
|
inputStyle={input.style}
|
|
keyboardType={"numeric"}
|
|
value={this.state.montant}
|
|
ref={(ref) => {
|
|
this.refInp = ref
|
|
}}
|
|
onChangeText={(text) => {
|
|
if (text.length > 0) {
|
|
try {
|
|
montant = parseFloat(text);
|
|
this.setState({ isDisabled: montant > 0, montant: montant })
|
|
|
|
} catch (e) {
|
|
|
|
}
|
|
}
|
|
}}
|
|
style={input.selfitem}
|
|
labelStyle={input.label}
|
|
autoCapitalize={'none'}
|
|
autoCorrect={false}
|
|
/>
|
|
</Animatable.View>
|
|
|
|
</View>
|
|
<View style={styles.btnContainer}>
|
|
<Button style={styles.button_1} textStyle={styles.button_1_text} onPress={() => this.onUserCancel()}>
|
|
{I18n.t('CANCEL')}
|
|
</Button>
|
|
<Button isLoading={this.state.isSending} isDisabled={!this.state.isDisabled} style={styles.button_2}
|
|
ref={(r) => { this.refBtn = r }}
|
|
textStyle={styles.button_2_text} onPress={() => {
|
|
this.onUserSend()
|
|
}}>
|
|
{I18n.t('SEND')}
|
|
</Button>
|
|
|
|
</View>
|
|
</CardView>
|
|
|
|
</View>
|
|
)
|
|
}
|
|
|
|
multiNetwork() {
|
|
if (true) {
|
|
return (<View style={{ height: 250, justifyContent: 'center' }}>
|
|
|
|
<Card style={{ width: responsiveWidth(96), justifyContent: 'center' }}>
|
|
<CardContent>
|
|
<View style={{ flex: 1 }}>
|
|
<View style={{ flexDirection: 'row' }}>
|
|
<Picker
|
|
|
|
selectedValue={this.state.currentNetwork}
|
|
prompt={I18n.t("SELECT_NETWORK")}
|
|
style={{ height: 50, flex: 1, marginLeft: 20 }}
|
|
itemStyle={styles.subtitle}
|
|
onValueChange={(itemValue, itemIndex) =>
|
|
this.setState({ currentNetwork: itemValue })
|
|
}>
|
|
{this.state.networks.map((item, index) => {
|
|
return (<Picker.Item label={item.nt ? I18n.t("SELECT_NETWORK") : I18n.t("FOR_NUMB") + item.phone + " (" + item.name + ")"} value={item} />)
|
|
})}
|
|
|
|
</Picker>
|
|
|
|
</View>
|
|
<Animatable.View
|
|
ref={this.handleMontantRef}
|
|
>
|
|
<TextInput
|
|
label={I18n.t('AMOUNT')}
|
|
keyboardType={"numeric"}
|
|
style={input.selfitem}
|
|
ref={(ref) => {
|
|
this.refInp = ref
|
|
}}
|
|
|
|
mode={"outlined"}
|
|
inputStyle={input.style}
|
|
onChangeText={(text) => {
|
|
try {
|
|
let neb = parseInt(text)
|
|
this.setState({ montant: neb, isDisabled: isNaN(neb) })
|
|
} catch (e) {
|
|
|
|
}
|
|
}}
|
|
value={this.state.montant}
|
|
/>
|
|
<HelperText
|
|
type="error"
|
|
visible={this.state.visibleError}>
|
|
{I18n.t('INVALID_MONTANT')}
|
|
</HelperText>
|
|
</Animatable.View>
|
|
</View>
|
|
</CardContent>
|
|
<CardAction
|
|
separator={true}
|
|
inColumn={false}>
|
|
<CardButton
|
|
onPress={() => { this.onUserCancel() }}
|
|
title={I18n.t('CANCEL')}
|
|
color="crimson"
|
|
/>
|
|
<CardButton
|
|
onPress={() => {
|
|
const { currentNetwork, montant } = this.state
|
|
if (currentNetwork !== undefined && currentNetwork.nt === undefined) {
|
|
this.onNetworkSend(currentNetwork.phone, currentNetwork.code_membre, montant)
|
|
}
|
|
}}
|
|
title={I18n.t('SEND')}
|
|
color="steelblue"
|
|
/>
|
|
</CardAction>
|
|
</Card>
|
|
</View>)
|
|
}
|
|
else
|
|
return (
|
|
<View style={styles.container2}>
|
|
<CardView style={styles.cardInput2}>
|
|
<View>
|
|
<Text style={styles.title}>{I18n.t('ASK_CREDIT')}</Text>
|
|
<Picker
|
|
selectedValue={this.state.currentNetwork}
|
|
prompt={"Selectionner un reseau"}
|
|
style={{ height: 50, width: responsiveWidth(100) }}
|
|
itemStyle={styles.subtitle}
|
|
onValueChange={(itemValue, itemIndex) =>
|
|
this.setState({ currentNetwork: itemValue })
|
|
}>
|
|
{this.state.networks.map((item, index) => {
|
|
return (<Picker.Item label={item.nt ? "Selectionner un reseau" : "Pour le " + item.phone + " (" + item.name + ")"} value={item} />)
|
|
})}
|
|
|
|
</Picker>
|
|
<Animatable.View
|
|
ref={this.handleMontantRef}
|
|
>
|
|
<Sae
|
|
label={I18n.t('AMOUNT')}
|
|
iconClass={FontAwesomeIcon}
|
|
iconName={'dollar'}
|
|
iconColor={primary}
|
|
ref={(ref) => {
|
|
this.refInp = ref
|
|
}}
|
|
inputStyle={input.style}
|
|
keyboardType={"numeric"}
|
|
onChangeText={(text) => {
|
|
try {
|
|
let neb = parseInt(text)
|
|
this.setState({ montant: neb, isDisabled: isNaN(neb) })
|
|
} catch (e) {
|
|
|
|
}
|
|
}}
|
|
style={input.selfitem}
|
|
labelStyle={input.label}
|
|
autoCapitalize={'none'}
|
|
autoCorrect={false}
|
|
/>
|
|
</Animatable.View>
|
|
|
|
</View>
|
|
<View style={styles.btnContainer}>
|
|
<Button style={styles.button_1}
|
|
textStyle={styles.button_1_text} onPress={() => this.onUserCancel()}>
|
|
{I18n.t('CANCEL')}
|
|
</Button>
|
|
<Button
|
|
ref={ref => {
|
|
this.refBtn = ref
|
|
}}
|
|
isDisabled={this.state.isDisabled}
|
|
style={styles.button_2}
|
|
textStyle={styles.button_2_text}
|
|
onPress={() => {
|
|
const { currentNetwork, montant } = this.state
|
|
if (currentNetwork !== undefined && currentNetwork.nt === undefined) {
|
|
this.onNetworkSend(currentNetwork.phone, currentNetwork.code_membre, montant, this.refInp, this.refBtn)
|
|
}
|
|
}}>
|
|
{I18n.t('SEND')}
|
|
</Button>
|
|
|
|
</View>
|
|
</CardView>
|
|
</View>)
|
|
}
|
|
|
|
renderSingleNetwork(item) {
|
|
const itm = item.item
|
|
console.log(item)
|
|
let refInp = null, refBtn = null
|
|
let montant = 0
|
|
return (<View style={styles.container2}>
|
|
<CardView style={styles.cardInput2}>
|
|
<View>
|
|
<Text style={styles.title}>{I18n.t('ASK_CREDIT')}</Text>
|
|
<Text style={styles.subtitle}>{I18n.t("FOR_NUMB")} {itm.phone} ({itm.name})</Text>
|
|
<Animatable.View
|
|
ref={this.handleMontantRef}
|
|
>
|
|
<Sae
|
|
label={I18n.t('AMOUNT')}
|
|
iconClass={FontAwesomeIcon}
|
|
iconName={'dollar'}
|
|
iconColor={primary}
|
|
ref={(ref) => {
|
|
refInp = ref
|
|
this.setState({ refIn: refInp })
|
|
}}
|
|
inputStyle={input.style}
|
|
|
|
value={this.state.montant}
|
|
keyboardType={"numeric"}
|
|
onChangeText={(text) => {
|
|
if (text.length > 0) {
|
|
try {
|
|
montant = parseFloat(text);
|
|
this.setStat({ montant: montant })
|
|
if (refBtn) {
|
|
refBtn.setState({ isDisabled: montant > 0 })
|
|
refBtn.isDisabled = montant > 0
|
|
|
|
}
|
|
} catch (e) {
|
|
|
|
}
|
|
}
|
|
}}
|
|
style={input.selfitem}
|
|
labelStyle={input.label}
|
|
autoCapitalize={'none'}
|
|
autoCorrect={false}
|
|
/>
|
|
</Animatable.View>
|
|
|
|
</View>
|
|
<View style={styles.btnContainer}>
|
|
<Button style={styles.button_1} textStyle={styles.button_1_text} onPress={() => this.onUserCancel()}>
|
|
{I18n.t('CANCEL')}
|
|
</Button>
|
|
<Button
|
|
ref={ref => {
|
|
refBtn = ref
|
|
}}
|
|
style={styles.button_2}
|
|
textStyle={styles.button_2_text}
|
|
onPress={() => {
|
|
this.onNetworkSend(itm.phone, itm.code_membre, refInp.state.value, refInp, refBtn)
|
|
}}>
|
|
{I18n.t('SEND')}
|
|
</Button>
|
|
|
|
</View>
|
|
</CardView>
|
|
|
|
</View>)
|
|
|
|
}
|
|
onNetworkSend(phone, code_membre, text) {
|
|
var validMontant = true
|
|
let montant = parseFloat(text)
|
|
if (montant === null || !isNumber(montant) || montant > 1000000) {
|
|
validMontant = false
|
|
}
|
|
this.setState({ visibleError: !validMontant })
|
|
if (!validMontant) {
|
|
this.montantView.shake(800)
|
|
setTimeout(() => {
|
|
this.setState({ visibleError: false })
|
|
}, 3000)
|
|
}
|
|
else {
|
|
sendDemandeSpecificque(montant, phone, code_membre).then((data) => {
|
|
var title = ""
|
|
var message = ""
|
|
if (data.success !== undefined) {
|
|
if (data.success === 1) {
|
|
title = I18n.t("DEMAND_SEND")
|
|
message = I18n.t('DEMAND_SEND_SUCCESFUL')
|
|
} else {
|
|
title = "Erreur survenu lors de l'envoie "
|
|
message = "Une erreur est survenu lors de l'envoie de la demande"
|
|
}
|
|
} else {
|
|
title = "Erreur survenu lors de l'envoie "
|
|
message = "Une erreur est survenu lors de l'envoie de la demande"
|
|
}
|
|
|
|
Alert.alert(title, message, [{ text: "Ok", onPress: () => { this.setState({ montant: "" }) } }])
|
|
|
|
})
|
|
}
|
|
}
|
|
|
|
async updateState() {
|
|
|
|
let user = await readUser();
|
|
if (user.category === "geolocated") {
|
|
let networks = await getAgentNetworksList(user.agentId);
|
|
console.log(networks)
|
|
if (networks.success === 1) {
|
|
let net = [this.state.currentNetwork]
|
|
networks.networks.forEach((item) => {
|
|
net.push(item)
|
|
|
|
})
|
|
this.setState({ networks: net })
|
|
}
|
|
}
|
|
this.setState({ user: user })
|
|
|
|
}
|
|
}
|
|
|
|
const input = StyleSheet.create({
|
|
selfitem: {
|
|
|
|
width: responsiveWidth(70),
|
|
alignSelf: 'center',
|
|
marginBottom: 20,
|
|
},
|
|
label: {
|
|
color: primary
|
|
},
|
|
style: {
|
|
color: 'black'
|
|
}
|
|
})
|
|
const styles = StyleSheet.create({
|
|
title: {
|
|
backgroundColor: primary,
|
|
color: 'white',
|
|
paddingLeft: 20,
|
|
paddingTop: 10,
|
|
fontWeight: 'bold',
|
|
fontSize: responsiveFontSize(3),
|
|
height: responsiveHeight(10),
|
|
},
|
|
subtitle: {
|
|
color: 'black',
|
|
paddingLeft: 20,
|
|
paddingTop: 10,
|
|
marginBottom: responsiveHeight(3),
|
|
fontWeight: 'bold',
|
|
fontSize: responsiveFontSize(2),
|
|
},
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#EEE',
|
|
justifyContent: 'space-between',
|
|
},
|
|
|
|
container2: {
|
|
flex: 1,
|
|
height: responsiveHeight(20),
|
|
backgroundColor: '#EEE',
|
|
},
|
|
btnContainer: {
|
|
flexDirection: 'row',
|
|
paddingRight: 5,
|
|
paddingLeft: 5,
|
|
paddingTop: 5,
|
|
marginBottom: -2.5,
|
|
},
|
|
button_1: {
|
|
flex: 1,
|
|
borderColor: 'transparent',
|
|
|
|
},
|
|
button_2: {
|
|
flex: 1,
|
|
borderColor: 'transparent',
|
|
backgroundColor: primary,
|
|
borderRadius: 0,
|
|
},
|
|
|
|
button_1_text: {
|
|
color: primary,
|
|
fontWeight: 'bold',
|
|
},
|
|
|
|
button_2_text: {
|
|
color: 'white',
|
|
fontWeight: 'bold',
|
|
},
|
|
cardInput: {
|
|
|
|
marginLeft: 10,
|
|
marginRight: 10,
|
|
marginTop: responsiveHeight(5),
|
|
width: responsiveWidth(98),
|
|
alignSelf: 'center',
|
|
justifyContent: 'space-between',
|
|
height: responsiveHeight(40)
|
|
},
|
|
cardInput2: {
|
|
|
|
marginLeft: 10,
|
|
marginRight: 10,
|
|
marginTop: responsiveHeight(1),
|
|
width: responsiveWidth(98),
|
|
height: responsiveHeight(50),
|
|
alignSelf: 'center',
|
|
justifyContent: 'space-between',
|
|
}
|
|
});
|