644 lines
24 KiB
JavaScript
644 lines
24 KiB
JavaScript
import * as React from 'react';
|
|
import { connect } from "react-redux";
|
|
import { Divider } from 'react-native-elements'
|
|
import {
|
|
TouchableOpacity,
|
|
View,
|
|
Text,
|
|
Alert,
|
|
ScrollView,
|
|
Image,
|
|
Modal,
|
|
StyleSheet,
|
|
BackHandler
|
|
} from 'react-native';
|
|
import { returnIcon } from '../../utils/card.js';
|
|
import { saveUserInfo } from "../../redux/actions/AppUserInfoActions";
|
|
import NetInfoCommunity from '@react-native-community/netinfo';
|
|
import CustomHeader from '../../components/header.js';
|
|
import NetInfo from "../../components/netstatus";
|
|
import Assets from '../../components/assets.manager.js';
|
|
import Theme from '../../components/theme.style.js';
|
|
import REQUEST_POST_PAY from '../../components/api/postpayapi';
|
|
import DB from '../../components/storage';
|
|
import Elements from '../../components/elements';
|
|
import CustomSafeArea from '../../components/safeArea.component';
|
|
import axios from 'axios';
|
|
|
|
class PayatpumpStationTransactionDetails extends React.Component {
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
|
|
this.cancelToken1 = axios.CancelToken.source()
|
|
}
|
|
|
|
state = {
|
|
loading: false,
|
|
session: null,
|
|
card_number: null,
|
|
selectedPoints: null,
|
|
selectedPaymentCard: null,
|
|
claimId: null,
|
|
data: [],
|
|
storeName: null,
|
|
showModal: false,
|
|
showRetryModal: false,
|
|
initiated: false,
|
|
totalPrice: 3000,
|
|
message: "Your Payment is being processed.",
|
|
title: "Payment Processing",
|
|
res: null,
|
|
res2: null
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.init();
|
|
|
|
this.netListener = NetInfoCommunity.addEventListener((response => {
|
|
if(!response.isConnected && !this.state.res) {
|
|
this.cancelToken1.cancel();
|
|
this.cancelToken1 = axios.CancelToken.source();
|
|
Elements.nointernet2();
|
|
} else if(!response.isConnected && this.state.res) {
|
|
if(this.timer) clearTimeout(this.timer);
|
|
this.setState({
|
|
message: "Your Payment is being processed.",
|
|
title: "Payment Processing",
|
|
loading: false
|
|
})
|
|
Elements.nointernet2();
|
|
} else if(!response.isConnected && this.state.res && this.state.res3) {
|
|
if(this.timer) clearTimeout(this.timer);
|
|
this.setState({
|
|
message: "Please wait while we process your transaction details.",
|
|
title: "Payment Details",
|
|
loading: false
|
|
})
|
|
Elements.nointernet2();
|
|
}
|
|
}))
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
this.netListener();
|
|
}
|
|
|
|
init = async () => {
|
|
let session = await DB.session()
|
|
let user_profile = await DB.profile()
|
|
let selectedCard = await DB.get("pumpPaymentCards");
|
|
this.setState({
|
|
card_number: user_profile.data.card_number,
|
|
session: session,
|
|
claimId: this.props.route.params.response.claimId,
|
|
data: this.props.route.params.response.saleItems,
|
|
storeName: this.props.route.params.storeName,
|
|
selectedPumpNumber: this.props.route.params.selectedPump,
|
|
selectedPaymentCard: JSON.parse(selectedCard)
|
|
})
|
|
}
|
|
|
|
onBackHandler = (type) => {
|
|
if (type === "disable") return BackHandler.addEventListener("hardwareBackPress", this.onBack);
|
|
else if (type === "enable") return BackHandler.removeEventListener("hardwareBackPress", this.onBack)
|
|
}
|
|
|
|
onBack = () => {
|
|
return true
|
|
}
|
|
|
|
onSelectedPointsAmount = (point_amount) => {
|
|
this.setState({ selectedPoints: point_amount })
|
|
}
|
|
|
|
onSelectedPaymentCard = (payment_card) => {
|
|
this.setState({ selectedPaymentCard: payment_card })
|
|
}
|
|
|
|
getTransactionDetails = async (claimId, fundingProviderName, userPaymentSourceId, onSuccess, onError) => {
|
|
if(this.state.initiated) {
|
|
onError({customError: "Unable to get status of the transaction.", buttons: [{
|
|
text: 'Ok',
|
|
onPress: () => {
|
|
this.props.navigation.reset({
|
|
index: 0,
|
|
routes: [{name: 'Main'}]
|
|
})
|
|
}
|
|
}]})
|
|
return;
|
|
}
|
|
|
|
this.setState({ initiated: true })
|
|
|
|
let cardNumber = this.props.userinfo.data.card_number;
|
|
|
|
if (claimId == null) {
|
|
Alert.alert("Information", '\n' + "No transaction id exist.")
|
|
return
|
|
}
|
|
|
|
let body = {
|
|
claim_id: claimId,
|
|
partner_trans_id: "93931",
|
|
walletRequests: [{
|
|
fundingProviderName: fundingProviderName,
|
|
fundingPayload: {
|
|
userPaymentSourceId: userPaymentSourceId
|
|
}
|
|
}, {
|
|
fundingProviderName: "loyalty_points",
|
|
fundingPayload: {
|
|
"paymentToken": cardNumber,
|
|
"points": 0
|
|
}
|
|
}]
|
|
}
|
|
REQUEST_POST_PAY('postpay', 'post', {}, {}, body, async (res) => {
|
|
if (res.status) {
|
|
// this.setState({res: res})
|
|
// this.recheckStatus(res, onSuccess, onError)
|
|
} else {
|
|
onError(res)
|
|
}
|
|
}, (error) => {
|
|
onError(error)
|
|
}, this.cancelToken1)
|
|
}
|
|
|
|
recheckStatus = async (res, onSuccess, onError) => {
|
|
this.setState({ title: "Payment Details", message: "Please wait while we process your transaction details." })
|
|
const USER_PROFILE = await DB.profile();
|
|
|
|
REQUEST_POST_PAY('getTransactionStatusDetails', "get", {
|
|
token: USER_PROFILE.data.auth_p97,
|
|
language: 'en-US'
|
|
}, { transactionID: res.response.transaction_id }, {}, res2 => {
|
|
|
|
if(res2.response && res2.response.status === "Finished") {
|
|
this.setState({ res2: res2 })
|
|
return this.requestTransactionDetails(res, res2, onSuccess, onError);
|
|
}
|
|
else if(res2.response && res2.response.status === "Timeout") {
|
|
return onError({
|
|
customError: "Transaction timeout. Please try again.",
|
|
buttons: [{
|
|
text: 'Ok',
|
|
onPress: () => {
|
|
this.props.navigation.reset({
|
|
index: 0,
|
|
routes: [{name: 'Main'}]
|
|
})
|
|
}
|
|
}]
|
|
})
|
|
}
|
|
else if(res2.response && res2.response.status === "Cancelled") {
|
|
return onError({
|
|
customError: "Cancelled transaction.",
|
|
buttons: [{
|
|
text: 'Ok',
|
|
onPress: () => {
|
|
this.props.navigation.reset({
|
|
index: 0,
|
|
routes: [{name: 'Main'}]
|
|
})
|
|
}
|
|
}]
|
|
})
|
|
}
|
|
else if(res2.response && res2.response.status === "ConnectivityIssue") {
|
|
return onError({
|
|
customError: "Connection timeout. Please try again.",
|
|
buttons: [{
|
|
text: 'Ok',
|
|
onPress: () => {
|
|
this.props.navigation.reset({
|
|
index: 0,
|
|
routes: [{name: 'Main'}]
|
|
})
|
|
}
|
|
}]
|
|
})
|
|
}
|
|
else if(res2.response && res2.response.status === "VelocityTrigger") {
|
|
return onError({
|
|
customError: "Unable to proceed with the transaction. Please contact our hotline.",
|
|
buttons: [{
|
|
text: 'Ok',
|
|
onPress: () => {
|
|
this.props.navigation.reset({
|
|
index: 0,
|
|
routes: [{name: 'Main'}]
|
|
})
|
|
}
|
|
}]
|
|
})
|
|
}
|
|
else if(res2.response && res2.response.status === "Cancelled") {
|
|
return onError({
|
|
customError: "Cancelled transaction.",
|
|
buttons: [{
|
|
text: 'Ok',
|
|
onPress: () => {
|
|
this.props.navigation.reset({
|
|
index: 0,
|
|
routes: [{name: 'Main'}]
|
|
})
|
|
}
|
|
}]
|
|
})
|
|
}
|
|
else if(res2.response && res2.response.status === "Failed") {
|
|
return onError({
|
|
customError: "Failed to initiate transaction. Please try again.",
|
|
buttons: [{
|
|
text: 'Ok',
|
|
onPress: () => {
|
|
this.props.navigation.reset({
|
|
index: 0,
|
|
routes: [{name: 'Main'}]
|
|
})
|
|
}
|
|
}]
|
|
})
|
|
}
|
|
else if(res2.response && res2.response.status === "AuthFailed") {
|
|
return onError({
|
|
customError: "Failed to initiate transaction. Please try again.",
|
|
buttons: [{
|
|
text: 'Ok',
|
|
onPress: () => {
|
|
this.props.navigation.reset({
|
|
index: 0,
|
|
routes: [{name: 'Main'}]
|
|
})
|
|
}
|
|
}]
|
|
})
|
|
}
|
|
else if(res2.response && res2.response.status === "FinalizeFailed") {
|
|
return onError({
|
|
customError: "Unable to process your payment at this time. Please pay in-store.",
|
|
buttons: [{
|
|
text: 'Ok',
|
|
onPress: () => {
|
|
this.props.navigation.reset({
|
|
index: 0,
|
|
routes: [{name: 'Main'}]
|
|
})
|
|
}
|
|
}]
|
|
})
|
|
}
|
|
else if(res2.response && res2.response.status === "ProcessingError") {
|
|
return onError({
|
|
customError: "Processing failed. Please pay in-store.",
|
|
buttons: [{
|
|
text: 'Ok',
|
|
onPress: () => {
|
|
this.props.navigation.reset({
|
|
index: 0,
|
|
routes: [{name: 'Main'}]
|
|
})
|
|
}
|
|
}]
|
|
})
|
|
}
|
|
else {
|
|
this.timer = setTimeout(() => {
|
|
this.recheckStatus(res, onSuccess, onError)
|
|
}, 5000)
|
|
}
|
|
}, (error) => {
|
|
onError(error);
|
|
})
|
|
}
|
|
|
|
requestTransactionDetails = async (res, res2, onSuccess, onError) => {
|
|
const USER_PROFILE = await DB.profile();
|
|
|
|
REQUEST_POST_PAY("getTransactionDetails/" + res2.response.transactionId, "get", {
|
|
token: USER_PROFILE.data.auth_p97,
|
|
language: 'en-US'
|
|
}, {}, {}, res3 => {
|
|
if (res3.success) {
|
|
onSuccess({ res: res, onSuccess: res2, newDetails: res3 })
|
|
} else {
|
|
setTimeout(() => {
|
|
this.requestTransactionDetails(res, res2, onSuccess, onError);
|
|
}, 5000);
|
|
}
|
|
}, err => {
|
|
onError(err);
|
|
})
|
|
}
|
|
|
|
submitPayment = () => {
|
|
this.onBackHandler("disable");
|
|
this.setState({ showModal: false })
|
|
|
|
NetInfo.netstatus((response) => {
|
|
if(!response) {
|
|
Elements.nointernet2();
|
|
this.onBackHandler("enable");
|
|
}
|
|
else {
|
|
this.setState({ loading: true })
|
|
this.getTransactionDetails(this.state.claimId, "p97token", this.state.selectedPaymentCard.userPaymentSourceId, this.onSuccess, this.onError)
|
|
}
|
|
})
|
|
}
|
|
|
|
onSuccess = (onSuccess) => {
|
|
if (onSuccess.res.success) {
|
|
let payment = { totalPayment: this.state.data[0]?.originalAmount.amount, cardPayment: this.state.data[0].originalAmount.amount, transactionId: onSuccess.res.response.transaction_id, storeName: this.state.storeName };
|
|
|
|
this.props.saveUserInfo({ token: this.state.session.token, card_number: this.state.session.user.card_number }).then(profile => {
|
|
DB.updateProfile(profile, () => {
|
|
this.onBackHandler("enable");
|
|
this.setState({ loading: false });
|
|
this.props.navigation.navigate('PayatpumpPaymentSuccess', { transactionData: payment, transactionDetails: onSuccess.onSuccess, newDetails: onSuccess.newDetails });
|
|
}, () => { })
|
|
})
|
|
} else {
|
|
this.onError();
|
|
}
|
|
}
|
|
|
|
onError = (error) => {
|
|
// this.setState({ loading: false });
|
|
// if(error.buttons) {
|
|
// Alert.alert("Information", '\n' + (error?.customError || "Failed to initiate transaction. Try again."), error.buttons);
|
|
// } else {
|
|
// if(error?.toJSON().message !== 'Network Error') {
|
|
// Alert.alert("Information", '\n' + (error?.customError || "Failed to initiate transaction. Try again."));
|
|
// }
|
|
// }
|
|
}
|
|
|
|
renderModal = () => {
|
|
return (
|
|
<Modal
|
|
animationType="none"
|
|
transparent={true}
|
|
visible={this.state.showModal}>
|
|
<TouchableOpacity activeOpacity={1} onPress={() => { }} style={styles.centeredView}>
|
|
<View style={[styles.modalView, { backgroundColor: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.white }]}>
|
|
|
|
{this.state.selectedPoints == null && this.state.selectedPaymentCard == null ?
|
|
<>
|
|
<Image source={Assets.icons.points_balance} style={{ width: 85, height: 85, resizeMode: 'contain' }} />
|
|
<Text style={{ fontSize: 18, color: this.props.app_theme?.theme.colors.text, marginVertical: 30 }}>{'Please select payment method'}</Text>
|
|
<TouchableOpacity onPress={() => this.setState({ showModal: false })} style={{ width: 80, height: 30, backgroundColor: Theme.colors.primary, alignItems: 'center', justifyContent: 'center' }}>
|
|
<Text style={{ fontSize: 18, color: Theme.colors.white, textAlign: 'center' }}>OK</Text>
|
|
</TouchableOpacity>
|
|
</> :
|
|
<View style={{ alignItems: 'center', justifyContent: 'center' }}>
|
|
<Text style={{ fontSize: 16, fontWeight: 'bold', color: this.props.app_theme?.theme.colors.text, marginTop: 10, textAlign: 'center' }}>{`You are about to pay \n ${"\u20B1"} ${Theme.formatter.CRNCY(this.state.data[0]?.originalAmount.amount || 0.0)}`}</Text>
|
|
<Text style={{ fontSize: 16, fontWeight: 'bold', color: this.props.app_theme?.theme.colors.text, marginTop: 30, marginBottom: 25, textAlign: 'center' }}>{`If your transaction is valid for\ndiscount, it will be reflected after final payment.`}</Text>
|
|
<View style={{ justifyContent: 'center', alignItems: 'center', flexDirection: 'row', marginBottom: 10 }}>
|
|
<TouchableOpacity
|
|
style={{ flex: 1, height: 30, backgroundColor: 'transparent', borderColor: Theme.colors.primary, borderWidth: 1, alignItems: 'center', justifyContent: 'center', borderRadius: 5, marginRight: 10, marginLeft: 20 }}
|
|
onPress={() => {
|
|
this.setState({ showModal: false })
|
|
}}>
|
|
<Text style={{ fontSize: 18, color: Theme.colors.primary, textAlign: 'center' }}>Cancel</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
style={{ flex: 1, height: 30, backgroundColor: Theme.colors.primary, alignItems: 'center', borderColor: Theme.colors.primary, borderWidth: 1, justifyContent: 'center', borderRadius: 5, marginLeft: 10, marginRight: 20 }}
|
|
onPress={() => this.submitPayment()}>
|
|
<Text style={{ fontSize: 18, color: Theme.colors.white, textAlign: 'center' }}>Continue</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
}
|
|
</View>
|
|
</TouchableOpacity>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
renderRetryModal = () => {
|
|
return (
|
|
<Modal
|
|
animationType="none"
|
|
transparent={true}
|
|
visible={this.state.showRetryModal}>
|
|
<TouchableOpacity activeOpacity={1} onPress={() => { }} style={styles.centeredView}>
|
|
<View style={[styles.modalView, { backgroundColor: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.white }]}>
|
|
<View style={{ alignItems: 'center', justifyContent: 'center' }}>
|
|
<Text style={{ fontSize: 16, fontWeight: 'bold', color: this.props.app_theme?.theme.colors.text, marginTop: 30, marginBottom: 25, textAlign: 'center' }}>{`You have a pending transaction\ndo you want to proceed?`}</Text>
|
|
<View style={{ justifyContent: 'center', alignItems: 'center', flexDirection: 'row', marginBottom: 10 }}>
|
|
<TouchableOpacity
|
|
style={{ flex: 1, height: 30, backgroundColor: 'transparent', borderColor: Theme.colors.primary, borderWidth: 1, alignItems: 'center', justifyContent: 'center', borderRadius: 5, marginRight: 10, marginLeft: 20 }}
|
|
onPress={() => {
|
|
this.setState({ showRetryModal: false })
|
|
}}>
|
|
<Text style={{ fontSize: 18, color: Theme.colors.primary, textAlign: 'center' }}>No</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
style={{ flex: 1, height: 30, backgroundColor: Theme.colors.primary, alignItems: 'center', borderColor: Theme.colors.primary, borderWidth: 1, justifyContent: 'center', borderRadius: 5, marginLeft: 10, marginRight: 20 }}
|
|
onPress={() => {
|
|
this.setState({ showRetryModal: false, loading: true })
|
|
this.recheckStatus(this.state.res, this.onSuccess, this.onError)
|
|
}}>
|
|
<Text style={{ fontSize: 18, color: Theme.colors.white, textAlign: 'center' }}>Yes</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</TouchableOpacity>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
transactionTable = () => {
|
|
const renderItem = () => {
|
|
return this.state.data?.map((item, index) => {
|
|
return (
|
|
<View key={index} style={{ flex: 1, flexDirection: 'row', paddingLeft: 15, paddingRight: 15, paddingTop: 10, paddingBottom: 15, alignItems: 'center' }}>
|
|
<Text style={{ flex: 4, fontFamily: 'Arial', textAlign: 'left', fontSize: 13, color: this.props.app_theme?.theme.colors.text }}>{item.description}</Text>
|
|
<Text style={{ flex: 3, fontFamily: 'Arial', fontWeight: 'bold', textAlign: 'center', fontSize: 13, color: this.props.app_theme?.theme.colors.text }}>{item.quantity}</Text>
|
|
<Text style={{ flex: 3, fontFamily: 'Arial', fontWeight: 'bold', textAlign: 'center', fontSize: 13, color: this.props.app_theme?.theme.colors.text }}>{"\u20B1"}{Theme.formatter.CRNCY(item.originalAmount.unitPrice)}</Text>
|
|
<Text style={{ flex: 3, fontFamily: 'Arial', fontWeight: 'bold', textAlign: 'right', fontSize: 13, color: this.props.app_theme?.theme.colors.text }}>{"\u20B1"}{Theme.formatter.CRNCY(item.originalAmount.amount)}</Text>
|
|
</View>
|
|
)
|
|
})
|
|
}
|
|
|
|
return (
|
|
<View style={{ width: '100%' }}>
|
|
<Divider />
|
|
<View style={{ flex: 1, flexDirection: 'row', padding: 15, marginTop: 8, alignItems: 'center' }}>
|
|
<Text style={{ flex: 4, height: 18, fontWeight: 'bold', fontFamily: 'Arial', color: this.props.app_theme?.theme.colors.text, textAlign: 'left', fontSize: 14 }}>Product</Text>
|
|
<Text style={{ flex: 3, height: 18, fontWeight: 'bold', fontFamily: 'Arial', color: this.props.app_theme?.theme.colors.text, textAlign: 'center', fontSize: 14 }}>Qty</Text>
|
|
<Text style={{ flex: 3, height: 18, fontWeight: 'bold', fontFamily: 'Arial', color: this.props.app_theme?.theme.colors.text, textAlign: 'center', fontSize: 14 }}>Price</Text>
|
|
<Text style={{ flex: 3, height: 18, fontWeight: 'bold', fontFamily: 'Arial', color: this.props.app_theme?.theme.colors.text, textAlign: 'right', fontSize: 14 }}>Total</Text>
|
|
</View>
|
|
<Divider />
|
|
<ScrollView style={{ width: '100%', height: 150 }}>
|
|
{renderItem()}
|
|
<View style={{ padding: 10 }}></View>
|
|
</ScrollView>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
onBackConfirmation = () => {
|
|
Alert.alert(
|
|
'',
|
|
'Do you want to cancel this transaction?',
|
|
[
|
|
{
|
|
text: 'Cancel',
|
|
style: 'cancel',
|
|
},
|
|
{
|
|
text: 'OK',
|
|
onPress: () => this.props.navigation.goBack(),
|
|
},
|
|
],
|
|
{ cancelable: true },
|
|
);
|
|
}
|
|
|
|
renderSelectedCard = () => {
|
|
return (
|
|
<View style={{ flexDirection: 'row', paddingHorizontal: 30 }}>
|
|
<View style={{ flex: 1, alignItems: 'center', flexDirection: 'row', borderRightWidth: 1, borderColor: "rgba(0,0,0,.1)" }}>
|
|
<Image source={this.state.selectedPaymentCard ? returnIcon(this.state.selectedPaymentCard.cardIssuerId) : Assets.icons.stpunlabeled} style={{ height: 40, width: 40, resizeMode: 'contain' }} />
|
|
|
|
{
|
|
this.state.selectedPaymentCard ?
|
|
<>
|
|
<View style={{ flex: 1, alignItems: 'center', paddingRight: 20 }}>
|
|
<TouchableOpacity
|
|
onPress={() => this.props.navigation.navigate('PayatpumpPaymentList', { onSelectedPaymentCard: (payment_card) => this.onSelectedPaymentCard(payment_card), storeId: this.props.route?.params.storeId })}
|
|
>
|
|
<Text style={{ color: Theme.colors.primary, fontSize: 14 }}>Change</Text>
|
|
</TouchableOpacity>
|
|
<Text style={{ color: this.props.app_theme?.theme.colors.text, fontSize: 14 }}>{this.state.selectedPaymentCard.lastFour}</Text>
|
|
</View>
|
|
</>
|
|
:
|
|
<View style={{ flex: 1, justifyContent: 'center', marginLeft: 10 }}>
|
|
<TouchableOpacity
|
|
onPress={() => this.props.navigation.navigate('PayatpumpPaymentList', { onSelectedPaymentCard: (payment_card) => this.onSelectedPaymentCard(payment_card), storeId: this.props.route?.params.storeId })}
|
|
>
|
|
<Text style={{ color: Theme.colors.primary, fontSize: 14 }}>Add Card</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
}
|
|
</View>
|
|
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'flex-end', paddingVertical: 25 }}>
|
|
<Text style={{ color: this.props.app_theme?.theme.colors.text, fontWeight: '700' }}>{"\u20B1"} {Theme.formatter.CRNCY(this.state.data[0]?.originalAmount.amount || 0.0)}</Text>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<CustomSafeArea>
|
|
<CustomHeader
|
|
customTitle={
|
|
<>
|
|
<Text style={{ fontWeight: 'bold' }}>{this.state.storeName}</Text>
|
|
<Text>{'\n'}Pump No. {this.state.selectedPumpNumber}</Text>
|
|
</>
|
|
}
|
|
height={75}
|
|
onBackPress={() => this.onBackConfirmation()}
|
|
back={true}
|
|
customTitleStyle={{ fontWeight: 'bold' }}
|
|
customLeftContainerStyle={{ justifyContent: 'flex-start' }}
|
|
menu={false}
|
|
navigation={this.props.navigation}
|
|
/>
|
|
<Elements.loaderView
|
|
title={this.state.title}
|
|
message={this.state.message}
|
|
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} />
|
|
<View style={{ flex: 1 }}>
|
|
{this.renderModal()}
|
|
{this.renderRetryModal()}
|
|
{this.transactionTable()}
|
|
<View style={{ padding: 10 }}>
|
|
<Text style={{ fontSize: 15, color: "gray", fontWeight: '700' }}>Payment Method</Text>
|
|
</View>
|
|
<View style={{ flex: 1 }}>
|
|
<Divider />
|
|
|
|
<View style={{ flexDirection: 'row', justifyContent: 'space-between', paddingHorizontal: 30, paddingVertical: 15 }}>
|
|
<Text style={{ fontWeight: 'bold', fontSize: 15, color: "gray" }}>Total</Text>
|
|
<Text style={{ fontWeight: 'bold', fontSize: 15, color: this.props.app_theme?.theme.colors.text }}>{"\u20B1"} {Theme.formatter.CRNCY(this.state.data[0]?.originalAmount.amount || 0.0)}</Text>
|
|
</View>
|
|
|
|
<Divider />
|
|
|
|
{this.renderSelectedCard()}
|
|
|
|
<Divider />
|
|
|
|
<View style={{ flex: 1, justifyContent: 'flex-end', marginBottom: 15 }}>
|
|
<View style={{ alignItems: 'center', justifyContent: 'center', marginBottom: 15 }}>
|
|
<Text style={{ color: "gray", fontSize: 15, fontWeight: 'bold' }}>Review the details before proceeding.</Text>
|
|
</View>
|
|
|
|
<TouchableOpacity onPress={() => {
|
|
if(this.state.res) {
|
|
this.setState({ showRetryModal: true })
|
|
} else {
|
|
this.setState({ showModal: true })
|
|
}
|
|
}} style={{ height: 50, backgroundColor: Theme.colors.primary, alignItems: 'center', justifyContent: 'center', borderRadius: 10, marginHorizontal: 16 }}>
|
|
<Text style={{ color: Theme.colors.white, fontSize: 23 }}>Pay {"\u20B1"} {Theme.formatter.CRNCY(this.state.data[0]?.originalAmount.amount || 0.0)}</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
</View>
|
|
</View>
|
|
</CustomSafeArea>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
app_theme: state.appThemeReducer.theme,
|
|
userinfo: state.appUserInfoReducer.userinfo
|
|
}
|
|
}
|
|
|
|
const mapDispatchToProps = {
|
|
saveUserInfo
|
|
}
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(PayatpumpStationTransactionDetails)
|
|
|
|
const styles = StyleSheet.create({
|
|
centeredView: {
|
|
flex: 1,
|
|
justifyContent: "center",
|
|
backgroundColor: '#00000090',
|
|
},
|
|
modalView: {
|
|
margin: 25,
|
|
backgroundColor: "white",
|
|
padding: 20,
|
|
alignItems: "center",
|
|
shadowColor: "#000",
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: 2
|
|
},
|
|
shadowOpacity: 0.25,
|
|
shadowRadius: 4,
|
|
elevation: 5
|
|
},
|
|
}) |