Fix: Show smsReminderNumber on booking success page (calcom#8596)

apps/web/pages/booking/[uid].tsx

@@ -27,6 +27,7 @@ import { getBookingWithResponses } from "@calcom/features/bookings/lib/get-booki
 import {
   SystemField,
   getBookingFieldsWithSystemFields,
+  SMS_REMINDER_NUMBER_FIELD,
 } from "@calcom/features/bookings/lib/getBookingFields";
 import { parseRecurringEvent } from "@calcom/lib";
 import { APP_NAME } from "@calcom/lib/constants";
@@ -487,7 +488,8 @@ export default function Success(props: SuccessProps) {
                       // We show rescheduleReason at the top
                       if (!field) return null;
                       const isSystemField = SystemField.safeParse(field.name);
-                      if (isSystemField.success) return null;
+                      // SMS_REMINDER_NUMBER_FIELD is a system field but doesn't have a dedicated place in the UI. So, it would be shown through the following responses list
+                      if (isSystemField.success && field.name !== SMS_REMINDER_NUMBER_FIELD) return null;
 
                       const label = field.label || t(field.defaultLabel || "");
 

apps/web/playwright/auth/delete-account.e2e.ts

@@ -19,7 +19,10 @@ test("Can delete user account", async ({ page, users }) => {
   const $passwordField = page.locator("[data-testid=password]");
   await $passwordField.fill(user.username);
 
-  await Promise.all([page.waitForNavigation({ url: "/auth/logout" }), page.click("text=Delete my account")]);
+  await Promise.all([
+    page.waitForURL((url) => url.pathname === "/auth/logout"),
+    page.click("text=Delete my account"),
+  ]);
 
   await expect(page.locator(`[id="modal-title"]`)).toHaveText("You've been logged out");
 });

apps/web/playwright/auth/forgot-password.e2e.ts

@@ -17,9 +17,7 @@ test("Can reset forgotten password", async ({ page, users }) => {
 
   // Press Enter
   await Promise.all([
-    page.waitForNavigation({
-      url: (u) => u.pathname.startsWith("/auth/forgot-password/"),
-    }),
+    page.waitForURL((u) => u.pathname.startsWith("/auth/forgot-password/")),
     page.press('input[name="email"]', "Enter"),
   ]);
 
@@ -38,7 +36,7 @@ test("Can reset forgotten password", async ({ page, users }) => {
   await expect(page.locator(`text=Password updated`)).toBeVisible();
   // Click button:has-text("Login")
   await Promise.all([
-    page.waitForNavigation({ url: (u) => u.pathname.startsWith("/auth/login") }),
+    page.waitForURL((u) => u.pathname.startsWith("/auth/login")),
     page.click('a:has-text("Login")'),
   ]);
 

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

@@ -31,10 +31,8 @@ testBothBookers.describe("free user", (bookerVariant) => {
     // eslint-disable-next-line playwright/no-conditional-in-test
     if (bookerVariant !== "new-booker") {
       // Navigate to book page
-      await page.waitForNavigation({
-        url(url) {
-          return url.pathname.endsWith("/book");
-        },
+      await page.waitForURL((url) => {
+        return url.pathname.endsWith("/book");
       });
     }
 
@@ -84,19 +82,15 @@ testBothBookers.describe("pro user", () => {
     await page.waitForSelector('[data-testid="bookings"]');
     await page.locator('[data-testid="edit_booking"]').nth(0).click();
     await page.locator('[data-testid="reschedule"]').click();
-    await page.waitForNavigation({
-      url: (url) => {
-        const bookingId = url.searchParams.get("rescheduleUid");
-        return !!bookingId;
-      },
+    await page.waitForURL((url) => {
+      const bookingId = url.searchParams.get("rescheduleUid");
+      return !!bookingId;
     });
     await selectSecondAvailableTimeSlotNextMonth(page);
     // --- fill form
     await page.locator('[data-testid="confirm-reschedule-button"]').click();
-    await page.waitForNavigation({
-      url(url) {
-        return url.pathname.startsWith("/booking");
-      },
+    await page.waitForURL((url) => {
+      return url.pathname.startsWith("/booking");
     });
   });
 
@@ -108,10 +102,8 @@ testBothBookers.describe("pro user", () => {
 
     await page.goto("/bookings/upcoming");
     await page.locator('[data-testid="cancel"]').first().click();
-    await page.waitForNavigation({
-      url: (url) => {
-        return url.pathname.startsWith("/booking");
-      },
+    await page.waitForURL((url) => {
+      return url.pathname.startsWith("/booking");
     });
     await page.locator('[data-testid="cancel"]').click();
 

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

@@ -71,10 +71,8 @@ testBothBookers.describe("Booking with Seats", (bookerVariant) => {
     // to change the test as little as possible.
     // eslint-disable-next-line playwright/no-conditional-in-test
     if (bookerVariant === "old-booker") {
-      await page.waitForNavigation({
-        url(url) {
-          return url.pathname.endsWith("/book");
-        },
+      await page.waitForURL((url) => {
+        return url.pathname.endsWith("/book");
       });
     }
 
@@ -192,14 +190,15 @@ testBothBookers.describe("Booking with Seats", (bookerVariant) => {
 
       await page.locator('[data-testid="confirm-reschedule-button"]').click();
 
-      await page.waitForNavigation({ url: /.*booking/ });
+      await page.waitForURL(/.*booking/);
 
       await page.goto(`/reschedule/${references[1].referenceUid}`);
 
       await selectFirstAvailableTimeSlotNextMonth(page);
 
       await page.locator('[data-testid="confirm-reschedule-button"]').click();
 
+      // Using waitForUrl here fails the assertion `expect(oldBooking?.status).toBe(BookingStatus.CANCELLED);` probably because waitForUrl is considered complete before waitForNavigation and till that time the booking is not cancelled
       await page.waitForNavigation({ url: /.*booking/ });
 
       // Should expect old booking to be cancelled

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

@@ -31,30 +31,24 @@ test.skip("dynamic booking", async ({ page, users }) => {
     await page.goto("/bookings/upcoming");
     await page.locator('[data-testid="edit_booking"]').nth(0).click();
     await page.locator('[data-testid="reschedule"]').click();
-    await page.waitForNavigation({
-      url: (url) => {
-        const bookingId = url.searchParams.get("rescheduleUid");
-        return !!bookingId;
-      },
+    await page.waitForURL((url) => {
+      const bookingId = url.searchParams.get("rescheduleUid");
+      return !!bookingId;
     });
     await selectSecondAvailableTimeSlotNextMonth(page);
     // --- fill form
     await page.locator('[data-testid="confirm-reschedule-button"]').click();
-    await page.waitForNavigation({
-      url(url) {
-        return url.pathname.startsWith("/booking");
-      },
+    await page.waitForURL((url) => {
+      return url.pathname.startsWith("/booking");
     });
     await expect(page.locator("[data-testid=success-page]")).toBeVisible();
   });
 
   await test.step("Can cancel the recently created booking", async () => {
     await page.goto("/bookings/upcoming");
     await page.locator('[data-testid="cancel"]').first().click();
-    await page.waitForNavigation({
-      url: (url) => {
-        return url.pathname.startsWith("/booking");
-      },
+    await page.waitForURL((url) => {
+      return url.pathname.startsWith("/booking");
     });
     await page.locator('[data-testid="cancel"]').click();
 

apps/web/playwright/embed-code-generator.e2e.ts

@@ -36,14 +36,12 @@ async function expectToBeNavigatingToEmbedTypesDialog(
   if (!embedUrl) {
     throw new Error("Couldn't find embedUrl");
   }
-  await page.waitForNavigation({
-    url: (url) => {
-      return (
-        url.pathname === basePage &&
-        url.searchParams.get("dialog") === "embed" &&
-        url.searchParams.get("embedUrl") === embedUrl
-      );
-    },
+  await page.waitForURL((url) => {
+    return (
+      url.pathname === basePage &&
+      url.searchParams.get("dialog") === "embed" &&
+      url.searchParams.get("embedUrl") === embedUrl
+    );
   });
 }
 
@@ -54,16 +52,14 @@ async function expectToBeNavigatingToEmbedCodeAndPreviewDialog(
   if (!embedUrl) {
     throw new Error("Couldn't find embedUrl");
   }
-  await page.waitForNavigation({
-    url: (url) => {
-      return (
-        url.pathname === basePage &&
-        url.searchParams.get("dialog") === "embed" &&
-        url.searchParams.get("embedUrl") === embedUrl &&
-        url.searchParams.get("embedType") === embedType &&
-        url.searchParams.get("embedTabName") === "embed-code"
-      );
-    },
+  await page.waitForURL((url) => {
+    return (
+      url.pathname === basePage &&
+      url.searchParams.get("dialog") === "embed" &&
+      url.searchParams.get("embedUrl") === embedUrl &&
+      url.searchParams.get("embedType") === embedType &&
+      url.searchParams.get("embedTabName") === "embed-code"
+    );
   });
 }
 
@@ -183,9 +179,7 @@ test.describe("Embed Code Generator Tests", () => {
       await page.goto(`/event-types`);
       await Promise.all([
         page.locator('[href*="/event-types/"]').first().click(),
-        page.waitForNavigation({
-          url: (url) => url.pathname.startsWith("/event-types/"),
-        }),
+        page.waitForURL((url) => url.pathname.startsWith("/event-types/")),
       ]);
     });
 

apps/web/playwright/event-types.e2e.ts

@@ -94,10 +94,8 @@ test.describe("Event Types tests", () => {
       const $eventTypes = page.locator("[data-testid=event-types] > li a");
       const firstEventTypeElement = $eventTypes.first();
       await firstEventTypeElement.click();
-      await page.waitForNavigation({
-        url: (url) => {
-          return !!url.pathname.match(/\/event-types\/.+/);
-        },
+      await page.waitForURL((url) => {
+        return !!url.pathname.match(/\/event-types\/.+/);
       });
       await page.locator("[data-testid=update-eventtype]").click();
       const toast = await page.waitForSelector("div[class*='data-testid-toast-success']");
@@ -108,10 +106,8 @@ test.describe("Event Types tests", () => {
       const $eventTypes = page.locator("[data-testid=event-types] > li a");
       const firstEventTypeElement = $eventTypes.first();
       await firstEventTypeElement.click();
-      await page.waitForNavigation({
-        url: (url) => {
-          return !!url.pathname.match(/\/event-types\/.+/);
-        },
+      await page.waitForURL((url) => {
+        return !!url.pathname.match(/\/event-types\/.+/);
       });
 
       const locationData = ["location 1", "location 2", "location 3"];
@@ -153,10 +149,8 @@ test.describe("Event Types tests", () => {
       // to change the test as little as possible.
       // eslint-disable-next-line playwright/no-conditional-in-test
       if (bookerVariant === "old-booker") {
-        await page.waitForNavigation({
-          url(url) {
-            return url.pathname.endsWith("/book");
-          },
+        await page.waitForURL((url) => {
+          return url.pathname.endsWith("/book");
         });
       }
 

apps/web/playwright/fixtures/users.ts

@@ -346,12 +346,12 @@ export async function getPaymentCredential(page: Page) {
 
   /** We start the Stripe flow */
   await Promise.all([
-    page.waitForNavigation({ url: "https://connect.stripe.com/oauth/v2/authorize?*" }),
+    page.waitForURL("https://connect.stripe.com/oauth/v2/authorize?*"),
     page.click('[data-testid="install-app-button"]'),
   ]);
 
   await Promise.all([
-    page.waitForNavigation({ url: "/apps/installed/payment?hl=stripe" }),
+    page.waitForURL("/apps/installed/payment?hl=stripe"),
     /** We skip filling Stripe forms (testing mode only) */
     page.click('[id="skip-account-app"]'),
   ]);

apps/web/playwright/integrations-stripe.e2e.ts

@@ -49,7 +49,7 @@ test.describe("Stripe integration", () => {
     await page.fill('[name="name"]', "Stripe Stripeson");
     await page.fill('[name="email"]', "test@example.com");
 
-    await Promise.all([page.waitForNavigation({ url: "/payment/*" }), page.press('[name="email"]', "Enter")]);
+    await Promise.all([page.waitForURL("/payment/*"), page.press('[name="email"]', "Enter")]);
 
     const stripeFrame = page
       .frameLocator('iframe[src^="https://js.stripe.com/v3/elements-inner-card-"]')

apps/web/playwright/lib/testUtils.ts

@@ -114,10 +114,8 @@ async function bookEventOnThisPage(page: Page) {
   await bookTimeSlot(page);
 
   // Make sure we're navigated to the success page
-  await page.waitForNavigation({
-    url(url) {
-      return url.pathname.startsWith("/booking");
-    },
+  await page.waitForURL((url) => {
+    return url.pathname.startsWith("/booking");
   });
   await expect(page.locator("[data-testid=success-page]")).toBeVisible();
 }
@@ -156,10 +154,8 @@ export const createNewEventType = async (page: Page, args: { eventTitle: string
   await page.fill("[name=length]", "10");
   await page.click("[type=submit]");
 
-  await page.waitForNavigation({
-    url(url) {
-      return url.pathname !== "/event-types";
-    },
+  await page.waitForURL((url) => {
+    return url.pathname !== "/event-types";
   });
 };
 

apps/web/playwright/manage-booking-questions.e2e.ts

@@ -362,8 +362,8 @@ async function rescheduleFromTheLinkOnPage({
   await page.waitForLoadState();
   await selectFirstAvailableTimeSlotNextMonth(page);
   if (bookerVariant === "old-booker") {
-    await page.waitForNavigation({
-      url: (url) => url.pathname.endsWith("/book"),
+    await page.waitForURL((url) => {
+      return url.pathname.endsWith("/book");
     });
   }
   await page.click('[data-testid="confirm-reschedule-button"]');
@@ -380,8 +380,8 @@ async function openBookingFormInPreviewTab(
   await previewTabPage.waitForLoadState();
   await selectFirstAvailableTimeSlotNextMonth(previewTabPage);
   if (bookerVariant === "old-booker") {
-    await previewTabPage.waitForNavigation({
-      url: (url) => url.pathname.endsWith("/book"),
+    await previewTabPage.waitForURL((url) => {
+      return url.pathname.endsWith("/book");
     });
   }
   return previewTabPage;

apps/web/playwright/reschedule.e2e.ts

@@ -149,10 +149,8 @@ testBothBookers.describe("Reschedule Tests", async () => {
 
     await page.locator('[data-testid="confirm-reschedule-button"]').click();
 
-    await page.waitForNavigation({
-      url(url) {
-        return url.pathname.indexOf("/payment") > -1;
-      },
+    await page.waitForURL((url) => {
+      return url.pathname.indexOf("/payment") > -1;
     });
 
     await expect(page).toHaveURL(/.*payment/);

apps/web/playwright/webhook.e2e.ts

@@ -24,9 +24,7 @@ test("add webhook & test that creating an event triggers a webhook call", async
 
   await Promise.all([
     page.click("[type=submit]"),
-    page.waitForNavigation({
-      url: (url) => url.pathname.endsWith("/settings/developer/webhooks"),
-    }),
+    page.waitForURL((url) => url.pathname.endsWith("/settings/developer/webhooks")),
   ]);
 
   // page contains the url