From fac0b0fa32269a6855e3cb602219041252ef99b3 Mon Sep 17 00:00:00 2001
From: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com>
Date: Wed, 16 Nov 2022 20:48:17 +0100
Subject: [PATCH] Improving cancellation flow (#5447)

* Booking succes query refactor

The query is now using the uid as its main identifier for the success page

* Minor changes to the succes.tsx and tests

* Convert eventtype dates to string, and only select eventtype slug from db to have a smaller query (we don't need more data, and this way we don't need to convert the dates in here to smaller strings either.)

* In the payment component get the bookingUid from props instead of the query

* design fixes

* fix UI for recurring bookings

* fix success page for recurring events

* fix cancelling recurring events

* fix design of successful cancellation page

* fix email redirect + design fixes

* remove old cancel page

* fix v2 design for text area

* Changed the recurringMutation to use the uid for the success booking page

* redirect form old to new cancel page

* fix success page for recurring events

* rename to allRemainingbookings

* fix old cancel redirect

* fix recurring cancel link in email

* fix redirect when cancelling one recurring booking

* remove reschedule for recurring events in email

* create queryschema for cancel success page

* scroll down to bottom if cancel

* add cancellation reason

* fix tests

* fix old /cancel component

* code clean up

* Uses URL query as cancellation state

Also fixes string to boolean inference

Co-authored-by: Mischa Rouleaux <mischa-rouleaux@live.nl>
Co-authored-by: alannnc <alannnc@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Co-authored-by: Jeroen Reumkens <hello@jeroenreumkens.nl>
Co-authored-by: Hariom Balhara <hariombalhara@gmail.com>
Co-authored-by: CarinaWolli <wollencarina@gmail.com>
Co-authored-by: zomars <zomars@me.com>
---
 .../components/booking/BookingListItem.tsx    |   5 +-
 apps/web/components/booking/CancelBooking.tsx |  35 +-
 .../components/booking/pages/BookingPage.tsx  |   1 +
 apps/web/pages/cancel/[uid].tsx               | 305 +-----------------
 apps/web/pages/cancel/success.tsx             |  18 +-
 apps/web/pages/success.tsx                    |  99 ++++--
 apps/web/playwright/booking-pages.e2e.ts      |   2 +-
 .../playwright/dynamic-booking-pages.e2e.ts   |   2 +-
 apps/web/public/static/locales/en/common.json |   6 +-
 packages/emails/src/components/ManageLink.tsx |  13 +-
 packages/lib/CalEventParser.ts                |   5 +-
 11 files changed, 129 insertions(+), 362 deletions(-)

diff --git a/apps/web/components/booking/BookingListItem.tsx b/apps/web/components/booking/BookingListItem.tsx
index dac6a6d7a1..2023df30bf 100644
--- a/apps/web/components/booking/BookingListItem.tsx
+++ b/apps/web/components/booking/BookingListItem.tsx
@@ -112,7 +112,9 @@ function BookingListItem(booking: BookingItemProps) {
       label: isTabRecurring && isRecurring ? t("cancel_all_remaining") : t("cancel"),
       /* When cancelling we need to let the UI and the API know if the intention is to
          cancel all remaining bookings or just that booking instance. */
-      href: `/cancel/${booking.uid}${isTabRecurring && isRecurring ? "?allRemainingBookings=true" : ""}`,
+      href: `/success?uid=${booking.uid}&cancel=true${
+        isTabRecurring && isRecurring ? "&allRemainingBookings=true" : ""
+      }`,
       icon: Icon.FiX,
     },
     {
@@ -190,6 +192,7 @@ function BookingListItem(booking: BookingItemProps) {
       pathname: "/success",
       query: {
         uid: booking.uid,
+        allRemainingBookings: isTabRecurring,
         listingStatus: booking.listingStatus,
         email: booking.attendees[0] ? booking.attendees[0].email : undefined,
       },
diff --git a/apps/web/components/booking/CancelBooking.tsx b/apps/web/components/booking/CancelBooking.tsx
index 0dbc58ae4e..e6da1c4e6a 100644
--- a/apps/web/components/booking/CancelBooking.tsx
+++ b/apps/web/components/booking/CancelBooking.tsx
@@ -5,8 +5,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import type { RecurringEvent } from "@calcom/types/Calendar";
-import { Button } from "@calcom/ui/Button";
 import { Icon } from "@calcom/ui/Icon";
+import { Button, TextArea } from "@calcom/ui/components";
 
 type Props = {
   booking: {
@@ -22,13 +22,14 @@ type Props = {
   team?: string | null;
   setIsCancellationMode: (value: boolean) => void;
   theme: string | null;
+  allRemainingBookings: boolean;
 };
 
 export default function CancelBooking(props: Props) {
   const [cancellationReason, setCancellationReason] = useState<string>("");
   const { t } = useLocale();
   const router = useRouter();
-  const { booking, profile, team } = props;
+  const { booking, profile, team, allRemainingBookings } = props;
   const [loading, setLoading] = useState(false);
   const telemetry = useTelemetry();
   const [error, setError] = useState<string | null>(booking ? null : t("booking_already_cancelled"));
@@ -51,30 +52,23 @@ export default function CancelBooking(props: Props) {
       {!error && (
         <div className="mt-5 sm:mt-6">
           <label className="text-bookingdark font-medium dark:text-white">{t("cancellation_reason")}</label>
-          <textarea
+          <TextArea
             placeholder={t("cancellation_reason_placeholder")}
             value={cancellationReason}
             onChange={(e) => setCancellationReason(e.target.value)}
-            className="mt-2 mb-3 w-full dark:border-gray-900 dark:bg-gray-700 dark:text-white sm:mb-3 "
+            className="mt-2 mb-4 w-full dark:border-gray-900 dark:bg-gray-700 dark:text-white "
             rows={3}
           />
-          <div className="flex flex-col-reverse rtl:space-x-reverse sm:flex-row">
-            {!props.recurringEvent && (
-              <div className="border-bookinglightest mt-5 flex w-full justify-center border-t pt-3 sm:mt-0 sm:justify-start sm:border-0 sm:pt-0">
-                <Button
-                  color="secondary"
-                  className="border-0 sm:border"
-                  onClick={() => router.push(`/reschedule/${booking?.uid}`)}>
-                  {t("reschedule_this")}
-                </Button>
-              </div>
-            )}
-            <div className="mb-2 flex w-full space-x-2 text-right sm:mb-0 ">
-              <Button color="secondary" onClick={() => props.setIsCancellationMode(false)}>
+          <div className="flex flex-col-reverse rtl:space-x-reverse ">
+            <div className="ml-auto flex w-full space-x-4 ">
+              <Button
+                className="ml-auto"
+                color="secondary"
+                onClick={() => props.setIsCancellationMode(false)}>
                 {t("nevermind")}
               </Button>
               <Button
-                className="flex grow justify-center"
+                className="flex justify-center"
                 data-testid="cancel"
                 onClick={async () => {
                   setLoading(true);
@@ -82,6 +76,7 @@ export default function CancelBooking(props: Props) {
                   const payload = {
                     id: booking?.id,
                     cancellationReason: cancellationReason,
+                    allRemainingBookings,
                   };
 
                   telemetry.event(telemetryEventTypes.bookingCancelled, collectPageParameters());
@@ -98,7 +93,7 @@ export default function CancelBooking(props: Props) {
                     await router.push(
                       `/cancel/success?name=${props.profile.name}&title=${booking?.title}&eventPage=${
                         profile.slug
-                      }&team=${team ? 1 : 0}&recurring=${!!props.recurringEvent}`
+                      }&team=${team ? 1 : 0}&allRemainingBookings=${allRemainingBookings}`
                     );
                   } else {
                     setLoading(false);
@@ -110,7 +105,7 @@ export default function CancelBooking(props: Props) {
                   }
                 }}
                 loading={loading}>
-                {t("cancel_event")}
+                {props.allRemainingBookings ? t("cancel_all_remaining") : t("cancel_event")}
               </Button>
             </div>
           </div>
diff --git a/apps/web/components/booking/pages/BookingPage.tsx b/apps/web/components/booking/pages/BookingPage.tsx
index 72bee51acc..b1cca05ff5 100644
--- a/apps/web/components/booking/pages/BookingPage.tsx
+++ b/apps/web/components/booking/pages/BookingPage.tsx
@@ -155,6 +155,7 @@ const BookingPage = ({
         pathname: "/success",
         query: {
           uid,
+          allRemainingBookings: true,
           email: bookingForm.getValues("email"),
           eventTypeSlug: eventType.slug,
         },
diff --git a/apps/web/pages/cancel/[uid].tsx b/apps/web/pages/cancel/[uid].tsx
index 467c93d3b4..3162d06336 100644
--- a/apps/web/pages/cancel/[uid].tsx
+++ b/apps/web/pages/cancel/[uid].tsx
@@ -1,29 +1,6 @@
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
 import { GetServerSidePropsContext } from "next";
-import { useRouter } from "next/router";
-import { useState } from "react";
 import z from "zod";
 
-import dayjs from "@calcom/dayjs";
-import CustomBranding from "@calcom/lib/CustomBranding";
-import classNames from "@calcom/lib/classNames";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { parseRecurringEvent } from "@calcom/lib/isRecurringEvent";
-import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
-import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
-import { detectBrowserTimeFormat } from "@calcom/lib/timeFormat";
-import { localStorage } from "@calcom/lib/webstorage";
-import prisma, { bookingMinimalSelect } from "@calcom/prisma";
-import { Icon } from "@calcom/ui/Icon";
-import { Button } from "@calcom/ui/components/button";
-
-import { getSession } from "@lib/auth";
-import { inferSSRProps } from "@lib/types/inferSSRProps";
-
-import { HeadSeo } from "@components/seo/head-seo";
-
-import { ssrInit } from "@server/lib/ssr";
-
 const querySchema = z.object({
   uid: z.string(),
   allRemainingBookings: z
@@ -32,288 +9,16 @@ const querySchema = z.object({
     .transform((val) => (val ? JSON.parse(val) : false)),
 });
 
-export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
-  const { t } = useLocale();
-  // Get router variables
-  const router = useRouter();
-  const { uid, allRemainingBookings } = querySchema.parse(router.query);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(props.booking ? null : t("booking_already_cancelled"));
-  const [cancellationReason, setCancellationReason] = useState<string>("");
-  const [moreEventsVisible, setMoreEventsVisible] = useState(false);
-  const telemetry = useTelemetry();
-  return (
-    <div className="h-screen bg-neutral-100 dark:bg-neutral-900">
-      <HeadSeo
-        title={`${t("cancel")} ${props.booking && props.booking.title} | ${props.profile?.name}`}
-        description={`${t("cancel")} ${props.booking && props.booking.title} | ${props.profile?.name}`}
-      />
-      <CustomBranding lightVal={props.profile?.brandColor} darkVal={props.profile?.darkBrandColor} />
-      <main className="h-full sm:flex sm:items-center">
-        <div className="mx-auto flex justify-center px-4 pt-4 pb-20 sm:block sm:p-0">
-          <div className="inline-block transform overflow-hidden rounded-md border bg-white px-8 pt-5 pb-4 text-left align-bottom transition-all dark:border-neutral-700 dark:bg-gray-800 sm:my-8 sm:w-full sm:max-w-lg sm:py-6 sm:align-middle">
-            <div>
-              <div>
-                {error && (
-                  <div>
-                    <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
-                      <Icon.FiX className="h-6 w-6 text-red-600" />
-                    </div>
-                    <div className="mt-3 text-center sm:mt-5">
-                      <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
-                        {error}
-                      </h3>
-                    </div>
-                  </div>
-                )}
-                {!error && (
-                  <>
-                    <div>
-                      <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
-                        <Icon.FiX className="h-6 w-6 text-red-600" />
-                      </div>
-                      <div className="mt-3 text-center sm:mt-5">
-                        <h3 className="text-2xl font-semibold leading-6 text-neutral-900 dark:text-white">
-                          {props.cancellationAllowed
-                            ? t("really_cancel_booking")
-                            : t("cannot_cancel_booking")}
-                        </h3>
-                        <div className="mt-2">
-                          <p className="text-sm text-neutral-600 dark:text-gray-300">
-                            {!props.booking?.eventType.recurringEvent
-                              ? props.cancellationAllowed
-                                ? t("reschedule_instead")
-                                : t("event_is_in_the_past")
-                              : allRemainingBookings
-                              ? t("cancelling_all_recurring")
-                              : t("cancelling_event_recurring")}
-                          </p>
-                        </div>
-                        <div className="border-bookinglightest text-bookingdark mt-4 grid grid-cols-3 border-t py-4 text-left dark:border-gray-900 dark:text-gray-300">
-                          <div className="font-medium">{t("what")}</div>
-                          <div className="col-span-2 mb-6">{props.booking?.title}</div>
-                          <div className="font-medium">{t("when")}</div>
-                          <div className="col-span-2 mb-6">
-                            {props.booking?.eventType.recurringEvent && props.recurringInstances ? (
-                              <>
-                                <div className="mb-1 inline py-1 text-left">
-                                  <div>
-                                    {dayjs(props.recurringInstances[0].startTime).format(
-                                      detectBrowserTimeFormat + ", dddd DD MMMM YYYY"
-                                    )}
-                                    <Collapsible
-                                      open={moreEventsVisible}
-                                      onOpenChange={() => setMoreEventsVisible(!moreEventsVisible)}>
-                                      <CollapsibleTrigger
-                                        type="button"
-                                        className={classNames(
-                                          "-ml-4 block w-full text-center",
-                                          moreEventsVisible ? "hidden" : ""
-                                        )}>
-                                        + {t("plus_more", { count: props.recurringInstances.length - 1 })}
-                                      </CollapsibleTrigger>
-                                      <CollapsibleContent>
-                                        {props.booking?.eventType.recurringEvent?.count &&
-                                          props.recurringInstances.slice(1).map((dateObj, idx) => (
-                                            <div key={idx} className="">
-                                              {dayjs(dateObj.startTime).format(
-                                                detectBrowserTimeFormat + ", dddd DD MMMM YYYY"
-                                              )}
-                                            </div>
-                                          ))}
-                                      </CollapsibleContent>
-                                    </Collapsible>
-                                  </div>
-                                </div>
-                              </>
-                            ) : (
-                              <>
-                                {dayjs(props.booking?.startTime).format(
-                                  detectBrowserTimeFormat + ", dddd DD MMMM YYYY"
-                                )}{" "}
-                                <span className="text-bookinglight">
-                                  ({localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess()})
-                                </span>
-                              </>
-                            )}
-                          </div>
-                        </div>
-                        {props.booking?.eventType.recurringEvent &&
-                          props.booking?.eventType.recurringEvent.freq &&
-                          props.recurringInstances && (
-                            <div className="border-b text-center text-gray-500">
-                              <Icon.FiRefreshCcw className="mr-3 -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
-                              <p className="mb-1 -ml-2 inline px-2 py-1">
-                                {getEveryFreqFor({
-                                  t,
-                                  recurringEvent: props.booking.eventType.recurringEvent,
-                                  recurringCount: props.recurringInstances.length,
-                                })}
-                              </p>
-                            </div>
-                          )}
-                      </div>
-                    </div>
-                    {props.cancellationAllowed && (
-                      <div>
-                        <textarea
-                          autoFocus={true}
-                          name={t("cancellation_reason")}
-                          placeholder={t("cancellation_reason_placeholder")}
-                          value={cancellationReason}
-                          onChange={(e) => setCancellationReason(e.target.value)}
-                          className="mt-2 mb-3 w-full dark:border-gray-900 dark:bg-gray-700 dark:text-white sm:mb-3 "
-                          rows={3}
-                        />
-                        <div className="flex justify-between space-x-2 text-center rtl:space-x-reverse">
-                          {!props.booking.eventType?.recurringEvent && (
-                            <Button color="secondary" onClick={() => router.push("/reschedule/" + uid)}>
-                              {t("reschedule_this")}
-                            </Button>
-                          )}
-                          <Button
-                            data-testid="cancel"
-                            onClick={async () => {
-                              setLoading(true);
-
-                              const payload = {
-                                uid: uid,
-                                cancellationReason: cancellationReason,
-                                allRemainingBookings: !!props.recurringInstances,
-                              };
-
-                              telemetry.event(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
-                                  }&recurring=${!!props.recurringInstances}`
-                                );
-                              } else {
-                                setLoading(false);
-                                setError(
-                                  `${t("error_with_status_code_occured", { status: res.status })} ${t(
-                                    "please_try_again"
-                                  )}`
-                                );
-                              }
-                            }}
-                            loading={loading}>
-                            {t("cancel_event")}
-                          </Button>
-                        </div>
-                      </div>
-                    )}
-                  </>
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
-      </main>
-    </div>
-  );
+export default function Type() {
+  return <></>;
 }
 
 export const getServerSideProps = async (context: GetServerSidePropsContext) => {
-  const ssr = await ssrInit(context);
-  const session = await getSession(context);
   const { allRemainingBookings, uid } = querySchema.parse(context.query);
-  const booking = await prisma.booking.findUnique({
-    where: {
-      uid,
-    },
-    select: {
-      ...bookingMinimalSelect,
-      recurringEventId: true,
-      user: {
-        select: {
-          id: true,
-          username: true,
-          name: true,
-          brandColor: true,
-          darkBrandColor: true,
-        },
-      },
-      eventType: {
-        select: {
-          length: true,
-          recurringEvent: true,
-          team: {
-            select: {
-              slug: true,
-              name: true,
-            },
-          },
-        },
-      },
-    },
-  });
-
-  if (!booking) {
-    // TODO: Booking is already cancelled
-    return {
-      props: { booking: null },
-    };
-  }
-
-  const bookingObj = Object.assign({}, booking, {
-    startTime: booking.startTime.toString(),
-    endTime: booking.endTime.toString(),
-    eventType: {
-      ...booking.eventType,
-      recurringEvent: parseRecurringEvent(booking.eventType?.recurringEvent),
-    },
-  });
-
-  let recurringInstances = null;
-  if (booking.eventType?.recurringEvent && allRemainingBookings) {
-    recurringInstances = await prisma.booking.findMany({
-      where: {
-        recurringEventId: booking.recurringEventId,
-        startTime: {
-          gte: new Date(),
-        },
-        NOT: [{ status: "CANCELLED" }, { status: "REJECTED" }],
-      },
-      select: {
-        startTime: true,
-        endTime: true,
-      },
-    });
-    recurringInstances = recurringInstances.map((recurr) => ({
-      ...recurr,
-      startTime: recurr.startTime.toString(),
-      endTime: recurr.endTime.toString(),
-    }));
-  }
-
-  const profile = {
-    name: booking.eventType?.team?.name || booking.user?.name || null,
-    slug: booking.eventType?.team?.slug || booking.user?.username || null,
-    brandColor: booking.user?.brandColor || null,
-    darkBrandColor: booking.user?.darkBrandColor || null,
-  };
-
   return {
-    props: {
-      profile,
-      booking: bookingObj,
-      recurringInstances,
-      cancellationAllowed:
-        (!!session?.user && session.user?.id === booking.user?.id) || booking.startTime >= new Date(),
-      trpcState: ssr.dehydrate(),
+    redirect: {
+      permanent: false,
+      destination: `/success?uid=${uid}&allRemainingBookings=${allRemainingBookings}&cancel=true`,
     },
   };
 };
diff --git a/apps/web/pages/cancel/success.tsx b/apps/web/pages/cancel/success.tsx
index e264433eeb..1f5e674708 100644
--- a/apps/web/pages/cancel/success.tsx
+++ b/apps/web/pages/cancel/success.tsx
@@ -1,20 +1,30 @@
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
+import { z } from "zod";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import Button from "@calcom/ui/Button";
 import { Icon } from "@calcom/ui/Icon";
+import { Button } from "@calcom/ui/components/button";
 
 import { HeadSeo } from "@components/seo/head-seo";
 
+const querySchema = z.object({
+  title: z.string().optional(),
+  name: z.string().optional(),
+  eventPage: z.string().optional(),
+  allRemainingBookings: z
+    .string()
+    .optional()
+    .transform((val) => (val ? JSON.parse(val) : false)),
+});
+
 export default function CancelSuccess() {
   const { t } = useLocale();
   // Get router variables
   const router = useRouter();
-  const { title, name, eventPage, recurring } = router.query;
+  const { title, name, eventPage, allRemainingBookings } = querySchema.parse(router.query);
   let team: string | string[] | number | undefined = router.query.team;
   const { data: session, status } = useSession();
-  const isRecurringEvent = recurring === "true" ? true : false;
   const loading = status === "loading";
   // If team param passed wrongly just assume it be a non team case.
   if (team instanceof Array || typeof team === "undefined") {
@@ -63,7 +73,7 @@ export default function CancelSuccess() {
                     {!loading && session?.user && (
                       <Button
                         data-testid="back-to-bookings"
-                        href={isRecurringEvent ? "/bookings/recurring" : "/bookings/upcoming"}
+                        href={!!allRemainingBookings ? "/bookings/recurring" : "/bookings/upcoming"}
                         StartIcon={Icon.FiArrowLeft}>
                         {t("back_to_bookings")}
                       </Button>
diff --git a/apps/web/pages/success.tsx b/apps/web/pages/success.tsx
index 4156a061dc..1fe90b1aee 100644
--- a/apps/web/pages/success.tsx
+++ b/apps/web/pages/success.tsx
@@ -14,8 +14,7 @@ import BookingPageTagManager from "@calcom/app-store/BookingPageTagManager";
 import { getEventLocationValue, getSuccessPageLocationMessage } from "@calcom/app-store/locations";
 import { getEventTypeAppData } from "@calcom/app-store/utils";
 import { getEventName } from "@calcom/core/event";
-import dayjs from "@calcom/dayjs";
-import { ConfigType } from "@calcom/dayjs";
+import dayjs, { ConfigType } from "@calcom/dayjs";
 import {
   sdkActionManager,
   useEmbedNonStylesConfig,
@@ -35,11 +34,9 @@ import { localStorage } from "@calcom/lib/webstorage";
 import prisma, { baseUserSelect } from "@calcom/prisma";
 import { Prisma } from "@calcom/prisma/client";
 import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
-import Button from "@calcom/ui/Button";
 import { Icon } from "@calcom/ui/Icon";
-import { EmailInput } from "@calcom/ui/form/fields";
+import { Button, EmailInput } from "@calcom/ui/components";
 
-import { asStringOrThrow } from "@lib/asStringOrNull";
 import { timeZone } from "@lib/clock";
 import { inferSSRProps } from "@lib/types/inferSSRProps";
 
@@ -142,11 +139,32 @@ function RedirectionToast({ url }: { url: string }) {
 
 type SuccessProps = inferSSRProps<typeof getServerSideProps>;
 
+const stringToBoolean = z
+  .string()
+  .optional()
+  .transform((val) => val === "true");
+
+const querySchema = z.object({
+  uid: z.string(),
+  allRemainingBookings: stringToBoolean,
+  cancel: stringToBoolean,
+  reschedule: stringToBoolean,
+  isSuccessBookingPage: z.string().optional(),
+});
+
 export default function Success(props: SuccessProps) {
   const { t } = useLocale();
   const router = useRouter();
-  const { listingStatus, isSuccessBookingPage } = router.query;
 
+  const {
+    allRemainingBookings,
+    isSuccessBookingPage,
+    cancel: isCancellationMode,
+  } = querySchema.parse(router.query);
+
+  if (isCancellationMode && typeof window !== "undefined") {
+    window.scrollTo(0, document.body.scrollHeight);
+  }
   const location: ReturnType<typeof getEventLocationValue> = Array.isArray(props.bookingInfo.location)
     ? props.bookingInfo.location[0] || ""
     : props.bookingInfo.location || "";
@@ -160,6 +178,7 @@ export default function Success(props: SuccessProps) {
   const email = props.bookingInfo?.user?.email;
   const status = props.bookingInfo?.status;
   const reschedule = props.bookingInfo.status === BookingStatus.ACCEPTED;
+  const cancellationReason = props.bookingInfo.cancellationReason;
 
   const [is24h, setIs24h] = useState(isBrowserLocale24h());
   const { data: session } = useSession();
@@ -171,7 +190,15 @@ export default function Success(props: SuccessProps) {
   const isEmbed = useIsEmbed();
   const shouldAlignCentrallyInEmbed = useEmbedNonStylesConfig("align") !== "left";
   const shouldAlignCentrally = !isEmbed || shouldAlignCentrallyInEmbed;
-  const [isCancellationMode, setIsCancellationMode] = useState(false);
+
+  function setIsCancellationMode(value: boolean) {
+    if (value) router.query.cancel = "true";
+    else delete router.query.cancel;
+    router.replace({
+      pathname: router.pathname,
+      query: { ...router.query },
+    });
+  }
 
   const attendeeName = typeof name === "string" ? name : "Nameless";
 
@@ -251,7 +278,7 @@ export default function Success(props: SuccessProps) {
   function getTitle(): string {
     const titleSuffix = props.recurringBookings ? "_recurring" : "";
     if (isCancelled) {
-      return t("emailed_information_about_cancelled_event");
+      return "";
     }
     if (needsConfirmation) {
       if (props.profile.name !== null) {
@@ -276,7 +303,7 @@ export default function Success(props: SuccessProps) {
     <div className={isEmbed ? "" : "h-screen"} data-testid="success-page">
       {userIsOwner && !isEmbed && (
         <div className="mt-2 ml-4 -mb-4">
-          <Link href={eventType.recurringEvent?.count ? "/bookings/recurring" : "/bookings/upcoming"}>
+          <Link href={allRemainingBookings ? "/bookings/recurring" : "/bookings/upcoming"}>
             <a className="mt-2 inline-flex px-1 py-2 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-transparent dark:hover:text-white">
               <Icon.FiChevronLeft className="h-5 w-5" /> {t("back_to_bookings")}
             </a>
@@ -345,6 +372,12 @@ export default function Success(props: SuccessProps) {
                     <p className="text-neutral-600 dark:text-gray-300">{getTitle()}</p>
                   </div>
                   <div className="border-bookinglightest text-bookingdark dark:border-darkgray-300 mt-8 grid grid-cols-3 border-t pt-8 text-left dark:text-gray-300">
+                    {isCancelled && cancellationReason && (
+                      <>
+                        <div className="font-medium">{t("reason")}</div>
+                        <div className="col-span-2 mb-6 last:mb-0">{cancellationReason}</div>
+                      </>
+                    )}
                     <div className="font-medium">{t("what")}</div>
                     <div className="col-span-2 mb-6 last:mb-0">{eventName}</div>
                     <div className="font-medium">{t("when")}</div>
@@ -352,7 +385,7 @@ export default function Success(props: SuccessProps) {
                       <RecurringBookings
                         eventType={props.eventType}
                         recurringBookings={props.recurringBookings}
-                        listingStatus={(listingStatus as string) || "recurring"}
+                        allRemainingBookings={allRemainingBookings}
                         date={date}
                         is24h={is24h}
                       />
@@ -434,8 +467,8 @@ export default function Success(props: SuccessProps) {
                   !isCancelled &&
                   (!isCancellationMode ? (
                     <>
-                      <hr className="border-bookinglightest dark:border-darkgray-300" />
-                      <div className="py-8 text-center last:pb-0">
+                      <hr className="border-bookinglightest dark:border-darkgray-300 mb-8" />
+                      <div className="text-center last:pb-0">
                         <span className="text-gray-900 ltr:mr-2 rtl:ml-2 dark:text-gray-50">
                           {t("need_to_make_a_change")}
                         </span>
@@ -450,6 +483,7 @@ export default function Success(props: SuccessProps) {
                         )}
 
                         <button
+                          data-testid="cancel"
                           className={classNames(
                             "text-bookinglight text-gray-700 underline",
                             props.recurringBookings && "ltr:mr-2 rtl:ml-2"
@@ -460,19 +494,23 @@ export default function Success(props: SuccessProps) {
                       </div>
                     </>
                   ) : (
-                    <CancelBooking
-                      booking={{ uid: bookingInfo?.uid, title: bookingInfo?.title, id: bookingInfo?.id }}
-                      profile={{ name: props.profile.name, slug: props.profile.slug }}
-                      recurringEvent={eventType.recurringEvent}
-                      team={eventType?.team?.name}
-                      setIsCancellationMode={setIsCancellationMode}
-                      theme={isSuccessBookingPage ? props.profile.theme : "light"}
-                    />
+                    <>
+                      <hr className="border-bookinglightest dark:border-darkgray-300" />
+                      <CancelBooking
+                        booking={{ uid: bookingInfo?.uid, title: bookingInfo?.title, id: bookingInfo?.id }}
+                        profile={{ name: props.profile.name, slug: props.profile.slug }}
+                        recurringEvent={eventType.recurringEvent}
+                        team={eventType?.team?.name}
+                        setIsCancellationMode={setIsCancellationMode}
+                        theme={isSuccessBookingPage ? props.profile.theme : "light"}
+                        allRemainingBookings={allRemainingBookings}
+                      />
+                    </>
                   ))}
                 {userIsOwner && !needsConfirmation && !isCancellationMode && !isCancelled && (
                   <>
-                    <hr className="border-bookinglightest dark:border-darkgray-300" />
-                    <div className="text-bookingdark align-center flex flex-row justify-center py-8">
+                    <hr className="border-bookinglightest dark:border-darkgray-300 mt-8" />
+                    <div className="text-bookingdark align-center flex flex-row justify-center pt-8">
                       <span className="flex self-center font-medium text-gray-700 ltr:mr-2 rtl:ml-2 dark:text-gray-50">
                         {t("add_to_calendar")}
                       </span>
@@ -579,7 +617,7 @@ export default function Success(props: SuccessProps) {
                 )}
                 {session === null && !(userIsOwner || props.hideBranding) && (
                   <>
-                    <hr className="border-bookinglightest dark:border-darkgray-300" />
+                    <hr className="border-bookinglightest dark:border-darkgray-300 mt-8" />
                     <div className="border-bookinglightest text-booking-lighter dark:border-darkgray-300 pt-8 text-center text-xs dark:text-white">
                       <a href="https://cal.com/signup">{t("create_booking_link_with_calcom")}</a>
 
@@ -596,10 +634,14 @@ export default function Success(props: SuccessProps) {
                           name="email"
                           id="email"
                           defaultValue={email || ""}
-                          className="focus:border-brand border-bookinglightest dark:border-darkgray-300 mt-0 block w-full rounded-sm border-gray-300 shadow-sm focus:ring-black dark:bg-black dark:text-white sm:text-sm"
+                          className="mr- focus:border-brand border-bookinglightest dark:border-darkgray-300 mt-0 block w-full rounded-none rounded-l-md border-gray-300 shadow-sm focus:ring-black dark:bg-black dark:text-white sm:text-sm"
                           placeholder="rick.astley@cal.com"
                         />
-                        <Button size="lg" type="submit" className="min-w-max" color="primary">
+                        <Button
+                          size="lg"
+                          type="submit"
+                          className="min-w-max rounded-none rounded-r-md"
+                          color="primary">
                           {t("try_for_free")}
                         </Button>
                       </form>
@@ -622,15 +664,15 @@ type RecurringBookingsProps = {
   recurringBookings: SuccessProps["recurringBookings"];
   date: dayjs.Dayjs;
   is24h: boolean;
-  listingStatus: string;
+  allRemainingBookings: boolean;
 };
 
 export function RecurringBookings({
   eventType,
   recurringBookings,
   date,
+  allRemainingBookings,
   is24h,
-  listingStatus,
 }: RecurringBookingsProps) {
   const [moreEventsVisible, setMoreEventsVisible] = useState(false);
   const { t } = useLocale();
@@ -639,7 +681,7 @@ export function RecurringBookings({
     ? recurringBookings.sort((a: ConfigType, b: ConfigType) => (dayjs(a).isAfter(dayjs(b)) ? 1 : -1))
     : null;
 
-  if (recurringBookingsSorted && listingStatus === "recurring") {
+  if (recurringBookingsSorted && allRemainingBookings) {
     return (
       <>
         {eventType.recurringEvent?.count && (
@@ -808,6 +850,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
       startTime: true,
       location: true,
       status: true,
+      cancellationReason: true,
       user: {
         select: {
           id: true,
diff --git a/apps/web/playwright/booking-pages.e2e.ts b/apps/web/playwright/booking-pages.e2e.ts
index c4ce528c86..46216346be 100644
--- a/apps/web/playwright/booking-pages.e2e.ts
+++ b/apps/web/playwright/booking-pages.e2e.ts
@@ -107,7 +107,7 @@ test.describe("pro user", () => {
     await page.locator('[data-testid="cancel"]').first().click();
     await page.waitForNavigation({
       url: (url) => {
-        return url.pathname.startsWith("/cancel");
+        return url.pathname.startsWith("/success");
       },
     });
     // --- fill form
diff --git a/apps/web/playwright/dynamic-booking-pages.e2e.ts b/apps/web/playwright/dynamic-booking-pages.e2e.ts
index 0fae82a8f7..63eed50fad 100644
--- a/apps/web/playwright/dynamic-booking-pages.e2e.ts
+++ b/apps/web/playwright/dynamic-booking-pages.e2e.ts
@@ -48,7 +48,7 @@ test("dynamic booking", async ({ page, users }) => {
     await page.locator('[data-testid="cancel"]').first().click();
     await page.waitForNavigation({
       url: (url) => {
-        return url.pathname.startsWith("/cancel");
+        return url.pathname.startsWith("/success");
       },
     });
     // --- fill form
diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json
index f45f99f7c5..b956608523 100644
--- a/apps/web/public/static/locales/en/common.json
+++ b/apps/web/public/static/locales/en/common.json
@@ -16,8 +16,8 @@
   "event_request_cancelled": "Your scheduled event was cancelled",
   "organizer": "Organizer",
   "need_to_reschedule_or_cancel": "Need to reschedule or cancel?",
-  "cancellation_reason": "Reason for cancellation",
-  "cancellation_reason_placeholder": "Why are you cancelling? (optional)",
+  "cancellation_reason": "Reason for cancellation (optional)",
+  "cancellation_reason_placeholder": "Why are you cancelling?",
   "rejection_reason": "Reason for rejecting",
   "rejection_reason_title": "Reject the booking request?",
   "rejection_reason_description": "Are you sure you want to reject the booking? We'll let the person who tried to book know. You can provide a reason below.",
@@ -1362,6 +1362,7 @@
   "invalid_credential": "Oh no! Looks like permission expired or was revoked. Please reinstall again.",
   "choose_common_schedule_team_event": "Choose a common schedule",
   "choose_common_schedule_team_event_description": "Enable this if you want to use a common schedule between hosts. When disabled, each host will be booked based on their default schedule.",
+  "reason": "Reason",
   "sender_id": "Sender ID",
   "sender_id_error_message":"Only letters, numbers and spaces allowed (max. 11 characters)",
   "test_routing_form": "Test Routing Form",
@@ -1370,3 +1371,4 @@
   "test_preview_description": "Test your routing form without submitting any data",
   "test_routing": "Test Routing"
 }
+
diff --git a/packages/emails/src/components/ManageLink.tsx b/packages/emails/src/components/ManageLink.tsx
index 419c61e7c5..23fd880a60 100644
--- a/packages/emails/src/components/ManageLink.tsx
+++ b/packages/emails/src/components/ManageLink.tsx
@@ -29,10 +29,15 @@ export function ManageLink(props: { calEvent: CalendarEvent; attendee: Person })
             gap: "8px",
           }}>
           <>{t("need_to_make_a_change")}</>
-          <a href={getRescheduleLink(props.calEvent)} style={{ color: "#3e3e3e" }}>
-            <>{t("reschedule")}</>
-          </a>
-          <>{t("or_lowercase")}</>
+          {!props.calEvent.recurringEvent && (
+            <>
+              <a href={getRescheduleLink(props.calEvent)} style={{ color: "#3e3e3e" }}>
+                <>{t("reschedule")}</>
+              </a>
+              <>{t("or_lowercase")}</>
+            </>
+          )}
+
           <a href={getCancelLink(props.calEvent)} style={{ color: "#3e3e3e" }}>
             <>{t("cancel")}</>
           </a>
diff --git a/packages/lib/CalEventParser.ts b/packages/lib/CalEventParser.ts
index ab41478be8..5f79c6eca7 100644
--- a/packages/lib/CalEventParser.ts
+++ b/packages/lib/CalEventParser.ts
@@ -132,7 +132,10 @@ export const getUid = (calEvent: CalendarEvent): string => {
 };
 
 export const getCancelLink = (calEvent: CalendarEvent): string => {
-  return WEBAPP_URL + "/cancel/" + getUid(calEvent);
+  return (
+    WEBAPP_URL +
+    `/success?uid=${getUid(calEvent)}&cancel=true&allRemainingBookings=${!!calEvent.recurringEvent}`
+  );
 };
 
 export const getRescheduleLink = (calEvent: CalendarEvent): string => {