create MastersGrid & master-select step

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

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

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

@@ -1,18 +1,12 @@
 'use client';
-import { LoadingSpinner } from '../../common/spinner';
 import { CardSectionHeader } from '@/components/ui';
-import { ContactsFilterProvider } from '@/context/contacts-filter';
-import { OrderContext } from '@/context/order';
-import { useCustomerContacts } from '@/hooks/contacts';
 // eslint-disable-next-line import/extensions
 import AvatarPlaceholder from '@/public/avatar/avatar_placeholder.png';
-import { withContext } from '@/utils/context';
 import { type CustomerFieldsFragment } from '@repo/graphql/types';
 import { Card } from '@repo/ui/components/ui/card';
 import { Label } from '@repo/ui/components/ui/label';
 import { cn } from '@repo/ui/lib/utils';
 import Image from 'next/image';
-import { use } from 'react';
 
 type ContactsGridProps = {
   readonly contacts: CustomerFieldsFragment[];
@@ -21,7 +15,7 @@ type ContactsGridProps = {
   readonly title: string;
 };
 
-function ContactsGridBase({ contacts, onSelect, selected, title }: ContactsGridProps) {
+export function ContactsGridBase({ contacts, onSelect, selected, title }: ContactsGridProps) {
   return (
     <Card className="p-4">
       <div className="flex flex-col gap-4">
@@ -70,19 +64,3 @@ function ContactsGridBase({ contacts, onSelect, selected, title }: ContactsGridP
     </Card>
   );
 }
-
-export const ContactsGrid = withContext(ContactsFilterProvider)(function () {
-  const { contacts, isLoading } = useCustomerContacts();
-  const { customerId, setCustomerId } = use(OrderContext);
-
-  if (isLoading) return <LoadingSpinner />;
-
-  return (
-    <ContactsGridBase
-      contacts={contacts}
-      onSelect={(contactId) => setCustomerId(contactId)}
-      selected={customerId}
-      title="Все"
-    />
-  );
-});

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

@@ -0,0 +1 @@
+export * from './contacts-grid-base';

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

@@ -0,0 +1,28 @@
+'use client';
+import { ContactsGridBase } from './components';
+import { LoadingSpinner } from '@/components/common/spinner';
+import { ContactsFilterProvider } from '@/context/contacts-filter';
+import { OrderContext } from '@/context/order';
+import { useCustomerContacts } from '@/hooks/contacts';
+import { withContext } from '@/utils/context';
+import { use, useEffect } from 'react';
+
+export const MastersGrid = withContext(ContactsFilterProvider)(function () {
+  const { contacts, isLoading, setFilter } = useCustomerContacts();
+  const { masterId, setMasterId } = use(OrderContext);
+
+  useEffect(() => {
+    setFilter('masters');
+  }, [setFilter]);
+
+  if (isLoading) return <LoadingSpinner />;
+
+  return (
+    <ContactsGridBase
+      contacts={contacts}
+      onSelect={(contactId) => setMasterId(contactId)}
+      selected={masterId}
+      title="Мастера"
+    />
+  );
+});

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

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

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

@@ -1,8 +1,8 @@
 'use client';
 import {
   BackButton,
-  ContactsGrid,
   DateSelect,
+  MastersGrid,
   ServiceSelect,
   SubmitButton,
   TimeSelect,
@@ -12,13 +12,13 @@ import { withContext } from '@/utils/context';
 import { type JSX, use } from 'react';
 
 const STEP_COMPONENTS: Record<string, JSX.Element> = {
-  'customer-select': <ContactsGrid />,
   'datetime-select': (
     <>
       <DateSelect />
       <TimeSelect />
     </>
   ),
+  'master-select': <MastersGrid />,
   'service-select': <ServiceSelect />,
 };
 

apps/web/context/order.tsx

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