ilink-world/screens/history-request/HistoryRequester.ios.js

606 lines
21 KiB
JavaScript
Raw Normal View History

2019-06-16 13:09:54 +00:00
/**
* 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',
}
});