fix: pass query params to dynamic meetings (#14920)

apps/web/modules/users/views/users-public-view.getServerSideProps.tsx

@@ -104,11 +104,13 @@ export const getServerSideProps: GetServerSideProps<UserPageProps> = async (cont
 
   if (isDynamicGroup) {
     const destinationUrl = `/${usernameList.join("+")}/dynamic`;
+    const originalQueryString = new URLSearchParams(context.query as Record<string, string>).toString();
+    const destinationWithQuery = `${destinationUrl}?${originalQueryString}`;
     log.debug(`Dynamic group detected, redirecting to ${destinationUrl}`);
     return {
       redirect: {
         permanent: false,
-        destination: destinationUrl,
+        destination: destinationWithQuery,
       },
     } as const;
   }

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

@@ -62,6 +62,36 @@ test("dynamic booking", async ({ page, users }) => {
   });
 });
 
+test("dynamic booking info prefilled by query params", async ({ page, users }) => {
+  const pro = await users.create();
+  await pro.apiLogin();
+
+  let duration = 15;
+  const free = await users.create({ username: "free.example" });
+  await page.goto(`/${pro.username}+${free.username}?duration=${duration}`);
+
+  await page.waitForLoadState("networkidle");
+
+  const badgeByDurationTestId = (duration: number) => `multiple-choice-${duration}mins`;
+
+  let badgeLocator = await page.getByTestId(badgeByDurationTestId(duration));
+  let activeState = await badgeLocator.getAttribute("data-active");
+
+  expect(activeState).toEqual("true");
+
+  duration = 30;
+  await page.goto(`/${pro.username}+${free.username}?duration=${duration}`);
+  badgeLocator = await page.getByTestId(badgeByDurationTestId(duration));
+  activeState = await badgeLocator.getAttribute("data-active");
+
+  expect(activeState).toEqual("true");
+
+  // Check another badge just to ensure its not selected
+  badgeLocator = await page.getByTestId(badgeByDurationTestId(15));
+  activeState = await badgeLocator.getAttribute("data-active");
+  expect(activeState).toEqual("false");
+});
+
 test.describe("Organization:", () => {
   test.afterEach(({ orgs, users }) => {
     orgs.deleteAll();

packages/features/bookings/components/event-meta/Duration.tsx

@@ -65,6 +65,8 @@ export const EventDuration = ({ event }: { event: PublicEvent }) => {
         .filter((dur) => state !== "booking" || dur === selectedDuration)
         .map((duration) => (
           <Badge
+            data-testId={`multiple-choice-${duration}mins`}
+            data-active={selectedDuration === duration ? "true" : "false"}
             variant="gray"
             className={classNames(selectedDuration === duration && "bg-brand-default text-brand")}
             size="md"