30bdc0447f
- Updated ContactsList to include a description prop in ContactRow for better service representation. - Renamed header in OrderContacts from "Контакты" to "Участники" for clarity. - Replaced Avatar components with UserAvatar in various components for consistent user representation. - Filtered active contacts in MastersGrid and ClientsGrid to improve data handling. - Adjusted customer query logic to ensure proper handling of telegramId.
50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import { useCustomerQuery } from '@/hooks/api/customers';
|
|
import { useSubscriptionQuery } from '@/hooks/api/subscriptions';
|
|
// eslint-disable-next-line import/extensions
|
|
import AvatarPlaceholder from '@/public/avatar/avatar_placeholder.png';
|
|
import { type CustomerFieldsFragment } from '@repo/graphql/types';
|
|
import { cn } from '@repo/ui/lib/utils';
|
|
import Image from 'next/image';
|
|
|
|
type Sizes = 'lg' | 'md' | 'sm' | 'xl';
|
|
|
|
type UserAvatarProps = Pick<CustomerFieldsFragment, 'telegramId'> & {
|
|
readonly className?: string;
|
|
readonly size?: Sizes;
|
|
};
|
|
|
|
const sizeClasses: Record<Sizes, string> = {
|
|
lg: 'size-28',
|
|
md: 'size-20',
|
|
sm: 'size-16',
|
|
xl: 'size-32',
|
|
};
|
|
|
|
export function UserAvatar({ className, size = 'lg', telegramId = null }: UserAvatarProps) {
|
|
const { data: { customer } = {}, isLoading } = useCustomerQuery({ telegramId });
|
|
const { data: subscriptionData } = useSubscriptionQuery({ telegramId });
|
|
const hasActiveSubscription = subscriptionData?.hasActiveSubscription;
|
|
const sizeClass = sizeClasses[size];
|
|
|
|
return (
|
|
<div className={cn(sizeClass, 'rounded-full', className, isLoading && 'animate-pulse')}>
|
|
<div
|
|
className={cn(
|
|
'size-full rounded-full p-1',
|
|
hasActiveSubscription ? 'bg-gradient-to-r from-purple-600 to-blue-600' : 'bg-transparent',
|
|
)}
|
|
>
|
|
<Image
|
|
alt={customer?.name || 'contact-avatar'}
|
|
className="size-full rounded-full object-cover"
|
|
height={80}
|
|
src={customer?.photoUrl || AvatarPlaceholder}
|
|
width={80}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|