refactor: Show 404 page for new booker when event is not found. (#8946)

* CAL-1653: Show 404 page for new booker when event is not found. * Fixed slack icon color on 404 page --------- Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Keith Williams <keithwillcode@gmail.com>
2023-05-30 11:49:52 -03:00
parent 3426c17f16
commit 317f59ba63
8 changed files with 70 additions and 71 deletions
@@ -6,7 +6,7 @@ import { useEffect, useState } from "react";
 import { DOCS_URL, JOIN_SLACK, WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HeadSeo } from "@calcom/ui";
-import { BookOpen, Check, ChevronRight, FileText } from "@calcom/ui/components/icon";
+import { BookOpen, Check, ChevronRight, FileText, Slack } from "@calcom/ui/components/icon";

 import PageWrapper from "@components/PageWrapper";

@@ -165,29 +165,7 @@ export default function Custom404() {
                      className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
                      <div className="flex-shrink-0">
                        <span className="bg-muted flex h-12 w-12 items-center justify-center rounded-lg">
-                          <svg
-                            viewBox="0 0 2447.6 2452.5"
-                            className="h-6 w-6"
-                            xmlns="http://www.w3.org/2000/svg">
-                            <g clipRule="evenodd" fillRule="evenodd">
-                              <path
-                                d="m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z"
-                                fill="rgba(55, 65, 81)"
-                              />
-                              <path
-                                d="m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z"
-                                fill="rgba(55, 65, 81)"
-                              />
-                              <path
-                                d="m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z"
-                                fill="rgba(55, 65, 81)"
-                              />
-                              <path
-                                d="m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0"
-                                fill="rgba(55, 65, 81)"
-                              />
-                            </g>
-                          </svg>
+                          <Slack strokeWidth="1.5" fill="currentColor" className="h-6 w-6" />
                        </span>
                      </div>
                      <div className="min-w-0 flex-1">
@@ -313,29 +291,7 @@ export default function Custom404() {
                      className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
                      <div className="flex-shrink-0">
                        <span className="bg-muted flex h-12 w-12 items-center justify-center rounded-lg">
-                          <svg
-                            viewBox="0 0 2447.6 2452.5"
-                            className="h-6 w-6"
-                            xmlns="http://www.w3.org/2000/svg">
-                            <g clipRule="evenodd" fillRule="evenodd">
-                              <path
-                                d="m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z"
-                                fill="rgba(55, 65, 81)"
-                              />
-                              <path
-                                d="m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z"
-                                fill="rgba(55, 65, 81)"
-                              />
-                              <path
-                                d="m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z"
-                                fill="rgba(55, 65, 81)"
-                              />
-                              <path
-                                d="m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0"
-                                fill="rgba(55, 65, 81)"
-                              />
-                            </g>
-                          </svg>
+                          <Slack strokeWidth="1.5" fill="currentColor" className="h-6 w-6" />
                        </span>
                      </div>
                      <div className="min-w-0 flex-1">
@@ -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: {
@@ -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,
@@ -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",
@@ -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 <NotFound />;
+  }
+
  return (
    <>
      {/*
@@ -1,20 +0,0 @@
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-
-export const Away = () => {
-  const { t } = useLocale();
-
-  return (
-    <div className="h-screen">
-      <main className="mx-auto max-w-3xl px-4 py-24">
-        <div className="space-y-6" data-testid="event-types">
-          <div className="border-brand overflow-hidden rounded-sm border">
-            <div className="text-subtle p-8 text-center">
-              <h2 className="font-cal text-subtle mb-2 text-3xl">😴{" " + t("user_away")}</h2>
-              <p className="mx-auto max-w-md">{t("user_away_description")}</p>
-            </div>
-          </div>
-        </div>
-      </main>
-    </div>
-  );
-};
@@ -0,0 +1,30 @@
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+
+const UnAvailableMessage = ({ children, title }: { children: React.ReactNode; title: string }) => (
+  <div className="mx-auto w-full max-w-2xl">
+    <div className="bg-muted border-subtle overflow-hidden rounded-lg border p-10">
+      <h2 className="font-cal mb-4 text-3xl">{title}</h2>
+      {children}
+    </div>
+  </div>
+);
+
+export const Away = () => {
+  const { t } = useLocale();
+
+  return (
+    <UnAvailableMessage title={`😴 ${t("user_away")}`}>
+      <p className="max-w-[50ch]">{t("user_away_description")}</p>
+    </UnAvailableMessage>
+  );
+};
+
+export const NotFound = () => {
+  const { t } = useLocale();
+
+  return (
+    <UnAvailableMessage title={t("404_page_not_found")}>
+      <p className="max-w-[50ch]">{t("booker_event_not_found")}</p>
+    </UnAvailableMessage>
+  );
+};
@@ -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",
    };