Files
clinicpro/assets/admin/components/FreeVisitPrice.tsx
T
hamed 0e7970d6e0 feat: replace checkboxes with Switch component for better UI consistency
- Updated DoctorDetailPage, MySecretariesPage, RecordNumberSettingsPage, RepresentationsPage, ResourcePoolsPage, ResourceTypesPage, SecretariesPage, SecretaryDetailPage, SettingsPage, SkillsPage, SmsWalletPage, and TagsSettingsPage to use the new Switch component instead of native checkboxes.
- Enhanced accessibility by ensuring the Switch component uses appropriate roles and labels.
- Added tests for the new Switch component to ensure functionality and accessibility compliance.
- Updated styles to accommodate the new Switch component design.
2026-08-05 16:09:46 +03:30

102 lines
4.3 KiB
TypeScript

import { useEffect, useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { toast } from 'sonner';
import { api } from '../lib/api';
import { formatRial, rialToToman, tomanToRial } from '../lib/utils';
import { digitsOnly } from '../lib/utils';
import Switch from './ui/Switch';
interface Pricing { free_visit_price_rials: number; require_visit_price: boolean }
/** بدون doctorUuid روی موجودیت کاربر جاری کار می‌کند؛ با آن، قیمت همان پزشک. */
export default function FreeVisitPrice({ doctorUuid, readOnly = false }: { doctorUuid?: string; readOnly?: boolean }) {
const qc = useQueryClient();
const [value, setValue] = useState('');
const [required, setRequired] = useState(false);
const [error, setError] = useState('');
const { data } = useQuery<{ data: Pricing }>({
queryKey: ['insurance-pricing', doctorUuid ?? 'self'],
queryFn: () => api.get(doctorUuid
? `/api/v1/insurance-pricing?doctor_uuid=${doctorUuid}`
: '/api/v1/insurance-pricing'),
});
const pricing = (data as any)?.data as Pricing | undefined;
useEffect(() => {
if (pricing) {
setValue(String(rialToToman(pricing.free_visit_price_rials ?? 0)));
setRequired(!!pricing.require_visit_price);
}
}, [pricing]);
const saveMut = useMutation({
mutationFn: () => api.put('/api/v1/insurance-pricing', {
free_visit_price_rials: tomanToRial(Number(value) || 0),
require_visit_price: required,
...(doctorUuid ? { doctor_uuid: doctorUuid } : {}),
}),
onSuccess: () => {
toast.success('قیمت ویزیت ذخیره شد');
qc.invalidateQueries({ queryKey: ['insurance-pricing', doctorUuid ?? 'self'] });
},
onError: (e: Error) => toast.error(e.message),
});
const save = () => {
if (required && (Number(value) || 0) <= 0) {
setError('با فعال بودن «الزامی کردن هزینه ویزیت»، قیمت ویزیت آزاد الزامی است');
return;
}
setError('');
saveMut.mutate();
};
return (
<div className="card" style={{ padding: 20, marginBottom: 16 }}>
<h2 style={{ fontSize: 14, fontWeight: 700, margin: '0 0 4px' }}>قیمت ویزیت آزاد</h2>
<p style={{ fontSize: 12, color: 'var(--text-3)', margin: '0 0 12px', lineHeight: 1.7 }}>
مبلغ ویزیت بدون بیمه. در ثبت مراجعه، انتخاب بیمه درصد پوشش قرارداد را روی همین مبلغ اعمال می‌کند.
</p>
<div style={{ display: 'flex', alignItems: 'flex-end', gap: 10 }}>
<div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
<label style={{ fontSize: 11.5, fontWeight: 600 }}>
قیمت (تومان){required && <span style={{ color: 'var(--danger)' }}> *</span>}
</label>
<input
type="text" inputMode="numeric" dir="ltr" className="input" style={{ width: 200 }}
aria-invalid={!!error}
value={value} onChange={(e) => { setValue(digitsOnly(e.target.value)); setError(''); }}
/>
</div>
{value !== '' && (
<span style={{ fontSize: 12, color: 'var(--text-3)', marginBottom: 8 }}>{formatRial(tomanToRial(Number(value) || 0))}</span>
)}
</div>
{error && (
<p style={{ fontSize: 12, color: 'var(--danger)', margin: '6px 0 0' }}>{error}</p>
)}
<div style={{ marginTop: 16 }}>
<Switch
inline
checked={required}
onChange={(v) => { setRequired(v); setError(''); }}
label="الزامی کردن هزینه ویزیت"
/>
</div>
<p style={{ fontSize: 12, color: 'var(--text-3)', margin: '6px 0 0', lineHeight: 1.7 }}>
با فعال شدن این گزینه، وارد کردن هزینه ویزیت در تنظیمات، ثبت مراجعه (سرویس)، فاکتور سرویس و ثبت نوبت الزامی می‌شود و بدون آن امکان ذخیره وجود ندارد.
</p>
{!readOnly && (
<div style={{ display: 'flex', marginTop: 16 }}>
<button className="btn primary sm" style={{ marginInlineStart: 'auto' }} disabled={saveMut.isPending} onClick={save}>
{saveMut.isPending ? '...' : 'ذخیره'}
</button>
</div>
)}
</div>
);
}