import dayjs from "dayjs"; import utc from "dayjs/plugin/utc"; import React, { useState, useEffect } from "react"; import { WEBAPP_URL } from "@calcom/lib/constants"; import LicenseRequired from "@ee/components/LicenseRequired"; import { inferQueryOutput, trpc } from "@lib/trpc"; import Avatar from "@components/ui/Avatar"; import { DatePicker } from "@components/ui/form/DatePicker"; import Select from "@components/ui/form/Select"; import TimezoneSelect, { ITimezone } from "@components/ui/form/TimezoneSelect"; import TeamAvailabilityTimes from "./TeamAvailabilityTimes"; dayjs.extend(utc); interface Props { team?: inferQueryOutput<"viewer.teams.get">; member?: inferQueryOutput<"viewer.teams.get">["members"][number]; } export default function TeamAvailabilityModal(props: Props) { const utils = trpc.useContext(); const [selectedDate, setSelectedDate] = useState(dayjs()); const [selectedTimeZone, setSelectedTimeZone] = useState( localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess() ); const [frequency, setFrequency] = useState<15 | 30 | 60>(30); useEffect(() => { utils.invalidateQueries(["viewer.teams.getMemberAvailability"]); }, [utils, selectedTimeZone, selectedDate]); return (
{props.member?.name} {props.member?.email}
Date { setSelectedDate(dayjs(newDate)); }} />
Timezone setSelectedTimeZone(timezone.value)} classNamePrefix="react-select" className="react-select-container mt-1 block w-full rounded-sm border border-gray-300 shadow-sm focus:border-neutral-800 focus:ring-neutral-800 sm:text-sm" />
Slot Length