OzPol · OzPol · Aug 7, 2024 · Jul 29, 2024 · Jul 30, 2024 · Jul 30, 2024
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -20,6 +20,4 @@ export default function RootLayout({
       <body className={inter.className}>{children}</body>
     </html>
   );
-}
-
-
+}
diff --git a/components/AvailabilityCalendar.tsx b/components/AvailabilityCalendar.tsx
@@ -1,21 +1,30 @@
-// ./components/AvailabilityCalendar.tsx
-
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import Calendar, { CalendarProps } from 'react-calendar';
 import 'react-calendar/dist/Calendar.css';
 
-const AvailabilityCalendar = ({ availableDates }: { availableDates: Date[] }) => {
+interface AvailabilityCalendarProps {
+  availableDates: Date[];
+  onDateChange?: (date: Date) => void;
+  isProvider?: boolean;
+}
+
+const AvailabilityCalendar: React.FC<AvailabilityCalendarProps> = ({ availableDates, onDateChange, isProvider }) => {
   const [selectedDate, setSelectedDate] = useState<Date | null>(null);
 
+  useEffect(() => {
+    if (availableDates.length > 0) {
+      setSelectedDate(availableDates[0]);
+    }
+  }, [availableDates]);
+
   const isAvailable = (date: Date) => {
     return availableDates.some(availableDate => availableDate.toDateString() === date.toDateString());
   };
 
-  const handleDateChange: CalendarProps['onChange'] = (date, event) => {
-    if (Array.isArray(date)) {
-      setSelectedDate(date[0]);
-    } else {
+  const handleDateChange: CalendarProps['onChange'] = (date) => {
+    if (date instanceof Date) {
       setSelectedDate(date);
+      if (onDateChange) onDateChange(date);
     }
   };
 

diff --git a/components/BookingForm.tsx b/components/BookingForm.tsx
@@ -1,60 +1,158 @@
-// components/BookingForm.tsx
+// ./components/BookingForm.tsx
 
-'use client';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
+import React, { useState, useEffect } from 'react';
+import { databases } from '../lib/appwrite.config';
+import { BookingFormProps } from '../types/appwrite.type';
 import { useRouter } from 'next/router';
-import { z } from 'zod';
-import { getBookingSchema } from '../lib/validation';
-import CustomFormField, { FormFieldType } from './CustomFormField';
-import SubmitButton from './SubmitButton';
-import { createBooking } from '../lib/booking.actions';
 
-const BookingForm = () => {
+const BookingForm: React.FC<BookingFormProps> = ({ providerId, serviceId, selectedDate, onSubmit }) => {
+  const [address, setAddress] = useState('');
+  const [city, setCity] = useState('');
+  const [state, setState] = useState('');
+  const [zipcode, setZipcode] = useState('');
+  const [coupon, setCoupon] = useState('');
+  const [discount, setDiscount] = useState(0);
   const router = useRouter();
-  const form = useForm<z.infer<ReturnType<typeof getBookingSchema>>>({
-    resolver: zodResolver(getBookingSchema('create')),
-    defaultValues: {
-      service: '',
-      date: new Date(),
-      time: '',
-    },
-  });
-
-  const onSubmit = async (values: z.infer<ReturnType<typeof getBookingSchema>>) => {
+  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') {
+      setDiscount(100);
+    } else {
+      setDiscount(0);
+    }
+  };
+
+  const handleFormSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!selectedDate) {
+      alert("Please select a date for booking.");
+      return;
+    }
+
+    const formData = {
+      date: selectedDate.toISOString(),
+      consumerId,
+      providerId,
+      serviceId,
+      status: 'pending',
+      address,
+      city,
+      state,
+      zipcode,
+      discount
+    };
+
     try {
-      await createBooking(values);
-      router.push('/customerProfile'); // Redirect after booking
+      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(`/payment-confirmation?bookingId=${responseData.bookingId}`);
+      } else {
+        console.error('Failed to create booking.');
+      }
     } catch (error) {
       console.error('Error creating booking:', error);
     }
   };
 
   return (
-    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-      <CustomFormField
-        fieldType={FormFieldType.INPUT}
-        control={form.control}
-        name="service"
-        label="Service"
-        placeholder="Service"
-      />
-      <CustomFormField
-        fieldType={FormFieldType.DATE_PICKER}
-        control={form.control}
-        name="date"
-        label="Date"
-        dateFormat="MM/dd/yyyy"
-      />
-      <CustomFormField
-        fieldType={FormFieldType.INPUT}
-        control={form.control}
-        name="time"
-        label="Time"
-        placeholder="Time"
-      />
-      <SubmitButton isLoading={false}>Create Booking</SubmitButton>
+    <form onSubmit={handleFormSubmit} className="mt-4">
+      <div>
+        <label className="block text-sm font-medium text-gray-700">Date</label>
+        <input
+          type="text"
+          value={selectedDate.toDateString()}
+          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">
+        <label className="block text-sm font-medium text-gray-700">Address</label>
+        <input
+          type="text"
+          value={address}
+          onChange={(e) => setAddress(e.target.value)}
+          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"
+          required
+        />
+      </div>
+      <div className="mt-2">
+        <label className="block text-sm font-medium text-gray-700">City</label>
+        <input
+          type="text"
+          value={city}
+          onChange={(e) => setCity(e.target.value)}
+          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"
+          required
+        />
+      </div>
+      <div className="mt-2">
+        <label className="block text-sm font-medium text-gray-700">State</label>
+        <input
+          type="text"
+          value={state}
+          onChange={(e) => setState(e.target.value)}
+          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"
+          required
+        />
+      </div>
+      <div className="mt-2">
+        <label className="block text-sm font-medium text-gray-700">Zipcode</label>
+        <input
+          type="text"
+          value={zipcode}
+          onChange={(e) => setZipcode(e.target.value)}
+          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"
+          required
+        />
+      </div>
+      <div className="mt-2">
+        <label className="block text-sm font-medium text-gray-700">Coupon Code</label>
+        <input
+          type="text"
+          value={coupon}
+          onChange={(e) => setCoupon(e.target.value)}
+          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"
+        />
+        <button
+          type="button"
+          onClick={handleCouponApply}
+          className="ml-2 bg-green-500 text-white py-1 px-2 rounded"
+        >
+          Apply
+        </button>
+      </div>
+      <button
+        type="submit"
+        className="mt-4 bg-blue-500 text-white py-2 px-4 rounded"
+      >
+        Book Now
+      </button>
     </form>
   );
 };

diff --git a/components/CustomerAccountDetails.tsx b/components/CustomerAccountDetails.tsx
@@ -125,4 +125,4 @@ const CustomerAccountDetails: React.FC = () => {
   );
 };
 
