58 lines
1.4 KiB
TypeScript

'use client';
import { LoadingSpinner } from '../common/spinner';
import {
BackButton,
ClientsGrid,
DateTimeSelect,
ErrorPage,
MastersGrid,
NextButton,
ServiceSelect,
SuccessPage,
} from './components';
import { SubmitButton } from './components/submit-button';
import { OrderStoreProvider, useOrderStore } from '@/stores/order';
import { useInitOrderStore } from '@/stores/order/hooks';
import { withContext } from '@/utils/context';
import { type JSX } from 'react';
const STEP_COMPONENTS: Record<string, JSX.Element> = {
'client-select': <ClientsGrid />,
'datetime-select': <DateTimeSelect />,
error: <ErrorPage />,
'master-select': <MastersGrid />,
'service-select': <ServiceSelect />,
success: <SuccessPage />,
};
function getStepComponent(step: string) {
return STEP_COMPONENTS[step] ?? null;
}
const BUTTON_COMPONENTS: Record<string, JSX.Element> = {
'': <NextButton />,
'datetime-select': <SubmitButton />,
};
function getButtonComponent(step: string) {
return BUTTON_COMPONENTS[step] ?? <NextButton />;
}
export const OrderForm = withContext(OrderStoreProvider)(function () {
useInitOrderStore();
const step = useOrderStore((store) => store.step);
if (step === 'loading') return <LoadingSpinner />;
return (
<div className="space-y-4 [&>*]:px-4">
{getStepComponent(step)}
<div className="space-y-2">
{getButtonComponent(step)}
<BackButton />
</div>
</div>
);
});