Ukryj AvailabilitySearch i SlotFinder po przejsciu do kroku 3 wizarda
This commit is contained in:
@@ -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);
|
||||||
|
|||||||
@@ -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']}>
|
||||||
|
|||||||
Reference in New Issue
Block a user