a6d05bcf69
- Renamed `hasUserTrialSubscription` to `usedTrialSubscription` for clarity in the SubscriptionsService. - Updated subscription-related queries and fragments to use `active` instead of `isActive` for consistency. - Enhanced the ProPage component to utilize the new subscription checks and improve trial usage logic. - Removed unused subscription history query to streamline the codebase. - Adjusted the SubscriptionInfoBar to reflect the new subscription state handling.
79 lines
2.6 KiB
TypeScript
79 lines
2.6 KiB
TypeScript
/* eslint-disable canonical/id-match */
|
|
'use client';
|
|
|
|
import { useCustomerQuery } from '@/hooks/api/customers';
|
|
import { useSubscriptionQuery } from '@/hooks/api/subscriptions';
|
|
import { Enum_Customer_Role } from '@repo/graphql/types';
|
|
import { cn } from '@repo/ui/lib/utils';
|
|
import { ChevronRight } from 'lucide-react';
|
|
import Link from 'next/link';
|
|
|
|
export function SubscriptionInfoBar() {
|
|
const { data, error, isLoading } = useSubscriptionQuery();
|
|
|
|
const { data: { customer } = {} } = useCustomerQuery();
|
|
|
|
const isActive = data?.hasActiveSubscription;
|
|
const remainingOrdersCount = data?.remainingOrdersCount;
|
|
const remainingDays = data?.remainingDays;
|
|
const maxOrdersPerMonth = data?.maxOrdersPerMonth;
|
|
|
|
if (customer?.role === Enum_Customer_Role.Client) return null;
|
|
|
|
if (error) return null;
|
|
|
|
const title = isActive ? 'Подписка Pro активна' : 'Подписка неактивна';
|
|
|
|
let description = 'Попробуйте бесплатно';
|
|
|
|
if (!isLoading && remainingOrdersCount && maxOrdersPerMonth) {
|
|
description = `Доступно ${remainingOrdersCount} из ${maxOrdersPerMonth} записей в этом месяце`;
|
|
}
|
|
|
|
if (isActive) {
|
|
description = `Осталось ${remainingDays} дней`;
|
|
}
|
|
|
|
return (
|
|
<Link href="/pro" rel="noopener noreferrer">
|
|
<div className={cn('px-4', isLoading && 'animate-pulse')}>
|
|
<div
|
|
className={cn(
|
|
'flex w-full flex-col justify-center rounded-2xl p-4 px-6 shadow-lg backdrop-blur-2xl',
|
|
isActive
|
|
? 'bg-gradient-to-r from-purple-600 to-blue-600 dark:from-purple-700 dark:to-blue-700 text-white'
|
|
: 'bg-background dark:bg-primary/5',
|
|
)}
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h2
|
|
className={cn(
|
|
'font-bold tracking-wider',
|
|
isActive ? 'text-white' : 'text-foreground',
|
|
)}
|
|
>
|
|
{title}
|
|
</h2>
|
|
<span
|
|
className={cn('mt-1 text-xs', isActive ? 'text-white/80' : 'text-muted-foreground')}
|
|
>
|
|
{description}
|
|
</span>
|
|
</div>
|
|
<div
|
|
aria-hidden="true"
|
|
className={cn(
|
|
'rounded-full p-1.5',
|
|
isActive ? 'bg-white/20 text-white' : 'bg-primary/10 text-primary',
|
|
)}
|
|
>
|
|
<ChevronRight className="size-4" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|