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 { walletService } from '../../service/walletService';

import { formatCouponDate, formatDate } from '../../util/lib';

export const IndividualCouponComponent = ({
    title,
    price,
    detail,
    date
}: {
    title: string;
    price: string;
    detail: string;
    date: string;
}) => {
    return (
        <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 [walletBalance, setWalletBalance] = useState<string | null>(null);
    const [loading, setLoading] = useState<boolean>(false);
    const [coupons, setCoupons] = useState([]);

    useEffect(() => {
        try {
            setLoading(true);

            const fetchWalletBalanceAndCoupon = async () => {
                await new Promise((resolve) => setTimeout(resolve, 5000));
                const balance = await walletService.getWalletBalance();
                const coupon = await walletService.getCoupon();
                console.log(JSON.stringify(coupon));
                setCoupons(coupon);
                setWalletBalance(balance);
                setLoading(false);
            };
            fetchWalletBalanceAndCoupon();
        } catch (error) {
            console.log(error);
        }
    }, []);

    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"
                                    >
                                        {loading ? (
                                            <View className="items-center">
                                                <ActivityIndicator />
                                            </View>
                                        ) : (
                                            formatMoney(walletBalance)
                                        )}
                                    </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
                        .filter(
                            (coupon) =>
                                coupon.is_consumned === false &&
                                new Date(coupon.expire_date) > new Date()
                        )
                        .slice(0, 2)
                        .map((coupon, index) => (
                            <IndividualCouponComponent
                                key={index}
                                title={coupon.name}
                                price={coupon.amount}
                                detail={coupon.description}
                                date={formatCouponDate(coupon.expire_date)}
                            />
                        ))}
                </View>
            </ScrollView>
        </SafeAreaView>
    );
};

export default WalletPageComponent;