import * as React from 'react';
import moment from 'moment';
import { connect } from "react-redux";
import { Divider } from 'react-native-elements'
import {
SafeAreaView,
TouchableOpacity,
View,
Text,
Alert,
Platform,
ScrollView,
Image,
Modal,
StyleSheet
} from 'react-native';
import CustomHeader from '../../components/header.js';
import Assets from '../../components/assets.manager.js';
import Theme from '../../components/theme.style.js';
import Icon from '../../components/icons.js';
import REQUEST_POST_PAY from '../../components/api/postpayapi';
import DB from '../../components/storage';
import Elements from '../../components/elements';
class PayatpumpStationTransactionDetails extends React.Component {
constructor(props) {
super(props)
}
state = {
loading: false,
session: null,
card_number: null,
selectedPoints: null,
selectedPaymentCard: null,
claimId: null,
data: [],
storeName: null,
showModal: false,
totalPrice: 3000
}
componentDidMount() {
this.init()
}
componentWillUnmount() {
}
init = async () => {
let session = await DB.session()
let user_profile = await DB.profile()
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
})
console.log(this.props)
}
onSelectedPointsAmount = (point_amount) => {
this.setState({ selectedPoints: point_amount })
}
onSelectedPaymentCard = (payment_card) => {
console.log(payment_card)
this.setState({ selectedPaymentCard: payment_card })
}
getTransactionDetails = async (claimId, fundingProviderName, userPaymentSourceId, onSuccess, onError) => {
if(claimId == null) {
Alert.alert("Error", "No transaction id exist.")
return
}
let length = 8
let partnerTransactionId = parseInt((Math.random() * 9 + 1) * Math.pow(10, length-1), 10)
let params = {
claimId: claimId,
partnerTransactionId: partnerTransactionId,
walletRequest: {
fundingProviderName: fundingProviderName, //change this value later
fundingPayload: {
userPaymentSourceId: userPaymentSourceId //change this value later
}
},
userPreference: {
receiptPreference: "doNotPrintReceipt", //printReceipt, doNotPrintReceipt
emailReceiptPreference: true
},
loyaltyPassthroughInformation: {
loyaltyInfo: []
},
fraudContext: {}
}
let USER_PROFILE = await DB.profile()
REQUEST_POST_PAY('postpay', 'post', {
token: USER_PROFILE.data.auth_p97,
language: 'en-US'
}, {}, params, async (res) => {
if(res.success && res.response != undefined && res.response.status == "success") {
onSuccess(res)
} else {
onError(res)
}
}, (error) => {
console.log(error)
onError(error)
})
}
submitPayment = () => {
this.setState({ showModal: false, loading: true })
this.getTransactionDetails(this.state.claimId, "p97token", this.state.selectedPaymentCard.userPaymentSourceId, onSuccess => {
this.setState({ loading: false })
if(onSuccess.success) {
let payment = { totalPayment: this.state.data[0]?.originalAmount.amount, cardPayment: this.state.data[0].originalAmount.amount, transactionId: onSuccess.response.transaction_id, storeName: this.state.storeName }
this.props.navigation.navigate('PayatpumpPaymentSuccess', { transactionData: payment })
} else {
setTimeout(() => {
Alert.alert('Error', "Failed to initiate transaction. Try again.")
}, 300)
}
}, onError => {
this.setState({ loading: false })
setTimeout(() => {
Alert.alert('Error', "Failed to initiate transaction. Try again.")
}, 300)
})
}
renderModal = () => {
return (
{}} style={styles.centeredView}>
{this.state.selectedPoints == null && this.state.selectedPaymentCard == null ?
<>
{'Please select payment method...'}
this.setState({ showModal: false })} style={{ width: 80, height: 30, backgroundColor: Theme.colors.primary, alignItems: 'center', justifyContent: 'center', borderRadius: 5 }}>
Ok
:
{`Are you sure you want to pay ${"\u20B1"}${Theme.formatter.CRNCY(this.state.data[0]?.originalAmount.amount || 0.0)}?`}
{
this.setState({ showModal: false })
}}>
No
this.submitPayment()}>
Yes
}
)
}
transactionTable = () => {
const renderItem = () => {
return this.state.data.map((item, index) => {
return (
{item.description}
{`${item.quantity} ${item.unitMeasure}`}
{"\u20B1"}{Theme.formatter.CRNCY(item.originalAmount.unitPrice)}
{"\u20B1"}{Theme.formatter.CRNCY(item.originalAmount.amount)}
)
})
}
return (
Products
Qty
Price
Total
{renderItem()}
)
}
onBackConfirmation = () => {
Alert.alert(
'',
'Do you want to cancel this transaction?',
[
{
text: 'Cancel',
style: 'cancel',
},
{
text: 'OK',
onPress: () => this.props.navigation.goBack(),
},
],
{cancelable: true},
);
}
render() {
return (
this.onBackConfirmation()}
back={true}
menu={false}
navigation={this.props.navigation}
/>
Transaction Date
{moment(new Date()).format('DD MMM YYYY hh:mm A')}
{this.renderModal()}
{this.transactionTable()}
Payment Method
this.props.navigation.navigate('PayatpumpPaymentList', { onSelectedPaymentCard: (payment_card) => this.onSelectedPaymentCard(payment_card), storeId: this.props.route?.params.storeId})}>
{this.state.selectedPaymentCard ? (
Change
{this.state.selectedPaymentCard.lastFour}
) : (
Add Card
)}
{"\u20B1"}{Theme.formatter.CRNCY(this.state.selectedPaymentCard != null && this.state.data[0]?.originalAmount.amount != undefined ? this.state.data[0]?.originalAmount.amount : 0.0)}
Total Amount
{"\u20B1"}{Theme.formatter.CRNCY(this.state.data[0]?.originalAmount.amount || 0.0)}
{/*
Points Balance
3,500.00
this.props.navigation.navigate('PayatpumpPaymentList', { onSelectedPaymentCard: (payment_card) => this.onSelectedPaymentCard(payment_card), storeId: this.props.route?.params.data.storeTenantId})}>
{this.state.selectedPaymentCard ? (
<>
Change
{this.state.selectedPaymentCard.cardMasked}
) : (
<>
Add Card
)}
this.props.navigation.navigate('PayatpumpPointsDetailsInput', { totalPointsBalance: 5000, onSelectedPointsAmount: (point_amount) => this.onSelectedPointsAmount(point_amount) })}>
{this.state.selectedPoints && "\u20B1"}{`${this.state.selectedPoints ? Theme.formatter.CRNCY(this.state.selectedPoints) : "Enter point to redeem"}`}
{"\u20B1"}0.00
*/}
Review the details before proceeding.
this.setState({ showModal: true })} style={{ flex: 1, paddingHorizontal: 120, height: 44, backgroundColor: Theme.colors.primary, alignItems: 'center', justifyContent: 'center', borderRadius: 10, marginHorizontal: 16 }}>
Pay {"\u20B1"}{Theme.formatter.CRNCY(this.state.data[0]?.originalAmount.amount || 0.0)}
);
}
}
const mapStateToProps = (state) => {
return {
app_theme: state.appThemeReducer.theme
}
}
export default connect(mapStateToProps, null)(PayatpumpStationTransactionDetails)
const styles = StyleSheet.create({
centeredView: {
flex: 1,
justifyContent: "center",
backgroundColor: '#00000090',
},
modalView: {
margin: 25,
backgroundColor: "white",
borderRadius: 15,
padding: 20,
alignItems: "center",
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5
},
})