Merge pull request #58 from MGT-Limited/57-get-wallet-api

57 get wallet api

component/accountPages/changePasswordPageComponent.tsx

@@ -1,5 +1,5 @@
 import { View, Text, ScrollView, StyleSheet, Pressable } from 'react-native';
-import React, { useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { router } from 'expo-router';
 import { CrossLogoSvg } from '../global/SVG';

component/accountPages/walletPageComponent.tsx

@@ -3,12 +3,15 @@ import {
     Text,
     ScrollView,
     Pressable,
-    ImageBackground
+    ImageBackground,
+    ActivityIndicator
 } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { router } from 'expo-router';
 import { CrossLogoSvg } from '../global/SVG';
-
+import { useEffect, useState } from 'react';
+import * as SecureStore from 'expo-secure-store';
+import { walletService } from '../../service/walletService';
 const coupons = [
     {
         title: '迎新優惠券',
@@ -89,7 +92,33 @@ export const IndividualCouponComponent = ({
 );
 
 const WalletPageComponent = () => {
-    const image = { uri: 'https://legacy.reactjs.org/logo-og.png' };
+    const [token, setToken] = useState<string | null>(null);
+    const [walletBalance, setWalletBalance] = useState<string | null>(null);
+    useEffect(() => {
+        const getToken = async () => {
+            const storedToken = await SecureStore.getItemAsync('accessToken');
+            setToken(storedToken);
+        };
+        getToken();
+    }, []);
+
+    useEffect(() => {
+        const fetchWalletBalance = async () => {
+            if (token) {
+                await new Promise((resolve) => setTimeout(resolve, 2000));
+                const balance = await walletService.getWalletBalance(token);
+                setWalletBalance(balance);
+            }
+        };
+        fetchWalletBalance();
+    }, [token]);
+
+    const formatMoney = (amount: any) => {
+        if (typeof amount !== 'number') {
+            amount = Number(amount);
+        }
+        return amount.toLocaleString('en-US');
+    };
 
     return (
         <SafeAreaView
@@ -130,7 +159,14 @@ const WalletPageComponent = () => {
                                         style={{ fontSize: 52 }}
                                         className=" text-white font-bold"
                                     >
-                                        $2711.8
+                                        {walletBalance ? (
+                                            formatMoney(walletBalance)
+                                        ) : (
+                                            <View className="items-center">
+                                                <ActivityIndicator />
+                                            </View>
+                                        )}
+                                        {/* Format the wallet balance */}
                                     </Text>
                                     <Pressable
                                         className="rounded-2xl items-center justify-center p-3 px-5 pr-6 "

service/walletService.tsx

@@ -0,0 +1,53 @@
+import axios from 'axios';
+
+import { EXPO_PUBLIC_API_URL } from '@env';
+
+class WalletService {
+    private apiUrl: string;
+
+    constructor() {
+        this.apiUrl = EXPO_PUBLIC_API_URL;
+        if (!this.apiUrl) {
+            throw new Error('API URL is not defined in environment variables');
+        }
+    }
+
+    async getWalletBalance(token: string | null) {
+        try {
+            const response = await axios.get(
+                `${this.apiUrl}/clients/customer/wallet`,
+                {
+                    headers: {
+                        Authorization: `Bearer ${token}`
+                    }
+                }
+            );
+            if (response.status === 200) {
+                const walletBalance = response.data.data;
+                // console.log(`i am wallet balance`, walletBalance)
+                // console.log('getWalletBalance successful!');
+
+                return walletBalance;
+            } else {
+                console.error('getWalletBalance failed:', response.status);
+                return false;
+            }
+        } catch (error) {
+            if (axios.isAxiosError(error)) {
+                console.error(
+                    'getWallet error:',
+                    error.response?.data?.message || error.message
+                );
+            } else {
+                console.error('An unexpected error occurred:', error);
+            }
+            return false;
+        }
+    }
+
+    // async logout() {
+    //     await SecureStore.deleteItemAsync('accessToken');
+    //     console.log('log out successfully, accessToken deleted');
+    // }
+}
+export const walletService = new WalletService();