From 4971d5ee53002f59c94b76a6e65587c4a4b42572 Mon Sep 17 00:00:00 2001
From: 230417 <230417@epvc.pt>
Date: Tue, 10 Mar 2026 16:14:43 +0000
Subject: [PATCH] refactor: Safely access shop properties with optional
 chaining and reorder the shop null check in the Booking page.

---
 web/src/pages/Booking.tsx | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/web/src/pages/Booking.tsx b/web/src/pages/Booking.tsx
index 793e718..76c5e42 100644
--- a/web/src/pages/Booking.tsx
+++ b/web/src/pages/Booking.tsx
@@ -29,10 +29,8 @@ export default function Booking() {
   const [date, setDate] = useState('');
   const [slot, setSlot] = useState('');
 
-  if (!shop) return <div className="text-center py-12 text-slate-600">Barbearia não encontrada</div>;
-
-  const selectedService = shop.services.find((s) => s.id === serviceId);
-  const selectedBarber = shop.barbers.find((b) => b.id === barberId);
+  const selectedService = shop?.services.find((s) => s.id === serviceId);
+  const selectedBarber = shop?.barbers.find((b) => b.id === barberId);
 
   /**
    * Função para gerar horários padrão se não houver horários específicos predefinidos
@@ -80,6 +78,8 @@ export default function Booking() {
     return slots.filter((slot) => !bookedSlots.includes(slot));
   }, [selectedBarber, date, barberId, appointments]);
 
+  if (!shop) return <div className="text-center py-12 text-slate-600">Barbearia não encontrada</div>;
+
   const canSubmit = serviceId && barberId && date && slot;
 
   /**
@@ -124,8 +124,8 @@ export default function Booking() {
             <div className="flex flex-col items-center flex-1">
               <div
                 className={`w-10 h-10 rounded-full flex items-center justify-center border-2 transition-all ${step.completed
-                    ? 'bg-gradient-to-br from-amber-500 to-amber-600 border-amber-600 text-white shadow-md'
-                    : 'bg-white border-slate-300 text-slate-400'
+                  ? 'bg-gradient-to-br from-amber-500 to-amber-600 border-amber-600 text-white shadow-md'
+                  : 'bg-white border-slate-300 text-slate-400'
                   }`}
               >
                 {step.completed ? <CheckCircle2 size={18} /> : <step.icon size={18} />}
@@ -154,8 +154,8 @@ export default function Booking() {
                 key={s.id}
                 onClick={() => setService(s.id)}
                 className={`p-4 rounded-xl border-2 text-left transition-all ${serviceId === s.id
-                    ? 'border-amber-500 bg-gradient-to-br from-amber-50 to-amber-100/50 shadow-md scale-[1.02]'
-                    : 'border-slate-200 hover:border-amber-300 hover:bg-amber-50/50'
+                  ? 'border-amber-500 bg-gradient-to-br from-amber-50 to-amber-100/50 shadow-md scale-[1.02]'
+                  : 'border-slate-200 hover:border-amber-300 hover:bg-amber-50/50'
                   }`}
               >
                 <div className="flex items-center justify-between mb-1">
@@ -180,8 +180,8 @@ export default function Booking() {
                 key={b.id}
                 onClick={() => setBarber(b.id)}
                 className={`px-4 py-2.5 rounded-full border-2 text-sm font-medium transition-all ${barberId === b.id
-                    ? 'border-amber-500 bg-gradient-to-r from-amber-500 to-amber-600 text-white shadow-md'
-                    : 'border-slate-200 text-slate-700 hover:border-amber-300 hover:bg-amber-50'
+                  ? 'border-amber-500 bg-gradient-to-r from-amber-500 to-amber-600 text-white shadow-md'
+                  : 'border-slate-200 text-slate-700 hover:border-amber-300 hover:bg-amber-50'
                   }`}
               >
                 {b.name}
@@ -221,8 +221,8 @@ export default function Booking() {
                     key={h}
                     onClick={() => setSlot(h)}
                     className={`px-4 py-2 rounded-lg border-2 text-sm font-medium transition-all ${slot === h
-                        ? 'border-amber-500 bg-gradient-to-r from-amber-500 to-amber-600 text-white shadow-md'
-                        : 'border-slate-200 text-slate-700 hover:border-amber-300 hover:bg-amber-50'
+                      ? 'border-amber-500 bg-gradient-to-r from-amber-500 to-amber-600 text-white shadow-md'
+                      : 'border-slate-200 text-slate-700 hover:border-amber-300 hover:bg-amber-50'
                       }`}
                   >
                     {h}