leumas-private-shared/src/Components/Booking/Scheduling.jsx

Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains

// src/components/ScheduleBook.jsx
import React, { useState } from 'react';
import { LocalizationProvider, StaticDatePicker } from '@mui/lab';
import { TextField } from '@mui/material';
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import 'tailwindcss/tailwind.css';
import useGoogleCalendar from './useBooking';

const ScheduleBook = ({ type }) => {
  const [selectedDate, setSelectedDate] = useState(new Date());
  const [eventDetails, setEventDetails] = useState({ summary: '', description: '', start: '', end: '' });
  const { login, createEvent } = useGoogleCalendar();

  const handleDateChange = (date) => {
    setSelectedDate(date);
    const start = new Date(date).toISOString();
    const end = new Date(date.getTime() + 60 * 60 * 1000).toISOString(); // 1-hour meeting
    setEventDetails({ ...eventDetails, start, end });
  };

  const handleCreateEvent = async () => {
    const event = {
      summary: eventDetails.summary,
      description: eventDetails.description,
      start: { dateTime: eventDetails.start, timeZone: 'America/Los_Angeles' },
      end: { dateTime: eventDetails.end, timeZone: 'America/Los_Angeles' },
      attendees: [{ email: 'user@example.com' }],
      conferenceData: {
        createRequest: {
          requestId: '7qxalsvy0e',
          conferenceSolutionKey: { type: 'hangoutsMeet' },
        },
      },
    };

    const createdEvent = await createEvent(event);
    console.log('Created Event:', createdEvent);
  };

  return (
    <div className="p-4 bg-white shadow-lg rounded-lg">
      <LocalizationProvider dateAdapter={AdapterDateFns}>
        <StaticDatePicker
          displayStaticWrapperAs="desktop"
          openTo="day"
          value={selectedDate}
          onChange={handleDateChange}
          renderInput={(params) => <TextField {...params} />}
        />
      </LocalizationProvider>
      <div className="mt-4">
        <input
          type="text"
          placeholder="Event Summary"
          className="w-full p-2 mb-2 border border-gray-300 rounded"
          onChange={(e) => setEventDetails({ ...eventDetails, summary: e.target.value })}
        />
        <textarea
          placeholder="Event Description"
          className="w-full p-2 mb-2 border border-gray-300 rounded"
          onChange={(e) => setEventDetails({ ...eventDetails, description: e.target.value })}
        />
        <button
          onClick={login}
          className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
        >
          {type === 'book' ? 'Login to Google' : 'Login to Google'}
        </button>
        <button
          onClick={handleCreateEvent}
          className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 mt-2"
        >
          {type === 'book' ? 'Book Appointment' : 'Add to My Calendar'}
        </button>
      </div>
    </div>
  );
};

export default ScheduleBook;