fix: Support embedding org profile page (#12116)

* support embedding org profile page

* Add checkly tests

* Fix test titles

---------

Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>

__checks__/README.md

@@ -0,0 +1,4 @@
+# Checkly Tests
+
+Run as `yarn checkly test`
+Deploy the tests as `yarn checkly deploy`

__checks__/organization.spec.ts

@@ -0,0 +1,53 @@
+import type { Page } from "@playwright/test";
+import { test, expect } from "@playwright/test";
+
+test.describe("Org", () => {
+  // Because these pages involve next.config.js rewrites, it's better to test them on production
+  test.describe("Embeds - i.cal.com", () => {
+    test("Org Profile Page should be embeddable", async ({ page }) => {
+      const response = await page.goto("https://i.cal.com/embed");
+      expect(response?.status()).toBe(200);
+      await page.screenshot({ path: "screenshot.jpg" });
+      await expectPageToBeServerSideRendered(page);
+    });
+
+    test("Org User(Peer) Page should be embeddable", async ({ page }) => {
+      const response = await page.goto("https://i.cal.com/peer/embed");
+      expect(response?.status()).toBe(200);
+      await expect(page.locator("text=Peer Richelsen")).toBeVisible();
+      await expectPageToBeServerSideRendered(page);
+    });
+
+    test("Org User Event(peer/meet) Page should be embeddable", async ({ page }) => {
+      const response = await page.goto("https://i.cal.com/peer/meet/embed");
+      expect(response?.status()).toBe(200);
+      await expect(page.locator('[data-testid="decrementMonth"]')).toBeVisible();
+      await expect(page.locator('[data-testid="incrementMonth"]')).toBeVisible();
+      await expectPageToBeServerSideRendered(page);
+    });
+
+    test("Org Team Profile(/sales) page should be embeddable", async ({ page }) => {
+      const response = await page.goto("https://i.cal.com/sales/embed");
+      expect(response?.status()).toBe(200);
+      await expect(page.locator("text=Cal.com Sales")).toBeVisible();
+      await expectPageToBeServerSideRendered(page);
+    });
+
+    test("Org Team Event page(/sales/hippa) should be embeddable", async ({ page }) => {
+      const response = await page.goto("https://i.cal.com/sales/hipaa/embed");
+      expect(response?.status()).toBe(200);
+      await expect(page.locator('[data-testid="decrementMonth"]')).toBeVisible();
+      await expect(page.locator('[data-testid="incrementMonth"]')).toBeVisible();
+      await expectPageToBeServerSideRendered(page);
+    });
+  });
+});
+
+// This ensures that the route is actually mapped to a page that is using withEmbedSsr
+async function expectPageToBeServerSideRendered(page: Page) {
+  expect(
+    await page.evaluate(() => {
+      return window.__NEXT_DATA__.props.pageProps.isEmbed;
+    })
+  ).toBe(true);
+}

apps/web/next.config.js

@@ -102,6 +102,16 @@ const matcherConfigRootPath = {
   source: "/",
 };
 
+const matcherConfigRootPathEmbed = {
+  has: [
+    {
+      type: "host",
+      value: orgHostPath,
+    },
+  ],
+  source: "/embed",
+};
+
 const matcherConfigUserRoute = {
   has: [
     {
@@ -245,6 +255,10 @@ const nextConfig = {
               ...matcherConfigRootPath,
               destination: "/team/:orgSlug?isOrgProfile=1",
             },
+            {
+              ...matcherConfigRootPathEmbed,
+              destination: "/team/:orgSlug/embed?isOrgProfile=1",
+            },
             {
               ...matcherConfigUserRoute,
               destination: "/org/:orgSlug/:user",

apps/web/pages/org/[orgSlug]/embed.tsx

@@ -0,0 +1,7 @@
+import withEmbedSsr from "@lib/withEmbedSsr";
+
+import { getServerSideProps as _getServerSideProps } from "./index";
+
+export { default } from "./index";
+
+export const getServerSideProps = withEmbedSsr(_getServerSideProps);

checkly.config.ts

@@ -0,0 +1,44 @@
+import { defineConfig } from "checkly";
+
+/**
+ * See https://www.checklyhq.com/docs/cli/project-structure/
+ */
+const config = defineConfig({
+  /* A human friendly name for your project */
+  projectName: "calcom-monorepo",
+  /** A logical ID that needs to be unique across your Checkly account,
+   * See https://www.checklyhq.com/docs/cli/constructs/ to learn more about logical IDs.
+   */
+  logicalId: "calcom-monorepo",
+  /* An optional URL to your Git repo */
+  repoUrl: "https://github.com/checkly/checkly-cli",
+  /* Sets default values for Checks */
+  checks: {
+    /* A default for how often your Check should run in minutes */
+    frequency: 10,
+    /* Checkly data centers to run your Checks as monitors */
+    locations: ["us-east-1", "eu-west-1"],
+    /* An optional array of tags to organize your Checks */
+    tags: ["Web"],
+    /** The Checkly Runtime identifier, determining npm packages and the Node.js version available at runtime.
+     * See https://www.checklyhq.com/docs/cli/npm-packages/
+     */
+    runtimeId: "2023.02",
+    /* A glob pattern that matches the Checks inside your repo, see https://www.checklyhq.com/docs/cli/using-check-test-match/ */
+    checkMatch: "**/__checks__/**/*.check.ts",
+    browserChecks: {
+      /* A glob pattern matches any Playwright .spec.ts files and automagically creates a Browser Check. This way, you
+       * can just write native Playwright code. See https://www.checklyhq.com/docs/cli/using-check-test-match/
+       * */
+      testMatch: "**/__checks__/**/*.spec.ts",
+    },
+  },
+  cli: {
+    /* The default datacenter location to use when running npx checkly test */
+    runLocation: "eu-west-1",
+    /* An array of default reporters to use when a reporter is not specified with the "--reporter" flag */
+    reporters: ["list"],
+  },
+});
+
+export default config;

package.json

@@ -81,6 +81,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@types/jsonwebtoken": "^9.0.3",
     "c8": "^7.13.0",
+    "checkly": "latest",
     "dotenv-checker": "^1.1.5",
     "husky": "^8.0.0",
     "i18n-unused": "^0.13.0",