unioil-loyalty-rn-app/app/screens/payatpump/verificationWebview.js

93 lines
2.7 KiB
JavaScript

import * as React from 'react';
import { Alert, BackHandler, SafeAreaView } from 'react-native';
import { connect } from "react-redux";
import { WebView } from 'react-native-webview';
import { Container } from 'native-base';
import Elements from '../../components/elements'
import Theme from '../../components/theme.style.js';
import CustomSafeArea from '../../components/safeArea.component';
class VerificationWebview extends React.Component {
constructor(props) {
super(props);
}
state = {
loading: false,
onBack: false,
verificationUrl: this.props.route.params?.verificationUrl,
referenceNumber: this.props.route.params?.referenceNumber
}
componentDidMount() {
console.log('on component mount')
BackHandler.addEventListener("hardwareBackPress", this.onBackPress)
}
componentWillUnmount() {
console.log('on component dismount')
BackHandler.removeEventListener("hardwareBackPress", this.onBackPress)
}
onBackPress = () => {
console.log('on back pressed')
return true
}
onStateChange = (webViewState) => {
let url = webViewState.url;
if(url.includes('https://unioil.com/success') && !webViewState.loading) {
if(this.state.onBack) return;
this.setState({ onBack: true });
this.props.route.params?.onSuccessAuthentication(this.state.referenceNumber, () => {
this.setState({ loading: false });
})
return this.props.navigation.pop(2)
}
if(url.includes('https://unioil.com/failure') && !webViewState.loading) {
if(this.state.onBack) return;
this.setState({ onBack: true });
Alert.alert("Information", '\n' + "Error in adding card.");
return this.props.navigation.goBack();
}
}
render() {
return (
<CustomSafeArea>
<Elements.loaderView
title="Validating"
message="Please wait..."
isDarkMode={this.props.app_theme?.theme.dark}
backgroundColor={this.props.app_theme?.theme.colors.border}
color={this.props.app_theme?.theme.colors.text}
visible={this.state.loading} />
<WebView
originWhitelist={['*']}
source={{ uri: this.state.verificationUrl }}
style={{
backgroundColor: 'transparent',
width: Theme.screen.w,
height: Theme.screen.h,
padding: 15
}}
onNavigationStateChange={(webViewState) => this.onStateChange(webViewState)}
/>
</CustomSafeArea>
)
}
}
const mapStateToProps = (state) => {
return {
userinfo: state.appUserInfoReducer.userinfo,
app_theme: state.appThemeReducer.theme
}
}
export default connect(mapStateToProps, null)(VerificationWebview)