213 lines
8.6 KiB
JavaScript
213 lines
8.6 KiB
JavaScript
import * as React from 'react';
|
|
import { useEffect, useState } from 'react';
|
|
import { SafeAreaView, ScrollView, TouchableOpacity, Button, View, Text, Image, Alert, Linking, Platform } from 'react-native';
|
|
import { connect } from "react-redux";
|
|
import CustomHeader from '../../../components/header.js';
|
|
import Assets from '../../../components/assets.manager.js';
|
|
import Elements from '../../../components/elements.js';
|
|
import Theme from '../../../components/theme.style.js';
|
|
import Icon from '../../../components/icons.js';
|
|
import REQUEST from '../../../components/api';
|
|
import DB from '../../../components/storage';
|
|
import { openComposer } from 'react-native-email-link';
|
|
import { dateFormater } from '../../../utils/date.js';
|
|
import CustomSafeArea from '../../../components/safeArea.component.js';
|
|
import AdjustableText from '../../../components/text/AdjustableText.js';
|
|
|
|
|
|
class TransactionDetails extends React.Component {
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
}
|
|
|
|
state = {
|
|
loading: true,
|
|
ratesubmitted: false,
|
|
rating: 0,
|
|
session: '',
|
|
transaction: {},
|
|
umail: "",
|
|
cn: ""
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.init()
|
|
}
|
|
|
|
init = async () => {
|
|
let SESSION = await DB.session();
|
|
let user_profile = await DB.profile()
|
|
|
|
this.setState({ cn: user_profile.data.card_number, session: SESSION })
|
|
|
|
if(this.props.route.params.data.entry_type_desc === "MOBILE APP SIGN UP BONUS") {
|
|
return this.setState({ transaction: this.props.route.params.data, loading: false })
|
|
}
|
|
|
|
REQUEST("transaction_single", "post", {
|
|
Authorization: SESSION.token,
|
|
}, {}, {
|
|
trans_num: this.props.route.params.data.trans_num,
|
|
ref_num: this.props.route.params.data.ref_num,
|
|
source: this.props.route.params.data.source,
|
|
entry_type_code: this.props.route.params.data.entry_type_code
|
|
}, (data) => {
|
|
if(data.status === 0) {
|
|
this.setState({ transaction: this.props.route.params.data, loading: false })
|
|
} else {
|
|
this.setState({ transaction: data.data, loading: false })
|
|
}
|
|
}, (err) => {
|
|
Alert.alert("Information", `\n${err.message}`);
|
|
this.setState({ loading: false })
|
|
}, "Transaction", "Fetch");
|
|
}
|
|
|
|
renderRatings = (rating, disabled) => {
|
|
return [1, 2, 3, 4, 5].map((rate, i) => {
|
|
return (
|
|
<TouchableOpacity disabled={disabled} style={{flex: 1, alignSelf: 'center', padding: 1}} activeOpacity={0.5} onPress={() => this.setState({ rating: rate })}>
|
|
<Icon.AntDesign name={rating >= rate ? "star" : "staro"} color={rating > 0 || !this.state.ratesubmitted ? Theme.colors.yellow : Theme.colors.darkerGray} size={40} />
|
|
</TouchableOpacity>
|
|
)
|
|
})
|
|
}
|
|
|
|
onSubmit = async () => {
|
|
this.setState({ loading: true })
|
|
REQUEST('transaction_rate', 'post', {
|
|
Authorization: this.state.session.token,
|
|
Accept: 'application/json',
|
|
card_number: this.state.session.user.card_number
|
|
}, {}, {
|
|
trans_num: this.props.route.params.data.trans_num,
|
|
ref_num: this.props.route.params.data.ref_num,
|
|
entry_type_code: this.props.route.params.data.entry_type_code,
|
|
source: this.props.route.params.data.source,
|
|
rate: this.state.rating
|
|
}, (result) => {
|
|
this.setState({ loading: false, ratesubmitted: true })
|
|
Alert.alert("Information", '\n' + 'Rating has been submitted', [{text: "Ok", onPress: () => {
|
|
this.props.route.params?.onBackPress()
|
|
}}])
|
|
}, (err) => {
|
|
Alert.alert("Information", `\n${err.message}`);
|
|
this.setState({ loading: false })
|
|
}, "Transaction", "Rate")
|
|
}
|
|
|
|
checkPendingTransaction = () => {
|
|
if(this.state.rating > 0 && !this.state.ratesubmitted) {
|
|
Alert.alert(
|
|
'',
|
|
'You have an unsaved rating, are you sure you want to navigate back?',
|
|
[
|
|
{
|
|
text: 'No',
|
|
style: 'cancel',
|
|
},
|
|
{
|
|
text: 'Yes',
|
|
onPress: async () => {
|
|
this.props.route.params?.onBackPress()
|
|
this.props.navigation.goBack()
|
|
},
|
|
},
|
|
],
|
|
{cancelable: true},
|
|
);
|
|
} else {
|
|
this.props.route.params?.onBackPress()
|
|
this.props.navigation.goBack()
|
|
}
|
|
}
|
|
|
|
returnDate = () => {
|
|
return dateFormater(this.state.transaction?.date);
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<CustomSafeArea>
|
|
<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}
|
|
/>
|
|
<CustomHeader
|
|
title={this.returnDate()}
|
|
onBackPress={() => this.checkPendingTransaction()}
|
|
menu={false}
|
|
backscreen="MyProfile"
|
|
navigation={this.props.navigation}
|
|
/>
|
|
<View style={{flex: 1, backgroundColor: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.background : Theme.colors.white }}>
|
|
<View style={{flexDirection: 'row', padding: 13, backgroundColor: Theme.colors.darkerGray}}>
|
|
<View style={{flex: 2}}>
|
|
<Text style={{fontFamily: 'Arial', fontSize: 16, color: '#fff'}}>{this.state.transaction?.entry_type_code === "TOPUP" || this.state.transaction?.entry_type_code === "1" || this.state.transaction?.entry_type_desc === "MOBILE APP SIGN UP BONUS" ? "Sales Invoice" : "Transaction ID"}</Text>
|
|
</View>
|
|
<View style={{flex: 1, textAlign: 'right', alignItems: 'flex-end'}}>
|
|
<Text style={{fontFamily: 'Arial', fontSize: 16, color: '#fff'}}>{this.state.transaction?.trans_num}</Text>
|
|
</View>
|
|
</View>
|
|
<View style={{padding: 10, paddingLeft: 13,paddingRight: 13}}>
|
|
<Text style={{fontFamily: 'Arial', color: this.props.app_theme?.theme.colors.text }}>{this.state.transaction?.station || 'APP'}</Text>
|
|
</View>
|
|
<Elements.transactiontable
|
|
textColor={this.props.app_theme?.theme.colors.text}
|
|
isDarkMode={this.props.app_theme?.theme.dark}
|
|
data={this.state.transaction}
|
|
// showDiscount={this.state.transaction?.entry_type_code === "P97" || this.state.transaction?.entry_type_code === "THIRDPARTYMOBILE"}
|
|
showDiscount={false}
|
|
/>
|
|
<View style={{alignItems: 'center'}}>
|
|
{
|
|
this.state.transaction?.station !== "APP" && <>
|
|
<AdjustableText style={{padding: 20, color: Theme.colors.darkGray}}>Rate Your Experience</AdjustableText>
|
|
<View style={{flexDirection: 'row', alignItems: 'center', width: '60%'}}>
|
|
{this.renderRatings(this.state.rating ? this.state.rating : this.state.transaction?.rating, this.state.transaction?.is_feedback_disabled || this.state.transaction?.is_disabled || this.state.ratesubmitted)}
|
|
</View>
|
|
<TouchableOpacity
|
|
disabled={ this.state.transaction?.is_feedback_disabled || this.state.transaction?.is_disabled || this.state.ratesubmitted } activeOpacity={1}
|
|
onPress={this.onSubmit}
|
|
style={{width: '90%', padding: 12, alignItems: 'center', backgroundColor: this.state.rating == 0 || this.state.ratesubmitted ? "" : Theme.colors.primary, borderColor: Theme.colors.primary, borderWidth: 2, borderRadius: 10, marginTop: 15}}
|
|
>
|
|
<Text style={{color: this.state.rating == 0 ? Theme.colors.primary : "#fff", fontSize: 16, fontFamily: 'Arial'}}>Submit Rating</Text>
|
|
</TouchableOpacity>
|
|
</>
|
|
}
|
|
<TouchableOpacity onPress={async () => {
|
|
await REQUEST("contact_us", "get", {}, {}, {}, async (res) => {
|
|
if(res.status == 1 && res.data){
|
|
openComposer({
|
|
to: res.data.contact_email_address_mobile,
|
|
subject: `Mobile App Feedback:\nCN${this.state.cn}`,
|
|
body: ''
|
|
})
|
|
}
|
|
}, (err) => {
|
|
Alert.alert("Information", `\n${err.message}`);
|
|
}, "ContactOptions", "Fetch"
|
|
)
|
|
}} style={{width: '90%', padding: 12, alignItems: 'center', marginTop: 15}}>
|
|
<Text style={{color: Theme.colors.primary, fontSize: 16, fontFamily: 'Arial'}}>Send Feedback</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</CustomSafeArea>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
app_theme: state.appThemeReducer.theme
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps, null)(TransactionDetails)
|