201ccaeea5
- Added conditional rendering in SubscriptionInfoBar and LinksCard to hide components for users with the Client role. - Updated ProfileDataCard to use Enum_Customer_Role for role management. - Improved error handling in OrdersService to differentiate between master and client order limit errors.
109 lines
3.5 KiB
TypeScript
109 lines
3.5 KiB
TypeScript
/* eslint-disable canonical/id-match */
|
||
'use client';
|
||
|
||
import { type ProfileProps } from '../types';
|
||
import { CheckboxWithText, TextField } from '@/components/shared/data-fields';
|
||
import { CardSectionHeader } from '@/components/ui';
|
||
import { useCustomerMutation, useCustomerQuery } from '@/hooks/api/customers';
|
||
import { Enum_Customer_Role } from '@repo/graphql/types';
|
||
import { Button } from '@repo/ui/components/ui/button';
|
||
import { Card } from '@repo/ui/components/ui/card';
|
||
import Link from 'next/link';
|
||
import { useState } from 'react';
|
||
|
||
export function ContactDataCard({ telegramId }: Readonly<ProfileProps>) {
|
||
const { data: { customer } = {} } = useCustomerQuery({ telegramId });
|
||
|
||
if (!customer) return null;
|
||
|
||
return (
|
||
<Card className="p-4">
|
||
<div className="flex flex-col gap-4">
|
||
<Link href={customer?.phone ? `tel:${customer?.phone}` : ''}>
|
||
<TextField id="phone" label="Телефон" readOnly value={customer?.phone ?? ''} />
|
||
</Link>
|
||
<Button asChild className="w-full bg-foreground">
|
||
<Link href={`https://t.me/${customer?.phone}`} rel="noopener noreferrer" target="_blank">
|
||
Написать в Telegram
|
||
</Link>
|
||
</Button>
|
||
</div>
|
||
</Card>
|
||
);
|
||
}
|
||
|
||
export function ProfileDataCard() {
|
||
const { data: { customer } = {} } = useCustomerQuery();
|
||
const { cancelChanges, hasChanges, isPending, resetTrigger, saveChanges, updateField } =
|
||
useProfileEdit();
|
||
|
||
if (!customer) return null;
|
||
|
||
return (
|
||
<Card className="p-4">
|
||
<div className="flex flex-col gap-4">
|
||
<CardSectionHeader title="Ваши данные" />
|
||
<TextField
|
||
id="name"
|
||
key={`name-${resetTrigger}`}
|
||
label="Имя"
|
||
onChange={(value) => updateField('name', value)}
|
||
value={customer?.name ?? ''}
|
||
/>
|
||
<TextField disabled id="phone" label="Телефон" readOnly value={customer?.phone ?? ''} />
|
||
<CheckboxWithText
|
||
checked={customer.role !== 'client'}
|
||
description="Разрешить другим пользователям записываться к вам"
|
||
onChange={(checked) =>
|
||
updateField('role', checked ? Enum_Customer_Role.Master : Enum_Customer_Role.Client)
|
||
}
|
||
text="Быть мастером"
|
||
/>
|
||
{hasChanges && (
|
||
<div className="flex justify-end gap-2">
|
||
<Button disabled={isPending} onClick={cancelChanges} variant="outline">
|
||
Отмена
|
||
</Button>
|
||
<Button disabled={isPending} onClick={saveChanges}>
|
||
{isPending ? 'Сохранение...' : 'Сохранить'}
|
||
</Button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</Card>
|
||
);
|
||
}
|
||
|
||
function useProfileEdit() {
|
||
const { isPending, mutate } = useCustomerMutation();
|
||
const [pendingChanges, setPendingChanges] = useState<Record<string, unknown>>({});
|
||
const [resetTrigger, setResetTrigger] = useState(0);
|
||
|
||
const updateField = (field: string, value: unknown) => {
|
||
setPendingChanges((previous) => ({ ...previous, [field]: value }));
|
||
};
|
||
|
||
const saveChanges = () => {
|
||
if (Object.keys(pendingChanges).length === 0) return;
|
||
|
||
mutate({ data: pendingChanges });
|
||
setPendingChanges({});
|
||
};
|
||
|
||
const cancelChanges = () => {
|
||
setPendingChanges({});
|
||
setResetTrigger((previous) => previous + 1);
|
||
};
|
||
|
||
const hasChanges = Object.keys(pendingChanges).length > 0;
|
||
|
||
return {
|
||
cancelChanges,
|
||
hasChanges,
|
||
isPending,
|
||
resetTrigger,
|
||
saveChanges,
|
||
updateField,
|
||
};
|
||
}
|