ilink-world/screens/nano-credit/CasserEpargneUser.js

706 lines
28 KiB
JavaScript

import isEqual from 'lodash/isEqual';
import isNil from 'lodash/isNil';
import React, {Component} from 'react';
import {
ActivityIndicator,
Alert,
ProgressBarAndroid,
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View
} from 'react-native';
import I18n from 'react-native-i18n';
import {responsiveHeight, responsiveWidth} from 'react-native-responsive-dimensions';
import {ProgressDialog} from 'react-native-simple-dialogs';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import omit from 'lodash/omit';
import {Color} from '../../config/Color';
import {Typography} from '../../config/typography';
import {IlinkEmitter} from '../../utils/events';
import {readUser} from '../../webservice/AuthApi';
import {getEpargneInProgressAction, getEpargneInProgressReset} from '../../webservice/NanoCreditApi';
import {casserEpargneUserAction, casserEpargneUserReset} from '../../webservice/user/NanoCreditApi';
import {cutString, cutStringWithoutDot, nanoCreditHistoryLabel} from "../../utils/UtilsFunction";
import * as Utils from "../../utils/DeviceUtils";
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import thousands from "thousands";
import Dialog from "react-native-dialog";
let theme = require('../../utils/theme.json');
let route = require('../../route.json');
class CasserEpargneUser extends Component {
constructor(props) {
super(props);
this.state = {
password: null,
idEpargne: null,
codeGroup: null,
loading: false,
user: null,
triggerSubmitClick: false,
isSubmitClick: false,
isDataSubmit: false,
isModalConfirmVisible: false,
isGroupToModify: false,
displayModalHistory: false,
historyItemDetail: null,
isDataHasLoaded: false,
displayPasswordModal: false,
wallet: this.props.navigation.state.params.wallet,
};
this.props.getEpargneInProgressReset();
}
static navigatorStyle = {
navBarBackgroundColor: Color.primaryColor,
statusBarColor: Color.primaryDarkColor,
navBarTextColor: '#FFFFFF',
navBarButtonColor: '#FFFFFF'
};
static navigationOptions = () => {
return {
drawerLabel: () => null,
headerTitle: I18n.t('BREAK_EPARGNE'),
headerTintColor: 'white',
headerStyle: {
backgroundColor: Color.primaryColor,
marginTop: 0,
color: 'white'
},
headerTitleStyle: {
color: "white"
},
title: I18n.t('BREAK_EPARGNE')
}
};
componentDidMount() {
readUser().then((user) => {
if (user) {
if (user !== undefined) {
this.setState({user});
this.props.getEpargneInProgressAction(user.id);
}
}
});
}
ckeckIfFieldIsOK(champ) {
return (isNil(champ) || isEqual(champ.length, 0));
}
renderBreakEpargneRespons = () => {
const {result, error} = this.props;
if (error !== null) {
if (typeof error.data !== 'undefined') {
Alert.alert(
I18n.t("ERROR_LABLE"),
error.data.error,
[
{
text: I18n.t("OK"), onPress: () => {
this.props.casserEpargneUserReset();
}
}
],
{cancelable: false}
)
}
}
if (result !== null) {
if (result.response !== null) {
Alert.alert(
I18n.t("BREAK_EPARGNE_DONE"),
result.response,
[
{
text: I18n.t("OK"), onPress: () => {
this.props.casserEpargneUserReset();
IlinkEmitter.emit("refreshWallet");
this.props.navigation.pop();
}
}
],
{cancelable: false}
)
}
}
}
updateLangue() {
this.props.navigation.setParams({name: I18n.t('REFUND_NANO_CREDIT')})
this.forceUpdate()
}
ckeckIfFieldIsOK(champ) {
return (isNil(champ) || isEqual(champ.length, 0));
}
onSubmitCasserEpargne = () => {
const {idEpargne, password} = this.state;
if (this.ckeckIfFieldIsOK(idEpargne))
this.idEpargneAnim.shake(800);
else if (this.ckeckIfFieldIsOK(password))
this.passwordAnim.shake(800);
else {
this.props.casserEpargneUserAction({
id_user: this.state.user.id,
id_epargne: this.state.idEpargne,
password: this.state.password
}, 0);
}
this.setState({
isDataSubmit: true
});
}
renderLoader = () => {
return (
<ProgressDialog
visible={this.props.loading || this.props.loadingGetCommission || this.props.loadingNanoCreditHistory}
title={I18n.t('LOADING')}
message={I18n.t('LOADING_INFO')}
/>
)
}
renderModalHistoryDetail = () => {
return (
<Dialog.Container useNativeDriver={true} visible={this.state.displayModalHistory}>
<Dialog.Title>{I18n.t('DEMAND_DETAIL')}</Dialog.Title>
{
<ScrollView>
<View style={[styles.blockView, {borderBottomColor: Color.borderColor}]}>
<View style={{flexDirection: 'row', marginTop: 10}}>
<View style={{flex: 1}}>
<Text style={[styles.body2]}>{I18n.t('ID_SAVINGS')}</Text>
</View>
<View style={{flex: 1, alignItems: 'flex-end'}}>
<Text
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.id_epargne}</Text>
</View>
</View>
<View style={{flexDirection: 'row', marginTop: 10}}>
<View style={{flex: 1}}>
<Text style={[styles.body2]}>{I18n.t('STATUS')}</Text>
</View>
<View style={{flex: 1, alignItems: 'flex-end'}}>
<Text
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.etat}</Text>
</View>
</View>
<View style={{flexDirection: 'row', marginTop: 10}}>
<View style={{flex: 1}}>
<Text style={[styles.body2]}>{I18n.t('DEMAND_DURATION_IN_MONTH')}</Text>
</View>
<View style={{flex: 1, alignItems: 'flex-end'}}>
<Text
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.duree_mois}</Text>
</View>
</View>
<View style={{flexDirection: 'row', marginTop: 10}}>
<View style={{flex: 1}}>
<Text style={[styles.body2]}>Type</Text>
</View>
<View style={{flex: 1, alignItems: 'flex-end'}}>
<Text
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.type}</Text>
</View>
</View>
<View style={{flexDirection: 'row', marginTop: 10}}>
<View style={{flex: 1}}>
<Text tyle={[Typography.body2]}>{I18n.t('AMOUNT')}</Text>
</View>
<View style={{flex: 1, alignItems: 'flex-end'}}>
<Text
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.montant + ' ' + this.state.wallet.currency_code}</Text>
</View>
</View>
<View style={{flexDirection: 'row', marginTop: 10}}>
<View style={{flex: 1}}>
<Text tyle={[Typography.body2]}>{I18n.t('AMOUNT_WITHDRAWAL')}</Text>
</View>
<View style={{flex: 1, alignItems: 'flex-end'}}>
<Text
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.montant_retire + ' ' + this.state.wallet.currency_code}</Text>
</View>
</View>
<View style={{flexDirection: 'row', marginTop: 10}}>
<View style={{flex: 1}}>
<Text tyle={[Typography.body2]}>{I18n.t('TAXES')}</Text>
</View>
<View style={{flex: 1, alignItems: 'flex-end'}}>
<Text
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.taxe + ' ' + this.state.wallet.currency_code}</Text>
</View>
</View>
<View style={{flexDirection: 'row', marginTop: 10}}>
<View style={{flex: 1}}>
<Text tyle={[Typography.body2]}>{I18n.t('INTERET')}</Text>
</View>
<View style={{flex: 1, alignItems: 'flex-end'}}>
<Text
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.interet + ' ' + this.state.wallet.currency_code}</Text>
</View>
</View>
<View style={{flexDirection: 'row', marginTop: 10}}>
<View style={{flex: 1}}>
<Text style={[styles.body2]}>{I18n.t('CREATION_DATE')}</Text>
</View>
<View style={{flex: 1, alignItems: 'flex-end'}}>
<Text
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_creation}</Text>
</View>
</View>
<View style={{flexDirection: 'row', marginTop: 10}}>
<View style={{flex: 1}}>
<Text tyle={[Typography.body2]}>{I18n.t('FINAL_DATE')}</Text>
</View>
<View style={{flex: 1, alignItems: 'flex-end'}}>
<Text
style={[Typography.caption1, Color.grayColor]}>{isEqual(this.state.historyItemDetail.type, 'SIMPLE') ? I18n.t('NON_APPLICABLE') : this.state.historyItemDetail.date_fin}</Text>
</View>
</View>
<View style={{flexDirection: 'row', marginTop: 10}}>
<View style={{flex: 1}}>
<Text tyle={[Typography.body2]}>{I18n.t('CASSATION_DATE')}</Text>
</View>
<View style={{flex: 1, alignItems: 'flex-end'}}>
<Text
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_cassation}</Text>
</View>
</View>
</View>
</ScrollView>
}
<Dialog.Button bold={true} label={I18n.t('CANCEL_LABEL')} onPress={() => {
this.setState({
displayModalHistory: !this.state.displayModalHistory,
});
}}/>
<Dialog.Button bold={true} label={I18n.t('SUBMIT_LABEL')} onPress={() => {
this.setState({
displayPasswordModal: !this.state.displayPasswordModal,
});
}}/>
</Dialog.Container>
);
}
renderPasswordDialog = () => {
return (
<Dialog.Container useNativeDriver={true} visible={this.state.displayPasswordModal}>
<Dialog.Title>{I18n.t('PASSWORD')}</Dialog.Title>
<Dialog.Input placeholder={I18n.t('PLEASE_ENTER_THE_PASSWORD')}
style={{borderBottomWidth: 1, borderBottomColor: Color.borderColor}}
showSoftInputOnFocus={true}
onChangeText={(password) => {
this.setState({password})
}}
secureTextEntry={true}
value={this.state.password}
onSubmitEditing={() => {
this.setState({
displayPasswordModal: false,
displayModalHistory: false,
isDataSubmit: true
});
this.props.refundCreditDemandUserAction({
id_user: this.state.user.id,
id_epargne: this.state.historyItemDetail.id_epargne,
password: this.state.password
});
}}/>
<Dialog.Button label={I18n.t('CANCEL_LABEL')} onPress={() => {
this.setState({displayPasswordModal: !this.state.displayPasswordModal});
}}/>
<Dialog.Button label={I18n.t('SUBMIT_LABEL')} onPress={() => {
this.setState({
displayPasswordModal: false,
displayModalHistory: false,
isDataSubmit: true
})
this.props.casserEpargneUserAction({
id_user: this.state.user.id,
id_epargne: this.state.historyItemDetail.id_epargne,
password: this.state.password
});
}}/>
</Dialog.Container>
);
}
renderNanoCreditItem = (item, index) => {
return (
<TouchableOpacity onPress={() => {
this.setState({displayModalHistory: true, historyItemDetail: item})
}} style={[styles.contentService, {borderBottomColor: Color.primaryColor}]}>
{
Object.keys(omit(item, ['id', 'id_epargne', 'montant_retire', 'type', 'date_demande', 'date_fin', 'date_remboursement_prevu', 'date_validation', 'date_cassation', 'date_remboursement', 'id_demande', 'duree_mois', 'taxe', 'date_fin', 'date_cassation', 'id_user', 'id_network', 'user', 'partiellement_rembourse', 'user_phone', 'interet', 'date_remboursement_prevu', 'date_remboursement', 'id_wallet_agent', 'retrait_cash', 'codeParrain', 'agent', 'montant_rembourse', ''])).map((element, i) => (
<View style={{alignItems: 'center'}} key={i}>
<Text style={[Typography.overline, Color.grayColor], {marginTop: 4}}>
{
isEqual(element, 'montant') ?
` ${item[element].length > 8 ? cutString(thousands(item[element], ' '), 6) : thousands(item[element], ' ')} ${this.state.wallet.currency_code}`
: isEqual(element, 'date_creation') ?
cutStringWithoutDot(item[element], 16)
: item[element]
}
</Text>
</View>
))
}
</TouchableOpacity>
);
}
renderNanoCreditList = () => {
const {errorNanoCreditHistory, resultNanoCreditHistory} = this.props;
if (errorNanoCreditHistory !== null) {
if (typeof errorNanoCreditHistory.data !== 'undefined') {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text style={Typography.body1}>{errorNanoCreditHistory.data.error}</Text>
</View>
)
} else {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text style={Typography.body1}>{errorNanoCreditHistory}</Text>
</View>
)
}
}
if (resultNanoCreditHistory !== null) {
if (resultNanoCreditHistory.response !== null) {
return (
Array.isArray(resultNanoCreditHistory.response) && (resultNanoCreditHistory.response.length) > 0 ?
(
<>
<View style={[styles.contentService, {borderBottomColor: Color.primaryColor}]}>
{
nanoCreditHistoryLabel().map((item, index) => (
<View style={{alignItems: 'center'}} key={index}>
<Icon name={item.icon} size={24} color={Color.primaryColor}/>
<Text style={[Typography.overline, Color.grayColor], {marginTop: 4}}>
{I18n.t(item.label)}
</Text>
</View>
))
}
</View>
{
resultNanoCreditHistory.response.map((item, index) => (
this.renderNanoCreditItem(item, index)
))
}
</>
) :
(
<View style={{flex: 1, justifyContent: 'center', alignItems: 'flex-start'}}>
<Text style={Typography.body1}>{I18n.t('NO_SAVINGS')}</Text>
</View>
)
)
}
}
}
renderNanoCreditHistory = () => {
return (
<View style={{backgroundColor: Color.containerBackgroundColor, flex: 1}}>
{
this.props.loadingNanoCreditHistory ?
(
<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>
) : this.renderNanoCreditList()
}
</View>
);
}
render() {
return (
<>
{(this.props.loading || this.props.loadingGetCommission || this.props.loadingNanoCreditHistory) && this.renderLoader()}
{this.state.isDataSubmit && this.renderBreakEpargneRespons()}
{this.state.displayModalHistory && this.renderModalHistoryDetail()}
{this.state.displayPasswordModal && this.renderPasswordDialog()}
<ScrollView style={styles.container}>
<View style={[styles.checkDefault, {borderBottomColor: Color.borderColor}]}>
<Text
style={[Typography.title3, Typography.semibold]}>
{I18n.t('SAVINGS_LIST')}
</Text>
</View>
{
this.renderNanoCreditHistory()
}
{/*<Text style={styles.subbigtitle}>{I18n.t('DEMAND_INFO')}</Text>
<Animatable.View ref={(comp) => { idEpargneAnim = comp }}>
<Fumi iconClass={FontAwesomeIcon} iconName={'id-card'}
label={I18n.t('ID_EPARGNE')}
iconColor={'#f95a25'}
iconSize={20}
value={this.state.idEpargne}
onChangeText={(idEpargne) => {
this.setState({ idEpargne })
}}
style={styles.input}
>
</Fumi>
</Animatable.View>
<Animatable.View ref={(comp) => { this.passwordAnim = comp }}>
<Fumi iconClass={FontAwesomeIcon} iconName={'lock'}
label={I18n.t('PASSWORD')}
iconColor={'#f95a25'}
iconSize={20}
secureTextEntry={true}
value={this.state.password}
onChangeText={(password) => {
this.setState({ password })
}}
style={styles.input}
>
</Fumi>
</Animatable.View>
<Button style={styles.btnvalide}
textStyle={styles.textbtnvalide}
onPress={() => { this.onSubmitCasserEpargne(); }}>
{this.state.isGroupToModify ? I18n.t('MODIFY') : I18n.t('SUBMIT_LABEL')}</Button>*/}
</ScrollView>
</>
)
}
}
const maptStateToProps = state => ({
loading: state.casserEpargneUserReducer.loading,
result: state.casserEpargneUserReducer.result,
error: state.casserEpargneUserReducer.error,
errorNanoCreditHistory: state.getEpargneInProgressReducer.error,
resultNanoCreditHistory: state.getEpargneInProgressReducer.result,
loadingNanoCreditHistory: state.getEpargneInProgressReducer.loading,
});
const mapDispatchToProps = dispatch => bindActionCreators({
casserEpargneUserAction,
casserEpargneUserReset,
getEpargneInProgressAction,
getEpargneInProgressReset
}, dispatch);
export default connect(maptStateToProps, mapDispatchToProps)(CasserEpargneUser);
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: Color.containerBackgroundColor,
paddingHorizontal: 20
},
textbtnvalide: {
color: 'white',
fontWeight: 'bold'
},
bigtitle: {
color: 'white',
fontSize: 20,
flex: 1,
fontWeight: 'bold',
textAlign: 'center',
margin: 20,
},
blockView: {
paddingVertical: 10,
borderBottomWidth: 1
},
subbigtitle: {
color: 'white',
fontSize: 17,
textAlign: 'center',
margin: 5,
},
btnvalide: {
marginTop: 20,
marginLeft: 20,
marginRight: 20,
borderColor: 'transparent',
backgroundColor: Color.accentLightColor,
height: 52
},
btnSubmit: {
marginTop: 20,
borderColor: 'transparent',
backgroundColor: Color.accentLightColor,
height: 52,
width: "30%",
marginLeft: 20,
marginRight: 20,
},
input: {
height: 60,
marginTop: responsiveHeight(2),
marginLeft: responsiveWidth(5),
marginRight: responsiveWidth(5),
borderRadius: 5,
},
circlePoint: {
width: 50,
height: 50,
borderRadius: 25,
marginRight: 5,
alignItems: 'center',
justifyContent: 'center',
},
checkDefault: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
borderBottomWidth: 1,
paddingVertical: 10,
marginTop: 5
},
transactionContainer: {
flexDirection: 'row',
paddingTop: 10,
},
containerTouch: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
shadowColor: Color.borderColor,
borderColor: Color.borderColor,
borderWidth: 0.5,
shadowOffset: {width: 1.5, height: 1.5},
shadowOpacity: 1.0,
elevation: 5,
borderRadius: 10,
backgroundColor: Color.cardBackgroundColor
},
contain: {
flexDirection: 'row',
justifyContent: 'space-between',
},
imageBanner: {
marginTop: 15,
marginLeft: 5,
width: Utils.scaleWithPixel(30),
height: Utils.scaleWithPixel(30)
},
content: {
height: Utils.scaleWithPixel(65),
paddingHorizontal: 10,
justifyContent: 'space-between',
alignItems: 'flex-start',
flex: 1,
},
contentTitle: {
paddingTop: 12,
},
contentService: {
paddingVertical: 10,
borderBottomWidth: 0.5,
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-between',
},
containField: {
padding: 10,
marginBottom: 20,
borderWidth: 0.5,
shadowOffset: {width: 1.5, height: 1.5},
shadowOpacity: 1.0,
elevation: 5,
flexDirection: "row",
height: 140,
borderRadius: 10
},
paymentItem: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
borderBottomWidth: 1,
paddingVertical: 5,
width: responsiveWidth(100),
marginBottom: 15
},
iconContent: {
width: 60,
marginRight: 10,
alignItems: "center"
},
contentLeftItem: {
flex: 1,
paddingTop: 40,
paddingLeft: 10,
paddingRight: 10,
alignItems: "center"
},
});