157 lines
9.3 KiB
JavaScript
157 lines
9.3 KiB
JavaScript
import * as React from 'react';
|
|
import { connect } from "react-redux";
|
|
import {
|
|
TouchableOpacity,
|
|
View,
|
|
Text,
|
|
Keyboard,
|
|
BackHandler,
|
|
Image
|
|
} from 'react-native';
|
|
import { returnIcon } from '../../utils/card.js';
|
|
import Assets from '../../components/assets.manager.js';
|
|
import Lottie from 'lottie-react-native';
|
|
import moment from 'moment';
|
|
import Theme from '../../components/theme.style.js';
|
|
import CustomSafeArea from '../../components/safeArea.component.js';
|
|
import DB from '../../components/storage/';
|
|
|
|
class PayatpumpPaymentSuccess extends React.Component {
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
}
|
|
|
|
state = {
|
|
email: null,
|
|
keyboardHeight: 0,
|
|
data: this.props.route?.params?.transactionData,
|
|
transactionDetails: this.props.route?.params?.transactionDetails,
|
|
newDetails: this.props.route?.params?.newDetails?.response,
|
|
loading: true,
|
|
selectedCard: null
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.getCard();
|
|
this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
|
|
this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
|
|
|
|
BackHandler.addEventListener("hardwareBackPress", this.onPressBack);
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
this.keyboardDidShowListener.remove()
|
|
this.keyboardDidHideListener.remove()
|
|
|
|
BackHandler.removeEventListener("hardwareBackPress", this.onPressBack);
|
|
}
|
|
|
|
getCard = async () => {
|
|
const item = await DB.get("pumpPaymentCards");
|
|
this.setState({ selectedCard: JSON.parse(item) });
|
|
}
|
|
|
|
onPressBack = () => {
|
|
this.onNavigateMain();
|
|
return true;
|
|
}
|
|
|
|
onNavigateMain = () => {
|
|
this.props.navigation.reset({
|
|
index: 0,
|
|
routes: [{name: 'Main'}]
|
|
})
|
|
}
|
|
|
|
_keyboardDidShow = (value) => {
|
|
this.setState({ keyboardHeight: value.endCoordinates.height - 120 })
|
|
}
|
|
|
|
_keyboardDidHide = () => {
|
|
this.setState({ keyboardHeight: 0 })
|
|
}
|
|
|
|
getPoints = () => {
|
|
let points = this.state.newDetails?.loyaltyPointsMessages[0]?.earnedRewardSummary || this.state.newDetails?.loyaltyPointsMessages[1]?.earnedRewardSummary || 0;
|
|
|
|
if(points === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<View style={{ width: '100%', justifyContent: 'space-between', alignItems: 'center', flexDirection: 'row', backgroundColor: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.background : Theme.colors.white }}>
|
|
<Text style={{ color: this.props.app_theme?.theme.colors.text, fontSize: 15, paddingTop: 3, fontWeight: 'bold', marginHorizontal: 13, textAlign: 'left' }}>Earned Points</Text>
|
|
<Text style={{ color: this.props.app_theme?.theme.colors.text, fontSize: 15, paddingTop: 3, marginHorizontal: 13, textAlign: 'right' }}>{Theme.formatter.CRNCY(points)}</Text>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
render() {
|
|
return(
|
|
<CustomSafeArea>
|
|
<View style={{ flex: 1, backgroundColor: Theme.colors.primary }}>
|
|
<View style={{ flex: 1, paddingTop: 40, paddingHorizontal: 20 }}>
|
|
<View style={{ width: '100%', backgroundColor: Theme.colors.white, paddingVertical: 20 }}>
|
|
<View style={{alignItems: 'center'}}>
|
|
<Lottie style={{height: 100, width: 100}} source={Assets.lottie.p97success} autoPlay loop={false} />
|
|
<Text style={{fontSize: 18, fontWeight: 'bold', marginBottom: 30 }}>Success!</Text>
|
|
</View>
|
|
<View style={{ width: '100%', height: 1, borderBottomWidth: 1, borderColor: Theme.colors.primary }}/>
|
|
<View style={{flexDirection: 'row', paddingHorizontal: 20, justifyContent: 'space-between', marginVertical: 20}}>
|
|
<View style={{marginLeft: 10}}>
|
|
<Text style={{ fontSize: 13 }} numberOfLines={1} adjustsFontSizeToFit>Transaction Date</Text>
|
|
<Text style={{ fontWeight: 'bold', fontSize: 13 }} numberOfLines={1} adjustsFontSizeToFit>{new moment(this.state.newDetails?.posDatetimeUtc).format("DD MMM YYYY, hh:mm A")}</Text>
|
|
</View>
|
|
<View style={{marginRight: 20}}>
|
|
<Text style={{ fontSize: 13 }} numberOfLines={1} adjustsFontSizeToFit>Transaction ID</Text>
|
|
<Text style={{ fontWeight: 'bold', fontSize: 13 }} numberOfLines={1} adjustsFontSizeToFit>{this.state.newDetails?.posTransactionId}</Text>
|
|
</View>
|
|
</View>
|
|
<View style={{ width: '100%', height: 1, borderBottomWidth: 1, borderColor: Theme.colors.primary }}/>
|
|
|
|
<View style={{ paddingHorizontal: 25, paddingTop: 10}}>
|
|
{this.state.newDetails?.totalDiscount !== 0 && <View style={{ width: '100%', justifyContent: 'space-between', alignItems: 'center', flexDirection: 'row', backgroundColor: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.background : Theme.colors.white}}>
|
|
<Text style={{ color: this.props.app_theme?.theme.colors.text, fontSize: 15, paddingTop: 3, marginHorizontal: 13, textAlign: 'left' }}>Subtotal</Text>
|
|
<Text style={{ color: this.props.app_theme?.theme.colors.text, fontSize: 15, paddingTop: 3, marginHorizontal: 13, textAlign: 'right' }}>{this.state.newDetails?.formattedSubtotal}</Text>
|
|
</View>
|
|
}
|
|
{this.state.newDetails?.totalDiscount !== 0 && <View style={{ width: '100%', justifyContent: 'space-between', alignItems: 'center', flexDirection: 'row', backgroundColor: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.background : Theme.colors.white }}>
|
|
<Text style={{ color: this.props.app_theme?.theme.colors.text, fontSize: 15, paddingTop: 3, marginHorizontal: 13, textAlign: 'left' }}>Discount</Text>
|
|
<Text style={{ color: this.props.app_theme?.theme.colors.text, fontSize: 15, paddingTop: 3, marginHorizontal: 13, textAlign: 'right' }}>- {this.state.newDetails?.formattedTotalDiscounts}</Text>
|
|
</View>}
|
|
<View style={{ width: '100%', justifyContent: 'space-between', alignItems: 'center', flexDirection: 'row', backgroundColor: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.background : Theme.colors.white }}>
|
|
<Text style={{ color: this.props.app_theme?.theme.colors.text, fontSize: 15, paddingTop: 3, fontWeight: 'bold', marginHorizontal: 13, textAlign: 'left' }}>Total</Text>
|
|
<Text style={{ color: this.props.app_theme?.theme.colors.text, fontSize: 15, paddingTop: 3, marginHorizontal: 13, textAlign: 'right' }}>{this.state.newDetails?.formattedTotal}</Text>
|
|
</View>
|
|
{this.state.selectedCard && <View style={{ width: '100%', justifyContent: 'space-between', alignItems: 'center', flexDirection: 'row', backgroundColor: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.background : Theme.colors.white }}>
|
|
<Text style={{ color: this.props.app_theme?.theme.colors.text, fontSize: 15, paddingTop: 3, fontWeight: 'bold', marginHorizontal: 13, textAlign: 'left' }}>Payment Method</Text>
|
|
<View style={{ flexDirection: 'row' , paddingRight: 10, alignItems: 'center'}}>
|
|
<Text style={{ color: this.props.app_theme?.theme.colors.text, fontSize: 15, paddingTop: 3, marginHorizontal: 13, textAlign: 'right' }}>{this.state.selectedCard?.lastFour}</Text>
|
|
<Image source={returnIcon(this.state.selectedCard?.cardIssuerId)} style={{height: 30, width: 30, resizeMode: 'contain'}} />
|
|
</View>
|
|
</View>}
|
|
{this.getPoints()}
|
|
<View style={{marginTop: 60, alignSelf: 'center'}}>
|
|
<Text style={{fontSize: 17}}>Thank you for your payment!</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<TouchableOpacity onPress={this.onNavigateMain}
|
|
style={{ height: 50, backgroundColor: Theme.colors.white, justifyContent: 'center', alignItems: 'center', margin: 16, borderRadius: 5 }}>
|
|
<Text style={{ color: Theme.colors.primary, fontSize: 18, fontWeight: '700' }}>Back To Home</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</CustomSafeArea>
|
|
)
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
app_theme: state.appThemeReducer.theme
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps, null)(PayatpumpPaymentSuccess) |