simba-mobile-cud/app/screens/WebviewScreen.js

421 lines
13 KiB
JavaScript

// import React, {useEffect, useState} from 'react';
// import {
// ActivityIndicator,
// Alert,
// Dimensions,
// Platform,
// ProgressBarAndroid,
// StyleSheet,
// Text,
// View,
// } from 'react-native';
// import WebView from 'react-native-webview';
// import {connect, useDispatch} from 'react-redux';
// import queryString from 'query-string';
// import {ScreenComponent} from "../components/ScreenComponent";
// import {bindActionCreators} from "redux";
// import {getOrdreRecetteWithoutQuitanceAction, saveQuitanceAction} from "../webservice/regisseur/WalletRegisseurApi";
// import I18n from "react-native-i18n";
// import {readUser} from "../webservice/AuthApi";
// const WebviewScreen = ({
// navigation,
// saveQuitanceAction,
// getOrdreRecetteWithoutQuitanceAction,
// saveAvis
// }) => {
// let webviewRef = null;
// const dispatch = useDispatch();
// const [backButtonEnabled, setBackButtonEnabled] = useState(false);
// const [hasRedirected, setHasRedirected] = useState(false);
// const {url, item, id_agent, id_receipt, image, password, payment_method,payment_phone, revenue_orders, deleted_revenue_orders, added_revenue_orders} = navigation.state.params;
// useEffect(() => {
// if(saveAvis.result !== null) {
// Alert.alert(
// I18n.t("SUCCESS"),
// saveAvis.result.response,
// [
// {
// text: I18n.t("OK"), onPress: () => {
// readUser().then((user) => {
// if (user) {
// if (user !== undefined) {
// getOrdreRecetteWithoutQuitanceAction(user.phone, 0)
// }
// }
// });
// navigation.goBack()
// }
// }
// ],
// {cancelable: false}
// );
// }
// if(saveAvis.error !== null) {
// Alert.alert(
// I18n.t("ERROR_TREATMENT_REQUEST"),
// saveAvis.error.data.error,
// [
// {
// text: I18n.t("OK"), onPress: () => {
// navigation.goBack();
// }
// }
// ],
// {cancelable: false}
// );
// }
// }, [saveAvis])
// const renderLoader = () => (
// <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>
// )
// const checkPaymentStatus = (message) => {
// console.log('test de la redirection: ', message);
// //message.JSON.parse(message);
// let status = message['status'];
// let transaction_id = message['transaction_id']
// if(status === "0") {
// navigation.goBack()
// Alert.alert(I18n.t('PAYMENT_ERROR'), I18n.t('PAYMENT_COULD_NOT_MADE'), [{text:"Ok",onPress:()=>{}}])
// }
// else if(status === '1') {
// const params = queryString.parse(message.url);
// let token = '';
// const keys = Object.keys(params);
// keys.forEach(elt => {
// if (elt.includes('transaction_id')) transaction_id = params[elt];
// if (elt.includes('token')) token = params[elt];
// });
// saveQuitanceAction({
// id_agent,
// id_receipt,
// image,
// password,
// payment_method,
// payment_phone,
// revenue_orders,
// deleted_revenue_orders,
// added_revenue_orders,
// payment_transaction_id: transaction_id,
// payment_token: token
// }, true)
// }
// // Marquez la redirection comme déjà effectuée
// setHasRedirected(true);
// // Retournez dans l'application
// navigation.goBack();
// }
// return (
// <ScreenComponent>
// <View style={styles.contain}>
// {
// saveAvis.loading ?
// renderLoader() :
// <WebView
// source={{uri: url}}
// style={styles.webview}
// ref={ref => {
// webviewRef = ref;
// }}
// javaScriptEnabled
// domStorageEnabled
// onMessage={({nativeEvent}) => {
// checkPaymentStatus(nativeEvent.data);
// }}
// renderLoading={() => (
// <ActivityIndicator size="small" />
// )}
// startInLoadingState
// />
// }
// </View>
// </ScreenComponent>
// );
// };
// const mapStateToProps = state => ({
// saveAvis: state.modifyAvisImpositionReducer
// });
// const mapDispatchToProps = dispatch => bindActionCreators({
// saveQuitanceAction,
// getOrdreRecetteWithoutQuitanceAction
// }, dispatch);
// export default connect(mapStateToProps, mapDispatchToProps)(WebviewScreen);
// const styles = StyleSheet.create({
// contain: {
// flex: 1,
// alignItems: 'center',
// justifyContent: 'center',
// paddingLeft: 20,
// paddingRight: 20,
// },
// contentModal: {
// width: '100%',
// borderRadius: 8,
// padding: 8,
// },
// item: {
// flexDirection: 'row',
// justifyContent: 'space-between',
// alignItems: 'center',
// paddingVertical: 20,
// },
// contentAction: {
// flexDirection: 'row',
// justifyContent: 'flex-end',
// paddingTop: 24,
// },
// webview: {
// height: Dimensions.get('window').height,
// width: Dimensions.get('window').width,
// },
// });
import React, {useEffect, useState} from 'react';
import {
ActivityIndicator,
Alert,
Dimensions,
Platform,
ProgressBarAndroid,
StyleSheet,
Text,
View,
} from 'react-native';
import WebView from 'react-native-webview';
import {connect, useDispatch} from 'react-redux';
import queryString from 'query-string';
import {bindActionCreators} from "redux";
import I18n from "react-native-i18n";
import {ScreenComponent} from "../components/ScreenComponent";
import {readUser} from "../webservice/AuthApi";
import {getOrdreRecetteWithoutQuitanceAction, saveQuitanceAction} from "../webservice/regisseur/WalletRegisseurApi";
const WebviewScreen = ({
navigation,
saveQuitanceAction,
getOrdreRecetteWithoutQuitanceAction,
saveAvis
}) => {
let webviewRef = null;
const dispatch = useDispatch();
const [backButtonEnabled, setBackButtonEnabled] = useState(false);
const {url, item, id_agent, id_receipt, image, password, payment_method,payment_phone, revenue_orders, deleted_revenue_orders, added_revenue_orders} = navigation.state.params;
useEffect(() => {
if(saveAvis.result !== null) {
Alert.alert(
I18n.t("SUCCESS"),
saveAvis.result.response,
[
{
text: I18n.t("OK"), onPress: () => {
readUser().then((user) => {
if (user) {
if (user !== undefined) {
getOrdreRecetteWithoutQuitanceAction(user.phone, 0)
}
}
});
navigation.goBack()
}
}
],
{cancelable: false}
);
}
if(saveAvis.error !== null) {
Alert.alert(
I18n.t("ERROR_TREATMENT_REQUEST"),
saveAvis.error.data.error,
[
{
text: I18n.t("OK"), onPress: () => {
navigation.goBack();
}
}
],
{cancelable: false}
);
}
}, [saveAvis])
const renderLoader = () => (
<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>
)
const checkPaymentStatus = webViewState => {
console.log('URL', webViewState.url)
if(webViewState.url.includes('status')) {
const params = queryString.parse(webViewState.url);
let status = '';
const keys = Object.keys(params);
keys.forEach(elt => {
if (elt.includes('status')) status = params[elt];
});
if(status === '0') {
navigation.goBack()
Alert.alert(I18n.t('PAYMENT_ERROR'), I18n.t('PAYMENT_COULD_NOT_MADE'), [{text:"Ok",onPress:()=>{}}])
}
else if(status === '1') {
const params = queryString.parse(webViewState.url);
let transaction_id = '';
let token = null;
const keys = Object.keys(params);
keys.forEach(elt => {
if (elt.includes('transaction_id')) transaction_id = params[elt];
if (elt.includes('token')) token = params[elt];
});
saveQuitanceAction({
id_agent,
id_receipt,
image,
password,
payment_method,
payment_phone,
revenue_orders,
deleted_revenue_orders,
added_revenue_orders,
payment_transaction_id: transaction_id,
payment_token: token
}, true)
}
}
else {
}
};
return (
<ScreenComponent>
<View style={styles.contain}>
{
saveAvis.loading ?
renderLoader() :
<WebView
source={{uri: url}}
style={styles.webview}
ref={ref => {
webviewRef = ref;
}}
javaScriptEnabled
domStorageEnabled
onNavigationStateChange={webViewState => {
checkPaymentStatus(webViewState);
}}z
renderLoading={() => (
<ActivityIndicator size="small" />
)}
startInLoadingState
/>
}
</View>
</ScreenComponent>
);
};
const mapStateToProps = state => ({
saveAvis: state.modifyAvisImpositionReducer
});
const mapDispatchToProps = dispatch => bindActionCreators({
saveQuitanceAction,
getOrdreRecetteWithoutQuitanceAction
}, dispatch);
export default connect(mapStateToProps, mapDispatchToProps)(WebviewScreen);
const styles = StyleSheet.create({
contain: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingLeft: 20,
paddingRight: 20,
},
contentModal: {
width: '100%',
borderRadius: 8,
padding: 8,
},
item: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingVertical: 20,
},
contentAction: {
flexDirection: 'row',
justifyContent: 'flex-end',
paddingTop: 24,
},
webview: {
height: Dimensions.get('window').height,
width: Dimensions.get('window').width,
},
});