c7648e8bf9
- Introduced a new input for capturing the surname of the user during contact addition. - Updated the contact parsing logic to include surname alongside name and phone number. - Modified the customer creation and update processes to accommodate surname, ensuring full name is used in confirmation messages. - Adjusted localization files to reflect the new surname input prompt and updated confirmation messages. - Refactored components to utilize a unified method for retrieving full customer names, improving consistency across the application.
51 lines
1.7 KiB
TypeScript
51 lines
1.7 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 { getCustomerFullName } from '@repo/utils/customer';
|
|
import Image from 'next/image';
|
|
|
|
type Sizes = 'lg' | 'md' | 'sm' | 'xs';
|
|
|
|
type UserAvatarProps = Pick<CustomerFieldsFragment, 'telegramId'> & {
|
|
readonly className?: string;
|
|
readonly size?: Sizes;
|
|
};
|
|
|
|
const sizeClasses: Record<Sizes, string> = {
|
|
lg: 'size-32',
|
|
md: 'size-20',
|
|
sm: 'size-16',
|
|
xs: 'size-14',
|
|
};
|
|
|
|
export function UserAvatar({ className, size = 'sm', 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 ? getCustomerFullName(customer) : 'contact-avatar'}
|
|
className="size-full rounded-full object-cover"
|
|
height={80}
|
|
src={customer?.photoUrl || AvatarPlaceholder}
|
|
width={80}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|