diff --git a/apps/web/components/eventtype/AvailabilityTab.tsx b/apps/web/components/eventtype/AvailabilityTab.tsx index 52dcd3c121..cf784a76ee 100644 --- a/apps/web/components/eventtype/AvailabilityTab.tsx +++ b/apps/web/components/eventtype/AvailabilityTab.tsx @@ -4,13 +4,15 @@ import type { OptionProps, SingleValueProps } from "react-select"; import { components } from "react-select"; import dayjs from "@calcom/dayjs"; +import { NewScheduleButton } from "@calcom/features/schedules"; import classNames from "@calcom/lib/classNames"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { weekdayNames } from "@calcom/lib/weekday"; +import type { RouterOutputs } from "@calcom/trpc/react"; import { trpc } from "@calcom/trpc/react"; import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery"; -import { Badge, Button, Select, SettingsToggle, SkeletonText } from "@calcom/ui"; -import { FiExternalLink, FiGlobe } from "@calcom/ui/components/icon"; +import { Badge, Button, Select, SettingsToggle, SkeletonText, EmptyScreen } from "@calcom/ui"; +import { FiExternalLink, FiGlobe, FiClock } from "@calcom/ui/components/icon"; import { SelectSkeletonLoader } from "@components/availability/SkeletonLoader"; @@ -52,23 +54,24 @@ const SingleValue = ({ ...props }: SingleValueProps) => { const AvailabilitySelect = ({ className = "", + isLoading, + schedules, ...props }: { className?: string; name: string; value: number; + isLoading: boolean; + schedules: RouterOutputs["viewer"]["availability"]["list"]["schedules"] | []; onBlur: () => void; onChange: (value: AvailabilityOption | null) => void; }) => { - const { data, isLoading } = trpc.viewer.availability.list.useQuery(); const { t } = useLocale(); if (isLoading) { return ; } - const schedules = data?.schedules || []; - const options = schedules.map((schedule) => ({ value: schedule.id, label: schedule.name, @@ -107,6 +110,7 @@ const EventTypeScheduleDetails = () => { const { watch } = useFormContext(); const scheduleId = watch("schedule"); + const { isLoading, data: schedule } = trpc.viewer.availability.schedule.get.useQuery( { scheduleId: scheduleId || loggedInUser?.defaultScheduleId || undefined }, { enabled: !!scheduleId || !!loggedInUser?.defaultScheduleId } @@ -174,6 +178,19 @@ const EventTypeScheduleDetails = () => { const EventTypeSchedule = () => { const { t } = useLocale(); + const { data: schedules, isLoading } = trpc.viewer.availability.list.useQuery(); + + if (!schedules?.schedules.length && !isLoading) + return ( + } + border={false} + /> + ); + return (
@@ -183,14 +200,18 @@ const EventTypeSchedule = () => { ( - { - field.onChange(selected?.value || null); - }} - /> + <> + { + field.onChange(selected?.value || null); + }} + /> + )} />
diff --git a/apps/web/pages/availability/[schedule].tsx b/apps/web/pages/availability/[schedule].tsx index 8ba0d7f337..6f74e31b91 100644 --- a/apps/web/pages/availability/[schedule].tsx +++ b/apps/web/pages/availability/[schedule].tsx @@ -94,6 +94,7 @@ export default function Availability() { data: { schedule: scheduleId }, } = useTypedQuery(querySchema); + const { fromEventType } = router.query; const { timeFormat } = me.data || { timeFormat: null }; const { data: schedule, isLoading } = trpc.viewer.availability.schedule.get.useQuery( { scheduleId }, @@ -153,7 +154,7 @@ export default function Availability() { return ( -