87 lines
2.9 KiB
TypeScript
87 lines
2.9 KiB
TypeScript
import { getSubscription } from '@/services/user/portal';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from '@workspace/airo-ui/components/dialog';
|
|
import { useRef, useState } from 'react';
|
|
|
|
import TabContent from '@/components/SubscribePlan/PlanContent/index';
|
|
import PlanTabs from '@/components/SubscribePlan/PlanTabs/PlanTabs';
|
|
import { Button } from '@workspace/airo-ui/components/button';
|
|
import { useTranslations } from 'next-intl';
|
|
|
|
const OfferDialog = () => {
|
|
const t = useTranslations('components.offerDialog');
|
|
const tHome = useTranslations('components.home');
|
|
|
|
const [open, setOpen] = useState(false);
|
|
const [tabValue, setTabValue] = useState<'year' | 'month'>('year');
|
|
const dialogRef = useRef<HTMLDivElement>(null);
|
|
// 使用 useQuery 来管理请求
|
|
const {
|
|
data = [],
|
|
isLoading,
|
|
error,
|
|
refetch,
|
|
} = useQuery({
|
|
queryKey: ['subscription'],
|
|
queryFn: async () => {
|
|
try {
|
|
const response = await getSubscription({ skipErrorHandler: true });
|
|
// 确保返回有效的数组，避免 undefined
|
|
const list = response.data?.data?.list || [];
|
|
return list.filter((v) => v.unit_time === 'Month') as API.Subscribe[];
|
|
} catch (err) {
|
|
// 自定义错误处理
|
|
console.error('获取订阅数据失败:', err);
|
|
// 返回空数组而不是抛出错误，避免 queryFn 返回 undefined
|
|
return [] as API.Subscribe[];
|
|
}
|
|
},
|
|
enabled: true, // 初始不执行，手动控制
|
|
retry: 1, // 失败时重试1次
|
|
refetchOnWindowFocus: true,
|
|
});
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|
<DialogTrigger asChild>
|
|
<Button className='mb-8 h-auto rounded-full border-[3px] border-white bg-white/10 px-8 py-2 text-lg font-bold text-white transition hover:bg-white/25 sm:px-6 sm:py-1.5'>
|
|
{tHome('viewSubscriptionPlans')}
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent
|
|
ref={dialogRef}
|
|
className='rounded-0 h-full gap-0 px-4 py-8 sm:max-h-[95%] sm:!rounded-[32px] sm:px-8 sm:py-12 md:max-w-[1280px]'
|
|
>
|
|
<DialogTitle className={'sr-only'}></DialogTitle>
|
|
<div className={'ml-6 sm:ml-0'}>
|
|
<div className={'text-4xl font-bold text-[#0F2C53] md:mb-1 md:text-center'}>
|
|
{t('selectPlan')}
|
|
</div>
|
|
<div className={'text-base font-medium text-[#666666] md:text-center'}>
|
|
{t('selectYourPlan')}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className={'m-auto flex w-full sm:w-[362px]'}>
|
|
<PlanTabs tabValue={tabValue} setTabValue={setTabValue} discount={20} />
|
|
</div>
|
|
<TabContent
|
|
tabValue={tabValue}
|
|
subscribeData={data}
|
|
isLoading={isLoading}
|
|
error={error}
|
|
onRetry={refetch}
|
|
/>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
export default OfferDialog;
|