Untitled

mail@pastecode.io avatarunknown
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, 
    }
})