106fdc0da5
- Removed unnecessary data fetching and hydration logic from the main profile page. - Updated the rendering of components to improve clarity and performance. - Enhanced loading states in various profile components for better user experience. - Refactored service list handling to utilize telegramId instead of masterId for consistency.
83 lines
2.9 KiB
TypeScript
83 lines
2.9 KiB
TypeScript
/* eslint-disable canonical/id-match */
|
|
'use client';
|
|
|
|
import { useCustomerQuery } from '@/hooks/api/customers';
|
|
import { useSubscriptionQuery, useSubscriptionSettingQuery } 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: { subscriptionSetting } = {}, isLoading: isLoadingSubscriptionSetting } =
|
|
useSubscriptionSettingQuery();
|
|
const { data, isLoading: isLoadingSubscription } = useSubscriptionQuery();
|
|
|
|
const { data: { customer } = {}, isLoading: isLoadingCustomer } = useCustomerQuery();
|
|
|
|
const isLoading = isLoadingCustomer || isLoadingSubscription || isLoadingSubscriptionSetting;
|
|
|
|
const isActive = data?.hasActiveSubscription;
|
|
const remainingOrdersCount = data?.remainingOrdersCount;
|
|
const remainingDays = data?.remainingDays;
|
|
const maxOrdersPerMonth = data?.maxOrdersPerMonth;
|
|
|
|
const title = isActive ? 'Pro доступ активен' : 'Pro доступ неактивен';
|
|
|
|
let description = 'Попробуйте бесплатно';
|
|
|
|
if (!isLoading && remainingOrdersCount && maxOrdersPerMonth) {
|
|
description = `Доступно ${remainingOrdersCount} из ${maxOrdersPerMonth} записей в этом месяце`;
|
|
}
|
|
|
|
if (isActive) {
|
|
description = `Осталось ${remainingDays} дней`;
|
|
}
|
|
|
|
if (!subscriptionSetting?.proEnabled) return null;
|
|
|
|
if (customer?.role === Enum_Customer_Role.Client) return null;
|
|
|
|
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>
|
|
);
|
|
}
|