simba-mobile-cad4/app/screens/nano-credit/MyNanoCreditGroup.js

594 lines
20 KiB
JavaScript
Raw Permalink Normal View History

2025-01-07 09:47:45 +00:00
import React, {Component} from 'react'
import {StyleSheet, View, Text, Alert, Platform, ScrollView, ProgressBarAndroid, StatusBar} from 'react-native'
import CardView from 'react-native-cardview'
import Button from 'apsl-react-native-button'
import {responsiveHeight, responsiveWidth} from 'react-native-responsive-dimensions'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {updateCreditDemand} from "../../webservice/HistoryRequestApi";
import {readUser} from "../../webservice/AuthApi";
let typesta = 0
let moment = require('moment-timezone')
var colorback = 'white'
import I18n from "react-native-i18n";
import {treatCreditDemand, creditDemandResetReducer} from '../../webservice/CreditTreatDemandApi';
import {treatCancelDemand, creditCancelResetReducer} from '../../webservice/CreditCancelDemandeApi';
import {getAgentNetworksList} from "../../webservice/NetworkApi";
import {Header} from "react-native-elements";
let theme = require('./../../utils/theme.json');
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import Toast from 'react-native-root-toast';
import _ from 'lodash';
import {Color} from '../../config/Color'
const route = require("./../../route.json");
import Dialog from "react-native-dialog";
import {FontWeight, Typography} from '../../config/typography'
import DeviceInfo from 'react-native-device-info'
import {
getNanoCreditUniqueDemandsAction,
getNanoCreditUniqueDemandsReset,
getUserGroupDetailAction,
getUserGroupDetailReset
} from '../../webservice/user/NanoCreditApi'
import {
treatDemandGroupAction,
treatDemandGroupReset,
createGroupAction,
createGroupReset
} from '../../webservice/NanoCreditApi'
import {IlinkEmitter} from '../../utils/events';
import {Appbar, Paragraph, Menu, Divider, Provider} from 'react-native-paper';
require('./../../utils/Translations')
const height = responsiveHeight(100) - 250;
/*
var Fabric = require('react-native-fabric');
var { Crashlytics } = Fabric;*/
class MyNanoCreditGroup extends Component {
static navigatorStyle = {
navBarBackgroundColor: theme.accentLight,
statusBarColor: theme.accent,
navBarTextColor: '#FFFFFF',
navBarButtonColor: '#FFFFFF',
};
static navigationOptions = ({navigation}) => {
return {
drawerLabel: () => null,
title: I18n.t('GROUP') + ' N°' + navigation.getParam("id", "-")
}
};
constructor(props) {
super(props);
/* this.item = this.props.navigation.getParam("item", null);
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,
id: this.props.navigation.getParam("id", null)
}
this.currentLocale = I18n.locale.includes("fr") ? "fr" : "en-gb";
moment.locale(this.currentLocale);
this.props.createGroupReset();
readUser().then((user) => {
console.log("USER", user);
if (user) {
if (user !== undefined) {
this.props.getUserGroupDetailAction(user.user_code);
}
}
})
}
componentDidMount() {
readUser().then((user) => {
if (user) {
if (user !== undefined) {
this.setState({user});
}
}
});
}
displayToast = (message) => {
Toast.show(message, {
duration: Toast.durations.LONG,
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.
}
});
}
onCancelDemand = () => {
this.props.createGroupReset();
this.props.createGroupAction({
id_demande: this.props.resultGetUniqueDemand.response.id,
id_user: this.state.user.id,
code_groupe: this.props.resultGetUniqueDemand.response.code_groupe
});
}
renderAlertErrorDeleteDemand = () => {
const {errorTreatDemand, resultTreatDemand, resultCancelDemand, errorCancelDemand} = this.props;
if (errorTreatDemand !== null) {
if (typeof errorTreatDemand.data !== 'undefined') {
Alert.alert(
I18n.t("ERROR_TREATMENT_DEMAND"),
errorTreatDemand.data.error,
[
{
text: I18n.t("OK"), onPress: () => {
this.props.createGroupReset();
}
}
],
{cancelable: false}
);
}
}
if (resultTreatDemand !== null) {
console.log("resultTreatDemand", resultTreatDemand);
if (resultTreatDemand.status === 200) {
this.displayToast(resultTreatDemand.response);
this.props.navigation.goBack();
//IlinkEmitter.emit('treatNanoGroupDemand');
this.props.createGroupReset();
}
}
}
renderLabelState = (state) => {
if (state === 0)
return I18n.t('NO_TREAT')
else if (state === 1)
return I18n.t('TREAT')
else
return I18n.t('REFUSED')
}
renderBtn() {
const {resultGetUniqueDemand} = this.props
return (
<View style={{
flexDirection: 'row',
paddingTop: 10
}}>
<View style={{
flex: 1,
alignItems: 'center'
}}>
<Button
style={{
borderColor: 'transparent',
borderRadius: 6,
marginLeft: 5,
marginRight: 5,
backgroundColor: 'green'
}}
onPress={() => {
this.setState({
triggerTreatmentClick: true
});
this.props.navigation.push(route.createGroupNanoCredit, {group: resultGetUniqueDemand.response})
}}
textStyle={styles.textbtnstyle}
>
{I18n.t('MODIFY_GROUP')}
</Button>
</View>
<View style={{
flex: 1,
alignItems: 'center'
}}>
<Button
style={{
borderColor: 'transparent',
borderRadius: 6,
marginLeft: 5,
marginRight: 5,
backgroundColor: Color.redColor
}}
isLoading={this.props.loadingTreatDemand}
onPress={() => {
this.setState({
triggerCancelClick: true
});
this.onCancelDemand();
}}
textStyle={styles.textbtnstyle}
>
{I18n.t('DELETE_GROUP')}
</Button>
</View>
</View>)
}
renderLoader = () => {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
{Platform.OS === 'android'
?
(
<>
<ProgressBarAndroid/>
<Text>{I18n.t('LOADING_DOTS')}</Text>
</>
) :
<>
<ActivityIndicator size="large" color={'#ccc'}/>
<Text>{I18n.t('LOADING_DOTS')}</Text>
</>
}
</View>
)
}
renderDetail = () => {
const {resultGetUniqueDemand} = this.props;
let ago = moment.tz(resultGetUniqueDemand.response.date_creation, moment.tz.guess()).format();
ago = moment(ago)
return (<View style={styles.container}>
<CardView
style={styles.cardcontainer1}
>
<Text style={{
fontSize: 17,
fontWeight: 'bold',
color: 'black',
marginLeft: responsiveWidth(5)
}}>
{resultGetUniqueDemand.response.nom}
</Text>
<View style={{
flexDirection: 'row',
justifyContent: 'flex-start'
}}>
<Icon name='account'
size={28}
color={theme.accent}
style={{
marginLeft: 20
}}
/>
<Text
style={styles.simpleuser}>{`${I18n.t('CREATOR')}: ${resultGetUniqueDemand.response.createur}`}</Text>
</View>
<View style={{
flexDirection: 'row',
justifyContent: 'flex-start'
}}>
<Icon name='map-marker'
size={28}
color={theme.accent}
style={{
marginLeft: 20
}}
/>
<Text
style={styles.simpleuser}>{`${I18n.t('COUNTRY')}: ${resultGetUniqueDemand.response.country}`}</Text>
</View>
</CardView>
<CardView
style={styles.cardcontainer}
>
<View style={{
flexDirection: 'row',
justifyContent: 'flex-start'
}}>
<Icon name='account-multiple'
size={28}
color={theme.accent}
style={{
marginLeft: 20
}}
/>
<Text style={styles.simpleuser}>{`SPONSOR 1: ${resultGetUniqueDemand.response.sponsor1}`}</Text>
</View>
<View style={{
flexDirection: 'row',
justifyContent: 'flex-start'
}}>
<Icon name='account-multiple'
size={28}
color={theme.accent}
style={{
marginLeft: 20
}}
/>
<Text style={styles.simpleuser}>{`SPONSOR 2: ${resultGetUniqueDemand.response.sponsor2}`}</Text>
</View>
<View style={{
flexDirection: 'row',
justifyContent: 'flex-start'
}}>
<Icon name='account-multiple'
size={28}
color={theme.accent}
style={{
marginLeft: 20
}}
/>
<Text style={styles.simpleuser}>{`SPONSOR 3: ${resultGetUniqueDemand.response.sponsor3}`}</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'
}}>
<Icon 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'
}}>
<Icon name='code-tags'
size={28}
color={theme.accent}
style={{
marginLeft: 20
}}
/>
<Text style={styles.simpleuser}>{resultGetUniqueDemand.response.code_groupe}</Text>
</View>
<View style={{
flexDirection: 'row',
justifyContent: 'flex-start'
}}>
<Icon name='cash'
size={28}
color={theme.accent}
style={{
marginLeft: 20
}}
/>
<Text
style={styles.simpleuser}>{`${I18n.t('LIMITE_GROUP')}: ${resultGetUniqueDemand.response.limite_credit} ${resultGetUniqueDemand.response.currency_code}`}</Text>
</View>
<View style={{
flexDirection: 'row',
justifyContent: 'flex-start'
}}>
<Icon name='calendar'
size={28}
color={theme.accent}
style={{
marginLeft: 20
}}
/>
<Text
style={styles.simpleuser}>{`${I18n.t('CREATION_DATE')}: ${ago.format(" Do MMMM YYYY à HH:mm")}`}</Text>
</View>
<View style={{
flexDirection: 'row',
alignSelf: 'flex-end',
marginRight: 20,
justifyContent: 'flex-start'
}}>
<Icon name='update'
size={28}
color={theme.accent}
/>
<Text style={{
marginLeft: responsiveWidth(2),
fontSize: 16,
color: theme.accent
}}>{ago.fromNow()}</Text>
</View>
</CardView>
{!_.isNil(this.state.user) &&
_.isEqual(parseInt(this.state.user.id), resultGetUniqueDemand.response.id_createur) &&
this.renderBtn()
}
</View>);
}
renderError = () => {
const {errorGetUniqueDemand} = this.props;
if (errorGetUniqueDemand !== null) {
if (typeof errorGetUniqueDemand.data !== 'undefined') {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text style={Typography.body1}>{errorGetUniqueDemand.data.error}</Text>
</View>
)
} else {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text style={Typography.body1}>{errorGetUniqueDemand}</Text>
</View>
)
}
}
}
render() {
return (
<Provider>
<View style={{flex: 1}}
>
<StatusBar
backgroundColor={theme.primaryDark}
barStyle="light-content"
translucent={false}
/>
<Appbar.Header dark={true} style={{backgroundColor: theme.primary}}>
<Appbar.BackAction
onPress={() => {
this.props.navigation.pop()
}}
/>
<Appbar.Content
title={I18n.t('MY_GROUP')}
/>
</Appbar.Header>
<>
{(this.state.triggerTreatmentClick || this.state.triggerCancelClick) && this.renderAlertErrorDeleteDemand()}
{
this.props.loadingGetUniqueDemand ?
this.renderLoader() :
this.props.resultGetUniqueDemand != null ?
this.renderDetail() :
this.props.errorGetUniqueDemand !== null ?
this.renderError() :
null
}
</>
</View>
</Provider>
)
}
}
const mapStateToProps = state => ({
loadingGetUniqueDemand: state.getUserGroupDetailReducer.loading,
resultGetUniqueDemand: state.getUserGroupDetailReducer.result,
errorGetUniqueDemand: state.getUserGroupDetailReducer.error,
loadingTreatDemand: state.createGroupReducer.loading,
resultTreatDemand: state.createGroupReducer.result,
errorTreatDemand: state.createGroupReducer.error,
});
const mapDispatchToProps = dispatch => bindActionCreators({
getUserGroupDetailAction: getUserGroupDetailAction,
getUserGroupDetailReset: getUserGroupDetailReset,
createGroupAction: createGroupAction,
createGroupReset: createGroupReset,
getNanoCreditUniqueDemandsAction: getNanoCreditUniqueDemandsAction,
getNanoCreditUniqueDemandsReset: getNanoCreditUniqueDemandsReset,
treatDemandGroupAction: treatDemandGroupAction,
treatDemandGroupReset: treatDemandGroupReset,
treatCreditDemand: treatCreditDemand,
creditDemandResetReducer: creditDemandResetReducer,
treatCancelDemand: treatCancelDemand,
creditCancelResetReducer: creditCancelResetReducer
}, dispatch);
export default connect(mapStateToProps, mapDispatchToProps)(MyNanoCreditGroup);
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,
}
})