713 lines
26 KiB
JavaScript
713 lines
26 KiB
JavaScript
import React, {Component} from 'react'
|
|
import {Alert, Platform, ProgressBarAndroid, ScrollView, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
|
|
import Button from 'apsl-react-native-button'
|
|
import {responsiveHeight, responsiveWidth} from 'react-native-responsive-dimensions'
|
|
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
|
|
import {readUser} from "../../../webservice/AuthApi";
|
|
import I18n from "react-native-i18n";
|
|
import {creditDemandResetReducer, treatCreditDemand} from '../../../webservice/CreditTreatDemandApi';
|
|
import {creditCancelResetReducer, treatCancelDemand} from '../../../webservice/CreditCancelDemandeApi';
|
|
import {connect} from 'react-redux';
|
|
import {bindActionCreators} from 'redux';
|
|
import Toast from 'react-native-root-toast';
|
|
import {Color} from '../../../config/Color'
|
|
import isNil from 'lodash/isNil';
|
|
import isEqual from 'lodash/isEqual';
|
|
import _ from "lodash";
|
|
import {getNanoCreditUniqueDemandsAction, getNanoCreditUniqueDemandsReset} from '../../../webservice/user/NanoCreditApi'
|
|
import {cancelDemandGroupAction, treatDemandGroupAction, treatDemandGroupReset} from '../../../webservice/NanoCreditApi'
|
|
import * as Animatable from "react-native-animatable";
|
|
import {Dropdown} from "react-native-material-dropdown-v2";
|
|
import {Fumi} from "react-native-textinput-effects";
|
|
import FontAwesomeIcon from "react-native-vector-icons/FontAwesome";
|
|
import {modifyAvisImpositionReset, modifyvisImpositionAction} from "../../../webservice/regisseur/WalletRegisseurApi";
|
|
|
|
let typesta = 0
|
|
let moment = require('moment-timezone')
|
|
var colorback = 'white'
|
|
|
|
let theme = require('../../../utils/theme.json');
|
|
|
|
const route = require("../../../route.json");
|
|
|
|
class AvisImpositionDetail extends Component {
|
|
|
|
static navigatorStyle = {
|
|
navBarBackgroundColor: theme.accentLight,
|
|
statusBarColor: theme.accent,
|
|
navBarTextColor: '#FFFFFF',
|
|
navBarButtonColor: '#FFFFFF',
|
|
};
|
|
|
|
static navigationOptions = ({navigation}) => {
|
|
return {
|
|
drawerLabel: () => null,
|
|
title: I18n.t('AVIS_IMPOSITION') + ' N°' + navigation.getParam("item", "-").id_tax_notice,
|
|
headerTintColor: 'white',
|
|
headerStyle: {
|
|
backgroundColor: Color.primaryColor,
|
|
marginTop: 20,
|
|
color: 'white'
|
|
},
|
|
headerTitleStyle: {
|
|
color: "white"
|
|
},
|
|
}
|
|
};
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
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),
|
|
item: this.props.navigation.getParam("item", null),
|
|
tabTaxe: [0],
|
|
taxes_selected: [],
|
|
taxes: [],
|
|
isTaxesLoaded: false,
|
|
password: null,
|
|
assign_network: false
|
|
};
|
|
console.log("STATE", this.state);
|
|
this.currentLocale = I18n.locale.includes("fr") ? "fr" : "en-gb";
|
|
this.props.modifyAvisImpositionReset();
|
|
moment.locale(this.currentLocale);
|
|
|
|
}
|
|
|
|
componentDidMount() {
|
|
|
|
if (!this.state.isTaxesLoaded) {
|
|
let taxesTemp = new Array();
|
|
this.state.item.taxes.map((taxes, index) => {
|
|
taxesTemp.push(taxes);
|
|
});
|
|
this.setState({
|
|
taxes: taxesTemp,
|
|
isTaxesLoaded: true
|
|
});
|
|
}
|
|
|
|
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.
|
|
}
|
|
});
|
|
}
|
|
|
|
ckeckIfFieldIsOK(champ) {
|
|
return (isNil(champ) || isEqual(champ.length, 0));
|
|
}
|
|
|
|
renderModifyResponse = () => {
|
|
const {errorModifyAvis, resultModifyAvis, resultCancelDemand, errorCancelDemand} = this.props;
|
|
|
|
if (errorModifyAvis !== null) {
|
|
if (typeof errorModifyAvis.data !== 'undefined') {
|
|
Alert.alert(
|
|
I18n.t("ERROR_TREATMENT_DEMAND"),
|
|
errorModifyAvis.data.error,
|
|
[
|
|
{
|
|
text: I18n.t("OK"), onPress: () => {
|
|
this.props.modifyAvisImpositionReset();
|
|
}
|
|
}
|
|
],
|
|
{cancelable: false}
|
|
);
|
|
}
|
|
}
|
|
|
|
if (resultModifyAvis !== null) {
|
|
console.log("resultModifyAvis", resultModifyAvis);
|
|
if (resultModifyAvis.status === 200) {
|
|
Alert.alert(
|
|
I18n.t("SUCCESS"),
|
|
I18n.t("AVIS_MODIFY_SUCCESS"),
|
|
[
|
|
{
|
|
text: I18n.t("OK"), onPress: () => {
|
|
this.props.navigation.goBack();
|
|
this.props.modifyAvisImpositionReset();
|
|
}
|
|
}
|
|
],
|
|
{cancelable: false}
|
|
);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
renderLabelState = (state) => {
|
|
if (state === 0)
|
|
return I18n.t('NO_TREAT')
|
|
else if (state === 1)
|
|
return I18n.t('TREAT')
|
|
else
|
|
return I18n.t('REFUSED')
|
|
}
|
|
|
|
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>
|
|
)
|
|
}
|
|
|
|
|
|
renderTaxesDropdown = (item, index) => {
|
|
return (
|
|
<>
|
|
<Animatable.View key={index}>
|
|
<View
|
|
style={{
|
|
flexDirection: "row",
|
|
paddingRight: 20,
|
|
paddingLeft: 20,
|
|
}}>
|
|
|
|
<View style={{
|
|
width: responsiveWidth(87),
|
|
borderRadius: 10,
|
|
alignSelf: "center",
|
|
backgroundColor: 'white'
|
|
}}>
|
|
<Dropdown
|
|
label={I18n.t('TAXES')}
|
|
disabled={true}
|
|
data={[]}
|
|
useNativeDriver={true}
|
|
valueExtractor={(value) => {
|
|
return value
|
|
}}
|
|
value={item.name}
|
|
labelExtractor={(value) => {
|
|
return value.name
|
|
}}
|
|
/>
|
|
</View>
|
|
{
|
|
item.required_tax === 0 && this.state.item.is_company === 0 &&
|
|
<View>
|
|
<TouchableOpacity
|
|
style={[styles.contain], {
|
|
backgroundColor: Color.accentColor,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
position: "absolute",
|
|
width: 25,
|
|
bottom: 0,
|
|
zIndex: 10,
|
|
left: -10,
|
|
height: 25,
|
|
borderRadius: 11}}
|
|
onPress={() => {
|
|
Alert.alert(
|
|
I18n.t("TITLE_SUPPRESS_CONFIRM"),
|
|
I18n.t("TEXT_SUPPRESS_CONFIRM_TAXE"),
|
|
[
|
|
{
|
|
text: I18n.t("SUBMIT_LABEL"), onPress: () => {
|
|
let itemState = this.state.item;
|
|
let taxes = _.pull(itemState.taxes, item);
|
|
let taxesState = _.pull(this.state.taxes, item);
|
|
|
|
itemState.taxes = taxes;
|
|
this.setState({
|
|
item: itemState,
|
|
taxes: taxesState
|
|
});
|
|
}
|
|
},
|
|
{
|
|
text: I18n.t("CANCEL_LABEL")
|
|
}
|
|
],
|
|
{cancelable: false}
|
|
);
|
|
|
|
}}
|
|
activeOpacity={0.9}>
|
|
<View>
|
|
<View>
|
|
<Icon name={'minus'} color={Color.whiteColor} size={20}/>
|
|
</View>
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
}
|
|
|
|
</View>
|
|
</Animatable.View>
|
|
{
|
|
item.measurement_unit !== "forfait" &&
|
|
<>
|
|
<Animatable.View>
|
|
<Fumi iconClass={FontAwesomeIcon}
|
|
iconName={'check-circle'}
|
|
label={item.labels[0]}
|
|
iconColor={'#f95a25'}
|
|
keyboardType="decimal-pad"
|
|
iconSize={20}
|
|
style={styles.input}
|
|
value={item.tax_units_count}
|
|
onChangeText={(value) => {
|
|
let tax_units_count = this.state.taxes;
|
|
tax_units_count[index].tax_units_count = value;
|
|
this.setState({taxes: tax_units_count});
|
|
}}
|
|
>
|
|
</Fumi>
|
|
</Animatable.View>
|
|
|
|
{
|
|
item.labels.length === 2 &&
|
|
<Animatable.View>
|
|
<Fumi iconClass={FontAwesomeIcon}
|
|
iconName={'check'}
|
|
label={isNil(item.labels[1]) ? I18n.t('UNIT_PER_TAXE_UNIT_COUNT') : item.labels[1]}
|
|
iconColor={'#f95a25'}
|
|
keyboardType="decimal-pad"
|
|
iconSize={20}
|
|
value={item.units_per_tax_unit_count}
|
|
style={styles.input}
|
|
onChangeText={(value) => {
|
|
let units_per_tax_unit_count = this.state.taxes;
|
|
units_per_tax_unit_count[index].units_per_tax_unit_count = value;
|
|
this.setState({taxes: units_per_tax_unit_count});
|
|
}}
|
|
>
|
|
</Fumi>
|
|
</Animatable.View>
|
|
}
|
|
</>
|
|
|
|
}
|
|
|
|
{
|
|
item.billing_period === 'jour' &&
|
|
(<Animatable.View>
|
|
<Fumi iconClass={FontAwesomeIcon} iconName={'calendar'}
|
|
label={I18n.t('NUMBER_OF_DAYS')}
|
|
iconColor={'#f95a25'}
|
|
value={'' + item.number_of_days}
|
|
iconSize={20}
|
|
keyboardType='numeric'
|
|
onChangeText={(value) => {
|
|
let units_per_tax_unit_count = this.state.taxes;
|
|
units_per_tax_unit_count[index].number_of_days = value;
|
|
this.setState({taxes: units_per_tax_unit_count});
|
|
}}
|
|
style={styles.input}
|
|
>
|
|
</Fumi>
|
|
</Animatable.View>)
|
|
}
|
|
</>
|
|
)
|
|
}
|
|
|
|
renderDetail = () => {
|
|
|
|
const {resultGetUniqueDemand} = this.props;
|
|
const {item} = this.state;
|
|
let created_at = moment.tz(item.created_at, moment.tz.guess()).format();
|
|
let updated_at = moment.tz(item.updated_at, moment.tz.guess()).format();
|
|
created_at = moment(created_at);
|
|
updated_at = moment(updated_at);
|
|
|
|
return (<ScrollView style={styles.container}>
|
|
<View
|
|
style={styles.cardcontainer}
|
|
>
|
|
<Text style={{
|
|
fontSize: 17,
|
|
fontWeight: 'bold',
|
|
color: 'black',
|
|
marginLeft: responsiveWidth(5)
|
|
}}>
|
|
{I18n.t('AGENT_INFORMATION')}
|
|
</Text>
|
|
<View style={{
|
|
flexDirection: 'row',
|
|
justifyContent: 'flex-start'
|
|
}}>
|
|
<Icon name='account'
|
|
size={28}
|
|
color={theme.accent}
|
|
style={{
|
|
marginLeft: 20
|
|
}}
|
|
/>
|
|
<Text style={[styles.simpleuser,styles.multiLine]}>{`${item.lastname} | ${item.email}`}</Text>
|
|
</View>
|
|
<View style={{
|
|
flexDirection: 'row',
|
|
justifyContent: 'flex-start'
|
|
}}>
|
|
<Icon name='email'
|
|
size={28}
|
|
color={theme.accent}
|
|
style={{
|
|
marginLeft: 20
|
|
}}
|
|
/>
|
|
<Text style={[styles.simpleuser,styles.multiLine]}>{`${item.email} | ${item.phone}`}</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,styles.multiLine]}>{`${item.adresse}`}</Text>
|
|
</View>
|
|
|
|
{/* <View style={{
|
|
flexDirection: 'row',
|
|
justifyContent: 'flex-start'
|
|
}}>
|
|
<Icon name='code-braces'
|
|
size={28}
|
|
color={theme.accent}
|
|
style={{
|
|
marginLeft: 20
|
|
}}
|
|
/>
|
|
<Text
|
|
style={styles.simpleuser}>{`${I18n.t('CODE_PARRAIN')}: ${item.code_parrain}`}</Text>
|
|
</View>*/}
|
|
|
|
</View>
|
|
|
|
<View
|
|
style={styles.cardcontainer}
|
|
>
|
|
<Text style={{
|
|
fontSize: 17,
|
|
fontWeight: 'bold',
|
|
color: 'black',
|
|
marginLeft: responsiveWidth(5)
|
|
}}>
|
|
{I18n.t('TAXES')}
|
|
</Text>
|
|
<View style={{
|
|
flexDirection: 'row',
|
|
justifyContent: 'flex-start'
|
|
}}>
|
|
<Icon name="cash"
|
|
size={28}
|
|
color={theme.accent}
|
|
style={{
|
|
marginLeft: 20
|
|
}}
|
|
/>
|
|
<Text
|
|
style={[styles.simpleuser,styles.multiLine]}>{`${this.state.item.amount}`}</Text>
|
|
</View>
|
|
|
|
<View style={{
|
|
flexDirection: 'row',
|
|
justifyContent: 'flex-start'
|
|
}}>
|
|
<Icon name='calendar'
|
|
size={28}
|
|
color={theme.accent}
|
|
style={{
|
|
marginLeft: 20
|
|
}}
|
|
/>
|
|
<Text
|
|
style={[styles.simpleuser,styles.multiLine]}>{`${I18n.t('CREATION_DATE')}: ${created_at.format(" Do MMMM YYYY à HH:mm")}`}</Text>
|
|
</View>
|
|
|
|
<View style={{
|
|
flexDirection: 'row',
|
|
justifyContent: 'flex-start'
|
|
}}>
|
|
<Icon name='calendar'
|
|
size={28}
|
|
color={theme.accent}
|
|
style={{
|
|
marginLeft: 20
|
|
}}
|
|
/>
|
|
<Text
|
|
style={[styles.simpleuser,styles.multiLine]}>{`${I18n.t('UPDATE_DATE')}: ${updated_at.format(" Do MMMM YYYY à HH:mm")}`}</Text>
|
|
</View>
|
|
|
|
<View style={{
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
justifyContent: 'flex-start'
|
|
}}>
|
|
|
|
</View>
|
|
</View>
|
|
{
|
|
item.taxes.map((element, index) => (
|
|
this.renderTaxesDropdown(element, index)
|
|
))
|
|
}
|
|
<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>
|
|
|
|
<View style={{
|
|
flexDirection: 'column',
|
|
paddingTop: 10,
|
|
paddingHorizontal:12
|
|
}}>
|
|
<View style={{
|
|
flex: 1,
|
|
alignItems: 'center'
|
|
}}>
|
|
<Button
|
|
style={{
|
|
borderColor: 'transparent',
|
|
borderRadius: 6,
|
|
marginLeft: 5,
|
|
marginRight: 5,
|
|
backgroundColor: 'green'
|
|
}}
|
|
isLoading={this.props.loadingModifyAvis}
|
|
onPress={() => {
|
|
this.onSubmitModificationAvisImposition()
|
|
}}
|
|
disabled={true}
|
|
textStyle={styles.textbtnstyle}
|
|
>
|
|
{I18n.t('SAVE')}
|
|
</Button>
|
|
</View>
|
|
|
|
{
|
|
this.state.item.is_company === 0 &&
|
|
<View style={{
|
|
flex: 1,
|
|
alignItems: 'center'
|
|
}}>
|
|
<Button
|
|
style={{
|
|
borderColor: 'transparent',
|
|
borderRadius: 6,
|
|
marginLeft: 5,
|
|
marginRight: 5,
|
|
backgroundColor: Color.primaryColor
|
|
}}
|
|
isLoading={false}
|
|
onPress={() => {
|
|
this.props.navigation.push(route.addNetwork, {
|
|
item: this.state.item
|
|
})
|
|
}}
|
|
textStyle={[styles.textbtnstyle, styles.textbtnPadding]}
|
|
>
|
|
{I18n.t('ADD_NETWORK')}
|
|
</Button>
|
|
</View>
|
|
}
|
|
|
|
|
|
</View>
|
|
|
|
|
|
</ScrollView>);
|
|
}
|
|
|
|
onSubmitModificationAvisImposition = () => {
|
|
const {password, item, taxes, assign_network} = this.state;
|
|
if (this.ckeckIfFieldIsOK(password)) {
|
|
this.passwordAnim.shake(200);
|
|
} else {
|
|
let dataToSubmit = {
|
|
id_agent: parseInt(this.state.user.agentId),
|
|
password: password,
|
|
id_tax_notice: item.id,
|
|
taxes: taxes,
|
|
assign_network: false
|
|
}
|
|
this.props.modifyvisImpositionAction(dataToSubmit);
|
|
}
|
|
}
|
|
|
|
render() {
|
|
|
|
return (
|
|
<>
|
|
{this.renderModifyResponse()}
|
|
{(this.state.triggerTreatmentClick || this.state.triggerCancelClick) && this.renderModifyResponse()}
|
|
{
|
|
this.renderDetail()
|
|
}
|
|
</>
|
|
);
|
|
}
|
|
|
|
|
|
}
|
|
|
|
const mapStateToProps = state => ({
|
|
loadingGetUniqueDemand: state.getUniqueDemandsGroupReducer.loading,
|
|
resultGetUniqueDemand: state.getUniqueDemandsGroupReducer.result,
|
|
errorGetUniqueDemand: state.getUniqueDemandsGroupReducer.error,
|
|
|
|
loadingModifyAvis: state.modifyAvisImpositionReducer.loading,
|
|
resultModifyAvis: state.modifyAvisImpositionReducer.result,
|
|
errorModifyAvis: state.modifyAvisImpositionReducer.error,
|
|
});
|
|
|
|
const mapDispatchToProps = dispatch => bindActionCreators({
|
|
getNanoCreditUniqueDemandsAction: getNanoCreditUniqueDemandsAction,
|
|
getNanoCreditUniqueDemandsReset: getNanoCreditUniqueDemandsReset,
|
|
|
|
treatDemandGroupAction: treatDemandGroupAction,
|
|
cancelDemandGroupAction: cancelDemandGroupAction,
|
|
treatDemandGroupReset: treatDemandGroupReset,
|
|
|
|
treatCreditDemand: treatCreditDemand,
|
|
creditDemandResetReducer: creditDemandResetReducer,
|
|
|
|
treatCancelDemand: treatCancelDemand,
|
|
creditCancelResetReducer: creditCancelResetReducer,
|
|
|
|
modifyvisImpositionAction,
|
|
modifyAvisImpositionReset
|
|
}, dispatch);
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(AvisImpositionDetail);
|
|
|
|
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'
|
|
},
|
|
multiLine: {
|
|
flexShrink: 1,
|
|
flexWrap: 'wrap',
|
|
},
|
|
textbtnstyle: {
|
|
color: "white",
|
|
fontWeight: "bold",
|
|
fontSize: 18
|
|
},
|
|
textbtnPadding: {
|
|
paddingHorizontal: 4,
|
|
textAlign: 'center',
|
|
},
|
|
input: {
|
|
height: 60,
|
|
marginTop: responsiveHeight(2),
|
|
marginLeft: responsiveWidth(5),
|
|
marginRight: responsiveWidth(5),
|
|
borderRadius: 5,
|
|
borderWidth: 1
|
|
},
|
|
cardcontainer1: {
|
|
justifyContent: 'space-evenly',
|
|
flex: 2,
|
|
marginRight: 3,
|
|
marginLeft: 3,
|
|
|
|
},
|
|
cardcontainer: {
|
|
margin: 3,
|
|
marginTop: 25
|
|
},
|
|
checkboxContainer: {
|
|
flexDirection: "row",
|
|
marginBottom: 20,
|
|
},
|
|
checkbox: {
|
|
alignSelf: "center",
|
|
color: "white"
|
|
},
|
|
})
|