import { TrashIcon } from "@heroicons/react/outline"; import { Availability } from "@prisma/client"; import dayjs from "dayjs"; import timezone from "dayjs/plugin/timezone"; import utc from "dayjs/plugin/utc"; import React, { useEffect, useState } from "react"; import TimezoneSelect, { ITimezoneOption } from "react-timezone-select"; import { useLocale } from "@lib/hooks/useLocale"; import Button from "@components/ui/Button"; import { WeekdaySelect } from "./WeekdaySelect"; import SetTimesModal from "./modal/SetTimesModal"; dayjs.extend(utc); dayjs.extend(timezone); type AvailabilityInput = Pick; type Props = { timeZone: string; availability: Availability[]; setTimeZone: (timeZone: string) => void; setAvailability: (schedule: { openingHours: AvailabilityInput[]; dateOverrides: AvailabilityInput[]; }) => void; }; /** * @deprecated */ export const Scheduler = ({ availability, setAvailability, timeZone, setTimeZone }: Props) => { const { t, i18n } = useLocale(); const [editSchedule, setEditSchedule] = useState(-1); const [openingHours, setOpeningHours] = useState([]); useEffect(() => { setOpeningHours(availability.filter((item: Availability) => item.days.length !== 0)); }, []); useEffect(() => { setAvailability({ openingHours, dateOverrides: [] }); // eslint-disable-next-line react-hooks/exhaustive-deps }, [openingHours]); const addNewSchedule = () => setEditSchedule(openingHours.length); const applyEditSchedule = (changed: Availability) => { // new entry if (!changed.days) { changed.days = [1, 2, 3, 4, 5]; // Mon - Fri setOpeningHours(openingHours.concat(changed)); } else { // update const replaceWith = { ...openingHours[editSchedule], ...changed }; openingHours.splice(editSchedule, 1, replaceWith); setOpeningHours([...openingHours]); } }; const removeScheduleAt = (toRemove: number) => { openingHours.splice(toRemove, 1); setOpeningHours([...openingHours]); }; const OpeningHours = ({ idx, item }: { idx: number; item: Availability }) => (
  • (item.days = selected)} />
  • ); return (
    setTimeZone(tz.value)} className="focus:border-brand mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-black sm:text-sm" />
      {openingHours.map((item, idx) => ( ))}
    {editSchedule >= 0 && ( applyEditSchedule({ ...(openingHours[editSchedule] || {}), startTime: new Date( new Date().setUTCHours(Math.floor(times.startTime / 60), times.startTime % 60, 0, 0) ), endTime: new Date( new Date().setUTCHours(Math.floor(times.endTime / 60), times.endTime % 60, 0, 0) ), }) } onExit={() => setEditSchedule(-1)} /> )}
    ); };