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

import * as React from 'react';
import { useState, useEffect } from 'react';
import { SafeAreaView, BackHandler, Alert } from 'react-native';
import { connect } from "react-redux";
import { saveUserInfo } from "../../redux/actions/AppUserInfoActions";
import { WebView } from 'react-native-webview';
import {Container, Toast} from 'native-base';
import DB from '../../components/storage/';
import Elements from '../../components/elements'
import REQUEST from '../../components/api/';
import Theme from '../../components/theme.style.js';
import Tokenization from '../../components/paymaya/tokenization';

class CheckOut extends React.Component {

  constructor(props) {
    super(props)
  }

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

  componentDidMount() {
    this.init()
    BackHandler.addEventListener('hardwareBackPress', this.onBackPress)
    return () => {
      BackHandler.removeEventListener('hardwareBackPress', this.onBackPress)
    }
  }

  componentWillUnmount() {

  }

  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 })
  }

  getTransactionDetails = async (paymentId, onResponse) => {
    let transaction = await Tokenization.getTransactionDetails(paymentId)
    if(transaction) onResponse(transaction)
  }

  onCheckOutResult = async (result, message) => {
    Alert.alert("Transaction " + message, [{text: "OK"}]);

    if(result == "success"){
      this.props.navigation.reset({
        index: 0,
        routes: [{ name: 'Main' }],
      })
    } else {
      if(result == "failed") {
        if(!this.state.isShowPrompt) {
          this.setState({ isShowPrompt: true })
          setTimeout(() => {
            Alert.alert(
              'Transaction Failed!',
              `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!',
            `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;
    }
    Platform.OS == 'ios' ? setTimeout(() => {
      Alert.alert(
        'Transaction Completed!',
        `You have successfully paid ${parseFloat(this.state.amount).toFixed(2)} points from your credit card \n**** **** **** ${this.state.data.card_number}.`,
        [
          {
          text: "OK",
          onPress: () => {
            this.props.navigation.navigate('Main')
          }},
        ]
      )
    }, 300) : null
  }
  
  onBackPress = () => {
    return true
  }

  topup = (webViewState) => {
    let url = webViewState.url
    if(url.includes('/success') && !this.state.processed){
      this.setState({ processed: true, valid: false })
      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.getTransactionDetails(this.state.transactionId, onResponse => {
        if(onResponse.status == "PAYMENT_SUCCESS") {
          this.setState({ loading: true })
          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()
            }, (error) => {})
          })
        } else {
          this.onCheckOutResult('faild','failed')
        }
      })

      // REQUEST('topup', 'post', {
      //   Authorization: this.state.session.token,
      //   card_number: this.state.session.user.card_number
      // }, {}, {
      //   amount: this.state.amount
      // }, (res) => {
      //   this.props.saveUserInfo({ token: this.state.session.token, card_number: this.state.session.user.card_number }).then(res => {
      //     DB.updateProfile(res, () => {
      //       this.onSuccess()
      //       this.props.navigation.goBack()
      //     }, (error) => {})
      //   })
      // }, (error) => {
      //   this.onCheckOutResult('error','failed because ' + error)
      // })
    } else if(url.includes('/failure')) {
      this.onCheckOutResult('failed', 'failed')
    }else if(url.includes('/cancel')){
      this.onCheckOutResult('cancelled', 'cancelled')
    }
  }

  render() {
    return (
      <SafeAreaView style={{flex: 1, backgroundColor: '#fff'}}>
        <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 ? <WebView
            originWhitelist={['*']}
            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)}
          /> : null}
      </SafeAreaView>
    )
  }
}

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

const mapDispatchToProps = {
  saveUserInfo
}

export default connect(mapStateToProps, mapDispatchToProps)(CheckOut)