import { useEffect, useState } from "react"; import dayjs from "@calcom/dayjs"; import { WEBAPP_URL } from "@calcom/lib/constants"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { RouterOutputs, trpc } from "@calcom/trpc/react"; import type { ITimezone } from "@calcom/ui"; import { Avatar, DatePicker, Label, Select, TimezoneSelect } from "@calcom/ui"; import LicenseRequired from "../../../common/components/LicenseRequired"; import TeamAvailabilityTimes from "./TeamAvailabilityTimes"; interface Props { team?: RouterOutputs["viewer"]["teams"]["get"]; member?: RouterOutputs["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 { t } = useLocale(); const [frequency, setFrequency] = useState<15 | 30 | 60>(30); useEffect(() => { utils.viewer.teams.getMemberAvailability.invalidate(); }, [utils, selectedTimeZone, selectedDate]); return ( <>
{props.member?.name}
{t("availability")}
{ setSelectedDate(dayjs(newDate)); }} /> setSelectedTimeZone(timezone.value)} classNamePrefix="react-select" />