Show correct cancelled page after cancellation (#5664)

* fix cancelled page and cross out dates

* delete old cancel success page

* fix e2e tests

Co-authored-by: CarinaWolli <wollencarina@gmail.com>

apps/web/components/booking/CancelBooking.tsx

@@ -37,7 +37,7 @@ export default function CancelBooking(props: Props) {
   return (
     <>
       {error && (
-        <div>
+        <div className="mt-8">
           <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>
@@ -89,11 +89,7 @@ export default function CancelBooking(props: Props) {
                   });
 
                   if (res.status >= 200 && res.status < 300) {
-                    await router.push(
-                      `/cancel/success?name=${props.profile.name}&title=${booking?.title}&eventPage=${
-                        profile.slug
-                      }&team=${team ? 1 : 0}&allRemainingBookings=${allRemainingBookings}`
-                    );
+                    await router.replace(router.asPath);
                   } else {
                     setLoading(false);
                     setError(

apps/web/pages/cancel/success.tsx

@@ -1,89 +0,0 @@
-import { useSession } from "next-auth/react";
-import { useRouter } from "next/router";
-import { z } from "zod";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, Icon } from "@calcom/ui";
-
-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, allRemainingBookings } = querySchema.parse(router.query);
-  let team: string | string[] | number | undefined = router.query.team;
-  const { data: session, status } = useSession();
-  const loading = status === "loading";
-  // If team param passed wrongly just assume it be a non team case.
-  if (team instanceof Array || typeof team === "undefined") {
-    team = 0;
-  }
-  const isTeamEvent = +team === 1;
-  // FIXME: In case of Dynamic Event Booking, it takes the booker to one of the user's page(e.g. A) in the dynamic group(A+B+...). Booker should be taken to the same dynamic group
-  // This isn't directly possible because a booking doesn't know if it was done for a Dynamic Event(booking.eventType is null)
-  const eventUrl = `/${isTeamEvent ? "team/" : ""}${eventPage as string}`;
-  return (
-    <div>
-      <HeadSeo
-        title={`${t("cancelled")} ${title} | ${name}`}
-        description={`${t("cancelled")} ${title} | ${name}`}
-      />
-      <main className="mx-auto my-24 max-w-3xl">
-        <div className="fixed inset-0 z-50 overflow-y-auto">
-          <div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0">
-            <div className="fixed inset-0 my-4 transition-opacity sm:my-0" aria-hidden="true">
-              <span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">
-                &#8203;
-              </span>
-              <div
-                className="inline-block transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6 sm:align-middle"
-                role="dialog"
-                aria-modal="true"
-                aria-labelledby="modal-headline">
-                <div>
-                  <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
-                    <Icon.FiCheck className="h-6 w-6 text-green-600" />
-                  </div>
-                  <div className="mt-3 text-center sm:mt-5">
-                    <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
-                      {t("cancellation_successful")}
-                    </h3>
-                    {!loading && !session?.user && (
-                      <div className="mt-2">
-                        <p className="text-sm text-gray-500">{t("free_to_pick_another_event_type")}</p>
-                      </div>
-                    )}
-                  </div>
-                </div>
-                <div className="mt-5 text-center sm:mt-6">
-                  <div className="mt-5">
-                    {!loading && !session?.user && <Button href={eventUrl}>Pick another</Button>}
-                    {!loading && session?.user && (
-                      <Button
-                        data-testid="back-to-bookings"
-                        href={!!allRemainingBookings ? "/bookings/recurring" : "/bookings/upcoming"}
-                        StartIcon={Icon.FiArrowLeft}>
-                        {t("back_to_bookings")}
-                      </Button>
-                    )}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </main>
-    </div>
-  );
-}

apps/web/pages/success.tsx

@@ -361,6 +361,7 @@ export default function Success(props: SuccessProps) {
                 <div className="mt-6 mb-8 text-center last:mb-0">
                   <h3
                     className="text-2xl font-semibold leading-6 text-neutral-900 dark:text-white"
+                    data-testid="success-headline"
                     id="modal-headline">
                     {needsConfirmation && !isCancelled
                       ? props.recurringBookings
@@ -392,6 +393,7 @@ export default function Success(props: SuccessProps) {
                         allRemainingBookings={allRemainingBookings}
                         date={date}
                         is24h={is24h}
+                        isCancelled={isCancelled}
                       />
                     </div>
                     {(bookingInfo?.user || bookingInfo?.attendees) && (
@@ -669,6 +671,7 @@ type RecurringBookingsProps = {
   date: dayjs.Dayjs;
   is24h: boolean;
   allRemainingBookings: boolean;
+  isCancelled: boolean;
 };
 
 export function RecurringBookings({
@@ -677,6 +680,7 @@ export function RecurringBookings({
   date,
   allRemainingBookings,
   is24h,
+  isCancelled,
 }: RecurringBookingsProps) {
   const [moreEventsVisible, setMoreEventsVisible] = useState(false);
   const { t } = useLocale();
@@ -699,7 +703,7 @@ export function RecurringBookings({
         )}
         {eventType.recurringEvent?.count &&
           recurringBookingsSorted.slice(0, 4).map((dateStr: string, idx: number) => (
-            <div key={idx} className="mb-2">
+            <div key={idx} className={classNames("mb-2", isCancelled ? "line-through" : "")}>
               {dayjs.tz(dateStr, timeZone()).format("MMMM DD, YYYY")}
               <br />
               {formatTime(dateStr, is24h ? 24 : 12, timeZone())} -{" "}
@@ -717,7 +721,7 @@ export function RecurringBookings({
             <CollapsibleContent>
               {eventType.recurringEvent?.count &&
                 recurringBookingsSorted.slice(4).map((dateStr: string, idx: number) => (
-                  <div key={idx} className="mb-2">
+                  <div key={idx} className={classNames("mb-2", isCancelled ? "line-through" : "")}>
                     {dayjs.tz(dateStr, timeZone()).format("MMMM DD, YYYY")}
                     <br />
                     {formatTime(dateStr, is24h ? 24 : 12, timeZone())} -{" "}
@@ -733,13 +737,13 @@ export function RecurringBookings({
   }
 
   return (
-    <>
+    <div className={classNames(isCancelled ? "line-through" : "")}>
       {dayjs.tz(date, timeZone()).format("MMMM DD, YYYY")}
       <br />
       {formatTime(date, is24h ? 24 : 12, timeZone())} -{" "}
       {formatTime(dayjs(date).add(eventType.length, "m"), is24h ? 24 : 12, timeZone())}{" "}
       <span className="text-bookinglight">({timeZone()})</span>
-    </>
+    </div>
   );
 }
 

apps/web/playwright/booking-pages.e2e.ts

@@ -112,11 +112,16 @@ test.describe("pro user", () => {
     });
     // --- fill form
     await page.locator('[data-testid="cancel"]').click();
+
     await page.waitForNavigation({
-      url(url) {
-        return url.pathname === "/cancel/success";
+      url: (url) => {
+        return url.pathname.startsWith("/success");
       },
     });
+    const successHeadling = await page.locator('[data-testid="success-headline"]').innerText();
+
+    await expect(successHeadling).toBe("This event is cancelled");
+
     await page.goto(`/${pro.username}`);
     await bookFirstEvent(page);
   });

apps/web/playwright/dynamic-booking-pages.e2e.ts

@@ -53,11 +53,15 @@ test("dynamic booking", async ({ page, users }) => {
     });
     // --- fill form
     await page.locator('[data-testid="cancel"]').click();
+
     await page.waitForNavigation({
-      url(url) {
-        return url.pathname === "/cancel/success";
+      url: (url) => {
+        return url.pathname.startsWith("/success");
       },
     });
+    const successHeadling = await page.locator('[data-testid="success-headline"]').innerText();
+
+    await expect(successHeadling).toBe("This event is cancelled");
   });
 
   await users.deleteAll();