Fixed BookingForm props and form rendering issues

Added selectedDate to BookingFormProps interface.
Ensured selectedDate is passed correctly from ServiceDetails and CustomerBooking components.
Added validation to ensure selectedDate is provided before form submission.
Updated BookingForm to handle the selectedDate and render the form correctly.

Author: OzPol

components/BookingForm.tsx

@@ -1,5 +1,7 @@
+// ./components/BookingForm.tsx
 import React, { useState, useEffect } from 'react';
 import { databases } from '../lib/appwrite.config';
+import { useRouter } from 'next/router';
 
 interface BookingFormProps {
   providerId: string;
@@ -14,6 +16,25 @@ const BookingForm: React.FC<BookingFormProps> = ({ providerId, serviceId, select
   const [zipcode, setZipcode] = useState('');
   const [coupon, setCoupon] = useState('');
   const [discount, setDiscount] = useState(0);
+  const router = useRouter();
+  const consumerId = JSON.parse(localStorage.getItem('appwriteSession') || '{}').userId;
+
+  useEffect(() => {
+    const fetchServiceDetails = async () => {
+      try {
+        const service = await databases.getDocument(
+          process.env.DATABASE_ID!,
+          process.env.SERVICE_COLLECTION_ID!,
+          serviceId
+        );
+        setDiscount(service.price);
+      } catch (error) {
+        console.error('Error fetching service details:', error);
+      }
+    };
+
+    fetchServiceDetails();
+  }, [serviceId]);
 
   const handleCouponApply = async () => {
     if (coupon === '100OFF') {
@@ -23,11 +44,12 @@ const BookingForm: React.FC<BookingFormProps> = ({ providerId, serviceId, select
     }
   };
 
-  const handleSubmit = async (e: React.FormEvent) => {
+  const handleFormSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-
-    const session = JSON.parse(localStorage.getItem('appwriteSession') || '{}');
-    const consumerId = session.userId;
+    if (!selectedDate) {
+      alert("Please select a date for booking.");
+      return;
+    }
 
     const formData = {
       date: selectedDate.toISOString(),
@@ -39,7 +61,7 @@ const BookingForm: React.FC<BookingFormProps> = ({ providerId, serviceId, select
       city,
       state,
       zipcode,
-      discount,
+      discount
     };
 
     try {
@@ -53,8 +75,7 @@ const BookingForm: React.FC<BookingFormProps> = ({ providerId, serviceId, select
 
       if (response.ok) {
         const responseData = await response.json();
-        console.log('Booking created successfully.');
-        window.location.href = `/payment-confirmation?bookingId=${responseData.bookingId}`;
+        router.push(`/payment-confirmation?bookingId=${responseData.bookingId}`);
       } else {
         console.error('Failed to create booking.');
       }
@@ -64,14 +85,14 @@ const BookingForm: React.FC<BookingFormProps> = ({ providerId, serviceId, select
   };
 
   return (
-    <form onSubmit={handleSubmit} className="mt-4">
+    <form onSubmit={handleFormSubmit} className="mt-4">
       <div>
-        <label className="block text-sm font-medium text-gray-700">Selected Date</label>
+        <label className="block text-sm font-medium text-gray-700">Date</label>
         <input
           type="text"
           value={selectedDate.toDateString()}
-          className="mt-1 block w-1/2 sm:w-1/3 lg:w-1/4 border border-gray-300 rounded-md shadow-sm p-2"
           readOnly
+          className="mt-1 block w-1/2 sm:w-1/3 lg:w-1/4 border border-gray-300 rounded-md shadow-sm p-2"
         />
       </div>
       <div className="mt-2">

components/ServiceDetails.tsx

@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+// ./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';
@@ -52,18 +53,27 @@ const ServiceDetails: React.FC<ServiceDetailsProps> = ({ service, onBack }) => {
     setIsReviewFormVisible(!isReviewFormVisible);
   };
 
-  const fetchReviews = async () => {
+  const fetchReviews = useCallback(async () => {
     try {
       const fetchedReviews = await fetchReviewsForService(service.$id);
       setReviews(fetchedReviews);
     } catch (error) {
       console.error('Error fetching reviews:', error);
     }
-  };
+  }, [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]);
+  }, [service.$id, fetchReviews]);
 
   const handleDateChange = (date: Date) => {
     setSelectedDate(date);

pages/customerBooking.tsx

@@ -4,6 +4,7 @@
 // The page will display the availability of the provider and allow the user to select a date to book a service.
 // The page will also display a form for the user to input their information and book the service.
 // The page will also have a button to return to the customer profile page.
+// ./pages/customerBooking.tsx
 
 'use client'
 
@@ -17,6 +18,7 @@ const CustomerBooking = () => {
   const router = useRouter();
   const { providerId, serviceId } = router.query;
   const [availableDates, setAvailableDates] = useState<Date[]>([]);
+  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
 
   useEffect(() => {
     const fetchAvailability = async () => {
@@ -29,6 +31,10 @@ const CustomerBooking = () => {
     fetchAvailability();
   }, [providerId]);
 
+  const handleDateChange = (date: Date) => {
+    setSelectedDate(date);
+  };
+
   if (!providerId || !serviceId) {
     return <div>Loading...</div>; // Or handle the missing IDs appropriately
   }
@@ -37,8 +43,10 @@ const CustomerBooking = () => {
     <div className="flex min-h-screen customer-background">
       <main className="w-full p-8 content-background">
         <h1 className="text-2xl font-bold mb-6">Book a Service</h1>
-        <AvailabilityCalendar availableDates={availableDates} />
-        <BookingForm providerId={providerId as string} serviceId={serviceId as string} />
+        <AvailabilityCalendar availableDates={availableDates} onDateChange={handleDateChange} />
+        {selectedDate && (
+          <BookingForm providerId={providerId as string} serviceId={serviceId as string} selectedDate={selectedDate} />
+        )}
         <button
           onClick={() => router.push('/customerProfile')}
           className="mt-4 bg-blue-500 text-white py-2 px-4 rounded"

pages/providerBooking.tsx

@@ -29,7 +29,7 @@ const ProviderBooking = () => {
       <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} />
+        <BookingForm providerId={providerId as string} serviceId={serviceId as string} selectedDate={new Date()} />
         <button
           onClick={() => router.push('/serviceProfile')}
           className="mt-4 bg-blue-500 text-white py-2 px-4 rounded"

types/appwrite.type.ts

@@ -88,6 +88,7 @@ export interface BookingCardProps {
 export interface BookingFormProps {
   providerId: string;
   serviceId: string;
+  selectedDate: Date;
 }
 
 export interface Availability extends Models.Document {