427cc6b5d8
* prepare for header back button: fix pages layout add header with back button * set header title * optimize layout * remove navigation context * make profile photo bigger * remove page-header from main pages * fix profile layout * profile: use ui/Card * fix app background * contacts: use ui/Card component
114 lines
3.3 KiB
TypeScript
114 lines
3.3 KiB
TypeScript
'use client';
|
||
import { updateRole } from './lib/actions';
|
||
import { getProfile, updateProfile } from '@/actions/profile';
|
||
import { CheckboxWithText } from '@/components/profile/checkbox-with-text';
|
||
import { ProfileField } from '@/components/profile/profile-field';
|
||
import { Avatar, AvatarFallback, AvatarImage } from '@repo/ui/components/ui/avatar';
|
||
import { Button } from '@repo/ui/components/ui/button';
|
||
import { Card } from '@repo/ui/components/ui/card';
|
||
import { useQuery } from '@tanstack/react-query';
|
||
import Link from 'next/link';
|
||
|
||
type ProfileProps = {
|
||
readonly telegramId?: string;
|
||
};
|
||
|
||
export function ProfileCard(props: ProfileProps) {
|
||
return (
|
||
<div className="space-y-4">
|
||
<Person {...props} />
|
||
<ProfileFields {...props} />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export function ProfileFields({ telegramId }: ProfileProps) {
|
||
const { data: customer } = useQuery({
|
||
queryFn: () => getProfile({ telegramId }),
|
||
queryKey: telegramId ? ['profile', 'telegramId', telegramId] : ['profile'],
|
||
});
|
||
|
||
if (!customer) return null;
|
||
|
||
return (
|
||
<Card className="p-4">
|
||
<div className="flex flex-col gap-4">
|
||
{telegramId ? false : <ProfileFieldsHeader />}
|
||
{telegramId ? (
|
||
false
|
||
) : (
|
||
<ProfileField
|
||
fieldName="name"
|
||
id="name"
|
||
label="Имя"
|
||
onChange={updateProfile}
|
||
value={customer?.name ?? ''}
|
||
/>
|
||
)}
|
||
<Link href={telegramId && customer?.phone ? `tel:${customer?.phone}` : ''}>
|
||
<ProfileField
|
||
disabled={!telegramId}
|
||
id="phone"
|
||
label="Телефон"
|
||
readOnly={Boolean(telegramId)}
|
||
value={customer?.phone ?? ''}
|
||
/>
|
||
</Link>
|
||
{telegramId ? (
|
||
false
|
||
) : (
|
||
<CheckboxWithText
|
||
checked={customer.role !== 'client'}
|
||
description="Разрешить другим пользователям записываться к вам"
|
||
onChange={updateRole}
|
||
text="Быть мастером"
|
||
/>
|
||
)}
|
||
{telegramId ? (
|
||
<Button asChild className="w-full bg-foreground">
|
||
<Link
|
||
href={`https://t.me/${customer?.phone}`}
|
||
rel="noopener noreferrer"
|
||
target="_blank"
|
||
>
|
||
Написать в Telegram
|
||
</Link>
|
||
</Button>
|
||
) : (
|
||
false
|
||
)}
|
||
</div>
|
||
</Card>
|
||
);
|
||
}
|
||
|
||
function Person({ telegramId }: ProfileProps) {
|
||
const { data: customer } = useQuery({
|
||
queryFn: () => getProfile({ telegramId }),
|
||
queryKey: telegramId ? ['profile', 'telegramId', telegramId] : ['profile'],
|
||
});
|
||
|
||
if (!customer) return null;
|
||
|
||
return (
|
||
<Card className="p-4">
|
||
<div className="flex flex-col items-center space-y-2">
|
||
<Avatar className="size-20">
|
||
<AvatarImage alt={customer?.name} src={customer.photoUrl || ''} />
|
||
<AvatarFallback>{customer?.name.charAt(0)}</AvatarFallback>
|
||
</Avatar>
|
||
<h2 className="text-2xl font-bold">{customer?.name}</h2>
|
||
</div>
|
||
</Card>
|
||
);
|
||
}
|
||
|
||
function ProfileFieldsHeader() {
|
||
return (
|
||
<div className="flex flex-row justify-between">
|
||
<h1 className="text-lg font-bold text-muted-foreground">Ваши данные</h1>
|
||
<div />
|
||
</div>
|
||
);
|
||
}
|