crazycharge-app/component/accountPages/walletPageComponent.tsx

import {
    View,
    Text,
    ScrollView,
    Pressable,
    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: '迎新優惠券',
        price: '999',
        detail: '這是一段有關迎新優惠券的說明',
        date: '至14/3/2025'
    },
    {
        title: '折扣優惠券',
        price: '888',
        detail: '這是另一段有關迎新優惠券的說明',
        date: '至15/4/2025'
    },
    {
        title: '三張優惠券',
        price: '777',
        detail: '這是第三段有關迎新優惠券的說明',
        date: '至16/9/2026'
    }
];

export const IndividualCouponComponent = ({
    title,
    price,
    detail,
    date
}: {
    title: string;
    price: string;
    detail: string;
    date: string;
}) => (
    <View className="bg-[#e7f2f8] h-[124px]  rounded-xl flex-row mb-3">
        <View className="bg-white mx-3 my-3 w-[28%] rounded-xl">
            <View className="flex-row justify-center items-center pr-4 pt-4 ">
                <Text className="color-[#02677d] text-2xl pl-2 pr-1">$</Text>
                <Text
                    className="color-[#02677d] text-3xl font-bold"
                    adjustsFontSizeToFit={true}
                >
                    {price}
                </Text>
            </View>
            <View className="items-center justify-center">
                <Text className="text-base mt-1">{title}</Text>
            </View>
        </View>

        {/* //dash line */}
        <View style={{ overflow: 'hidden' }}>
            <View
                style={{
                    borderStyle: 'dashed',
                    borderWidth: 1,
                    borderColor: '#CCCCCC',
                    margin: -1,
                    width: 0,
                    marginRight: 0,
                    height: '100%'
                }}
            >
                <View style={{ height: 60 }}></View>
            </View>
        </View>

        <View className="flex-col flex-1  m-[5%] justify-center ">
            <Text className="text-lg">{title}</Text>
            <Text className="color-[#888888] text-sm">{detail}</Text>
            <View className="flex-row items-center ">
                <Text className="text-base">有效期 </Text>
                <Text className="text-base font-bold text-[#02677d]">
                    {'   '}
                    {date}
                </Text>
            </View>
        </View>
    </View>
);

const WalletPageComponent = () => {
    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
            className="flex-1 bg-white"
            edges={['top', 'right', 'left']}
        >
            <ScrollView className="flex-1 ">
                <View className="flex-1 mx-[5%]">
                    <View style={{ marginTop: 25 }}>
                        <Pressable
                            onPress={() => {
                                if (router.canGoBack()) {
                                    router.back();
                                } else {
                                    router.replace('/accountMainPage');
                                }
                            }}
                        >
                            <CrossLogoSvg />
                        </Pressable>
                        <Text style={{ fontSize: 45, marginVertical: 25 }}>
                            錢包
                        </Text>
                    </View>
                    <View>
                        <ImageBackground
                            className="flex-col-reverse shadow-lg"
                            style={{ height: 200 }}
                            source={require('../../assets/walletCard1.png')}
                            resizeMode="contain"
                        >
                            <View className="mx-[5%] pb-6">
                                <Text className="text-white text-xl">
                                    餘額 (HKD)
                                </Text>
                                <View className="flex-row  items-center justify-between ">
                                    <Text
                                        style={{ fontSize: 52 }}
                                        className=" text-white font-bold"
                                    >
                                        {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 "
                                        style={{
                                            backgroundColor:
                                                'rgba(231, 242, 248, 0.2)'
                                        }}
                                        onPress={() => console.log('增值')}
                                    >
                                        <Text className="text-white font-bold">
                                            ＋ 增值
                                        </Text>
                                    </Pressable>
                                </View>
                            </View>
                        </ImageBackground>
                    </View>
                    <View className="flex-row-reverse mt-2 mb-6">
                        <Text className="text-[#02677D] text-lg underline">
                            更多錢包資訊
                        </Text>
                    </View>
                </View>

                <View className="w-full h-1 bg-[#DBE4E8]" />

                <View className="flex-row justify-between mx-[5%] pt-6 pb-3">
                    <Text className="text-xl">優惠券</Text>
                    <Pressable onPress={() => router.push('couponPage')}>
                        <Text className="text-xl text-[#888888]">顯示所有</Text>
                    </Pressable>
                </View>

                <View className="flex-1 flex-col mx-[5%]">
                    {coupons.slice(0, 2).map((coupon, index) => (
                        <IndividualCouponComponent
                            key={index}
                            title={coupon.title}
                            price={coupon.price}
                            detail={coupon.detail}
                            date={coupon.date}
                        />
                    ))}
                </View>
            </ScrollView>
        </SafeAreaView>
    );
};

export default WalletPageComponent;