simba-mobile-cud/app/screens/wallet/regisseur/NumeroQuitance.js

712 lines
25 KiB
JavaScript

import Button from 'apsl-react-native-button';
import isEqual from 'lodash/isEqual';
import isNil from 'lodash/isNil';
import React, {Component} from 'react';
import {Alert, ScrollView, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import * as Animatable from 'react-native-animatable';
import Dialog from "react-native-dialog";
import I18n from 'react-native-i18n';
import {responsiveFontSize, responsiveHeight, responsiveWidth} from 'react-native-responsive-dimensions';
import {ProgressDialog} from 'react-native-simple-dialogs';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import {Fumi} from 'react-native-textinput-effects';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {accent, primary, primaryDark, purpleLight} from '../../../utils/theme.json';
import thousands from 'thousands';
import {Color} from '../../../config/Color';
import {FontWeight, Typography} from '../../../config/typography';
import {store} from "../../../redux/store";
import {IlinkEmitter} from '../../../utils/events';
import {LiteCreditCardInput} from "react-native-credit-card-input";
import {readUser} from '../../../webservice/AuthApi';
import {
envoieUserWalletToCardAction,
envoieUserWalletToCardReset,
getCommissionUserWalletToCardAction,
getCommissionUserWalletToCardReset
} from '../../../webservice/EnvoieUserApi';
import {isNormalInteger} from '../../../utils/UtilsFunction';
import {
getAvisImpositionAction,
getAvisImpositionReset,
getOrdreRecetteAction,
getOrdreRecetteDetailAction,
getOrdreRecetteReset,
getOrdreRecetteWithoutQuitanceAction, getQRCodeDetailAction,
getQRCodeDetailReset,
getQuitanceAction,
searchUserAction,
searchUserReset
} from "../../../webservice/regisseur/WalletRegisseurApi";
import moment from "moment-timezone";
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import ActionButton from "react-native-action-button";
import QRCodeScanner from "react-native-qrcode-scanner";
import {RNCamera} from "react-native-camera";
let theme = require('../../../utils/theme.json');
let route = require('../../../route.json');
class NumeroQuitance extends Component {
static navigatorStyle = {
navBarBackgroundColor: Color.primaryColor,
statusBarColor: Color.primaryDarkColor,
navBarTextColor: '#FFFFFF',
navBarButtonColor: '#FFFFFF'
};
static navigationOptions = () => {
return {
drawerLabel: () => null,
headerTitle: I18n.t('PAYMENT'),
headerTintColor: 'white',
headerStyle: {
backgroundColor: Color.primaryColor,
marginTop: 20,
color: 'white'
},
headerTitleStyle: {
color: "white"
},
title: I18n.t('QUITANCE')
}
};
constructor(props) {
super(props);
this.state = {
montant: null,
password: null,
numeroSerie: '',
numCarte: 0,
codeAgent: '',
expiration_date: '',
creditCardInput: {},
displayCardError: false,
loading: false,
user: null,
triggerClick: false,
displayQRCode: false,
displayFirstStep: !this.props.navigation.getParam("isAgentGeolocated", false),
displaySecondStep: false,
triggerSubmitClick: false,
isSubmitClick: false,
isDataSubmit: false,
displayPhoneField: true,
displayDialogResultSearch: false,
isModalConfirmVisible: false,
isModify: this.props.navigation.getParam("isModify", false),
isAgentGeolocated: this.props.navigation.getParam("isAgentGeolocated", false),
wallet: store.getState().walletDetailReducer.result.response
};
this.props.envoieUserWalletToCardReset();
this.props.getCommissionUserWalletToCardReset();
this.props.getOrdreRecetteReset();
this.props.searchUserReset();
this.props.getQRCodeDetailReset();
readUser().then((user) => {
if (user) {
if (user !== undefined) {
if (this.state.isAgentGeolocated) {
this.props.getOrdreRecetteWithoutQuitanceAction(user.phone, 0);
this.setState({user, codeAgent: user.phone, triggerClick: true});
}
}
}
});
this.willFocus = this.props.navigation.addListener(
'willFocus',
payload => {
this.props.getAvisImpositionReset();
this.props.getOrdreRecetteReset();
this.setState({
displayFirstStep: true,
displaySecondStep: false
});
});
}
componentDidMount() {
readUser().then((user) => {
if (user) {
if (user !== undefined) {
this.setState({user});
}
}
});
}
componentWillReceiveProps(nextProps) {
console.log('PROPS', nextProps);
if (nextProps.resultGetAvisImposition !== null) {
this.setState({
displayFirstStep: !this.state.displayFirstStep,
displaySecondStep: !this.state.displaySecondStep,
});
}
if (nextProps.resultGetQRCodeDetail !== null) {
if (nextProps.resultGetQRCodeDetail.response !== null) {
this.setState({codeAgent: '' + nextProps.resultGetQRCodeDetail.response.phone})
}
}
if (nextProps.resultSearchUserByName !== null) {
this.setState({displayDialogResultSearch: true});
}
if (nextProps.errorGetQRCodeDetail !== null) {
if (typeof nextProps.errorGetQRCodeDetail.data !== 'undefined') {
Alert.alert(
I18n.t("ERROR_LABEL"),
nextProps.errorGetAvisImposition.data.error,
[
{
text: I18n.t("OK"), onPress: () => {
this.props.getAvisImpositionReset();
this.setState({
displayPhoneField: false,
codeAgent: ''
});
}
}
],
{cancelable: false}
);
}
}
if (nextProps.errorGetAvisImposition !== null) {
if (typeof nextProps.errorGetAvisImposition.data !== 'undefined') {
Alert.alert(
I18n.t("ERROR_LABEL"),
nextProps.errorGetAvisImposition.data.error,
[
{
text: I18n.t("BY_NAME"), onPress: () => {
this.props.getAvisImpositionReset();
this.setState({
displayPhoneField: false,
codeAgent: ''
});
}
},
{
text: I18n.t('BY_QR_CODE'), onPress: () => {
this.props.getAvisImpositionReset();
this.setState({
displayQRCode: true,
codeAgent: ''
});
},
style: 'cancel'
}
],
{cancelable: false}
);
}
}
}
updateLangue() {
this.props.navigation.setParams({name: I18n.t('QUITANCE')})
this.forceUpdate()
}
ckeckIfFieldIsOK(champ) {
return (isNil(champ) || isEqual(champ.length, 0));
}
onScanQRCode = (result) => {
this.setState({displayQRCode: false});
this.props.getQRCodeDetailAction(result.data);
console.log("QR Code Scan Result", result);
}
printOptions() {
return (<ActionButton buttonColor={accent}>
<ActionButton.Item buttonColor={purpleLight} title={I18n.t('SAVE_HISTORY')} onPress={() => {
}}>
<Icon name="save" style={styles.actionButtonIcon}/>
</ActionButton.Item>
</ActionButton>);
}
renderDialogQRCodeScanner = () => {
const {resultSearchUserByName, errorGetAvisImposition} = this.props;
console.log("resultGetAvisImposition", resultSearchUserByName);
return (
<Dialog.Container contentStyle={{width: responsiveWidth(80)}} useNativeDriver={true}
visible={this.state.displayQRCode}>
<Dialog.Title>{I18n.t('SCAN')}</Dialog.Title>
<ScrollView style={[styles.blockView, {borderBottomColor: Color.borderColor, maxHeight: 300}]}>
<Text>
{I18n.t('BRING_YOUR_CAMERA_CLOSER_TO_SCAN_QR_CODE')}
</Text>
<QRCodeScanner
onRead={this.onScanQRCode}
flashMode={RNCamera.Constants.FlashMode.off}
/>
</ScrollView>
<Dialog.Button bold={true} label={I18n.t('CLOSE')} onPress={() => {
this.setState({displayQRCode: false});
}}/>
</Dialog.Container>
)
}
renderLoader = () => {
return (
<ProgressDialog
visible={this.props.loadingGetAvisImposition}
title={I18n.t('LOADING')}
message={I18n.t('LOADING_INFO')}
/>
)
}
renderAvisItem = (item) => {
let dateFormat = moment.tz(item.created_at, moment.tz.guess()).format();
dateFormat = moment(dateFormat).fromNow();
return (
<TouchableOpacity onPress={() => {
this.props.navigation.navigate(route.numeroQuitanceDetail, {
id: item.id,
item,
isModify: this.state.isModify,
codeAgent: this.state.codeAgent
});
console.log("click");
}} style={[styles.paymentItem]}>
<View style={styles.content}>
<Text style={styles.title}>{item.id_receipt}</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}> {dateFormat}</Text>
</View>
</View>
</View>
</View>
</TouchableOpacity>
)
}
renderDialogResultSearchUser = () => {
const {resultSearchUserByName, errorGetAvisImposition} = this.props;
console.log("resultGetAvisImposition", resultSearchUserByName);
return (
<Dialog.Container contentStyle={{width: responsiveWidth(80)}} useNativeDriver={true}
visible={this.state.displayDialogResultSearch}>
<Dialog.Title>{I18n.t('USAGER_SEARCH')}</Dialog.Title>
<ScrollView style={[styles.blockView, {borderBottomColor: Color.borderColor, maxHeight: 300}]}>
{
Array.isArray(resultSearchUserByName.response) && (resultSearchUserByName.response.length) > 0 ?
resultSearchUserByName.response.map((item) => (
<TouchableOpacity onPress={() => {
this.props.searchUserReset();
this.setState({
codeAgent: item.phone,
displayDialogResultSearch: false
}, () => {
if (this.state.isModify)
this.props.getQuitanceAction(this.state.codeAgent);
else
this.props.getOrdreRecetteWithoutQuitanceAction(this.state.codeAgent, 0);
});
}} style={[styles.paymentItem]}>
<View style={{
flexDirection: 'column',
}}>
<Text style={styles.title}>{item.lastname}</Text>
<Text
style={styles.description}>{`${item.phone} | ${item.email} | ${item.adresse}`}</Text>
</View>
</TouchableOpacity>
)) :
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text style={Typography.body1}>{I18n.t('NO_USAGER_CORRESPONDING_TO_SEARCH')}</Text>
</View>
}
</ScrollView>
<Dialog.Button bold={true} label={I18n.t('OK')} onPress={() => {
this.props.searchUserReset();
this.setState({
displayDialogResultSearch: false
}, () => {
console.log("STATE", this.state);
});
}}/>
</Dialog.Container>
)
}
rendeGetAvisImpositionResponse = () => {
const {resultGetAvisImposition, errorGetAvisImposition} = this.props;
if (resultGetAvisImposition !== null) {
if (!isNil(resultGetAvisImposition.status === 200)) {
if (resultGetAvisImposition.response.length === 0 && !this.state.isModify) {
Alert.alert(
I18n.t("ERROR_LABLE"),
I18n.t('NO_ORDRE_RECETTE_WITH_QUITANCE'),
[
{
text: I18n.t("OK"), onPress: () => {
this.props.getAvisImpositionReset();
this.props.getOrdreRecetteReset();
}
}
],
{cancelable: false}
)
} else {
if (!this.state.isModify) {
console.log("Condition 2 verifié");
this.props.navigation.push(route.numeroQuitanceDetail, {
items: resultGetAvisImposition.response,
isModify: this.state.isModify,
codeAgent: this.state.codeAgent
});
return null
} else {
return (
Array.isArray(resultGetAvisImposition.response) && (resultGetAvisImposition.response.length) > 0 ?
(<ScrollView style={{flex: 1}}>
{
resultGetAvisImposition.response.map((item) => (
this.renderAvisItem(item)
))
}
</ScrollView>) :
(
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text style={Typography.body1}>{I18n.t('NO_ORDRE_RECETTE')}</Text>
</View>
)
)
}
}
}
}
}
render() {
return (
<>
<ScrollView style={styles.container}>
{this.state.displayDialogResultSearch && this.renderDialogResultSearchUser()}
{this.state.displayQRCode && this.renderDialogQRCodeScanner()}
{this.state.displayFirstStep &&
<>
{/* <Text style={styles.subbigtitle}>{I18n.t('QUITANCE')}</Text> */}
<Animatable.View ref={(comp) => {
this.codeAgentAnim = comp
}}>
<Fumi iconClass={FontAwesomeIcon}
label={this.state.displayPhoneField ? I18n.t('PHONE_NUMBER') : I18n.t('USAGER_NAME')}
iconColor={'#f95a25'}
iconSize={20}
iconName={this.state.displayPhoneField ? "phone" : "user"}
value={this.state.codeAgent}
onChangeText={(codeAgent) => {
this.setState({codeAgent});
}}
style={styles.input}
>
</Fumi>
</Animatable.View>
<Button style={styles.btnvalide}
textStyle={styles.textbtnvalide}
isLoading={this.props.loadingGetAvisImposition || this.props.loadingSearchUserByName || this.props.loadingGetQRCodeDetail}
onPress={() => {
this.setState({displayDialogResultSearch: false});
if (this.ckeckIfFieldIsOK(this.state.codeAgent)) {
this.codeAgentAnim.shake(800);
} else {
if (!this.state.displayPhoneField) {
this.props.searchUserAction(this.state.codeAgent, false);
} else {
if (this.state.isModify)
this.props.getQuitanceAction(this.state.codeAgent);
else
this.props.getOrdreRecetteWithoutQuitanceAction(this.state.codeAgent, 0);
}
}
this.setState({triggerClick: true})
}}>
{I18n.t('NEXT')}</Button>
</>
}
{this.state.triggerClick &&
<>
{
this.props.loadingGetAvisImposition ?
null :
this.rendeGetAvisImpositionResponse()
}
</>
}
</ScrollView>
</>
)
}
}
const maptStateToProps = state => ({
loadingGetAvisImposition: state.getAvisImpositionReducer.loading,
resultGetAvisImposition: state.getAvisImpositionReducer.result,
errorGetAvisImposition: state.getAvisImpositionReducer.error,
loadingEnvoieWalletToCard: state.envoieUserWalletToCardReducer.loading,
resultEnvoieWalletToCard: state.envoieUserWalletToCardReducer.result,
errorEnvoieWalletToCard: state.envoieUserWalletToCardReducer.error,
loadingEnvoieWalletToCardGetCommission: state.envoieUserWalletToCardGetCommissionReducer.loading,
resultEnvoieWalletToCardGetCommission: state.envoieUserWalletToCardGetCommissionReducer.result,
errorEnvoieWalletToCardGetCommission: state.envoieUserWalletToCardGetCommissionReducer.error,
loadingSearchUserByName: state.searchUserReducer.loading,
resultSearchUserByName: state.searchUserReducer.result,
errorSearchUserByName: state.searchUserReducer.error,
loadingGetQRCodeDetail: state.getQRCodeDetailReducer.loading,
resultGetQRCodeDetail: state.getQRCodeDetailReducer.result,
errorGetQRCodeDetail: state.getQRCodeDetailReducer.error,
});
const mapDispatchToProps = dispatch => bindActionCreators({
envoieUserWalletToCardAction,
envoieUserWalletToCardReset,
getCommissionUserWalletToCardAction,
getCommissionUserWalletToCardReset,
getAvisImpositionAction,
getAvisImpositionReset,
getOrdreRecetteWithoutQuitanceAction,
getQuitanceAction,
getOrdreRecetteAction,
getOrdreRecetteDetailAction,
getOrdreRecetteReset,
searchUserAction,
searchUserReset,
getQRCodeDetailReset,
getQRCodeDetailAction
}, dispatch);
export default connect(maptStateToProps, mapDispatchToProps)(NumeroQuitance);
const styles = StyleSheet.create({
container: {
flex: 1,
},
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,
borderWidth: 1
},
emptylist: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
backgroundd_drawer: {
backgroundColor: '#000',
},
listbackground: {},
actionButtonIcon: {
fontSize: 20,
height: 22,
color: 'white',
},
descriptionIcon: {
fontSize: 10,
height: 12,
top: 10
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
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: 20,
color: 'black',
fontWeight: 'bold'
},
content: {
flex: 1,
flexDirection: 'column',
paddingTop: 10,
},
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,
marginTop: 10,
marginBottom: 5,
flexDirection: 'row',
},
time: {
fontWeight: 'bold',
marginRight: 20,
marginBottom: 10,
color: theme.accent,
},
paymentItem: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
width: "100%",
borderBottomColor: '#EEE',
borderBottomWidth: 1
},
iconContent: {
width: 40,
marginRight: 5,
alignItems: "center"
}
});