38251cd0e8
- Integrated `SubscriptionInfoBar` component into the profile page for displaying subscription details. - Updated GraphQL types to include subscription-related fields and filters. - Enhanced the profile data management by adding subscription handling capabilities. - Added a new utility function `getRemainingDays` to calculate remaining days until a specified date.
48 lines
1.7 KiB
TypeScript
48 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import { useSubscriptionQuery } from '@/hooks/api/subscriptions';
|
|
import { getRemainingDays } from '@repo/utils/datetime-format';
|
|
import { ChevronRight } from 'lucide-react';
|
|
import Link from 'next/link';
|
|
|
|
export function SubscriptionInfoBar() {
|
|
const { data, error, isLoading } = useSubscriptionQuery();
|
|
|
|
const isActive = data?.subscription?.isActive;
|
|
const remainingOrdersCount = data?.remainingOrdersCount;
|
|
const maxOrdersPerMonth = data?.maxOrdersPerMonth;
|
|
const expiresAt = data?.subscription?.expiresAt;
|
|
|
|
if (error) return null;
|
|
|
|
const title = isActive ? 'Подписка Pro активна' : 'Подписка неактивна';
|
|
|
|
let description = 'Попробуйте бесплатно';
|
|
|
|
if (isActive && expiresAt) {
|
|
description = `Осталось ${getRemainingDays(expiresAt)} дней`;
|
|
}
|
|
|
|
if (!isLoading && remainingOrdersCount && maxOrdersPerMonth) {
|
|
description = `Осталось ${remainingOrdersCount} из ${maxOrdersPerMonth} записей в этом месяце`;
|
|
}
|
|
|
|
return (
|
|
<Link href="/pro" rel="noopener noreferrer">
|
|
<div className="px-4">
|
|
<div className="flex w-full flex-col justify-center rounded-2xl bg-background p-4 px-6 shadow-lg backdrop-blur-2xl dark:bg-primary/5">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h2 className="font-bold tracking-wider text-foreground">{title}</h2>
|
|
<span className="mt-1 text-xs text-muted-foreground">{description}</span>
|
|
</div>
|
|
<div aria-hidden="true" className="rounded-full bg-primary/10 p-1.5">
|
|
<ChevronRight className="size-4 text-primary" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|