fix: 首页钱包跳转修改

component/accountPages/walletPageComponent.tsx

@@ -1,505 +1,3 @@
-// import {
-//     View,
-//     Image,
-//     Text,
-//     ScrollView,
-//     AppState,
-//     Pressable,
-//     ImageBackground,
-//     ActivityIndicator,
-//     Modal,
-//     Alert,
-//     TextInput,
-//     Linking
-// } 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';
-
-// const TopUpModal = ({ visible, onClose, onSelect, paymentOptions }) => {
-//     const getPaymentImage = (key) => {
-//         switch (key) {
-//             case 'union_pay_wap_payment':
-//                 return UnionPayImage;
-//             case 'payme_wap_payment':
-//                 return PayMeImage;
-//             default:
-//                 return null;
-//         }
-//     };
-//     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%',
-//                         maxHeight: '80%'
-//                     }}
-//                 >
-//                     <Text style={{ fontSize: 20, marginBottom: 20 }}>選擇支付方式</Text>
-//                     <ScrollView>
-//                         {Object.entries(paymentOptions).map(([key, value]) => (
-//                             <Pressable
-//                                 key={key}
-//                                 onPress={() => onSelect(value)}
-//                                 style={{
-//                                     padding: 10,
-//                                     marginBottom: 10,
-//                                     borderBottomWidth: 1,
-//                                     borderBottomColor: '#eee'
-//                                 }}
-//                             >
-//                                 <View className="flex flex-row items-center space-x-2">
-//                                     <Image
-//                                         source={getPaymentImage(key)}
-//                                         style={{ width: 40, height: 40, marginRight: 10 }}
-//                                         resizeMode="contain"
-//                                     />
-//                                     <Text className="tracking-wider">
-//                                         {key === 'union_pay_wap_payment' ? 'UnionPay' : 'PayMe'}
-//                                     </Text>
-//                                 </View>
-//                             </Pressable>
-//                         ))}
-//                     </ScrollView>
-//                     <Pressable onPress={onClose} style={{ padding: 10, alignItems: 'center', marginTop: 10 }}>
-//                         <Text style={{ color: 'red' }}>關閉</Text>
-//                     </Pressable>
-//                 </View>
-//             </View>
-//         </Modal>
-//     );
-// };
-// const AmountInputModal = ({ visible, onClose, onConfirm }) => {
-//     const [inputAmount, setInputAmount] = useState('');
-
-//     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>
-//                     <TextInput
-//                         style={{
-//                             borderWidth: 1,
-//                             borderColor: '#ccc',
-//                             borderRadius: 5,
-//                             padding: 10,
-//                             marginBottom: 20,
-//                             fontSize: 18
-//                         }}
-//                         keyboardType="numeric"
-//                         placeholder="輸入金額"
-//                         value={inputAmount}
-//                         onChangeText={setInputAmount}
-//                     />
-//                     <Pressable
-//                         onPress={() => onConfirm(inputAmount)}
-//                         style={{
-//                             backgroundColor: '#02677D',
-//                             padding: 10,
-//                             borderRadius: 5,
-//                             alignItems: 'center'
-//                         }}
-//                     >
-//                         <Text style={{ color: 'white', fontSize: 18 }}>確認</Text>
-//                     </Pressable>
-//                     <Pressable onPress={onClose} style={{ padding: 10, alignItems: 'center', marginTop: 10 }}>
-//                         <Text style={{ color: 'red' }}>取消</Text>
-//                     </Pressable>
-//                 </View>
-//             </View>
-//         </Modal>
-//     );
-// };
-
-// export const CouponComponent = ({
-//     title,
-//     price,
-//     detail,
-//     date
-// }: {
-//     title: string;
-//     price: string;
-//     detail: string;
-//     date: string;
-// }) => {
-//     return (
-//         <Pressable onPress={() => console.log('abc')}>
-//             <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>
-//         </Pressable>
-//     );
-// };
-
-// 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 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]);
-
-//     const checkPaymentStatus = async () => {
-//         try {
-//             const result = await walletService.checkPaymentStatus(outTradeNo);
-//             setPaymentStatus(result);
-//             console.log('checkPaymentStatus from walletPageComponent', result);
-
-//             if (result[0].respcd === '0000') {
-//                 console.log(result);
-//                 // Payment successful
-//                 Alert.alert('Success', 'Payment was successful!', [
-//                     {
-//                         text: 'OK',
-//                         onPress: async () => {
-//                             const wallet = await walletService.getWalletBalance();
-//                             setWalletBalance(wallet);
-//                             console.log('new wallet:', 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.');
-//         }
-//     };
-
-//     // useEffect(() => {
-//     //     const handleAppStateChange = (nextAppState) => {
-//     //         if (appState.match(/inactive|background/) && nextAppState === 'active') {
-//     //             console.log('App has come to the foreground!');
-//     //             // Check payment status or update UI here
-//     //             console.log('outTradeNo', outTradeNo);
-//     //         }
-//     //         setAppState(nextAppState);
-//     //     };
-
-//     //     AppState.addEventListener('change', handleAppStateChange);
-//     // }, [appState]);
-
-//     useEffect(() => {
-//         const fetchData = async () => {
-//             try {
-//                 setLoading(true);
-//                 const info = await walletService.getCustomerInfo();
-//                 // const coupon = await walletService.getCouponForSpecificUser(info.id);
-//                 const wallet = await walletService.getWalletBalance();
-//                 console.log(wallet);
-//                 setUserID(info.id);
-//                 setWalletBalance(wallet);
-//                 setCoupons(coupon);
-//             } catch (error) {
-//                 console.log(error);
-//             } finally {
-//                 setLoading(false);
-//             }
-//         };
-
-//         fetchData();
-//     }, []);
-
-//     const formatMoney = (amount: any) => {
-//         if (typeof amount !== 'number') {
-//             amount = Number(amount);
-//         }
-//         return amount.toLocaleString('en-US');
-//     };
-//     const filterPaymentOptions = (options, allowedKeys) => {
-//         return Object.fromEntries(Object.entries(options).filter(([key]) => allowedKeys.includes(key)));
-//     };
-//     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 handleTopUp = (selectedValue) => {
-//         setSelectedPaymentType(selectedValue);
-//         setModalVisible(false);
-//         setAmountModalVisible(true);
-//     };
-
-//     const handleAmountConfirm = async (inputAmount) => {
-//         setAmountModalVisible(false);
-
-//         try {
-//             const numericAmount = parseFloat(inputAmount);
-//             if (isNaN(numericAmount) || numericAmount <= 0) {
-//                 throw new Error('Invalid amount');
-//             }
-
-//             const response = await walletService.submitPaymentAfterSelectingType(
-//                 numericAmount,
-//                 selectedPaymentType,
-//                 'test'
-//             );
-
-//             setOutTradeNo(response.out_trade_no);
-//             console.log('handleAmountConfirm outtradeno here,', response.out_trade_no);
-
-//             setIsExpectingPayment(true);
-//             paymentInitiatedTime.current = new Date().getTime();
-
-//             const payUrl = response.pay_url;
-//             const supported = await Linking.canOpenURL(payUrl);
-
-//             if (supported) {
-//                 await Linking.openURL(payUrl);
-//             } else {
-//                 throw new Error("Can't open payment URL");
-//             }
-//         } catch (error) {
-//             console.error('Top-up failed:', error);
-//             Alert.alert('Error', 'Failed to process top-up. Please try again.');
-//         }
-//     };
-
-//     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>
-//                                                 {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('增值');
-//                                             setModalVisible(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) => (
-//                                     <CouponComponent
-//                                         key={index}
-//                                         title={coupon.name}
-//                                         price={coupon.amount}
-//                                         detail={coupon.description}
-//                                         date={formatCouponDate(coupon.expire_date)}
-//                                     />
-//                                 ))}
-//                         </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;
-
-//////BELOW uses QFPay 的托管收银台页面 to 增值
-//////BELOW uses QFPay 的托管收银台页面 to 增值
-//////BELOW uses QFPay 的托管收银台页面 to 增值
-//////BELOW uses QFPay 的托管收银台页面 to 增值
-//////BELOW uses QFPay 的托管收银台页面 to 增值
-
 import {
     View,
     Image,

component/homePage/homePage.tsx

@@ -498,7 +498,7 @@ const HomePage: React.FC<HomePageProps> = () => {
                         </View>
                         <View className="flex-1">
                             <NormalButton
-                                onPress={() => router.push('accountMainPage')}
+                                onPress={() => router.push('/(account)/(wallet)/walletPage')}
                                 title={
                                     <View className="flex flex-row space-x-2 items-center">
                                         <MyWalletSvg />