700 lines
20 KiB
JavaScript
Executable File
700 lines
20 KiB
JavaScript
Executable File
/* eslint-disable radix */
|
|
/* eslint-disable react-native/no-inline-styles */
|
|
import React, {Component} from 'react';
|
|
import {Alert, Platform, StyleSheet, Text, View} from 'react-native';
|
|
import CardView from 'react-native-cardview';
|
|
import Button from 'apsl-react-native-button';
|
|
import {responsiveWidth} from 'react-native-responsive-dimensions';
|
|
import Icons from 'react-native-vector-icons/Ionicons';
|
|
import {readUser} from '../../webservice/AuthApi';
|
|
import isNil from 'lodash/isNil';
|
|
import {
|
|
creditDemandResetReducer,
|
|
treatCreditDemand,
|
|
} from '../../webservice/CreditTreatDemandApi';
|
|
import {
|
|
creditCancelResetReducer,
|
|
treatCancelDemand,
|
|
} from '../../webservice/CreditCancelDemandeApi';
|
|
import {getAgentNetworksList} from '../../webservice/NetworkApi';
|
|
import {connect} from 'react-redux';
|
|
import {bindActionCreators} from 'redux';
|
|
import Toast from 'react-native-root-toast';
|
|
import {Color} from '../../config/Color';
|
|
import Dialog from 'react-native-dialog';
|
|
import {FontWeight} from '../../config/typography';
|
|
import I18n from 'react-native-i18n';
|
|
|
|
import 'moment/locale/fr';
|
|
import 'moment/locale/es-us';
|
|
import 'moment/locale/en-au';
|
|
import 'moment/locale/en-ca';
|
|
import 'moment/locale/en-ie';
|
|
import 'moment/locale/en-il';
|
|
import 'moment/locale/en-nz';
|
|
|
|
let moment = require('moment-timezone');
|
|
const momentJS = require('moment');
|
|
|
|
let typesta = 0;
|
|
|
|
var colorback = 'white';
|
|
|
|
let theme = require('./../../utils/theme.json');
|
|
|
|
const route = require('./../../route.json');
|
|
|
|
class HistoryItemDetails extends Component {
|
|
static navigatorStyle = {
|
|
navBarBackgroundColor: theme.accentLight,
|
|
statusBarColor: theme.accent,
|
|
navBarTextColor: '#FFFFFF',
|
|
navBarButtonColor: '#FFFFFF',
|
|
};
|
|
static navigationOptions = ({navigation}) => {
|
|
return {
|
|
drawerLabel: () => null,
|
|
title: isNil(navigation.getParam('item', null).item)
|
|
? 'Transaction N°' + navigation.getParam('item', {id: '-'}).id
|
|
: 'Transaction N°' + navigation.getParam('item', {id: '-'}).item.id,
|
|
};
|
|
};
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.item = this.props.navigation.getParam('item', null);
|
|
if (isNil(this.props.navigation.getParam('item', null).item)) {
|
|
this.item = this.props.navigation.getParam('item', null);
|
|
} else {
|
|
this.item = this.props.navigation.getParam('item', null).item;
|
|
}
|
|
|
|
this.currentLocale = I18n.locale.includes('fr') ? 'fr' : 'en-gb';
|
|
moment.locale(this.currentLocale);
|
|
|
|
let sta = '';
|
|
if (this.item.status === '1') {
|
|
typesta = 1;
|
|
colorback = '#AEAEAE';
|
|
sta = I18n.t('TREAT_DEMAND');
|
|
} else if (this.item.status === '0') {
|
|
colorback = 'green';
|
|
typesta = 2;
|
|
sta = I18n.t('ACCEPTER_DEMANDE');
|
|
} else {
|
|
colorback = '#AEAEAE';
|
|
typesta = 2;
|
|
sta = I18n.t('REFUSED');
|
|
}
|
|
|
|
this.state = {
|
|
displayAmountModifyDialog: false,
|
|
statut: sta,
|
|
user: null,
|
|
networks: [],
|
|
loadingTreat: false,
|
|
loadingCancel: false,
|
|
triggerTreatmentClick: false,
|
|
triggerCancelClick: false,
|
|
color: colorback,
|
|
montant: null,
|
|
isBtnModifyAmountEnabled: false,
|
|
};
|
|
readUser().then(async user => {
|
|
let networks = [];
|
|
networks = await getAgentNetworksList(user.agentId);
|
|
this.setState({user: user, networks: networks.networks});
|
|
});
|
|
}
|
|
|
|
isNormalInteger = str => {
|
|
return /[ `!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/.test(str) ? false : true;
|
|
};
|
|
|
|
isMontantValid = () => {
|
|
const {montant} = this.state;
|
|
if (parseInt(montant) == 0 || montant < 0) {
|
|
return false;
|
|
} else if (!this.isNormalInteger(montant)) {
|
|
return false;
|
|
} else if (parseInt(montant) > parseInt(this.item.montant)) {
|
|
return false;
|
|
} else {
|
|
return true;
|
|
}
|
|
};
|
|
|
|
displayToast = message => {
|
|
Toast.show(message, {
|
|
duration: Toast.durations.SHORT,
|
|
position: Toast.positions.BOTTOM,
|
|
backgroundColor: Color.primaryColor,
|
|
shadow: true,
|
|
animation: true,
|
|
hideOnPress: true,
|
|
delay: 0,
|
|
onShow: () => {
|
|
// calls on toast\`s appear animation start
|
|
},
|
|
onShown: () => {
|
|
// calls on toast\`s appear animation end.
|
|
},
|
|
onHide: () => {
|
|
// calls on toast\`s hide animation start.
|
|
},
|
|
onHidden: () => {
|
|
// calls on toast\`s hide animation end.
|
|
},
|
|
});
|
|
};
|
|
|
|
onTreatDemand() {
|
|
if (this.item !== '1') {
|
|
this.props.creditDemandResetReducer();
|
|
this.props.treatCreditDemand(this.item.id);
|
|
/* updateCreditDemand(this.item.phone, this.item.id).then((data) => {
|
|
this.setState({ loadingTreat: false })
|
|
console.log(data);
|
|
|
|
if (data.success === 1) {
|
|
this.setState({ statut: I18n.t('TREAT_DEMAND'), color: "#AEAEAE" })
|
|
} else {
|
|
console.log(data);
|
|
}
|
|
}) */
|
|
}
|
|
}
|
|
|
|
onCancelDemand = () => {
|
|
if (this.item !== '1') {
|
|
this.props.treatCancelDemand(this.item.id);
|
|
}
|
|
};
|
|
|
|
renderPromptModifyAmountToSend = () => {
|
|
return (
|
|
<Dialog.Container
|
|
useNativeDriver={true}
|
|
visible={this.state.displayAmountModifyDialog}>
|
|
<Dialog.Title>{I18n.t('MODIFY_AMOUNT')}</Dialog.Title>
|
|
|
|
<Dialog.Description style={[FontWeight.bold]}>
|
|
{I18n.t('ENTER_NEW_AMOUNT_TO_SEND')}
|
|
</Dialog.Description>
|
|
|
|
<Dialog.Input
|
|
style={styles.inputAmountText}
|
|
value={this.state.montant}
|
|
keyboardType="numeric"
|
|
onChangeText={montant => {
|
|
this.setState({montant}, () => {
|
|
if (this.isMontantValid(montant)) {
|
|
this.setState({
|
|
isBtnModifyAmountEnabled: true,
|
|
});
|
|
} else {
|
|
this.setState({
|
|
isBtnModifyAmountEnabled: false,
|
|
});
|
|
}
|
|
|
|
console.log(
|
|
'this.isMontantValid().isValid',
|
|
this.isMontantValid(),
|
|
);
|
|
console.log(
|
|
'isBtnModifyAmountEnabled',
|
|
this.state.isBtnModifyAmountEnabled,
|
|
);
|
|
});
|
|
}}
|
|
/>
|
|
|
|
<Dialog.Button
|
|
bold={true}
|
|
label={I18n.t('CANCEL_LABEL')}
|
|
onPress={() => this.setState({displayAmountModifyDialog: false})}
|
|
/>
|
|
<Dialog.Button
|
|
bold={true}
|
|
label={I18n.t('SEND')}
|
|
disable={this.state.isBtnModifyAmountEnabled}
|
|
onPress={() => {
|
|
this.props.creditDemandResetReducer();
|
|
this.props.treatCreditDemand(this.item.id, this.state.montant);
|
|
}}
|
|
/>
|
|
</Dialog.Container>
|
|
);
|
|
};
|
|
|
|
renderAlertErrorTreatOrCancelDemand = () => {
|
|
const {
|
|
errorTreatDemand,
|
|
resultTreatDemand,
|
|
resultCancelDemand,
|
|
errorCancelDemand,
|
|
} = this.props;
|
|
|
|
if (errorTreatDemand !== null) {
|
|
if (typeof errorTreatDemand.data !== 'undefined') {
|
|
if (errorTreatDemand.status === 426) {
|
|
Alert.alert(
|
|
I18n.t('ERROR_TREATMENT_DEMAND'),
|
|
errorTreatDemand.data.error,
|
|
[
|
|
{
|
|
text: I18n.t('CANCEL_LABEL'),
|
|
onPress: () => {},
|
|
style: 'cancel',
|
|
},
|
|
{
|
|
text: I18n.t('OK'),
|
|
onPress: () => {
|
|
setTimeout(() => {
|
|
this.setState({
|
|
displayAmountModifyDialog: true,
|
|
});
|
|
}, 10);
|
|
this.props.creditDemandResetReducer();
|
|
this.props.creditCancelResetReducer();
|
|
},
|
|
},
|
|
],
|
|
{cancelable: false},
|
|
);
|
|
} else {
|
|
Alert.alert(
|
|
I18n.t('ERROR_TREATMENT_DEMAND'),
|
|
errorTreatDemand.data.error,
|
|
[
|
|
{
|
|
text: I18n.t('OK'),
|
|
onPress: () => {
|
|
this.props.creditDemandResetReducer();
|
|
this.props.creditCancelResetReducer();
|
|
},
|
|
},
|
|
],
|
|
{cancelable: false},
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
if (errorCancelDemand !== null) {
|
|
if (typeof errorCancelDemand.data !== 'undefined') {
|
|
Alert.alert(
|
|
I18n.t('ERROR_TREATMENT_DEMAND'),
|
|
errorCancelDemand.data.error,
|
|
[
|
|
{
|
|
text: I18n.t('OK'),
|
|
onPress: () => {
|
|
this.props.creditCancelResetReducer();
|
|
this.props.creditDemandResetReducer();
|
|
},
|
|
},
|
|
],
|
|
{cancelable: false},
|
|
);
|
|
}
|
|
}
|
|
|
|
if (resultTreatDemand !== null) {
|
|
console.log('resultTreatDemand', resultTreatDemand);
|
|
if (resultTreatDemand.status === 200) {
|
|
this.displayToast(resultTreatDemand.response);
|
|
this.props.navigation.goBack();
|
|
if (!isNil(this.props.navigation.state.params.onGoBack)) {
|
|
this.props.navigation.state.params.onGoBack();
|
|
}
|
|
this.props.creditCancelResetReducer();
|
|
this.props.creditDemandResetReducer();
|
|
}
|
|
}
|
|
|
|
if (resultCancelDemand !== null) {
|
|
console.log('resultCancelDemand', resultCancelDemand);
|
|
if (resultCancelDemand.status === 200) {
|
|
this.displayToast(resultCancelDemand.response);
|
|
this.props.navigation.goBack();
|
|
if (!isNil(this.props.navigation.state.params.onGoBack)) {
|
|
this.props.navigation.state.params.onGoBack();
|
|
}
|
|
this.props.creditCancelResetReducer();
|
|
this.props.creditDemandResetReducer();
|
|
}
|
|
}
|
|
};
|
|
|
|
renderBtn() {
|
|
const {user} = this.state;
|
|
console.warn('ITEM ITEM', this.item);
|
|
console.warn('Code Membre', user.code_membre);
|
|
if (user) {
|
|
if (
|
|
this.item.code_parrain.toLowerCase() === user.code_membre.toLowerCase()
|
|
) {
|
|
console.warn('Conditions vérifié');
|
|
if (this.item.status === '1') {
|
|
return (
|
|
<Button
|
|
style={{
|
|
borderColor: 'transparent',
|
|
borderRadius: 6,
|
|
marginLeft: 5,
|
|
marginRight: 5,
|
|
backgroundColor: this.state.color,
|
|
}}
|
|
isLoading={this.props.loadingTreatDemand}
|
|
onPress={() => {}}
|
|
disabled={true}
|
|
textStyle={styles.textbtnstyle}>
|
|
{this.state.statut}
|
|
</Button>
|
|
);
|
|
}
|
|
if (this.item.status === '2') {
|
|
return (
|
|
<Button
|
|
style={{
|
|
borderColor: 'transparent',
|
|
borderRadius: 6,
|
|
marginLeft: 5,
|
|
marginRight: 5,
|
|
backgroundColor: this.state.color,
|
|
}}
|
|
onPress={() => {}}
|
|
disabled={true}
|
|
textStyle={styles.textbtnstyle}>
|
|
{this.state.statut}
|
|
</Button>
|
|
);
|
|
} else {
|
|
return (
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
paddingTop: 10,
|
|
}}>
|
|
<View
|
|
style={{
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
}}>
|
|
<Button
|
|
style={{
|
|
borderColor: 'transparent',
|
|
borderRadius: 6,
|
|
marginLeft: 5,
|
|
marginRight: 5,
|
|
backgroundColor: this.state.color,
|
|
}}
|
|
isLoading={this.props.loadingTreatDemand}
|
|
onPress={() => {
|
|
this.setState({
|
|
triggerTreatmentClick: true,
|
|
});
|
|
this.onTreatDemand();
|
|
|
|
}}
|
|
textStyle={styles.textbtnstyle}>
|
|
{this.state.statut}
|
|
</Button>
|
|
</View>
|
|
|
|
<View
|
|
style={{
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
}}>
|
|
<Button
|
|
style={{
|
|
borderColor: 'transparent',
|
|
borderRadius: 6,
|
|
marginLeft: 5,
|
|
marginRight: 5,
|
|
backgroundColor: Color.redColor,
|
|
}}
|
|
isLoading={this.props.loadingCancelDemand}
|
|
onPress={() => {
|
|
this.setState({
|
|
triggerCancelClick: true,
|
|
});
|
|
this.onCancelDemand();
|
|
}}
|
|
textStyle={styles.textbtnstyle}>
|
|
{I18n.t('REFUSER_DEMANDE')}
|
|
</Button>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
render() {
|
|
let ago = moment.tz(this.item.date_creation, moment.tz.guess()).format();
|
|
ago = moment(ago);
|
|
|
|
let cancelDate = '';
|
|
if (parseInt(this.item.canceled_by_hypervisor) === 1) {
|
|
console.log('CANCEL DATE', this.item.cancellation_date);
|
|
cancelDate = moment
|
|
.tz(this.item.cancellation_date, moment.tz.guess())
|
|
.format();
|
|
cancelDate = moment(cancelDate);
|
|
}
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
{this.renderPromptModifyAmountToSend()}
|
|
{(this.state.triggerTreatmentClick || this.state.triggerCancelClick) &&
|
|
this.renderAlertErrorTreatOrCancelDemand()}
|
|
<CardView style={styles.cardcontainer1}>
|
|
<Text
|
|
style={{
|
|
fontSize: 17,
|
|
fontWeight: 'bold',
|
|
color: 'black',
|
|
marginLeft: responsiveWidth(5),
|
|
}}>
|
|
{I18n.t('MEMBER_INFO')}
|
|
</Text>
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
justifyContent: 'flex-start',
|
|
}}>
|
|
<Icons
|
|
name="md-call"
|
|
size={28}
|
|
color={theme.accent}
|
|
style={{
|
|
marginLeft: 20,
|
|
}}
|
|
/>
|
|
<Text style={styles.simpleuser}>{this.item.phone}</Text>
|
|
</View>
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
justifyContent: 'flex-start',
|
|
}}>
|
|
<Icons
|
|
name="md-person"
|
|
size={28}
|
|
color={theme.accent}
|
|
style={{
|
|
marginLeft: 20,
|
|
}}
|
|
/>
|
|
<Text style={styles.simpleuser}>{this.item.code_membre}</Text>
|
|
</View>
|
|
</CardView>
|
|
<CardView style={styles.cardcontainer}>
|
|
<Text
|
|
style={{
|
|
fontSize: 17,
|
|
fontWeight: 'bold',
|
|
color: 'black',
|
|
marginLeft: responsiveWidth(5),
|
|
}}>
|
|
{I18n.t('DEMAND_INFO')}
|
|
</Text>
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
justifyContent: 'flex-start',
|
|
}}>
|
|
<Icons
|
|
name="md-git-branch"
|
|
size={28}
|
|
color={theme.accent}
|
|
style={{
|
|
marginLeft: 20,
|
|
}}
|
|
/>
|
|
<Text style={styles.simpleuser}>{this.item.code_parrain}</Text>
|
|
</View>
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
justifyContent: 'flex-start',
|
|
}}>
|
|
<Icons
|
|
name="md-code-working"
|
|
size={28}
|
|
color={theme.accent}
|
|
style={{
|
|
marginLeft: 20,
|
|
}}
|
|
/>
|
|
<Text style={styles.simpleuser}>{this.item.reseau}</Text>
|
|
</View>
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
justifyContent: 'flex-start',
|
|
}}>
|
|
<Icons
|
|
name="md-wallet"
|
|
size={28}
|
|
color={theme.accent}
|
|
style={{
|
|
marginLeft: 20,
|
|
}}
|
|
/>
|
|
<Text style={styles.simpleuser}>{this.item.montant}</Text>
|
|
</View>
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
justifyContent: 'flex-start',
|
|
}}>
|
|
<Icons
|
|
name="md-calendar"
|
|
size={28}
|
|
color={theme.accent}
|
|
style={{
|
|
marginLeft: 20,
|
|
}}
|
|
/>
|
|
<Text style={styles.simpleuser}>
|
|
{ago.format(' Do MMMM YYYY à HH:mm')}
|
|
</Text>
|
|
</View>
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
alignSelf: 'flex-end',
|
|
marginRight: 20,
|
|
justifyContent: 'flex-start',
|
|
}}>
|
|
<Icons name="md-time" size={28} color={theme.accent} />
|
|
<Text
|
|
style={{
|
|
marginLeft: responsiveWidth(2),
|
|
fontSize: 16,
|
|
color: theme.accent,
|
|
}}>
|
|
{ago.fromNow()}
|
|
</Text>
|
|
</View>
|
|
</CardView>
|
|
{parseInt(this.item.canceled_by_hypervisor) === 1 && (
|
|
<CardView style={styles.cardcontainer}>
|
|
<Text
|
|
style={{
|
|
fontSize: 17,
|
|
fontWeight: 'bold',
|
|
color: 'black',
|
|
marginLeft: responsiveWidth(5),
|
|
}}>
|
|
{I18n.t('DEMAND_STATE')}
|
|
</Text>
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
justifyContent: 'flex-start',
|
|
}}>
|
|
<Icons
|
|
name="md-git-branch"
|
|
size={28}
|
|
color={theme.accent}
|
|
style={{marginLeft: 20}}
|
|
/>
|
|
<Text style={styles.simpleuser}>
|
|
{I18n.t('CANCEL_BY_HYPERVISOR')}
|
|
</Text>
|
|
</View>
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
justifyContent: 'flex-start',
|
|
marginTop: -20,
|
|
}}>
|
|
<Icons
|
|
name="md-calendar"
|
|
size={28}
|
|
color={theme.accent}
|
|
style={{
|
|
marginLeft: 20,
|
|
}}
|
|
/>
|
|
<Text style={styles.simpleuser}>{`${I18n.t(
|
|
'CANCEL_ON',
|
|
)} ${cancelDate.format(' Do MMMM YYYY à HH:mm')}`}</Text>
|
|
</View>
|
|
</CardView>
|
|
)}
|
|
{this.state.user ? this.renderBtn() : null}
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = state => ({
|
|
loadingTreatDemand: state.creditTreatDemandReducer.loadingTreatDemand,
|
|
resultTreatDemand: state.creditTreatDemandReducer.resultTreatDemand,
|
|
errorTreatDemand: state.creditTreatDemandReducer.errorTreatDemand,
|
|
|
|
loadingCancelDemand: state.creditCancelDemandReducer.loadingCancelDemand,
|
|
resultCancelDemand: state.creditCancelDemandReducer.resultCancelDemand,
|
|
errorCancelDemand: state.creditCancelDemandReducer.errorCancelDemand,
|
|
});
|
|
|
|
const mapDispatchToProps = dispatch =>
|
|
bindActionCreators(
|
|
{
|
|
treatCreditDemand: treatCreditDemand,
|
|
creditDemandResetReducer: creditDemandResetReducer,
|
|
|
|
treatCancelDemand: treatCancelDemand,
|
|
creditCancelResetReducer: creditCancelResetReducer,
|
|
},
|
|
dispatch,
|
|
);
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(HistoryItemDetails);
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
btnstyle: {},
|
|
|
|
inputAmountText: {
|
|
...Platform.select({
|
|
android: {
|
|
borderBottomColor: Color.borderColor,
|
|
borderBottomWidth: 0.5,
|
|
},
|
|
}),
|
|
},
|
|
simpleuser: {
|
|
marginLeft: responsiveWidth(2),
|
|
fontSize: 16,
|
|
color: '#3E3E3E',
|
|
},
|
|
textbtnstyle: {
|
|
color: 'white',
|
|
fontWeight: 'bold',
|
|
fontSize: 18,
|
|
},
|
|
cardcontainer1: {
|
|
justifyContent: 'space-evenly',
|
|
flex: 2,
|
|
marginRight: 3,
|
|
marginLeft: 3,
|
|
},
|
|
cardcontainer: {
|
|
justifyContent: 'space-evenly',
|
|
|
|
flex: 3,
|
|
margin: 3,
|
|
},
|
|
});
|