feat: Redirect customer to confirmation page after booking and add 'Back to Profile' button (instead of generic landing page)

- Updated BookingForm to redirect to confirmation page after booking.
- Modified confirmation page to include a Back to Profile button.
- the Back to Profile button routes the user back to their profile page.

Author: OzPol

components/BookingForm.tsx

@@ -1,15 +1,11 @@
 // ./components/BookingForm.tsx
+
 import React, { useState, useEffect } from 'react';
 import { databases } from '../lib/appwrite.config';
+import { BookingFormProps } from '../types/appwrite.type';
 import { useRouter } from 'next/router';
 
-interface BookingFormProps {
-  providerId: string;
-  serviceId: string;
-  selectedDate: Date;
-}
-
-const BookingForm: React.FC<BookingFormProps> = ({ providerId, serviceId, selectedDate }) => {
+const BookingForm: React.FC<BookingFormProps> = ({ providerId, serviceId, selectedDate, onSubmit }) => {
   const [address, setAddress] = useState('');
   const [city, setCity] = useState('');
   const [state, setState] = useState('');

components/ServiceDetails.tsx

@@ -1,11 +1,13 @@
 // ./components/ServiceDetails.tsx
+
 import React, { useState, useEffect, useCallback } from 'react';
 import BookingForm from './BookingForm';
 import AvailabilityCalendar from './AvailabilityCalendar';
 import { Service, ReviewCardProps } from '../types/appwrite.type';
 import ReviewCard from './ReviewCard';
 import ReviewForm from './ReviewForm';
 import { fetchReviewsForService } from './DataReviewConsumerView';
+import { useRouter } from 'next/router';
 
 interface ServiceDetailsProps {
   service: Service;
@@ -44,6 +46,7 @@ const ServiceDetails: React.FC<ServiceDetailsProps> = ({ service, onBack }) => {
   const [isBookingSectionVisible, setIsBookingSectionVisible] = useState(false);
   const [isReviewFormVisible, setIsReviewFormVisible] = useState(false);
   const [reviews, setReviews] = useState<ReviewCardProps[]>([]);
+  const router = useRouter();
 
   const toggleBookingSection = () => {
     setIsBookingSectionVisible(!isBookingSectionVisible);
@@ -63,22 +66,33 @@ const ServiceDetails: React.FC<ServiceDetailsProps> = ({ service, onBack }) => {
   }, [service.$id]);
 
   useEffect(() => {
-    const fetchReviews = async () => {
-      try {
-        const fetchedReviews = await fetchReviewsForService(service.$id);
-        setReviews(fetchedReviews);
-      } catch (error) {
-        console.error('Error fetching reviews:', error);
-      }
-    };
-  
     fetchReviews();
   }, [service.$id, fetchReviews]);
 
   const handleDateChange = (date: Date) => {
     setSelectedDate(date);
   };
 
+  const handleFormSubmit = async (formData: any) => {
+    try {
+      const response = await fetch('/api/bookings/create', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(formData),
+      });
+
+      if (response.ok) {
+        router.push('/customerProfile#bookings');
+      } else {
+        console.error('Failed to create booking.');
+      }
+    } catch (error) {
+      console.error('Error creating booking:', error);
+    }
+  };
+
   return (
     <div>
       <h2 className="text-3xl font-bold mb-2">{service.name}</h2>
@@ -115,7 +129,12 @@ const ServiceDetails: React.FC<ServiceDetailsProps> = ({ service, onBack }) => {
           <h2 className="text-2xl font-bold mb-4">Booking: {service.name}</h2>
           <AvailabilityCalendar availableDates={availableDates} onDateChange={handleDateChange} />
           {selectedDate && (
-            <BookingForm providerId={service.providerId} serviceId={service.$id} selectedDate={selectedDate} />
+            <BookingForm
+              providerId={service.providerId}
+              serviceId={service.$id}
+              selectedDate={selectedDate}
+              onSubmit={handleFormSubmit}
+            />
           )}
         </div>
       )}

pages/customerBooking.tsx

@@ -35,6 +35,27 @@ const CustomerBooking = () => {
     setSelectedDate(date);
   };
 
+  const handleBookingSubmit = async (formData: any) => {
+    try {
+      const response = await fetch('/api/bookings/create', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(formData),
+      });
+
+      if (response.ok) {
+        const responseData = await response.json();
+        router.push('/customerProfile?view=bookings');
+      } else {
+        console.error('Failed to create booking.');
+      }
+    } catch (error) {
+      console.error('Error creating booking:', error);
+    }
+  };
+
   if (!providerId || !serviceId) {
     return <div>Loading...</div>; // Or handle the missing IDs appropriately
   }
@@ -45,7 +66,12 @@ const CustomerBooking = () => {
         <h1 className="text-2xl font-bold mb-6">Book a Service</h1>
         <AvailabilityCalendar availableDates={availableDates} onDateChange={handleDateChange} />
         {selectedDate && (
-          <BookingForm providerId={providerId as string} serviceId={serviceId as string} selectedDate={selectedDate} />
+          <BookingForm
+            providerId={providerId as string}
+            serviceId={serviceId as string}
+            selectedDate={selectedDate}
+            onSubmit={handleBookingSubmit}
+          />
         )}
         <button
           onClick={() => router.push('/customerProfile')}

pages/customerProfile.tsx

@@ -140,4 +140,4 @@ const CustomerProfile = () => {
   );
 };
 
-export default CustomerProfile;
+export default CustomerProfile;

pages/index.tsx

@@ -1,9 +1,44 @@
 // pages/index.tsx
 import Head from 'next/head';
 import Link from 'next/link';
-import Header from '../components/Header';
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import { account } from '../lib/appwrite.config';
 
 export default function Home() {
+  const router = useRouter();
+  const [userType, setUserType] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchSession = async () => {
+      try {
+        const session = JSON.parse(localStorage.getItem('appwriteSession') || '{}');
+        const type = localStorage.getItem('userType');
+
+        if (session && type) {
+          setUserType(type);
+        } else {
+          setUserType(null);
+        }
+      } catch (error) {
+        console.error('Error fetching session:', error);
+      }
+    };
+
+    fetchSession();
+  }, []);
+
+  const handleLogout = async () => {
+    try {
+      await account.deleteSession('current');
+      localStorage.removeItem('appwriteSession');
+      localStorage.removeItem('userType');
+      router.push('/customer-login');
+    } catch (error) {
+      console.error('Error logging out:', error);
+    }
+  };
+
   return (
     <div className="min-h-[81vh] flex flex-col justify-center items-center homepage-background">
       <Head>
@@ -13,20 +48,44 @@ export default function Home() {
       </Head>
 
       <main className="relative z-10 flex flex-col md:flex-row justify-center items-center py-8 w-full flex-1">
-        <div className="flex flex-col items-center space-y-4 p-8 bg-white bg-opacity-80 rounded-md shadow-lg md:w-3/2">
-          <h1 className="text-4xl font-bold mb-2">ProBooker</h1>
-          <h2 className="text-2xl mb-6">Connect with the pros, book with confidence</h2>
-          <Link href="/customer-start" legacyBehavior>
-            <a className="w-full bg-blue-500 text-white py-3 px-6 rounded-lg text-center hover:bg-blue-600">
-              Get Started as a Customer
-            </a>
-          </Link>
-          <Link href="/provider-start" legacyBehavior>
-            <a className="w-full bg-green-500 text-white py-3 px-6 rounded-lg text-center hover:bg-green-600">
-              Join as a Pro
-            </a>
-          </Link>
-        </div>
+        {userType ? (
+          <div className="flex flex-col items-center space-y-4 p-8 bg-white bg-opacity-80 rounded-md shadow-lg md:w-3/2">
+            <h1 className="text-4xl font-bold mb-2">Welcome, {userType}</h1>
+            {userType === 'Customer' && (
+              <>
+                <p>Customer-specific content here.</p>
+                {/* Add other customer-specific components or content */}
+              </>
+            )}
+            {userType === 'Provider' && (
+              <>
+                <p>Provider-specific content here.</p>
+                {/* Add other provider-specific components or content */}
+              </>
+            )}
+            <button
+              onClick={handleLogout}
+              className="mt-4 bg-red-500 text-white py-2 px-4 rounded"
+            >
+              Logout
+            </button>
+          </div>
+        ) : (
+          <div className="flex flex-col items-center space-y-4 p-8 bg-white bg-opacity-80 rounded-md shadow-lg md:w-3/2">
+            <h1 className="text-4xl font-bold mb-2">ProBooker</h1>
+            <h2 className="text-2xl mb-6">Connect with the pros, book with confidence</h2>
+            <Link href="/customer-start" legacyBehavior>
+              <a className="w-full bg-blue-500 text-white py-3 px-6 rounded-lg text-center hover:bg-blue-600">
+                Get Started as a Customer
+              </a>
+            </Link>
+            <Link href="/provider-start" legacyBehavior>
+              <a className="w-full bg-green-500 text-white py-3 px-6 rounded-lg text-center hover:bg-green-600">
+                Join as a Pro
+              </a>
+            </Link>
+          </div>
+        )}
       </main>
     </div>
   );

pages/payment-confirmation.tsx

@@ -1,12 +1,4 @@
 // pages/payment-confirmation.tsx
-// This is the Payment Confirmation Page
-// A page to display the payment confirmation details
-// This page is only accessible to logged in users.
-
-// pages/payment-confirmation.tsx
-// This is the Payment Confirmation Page
-// A page to display the payment confirmation details
-// This page is only accessible to logged in users.
 
 import { useRouter } from 'next/router';
 import React, { useEffect, useState } from 'react';
@@ -49,15 +41,14 @@ const PaymentConfirmation = () => {
         {/* Remove the amount display */}
         {/* <p>Amount: ${bookingDetails.servicePrice - bookingDetails.discount}</p> */}
         <button
-          onClick={() => router.push('/')}
+          onClick={() => router.push('/customerProfile#bookings')}
           className="mt-4 bg-green-500 text-white py-2 px-4 rounded"
         >
-          Back to Home
+          Back to Profile
         </button>
       </main>
     </div>
   );
 };
 
 export default PaymentConfirmation;
-

pages/providerBooking.tsx

@@ -1,3 +1,5 @@
+// ./pages/providerBooking.tsx
+
 import React, { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import AvailabilityCalendar from '../components/AvailabilityCalendar';
@@ -8,6 +10,7 @@ const ProviderBooking = () => {
   const router = useRouter();
   const { providerId, serviceId } = router.query;
   const [availableDates, setAvailableDates] = useState<Date[]>([]);
+  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
 
   useEffect(() => {
     const fetchAvailability = async () => {
@@ -20,6 +23,30 @@ const ProviderBooking = () => {
     fetchAvailability();
   }, [providerId]);
 
+  const handleDateChange = (date: Date) => {
+    setSelectedDate(date);
+  };
+
+  const handleFormSubmit = async (formData: any) => {
+    try {
+      const response = await fetch('/api/bookings/create', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(formData),
+      });
+
+      if (response.ok) {
+        router.push('/providerProfile/viewBookings');
+      } else {
+        console.error('Failed to create booking.');
+      }
+    } catch (error) {
+      console.error('Error creating booking:', error);
+    }
+  };
+
   if (!providerId || !serviceId) {
     return <div>Loading...</div>;
   }
@@ -28,10 +55,17 @@ const ProviderBooking = () => {
     <div className="flex min-h-screen provider-background">
       <main className="w-full p-8 content-background">
         <h1 className="text-2xl font-bold mb-6">Manage Bookings</h1>
-        <AvailabilityCalendar availableDates={availableDates} />
-        <BookingForm providerId={providerId as string} serviceId={serviceId as string} selectedDate={new Date()} />
+        <AvailabilityCalendar availableDates={availableDates} onDateChange={handleDateChange} />
+        {selectedDate && (
+          <BookingForm
+            providerId={providerId as string}
+            serviceId={serviceId as string}
+            selectedDate={selectedDate}
+            onSubmit={handleFormSubmit}
+          />
+        )}
         <button
-          onClick={() => router.push('/serviceProfile')}
+          onClick={() => router.push('/providerProfile')}
           className="mt-4 bg-blue-500 text-white py-2 px-4 rounded"
         >
           Back to Profile
@@ -42,3 +76,4 @@ const ProviderBooking = () => {
 };
 
 export default ProviderBooking;
+

types/appwrite.type.ts

@@ -89,6 +89,7 @@ export interface BookingFormProps {
   providerId: string;
   serviceId: string;
   selectedDate: Date;
+  onSubmit: (formData: any) => Promise<void>;
 }
 
 export interface Availability extends Models.Document {