add ClientsGrid & 'client-select' step

apps/web/components/orders/components/back-button.tsx

@@ -10,7 +10,7 @@ export function BackButton() {
     prevStep();
   }
 
-  if (step === 'success' || step === 'master-select') return null;
+  if (['master-select', 'service-select', 'success'].includes(step)) return null;
 
   return (
     <Button className="w-full" onClick={() => handleOnClick()} type="button" variant="ghost">

apps/web/components/orders/components/contacts-grid/index.tsx

@@ -26,3 +26,23 @@ export const MastersGrid = withContext(ContactsFilterProvider)(function () {
     />
   );
 });
+
+export const ClientsGrid = withContext(ContactsFilterProvider)(function () {
+  const { contacts, isLoading, setFilter } = useCustomerContacts();
+  const { clientId, setClientId } = use(OrderContext);
+
+  useEffect(() => {
+    setFilter('clients');
+  }, [setFilter]);
+
+  if (isLoading) return <LoadingSpinner />;
+
+  return (
+    <ContactsGridBase
+      contacts={contacts}
+      onSelect={(contactId) => setClientId(contactId)}
+      selected={clientId}
+      title="Клиенты"
+    />
+  );
+});

apps/web/components/orders/components/submit-button.tsx

@@ -22,7 +22,11 @@ export function SubmitButton() {
 }
 
 function useButtonDisabled() {
-  const { masterId: customerId, serviceId, step } = use(OrderContext);
+  const { clientId, masterId, serviceId, step } = use(OrderContext);
 
-  return (step === 'master-select' && !customerId) || (step === 'service-select' && !serviceId);
+  return (
+    (step === 'master-select' && !masterId) ||
+    (step === 'client-select' && !clientId) ||
+    (step === 'service-select' && !serviceId)
+  );
 }

apps/web/components/orders/order-form.tsx

@@ -1,6 +1,7 @@
 'use client';
 import {
   BackButton,
+  ClientsGrid,
   DateSelect,
   MastersGrid,
   ServiceSelect,
@@ -12,6 +13,7 @@ import { withContext } from '@/utils/context';
 import { type JSX, use } from 'react';
 
 const STEP_COMPONENTS: Record<string, JSX.Element> = {
+  'client-select': <ClientsGrid />,
   'datetime-select': (
     <>
       <DateSelect />

apps/web/context/order.tsx

@@ -4,11 +4,13 @@ import { createContext, type PropsWithChildren, useMemo, useReducer, useState }
 type Action = { payload: Steps; type: 'SET_STEP' } | { type: 'NEXT_STEP' } | { type: 'PREV_STEP' };
 
 type ContextType = {
+  clientId: null | string;
   date: Date;
   masterId: null | string;
   nextStep: () => void;
   prevStep: () => void;
   serviceId: null | string;
+  setClientId: (clientId: null | string) => void;
   setDate: (date: Date) => void;
   setMasterId: (customerId: null | string) => void;
   setServiceId: (serviceId: null | string) => void;
@@ -19,9 +21,15 @@ type ContextType = {
 };
 
 type State = { step: Steps };
-type Steps = 'datetime-select' | 'master-select' | 'service-select' | 'success';
+type Steps = 'client-select' | 'datetime-select' | 'master-select' | 'service-select' | 'success';
 
-const stepsSequence: Steps[] = ['master-select', 'service-select', 'datetime-select', 'success'];
+const stepsSequence: Steps[] = [
+  'master-select',
+  'client-select',
+  'service-select',
+  'datetime-select',
+  'success',
+];
 
 function stepsReducer(state: State, action: Action): State {
   switch (action.type) {
@@ -70,6 +78,7 @@ export const OrderContext = createContext<ContextType>({} as ContextType);
 export function OrderContextProvider({ children }: Readonly<PropsWithChildren>) {
   const { entityId: masterId, setEntityId: setMasterId } = useEntityState();
   const { entityId: serviceId, setEntityId: setServiceId } = useEntityState();
+  const { entityId: clientId, setEntityId: setClientId } = useEntityState();
 
   const [date, setDate] = useState<Date>(new Date());
   const [time, setTime] = useState<null | string>(null);
@@ -78,11 +87,13 @@ export function OrderContextProvider({ children }: Readonly<PropsWithChildren>)
 
   const value = useMemo(
     () => ({
+      clientId,
       date,
       masterId,
       nextStep,
       prevStep,
       serviceId,
+      setClientId,
       setDate,
       setMasterId,
       setServiceId,
@@ -91,7 +102,20 @@ export function OrderContextProvider({ children }: Readonly<PropsWithChildren>)
       step,
       time,
     }),
-    [date, masterId, nextStep, prevStep, serviceId, setMasterId, setServiceId, setStep, step, time],
+    [
+      clientId,
+      date,
+      masterId,
+      nextStep,
+      prevStep,
+      serviceId,
+      setClientId,
+      setMasterId,
+      setServiceId,
+      setStep,
+      step,
+      time,
+    ],
   );
 
   return <OrderContext.Provider value={value}>{children}</OrderContext.Provider>;