at least pay once to use vip code

component/global/vipQrPageComponent.tsx

@@ -1,12 +1,37 @@
-import { View, Text, ScrollView, Pressable, Image, useWindowDimensions } from 'react-native';
-import React, { useContext } from 'react';
+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();
+                console.log('***********************response', response);
+                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']}>
@@ -21,14 +46,25 @@ const VipQrPageComponent = () => {
                     </Pressable>
                     <Text style={{ fontSize: 45, marginVertical: 25 }}>專屬會員二維碼</Text>
                 </View>
-                <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>
+                {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>
     );