-export default CustomerAccountDetails;
+export default CustomerAccountDetails;
diff --git a/components/CustomerContent.tsx b/components/CustomerContent.tsx
@@ -0,0 +1,19 @@
+// components/CustomerContent.tsx
+import Link from 'next/link';
+
+const CustomerContent = () => {
+  return (
+    <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">Looking for inspirations?!</h1>
+      <h2 className="text-2xl mb-6">Check out our latest services and offers tailored just for you.</h2>
+      <Link href="/popular-services">
+        <span className="w-full bg-blue-500 text-white py-3 px-6 rounded-lg text-center hover:bg-blue-600">
+          View Popular Services in Your Area
+        </span>
+      </Link>
+      {/* Add more customer-specific content or components here */}
+    </div>
+  );
+};
+
+export default CustomerContent;
diff --git a/components/CustomerSearchServices.tsx b/components/CustomerSearchServices.tsx
@@ -6,7 +6,12 @@ import { Service } from '../types/appwrite.type';
 import { fetchAllServices } from './DataServiceConsumer';
 import { FaSearch } from 'react-icons/fa';
 
-const CustomerSearchServices: React.FC = () => {
+// Define the prop type for CustomerSearchServices
+interface CustomerSearchServicesProps {
+  onServiceClick: React.Dispatch<React.SetStateAction<Service | null>>;
+}
+
+const CustomerSearchServices: React.FC<CustomerSearchServicesProps> = ({ onServiceClick }) => {
   const [services, setServices] = useState<Service[]>([]);
   const [filteredServices, setFilteredServices] = useState<Service[]>([]);
   const [selectedService, setSelectedService] = useState<Service | null>(null);
@@ -225,7 +230,10 @@ const CustomerSearchServices: React.FC = () => {
             providerIcon={'/assets/DefaultProviderProfile.jpeg'}
             rating={parseFloat(calculateAverageRating(service.ratings).toFixed(1))}
             imageUrl={service.imageUrl}
-            onClick={() => setSelectedService(service)} // Set the selected service on click
+            onClick={() => { 
+              setSelectedService(service); // Set the selected service on click
+              onServiceClick(service); // Notify the parent component of the selected service
+            }}
             onProviderClick={() => setSelectedProvider(service.providerId)} // Set the selected provider on click
           />
         ))}
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,6 +20,4 @@ export default function RootLayout({ @@
           <body className={inter.className}>{children}</body>
         </html>
       );
-    }
+    }