434 lines
22 KiB
JavaScript
434 lines
22 KiB
JavaScript
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 (
|
|
<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.colors.border }]}>
|
|
{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', borderRadius: 5 }}>
|
|
<Text style={{ fontSize: 18, color: Theme.colors.white, textAlign: 'center' }}>Ok</Text>
|
|
</TouchableOpacity>
|
|
</> :
|
|
<View style={{ alignItems: 'center', justifyContent: 'center' }}>
|
|
<Text style={{ fontSize: 18, color: this.props.app_theme?.theme.colors.text, marginVertical: 30, textAlign: 'center' }}>{`Are you sure you want to pay ${"\u20B1"}${Theme.formatter.CRNCY(this.state.data[0]?.originalAmount.amount || 0.0)}?`}</Text>
|
|
<View style={{ justifyContent: 'center', alignItems: 'center', flexDirection: 'row' }}>
|
|
<TouchableOpacity
|
|
style={{ flex: 1, height: 30, backgroundColor: Theme.colors.primary, alignItems: 'center', justifyContent: 'center', borderRadius: 5, marginRight: 10, marginLeft: 20 }}
|
|
onPress={() => {
|
|
this.setState({ showModal: false })
|
|
}}>
|
|
<Text style={{ fontSize: 18, color: Theme.colors.white, textAlign: 'center' }}>No</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
style={{ flex: 1, height: 30, backgroundColor: Theme.colors.white, 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.primary, 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: 'left', fontSize: 13, color: this.props.app_theme?.theme.colors.text}}>{`${item.quantity} ${item.unitMeasure}`}</Text>
|
|
<Text style={{flex: 2, fontFamily: 'Arial', fontWeight: 'bold', textAlign: 'left', fontSize: 13, color: this.props.app_theme?.theme.colors.text}}>{"\u20B1"}{Theme.formatter.CRNCY(item.originalAmount.unitPrice)}</Text>
|
|
<Text style={{flex: 2, fontFamily: 'Arial', fontWeight: 'bold', textAlign: 'left', 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: 16}}>Products</Text>
|
|
<Text style={{flex: 2, height: 18, fontWeight: 'bold', fontFamily: 'Arial', color: this.props.app_theme?.theme.colors.text, textAlign: 'left', fontSize: 16}}>Qty</Text>
|
|
<Text style={{flex: 2, height: 18, fontWeight: 'bold', fontFamily: 'Arial', color: this.props.app_theme?.theme.colors.text, textAlign: 'left', fontSize: 16}}>Price</Text>
|
|
<Text style={{flex: 2, height: 18, fontWeight: 'bold', fontFamily: 'Arial', color: this.props.app_theme?.theme.colors.text, textAlign: 'left', fontSize: 16}}>Total</Text>
|
|
</View>
|
|
<Divider />
|
|
<ScrollView style={{ width: '100%', height: 250}}>
|
|
{renderItem()}
|
|
<View style={{padding: 10}}></View>
|
|
</ScrollView>
|
|
<Divider />
|
|
</View>
|
|
)
|
|
}
|
|
|
|
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 (
|
|
<SafeAreaView style={{flex: 1}}>
|
|
<CustomHeader
|
|
title={`${this.state.storeName} Pump No. ${this.state.selectedPumpNumber}`}
|
|
onBackPress={() => this.onBackConfirmation()}
|
|
back={true}
|
|
menu={false}
|
|
navigation={this.props.navigation}
|
|
/>
|
|
<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} />
|
|
<View style={{flex: 1}}>
|
|
<View style={{flexDirection: 'row', padding: 13, backgroundColor: Theme.colors.darkerGray}}>
|
|
<View style={{flex: 1}}>
|
|
<Text style={{fontFamily: 'Arial', fontSize: 16, color: '#fff'}}>Transaction Date</Text>
|
|
</View>
|
|
<View style={{flex: 1, textAlign: 'right', alignItems: 'flex-end'}}>
|
|
<Text style={{fontFamily: 'Arial', fontSize: 16, color: '#fff'}}>{moment(new Date()).format('DD MMM YYYY hh:mm A')}</Text>
|
|
</View>
|
|
</View>
|
|
{this.renderModal()}
|
|
{this.transactionTable()}
|
|
<View style={{ flex: 1, padding: 10, justifyContent: 'center' }}>
|
|
<Text style={{ fontSize: 18, color: this.props.app_theme?.theme.colors.text }}>Payment Method</Text>
|
|
</View>
|
|
<View style={{ flex: 4, flexDirection: 'row' }}>
|
|
<View style={{ flex: 1 }}>
|
|
<View style={{
|
|
flex: 1,
|
|
borderTopColor: this.props.app_theme?.theme.colors.text,
|
|
borderTopWidth: 1,
|
|
borderRightColor: this.props.app_theme?.theme.colors.text,
|
|
borderRightWidth: 1,
|
|
flexDirection: 'row',
|
|
justifyContent: 'center',
|
|
alignItems: 'center'
|
|
}}>
|
|
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', borderRightWidth: 1, borderRightColor: this.props.app_theme?.theme.colors.text }}>
|
|
<TouchableOpacity style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}
|
|
onPress={() => this.props.navigation.navigate('PayatpumpPaymentList', { onSelectedPaymentCard: (payment_card) => this.onSelectedPaymentCard(payment_card), storeId: this.props.route?.params.storeId})}>
|
|
{this.state.selectedPaymentCard ? (
|
|
<View style={{ flexDirection: 'row' }}>
|
|
<Image source={this.state.selectedPaymentCard ? { uri: this.state.selectedPaymentCard.imageUrl } : Assets.icons.stpunlabeled} style={{ marginHorizontal: 8, width: this.state.selectedPaymentCard ? 40 : 30, height: this.state.selectedPaymentCard ? 40 : 30, resizeMode: 'contain' }} />
|
|
<View style={{ justifyContent: 'center', alignItems: 'center' }}>
|
|
<Text style={{ color: Theme.colors.primary, fontSize: 20 }}>Change</Text>
|
|
<Text style={{ color: this.props.app_theme?.theme.colors.text, fontSize: 20 }}>{this.state.selectedPaymentCard.lastFour}</Text>
|
|
</View>
|
|
</View>
|
|
) : (
|
|
<View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
|
|
<Image source={this.state.selectedPaymentCard ? { uri: this.state.selectedPaymentCard.imageUrl } : Assets.icons.stpunlabeled} style={{ marginHorizontal: 8, width: 30, height: 30, resizeMode: 'contain' }} />
|
|
<Text style={{ color: Theme.colors.primary, fontSize: 20 }}>Add Card</Text>
|
|
</View>
|
|
)}
|
|
</TouchableOpacity>
|
|
</View>
|
|
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
|
|
<Text style={{ color: this.props.app_theme?.theme.colors.text, fontSize: 20, fontWeight: 'bold' }}>{"\u20B1"}{Theme.formatter.CRNCY(this.state.selectedPaymentCard != null && this.state.data[0]?.originalAmount.amount != undefined ? this.state.data[0]?.originalAmount.amount : 0.0)}</Text>
|
|
</View>
|
|
</View>
|
|
<View style={{
|
|
flex: 1,
|
|
borderTopColor: this.props.app_theme?.theme.colors.text,
|
|
borderTopWidth: 1,
|
|
borderBottomColor: this.props.app_theme?.theme.colors.text,
|
|
borderBottomWidth: 1,
|
|
borderRightColor: this.props.app_theme?.theme.colors.text,
|
|
borderRightWidth: 1,
|
|
flexDirection: 'row',
|
|
justifyContent: 'center',
|
|
alignItems: 'center'
|
|
}}>
|
|
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
|
|
<Text style={{ color: this.props.app_theme?.theme.colors.text, fontSize: 20, fontWeight: 'bold' }}>Total Amount</Text>
|
|
</View>
|
|
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
|
|
<Text style={{ color: this.props.app_theme?.theme.colors.text, fontSize: 20, fontWeight: 'bold' }}>{"\u20B1"}{Theme.formatter.CRNCY(this.state.data[0]?.originalAmount.amount || 0.0)}</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
{/* <View style={{ flex: 4, flexDirection: 'row' }}>
|
|
<View style={{ flex: 1 }}>
|
|
<View style={{
|
|
flex: 1,
|
|
borderTopColor: this.props.app_theme?.theme.colors.text,
|
|
borderTopWidth: 1,
|
|
borderRightColor: this.props.app_theme?.theme.colors.text,
|
|
borderRightWidth: 1,
|
|
flexDirection: 'row',
|
|
justifyContent: 'center',
|
|
alignItems: 'center'
|
|
}}>
|
|
<Image source={Assets.icons.philippine_pesos} style={{ flex: 1, width: 50, height: 50, resizeMode: 'contain' }} />
|
|
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', marginRight: 20 }}>
|
|
<Text style={{ color: this.props.app_theme?.theme.colors.text, fontSize: 15 }}>Points Balance</Text>
|
|
<Text style={{ color: this.props.app_theme?.theme.colors.text, fontSize: 15, fontWeight: 'bold' }}>3,500.00</Text>
|
|
</View>
|
|
</View>
|
|
<View style={{
|
|
flex: 1,
|
|
borderTopColor: this.props.app_theme?.theme.colors.text,
|
|
borderTopWidth: 1,
|
|
borderBottomColor: this.props.app_theme?.theme.colors.text,
|
|
borderBottomWidth: 1,
|
|
borderRightColor: this.props.app_theme?.theme.colors.text,
|
|
borderRightWidth: 1,
|
|
flexDirection: 'row',
|
|
justifyContent: 'center',
|
|
alignItems: 'center'
|
|
}}>
|
|
<Image source={Assets.icons.stpunlabeled} style={{ flex: 1, width: 30, height: 30, resizeMode: 'contain' }} />
|
|
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', marginRight: 20 }}>
|
|
<TouchableOpacity style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}
|
|
onPress={() => this.props.navigation.navigate('PayatpumpPaymentList', { onSelectedPaymentCard: (payment_card) => this.onSelectedPaymentCard(payment_card), storeId: this.props.route?.params.data.storeTenantId})}>
|
|
{this.state.selectedPaymentCard ? (
|
|
<>
|
|
<Text style={{ color: Theme.colors.primary, fontSize: 20 }}>Change</Text>
|
|
<Text style={{ color: Theme.colors.black, fontSize: 20 }}>{this.state.selectedPaymentCard.cardMasked}</Text>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Text style={{ color: Theme.colors.primary, fontSize: 20 }}>Add Card</Text>
|
|
</>
|
|
)}
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<View style={{ flex: 1 }}>
|
|
<View style={{
|
|
flex: 1,
|
|
borderTopColor: this.props.app_theme?.theme.colors.text,
|
|
borderTopWidth: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'center'
|
|
}}>
|
|
<TouchableOpacity style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}
|
|
onPress={() => this.props.navigation.navigate('PayatpumpPointsDetailsInput', { totalPointsBalance: 5000, onSelectedPointsAmount: (point_amount) => this.onSelectedPointsAmount(point_amount) })}>
|
|
<Text style={{ color: Theme.colors.primary, fontSize: 18 }}>{this.state.selectedPoints && "\u20B1"}{`${this.state.selectedPoints ? Theme.formatter.CRNCY(this.state.selectedPoints) : "Enter point to redeem"}`}</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
<View style={{
|
|
flex: 1,
|
|
borderTopColor: this.props.app_theme?.theme.colors.text,
|
|
borderTopWidth: 1,
|
|
borderBottomColor: this.props.app_theme?.theme.colors.text,
|
|
borderBottomWidth: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'center'
|
|
}}>
|
|
<Text style={{ color: this.props.app_theme?.theme.colors.text, fontSize: 18 }}>{"\u20B1"}0.00</Text>
|
|
</View>
|
|
</View>
|
|
</View> */}
|
|
<View style={{ flex: 2, alignItems: 'center', justifyContent: 'center' }}>
|
|
<Text style={{ color: this.props.app_theme?.theme.colors.text, fontSize: 15, fontWeight: 'bold' }}>Review the details before proceeding.</Text>
|
|
</View>
|
|
<View style={{ flex: 1.5, alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
|
|
<TouchableOpacity onPress={() => this.setState({ showModal: true })} style={{ flex: 1, paddingHorizontal: 120, height: 44, 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>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
}
|
|
|
|
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
|
|
},
|
|
}) |