@@ -313,29 +291,7 @@ export default function Custom404() {
className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
diff --git a/apps/web/pages/new-booker/[user]/[type].tsx b/apps/web/pages/new-booker/[user]/[type].tsx
index d3003b8afe..b8997cc780 100644
--- a/apps/web/pages/new-booker/[user]/[type].tsx
+++ b/apps/web/pages/new-booker/[user]/[type].tsx
@@ -66,7 +66,15 @@ async function getDynamicGroupPageProps(context: GetServerSidePropsContext) {
booking = await getBookingByUidOrRescheduleUid(`${rescheduleUid}`);
}
- await ssr.viewer.public.event.prefetch({ username: user, eventSlug: slug });
+ // We use this to both prefetch the query on the server,
+ // as well as to check if the event exist, so we c an show a 404 otherwise.
+ const eventData = await ssr.viewer.public.event.fetch({ username: user, eventSlug: slug });
+
+ if (!eventData) {
+ return {
+ notFound: true,
+ };
+ }
return {
props: {
@@ -107,7 +115,15 @@ async function getUserPageProps(context: GetServerSidePropsContext) {
booking = await getBookingByUidOrRescheduleUid(`${rescheduleUid}`);
}
- await ssr.viewer.public.event.prefetch({ username, eventSlug: slug });
+ // We use this to both prefetch the query on the server,
+ // as well as to check if the event exist, so we c an show a 404 otherwise.
+ const eventData = await ssr.viewer.public.event.fetch({ username, eventSlug: slug });
+
+ if (!eventData) {
+ return {
+ notFound: true,
+ };
+ }
return {
props: {
diff --git a/apps/web/pages/new-booker/team/[slug]/[type].tsx b/apps/web/pages/new-booker/team/[slug]/[type].tsx
index 7ebaf2a55a..4e08fbca62 100644
--- a/apps/web/pages/new-booker/team/[slug]/[type].tsx
+++ b/apps/web/pages/new-booker/team/[slug]/[type].tsx
@@ -66,7 +66,17 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
if (rescheduleUid) {
booking = await getBookingByUidOrRescheduleUid(`${rescheduleUid}`);
}
- await ssr.viewer.public.event.prefetch({ username: teamSlug, eventSlug: meetingSlug });
+
+ // We use this to both prefetch the query on the server,
+ // as well as to check if the event exist, so we c an show a 404 otherwise.
+ const eventData = await ssr.viewer.public.event.fetch({ username: teamSlug, eventSlug: meetingSlug });
+
+ if (!eventData) {
+ return {
+ notFound: true,
+ };
+ }
+
return {
props: {
booking,
diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json
index 489551a783..6762099912 100644
--- a/apps/web/public/static/locales/en/common.json
+++ b/apps/web/public/static/locales/en/common.json
@@ -195,6 +195,7 @@
"page_doesnt_exist": "This page does not exist.",
"check_spelling_mistakes_or_go_back": "Check for spelling mistakes or go back to the previous page.",
"404_page_not_found": "404: This page could not be found.",
+ "booker_event_not_found": "We could not find the event you are trying to book.",
"getting_started": "Getting Started",
"15min_meeting": "15 Min Meeting",
"30min_meeting": "30 Min Meeting",
diff --git a/packages/features/bookings/Booker/Booker.tsx b/packages/features/bookings/Booker/Booker.tsx
index a25f9cc4f6..281b06c3ba 100644
--- a/packages/features/bookings/Booker/Booker.tsx
+++ b/packages/features/bookings/Booker/Booker.tsx
@@ -11,13 +11,13 @@ import { ToggleGroup } from "@calcom/ui";
import { Calendar, Columns, Grid } from "@calcom/ui/components/icon";
import { AvailableTimeSlots } from "./components/AvailableTimeSlots";
-import { Away } from "./components/Away";
import { BookEventForm } from "./components/BookEventForm";
import { BookFormAsModal } from "./components/BookEventForm/BookFormAsModal";
import { EventMeta } from "./components/EventMeta";
import { LargeCalendar } from "./components/LargeCalendar";
import { LargeViewHeader } from "./components/LargeViewHeader";
import { BookerSection } from "./components/Section";
+import { Away, NotFound } from "./components/Unavailable";
import { fadeInLeft, getBookerSizeClassNames, useBookerResizeAnimation } from "./config";
import { useBookerStore, useInitializeBookerStore } from "./store";
import type { BookerLayout, BookerProps } from "./types";
@@ -92,6 +92,10 @@ const BookerComponent = ({
}
}, [layout]);
+ if (event.isSuccess && !event.data) {
+ return
;
+ }
+
return (
<>
{/*
diff --git a/packages/features/bookings/Booker/components/Away.tsx b/packages/features/bookings/Booker/components/Away.tsx
deleted file mode 100644
index 45109cc97c..0000000000
--- a/packages/features/bookings/Booker/components/Away.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-
-export const Away = () => {
- const { t } = useLocale();
-
- return (
-
-
-
-
-
-
😴{" " + t("user_away")}
-
{t("user_away_description")}
-
-
-
-
- );
-};
diff --git a/packages/features/bookings/Booker/components/Unavailable.tsx b/packages/features/bookings/Booker/components/Unavailable.tsx
new file mode 100644
index 0000000000..329817076c
--- /dev/null
+++ b/packages/features/bookings/Booker/components/Unavailable.tsx
@@ -0,0 +1,30 @@
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+
+const UnAvailableMessage = ({ children, title }: { children: React.ReactNode; title: string }) => (
+
+
+
{title}
+ {children}
+
+
+);
+
+export const Away = () => {
+ const { t } = useLocale();
+
+ return (
+
+ {t("user_away_description")}
+
+ );
+};
+
+export const NotFound = () => {
+ const { t } = useLocale();
+
+ return (
+
+ {t("booker_event_not_found")}
+
+ );
+};
diff --git a/packages/features/bookings/Booker/config.ts b/packages/features/bookings/Booker/config.ts
index 171d5bddbe..c659800c61 100644
--- a/packages/features/bookings/Booker/config.ts
+++ b/packages/features/bookings/Booker/config.ts
@@ -124,6 +124,8 @@ export const useBookerResizeAnimation = (layout: BookerLayout, state: BookerStat
useEffect(() => {
const animationConfig = resizeAnimationConfig[layout][state] || resizeAnimationConfig[layout].default;
+ if (!animationScope.current) return;
+
const animatedProperties = {
height: animationConfig?.height || "auto",
};