From a39c811aa0a1e97ef786813462b668c90a46f412 Mon Sep 17 00:00:00 2001
From: iamkiddy <francisyoungson@gmail.com>
Date: Thu, 4 Dec 2025 20:11:16 +0000
Subject: [PATCH] Refactor authentication handling on booking page by removing
 automatic login dialog and updating user prompts. Enhance user experience
 with toast notifications for login requirements and streamline form field
 accessibility for unauthenticated users.

---
 app/(pages)/book-now/page.tsx | 36 +++--------------------------------
 1 file changed, 3 insertions(+), 33 deletions(-)

diff --git a/app/(pages)/book-now/page.tsx b/app/(pages)/book-now/page.tsx
index 94ad858..73776cc 100644
--- a/app/(pages)/book-now/page.tsx
+++ b/app/(pages)/book-now/page.tsx
@@ -104,14 +104,6 @@ export default function BookNowPage() {
   const [showSignupDialog, setShowSignupDialog] = useState(false);
   const [loginPrefillEmail, setLoginPrefillEmail] = useState<string | undefined>(undefined);
 
-  // Require authentication before accessing booking page
-  useEffect(() => {
-    if (!isAuthenticated) {
-      // Show login dialog immediately if not authenticated
-      setShowLoginDialog(true);
-    }
-  }, [isAuthenticated]);
-
   // Helper function to convert day name to day number (0-6)
   const getDayNumber = (dayName: string): number => {
     const dayMap: Record<string, number> = {
@@ -237,7 +229,8 @@ export default function BookNowPage() {
     
     // Check if user is authenticated
     if (!isAuthenticated) {
-      // Open login dialog if not authenticated
+      // Show alert and open login dialog if not authenticated
+      toast.error("Please log in or sign up to book an appointment");
       setShowLoginDialog(true);
       return;
     }
@@ -666,13 +659,6 @@ export default function BookNowPage() {
                           <p className={`text-sm ${isDark ? 'text-red-200' : 'text-red-800'}`}>{error}</p>
                         </div>
                       )}
-                      {!isAuthenticated && (
-                        <div className={`mb-6 p-4 rounded-lg border ${isDark ? 'bg-yellow-900/20 border-yellow-800' : 'bg-yellow-50 border-yellow-200'}`}>
-                          <p className={`text-sm ${isDark ? 'text-yellow-200' : 'text-yellow-800'}`}>
-                            Please log in to book an appointment. The login dialog should appear automatically.
-                          </p>
-                        </div>
-                      )}
                       <form onSubmit={handleSubmit} className="space-y-6">
                   {/* Personal Information Section */}
                   <div className="space-y-4">
@@ -699,7 +685,6 @@ export default function BookNowPage() {
                           }
                           maxLength={100}
                           required
-                          disabled={!isAuthenticated}
                           className={`h-11 ${isDark ? 'bg-gray-700 border-gray-600 text-white placeholder:text-gray-400' : 'bg-white border-gray-300 text-gray-900 placeholder:text-gray-500'}`}
                         />
                       </div>
@@ -721,7 +706,6 @@ export default function BookNowPage() {
                           }
                           maxLength={100}
                           required
-                          disabled={!isAuthenticated}
                           className={`h-11 ${isDark ? 'bg-gray-700 border-gray-600 text-white placeholder:text-gray-400' : 'bg-white border-gray-300 text-gray-900 placeholder:text-gray-500'}`}
                         />
                       </div>
@@ -743,7 +727,6 @@ export default function BookNowPage() {
                         onChange={(e) => handleChange("email", e.target.value)}
                         maxLength={100}
                         required
-                        disabled={!isAuthenticated}
                         className={`h-11 ${isDark ? 'bg-gray-700 border-gray-600 text-white placeholder:text-gray-400' : 'bg-white border-gray-300 text-gray-900 placeholder:text-gray-500'}`}
                       />
                     </div>
@@ -764,7 +747,6 @@ export default function BookNowPage() {
                         onChange={(e) => handleChange("phone", e.target.value)}
                         maxLength={100}
                         required
-                        disabled={!isAuthenticated}
                         className={`h-11 ${isDark ? 'bg-gray-700 border-gray-600 text-white placeholder:text-gray-400' : 'bg-white border-gray-300 text-gray-900 placeholder:text-gray-500'}`}
                       />
                     </div>
@@ -839,14 +821,9 @@ export default function BookNowPage() {
                                             onClick={(e) => {
                                               e.preventDefault();
                                               e.stopPropagation();
-                                              if (!isAuthenticated) {
-                                                setShowLoginDialog(true);
-                                                return;
-                                              }
                                               // Pass the specific day and time slot for this button
                                               handleSlotToggle(currentDay, normalizedTimeSlot);
                                             }}
-                                            disabled={!isAuthenticated}
                                             aria-pressed={isSelected}
                                             className={`flex items-center gap-2 cursor-pointer px-4 py-2 rounded-lg border-2 transition-all focus:outline-none focus:ring-2 focus:ring-rose-500 ${
                                               isSelected
@@ -891,7 +868,6 @@ export default function BookNowPage() {
                       value={formData.message}
                       onChange={(e) => handleChange("message", e.target.value)}
                       maxLength={100}
-                      disabled={!isAuthenticated}
                       className={`w-full rounded-md border px-3 py-2 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-rose-500 focus-visible:border-rose-500 disabled:cursor-not-allowed disabled:opacity-50 ${isDark ? 'border-gray-600 bg-gray-700 text-white placeholder:text-gray-400 focus-visible:ring-rose-400 focus-visible:border-rose-400' : 'border-gray-300 bg-white text-gray-900 placeholder:text-gray-500'}`}
                     />
                   </div>
@@ -901,7 +877,7 @@ export default function BookNowPage() {
                     <Button
                       type="submit"
                       size="lg"
-                      disabled={!isAuthenticated || isCreating || availableDaysOfWeek.length === 0 || formData.selectedSlots.length === 0}
+                      disabled={isCreating || availableDaysOfWeek.length === 0 || formData.selectedSlots.length === 0}
                       className="w-full bg-gradient-to-r from-rose-500 to-pink-600 hover:from-rose-600 hover:to-pink-700 text-white shadow-lg hover:shadow-xl transition-all h-12 text-base font-semibold disabled:opacity-50 disabled:cursor-not-allowed"
                     >
                       {isCreating ? (
@@ -946,12 +922,6 @@ export default function BookNowPage() {
       <LoginDialog
         open={showLoginDialog}
         onOpenChange={(open) => {
-          // Prevent closing if user is not authenticated (force login)
-          if (!open && !isAuthenticated) {
-            // Redirect to home if they try to close without logging in
-            router.push("/");
-            return;
-          }
           setShowLoginDialog(open);
           if (!open) {
             setLoginPrefillEmail(undefined);
-- 
2.39.5