|
|
@@ -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,
|
lwxzks