Fixes cancel booking page (#1301)

pages/cancel/[uid].tsx

@@ -1,71 +1,37 @@
 import { CalendarIcon, XIcon } from "@heroicons/react/solid";
 import dayjs from "dayjs";
-import utc from "dayjs/plugin/utc";
+import { GetServerSidePropsContext } from "next";
-import { getSession } from "next-auth/client";
 import { useRouter } from "next/router";
 import { useState } from "react";
 
+import { asStringOrUndefined } from "@lib/asStringOrNull";
+import { getSession } from "@lib/auth";
 import { useLocale } from "@lib/hooks/useLocale";
 import prisma from "@lib/prisma";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/telemetry";
+import { inferSSRProps } from "@lib/types/inferSSRProps";
 
 import CustomBranding from "@components/CustomBranding";
 import { HeadSeo } from "@components/seo/head-seo";
 import { Button } from "@components/ui/Button";
 
-dayjs.extend(utc);
+export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
-
-export default function Type(props) {
   const { t } = useLocale();
   // Get router variables
   const router = useRouter();
   const { uid } = router.query;
-
+  const [is24h] = useState(false);
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [is24h, setIs24h] = useState(false);
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(props.booking ? null : t("booking_already_cancelled"));
+  const [error, setError] = useState<string | null>(props.booking ? null : t("booking_already_cancelled"));
   const telemetry = useTelemetry();
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const cancellationHandler = async (event) => {
-    setLoading(true);
-
-    const payload = {
-      uid: uid,
-    };
-
-    telemetry.withJitsu((jitsu) =>
-      jitsu.track(telemetryEventTypes.bookingCancelled, collectPageParameters())
-    );
-
-    const res = await fetch("/api/cancel", {
-      body: JSON.stringify(payload),
-      headers: {
-        "Content-Type": "application/json",
-      },
-      method: "DELETE",
-    });
-
-    if (res.status >= 200 && res.status < 300) {
-      await router.push(
-        `/cancel/success?name=${props.profile.name}&title=${props.booking.title}&eventPage=${
-          props.profile.slug
-        }&team=${props.booking.eventType.team ? 1 : 0}`
-      );
-    } else {
-      setLoading(false);
-      setError(`${t("error_with_status_code_occured", { status: res.status })} ${t("please_try_again")}`);
-    }
-  };
-
   return (
     <div>
       <HeadSeo
-        title={`${t("cancel")} ${props.booking && props.booking.title} | ${props.profile.name}`}
+        title={`${t("cancel")} ${props.booking && props.booking.title} | ${props.profile?.name}`}
-        description={`${t("cancel")} ${props.booking && props.booking.title} | ${props.profile.name}`}
+        description={`${t("cancel")} ${props.booking && props.booking.title} | ${props.profile?.name}`}
       />
-      <CustomBranding val={props.profile.brandColor} />
+      <CustomBranding val={props.profile?.brandColor} />
       <main className="max-w-3xl mx-auto my-24">
         <div className="fixed inset-0 z-50 overflow-y-auto">
           <div className="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
@@ -109,11 +75,11 @@ export default function Type(props) {
                         </div>
                         <div className="py-4 mt-4 border-t border-b">
                           <h2 className="mb-2 text-lg font-medium text-gray-600 font-cal">
-                            {props.booking.title}
+                            {props.booking?.title}
                           </h2>
                           <p className="text-gray-500">
                             <CalendarIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
-                            {dayjs(props.booking.startTime).format(
+                            {dayjs(props.booking?.startTime).format(
                               (is24h ? "H:mm" : "h:mma") + ", dddd DD MMMM YYYY"
                             )}
                           </p>
@@ -125,7 +91,42 @@ export default function Type(props) {
                         <Button
                           color="secondary"
                           data-testid="cancel"
-                          onClick={cancellationHandler}
+                          onClick={async () => {
+                            setLoading(true);
+
+                            const payload = {
+                              uid: uid,
+                            };
+
+                            telemetry.withJitsu((jitsu) =>
+                              jitsu.track(telemetryEventTypes.bookingCancelled, collectPageParameters())
+                            );
+
+                            const res = await fetch("/api/cancel", {
+                              body: JSON.stringify(payload),
+                              headers: {
+                                "Content-Type": "application/json",
+                              },
+                              method: "DELETE",
+                            });
+
+                            if (res.status >= 200 && res.status < 300) {
+                              await router.push(
+                                `/cancel/success?name=${props.profile.name}&title=${
+                                  props.booking.title
+                                }&eventPage=${props.profile.slug}&team=${
+                                  props.booking.eventType?.team ? 1 : 0
+                                }`
+                              );
+                            } else {
+                              setLoading(false);
+                              setError(
+                                `${t("error_with_status_code_occured", { status: res.status })} ${t(
+                                  "please_try_again"
+                                )}`
+                              );
+                            }
+                          }}
                           loading={loading}>
                           {t("cancel")}
                         </Button>
@@ -143,11 +144,11 @@ export default function Type(props) {
   );
 }
 
-export async function getServerSideProps(context) {
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
   const session = await getSession(context);
   const booking = await prisma.booking.findUnique({
     where: {
-      uid: context.query.uid,
+      uid: asStringOrUndefined(context.query.uid),
     },
     select: {
       id: true,
@@ -189,19 +190,18 @@ export async function getServerSideProps(context) {
     endTime: booking.endTime.toString(),
   });
 
-  const profile = booking.eventType.team
+  const profile = {
-    ? {
+    name: booking.eventType?.team?.name || booking.user?.name || null,
-        name: booking.eventType.team.name,
+    slug: booking.eventType?.team?.slug || booking.user?.username || null,
-        slug: booking.eventType.team.slug,
+    brandColor: booking.user?.brandColor || null,
-      }
+  };
-    : booking.user;
 
   return {
     props: {
       profile,
       booking: bookingObj,
       cancellationAllowed:
-        (!!session?.user && session.user.id == booking.user?.id) || booking.startTime >= new Date(),
+        (!!session?.user && session.user?.id === booking.user?.id) || booking.startTime >= new Date(),
     },
   };
-}
+};

playwright/booking-pages.test.ts

@@ -18,7 +18,9 @@ describe("free user", () => {
     await expect(page).not.toHaveSelector(`[href="/free/60min"]`);
   });
 
-  // TODO: make sure `/free/30min` is bookable and that `/free/60min` is not
+  test.todo("`/free/30min` is bookable");
+
+  test.todo("`/free/60min` is not bookable");
 });
 
 describe("pro user", () => {
@@ -55,4 +57,8 @@ describe("pro user", () => {
       },
     });
   });
+
+  test.todo("Can reschedule the recently created booking");
+
+  test.todo("Can cancel the recently created booking");
 });