311 lines
13 KiB
JavaScript
311 lines
13 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 CustomSafeArea from '../../../components/safeArea.component.js';
|
|
|
|
|
|
class TransactionDetails extends React.Component {
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
}
|
|
|
|
state = {
|
|
loading: false,
|
|
ratesubmitted: false,
|
|
rating: 0,
|
|
session: '',
|
|
transaction: [],
|
|
umail: "",
|
|
cn: ""
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.init()
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
|
|
}
|
|
|
|
init = async () => {
|
|
this.props.route.params.data.is_feedback_disabled = false
|
|
let session = await DB.session()
|
|
let user_profile = await DB.profile()
|
|
this.setState({ cn: user_profile.data.card_number, transaction: this.props.route.params.data, session: session })
|
|
}
|
|
|
|
renderRatings = (rating, disabled) => {
|
|
return [1, 2, 3, 4, 5].map((rate, i) => {
|
|
return (
|
|
<TouchableOpacity disabled={disabled} key={i} style={{flex: 1, alignSelf: 'center', padding: 1}} activeOpacity={rating > 0 || !this.state.ratesubmitted ? 0.5 : 1 } onPress={this.state.transaction.rating == 0 && !this.state.ratesubmitted ? () => this.setState({ rating: rate }) : null} >
|
|
<Icon.AntDesign name={rating >= rate ? "star" : "staro"} color={rating > 0 || !this.state.ratesubmitted ? Theme.colors.yellow : Theme.colors.darkerGray} size={40} />
|
|
</TouchableOpacity>
|
|
)
|
|
})
|
|
}
|
|
|
|
onSubmit = async () => {
|
|
if (this.state.transaction.is_feedback_disabled) return false
|
|
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.state.transaction.trans_num,
|
|
rate: this.state.rating
|
|
}, (result) => {
|
|
this.setState({ loading: false, rating: 0, ratesubmitted: true })
|
|
Platform.OS == 'ios' ? setTimeout(() => {
|
|
Alert.alert(result.message, 'Rating has been submitted')
|
|
}, 300) :
|
|
Alert.alert(result.message, 'Rating has been submitted')
|
|
}, (error) => {
|
|
this.setState({ loading: false })
|
|
})
|
|
}
|
|
|
|
checkPendingTransaction = () => {
|
|
if(this.state.rating > 0) {
|
|
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()
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<CustomSafeArea>
|
|
<Elements.loader visible={this.state.loading} />
|
|
<CustomHeader
|
|
title={this.state.transaction.date}
|
|
onBackPress={() => this.checkPendingTransaction()}
|
|
menu={false}
|
|
backscreen="MyProfile"
|
|
navigation={this.props.navigation}
|
|
/>
|
|
<View style={{flex: 1}}>
|
|
<View style={{flexDirection: 'row', padding: 13, backgroundColor: Theme.colors.darkerGray}}>
|
|
<View style={{flex: 2}}>
|
|
<Text style={{fontFamily: 'Arial', fontSize: 16, color: '#fff'}}>Sales Invoice Number</Text>
|
|
</View>
|
|
<View style={{flex: 1, textAlign: 'right', alignItems: 'flex-end'}}>
|
|
<Text style={{fontFamily: 'Arial', fontSize: 16, color: '#fff'}}>{this.state.transaction.trans_num || 455826}</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} />
|
|
<View style={{alignItems: 'center'}}>
|
|
<Text style={{padding: 20, color: Theme.colors.darkGray}}>Rate Your Experience</Text>
|
|
<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)}
|
|
</View>
|
|
<TouchableOpacity activeOpacity={1} onPress={() => this.state.transaction.is_feedback_disabled || this.state.transaction.is_disabled || this.state.ratesubmitted || this.state.rating == 0 ? null : 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>
|
|
{this.state.transaction.is_feedback_disabled ? null :
|
|
<TouchableOpacity disabled={this.state.transaction.is_disabled} 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${cn}`,
|
|
body: ''
|
|
})
|
|
} else {
|
|
console.log(res.message, res.data)
|
|
}
|
|
}
|
|
)
|
|
}} 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)
|
|
|
|
// export default function TransactionDetails(navigation) {
|
|
|
|
// const [loading, setloading] = useState(false)
|
|
// const [ratesubmitted, setratesubmitted] = useState(false)
|
|
// const [rating, setrating] = useState(0);
|
|
// const [session, setsession] = useState('');
|
|
// const [transaction, settransaction] = useState([]);
|
|
// const [umail, setumail] = useState("")
|
|
// const [cn, setcn] = useState("")
|
|
|
|
// const init = async () => {
|
|
// navigation.route.params.data.is_feedback_disabled = false
|
|
// let session = await DB.session()
|
|
// let user_profile = await DB.profile()
|
|
// await setcn(user_profile.data.card_number)
|
|
// await settransaction(navigation.route.params.data)
|
|
// await setsession(session)
|
|
// console.log("transaction", transaction, session)
|
|
// }
|
|
|
|
// useEffect(() => {
|
|
// init()
|
|
// }, [])
|
|
|
|
// const renderRatings = (rating, disabled) => {
|
|
// return [1, 2, 3, 4, 5].map((rate, i) => {
|
|
// return (
|
|
// <TouchableOpacity disabled={disabled} key={i} style={{flex: 1, alignSelf: 'center', padding: 1}} activeOpacity={rating > 0 || !ratesubmitted ? 0.5 : 1 } onPress={transaction.rating == 0 && !ratesubmitted ? () => setrating(rate) : null} >
|
|
// <Icon.AntDesign name={rating >= rate ? "star" : "staro"} color={rating > 0 || !ratesubmitted ? Theme.colors.yellow : Theme.colors.darkerGray} size={40} />
|
|
// </TouchableOpacity>
|
|
// )
|
|
// })
|
|
// }
|
|
|
|
// const onSubmit = async () => {
|
|
// if (transaction.is_feedback_disabled) return false
|
|
// setloading(true)
|
|
// REQUEST('transaction_rate', 'post', {
|
|
// Authorization: session.token,
|
|
// Accept: 'application/json',
|
|
// card_number: session.user.card_number
|
|
// }, {}, {
|
|
// trans_num: transaction.trans_num,
|
|
// rate: rating
|
|
// }, function(result){
|
|
// console.log(result)
|
|
// setloading(false)
|
|
// setrating(0)
|
|
// Platform.OS == 'ios' ? setTimeout(() => {
|
|
// Alert.alert(result.message, 'Rating has been submitted')
|
|
// }, 300) :
|
|
// Alert.alert(result.message, 'Rating has been submitted')
|
|
// setratesubmitted(true)
|
|
// }, function(error){
|
|
// setloading(false)
|
|
// console.log(error)
|
|
// })
|
|
// }
|
|
|
|
// const checkPendingTransaction = () => {
|
|
// if(rating > 0) {
|
|
// Alert.alert(
|
|
// '',
|
|
// 'You have an unsaved rating, are you sure you want to navigate back?',
|
|
// [
|
|
// {
|
|
// text: 'No',
|
|
// style: 'cancel',
|
|
// },
|
|
// {
|
|
// text: 'Yes',
|
|
// onPress: async () => {
|
|
// navigation.route.params?.onBackPress()
|
|
// navigation.navigation.goBack()
|
|
// },
|
|
// },
|
|
// ],
|
|
// {cancelable: true},
|
|
// );
|
|
// } else {
|
|
// navigation.route.params?.onBackPress()
|
|
// navigation.navigation.goBack()
|
|
// }
|
|
// }
|
|
|
|
// return (
|
|
// <SafeAreaView style={{flex: 1}}>
|
|
// <Elements.loader visible={loading} />
|
|
// <CustomHeader
|
|
// title={transaction.date}
|
|
// onBackPress={() => checkPendingTransaction()}
|
|
// menu={false}
|
|
// backscreen="MyProfile"
|
|
// navigation={navigation}
|
|
// />
|
|
// <View style={{flex: 1}}>
|
|
// <View style={{flexDirection: 'row', padding: 13, backgroundColor: Theme.colors.darkerGray}}>
|
|
// <View style={{flex: 2}}>
|
|
// <Text style={{fontFamily: 'Arial', fontSize: 16, color: '#fff'}}>Sales Invoice Number</Text>
|
|
// </View>
|
|
// <View style={{flex: 1, textAlign: 'right', alignItems: 'flex-end'}}>
|
|
// <Text style={{fontFamily: 'Arial', fontSize: 16, color: '#fff'}}>{transaction.trans_num || 455826}</Text>
|
|
// </View>
|
|
// </View>
|
|
// <View style={{padding: 10, paddingLeft: 13,paddingRight: 13}}>
|
|
// <Text style={{fontFamily: 'Arial', color: "black"}}>{transaction.station || 'APP'}</Text>
|
|
// </View>
|
|
// <Elements.transactiontable data={transaction} />
|
|
// <View style={{alignItems: 'center'}}>
|
|
// <Text style={{padding: 20, color: Theme.colors.darkGray}}>Rate Your Experience</Text>
|
|
// <View style={{flexDirection: 'row', alignItems: 'center', width: '60%'}}>
|
|
// {renderRatings(rating ? rating : transaction.rating, transaction.is_feedback_disabled || transaction.is_disabled)}
|
|
// </View>
|
|
// <TouchableOpacity activeOpacity={1} onPress={() => transaction.is_feedback_disabled || transaction.is_disabled || ratesubmitted || rating == 0 ? null : onSubmit()} style={{width: '90%', padding: 12, alignItems: 'center', backgroundColor: rating == 0 || ratesubmitted ? "" : Theme.colors.primary, borderColor: Theme.colors.primary, borderWidth: 2, borderRadius: 10, marginTop: 15}}>
|
|
// <Text style={{color: rating == 0 ? Theme.colors.primary : "#fff", fontSize: 16, fontFamily: 'Arial'}}>Submit Rating</Text>
|
|
// </TouchableOpacity>
|
|
// {transaction.is_feedback_disabled ? null :
|
|
// <TouchableOpacity disabled={transaction.is_disabled} 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${cn}`,
|
|
// body: ''
|
|
// })
|
|
|
|
// }else{
|
|
// console.log(res.message, res.data)
|
|
// }
|
|
// }
|
|
// )
|
|
// }} 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>
|
|
// </SafeAreaView>
|
|
// );
|
|
// }
|