From 8eece70ff42be7950bf43de21d1999c99a8a8978 Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Wed, 9 Apr 2025 16:51:25 +0300
Subject: [PATCH] add ClientsGrid & 'client-select' step

---
 .../orders/components/back-button.tsx         |  2 +-
 .../orders/components/contacts-grid/index.tsx | 20 +++++++++++++
 .../orders/components/submit-button.tsx       |  8 +++--
 apps/web/components/orders/order-form.tsx     |  2 ++
 apps/web/context/order.tsx                    | 30 +++++++++++++++++--
 5 files changed, 56 insertions(+), 6 deletions(-)

diff --git a/apps/web/components/orders/components/back-button.tsx b/apps/web/components/orders/components/back-button.tsx
index 5377839..14063bd 100644
--- a/apps/web/components/orders/components/back-button.tsx
+++ b/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">
diff --git a/apps/web/components/orders/components/contacts-grid/index.tsx b/apps/web/components/orders/components/contacts-grid/index.tsx
index f771162..a607c4b 100644
--- a/apps/web/components/orders/components/contacts-grid/index.tsx
+++ b/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="Клиенты"
+    />
+  );
+});
diff --git a/apps/web/components/orders/components/submit-button.tsx b/apps/web/components/orders/components/submit-button.tsx
index bd00907..2b3ba06 100644
--- a/apps/web/components/orders/components/submit-button.tsx
+++ b/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)
+  );
 }
diff --git a/apps/web/components/orders/order-form.tsx b/apps/web/components/orders/order-form.tsx
index 448fac1..5e03b4c 100644
--- a/apps/web/components/orders/order-form.tsx
+++ b/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 />
diff --git a/apps/web/context/order.tsx b/apps/web/context/order.tsx
index 9131cbf..2c5039d 100644
--- a/apps/web/context/order.tsx
+++ b/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>;