import {
View,
Text,
Pressable,
Dimensions,
ImageSourcePropType,
useWindowDimensions,
ScrollView,
ActivityIndicator,
StyleSheet
} 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 { SceneMap, TabBar, TabView } from 'react-native-tab-view';
import React from 'react';
import { formatCouponDate } from '../../util/lib';
import useCouponStore from '../../providers/coupon_store';
export const SelectIndividualCouponComponent = ({
title,
price,
detail,
date,
redeemCode,
disabled = false
}: {
title: string;
price: string;
detail: string;
date: string;
redeemCode: string;
disabled: boolean;
}) => {
const setSelectedCouponName = useCouponStore((state) => state.setSelectedCouponName);
const setSelectedCouponRedeemCode = useCouponStore((state) => state.setSelectedCouponRedeemCode);
const setSelectedCouponPrice = useCouponStore((state) => state.setSelectedCouponPrice);
return (
{
setSelectedCouponRedeemCode(redeemCode);
setSelectedCouponName(title);
setSelectedCouponPrice(price);
router.push({
pathname: '/paymentSummaryPage'
});
}}
>
$
{price}
{title}
{/* //dash line */}
{title}
{detail}
有效期
{date}
);
};
export interface TabItem {
imgURL: ImageSourcePropType;
date: string;
time: string;
chargeStationName: string;
chargeStationAddress: string;
distance: string;
}
interface TabViewComponentProps {
titles: string[];
}
export const SelectCouponTabViewComponent: React.FC = ({ titles }) => {
const layout = useWindowDimensions();
const [loading, setLoading] = useState(false);
const [coupons, setCoupons] = useState([]);
const [userID, setUserID] = useState('');
useEffect(() => {
const fetchData = async () => {
try {
setLoading(true);
const info = await walletService.getCustomerInfo();
const coupon = await walletService.getCouponForSpecificUser(userID);
setUserID(info.id);
setCoupons(coupon);
} catch (error) {
} finally {
setLoading(false);
}
};
fetchData();
}, []);
//tab 1
const FirstRoute = () => (
{loading ? (
) : (
{coupons.filter(
(coupon) => coupon.is_consumed === false && new Date(coupon.expire_date) > new Date()
).length === 0 ? (
暫時戶口沒有優惠券。
) : (
coupons
.filter(
(coupon) =>
coupon.is_consumed === false && new Date(coupon.expire_date) > new Date()
)
.slice(0, 2)
.map((coupon, index) => (
))
)}
)}
);
//tab 2
const SecondRoute = () => (
{coupons
.filter((coupon) => coupon.is_consumed === true || new Date(coupon.expire_date) < new Date())
.slice(0, 2)
.map((coupon, index) => (
))}
);
const renderScene = SceneMap({
firstRoute: FirstRoute,
secondRoute: SecondRoute
});
const [routes] = React.useState([
{ key: 'firstRoute', title: titles[0] },
{ key: 'secondRoute', title: titles[1] }
]);
const [index, setIndex] = React.useState(0);
const renderTabBar = (props: any) => (
);
return (
(
{route.title}
)
}}
/>
);
};
const styles = StyleSheet.create({
container: { flexDirection: 'row' },
image: { width: 100, height: 100, margin: 15, borderRadius: 10 },
textContainer: { flexDirection: 'column', gap: 8, marginTop: 20 }
});
const SelectCouponPageComponent = () => {
const screenHeight = Dimensions.get('window').height;
return (
{
if (router.canGoBack()) {
router.back();
} else {
router.replace('/accountMainPage');
}
}}
>
選擇優惠券
);
};
export default SelectCouponPageComponent;