import React, { useState, useEffect } from "react"; import dayjs from "@calcom/dayjs"; import { WEBAPP_URL } from "@calcom/lib/constants"; import { inferQueryOutput, trpc } from "@calcom/trpc/react"; import Select from "@calcom/ui/form/Select"; import TimezoneSelect, { ITimezone } from "@calcom/ui/form/TimezoneSelect"; import { Avatar } from "@calcom/ui/v2"; import DatePicker from "@calcom/ui/v2/core/form/DatePicker"; import LicenseRequired from "../../common/components/LicenseRequired"; import TeamAvailabilityTimes from "./TeamAvailabilityTimes"; 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 text-sm focus:border-neutral-800 focus:ring-neutral-800" />
Slot Length