git_admin/dana-medical-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(booking): highlight unavailable doctor list

Browse Source
This commit is contained in:
Dana Medical Developer 2026-10-22 13:38:13 +00:00
parent 8d4aedaa09
commit 37fe9acd55
2 changed files with 13 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/scripts/test-booking-flow.mjs
View File

@ -132,9 +132,21 @@ try {
assert.equal(container.querySelector('.doctor-picker__trigger .doctor-picker__name').textContent, 'Выберите врача', 'Changing date clears the selected doctor and window'); assert.equal(container.querySelector('.doctor-picker__trigger .doctor-picker__name').textContent, 'Выберите врача', 'Changing date clears the selected doctor and window');
assert.deepEqual(await availableDoctorIDs(), []); assert.deepEqual(await availableDoctorIDs(), []);
assert.match(text(), /На эту дату свободных окон нет/); assert.match(text(), /На эту дату свободных окон нет/);
assert.equal(container.querySelector('.lead-modal__availability--warning'), null, 'An empty selected date keeps its informational style');
await act(async () => Simulate.change(container.querySelector('input[type="date"]'), { target: { value: '' } })); await act(async () => Simulate.change(container.querySelector('input[type="date"]'), { target: { value: '' } }));
assert.deepEqual(await availableDoctorIDs(), ['1','2','3'], 'Clearing date restores the doctor-first flow'); assert.deepEqual(await availableDoctorIDs(), ['1','2','3'], 'Clearing date restores the doctor-first flow');
const originalDoctorLoader = api.doctors;
for (const fail of [false, true]) {
await act(async () => root.render(null));
api.doctors = async () => {
if (fail) throw new Error('Fictional catalog outage');
return { data: [] };
};
await render();
assert.match(container.querySelector('.lead-modal__availability--warning').textContent, /Список врачей сейчас недоступен/, 'An empty or failed doctor catalog has the prominent red warning style');
}
api.doctors = originalDoctorLoader;
await act(async () => root.render(null)); await act(async () => root.render(null));
await render({ form: 'callback' }); await render({ form: 'callback' });
assert.ok(container.querySelector('input[type="tel"]')); assert.ok(container.querySelector('input[type="tel"]'));

2
web/src/components/LeadModal.jsx
View File

@ -270,7 +270,7 @@ export default function LeadModal({ form = 'appointment', doctor, slot, service,
)} )}
{form === 'appointment' && !selectedDoctor ? ( {form === 'appointment' && !selectedDoctor ? (
<p className="lead-modal__availability" role="status"> <p className={`lead-modal__availability${doctorsLoaded && !date && doctorOptions.length === 0 ? ' lead-modal__availability--warning' : ''}`} role="status">
{date && availability.error {date && availability.error
? 'Не удалось проверить расписание. Попробуйте выбрать дату ещё раз.' ? 'Не удалось проверить расписание. Попробуйте выбрать дату ещё раз.'
: date && !availability.loading && doctorsLoaded && doctorOptions.length === 0 : date && !availability.loading && doctorsLoaded && doctorOptions.length === 0