unioil-loyalty-rn-app/app/screens/topup/checkout.js

import * as React from 'react';
import { BackHandler, Alert, KeyboardAvoidingView } from 'react-native';
import { connect } from "react-redux";
import { saveUserInfo } from "../../redux/actions/AppUserInfoActions";
import { WebView } from 'react-native-webview';
import DB from '../../components/storage/';
import Elements from '../../components/elements'
import Theme from '../../components/theme.style.js';
import CustomSafeArea from '../../components/safeArea.component';

class CheckOut extends React.Component {
  constructor(props) {
    super(props)
  }

  state = {
    amount: 0,
    data: null,
    session: null,
    processed: false,
    loading: false,
    transactionId: null,
    isShowPrompt: false,
    url: undefined
  }

  componentDidMount() {
    this.init()
    BackHandler.addEventListener('hardwareBackPress', this.onBackPress)
  }

  componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.onBackPress)
  }
  
  init = async () => {
    const SESSION = await DB.session()
    this.setState({ data: this.props.route.params?.data, amount: this.props.route.params?.amount, transactionId: this.props.route.params?.transactionId, session: SESSION })
  }

  onCheckOutResult = async (result) => {
    if(result == "failed") {
      if(!this.state.isShowPrompt) {
        this.setState({ isShowPrompt: true })
        setTimeout(() => {
          Alert.alert(
            'Transaction Failed!',
            '\n' + `Failed to verify transaction. Please try again.`,
            [
              {
              text: "OK",
              onPress: () => {
                this.setState({ isShowPrompt: false })
                this.props.navigation.goBack()
              }},
            ]
          )
        }, 700)
      }
    } else {
      setTimeout(() => {
        Alert.alert(
          'Transaction Failed!',
          '\n' + `Transaction cancelled. Please try again.`,
          [
            {
            text: "OK",
            onPress: () => {
              this.props.navigation.goBack()
            }},
          ]
        )
      }, 700)
    }
  }

  onSuccess = () => {
    if(this.state.data.type == 'add'){
      this.props.route.params?.onBack()
      return;
    }

    this.props.route.params?.successCB?.();
  }
  
  onBackPress = () => {
    return true
  }

  topup = (webViewState) => {
    let url = webViewState.url

    this.setState({ url: url })

    this.urlHandler(url);
  }

  urlHandler = (value) => {
    let url = value || this.state.url;

    if(url.includes('/success') && !this.state.processed){
      this.setState({ processed: true, valid: false, loading: true })
      if(this.state.data.type == 'add') {
        this.onSuccess()
        this.props.navigation.goBack()
        return // check if transaction is only add card or payment topup, if then add card stop the saving to database
      }

      this.props.saveUserInfo({ token: this.state.session.token, card_number: this.state.session.user.card_number }).then(profile => {
        this.setState({ loading: false })
        DB.updateProfile(profile, () => {
          this.onSuccess()
          this.props.navigation.goBack()
        }, () => {})
      })
    }else if(url.includes('/failure')) {
      this.onCheckOutResult('failed')
    }else if(url.includes('/cancel')){
      this.onCheckOutResult('cancelled')
    }else if(url.includes('www.maya.ph')){
      this.onCheckOutResult('failed')
    }
  }

  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} />
          {!this.state.processed ? <KeyboardAvoidingView
            behavior="padding"
            enabled={Platform.OS === "android"}
            style={{flex: 1}}
          >
          <WebView
            originWhitelist={['*']}
            onError={() => {
              Alert.alert(
                'Transaction Failed!',
                '\n' + `Something went wrong, please try again.`,
                [
                  {
                  text: "OK",
                  onPress: () => {
                    this.props.navigation.goBack()
                  }},
                ]
              )
            }}
            source={{ uri: this.state.data ? this.state.data?.redirectUrl : '' }}
            style={{
              backgroundColor: 'transparent',
              width: Theme.screen.w,
              height: Theme.screen.h,
              padding: 15
            }}
            onNavigationStateChange={(webViewState) => this.topup(webViewState)}
          /> 
          </KeyboardAvoidingView>: null}
      </CustomSafeArea>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    userinfo: state.appUserInfoReducer.userinfo,
    app_theme: state.appThemeReducer.theme
  }
}

const mapDispatchToProps = {
  saveUserInfo
}

export default connect(mapStateToProps, mapDispatchToProps)(CheckOut)