From 733a06a67252bb3ada270641e7ced06a24987914 Mon Sep 17 00:00:00 2001 From: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com> Date: Fri, 25 Nov 2022 15:49:59 +0100 Subject: [PATCH] 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 --- apps/web/components/booking/CancelBooking.tsx | 8 +- apps/web/pages/cancel/success.tsx | 89 ------------------- apps/web/pages/success.tsx | 12 ++- apps/web/playwright/booking-pages.e2e.ts | 9 +- .../playwright/dynamic-booking-pages.e2e.ts | 8 +- 5 files changed, 23 insertions(+), 103 deletions(-) delete mode 100644 apps/web/pages/cancel/success.tsx diff --git a/apps/web/components/booking/CancelBooking.tsx b/apps/web/components/booking/CancelBooking.tsx index 951953e169..66d4859af4 100644 --- a/apps/web/components/booking/CancelBooking.tsx +++ b/apps/web/components/booking/CancelBooking.tsx @@ -37,7 +37,7 @@ export default function CancelBooking(props: Props) { return ( <> {error && ( -
+
@@ -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( diff --git a/apps/web/pages/cancel/success.tsx b/apps/web/pages/cancel/success.tsx deleted file mode 100644 index 0342d952f1..0000000000 --- a/apps/web/pages/cancel/success.tsx +++ /dev/null @@ -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 ( -
- -
-
-
- -
-
-
-
- ); -} diff --git a/apps/web/pages/success.tsx b/apps/web/pages/success.tsx index 60851977d1..808f64d4b0 100644 --- a/apps/web/pages/success.tsx +++ b/apps/web/pages/success.tsx @@ -361,6 +361,7 @@ export default function Success(props: SuccessProps) {
{(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) => ( -
+
{dayjs.tz(dateStr, timeZone()).format("MMMM DD, YYYY")}
{formatTime(dateStr, is24h ? 24 : 12, timeZone())} -{" "} @@ -717,7 +721,7 @@ export function RecurringBookings({ {eventType.recurringEvent?.count && recurringBookingsSorted.slice(4).map((dateStr: string, idx: number) => ( -
+
{dayjs.tz(dateStr, timeZone()).format("MMMM DD, YYYY")}
{formatTime(dateStr, is24h ? 24 : 12, timeZone())} -{" "} @@ -733,13 +737,13 @@ export function RecurringBookings({ } return ( - <> +
{dayjs.tz(date, timeZone()).format("MMMM DD, YYYY")}
{formatTime(date, is24h ? 24 : 12, timeZone())} -{" "} {formatTime(dayjs(date).add(eventType.length, "m"), is24h ? 24 : 12, timeZone())}{" "} ({timeZone()}) - +
); } diff --git a/apps/web/playwright/booking-pages.e2e.ts b/apps/web/playwright/booking-pages.e2e.ts index 46216346be..5a7a120b07 100644 --- a/apps/web/playwright/booking-pages.e2e.ts +++ b/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); }); diff --git a/apps/web/playwright/dynamic-booking-pages.e2e.ts b/apps/web/playwright/dynamic-booking-pages.e2e.ts index 63eed50fad..221f4a58ec 100644 --- a/apps/web/playwright/dynamic-booking-pages.e2e.ts +++ b/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();