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,12 +83,12 @@ 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: {
- date: "2023-05-01",
- duration: "30",
  email: "test@example.com",
  },
  calOrigin: null,
@@ -97,6 +99,22 @@ describe("Cal", () => {
  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: {
+ date: "2023-05-01",
+ duration: "30",
+ email: "test@example.com",
+ },
+ calOrigin: null,
+ });
+
+ expect(iframe.src).toContain("date=2023-05-01");
+ expect(iframe.src).toContain("duration=30");
+ expect(iframe.src).toContain("email=test%40example.com");
+ });
+
  it("should respect forwardQueryParams setting to disable sending page query params but still send the ones in the config", () => {
  mockSearchParams("?param1=value");
 

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;
  }