crazycharge-app/component/global/vipQrPageComponent.tsx

import { View, Text, ScrollView, Pressable, Image, useWindowDimensions, ActivityIndicator } from 'react-native';
import React, { useContext, useEffect, useState } from 'react';
import { SafeAreaView } from 'react-native-safe-area-context';
import { router } from 'expo-router';
import { CrossLogoSvg, RightArrowIconSvg } from '../global/SVG';
import { walletService } from '../../service/walletService';

const VipQrPageComponent = () => {
    const { width } = useWindowDimensions();
    const qrCodeSize = width * 0.8; // 80% of screen width
    const [loading, setLoading] = useState(true);
    const [transactions, setTransactions] = useState<any[]>([]);

    useEffect(() => {
        const fetchTransactionRecords = async () => {
            try {
                setLoading(true);
                const response = await walletService.getTransactionRecord();
                if (response && Array.isArray(response)) {
                    setTransactions(response);
                } else {
                    setTransactions([]);
                }
            } catch (error) {
                console.error('Error fetching transaction records:', error);
                setTransactions([]);
            } finally {
                setLoading(false);
            }
        };

        fetchTransactionRecords();
    }, []);

    return (
        <SafeAreaView className="flex-1 bg-white" edges={['top', 'right', 'left']}>
            <ScrollView className="flex-1 mx-[5%]" showsVerticalScrollIndicator={false}>
                <View style={{ marginTop: 25 }}>
                    <Pressable
                        onPress={() => {
                            router.replace('/mainPage');
                        }}
                    >
                        <CrossLogoSvg />
                    </Pressable>
                    <Text style={{ fontSize: 45, marginVertical: 25 }}>專屬會員二維碼</Text>
                </View>
                {loading ? (
                    <View className="items-center justify-center mt-10">
                        <ActivityIndicator size="large" color="#02677D" />
                        <Text className="text-center mt-4">Loading...</Text>
                    </View>
                ) : transactions.length > 0 ? (
                    <View className="items-center">
                        <Text className="text-lg self-start mb-4">掃描以下二維碼即可進入專屬VIP區域。</Text>
                        <Image
                            source={require('../../assets/vipqrcode.png')}
                            className=""
                            style={{ width: qrCodeSize, height: qrCodeSize }}
                        />
                    </View>
                ) : (
                    <View className="items-center mt-10">
                        <Text className="text-xl text-center">您需要至少消費一次才可享用VIP專屬優惠！</Text>
                    </View>
                )}
            </ScrollView>
        </SafeAreaView>
    );
};

export default VipQrPageComponent;