crazycharge-app/component/accountPages/walletPageComponent.tsx

import {
    View,
    Image,
    Text,
    ScrollView,
    AppState,
    Pressable,
    ImageBackground,
    ActivityIndicator,
    Modal,
    Alert,
    TextInput,
    Linking,
    Dimensions
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { router } from 'expo-router';
import { CrossLogoSvg } from '../global/SVG';
import { useEffect, useRef, useState } from 'react';
import { walletService } from '../../service/walletService';
// import UnionPayImage from '../../assets/unionpay.png';
// import PayMeImage from '../../assets/payme.png';
import { formatCouponDate, formatDate } from '../../util/lib';
import { set } from 'date-fns';
import { reloadAppAsync } from 'expo';
import sha256 from 'crypto-js/sha256';
import { useCallback } from 'react';

import { useChargingStore } from '../../providers/scan_qr_payload_store';

const AmountInputModal = ({ visible, onClose, onConfirm }) => {
    const amounts = [
        // { amount: 1, percentage: 0 },
        { amount: 200, percentage: 0 },
        { amount: 500, percentage: 5 },
        { amount: 1000, percentage: 10 },
        { amount: 2000, percentage: 15 }
    ];

    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 }}>選擇增值金額</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 ? ` (+${amount.percentage}%) ` : ''}
                                </Text>
                            </Pressable>
                        ))}
                    </View>
                    <Text>*括號為回贈比例</Text>
                    <Pressable onPress={onClose} style={{ padding: 10, alignItems: 'center', marginTop: 10 }}>
                        <Text style={{ color: 'red' }}>取消</Text>
                    </Pressable>
                </View>
            </View>
        </Modal>
    );
};

export const IndividualCouponComponent = ({
    title,
    price,
    detail,
    date,
    setOpacity,
    redeem_code,
    onCouponClick,
    noCircle
}: {
    title: string;
    price: string;
    detail: string;
    onCouponClick?: (clickedCoupon: string, clickedCouponDescription: string) => void;
    date: string;
    setOpacity?: boolean;
    redeem_code?: string;
    noCircle?: boolean;
}) => {
    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)}
            >
                {/* price column on the left */}
                <View className="flex-row items-center w-[31%] items-center 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) ? 'bg-[#02677D]' : 'bg-white'}`}
                            >
                                <Text className="text-white">{promotion_code?.indexOf(redeem_code) + 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">有效期至 {'  '}</Text>
                        <Text className="text-sm lg:text-base xl:text-lg font-bold text-[#02677D]">{date}</Text>
                    </View>
                </View>
            </Pressable>
        </ImageBackground>
    );
};

const WalletPageComponent = () => {
    const [walletBalance, setWalletBalance] = useState<string | null>(null);
    const [loading, setLoading] = useState<boolean>(false);
    const [modalVisible, setModalVisible] = useState(false);
    const [coupons, setCoupons] = useState([]);
    const [paymentType, setPaymentType] = useState({});
    const [userID, setUserID] = useState('');
    const [selectedPaymentType, setSelectedPaymentType] = useState<string | null>(null);
    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(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) {
            } 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(
                        'Payment Timeout',
                        'The payment status check has timed out. Please check your payment history.'
                    );
                }
            }
            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) => item.errmsg?.includes('處理中'))) {
                // Payment successful

                Alert.alert('Success', 'Payment was successful!', [
                    {
                        text: '成功',
                        onPress: async () => {
                            const wallet = await walletService.getWalletBalance();
                            setWalletBalance(wallet);
                        }
                    }
                ]);
            } else {
                Alert.alert('Payment Failed', 'Payment was not successful. Please try again.');
            }
            setIsExpectingPayment(false);
            setOutTradeNo('');
            paymentInitiatedTime.current = null;
        } catch (error) {
            console.error('Failed to check payment status:', error);
            Alert.alert('Error', 'Failed to check payment status. Please check your payment history.');
        }
    };

    //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) {
            } finally {
                setLoading(false);
            }
        };

        fetchData();
    }, []);

    const formatMoney = (amount: any) => {
        if (amount === null || amount === undefined || isNaN(Number(amount))) {
            return '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, allowedKeys) => {
        return Object.fromEntries(Object.entries(options).filter(([key]) => allowedKeys.includes(key)));
    };

    function formatTime(utcTimeString) {
        // 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) => {
        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);
                const out_trade_no = response;

                let amount = inputAmount * 100;
                const origin = 'https://openapi-hk.qfapi.com/checkstand/#/?';
                const obj = {
                    // appcode: '6937EF25DF6D4FA78BB2285441BC05E9',
                    appcode: '636E234FB30D43598FC8F0140A1A7282',
                    goods_name: 'Crazy Charge 錢包增值',
                    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, flag?) => {
                    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('錯誤', '請稍後再試');
                    }
                } catch (error) {
                    console.error('Top-up failed:', error);
                    Alert.alert('Error', 'Failed to process top-up. Please try again.');
                }
            } else {
            }
        } catch (error) {}
    };
    // const handleCouponClick = async (clickedCoupon: string) => {
    //     Alert.alert(
    //         '立即使用優惠券', // Title
    //         '按確認打開相機，掃描充電站上的二維碼以使用優惠券', // Message
    //         [
    //             {
    //                 text: '取消',
    //                 style: 'cancel'
    //             },
    //             {
    //                 text: '確認',
    //                 onPress: () => router.push('scanQrPage')
    //             }
    //         ]
    //     );
    // };
    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={() => {
                                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 justify-center">
                                                <ActivityIndicator />
                                            </View>
                                        ) : (
                                            <>
                                                <Text>$</Text>
                                                {formattedAmount === 'LOADING' || amount == null ? (
                                                    <ActivityIndicator />
                                                ) : (
                                                    `${formattedAmount}`
                                                )}
                                            </>
                                        )}
                                    </Text>
                                    <Pressable
                                        className="rounded-2xl items-center justify-center p-3 px-5 pr-6 "
                                        style={{
                                            backgroundColor: 'rgba(231, 242, 248, 0.2)'
                                        }}
                                        onPress={() => {
                                            setAmountModalVisible(true);
                                        }}
                                    >
                                        <Text className="text-white font-bold">＋ 增值</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">訂單紀錄</Text>
                        </Pressable>
                    </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%]">
                    {loading ? (
                        <View className="items-center justify-center">
                            <ActivityIndicator />
                        </View>
                    ) : (
                        <View>
                            {coupons
                                .filter(
                                    (coupon) =>
                                        coupon.is_consumed === false && new Date(coupon.expire_date) > new Date()
                                )
                                .slice(0, 2)
                                .map((coupon, index) => (
                                    <IndividualCouponComponent
                                        key={index}
                                        title={coupon.coupon.name}
                                        price={coupon.coupon.amount}
                                        detail={coupon.coupon.description}
                                        date={formatCouponDate(coupon.expire_date)}
                                        noCircle={true}
                                        onCouponClick={() =>
                                            handleCouponClick(coupon.coupon.name, coupon.coupon.description)
                                        }
                                    />
                                ))}
                        </View>
                    )}
                </View>
            </ScrollView>
            {/* <TopUpModal
                visible={modalVisible}
                onClose={() => setModalVisible(false)}
                onSelect={handleTopUp}
                paymentOptions={paymentType}
            /> */}
            <AmountInputModal
                visible={amountModalVisible}
                onClose={() => setAmountModalVisible(false)}
                onConfirm={handleAmountConfirm}
            />
        </SafeAreaView>
    );
};

export default WalletPageComponent;