Ukryj AvailabilitySearch i SlotFinder po przejsciu do kroku 3 wizarda

This commit is contained in:
Krzysztof Cieślik
2026-06-21 06:33:55 +02:00
parent fa6e892b16
commit 355dffc3c0
2 changed files with 12 additions and 6 deletions

View File

@@ -12,7 +12,7 @@ import styles from './BookingWizard.module.scss';
const STEPS = ['Service', 'Date & Time', 'Requirements', 'Summary']; const STEPS = ['Service', 'Date & Time', 'Requirements', 'Summary'];
const todayISO = () => new Date().toISOString().split('T')[0]; const todayISO = () => new Date().toISOString().split('T')[0];
const BookingWizard = ({ prefillSlot, onPrefillUsed }) => { const BookingWizard = ({ prefillSlot, onPrefillUsed, onStepChange }) => {
const { user } = useAuth(); const { user } = useAuth();
const [step, setStep] = useState(1); const [step, setStep] = useState(1);
const [data, setData] = useState({ serviceId: '', date: '', time: '', specialRequirements: '' }); const [data, setData] = useState({ serviceId: '', date: '', time: '', specialRequirements: '' });
@@ -57,8 +57,8 @@ const BookingWizard = ({ prefillSlot, onPrefillUsed }) => {
return Object.keys(errs).length === 0; return Object.keys(errs).length === 0;
}; };
const next = () => { if (validate()) setStep((s) => s + 1); }; const next = () => { if (validate()) { const s = step + 1; setStep(s); onStepChange?.(s); } };
const back = () => { setFieldErrors({}); setStep((s) => s - 1); }; const back = () => { setFieldErrors({}); const s = step - 1; setStep(s); onStepChange?.(s); };
const handlePaymentSuccess = (paymentData) => { const handlePaymentSuccess = (paymentData) => {
createReservation({ createReservation({
@@ -79,6 +79,7 @@ const BookingWizard = ({ prefillSlot, onPrefillUsed }) => {
setFieldErrors({}); setFieldErrors({});
setDone(false); setDone(false);
setReceipt(null); setReceipt(null);
onStepChange?.(1);
}; };
const selectedService = services.find((s) => s.id === data.serviceId); const selectedService = services.find((s) => s.id === data.serviceId);

View File

@@ -18,6 +18,7 @@ const DashboardPage = () => {
const { user, logout } = useAuth(); const { user, logout } = useAuth();
// useState do przechowywania stanu prefillSlot, który jest używany do wstępnego wypełnienia formularza rezerwacji wybranym slotem // useState do przechowywania stanu prefillSlot, który jest używany do wstępnego wypełnienia formularza rezerwacji wybranym slotem
const [prefillSlot, setPrefillSlot] = useState(null); const [prefillSlot, setPrefillSlot] = useState(null);
const [wizardStep, setWizardStep] = useState(1);
// useState do przechowywania stanu profileOpen, który jest używany do otwierania i zamykania modala edycji profilu // useState do przechowywania stanu profileOpen, który jest używany do otwierania i zamykania modala edycji profilu
const [profileOpen, setProfileOpen] = useState(false); const [profileOpen, setProfileOpen] = useState(false);
// custom hook useUserReservations pobiera rezerwacje zalogowanego użytkownika z API i zwraca je w data // custom hook useUserReservations pobiera rezerwacje zalogowanego użytkownika z API i zwraca je w data
@@ -57,15 +58,19 @@ const DashboardPage = () => {
</header> </header>
<main className={styles['dashboard__main']}> <main className={styles['dashboard__main']}>
{wizardStep < 3 && (
<>
<AvailabilitySearch onSelectSlot={setPrefillSlot} /> <AvailabilitySearch onSelectSlot={setPrefillSlot} />
<SlotFinder onSelectSlot={setPrefillSlot} /> <SlotFinder onSelectSlot={setPrefillSlot} />
</>
)}
<div className={styles['dashboard__grid']}> <div className={styles['dashboard__grid']}>
<section className={styles['dashboard__booking']}> <section className={styles['dashboard__booking']}>
<BookingWizard <BookingWizard
prefillSlot={prefillSlot} prefillSlot={prefillSlot}
onPrefillUsed={() => setPrefillSlot(null)} onPrefillUsed={() => setPrefillSlot(null)}
onStepChange={setWizardStep}
/> />
</section> </section>
<aside className={styles['dashboard__aside']}> <aside className={styles['dashboard__aside']}>