crazycharge-app/component/accountPages/walletPageComponent.tsx

import {
    View,
    Image,
    Text,
    ScrollView,
    AppState,
    Pressable,
    ImageBackground,
    ActivityIndicator,
    Modal,
    Alert,
    TextInput,
    Linking,
    StyleSheet,
    TouchableOpacity,
    Dimensions
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { router } from 'expo-router';
import { CrossLogoSvg } from '../global/SVG';
import { use, useEffect, useRef, useState } from 'react';
import { walletService } from '../../service/walletService';
import NormalButton from '../global/normal_button';
import sha256 from 'crypto-js/sha256';
import { useChargingStore } from '../../providers/scan_qr_payload_store';
import { PaymentBonusList } from '../../service/type/walletServiceType';
import { useTranslation } from '../../util/hooks/useTranslation';

interface AmountInputModalProps {
    visible: boolean;
    onClose: () => void;
    onConfirm: (amount: number) => void;
}

const AmountInputModal = ({ visible, onClose, onConfirm }: AmountInputModalProps) => {
    const { t } = useTranslation(); // 使用翻译钩子
    const [amounts, setAmounts] = useState<Array<{amount: number, percentage: number}>>([]);
    
    useEffect(() => {
        const fetchData = async () => {
            const res: PaymentBonusList[] = await walletService.getPaymentBonusList()
            setAmounts(res.map(item => ({amount: item.base_amount, percentage: item.gift_amount})))
        }
        if (visible){
            fetchData()
        }
    }, [visible])
    
    const getFontSize = () => {
        const { width } = Dimensions.get('window');
        if (width < 320) return 8;
        if (width < 350) return 10; //super small phones
        if (width < 375) return 12; // Smaller phones
        if (width < 414) return 14; // Average phones
        return 16; // Larger phones
    };
    
    return (
        <Modal animationType="fade" transparent={true} visible={visible} onRequestClose={onClose}>
            <View
                style={{
                    flex: 1,
                    justifyContent: 'center',
                    alignItems: 'center',
                    backgroundColor: 'rgba(0,0,0,0.5)'
                }}
            >
                <View
                    style={{
                        backgroundColor: 'white',
                        padding: 20,
                        borderRadius: 10,
                        width: '80%'
                    }}
                >
                    <Text style={{ fontSize: 20, marginBottom: 20 }}>{t('wallet.amount_modal.title')}</Text>
                    <View
                        style={{
                            flexDirection: 'row',
                            flexWrap: 'wrap',
                            justifyContent: 'space-between',
                            marginBottom: 20
                        }}
                    >
                        {amounts.map((amount) => (
                            <Pressable
                                key={amount.amount}
                                onPress={() => onConfirm(amount.amount)}
                                style={{
                                    backgroundColor: '#02677D',
                                    padding: 10,
                                    borderRadius: 5,
                                    width: '48%',
                                    alignItems: 'center',
                                    marginBottom: 10
                                }}
                            >
                                <Text style={{ color: 'white', fontSize: getFontSize() }}>
                                    ${amount.amount}
                                    {amount.percentage > 0 ? ` (${t('wallet.amount_modal.gift_prefix')}${amount.percentage}) ` : ''}
                                </Text>
                            </Pressable>
                        ))}
                    </View>
                    <Text>{t('wallet.amount_modal.gift_note')}</Text>
                    <Pressable onPress={onClose} style={{ padding: 10, alignItems: 'center', marginTop: 10 }}>
                        <Text style={{ color: 'red' }}>{t('wallet.amount_modal.cancel')}</Text>
                    </Pressable>
                </View>
            </View>
        </Modal>
    );
};

export const IndividualCouponComponent = ({
    title,
    price,
    detail,
    date,
    setOpacity,
    redeem_code,
    onCouponClick = () => {}, // 添加默认空函数防止 undefined 报错
    noCircle
}: {
    title: string;
    price: string;
    detail: string;
    onCouponClick?: (clickedCoupon: string, clickedCouponDescription: string) => void;
    date: string;
    setOpacity?: boolean;
    redeem_code?: string;
    noCircle?: boolean;
}) => {
    const { t } = useTranslation(); // 使用翻译钩子
    const { promotion_code } = useChargingStore();

    return (
        <ImageBackground
            source={require('../../assets/empty_coupon.png')}
            resizeMode="contain"
            style={{ width: '100%', aspectRatio: 16 / 5, justifyContent: 'center' }}
            className={`mb-3 lg:mb-4
                ${setOpacity ? 'opacity-50' : ''}`}
        >
            {/* largest container */}
            <Pressable
                className="flex-row w-full h-full "
                onPress={setOpacity ? () => {} : () => onCouponClick(redeem_code as string, title)}
            >
                {/* price column on the left */}
                <View className="flex-row items-center w-[31%] justify-center">
                    <Text className="pl-1 lg:pl-2 text-[#02677D] text-base md:text-lg lg:text-xl">$</Text>
                    <Text className="text-3xl lg:text-4xl text-[#02677D] font-[600]">{price}</Text>
                </View>
                {/* this is a hack for good coupon display */}
                <View className="w-[7%] " />
                {/* detail column on the right */}
                <View className=" w-[62%] flex flex-col justify-evenly">
                    <View className="flex flex-row justify-between items-center w-[90%]">
                        <Text className="text-base lg:text-lg xl:text-xl">{title}</Text>

                        {/* if opacity is true=used coupon= no circle */}

                        {noCircle ? (
                            <></>
                        ) : (
                            <View
                                style={{
                                    width: 24,
                                    height: 24,
                                    borderRadius: 12,
                                    borderWidth: 2,
                                    borderColor: '#02677D',
                                    justifyContent: 'center',
                                    alignItems: 'center'
                                }}
                                className={`${promotion_code?.includes(redeem_code as string) ? 'bg-[#02677D]' : 'bg-white'}`}
                            >
                                <Text className="text-white">{promotion_code?.indexOf(redeem_code as string) + 1}</Text>
                            </View>
                        )}
                    </View>

                    <Text numberOfLines={2} ellipsizeMode="tail" className="text-xs w-[90%]">
                        {detail}
                    </Text>
                    <View className="flex flex-row">
                        <Text className="text-sm lg:text-base xl:text-lg">{t('wallet.coupon.valid_until')}{'  '}</Text>
                        <Text className="text-sm lg:text-base xl:text-lg font-bold text-[#02677D]">{date}</Text>
                    </View>
                </View>
            </Pressable>
        </ImageBackground>
    );
};

const WalletPageComponent = () => {
    const { t } = useTranslation(); // 使用翻译钩子
    const [walletBalance, setWalletBalance] = useState<string | null>(null);
    const [loading, setLoading] = useState<boolean>(false);
    const [coupons, setCoupons] = useState([]);
    const [paymentType, setPaymentType] = useState({});
    const [userID, setUserID] = useState('');
    const [amount, setAmount] = useState<number>(0);
    const [amountModalVisible, setAmountModalVisible] = useState(false);
    const [outTradeNo, setOutTradeNo] = useState('');
    const PAYMENT_CHECK_TIMEOUT = 5 * 60 * 1000; // 5 minutes in milliseconds
    const [paymentStatus, setPaymentStatus] = useState(null);
    const [isExpectingPayment, setIsExpectingPayment] = useState(false);
    const appState = useRef(AppState.currentState);
    const paymentInitiatedTime = useRef<number>(null);
    
    // 优惠券注释
    useEffect(() => {
        const fetchData = async () => {
            try {
                setLoading(true);
                const info = await walletService.getCustomerInfo();
                const coupon = await walletService.getCouponForSpecificUser(info.id);
                const useableConpon = coupon.filter((couponObj: any) => {
                    const today = new Date();
                    if (couponObj.expire_date === null) {
                        return couponObj.is_consumed === false;
                    }
                    const expireDate = new Date(couponObj.expire_date);
                    return expireDate > today && couponObj.is_consumed === false;
                });

                setCoupons(useableConpon);
            } catch (error) {
                console.error(t('wallet.error_fetching_coupons'), error);
            } finally {
                setLoading(false);
            }
        };
        fetchData();
    }, []);
    
    //monitor app state
    useEffect(() => {
        const subscription = AppState.addEventListener('change', (nextAppState) => {
            if (
                appState.current.match(/inactive|background/) &&
                nextAppState === 'active' &&
                isExpectingPayment &&
                // outTradeNo &&
                paymentInitiatedTime.current
            ) {
                const currentTime = new Date().getTime();
                if (currentTime - paymentInitiatedTime.current < PAYMENT_CHECK_TIMEOUT) {
                    checkPaymentStatus();
                } else {
                    // Payment check timeout reached
                    setIsExpectingPayment(false);
                    setOutTradeNo('');
                    paymentInitiatedTime.current = null;
                    Alert.alert(
                        t('wallet.payment_timeout_title'),
                        t('wallet.payment_timeout_message')
                    );
                }
            }
            appState.current = nextAppState;
        });

        return () => {
            subscription.remove();
        };
    }, [outTradeNo, isExpectingPayment]);
    
    //check payment status
    const checkPaymentStatus = async () => {
        try {
            const result = await walletService.checkPaymentStatus(outTradeNo);
            setPaymentStatus(result);

            if (result && !result.some((item: any) => item.errmsg?.includes(t('wallet.processing')))) {
                // Payment successful

                Alert.alert(t('wallet.payment_success_title'), t('wallet.payment_success_message'), [
                    {
                        text: t('wallet.success'),
                        onPress: async () => {
                            const wallet = await walletService.getWalletBalance();
                            setWalletBalance(wallet);
                        }
                    }
                ]);
            } else {
                Alert.alert(t('wallet.payment_failed_title'), t('wallet.payment_failed_message'));
            }
            setIsExpectingPayment(false);
            setOutTradeNo('');
            paymentInitiatedTime.current = null;
        } catch (error) {
            console.error(t('wallet.error_checking_payment_status'), error);
            Alert.alert(t('wallet.error_title'), t('wallet.payment_status_check_failed'));
        }
    };

    //fetch customer wallet balance
    useEffect(() => {
        const fetchData = async () => {
            try {
                setLoading(true);
                const info = await walletService.getCustomerInfo();
                const wallet = await walletService.getWalletBalance();
                setUserID(info.id);
                setWalletBalance(wallet);
                // setCoupons(coupon);
            } catch (error) {
                console.error(t('wallet.error_fetching_balance'), error);
            } finally {
                setLoading(false);
            }
        };

        fetchData();
    }, []);

    const formatMoney = (amount: any) => {
        if (amount === null || amount === undefined || isNaN(Number(amount))) {
            return t('wallet.loading');
        }
        if (typeof amount !== 'number') {
            amount = Number(amount);
        }

        // Check if the number is a whole number
        if (Number.isInteger(amount)) {
            return amount.toLocaleString('en-US');
        }

        // For decimal numbers, show one decimal place
        return Number(amount)
            .toFixed(1)
            .replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    };

    const filterPaymentOptions = (options: Record<string, any>, allowedKeys: string[]) => {
        return Object.fromEntries(Object.entries(options).filter(([key]) => allowedKeys.includes(key)));
    };

    function formatTime(utcTimeString: string) {
        // Parse the UTC time string
        const date = new Date(utcTimeString);

        // Add 8 hours
        date.setHours(date.getHours());

        // Format the date
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        const seconds = String(date.getSeconds()).padStart(2, '0');

        // Return the formatted string
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }

    useEffect(() => {
        const fetchPaymentType = async () => {
            const response = await walletService.selectPaymentType();
            // console.log('response', response);
            const filteredPaymentTypes = filterPaymentOptions(response, ['union_pay_wap_payment', 'payme_wap_payment']);
            setPaymentType(filteredPaymentTypes);
        };
        fetchPaymentType();
    }, []);

    const handleAmountConfirm = async (inputAmount: number) => {
        setAmountModalVisible(false);
        try {
            const response = await walletService.getOutTradeNo();
            if (response) {
                setOutTradeNo(response);
                setIsExpectingPayment(true);
                paymentInitiatedTime.current = new Date().getTime();
                const now = new Date();
                const formattedTime = formatTime(now.toISOString());

                let amount = inputAmount * 100;
                const origin = 'https://openapi-hk.qfapi.com/checkstand/#/?';
                const obj = {
                    // appcode: '6937EF25DF6D4FA78BB2285441BC05E9',
                    appcode: '636E234FB30D43598FC8F0140A1A7282',
                    goods_name: t('wallet.top_up_goods_name'),
                    out_trade_no: response,
                    paysource: 'crazycharge_checkout',
                    return_url: 'https://www.google.com',
                    failed_url: 'https://www.google.com',
                    notify_url: 'https://api.crazycharge.com.hk/api/v1/clients/qfpay/webhook',
                    sign_type: 'sha256',
                    txamt: amount,
                    txcurrcd: 'HKD',
                    txdtm: formattedTime
                };

                const paramStringify = (json: Record<string, any>, flag?: boolean) => {
                    let str = '';
                    let keysArr = Object.keys(json);
                    keysArr.sort().forEach((val) => {
                        if (!json[val]) return;
                        str += `${val}=${flag ? encodeURIComponent(json[val]) : json[val]}&`;
                    });
                    return str.slice(0, -1);
                };

                // const api_key = '8F59E31F6ADF4D2894365F2BB6D2FF2C';
                const api_key = '3E2727FBA2DA403EA325E73F36B07824';
                const params = paramStringify(obj);
                const sign = sha256(`${params}${api_key}`).toString();
                const url = `${origin}${paramStringify(obj, true)}&sign=${sign}`;

                try {
                    const supported = await Linking.canOpenURL(url);
                    if (supported) {
                        await Linking.openURL(url);
                    } else {
                        Alert.alert(t('wallet.error_title'), t('wallet.try_again_later'));
                    }
                } catch (error) {
                    console.error(t('wallet.top_up_failed'), error);
                    Alert.alert(t('wallet.error_title'), t('wallet.top_up_failed_message'));
                }
            } else {
            }
        } catch (error) {
            console.error(t('wallet.error_processing_top_up'), error);
        }
    };
    
    const handleCouponClick = async (couponName: string, couponDescription: string) => {
        router.push({
            pathname: '/couponDetailPage',
            params: {
                couponName: couponName,
                couponDescription: couponDescription
            }
        });
    };
    
    const formattedAmount = formatMoney(walletBalance);

    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={() => {
                                router.replace('/accountMainPage');
                            }}
                        >
                            <CrossLogoSvg />
                        </Pressable>
                        <Text style={{ fontSize: 45, marginVertical: 25 }}>{t('wallet.title')}</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">{t('wallet.balance_label')}</Text>
                                <View className="flex-row items-center justify-between flex-wrap w-full">
                                    <Text style={{ fontSize: 52 }} className=" text-white font-bold">
                                        {loading ? (
                                            <View className="items-center justify-center">
                                                <ActivityIndicator />
                                            </View>
                                        ) : (
                                            <>
                                                <Text>$</Text>
                                                {formattedAmount === t('wallet.loading') || amount == null ? (
                                                    <ActivityIndicator />
                                                ) : (
                                                    `${formattedAmount}`
                                                )}
                                            </>
                                        )}
                                    </Text>
                                    <Pressable
                                        className="rounded-2xl items-center justify-center p-3 px-5"
                                        style={{
                                            backgroundColor: 'rgba(231, 242, 248, 0.2)'
                                        }}
                                        onPress={() => {
                                            setAmountModalVisible(true);
                                        }}
                                    >
                                        <Text className="text-white font-bold">＋ {t('wallet.top_up')}</Text>
                                    </Pressable>
                                </View>
                            </View>
                        </ImageBackground>
                    </View>
                    <View className="flex-row-reverse mt-2 mb-6">
                        <Pressable
                            onPress={() => {
                                router.push({
                                    pathname: '/paymentRecord',
                                    params: { walletBalance: formatMoney(walletBalance) }
                                });
                            }}
                        >
                            <Text className="text-[#02677D] text-lg underline">{t('wallet.payment_records')}</Text>
                        </Pressable>
                    </View>
                </View>

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

                <View className="flex-1 flex-col mt-4 mx-[5%]">
                    <NormalButton
                        onPress={() => router.push('couponPage')}
                        title={
                            <Text className="text-white font-bold text-lg">{t('wallet.view_all_coupons')}</Text>
                        }
                        extendedStyle={{
                            padding: 15
                        }}
                    />
                </View>
            </ScrollView>
            <AmountInputModal
                visible={amountModalVisible}
                onClose={() => setAmountModalVisible(false)}
                onConfirm={handleAmountConfirm}
            />
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    button: {
        maxWidth: '100%',
        fontSize: 16,
        backgroundColor: '#025c72',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 12,
        padding: 20
    },
    buttonPressed: {
        backgroundColor: '#28495c'
    }
});

export default WalletPageComponent;