Untitled
plain_text
24 days ago
16 kB
2
Indexable
Never
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, } })