Support firstName and lastName query params (#11420)

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

@@ -153,6 +153,25 @@ test.describe("Manage Booking Questions", () => {
           });
         });
       });
+
+      await test.step("Verify that we can prefill name field with firstName,lastName query params", async () => {
+        const searchParams = new URLSearchParams();
+        searchParams.append("firstName", "John");
+        searchParams.append("lastName", "Doe");
+        await doOnFreshPreviewWithSearchParams(searchParams, page, context, async (page) => {
+          await selectFirstAvailableTimeSlotNextMonth(page);
+          await expectSystemFieldsToBeThereOnBookingPage({
+            page,
+            isFirstAndLastNameVariant: true,
+            values: {
+              name: {
+                firstName: "John",
+                lastName: "Doe",
+              },
+            },
+          });
+        });
+      });
     });
   });
 

packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx

@@ -473,8 +473,16 @@ function useInitialFormValues({
         view: rescheduleUid ? "reschedule" : "booking",
       });
 
+      // Routing Forms don't support Split full name(because no Form Builder in there), so user needs to create two fields in there themselves. If they name these fields, `firstName` and `lastName`, we can prefill the Booking Form with them
+      // Once we support formBuilder in Routing Forms, we should be able to forward JSON form of name field value to Booking Form and prefill it there without having these two query params separately.
+      const firstNameQueryParam = searchParams?.get("firstName");
+      const lastNameQueryParam = searchParams?.get("lastName");
+
       const parsedQuery = await querySchema.parseAsync({
         ...routerQuery,
+        name:
+          searchParams?.get("name") ||
+          (firstNameQueryParam ? `${firstNameQueryParam} ${lastNameQueryParam}` : null),
         // `guest` because we need to support legacy URL with `guest` query param support
         // `guests` because the `name` of the corresponding bookingField is `guests`
         guests: searchParams?.getAll("guests") || searchParams?.getAll("guest"),