606 lines
21 KiB
JavaScript
606 lines
21 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,ProgressViewIOS,ProgressBarAndroid,PickerIOS,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} from 'react-native-paper'
|
||
|
import I18n from "react-native-i18n"
|
||
|
import { Dropdown } from "react-native-material-dropdown"
|
||
|
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()
|
||
|
}
|
||
|
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:"",
|
||
|
}
|
||
|
}
|
||
|
|
||
|
onUserCancel(){
|
||
|
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}}>
|
||
|
<Dropdown
|
||
|
label={I18n.t("SELECT_NETWORK")}
|
||
|
style={{flex:1,width:responsiveWidth(70)}}
|
||
|
labelExtractor={(item,index)=>{
|
||
|
return (item)?I18n.t("FOR_NUMB")+item.phone +" ("+item.name+")":I18n.t("SELECT_NETWORK")
|
||
|
}}
|
||
|
valueExtractor={(item,index)=>{
|
||
|
return item.phone +" ("+item.name+")"
|
||
|
|
||
|
}}
|
||
|
onChangeText={(value,index,data)=>{
|
||
|
this.setState({currentNetwork: data[index]})
|
||
|
|
||
|
}}
|
||
|
data={this.state.networks }
|
||
|
/>
|
||
|
|
||
|
<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',
|
||
|
}
|
||
|
});
|