diff --git a/apps/web/components/orders/components/back-button.tsx b/apps/web/components/orders/components/back-button.tsx new file mode 100644 index 0000000..b0e3944 --- /dev/null +++ b/apps/web/components/orders/components/back-button.tsx @@ -0,0 +1,20 @@ +'use client'; +import { OrderContext } from '@/context/order'; +import { Button } from '@repo/ui/components/ui/button'; +import { use } from 'react'; + +export function BackButton() { + const { prevStep, step } = use(OrderContext); + + function handleOnClick() { + prevStep(); + } + + if (step === 'success' || step === 'customer-select') return null; + + return ( + + ); +} diff --git a/apps/web/components/orders/components/index.ts b/apps/web/components/orders/components/index.ts index e362dd9..3c6323e 100644 --- a/apps/web/components/orders/components/index.ts +++ b/apps/web/components/orders/components/index.ts @@ -1,3 +1,4 @@ +export * from './back-button'; export * from './contacts-grid'; export * from './datetime-select'; export * from './service-select'; diff --git a/apps/web/components/orders/components/submit-button.tsx b/apps/web/components/orders/components/submit-button.tsx index 65326a5..e494b07 100644 --- a/apps/web/components/orders/components/submit-button.tsx +++ b/apps/web/components/orders/components/submit-button.tsx @@ -6,14 +6,14 @@ import { use } from 'react'; export function SubmitButton() { const { nextStep, step } = use(OrderContext); - function handleOnclick() { + function handleOnClick() { if (step !== 'success') { nextStep(); } } return ( - ); diff --git a/apps/web/components/orders/order-form.tsx b/apps/web/components/orders/order-form.tsx index c53b282..dda91cd 100644 --- a/apps/web/components/orders/order-form.tsx +++ b/apps/web/components/orders/order-form.tsx @@ -1,4 +1,10 @@ -import { ContactsGrid, DateTimeSelect, ServiceSelect, SubmitButton } from './components'; +import { + BackButton, + ContactsGrid, + DateTimeSelect, + ServiceSelect, + SubmitButton, +} from './components'; import { OrderContextProvider } from '@/context/order'; export function OrderForm() { @@ -8,7 +14,10 @@ export function OrderForm() { - +
+ + +
); diff --git a/apps/web/context/order.tsx b/apps/web/context/order.tsx index b37eb6d..a184066 100644 --- a/apps/web/context/order.tsx +++ b/apps/web/context/order.tsx @@ -1,11 +1,12 @@ 'use client'; import { createContext, type PropsWithChildren, useMemo, useReducer, useState } from 'react'; -type Action = { payload: Steps; type: 'SET_STEP' } | { type: 'NEXT_STEP' }; +type Action = { payload: Steps; type: 'SET_STEP' } | { type: 'NEXT_STEP' } | { type: 'PREV_STEP' }; type ContextType = { customerId: null | string; nextStep: () => void; + prevStep: () => void; setCustomerId: (customerId: string) => void; setStep: (step: Steps) => void; step: Steps; @@ -26,6 +27,14 @@ function stepsReducer(state: State, action: Action): State { return nextStep ? { ...state, step: nextStep } : state; } + case 'PREV_STEP': { + const currentIndex = stepsSequence.indexOf(state.step); + const previousIndex = currentIndex - 1; + const previousStep = stepsSequence[previousIndex]; + + return previousStep ? { ...state, step: previousStep } : state; + } + case 'SET_STEP': { return { ...state, step: action.payload }; } @@ -45,25 +54,27 @@ function useStep() { const setStep = (payload: Steps) => dispatch({ payload, type: 'SET_STEP' }); const nextStep = () => dispatch({ type: 'NEXT_STEP' }); + const previousStep = () => dispatch({ type: 'PREV_STEP' }); - return { nextStep, setStep, ...state }; + return { nextStep, prevStep: previousStep, setStep, ...state }; } export const OrderContext = createContext({} as ContextType); export function OrderContextProvider({ children }: Readonly) { const { customerId, setCustomerId } = useCustomerState(); - const { nextStep, setStep, step } = useStep(); + const { nextStep, prevStep, setStep, step } = useStep(); const value = useMemo( () => ({ customerId, nextStep, + prevStep, setCustomerId, setStep, step, }), - [customerId, nextStep, setCustomerId, setStep, step], + [customerId, nextStep, prevStep, setCustomerId, setStep, step], ); return {children};