import classNames from "classnames"; import React from "react"; import { ITimezone } from "react-timezone-select"; import { Dayjs } from "@calcom/dayjs"; import getSlots from "@calcom/lib/slots"; import { trpc } from "@calcom/trpc/react"; import { Loader } from "@calcom/ui"; interface Props { teamId: number; memberId: number; selectedDate: Dayjs; selectedTimeZone: ITimezone; frequency: number; HeaderComponent?: React.ReactNode; className?: string; } export default function TeamAvailabilityTimes(props: Props) { const { data, isLoading } = trpc.viewer.teams.getMemberAvailability.useQuery( { teamId: props.teamId, memberId: props.memberId, dateFrom: props.selectedDate.toString(), dateTo: props.selectedDate.add(1, "day").toString(), timezone: `${props.selectedTimeZone.toString()}`, }, { refetchOnWindowFocus: false, } ); const times = !isLoading ? getSlots({ frequency: props.frequency, inviteeDate: props.selectedDate, workingHours: data?.workingHours || [], minimumBookingNotice: 0, eventLength: props.frequency, }) : []; return (
{props.HeaderComponent} {isLoading && times.length === 0 && } {!isLoading && times.length === 0 && (
No Available Slots
)} {times.map((time) => (
{time.format("HH:mm")}
))}
); }