Untitled
unknown
plain_text
2 years ago
16 kB
8
Indexable
import React, {useEffect, useState} from 'react'
import { StyleSheet, Text, View, TouchableOpacity, ImageBackground, ActivityIndicator, Image, Dimensions, Platform, KeyboardAvoidingView, Clipboard } from 'react-native'
import { useNavigation } from '@react-navigation/native';
import { ScrollView, TextInput } from 'react-native-gesture-handler';
import HeaderNavigationCustom from '../../components/HeaderNavigationCustom'
import images from '../../resources/images'
import * as THEME from '../../configs/mainTheme'
import { HEIGHT_STATUS_BAR } from '../../utils/UtilDeviceInfo'
import { checkStatusPaymentPointTransaction } from '../../api/general';
import { uuidv4, formartMoneyVN, formatNumberToVietnamese, convertMoneyAndPoint } from '../../utils/utils';
import PlaceholderLoading from '../../components/PlaceholderLoading';
import color from '../../../constant/primary_color';
import Icon from 'react-native-vector-icons/FontAwesome5';
import CustomStatusBar from '../../components/CustomStatusBar';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import ToastCustom from '../../components/ToastCustom';
import moment from 'moment'
import { loadPathImage } from '../../utils/utilObject';
import FastImage from 'react-native-fast-image';
moment.locale('vi');
const screenWidth = Dimensions.get('window').width;
const widthView = screenWidth - 30;
export default function PaymentPointStatusTransaction(props) {
const orderId = props?.route?.params?.orderId
const fromScreen = props?.route?.params?.fromScreen
const isLoading = props?.route?.params?.isLoading
const navigate = useNavigation();
const [showLoadingIcon, setShowLoadingIcon] = useState(true)
const [titleTransaction, setTitleTransaction] = useState()
const [infoTransaction, setInfoTransaction] = useState()
const [timeTransaction, setTimeTransaction] = useState()
const [statusTransaction, setStatusTransaction] = useState()
const [isShowImgStatic, setIsShowImgStatic] = useState(false)
const STATUS_DONT_HAVE_ERROR = 0;
// === START TOAST MESSAGE === //
const [ isShowToast, setIsShowToast] = useState(false)
const [ typeToast, setTypeToast] = useState()
const [ contentToast, setContentToast] = useState()
const showToast = ({type, content}) => {
setIsShowToast(true)
setTypeToast(type)
setContentToast(content)
setTimeout(() => {
setIsShowToast(false)
}, 1500)
}
// === END TOAST MESSAGE === //
const handleCheckStatus = async () => {
let resultCheckTransaction = await checkStatusPaymentPointTransaction({ orderId });
let resultInfoTransaction = resultCheckTransaction?.data;
setInfoTransaction(resultInfoTransaction)
setStatusTransaction(resultInfoTransaction.statusTransaction[resultInfoTransaction?.statusTransaction.length - 1]?.status)
if(resultInfoTransaction.errorCode == 0) {
let [time, date] = new Date(resultInfoTransaction?.transactionTs)?.toLocaleString()?.split(',')
setTitleTransaction('Giao dịch thành công')
setTimeTransaction(`${time} - ${date}`)
} else {
setTitleTransaction('Giao dịch thất bại')
}
setShowLoadingIcon(false)
}
useEffect(() => {
setShowLoadingIcon(true)
setTimeout(() => {
handleCheckStatus()
setTimeout(() => {
setIsShowImgStatic(true)
}, 3000)
}, 500)
setIsShowImgStatic(false)
}, [isLoading])
return (
<SafeAreaProvider style={{backgroundColor: 'white'}}>
{/* Header */}
<CustomStatusBar backgroundColor='#770101'/>
<ToastCustom typeToast={typeToast} contentToast={contentToast} isShowToast={isShowToast} />
<View style={[styles.headerContent, { height: '7%' }]}>
<Image
style={{ height: '100%', width: '100%', }}
source={images.background_header}
/>
<View style={styles.groupFeature}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 15, }}>
<View style={{ flexDirection: 'row' }}>
<TouchableOpacity
onPress={() => {
if(fromScreen == 'HistorySavePointScreen') {
navigate.goBack()
} else {
navigate.navigate('PaymentPointTransactionList', { isLoading: uuidv4() })
}
}}
>
<Image
style={{ height: 30, width: 30, tintColor: '#fff'}}
source={images.ic_back}
/>
</TouchableOpacity>
<Text style={{fontSize: 20, fontFamily: THEME.FONT_MEDIUM, marginBottom: 3, color: '#fff', marginLeft: 10}}>Chi tiết giao dịch</Text>
</View>
<TouchableOpacity
onPress={() => {
navigate.navigate('PaymentPointTransactionList', { isLoading: uuidv4() })
}}
>
<Image
style={{ height: 30, width: 30, tintColor: '#fff',}}
source={images.ic_history_transaction}
/>
</TouchableOpacity>
</View>
</View>
</View>
{
showLoadingIcon &&
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', }}>
<Image
source={images.ic_loading_payment}
style={{ width: 150, height: 150 }}
/>
</View>
}
{
!showLoadingIcon &&
<ScrollView>
<View style={styles.infoTransactionStyle}>
{
infoTransaction?.errorCode == STATUS_DONT_HAVE_ERROR ?
<FastImage
source={isShowImgStatic ? images.ic_check_success : images.ic_check_success_amination}
style={isShowImgStatic ? styles.iconCheckSuccessStatic : styles.iconCheckSuccessAnimation}
resizeMode={FastImage.resizeMode.cover}
/> :
<FastImage
source={isShowImgStatic ? images.ic_fail_static : images.ic_fail_animation}
style={isShowImgStatic ? styles.iconFailStatic : styles.iconFailAnimation}
resizeMode={FastImage.resizeMode.cover}
/>
}
<Text style={{ alignSelf: 'center', fontSize: 18, marginTop: 80, marginBottom: 10, }}>{titleTransaction}</Text>
<Text style={{ alignSelf: 'center', fontSize: 22, fontWeight: '700' }}>{formatNumberToVietnamese(infoTransaction?.amount)}đ</Text>
{
infoTransaction?.errorCode != STATUS_DONT_HAVE_ERROR &&
<>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginVertical: 20, }}>
<Text>Lý do</Text>
<Text style={{ fontWeight: '700', color: color.red_primary, alignSelf: 'flex-end', width: '65%', textAlign: 'right',}}>{infoTransaction?.message}</Text>
</View>
<View style={styles.line_br}></View>
</>
}
{
infoTransaction?.errorCode == STATUS_DONT_HAVE_ERROR ?
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginVertical: 20, }}>
<Text>Số điểm được nạp</Text>
<Text style={[styles.textDetailValueTransaction, { fontSize: 18, fontWeight: '700', color: '#00983D',}]}>{formatNumberToVietnamese(convertMoneyAndPoint('POINT', infoTransaction?.amount))} point</Text>
</View> :
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginVertical: 20, }}>
<Text>Số điểm thực hiện</Text>
<Text style={[styles.textDetailValueTransaction, { fontSize: 18, fontWeight: '700', color: color.red_primary, }]}>{formatNumberToVietnamese(convertMoneyAndPoint('POINT', infoTransaction?.amount))} point</Text>
</View>
}
<View style={styles.line_br}></View>
{
infoTransaction?.errorCode == STATUS_DONT_HAVE_ERROR &&
<>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginVertical: 20, }}>
<Text>Mã giao dịch</Text>
<View style={{ flexDirection: 'row', alignSelf: 'flex-end', textAlign: 'right', }}>
<Text style={{}}>{infoTransaction?.appotapayTransId}</Text>
<TouchableOpacity
onPress={() => {
showToast({ content: 'Đã sao chép', type: 'success'})
Clipboard.setString(infoTransaction?.appotapayTransId)
}}
style={{paddingLeft: 5,}}
activeOpacity={0.8}
>
<Icon
name='copy'
size={20}
color={color.red_primary}
/>
</TouchableOpacity>
</View>
</View>
<View style={styles.line_br}></View>
</>
}
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginVertical: 20 }}>
<Text>Thời gian thanh toán</Text>
{
statusTransaction == STATUS_DONT_HAVE_ERROR ?
<Text style={styles.textDetailValueTransaction}>{timeTransaction}</Text> :
<Text style={styles.textDetailValueTransaction}>{`${moment(infoTransaction?.createAt).format('L')}`} - {`${moment(infoTransaction?.createAt).format('LT')}`}</Text>
}
</View>
<View style={styles.line_br}></View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginVertical: 20 }}>
<Text>Dịch vụ</Text>
<Text style={[styles.textDetailValueTransaction, { fontWeight: '700' }]}>Nạp điểm từ tài khoản Ngân hàng {infoTransaction?.bankCode}</Text>
</View>
<View style={styles.line_br}></View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: 20, marginBottom: 5 }}>
<Image
source={{ uri: loadPathImage(infoTransaction?.paymentPointBank?.image?.path) }}
style={{ width: 80, height: 50, }}
resizeMode='contain'
/>
<Text style={styles.textDetailValueTransaction}>{infoTransaction?.paymentPointBank?.bankName}</Text>
</View>
</View>
</ScrollView>
}
<View style={styles.blockBtnBottomStyle}>
<TouchableOpacity
activeOpacity={0.5}
onPress={() => {
navigate.navigate('PaymentPointChooseTypeBank', { isLoading: uuidv4() })
}}
style={styles.btnBottomStyle}
>
<Icon
name='plus'
size={18}
color={color.red_primary}
/>
<Text style={{ color: color.red_primary, fontWeight: 'bold', fontSize: 18, marginLeft: 10, }}>Tạo giao dịch mới</Text>
</TouchableOpacity>
</View>
</SafeAreaProvider>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
paddingTop: HEIGHT_STATUS_BAR,
position: 'relative'
},
headerContent: {
position: 'relative',
},
groupFeature: {
position: 'absolute',
width: widthView,
top: 15,
marginLeft: 10
},
ic_service: {
height: 40,
width: 40,
resizeMode: 'cover',
marginRight: 15,
paddingVertical: 20
},
ic_service_v2: {
height: 42,
width: 42,
resizeMode: 'cover',
marginRight: 15,
paddingVertical: 20
},
groupBtnFilter: {
flexDirection: 'row',
alignItems: 'center',
padding: 15,
justifyContent: 'space-between',
borderBottomWidth: 1,
borderBottomColor: color.gray_5
},
blockBtnBottomStyle: {
width: '100%',
position: 'absolute',
zIndex: 1001,
bottom: Platform.OS == 'android' ? 50 : 75,
paddingBottom: 35,
paddingTop: 15,
},
btnBottomStyle: {
width: widthView,
marginLeft: 15,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
borderWidth: 1,
borderColor: color.red_primary,
height: 55,
borderRadius: 8,
flexDirection: 'row'
},
line_br: {
height: 1,
width: '100%',
backgroundColor: color.gray_5,
alignSelf: 'center'
},
infoTransactionStyle: {
marginLeft: 15,
paddingTop: 10,
width: widthView,
marginTop: 25,
borderWidth: 1,
borderColor: color.gray_4,
paddingBottom: 15,
paddingHorizontal: 15,
borderRadius: 14,
position: 'relative'
},
textDetailValueTransaction: {
alignSelf: 'flex-end',
width: '50%',
textAlign: 'right',
},
iconCheckSuccessAnimation: {
position: 'absolute',
width: 100,
height: 100,
alignSelf: 'center',
marginBottom: 5,
},
iconCheckSuccessStatic: {
position: 'absolute',
width: 90,
height: 90,
alignSelf: 'center',
marginBottom: 5,
},
iconFailAnimation: {
position: 'absolute',
width: 95,
height: 95,
alignSelf: 'center',
marginBottom: 5,
},
iconFailStatic: {
position: 'absolute',
width: 90,
height: 90,
alignSelf: 'center',
marginBottom: 5,
}
})Editor is loading...