components/order-form: add back button

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 (
+    <Button className="w-full" onClick={() => handleOnClick()} type="button" variant="ghost">
+      Назад
+    </Button>
+  );
+}

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';

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 (
-    <Button className="w-full" onClick={() => handleOnclick()} type="button">
+    <Button className="w-full" onClick={() => handleOnClick()} type="button">
       {step === 'success' ? 'Создать' : 'Продолжить'}
     </Button>
   );

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() {
         <ContactsGrid />
         <ServiceSelect />
         <DateTimeSelect />
-        <SubmitButton />
+        <div className="space-y-2">
+          <SubmitButton />
+          <BackButton />
+        </div>
       </OrderContextProvider>
     </div>
   );

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<ContextType>({} as ContextType);
 
 export function OrderContextProvider({ children }: Readonly<PropsWithChildren>) {
   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 <OrderContext.Provider value={value}>{children}</OrderContext.Provider>;