disable submit button if no service selected

apps/web/components/orders/components/service-select.tsx

@@ -16,13 +16,34 @@ export function ServiceSelect() {
   );
 }
 
-function ServiceCard({ name }: Readonly<ServiceFieldsFragment>) {
+function ServiceCard({ documentId, name }: Readonly<ServiceFieldsFragment>) {
+  const { serviceId, setServiceId } = use(OrderContext);
+
+  const selected = serviceId === documentId;
+
+  function handleOnSelect() {
+    setServiceId(documentId);
+  }
+
   return (
-    <div className="flex items-center justify-between rounded-2xl bg-background p-4 px-6 dark:bg-primary/5">
+    <label
+      className={cn(
+        'flex items-center justify-between border-2 rounded-2xl bg-background p-4 px-6 cursor-pointer dark:bg-primary/5',
+        selected ? 'border-primary' : 'border-transparent',
+      )}
+    >
+      <input
+        checked={selected}
+        className="hidden"
+        name="service"
+        onChange={() => handleOnSelect()}
+        type="radio"
+        value={documentId}
+      />
       <div className="flex flex-col gap-2">
         {name}
         <span className={cn('text-xs font-normal', 'text-muted-foreground')}>ололо цена</span>
       </div>
-    </div>
+    </label>
   );
 }

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

@@ -4,7 +4,7 @@ import { Button } from '@repo/ui/components/ui/button';
 import { use } from 'react';
 
 export function SubmitButton() {
-  const { customerId, nextStep, step } = use(OrderContext);
+  const { nextStep, step } = use(OrderContext);
 
   function handleOnClick() {
     if (step !== 'success') {
@@ -12,7 +12,7 @@ export function SubmitButton() {
     }
   }
 
-  const disabled = step === 'customer-select' && !customerId;
+  const disabled = useButtonDisabled();
 
   return (
     <Button className="w-full" disabled={disabled} onClick={() => handleOnClick()} type="button">
@@ -20,3 +20,9 @@ export function SubmitButton() {
     </Button>
   );
 }
+
+function useButtonDisabled() {
+  const { customerId, serviceId, step } = use(OrderContext);
+
+  return (step === 'customer-select' && !customerId) || (step === 'service-select' && !serviceId);
+}

apps/web/context/order.tsx

@@ -7,7 +7,9 @@ type ContextType = {
   customerId: null | string;
   nextStep: () => void;
   prevStep: () => void;
+  serviceId: null | string;
   setCustomerId: (customerId: string) => void;
+  setServiceId: (serviceId: string) => void;
   setStep: (step: Steps) => void;
   step: Steps;
 };
@@ -44,9 +46,9 @@ function stepsReducer(state: State, action: Action): State {
   }
 }
 
-function useCustomerState() {
-  const [customerId, setCustomerId] = useState<null | string>(null);
-  return { customerId, setCustomerId };
+function useEntityState() {
+  const [entityId, setEntityId] = useState<null | string>(null);
+  return { entityId, setEntityId };
 }
 
 function useStep() {
@@ -62,7 +64,9 @@ function useStep() {
 export const OrderContext = createContext<ContextType>({} as ContextType);
 
 export function OrderContextProvider({ children }: Readonly<PropsWithChildren>) {
-  const { customerId, setCustomerId } = useCustomerState();
+  const { entityId: customerId, setEntityId: setCustomerId } = useEntityState();
+  const { entityId: serviceId, setEntityId: setServiceId } = useEntityState();
+
   const { nextStep, prevStep, setStep, step } = useStep();
 
   const value = useMemo(
@@ -70,11 +74,13 @@ export function OrderContextProvider({ children }: Readonly<PropsWithChildren>)
       customerId,
       nextStep,
       prevStep,
+      serviceId,
       setCustomerId,
+      setServiceId,
       setStep,
       step,
     }),
-    [customerId, nextStep, prevStep, setCustomerId, setStep, step],
+    [customerId, nextStep, prevStep, serviceId, setCustomerId, setServiceId, setStep, step],
   );
 
   return <OrderContext.Provider value={value}>{children}</OrderContext.Provider>;