fix: Certain query params being filtered out from embed (#16936)

packages/embeds/embed-core/src/embed.test.ts

@@ -31,15 +31,17 @@ describe("Cal", () => {
     CalClass = (await import("./embed")).Cal;
   });
 
-  beforeEach(() => {
-    cal = new CalClass("test-namespace", []);
-    window.Cal.config = { forwardQueryParams: true };
-    // Mock the getConfig method
-    cal.getConfig = vi.fn().mockReturnValue({ calOrigin: "https://app.cal.com" });
-  });
+
 
   describe("createIframe", () => {
-    describe("params handling", () => {
+    describe("params handling with forwardQueryParams feature enabled", () => {
+      beforeEach(() => {
+        cal = new CalClass("test-namespace", []);
+        window.Cal.config = { forwardQueryParams: true };
+        // Mock the getConfig method
+        cal.getConfig = vi.fn().mockReturnValue({ calOrigin: "https://app.cal.com" });
+      });
+
       it("should merge query parameters from URL and explicit params", () => {
         mockSearchParams("?existingParam=value");
 
@@ -81,7 +83,23 @@ describe("Cal", () => {
         expect(paramValues).toEqual(["value3"]);
       });
 
-      it("should exclude reserved params", () => {
+      it("should exclude reserved params from page URL(as these could be unintentional to pass these query params to embed, so better to exclude them and avoid crashing the booking page)", () => {
+        mockSearchParams("?date=2023-05-01&duration=30");
+
+        const iframe = cal.createIframe({
+          calLink: "john-doe/meeting",
+          config: {
+            email: "test@example.com",
+          },
+          calOrigin: null,
+        });
+
+        expect(iframe.src).not.toContain("date=");
+        expect(iframe.src).not.toContain("duration=");
+        expect(iframe.src).toContain("email=test%40example.com");
+      });
+
+      it("should allow configuring reserved params through config(as it is explicitly passed by user)", () => {
         const iframe = cal.createIframe({
           calLink: "john-doe/meeting",
           config: {
@@ -92,8 +110,8 @@ describe("Cal", () => {
           calOrigin: null,
         });
 
-        expect(iframe.src).not.toContain("date=");
-        expect(iframe.src).not.toContain("duration=");
+        expect(iframe.src).toContain("date=2023-05-01");
+        expect(iframe.src).toContain("duration=30");
         expect(iframe.src).toContain("email=test%40example.com");
       });
 

packages/embeds/embed-core/src/embed.ts

@@ -440,16 +440,20 @@ export class Cal {
     return Object.fromEntries(Object.entries(params).filter(([key, value]) => !excludeParam(key, value)));
   }
 
+  private getQueryParamsFromPage() {
+    const queryParamsFromPage = getQueryParamsFromPage();
+    // Ensure valid params are used from the page.
+    return this.filterParams(queryParamsFromPage);
+  }
+
   private buildFilteredQueryParams(queryParamsFromConfig: PrefillAndIframeAttrsConfig): URLSearchParams {
-    const queryParamsFromPageUrl = globalCal.config?.forwardQueryParams ? getQueryParamsFromPage() : {};
+    const queryParamsFromPageUrl = globalCal.config?.forwardQueryParams ? this.getQueryParamsFromPage() : {};
 
     // Query Params via config have higher precedence
     const mergedQueryParams = { ...queryParamsFromPageUrl, ...queryParamsFromConfig };
 
-    const filteredQueryParams = this.filterParams(mergedQueryParams);
-
     const searchParams = new URLSearchParams();
-    for (const [key, value] of Object.entries(filteredQueryParams)) {
+    for (const [key, value] of Object.entries(mergedQueryParams)) {
       if (value === undefined) {
         continue;
       }