1237 lines
50 KiB
JavaScript
1237 lines
50 KiB
JavaScript
import React, {Component} from 'react'
|
|
import {
|
|
StyleSheet,
|
|
View,
|
|
Text,
|
|
Alert,
|
|
Platform,
|
|
ScrollView,
|
|
ProgressBarAndroid,
|
|
TouchableOpacity, Image, ActivityIndicator
|
|
} from 'react-native'
|
|
import CheckBox from '@react-native-community/checkbox';
|
|
import CardView from 'react-native-cardview'
|
|
import Button from 'apsl-react-native-button'
|
|
import {responsiveFontSize, 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 {Color} from '../../../config/Color'
|
|
import isNil from 'lodash/isNil';
|
|
import isEqual from 'lodash/isEqual';
|
|
import _ from "lodash";
|
|
|
|
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} from '../../../webservice/user/NanoCreditApi'
|
|
import {treatDemandGroupAction, treatDemandGroupReset, cancelDemandGroupAction} from '../../../webservice/NanoCreditApi'
|
|
import {IlinkEmitter} from '../../../utils/events';
|
|
import * as Animatable from "react-native-animatable";
|
|
import {Dropdown} from "react-native-material-dropdown-v2";
|
|
import {Fumi, Sae} from "react-native-textinput-effects";
|
|
import FontAwesomeIcon from "react-native-vector-icons/FontAwesome";
|
|
import {
|
|
getOrdreRecetteReset,
|
|
getOrdreRecetteWithoutQuitanceAction,
|
|
modifyAvisImpositionReset,
|
|
modifyQuitanceAction,
|
|
saveQuitanceAction
|
|
} from "../../../webservice/regisseur/WalletRegisseurApi";
|
|
import ImagePicker from "react-native-image-crop-picker";
|
|
import axios from "axios";
|
|
import {getOneReceiptUrl, getOneTaxNoticeUrl, uploadImage} from "../../../webservice/IlinkConstants";
|
|
import {ProgressDialog} from "react-native-simple-dialogs";
|
|
import {store} from "../../../redux/store";
|
|
import WebView from "react-native-webview";
|
|
import {fetchPaymentMethods, fetchPaymentMethodsReset} from "../../../redux/payment/payment.action";
|
|
|
|
class NumeroQuitanceDetail extends Component {
|
|
|
|
static navigatorStyle = {
|
|
navBarBackgroundColor: theme.accentLight,
|
|
statusBarColor: theme.accent,
|
|
navBarTextColor: '#FFFFFF',
|
|
navBarButtonColor: '#FFFFFF',
|
|
};
|
|
|
|
static navigationOptions = ({navigation}) => {
|
|
|
|
return {
|
|
drawerLabel: () => null,
|
|
title: navigation.getParam("isModify", false) ? I18n.t('PAYMENT')
|
|
: I18n.t('PAYMENT'),
|
|
headerTintColor: 'white',
|
|
headerStyle: {
|
|
backgroundColor: Color.primaryColor,
|
|
marginTop: 40,
|
|
color: 'white'
|
|
},
|
|
headerTitleStyle: {
|
|
color: "white"
|
|
},
|
|
}
|
|
};
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.dataToSendTemp = new FormData();
|
|
this.state = {
|
|
displayAmountModifyDialog: false,
|
|
/* statut: sta, */
|
|
user: null,
|
|
networks: [],
|
|
loadingTreat: false,
|
|
loadingCancel: false,
|
|
triggerTreatmentClick: false,
|
|
triggerCancelClick: false,
|
|
color: colorback,
|
|
montant: null,
|
|
image: null,
|
|
isBtnModifyAmountEnabled: false,
|
|
id: this.props.navigation.getParam("id", null),
|
|
item: this.props.navigation.getParam("item", null),
|
|
items: this.props.navigation.getParam("items", null),
|
|
codeAgent: this.props.navigation.getParam("codeAgent", null),
|
|
password: null,
|
|
isModify: this.props.navigation.getParam("isModify", false),
|
|
assign_network: false,
|
|
displayImage: false,
|
|
loadingUpload: false,
|
|
revenue_orders_id: [],
|
|
deleted_revenue_orders: [],
|
|
added_revenue_orders: [],
|
|
added_revenue_orders_items: [],
|
|
displayAddOrdreRecette: false,
|
|
ordreRecetteId: this.props.navigation.getParam("isModify", false) ? this.props.navigation.getParam("item", "-").id_receipt : "",
|
|
// Suppression de ces 2 moyens de paiement Wallet et Cash pour laissser uniquement Tresor pay qui lui vient plutot de l'API
|
|
paymentMethods: [
|
|
// {
|
|
// title: I18n.t('WALLET'),
|
|
// value: 'wallet'
|
|
// },
|
|
// {
|
|
// title: I18n.t('CASH'),
|
|
// value: 'cash'
|
|
// },
|
|
],
|
|
paymentMethod: 'wallet',
|
|
paymentUrl: '',
|
|
displayPaymentModal: false
|
|
};
|
|
this.currentLocale = I18n.locale.includes("fr") ? "fr" : "en-gb";
|
|
this.props.modifyAvisImpositionReset();
|
|
|
|
this.props.fetchPaymentMethods();
|
|
moment.locale(this.currentLocale);
|
|
this.webviewRef = null;
|
|
|
|
if (this.state.isModify)
|
|
this.props.getOrdreRecetteWithoutQuitanceAction(this.state.codeAgent, 1);
|
|
|
|
}
|
|
|
|
createFormData = (photo) => {
|
|
this.dataToSendTemp.append("image", {
|
|
name: photo.path.split('/').pop(),
|
|
type: photo.mime,
|
|
uri:
|
|
Platform.OS === "android" ? photo.path : photo.path.replace("file://", "")
|
|
});
|
|
|
|
};
|
|
|
|
uploadImage = () => {
|
|
axios({
|
|
url: `${uploadImage}`,
|
|
method: 'POST',
|
|
data: this.dataToSendTemp,
|
|
headers: {
|
|
'X-Localization': I18n.currentLocale(),
|
|
'Content-Type': 'multipart/form-data'
|
|
},
|
|
})
|
|
.then(response => {
|
|
console.log(response);
|
|
this.setState({image: response.data.response.filename, loadingUpload: false});
|
|
})
|
|
.catch(error => {
|
|
console.log(error);
|
|
if (error.response)
|
|
console.log(error.response);
|
|
else if (error.request)
|
|
console.log(error.request);
|
|
else
|
|
console.log(error.message);
|
|
|
|
Alert.alert("", I18n.t('TITLE_ERROR_SURVENU'), [{
|
|
text: "Ok",
|
|
onPress: () => {
|
|
}
|
|
}]);
|
|
this.setState({loadingUpload: false});
|
|
});
|
|
};
|
|
|
|
renderDialogAddOrdreRecette = () => {
|
|
|
|
const {resultGetAvisImposition, errorGetAvisImposition} = this.props;
|
|
console.log("resultGetAvisImposition", resultGetAvisImposition);
|
|
return (
|
|
<Dialog.Container contentStyle={{width: responsiveWidth(80)}} useNativeDriver={true}
|
|
visible={this.state.displayAddOrdreRecette}>
|
|
|
|
<Dialog.Title>{I18n.t('ADD_ORDRE_RECETTE')}</Dialog.Title>
|
|
|
|
<ScrollView style={[styles.blockView, {borderBottomColor: Color.borderColor}]}>
|
|
{
|
|
Array.isArray(resultGetAvisImposition.response) && (resultGetAvisImposition.response.length) > 0 ?
|
|
|
|
resultGetAvisImposition.response.map((item) => (
|
|
this.renderOrdreRecetteItem(item)
|
|
)) :
|
|
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
|
|
<Text style={Typography.body1}>{I18n.t('NO_ORDRE_RECETTE')}</Text>
|
|
</View>
|
|
|
|
}
|
|
</ScrollView>
|
|
|
|
<Dialog.Button bold={true} label={I18n.t('OK')} onPress={() => {
|
|
this.setState({
|
|
displayAddOrdreRecette: false,
|
|
item: {
|
|
...this.state.item
|
|
}
|
|
|
|
}, () => {
|
|
console.log("STATE", this.state);
|
|
});
|
|
|
|
}}/>
|
|
</Dialog.Container>
|
|
)
|
|
}
|
|
|
|
renderDialogImage = () => {
|
|
|
|
return (
|
|
<Dialog.Container contentStyle={{width: responsiveWidth(80)}} useNativeDriver={true}
|
|
visible={this.state.displayImage}>
|
|
|
|
<Dialog.Title>{I18n.t('PREVISUALISATION')}</Dialog.Title>
|
|
|
|
<View>
|
|
<View style={{width: 50}}/>
|
|
<View style={{justifyContent: 'center', alignContent: 'center', alignItems: 'center'}}>
|
|
<Image source={{uri: this.state.image.path}} style={{
|
|
width: this.state.image.width, height: this.state.image.height, aspectRatio: 1,
|
|
resizeMode: 'contain'
|
|
}}/>
|
|
</View>
|
|
<View style={{width: 50}}/>
|
|
</View>
|
|
|
|
<Dialog.Button bold={true} label={I18n.t('OK')} onPress={() => {
|
|
this.setState({
|
|
displayImage: false,
|
|
loadingUpload: true
|
|
});
|
|
this.uploadImage();
|
|
|
|
}}/>
|
|
</Dialog.Container>
|
|
)
|
|
}
|
|
|
|
renderImageLoader = () => {
|
|
return (
|
|
<ProgressDialog
|
|
visible={this.state.loadingUpload}
|
|
title={I18n.t('LOADING')}
|
|
message={I18n.t('UPLOAD_PHOTO')}
|
|
/>
|
|
)
|
|
};
|
|
|
|
componentDidMount() {
|
|
|
|
readUser().then((user) => {
|
|
if (user) {
|
|
if (user !== undefined) {
|
|
this.setState({user});
|
|
}
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps, nextContext) {
|
|
|
|
if (nextProps.paymentMethod !== null) {
|
|
if (nextProps.paymentMethod.result !== null) {
|
|
console.log("nextProps.paymentMethod", nextProps.paymentMethod);
|
|
// Suppression de ces 2 moyens de paiement Wallet et Cash pour laissser uniquement Tresor pay qui lui vient plutot de l'API
|
|
const paymentsMethods = [
|
|
// {
|
|
// title: I18n.t('WALLET'),
|
|
// value: 'wallet'
|
|
// },
|
|
// {
|
|
// title: I18n.t('CASH'),
|
|
// value: 'cash'
|
|
// },
|
|
]
|
|
this.setState({
|
|
paymentMethods: [...paymentsMethods, ...nextProps.paymentMethod.result.response.methods]
|
|
})
|
|
}
|
|
}
|
|
}
|
|
|
|
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));
|
|
}
|
|
|
|
checkPaymentStatus = (webViewState) => {
|
|
console.log("URL", webViewState.url);
|
|
if (webViewState.url.includes('webhook')) {
|
|
this.setState({displayPaymentModal: false})
|
|
}
|
|
};
|
|
|
|
refreshScreen = (id) => {
|
|
const auth = store.getState().authKeyReducer;
|
|
const authKey = auth !== null ? `${auth.authKey.token_type} ${auth.authKey.access_token}` : '';
|
|
axios({
|
|
url: `${getOneReceiptUrl}/${id}`,
|
|
method: 'GET',
|
|
headers: {
|
|
'Authorization': authKey,
|
|
'X-Localization': I18n.currentLocale()
|
|
}
|
|
})
|
|
.then(response => {
|
|
console.log("RESPONSE", response);
|
|
this.setState({
|
|
item: response.data.response
|
|
});
|
|
})
|
|
.catch(error => {
|
|
let message = "";
|
|
if (error.response)
|
|
message = error.response
|
|
else if (error.request)
|
|
message = error.request
|
|
else
|
|
message = error.request;
|
|
|
|
Alert.alert(
|
|
I18n.t("ERROR_LABLE"),
|
|
message.data.error,
|
|
[
|
|
{
|
|
text: I18n.t("OK"), onPress: () => {
|
|
}
|
|
}
|
|
],
|
|
{cancelable: false}
|
|
)
|
|
});
|
|
}
|
|
|
|
renderModifyResponse = () => {
|
|
const {errorModifyAvis, resultModifyAvis, resultCancelDemand, errorCancelDemand} = this.props;
|
|
|
|
if (errorModifyAvis !== null) {
|
|
if (typeof errorModifyAvis.data !== 'undefined') {
|
|
Alert.alert(
|
|
I18n.t("ERROR_TREATMENT_REQUEST"),
|
|
errorModifyAvis.data.error,
|
|
[
|
|
{
|
|
text: I18n.t("OK"), onPress: () => {
|
|
this.props.modifyAvisImpositionReset();
|
|
this.props.getOrdreRecetteReset();
|
|
}
|
|
}
|
|
],
|
|
{cancelable: false}
|
|
);
|
|
}
|
|
}
|
|
|
|
if (resultModifyAvis !== null) {
|
|
console.log("resultModifyAvis", resultModifyAvis);
|
|
if (resultModifyAvis.status === 200) {
|
|
if (!this.state.isModify) {
|
|
if (this.state.paymentMethod !== 'wallet') {
|
|
const {password, item, taxes, assign_network, ordreRecetteId, image} = this.state;
|
|
this.props.modifyAvisImpositionReset();
|
|
try{
|
|
this.props.navigation.push('webviewScreen', {
|
|
url: resultModifyAvis.response.payment_url,
|
|
id_agent: this.state.user.agentId,
|
|
id_receipt: ordreRecetteId,
|
|
image,
|
|
item,
|
|
password: password,
|
|
payment_method: this.state.paymentMethod,
|
|
payment_phone: this.state.user.phone,
|
|
revenue_orders: this.state.revenue_orders_id,
|
|
deleted_revenue_orders: this.state.deleted_revenue_orders,
|
|
added_revenue_orders: this.state.added_revenue_orders
|
|
});
|
|
} catch(error) {
|
|
console.log('error', error);
|
|
}
|
|
|
|
|
|
} else {
|
|
Alert.alert(
|
|
I18n.t("SUCCESS"),
|
|
resultModifyAvis.response,
|
|
[
|
|
{
|
|
text: I18n.t("OK"), onPress: () => {
|
|
this.props.modifyAvisImpositionReset();
|
|
this.props.getOrdreRecetteWithoutQuitanceAction(this.state.codeAgent, 1);
|
|
console.log("ITEM STATE", this.state.item);
|
|
//this.refreshScreen(this.state.item.id);
|
|
}
|
|
}
|
|
],
|
|
{cancelable: false}
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
if (resultModifyAvis.status === 201) {
|
|
|
|
readUser().then((user) => {
|
|
if (user) {
|
|
if (user !== undefined) {
|
|
if (this.state.isAgentGeolocated) {
|
|
this.props.getOrdreRecetteWithoutQuitanceAction(user.phone, 0);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
if (!this.state.isModify) {
|
|
if (this.state.paymentMethod === 'wallet') {
|
|
Alert.alert(
|
|
I18n.t("SUCCESS"),
|
|
resultModifyAvis.response,
|
|
[
|
|
{
|
|
text: I18n.t("OK"), onPress: () => {
|
|
this.props.modifyAvisImpositionReset();
|
|
this.props.getOrdreRecetteReset();
|
|
this.setState({
|
|
ordreRecetteId: "",
|
|
password: null,
|
|
items: this.state.items.filter(
|
|
function (e) {
|
|
console.log(e);
|
|
return this.indexOf(e.id) < 0;
|
|
},
|
|
this.state.revenue_orders_id
|
|
),
|
|
revenue_orders_id: [],
|
|
|
|
})
|
|
//this.refreshScreen(this.state.item.id);
|
|
}
|
|
}
|
|
],
|
|
{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>
|
|
)
|
|
}
|
|
|
|
renderModalPayment = () => {
|
|
return (
|
|
|
|
<Dialog.Container useNativeDriver={true} visible={this.state.displayModalHistory}>
|
|
|
|
<Dialog.Title>{I18n.t('PAYMENT')}</Dialog.Title>
|
|
|
|
<View>
|
|
<View style={[styles.blockView, {borderBottomColor: Color.borderColor}]}>
|
|
<View style={styles.containModal}>
|
|
<WebView
|
|
source={{uri: this.state.paymentUrl}}
|
|
style={{flex: 1}}
|
|
ref={ref => {
|
|
this.webviewRef = ref;
|
|
}}
|
|
javaScriptEnabled
|
|
domStorageEnabled
|
|
onNavigationStateChange={webViewState => {
|
|
this.checkPaymentStatus(webViewState);
|
|
}}
|
|
renderLoading={() => (
|
|
<ActivityIndicator size="small"/>
|
|
)}
|
|
startInLoadingState
|
|
/>
|
|
</View>
|
|
</View>
|
|
|
|
</View>
|
|
|
|
<Dialog.Button bold={true} label={I18n.t('OK')} onPress={() => {
|
|
this.setState({
|
|
displayModalHistory: !this.state.displayModalHistory,
|
|
});
|
|
|
|
}}/>
|
|
|
|
</Dialog.Container>
|
|
|
|
);
|
|
}
|
|
|
|
renderOrdreRecetteItem = (item) => {
|
|
let dateFormat = moment.tz(item.created_at, moment.tz.guess()).format();
|
|
dateFormat = moment(dateFormat).fromNow();
|
|
|
|
return (
|
|
<View
|
|
style={styles.checkboxContainer}>
|
|
|
|
<CheckBox
|
|
tintColors={{true: '#69f', false: '#ccc'}}
|
|
onValueChange={value => {
|
|
const {added_revenue_orders, added_revenue_orders_items} = this.state;
|
|
let temp_added_revenue_orders_items = added_revenue_orders_items;
|
|
let temp_added_revenue_orders = added_revenue_orders;
|
|
|
|
if (value) {
|
|
if (!temp_added_revenue_orders.includes(item.id)) {
|
|
temp_added_revenue_orders_items.push(item);
|
|
temp_added_revenue_orders.push(item.id);
|
|
}
|
|
|
|
} else {
|
|
console.log("Valeur fausse");
|
|
temp_added_revenue_orders_items = temp_added_revenue_orders_items.filter(element => element.id !== item.id);
|
|
temp_added_revenue_orders.filter(element => element !== item.id);
|
|
}
|
|
|
|
this.setState({
|
|
added_revenue_orders: temp_added_revenue_orders,
|
|
added_revenue_orders_items: temp_added_revenue_orders_items,
|
|
}, () => {
|
|
console.log("STATE", this.state)
|
|
})
|
|
}}
|
|
value={this.state.added_revenue_orders.includes(item.id)}
|
|
style={styles.checkbox}/>
|
|
|
|
<View style={styles.paymentItem}>
|
|
<View>
|
|
<Text style={styles.title}>{item.id_revenue_order}</Text>
|
|
|
|
<View style={{alignContent: 'flex-start', flex: 1, flexDirection: 'row'}}>
|
|
<Text style={{
|
|
fontWeight: 'bold',
|
|
marginLeft: 20,
|
|
marginBottom: 0,
|
|
}}>
|
|
{`${item.amount}`}
|
|
</Text>
|
|
</View>
|
|
|
|
</View>
|
|
</View>
|
|
|
|
</View>
|
|
)
|
|
}
|
|
|
|
renderDetail = () => {
|
|
|
|
return (
|
|
<ScrollView style={styles.container}>
|
|
|
|
{this.state.paymentMethod === 'cash' && (
|
|
<Animatable.View ref={(comp) => {
|
|
this.ordreRecetteAnim = comp
|
|
}}>
|
|
<Fumi iconClass={FontAwesomeIcon} iconName={'file'}
|
|
label={I18n.t('NUMERO_QUITANCE')}
|
|
iconColor={'#f95a25'}
|
|
iconSize={20}
|
|
value={"" + this.state.ordreRecetteId}
|
|
onChangeText={(ordreRecetteId) => {
|
|
this.setState({ordreRecetteId})
|
|
}}
|
|
style={styles.input}
|
|
>
|
|
</Fumi>
|
|
</Animatable.View>
|
|
)}
|
|
|
|
<View style={{
|
|
alignSelf: 'center',
|
|
marginTop: 5,
|
|
width: responsiveWidth(90)
|
|
}}>
|
|
{!this.state.isModify ?
|
|
this.state.items.map(item => (
|
|
<View
|
|
style={styles.checkboxContainer}>
|
|
|
|
<CheckBox
|
|
tintColors={{true: '#69f', false: '#ccc'}}
|
|
onValueChange={value => {
|
|
let {revenue_orders_id} = this.state;
|
|
if (value)
|
|
revenue_orders_id.push(item.id);
|
|
else {
|
|
if (revenue_orders_id.includes(item.id)) {
|
|
revenue_orders_id = revenue_orders_id.filter((element) => element !== item.id);
|
|
}
|
|
}
|
|
this.setState({revenue_orders_id}, () => {
|
|
console.log("LE STATE", this.state)
|
|
});
|
|
}}
|
|
value={this.state.revenue_orders_id.includes(item.id)}
|
|
style={styles.checkbox}/>
|
|
|
|
<View style={styles.paymentItem}>
|
|
<View style={styles.content}>
|
|
<Text style={styles.title}>{item.id_revenue_order}</Text>
|
|
|
|
<Text
|
|
style={styles.description}>{`${I18n.t('NUMERO_AVIS_IMPOSITION')}: ${item.id_tax_notice}`}</Text>
|
|
|
|
<Text
|
|
style={styles.description}>{`${item.tax_name}`}</Text>
|
|
|
|
<View style={styles.timeContent}>
|
|
<View style={{alignContent: 'flex-start', flex: 1, flexDirection: 'row'}}>
|
|
<Text style={{
|
|
fontWeight: 'bold',
|
|
marginLeft: 20,
|
|
marginBottom: 10,
|
|
}}>
|
|
{`${item.amount}`}
|
|
</Text>
|
|
|
|
<View
|
|
style={{
|
|
alignContent: 'flex-start',
|
|
flexDirection: 'row',
|
|
marginLeft: 20
|
|
}}>
|
|
<Icon name="clock"
|
|
style={[styles.descriptionIcon, {color: Color.accentColor, marginTop: 5}]}/>
|
|
<Text
|
|
style={styles.time}>{moment(moment.tz(item.created_at, moment.tz.guess()).format()).fromNow()}</Text>
|
|
</View>
|
|
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
</View>
|
|
)) :
|
|
this.state.item.revenue_orders.concat(this.state.added_revenue_orders_items).map(item => (
|
|
<View
|
|
style={styles.checkboxContainer}>
|
|
|
|
<CheckBox
|
|
tintColors={{true: '#69f', false: '#ccc'}}
|
|
onValueChange={value => {
|
|
let {revenue_orders_id} = this.state;
|
|
if (value)
|
|
revenue_orders_id.push(item.id);
|
|
else {
|
|
if (revenue_orders_id.includes(item.id)) {
|
|
revenue_orders_id = revenue_orders_id.filter((element) => element !== item.id);
|
|
}
|
|
}
|
|
this.setState({revenue_orders_id}, () => {
|
|
console.log("LE STATE", this.state)
|
|
});
|
|
}}
|
|
value={this.state.revenue_orders_id.includes(item.id)}
|
|
style={styles.checkbox}/>
|
|
|
|
<View style={{width: 25}}>
|
|
<TouchableOpacity
|
|
style={[styles.contain, {
|
|
backgroundColor: Color.accentColor,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
position: "absolute",
|
|
width: 25,
|
|
zIndex: 10,
|
|
top: 50,
|
|
height: 25,
|
|
borderRadius: 11}]}
|
|
onPress={() => {
|
|
Alert.alert(
|
|
I18n.t("TITLE_SUPPRESS_CONFIRM"),
|
|
I18n.t("TEXT_SUPPRESS_CONFIRM_TAXE"),
|
|
[
|
|
{
|
|
text: I18n.t("SUBMIT_LABEL"), onPress: () => {
|
|
console.log("ITEM DELETE", item);
|
|
|
|
console.log("Array concat", this.state.item.revenue_orders.concat(this.state.added_revenue_orders_items));
|
|
|
|
if ((this.state.item.revenue_orders.concat(this.state.added_revenue_orders_items)).length === 1) {
|
|
Alert.alert(
|
|
I18n.t("ERROR_LABEL"),
|
|
I18n.t("YOU_CANT_DELETE_LAST_TAX_NOTICE"),
|
|
[
|
|
{
|
|
text: I18n.t("OK"),
|
|
onPress: () => {
|
|
}
|
|
}
|
|
]
|
|
);
|
|
} else {
|
|
let itemState = this.state.item.revenue_orders;
|
|
let taxes = _.pull(itemState, item);
|
|
const {
|
|
deleted_revenue_orders,
|
|
added_revenue_orders_items
|
|
} = this.state;
|
|
let temp_deleted_revenue_orders = deleted_revenue_orders;
|
|
let temp_added_revenue_orders_items = added_revenue_orders_items;
|
|
|
|
temp_added_revenue_orders_items = temp_added_revenue_orders_items.filter(element => element.id !== item.id);
|
|
if (!temp_deleted_revenue_orders.includes(item.revenue_order_id)) {
|
|
temp_deleted_revenue_orders.push(item.revenue_order_id);
|
|
}
|
|
|
|
itemState.taxes = taxes;
|
|
this.setState({
|
|
item: {...this.state.item, revenue_orders: taxes},
|
|
deleted_revenue_orders: temp_deleted_revenue_orders,
|
|
added_revenue_orders_items: temp_added_revenue_orders_items
|
|
});
|
|
}
|
|
|
|
}
|
|
},
|
|
{
|
|
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 style={styles.paymentItem}>
|
|
<View style={styles.content}>
|
|
<Text style={styles.title}>{item.id_revenue_order}</Text>
|
|
|
|
<Text
|
|
style={styles.description}>{`${I18n.t('NUMERO_AVIS_IMPOSITION')}: ${item.id_tax_notice}`}</Text>
|
|
|
|
<Text
|
|
style={styles.description}>{`${item.tax_name}`}</Text>
|
|
|
|
<View style={styles.timeContent}>
|
|
<View style={{alignContent: 'flex-start', flex: 1, flexDirection: 'row'}}>
|
|
<Text style={{
|
|
fontWeight: 'bold',
|
|
marginLeft: 20,
|
|
marginBottom: 10,
|
|
}}>
|
|
{`${item.amount}`}
|
|
</Text>
|
|
|
|
<View
|
|
style={{
|
|
alignContent: 'flex-start',
|
|
flexDirection: 'row',
|
|
marginLeft: 20
|
|
}}>
|
|
<Icon name="clock"
|
|
style={[styles.descriptionIcon, {color: Color.accentColor, marginTop: 5}]}/>
|
|
<Text
|
|
style={styles.time}>{moment(moment.tz(item.created_at, moment.tz.guess()).format()).fromNow()}</Text>
|
|
</View>
|
|
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
</View>
|
|
))
|
|
|
|
|
|
}
|
|
</View>
|
|
|
|
{
|
|
!this.state.isModify && this.state.paymentMethod === 'cash' && (
|
|
<View style={[styles.contentPicker]}>
|
|
<TouchableOpacity
|
|
style={[styles.contain]}
|
|
onPress={() => {
|
|
ImagePicker.openCamera({
|
|
width: 400,
|
|
height: 281,
|
|
cropping: true,
|
|
useFrontCamera: false
|
|
}).then(image => {
|
|
this.createFormData(image);
|
|
this.setState({image, displayImage: true});
|
|
})
|
|
}}
|
|
activeOpacity={0.9}>
|
|
<View style={[styles.contcontainerCenterentLeft]}>
|
|
<View>
|
|
<Icon name='image' color={Color.blueColor}
|
|
style={[styles.thumb]} size={80}/>
|
|
<View style={[styles.point, {backgroundColor: Color.accentColor}]}>
|
|
<Icon name='camera-image' color={Color.whiteColor} size={20}/>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</TouchableOpacity>
|
|
<Text
|
|
style={[Typography.footnote, FontWeight.semibold, {color: Color.whiteColor}]}>{I18n.t('IMAGE_TAKE')}</Text>
|
|
</View>
|
|
)
|
|
|
|
}
|
|
|
|
<Dropdown
|
|
disabled={this.props.paymentMethod.loading}
|
|
label={I18n.t("PAYMENT_METHOD")}
|
|
style={styles.input}
|
|
labelExtractor={(item, index) => {
|
|
return item.title
|
|
}}
|
|
valueExtractor={(item, index) => {
|
|
return item.value
|
|
}}
|
|
onChangeText={(value, index, data) => {
|
|
this.setState({paymentMethod: value})
|
|
}}
|
|
data={this.state.paymentMethods}
|
|
/>
|
|
|
|
<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: 'row',
|
|
paddingTop: 10
|
|
}}>
|
|
<View style={{
|
|
flex: 1,
|
|
alignItems: 'center'
|
|
}}>
|
|
<Button
|
|
style={{
|
|
borderColor: 'transparent',
|
|
borderRadius: 6,
|
|
marginLeft: 5,
|
|
marginRight: 5,
|
|
backgroundColor: 'green'
|
|
}}
|
|
isLoading={this.props.loadingModifyAvis}
|
|
onPress={() => {
|
|
this.setState({loadingModifyAvis: true});
|
|
this.onSubmitModificationAvisImposition();
|
|
}}
|
|
disabled={true}
|
|
textStyle={styles.textbtnstyle}
|
|
>
|
|
{this.state.isModify ? I18n.t('MODIFY') : I18n.t('PAY')}
|
|
</Button>
|
|
</View>
|
|
|
|
{
|
|
this.state.isModify &&
|
|
<View style={{
|
|
flex: 1,
|
|
alignItems: 'center'
|
|
}}>
|
|
<Button
|
|
style={{
|
|
borderColor: 'transparent',
|
|
borderRadius: 6,
|
|
marginLeft: 5,
|
|
marginRight: 5,
|
|
backgroundColor: Color.primaryColor
|
|
}}
|
|
isLoading={false}
|
|
onPress={() => {
|
|
this.setState({
|
|
displayAddOrdreRecette: true
|
|
});
|
|
}}
|
|
textStyle={styles.textbtnstyle}
|
|
>
|
|
{I18n.t('ADD_ORDRE_RECETTE')}
|
|
</Button>
|
|
</View>
|
|
}
|
|
</View>
|
|
|
|
|
|
</ScrollView>);
|
|
}
|
|
|
|
onSubmitModificationAvisImposition = () => {
|
|
const {password, item, taxes, assign_network, ordreRecetteId, image} = this.state;
|
|
if (this.ckeckIfFieldIsOK(password)) {
|
|
this.passwordAnim.shake(200);
|
|
} else if (this.state.paymentMethod === 'cash' && this.ckeckIfFieldIsOK(ordreRecetteId)) {
|
|
this.ordreRecetteAnim.shake(200);
|
|
} else {
|
|
let dataToSubmit = {}
|
|
|
|
if (this.props.paymentMethod.result !== null) {
|
|
if (!this.props.paymentMethod.result.response.hasWebview) {
|
|
dataToSubmit = {
|
|
payment_method: "wallet",
|
|
id_agent: this.state.user.agentId,
|
|
id_receipt: ordreRecetteId,
|
|
image,
|
|
password: password,
|
|
revenue_orders: this.state.revenue_orders_id,
|
|
deleted_revenue_orders: this.state.deleted_revenue_orders,
|
|
added_revenue_orders: this.state.added_revenue_orders
|
|
}
|
|
} else {
|
|
dataToSubmit = {
|
|
id_agent: this.state.user.agentId,
|
|
id_receipt: ordreRecetteId,
|
|
image,
|
|
password: password,
|
|
payment_method: this.state.paymentMethod,
|
|
payment_phone: this.state.user.phone,
|
|
revenue_orders: this.state.revenue_orders_id,
|
|
deleted_revenue_orders: this.state.deleted_revenue_orders,
|
|
added_revenue_orders: this.state.added_revenue_orders
|
|
}
|
|
}
|
|
}
|
|
|
|
if (this.state.isModify) {
|
|
this.props.modifyQuitanceAction(item.id, dataToSubmit);
|
|
} else
|
|
this.props.saveQuitanceAction(dataToSubmit, true);
|
|
}
|
|
}
|
|
|
|
render() {
|
|
|
|
return (
|
|
<>
|
|
{this.renderModifyResponse()}
|
|
{this.state.displayImage && this.renderDialogImage()}
|
|
{this.state.displayPaymentModal && this.renderModalPayment()}
|
|
{this.state.displayAddOrdreRecette && this.renderDialogAddOrdreRecette()}
|
|
{this.state.loadingUpload && this.renderImageLoader()}
|
|
{
|
|
this.renderDetail()
|
|
}
|
|
</>
|
|
);
|
|
}
|
|
|
|
|
|
}
|
|
|
|
const mapStateToProps = state => ({
|
|
loadingGetUniqueDemand: state.getUniqueDemandsGroupReducer.loading,
|
|
resultGetUniqueDemand: state.getUniqueDemandsGroupReducer.result,
|
|
errorGetUniqueDemand: state.getUniqueDemandsGroupReducer.error,
|
|
|
|
loadingGetAvisImposition: state.getAvisImpositionReducer.loading,
|
|
resultGetAvisImposition: state.getAvisImpositionReducer.result,
|
|
errorGetAvisImposition: state.getAvisImpositionReducer.error,
|
|
|
|
loadingModifyAvis: state.modifyAvisImpositionReducer.loading,
|
|
resultModifyAvis: state.modifyAvisImpositionReducer.result,
|
|
errorModifyAvis: state.modifyAvisImpositionReducer.error,
|
|
|
|
paymentMethod: state.paymentMethodsReducer
|
|
});
|
|
|
|
const mapDispatchToProps = dispatch => bindActionCreators({
|
|
getNanoCreditUniqueDemandsAction: getNanoCreditUniqueDemandsAction,
|
|
getNanoCreditUniqueDemandsReset: getNanoCreditUniqueDemandsReset,
|
|
|
|
treatDemandGroupAction: treatDemandGroupAction,
|
|
cancelDemandGroupAction: cancelDemandGroupAction,
|
|
treatDemandGroupReset: treatDemandGroupReset,
|
|
|
|
treatCreditDemand: treatCreditDemand,
|
|
creditDemandResetReducer: creditDemandResetReducer,
|
|
|
|
treatCancelDemand: treatCancelDemand,
|
|
creditCancelResetReducer: creditCancelResetReducer,
|
|
|
|
saveQuitanceAction,
|
|
modifyAvisImpositionReset,
|
|
getOrdreRecetteWithoutQuitanceAction,
|
|
|
|
getOrdreRecetteReset,
|
|
|
|
modifyQuitanceAction,
|
|
|
|
fetchPaymentMethods,
|
|
fetchPaymentMethodsReset
|
|
|
|
}, dispatch);
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(NumeroQuitanceDetail);
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
btnstyle: {},
|
|
containModal: {
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
inputAmountText: {
|
|
...Platform.select({
|
|
android: {
|
|
borderBottomColor: Color.borderColor,
|
|
borderBottomWidth: 0.5,
|
|
}
|
|
})
|
|
},
|
|
blockView: {
|
|
paddingVertical: 10,
|
|
borderBottomWidth: 0.5,
|
|
},
|
|
simpleuser: {
|
|
marginLeft: responsiveWidth(2),
|
|
fontSize: 16,
|
|
color: '#3E3E3E'
|
|
},
|
|
textbtnstyle: {
|
|
color: "white",
|
|
fontWeight: "bold",
|
|
fontSize: 18
|
|
},
|
|
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"
|
|
},
|
|
contentPicker: {
|
|
padding: 10,
|
|
paddingBottom: 0,
|
|
marginBottom: 0,
|
|
borderRadius: 8,
|
|
flex: 1,
|
|
alignItems: "center"
|
|
},
|
|
contain: {flexDirection: "row"},
|
|
thumb: {
|
|
borderRadius: 30,
|
|
marginRight: 10
|
|
},
|
|
point: {
|
|
width: 25,
|
|
height: 25,
|
|
borderRadius: 11,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
position: "absolute",
|
|
right: 9,
|
|
bottom: 0
|
|
},
|
|
paymentItem: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
width: "100%",
|
|
borderBottomColor: '#EEE',
|
|
borderBottomWidth: 1
|
|
},
|
|
listStyle: {
|
|
backgroundColor: 'white'
|
|
},
|
|
bottomSeparator: {
|
|
width: responsiveWidth(100),
|
|
height: 5,
|
|
justifyContent: 'center',
|
|
alignSelf: 'center',
|
|
backgroundColor: '#EEE',
|
|
},
|
|
description: {
|
|
fontSize: responsiveFontSize(1.8),
|
|
color: '#4f5b62',
|
|
marginLeft: 20,
|
|
|
|
},
|
|
timeContent: {
|
|
justifyContent: 'space-between',
|
|
flex: 1,
|
|
marginBottom: 2,
|
|
flexDirection: 'row',
|
|
},
|
|
time: {
|
|
fontWeight: 'bold',
|
|
marginRight: 20,
|
|
marginBottom: 10,
|
|
color: theme.accent,
|
|
},
|
|
instructions: {
|
|
textAlign: 'center',
|
|
color: '#333333',
|
|
marginBottom: 5,
|
|
},
|
|
dateText: {
|
|
marginTop: 20,
|
|
marginLeft: responsiveWidth(13),
|
|
marginBottom: 20,
|
|
fontSize: 17,
|
|
},
|
|
titlecontent: {
|
|
fontSize: 17,
|
|
marginLeft: responsiveWidth(10),
|
|
color: 'black'
|
|
},
|
|
title: {
|
|
fontSize: 20,
|
|
marginLeft: 20,
|
|
marginTop: 5,
|
|
color: 'black',
|
|
fontWeight: 'bold'
|
|
},
|
|
})
|