diff --git a/apps/web/app/(use-page-wrapper)/(main-nav)/layout.tsx b/apps/web/app/(use-page-wrapper)/(main-nav)/layout.tsx index a394e76b29..a669b6edc0 100644 --- a/apps/web/app/(use-page-wrapper)/(main-nav)/layout.tsx +++ b/apps/web/app/(use-page-wrapper)/(main-nav)/layout.tsx @@ -1,11 +1,7 @@ import Shell from "@calcom/features/shell/Shell"; const Layout = ({ children }: { children: React.ReactNode }) => { - return ( - - {children} - - ); + return {children}; }; export default Layout; diff --git a/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/page.tsx b/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/page.tsx index fbb217dce7..f3b08e308b 100644 --- a/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/page.tsx +++ b/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/page.tsx @@ -41,7 +41,7 @@ const ServerPage = async ({ params, searchParams }: ServerPageProps) => { const Component = await routingFormsComponents[mainPage as keyof typeof routingFormsComponents](); const FinalComponent = () => ( - + ); @@ -50,7 +50,7 @@ const ServerPage = async ({ params, searchParams }: ServerPageProps) => { } return ( - + ); diff --git a/apps/web/app/(use-page-wrapper)/insights/layout.tsx b/apps/web/app/(use-page-wrapper)/insights/layout.tsx index 7aee590dde..c20180c2ff 100644 --- a/apps/web/app/(use-page-wrapper)/insights/layout.tsx +++ b/apps/web/app/(use-page-wrapper)/insights/layout.tsx @@ -8,7 +8,7 @@ export default async function InsightsLayout({ children }: { children: React.Rea const t = await getTranslate(); return (
- + {children}
diff --git a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/SettingsLayoutAppDirClient.tsx b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/SettingsLayoutAppDirClient.tsx index b4a62ff4a7..4a519f2300 100644 --- a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/SettingsLayoutAppDirClient.tsx +++ b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/SettingsLayoutAppDirClient.tsx @@ -740,7 +740,6 @@ export default function SettingsLayoutAppDirClient({ return ( - + { export default function WrappedApp(props: AppPageProps) { return ( - } backPath="/apps" withoutSeo> + } backPath="/apps"> {props.licenseRequired ? ( diff --git a/apps/web/modules/apps/categories/[category]/category-view.tsx b/apps/web/modules/apps/categories/[category]/category-view.tsx index 88dcdb7763..7631b0ee2a 100644 --- a/apps/web/modules/apps/categories/[category]/category-view.tsx +++ b/apps/web/modules/apps/categories/[category]/category-view.tsx @@ -16,7 +16,6 @@ export default function Apps({ apps, category }: CategoryDataProps) { <> +
{ withoutMain={false} title={t("organization_members")} description={t("organization_description")} - withoutSeo subtitle={t("organization_description")}> diff --git a/apps/web/modules/more/more-page-view.tsx b/apps/web/modules/more/more-page-view.tsx index f3e9d87a67..b5ef19be69 100644 --- a/apps/web/modules/more/more-page-view.tsx +++ b/apps/web/modules/more/more-page-view.tsx @@ -7,7 +7,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale"; export default function MorePage() { const { t } = useLocale(); return ( - +

{t("more_page_footer")}

diff --git a/apps/web/modules/settings/platform/billing/billing-view.tsx b/apps/web/modules/settings/platform/billing/billing-view.tsx index a0414b6e2f..ceb12a9299 100644 --- a/apps/web/modules/settings/platform/billing/billing-view.tsx +++ b/apps/web/modules/settings/platform/billing/billing-view.tsx @@ -56,7 +56,7 @@ export default function PlatformBillingUpgrade() { if (!isPlatformUser) return (
- }> + }>
@@ -68,7 +68,6 @@ export default function PlatformBillingUpgrade() { heading={t("platform_billing")} title={t("platform_billing")} withoutMain={false} - withoutSeo={true} subtitle={t("manage_billing_description")} isPlatformUser={true}> <> diff --git a/apps/web/modules/settings/platform/oauth-clients/[clientId]/edit/edit-view.tsx b/apps/web/modules/settings/platform/oauth-clients/[clientId]/edit/edit-view.tsx index 451d36f621..55dcf99aca 100644 --- a/apps/web/modules/settings/platform/oauth-clients/[clientId]/edit/edit-view.tsx +++ b/apps/web/modules/settings/platform/oauth-clients/[clientId]/edit/edit-view.tsx @@ -68,7 +68,7 @@ export default function EditOAuthClient() { if (isPlatformUser && isPaidUser) { return (
- +
@@ -116,7 +116,7 @@ export default function EditOAuthClient() { return (
- }> + }>
diff --git a/apps/web/modules/settings/platform/oauth-clients/[clientId]/edit/edit-webhooks-view.tsx b/apps/web/modules/settings/platform/oauth-clients/[clientId]/edit/edit-webhooks-view.tsx index 914107396c..14cedeed13 100644 --- a/apps/web/modules/settings/platform/oauth-clients/[clientId]/edit/edit-webhooks-view.tsx +++ b/apps/web/modules/settings/platform/oauth-clients/[clientId]/edit/edit-webhooks-view.tsx @@ -42,7 +42,7 @@ export default function EditOAuthClientWebhooks() { if (isPlatformUser && isPaidUser) { return (
- +
@@ -126,7 +126,7 @@ export default function EditOAuthClientWebhooks() { return (
- }> + }>
diff --git a/apps/web/modules/settings/platform/oauth-clients/create-new-view.tsx b/apps/web/modules/settings/platform/oauth-clients/create-new-view.tsx index a292030d5d..d916612582 100644 --- a/apps/web/modules/settings/platform/oauth-clients/create-new-view.tsx +++ b/apps/web/modules/settings/platform/oauth-clients/create-new-view.tsx @@ -64,7 +64,7 @@ export default function CreateOAuthClient() { if (isPlatformUser && isPaidUser) { return (
- +
@@ -85,7 +85,7 @@ export default function CreateOAuthClient() { return (
- }> + }>
diff --git a/apps/web/modules/settings/platform/plans/platform-plans-view.tsx b/apps/web/modules/settings/platform/plans/platform-plans-view.tsx index c399a18f1f..4f08fcf037 100644 --- a/apps/web/modules/settings/platform/plans/platform-plans-view.tsx +++ b/apps/web/modules/settings/platform/plans/platform-plans-view.tsx @@ -20,7 +20,6 @@ export default function PlatformPlans() {
diff --git a/apps/web/modules/settings/platform/platform-view.tsx b/apps/web/modules/settings/platform/platform-view.tsx index b853715f2f..7027962ecc 100644 --- a/apps/web/modules/settings/platform/platform-view.tsx +++ b/apps/web/modules/settings/platform/platform-view.tsx @@ -71,7 +71,6 @@ export default function Platform() { subtitle={t("platform_description")} title={t("platform")} description={t("platform_description")} - withoutSeo={true} withoutMain={false} isPlatformUser={true}> @@ -89,7 +88,6 @@ export default function Platform() { // hence we pass isPlatformUser boolean as prop isPlatformUser={true} withoutMain={false} - withoutSeo={true} SidebarContainer={<>}> diff --git a/apps/web/modules/test-setup.ts b/apps/web/modules/test-setup.ts index 600f495cd8..bdf86f9bff 100644 --- a/apps/web/modules/test-setup.ts +++ b/apps/web/modules/test-setup.ts @@ -151,10 +151,6 @@ vi.mock("@calcom/trpc/react", () => ({ }, })); -vi.mock("@calcom/ui/components/head-seo", () => ({ - HeadSeo: vi.fn(), -})); - vi.mock("@calcom/ui/styles", () => ({ useCalcomTheme: vi.fn(), })); diff --git a/apps/web/modules/upgrade/upgrade-view.tsx b/apps/web/modules/upgrade/upgrade-view.tsx index f2f85c8f3b..6e01eaa8d9 100644 --- a/apps/web/modules/upgrade/upgrade-view.tsx +++ b/apps/web/modules/upgrade/upgrade-view.tsx @@ -30,7 +30,7 @@ export default function UpgradePage() { const doesUserHaveOrgToUpgrade = trpc.viewer.organizations.checkIfOrgNeedsUpgrade.useQuery(); return ( - +
{doesUserHaveOrgToUpgrade.data ? ( { - it("should render HeadSeo with correct props", () => { + it("should render with no throw", () => { const mockData = { props: mockedUserPageComponentProps({ entity: { @@ -74,7 +73,6 @@ describe("UserPage Component", () => { uid: "uid", }); - render(); - expect(HeadSeo).not.toHaveBeenCalled(); + expect(() => render()).not.toThrow(); }); }); diff --git a/packages/app-store/hitpay/pages/setup/index.tsx b/packages/app-store/hitpay/pages/setup/index.tsx index 30be43c6c1..04bb7d08e6 100644 --- a/packages/app-store/hitpay/pages/setup/index.tsx +++ b/packages/app-store/hitpay/pages/setup/index.tsx @@ -13,7 +13,6 @@ import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc"; import { Button } from "@calcom/ui/components/button"; import { Switch } from "@calcom/ui/components/form"; -import { HeadSeo } from "@calcom/ui/components/head-seo"; import { Icon } from "@calcom/ui/components/icon"; import { showToast } from "@calcom/ui/components/toast"; @@ -204,7 +203,6 @@ function HitPaySetupPage(props: IHitPaySetupProps) { return ( <> -
{showContent ? (
diff --git a/packages/features/ee/workflows/pages/index.tsx b/packages/features/ee/workflows/pages/index.tsx index 0faa71ce38..62b07643da 100644 --- a/packages/features/ee/workflows/pages/index.tsx +++ b/packages/features/ee/workflows/pages/index.tsx @@ -66,7 +66,7 @@ function WorkflowsPage({ filteredList }: PageProps) { }); return ( - + +
{!formMethods.getValues("metadata")?.managedEventConfig && ( diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx index 4e5ae49e85..3ffc06c2b9 100644 --- a/packages/features/shell/Shell.tsx +++ b/packages/features/shell/Shell.tsx @@ -10,13 +10,11 @@ import { useRedirectToLoginIfUnauthenticated } from "@calcom/features/auth/lib/h import { useRedirectToOnboardingIfNeeded } from "@calcom/features/auth/lib/hooks/useRedirectToOnboardingIfNeeded"; import { KBarContent, KBarRoot } from "@calcom/features/kbar/Kbar"; import TimezoneChangeDialog from "@calcom/features/settings/TimezoneChangeDialog"; -import { APP_NAME } from "@calcom/lib/constants"; import { useFormbricks } from "@calcom/lib/formbricks-client"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import classNames from "@calcom/ui/classNames"; import { Button } from "@calcom/ui/components/button"; import { ErrorBoundary } from "@calcom/ui/components/errorBoundary"; -import { HeadSeo } from "@calcom/ui/components/head-seo"; import { SkeletonText } from "@calcom/ui/components/skeleton"; import { SideBarContainer } from "./SideBar"; @@ -30,19 +28,11 @@ const Layout = (props: LayoutProps) => { const { banners, bannersHeight } = useBanners(); const pathname = usePathname(); const isFullPageWithoutSidebar = pathname?.startsWith("/apps/routing-forms/reporting/"); - const pageTitle = typeof props.heading === "string" && !props.title ? props.heading : props.title; - const withoutSeo = props.withoutSeo ?? props.withoutMain ?? false; useFormbricks(); return ( <> - {!withoutSeo && ( - - )}
@@ -91,8 +81,6 @@ export type LayoutProps = { flexChildrenContainer?: boolean; isPublic?: boolean; withoutMain?: boolean; - // Gives you the option to skip HeadSEO and render your own. - withoutSeo?: boolean; // Gives the ability to include actions to the right of the heading actions?: JSX.Element; beforeCTAactions?: JSX.Element; diff --git a/packages/ui/components/head-seo/HeadSeo.tsx b/packages/ui/components/head-seo/HeadSeo.tsx deleted file mode 100644 index 99d7512785..0000000000 --- a/packages/ui/components/head-seo/HeadSeo.tsx +++ /dev/null @@ -1,142 +0,0 @@ -"use client"; - -import type { NextSeoProps } from "next-seo"; -import { NextSeo } from "next-seo"; -import { usePathname } from "next/navigation"; - -import type { AppImageProps, MeetingImageProps } from "@calcom/lib/OgImages"; -import { constructAppImage, constructGenericImage, constructMeetingImage } from "@calcom/lib/OgImages"; -import { APP_NAME, CAL_URL } from "@calcom/lib/constants"; -import { buildCanonical, getSeoImage, seoConfig } from "@calcom/lib/next-seo.config"; -import { truncateOnWord } from "@calcom/lib/text"; - -export type HeadSeoProps = { - title: string; - description: string; - siteName?: string; - url?: string; - canonical?: string; - nextSeoProps?: NextSeoProps; - app?: AppImageProps; - meeting?: MeetingImageProps; - isBrandingHidden?: boolean; - origin?: string; -}; - -/** - * Build full seo tags from title, desc, canonical and url - */ -const buildSeoMeta = (pageProps: { - title: string; - description: string; - image: string; - siteName?: string; - url?: string; - canonical?: string; -}) => { - const { title, description, image, canonical, siteName = seoConfig.headSeo.siteName } = pageProps; - return { - title: title, - canonical: canonical, - openGraph: { - site_name: siteName, - type: "website", - title: title, - description: description, - images: [ - { - url: image, - }, - ], - }, - additionalMetaTags: [ - { - property: "name", - content: title, - }, - { - property: "description", - content: description, - }, - { - name: "description", - content: description, - }, - { - property: "image", - content: image, - }, - ], - }; -}; - -export const HeadSeo = (props: HeadSeoProps): JSX.Element => { - const path = usePathname(); - - // The below code sets the defaultUrl for our canonical tags - // Get the router's path - // Set the default URL to either the current URL (if self-hosted) or https://cal.com canonical URL - const defaultUrl = buildCanonical({ path, origin: props.origin || CAL_URL }); - - const { - title, - description, - siteName, - canonical = defaultUrl, - nextSeoProps = {}, - app, - meeting, - isBrandingHidden, - } = props; - - const image = getSeoImage("ogImage") + constructGenericImage({ title, description }); - const truncatedDescription = truncateOnWord(description, 158); - const pageTitle = `${title}${isBrandingHidden ? "" : ` | ${APP_NAME}`}`; - let seoObject = buildSeoMeta({ - title: pageTitle, - image, - description: truncatedDescription, - canonical, - siteName, - }); - - if (meeting) { - const pageImage = getSeoImage("ogImage") + constructMeetingImage(meeting); - seoObject = buildSeoMeta({ - title: pageTitle, - description: truncatedDescription, - image: pageImage, - canonical, - siteName, - }); - } - - if (app) { - const pageImage = - getSeoImage("ogImage") + constructAppImage({ ...app, description: truncatedDescription }); - seoObject = buildSeoMeta({ - title: pageTitle, - description: truncatedDescription, - image: pageImage, - canonical, - siteName, - }); - } - - // Instead of doing a blackbox deep merge which can be tricky implementation wise and need a good implementation, we should generate the object manually as we know the properties - // Goal is to avoid big dependency - const seoProps: NextSeoProps = { - ...nextSeoProps, - ...seoObject, - openGraph: { - ...nextSeoProps.openGraph, - ...seoObject.openGraph, - images: [...(nextSeoProps.openGraph?.images || []), ...seoObject.openGraph.images], - }, - additionalMetaTags: [...(nextSeoProps.additionalMetaTags || []), ...seoObject.additionalMetaTags], - }; - - return ; -}; - -export default HeadSeo; diff --git a/packages/ui/components/head-seo/head-seo.test.tsx b/packages/ui/components/head-seo/head-seo.test.tsx deleted file mode 100644 index 54f283729b..0000000000 --- a/packages/ui/components/head-seo/head-seo.test.tsx +++ /dev/null @@ -1,160 +0,0 @@ -import { render, waitFor } from "@testing-library/react"; -import type { NextSeoProps } from "next-seo"; -import type { OpenGraph } from "next/dist/lib/metadata/types/opengraph-types"; -import { usePathname } from "next/navigation"; -import { vi } from "vitest"; - -import { CAL_URL } from "@calcom/lib/constants"; - -import type { HeadSeoProps } from "./HeadSeo"; -import HeadSeo from "./HeadSeo"; - -vi.mock("next/navigation", () => { - return { - usePathname: vi.fn(), - }; -}); -vi.mock("@calcom/lib/constants", () => { - return { - SEO_IMG_DEFAULT: "", - SEO_IMG_OGIMG: "", - APP_NAME: "Cal.com", - CAL_URL: "http://cal.com", - }; -}); -vi.mock("next-seo", () => { - return { - NextSeo: (props: NextSeoProps) => { - const { images, ...restOpenGraph } = props.openGraph as OpenGraph & { images: Array<{ url: string }> }; - const mockedProps = { - ...restOpenGraph, - canonical: props.canonical, - image: images[0].url, - // eslint-disable-next-line @typescript-eslint/no-explicit-any - } as any; - return
; - }, - }; -}); - -vi.mock("@calcom/lib/OgImages", async () => { - return { - constructAppImage() { - return "constructAppImage"; - }, - constructGenericImage() { - return "constructGenericImage"; - }, - constructMeetingImage() { - return "constructMeetingImage"; - }, - }; -}); - -const basicProps = { - image: "image.png", - siteName: "calcomsite", - url: "calcom.com", - canonical: "test canonical", - title: "Test Title", - description: "Test Description", -}; - -describe("Tests for HeadSeo component", () => { - test("Should render mocked NextSeo", async () => { - const { container } = render(); - await waitFor(async () => { - const mockedNextSeoEl = container.querySelector("#mocked-next-seo"); - expect(mockedNextSeoEl?.getAttribute("canonical")).toEqual(basicProps.canonical); - expect(mockedNextSeoEl?.getAttribute("description")).toEqual(basicProps.description); - expect(mockedNextSeoEl?.getAttribute("site_name")).toEqual(basicProps.siteName); - expect(mockedNextSeoEl?.getAttribute("image")).toContain("constructGenericImage"); - }); - }); - - describe("Canonical Url", () => { - test("Should provide `canonical` prop to NextSeo derived from `origin` prop if provided", async () => { - const props = { - title: "Test Title", - description: "Test Description", - origin: "http://acme.cal.local", - siteName: "Cal.com", - }; - vi.mocked(usePathname).mockReturnValue("/mocked-path"); - const { container } = render(); - await waitFor(async () => { - const mockedNextSeoEl = container.querySelector("#mocked-next-seo"); - expect(mockedNextSeoEl?.getAttribute("canonical")).toEqual(`${props.origin}/mocked-path`); - expect(mockedNextSeoEl?.getAttribute("description")).toEqual(props.description); - expect(mockedNextSeoEl?.getAttribute("site_name")).toEqual(props.siteName); - expect(mockedNextSeoEl?.getAttribute("image")).toContain("constructGenericImage"); - }); - }); - test("Should provide `canonical` prop to NextSeo derived from `CAL_URL` prop if origin not provided", async () => { - const props = { - title: "Test Title", - description: "Test Description", - siteName: "Cal.com", - }; - vi.mocked(usePathname).mockReturnValue("/mocked-path"); - const { container } = render(); - await waitFor(async () => { - const mockedNextSeoEl = container.querySelector("#mocked-next-seo"); - expect(mockedNextSeoEl?.getAttribute("canonical")).toEqual(`${CAL_URL}/mocked-path`); - expect(mockedNextSeoEl?.getAttribute("description")).toEqual(props.description); - expect(mockedNextSeoEl?.getAttribute("site_name")).toEqual(props.siteName); - expect(mockedNextSeoEl?.getAttribute("image")).toContain("constructGenericImage"); - }); - }); - test("Should provide `canonical` prop to NextSeo from canonical prop if provided", async () => { - const props = { - title: "Test Title", - description: "Test Description", - siteName: "Cal.com", - origin: "http://acme.cal.local", - canonical: "http://acme.cal.local/some-path", - }; - vi.mocked(usePathname).mockReturnValue("/mocked-path"); - const { container } = render(); - await waitFor(async () => { - const mockedNextSeoEl = container.querySelector("#mocked-next-seo"); - expect(mockedNextSeoEl?.getAttribute("canonical")).toEqual(props.canonical); - expect(mockedNextSeoEl?.getAttribute("description")).toEqual(props.description); - expect(mockedNextSeoEl?.getAttribute("site_name")).toEqual(props.siteName); - expect(mockedNextSeoEl?.getAttribute("image")).toContain("constructGenericImage"); - }); - }); - }); - - test("Should render title with brand", async () => { - const { container } = render(); - await waitFor(async () => { - const mockedNextSeoEl = container.querySelector("#mocked-next-seo"); - expect(mockedNextSeoEl?.getAttribute("title")).toEqual(`${basicProps.title} | Cal.com`); - }); - }); - - test("Should render title without brand", async () => { - const { container } = render(); - await waitFor(async () => { - const mockedNextSeoEl = container.querySelector("#mocked-next-seo"); - expect(mockedNextSeoEl?.getAttribute("title")).toEqual(`${basicProps.title}`); - }); - }); - - test("Should render with app props", async () => { - const { container } = render(); - await waitFor(async () => { - const mockedNextSeoEl = container.querySelector("#mocked-next-seo"); - expect(mockedNextSeoEl?.getAttribute("image")).toContain("constructAppImage"); - }); - }); - - test("Should render with meeting props", async () => { - const { container } = render(); - await waitFor(async () => { - const mockedNextSeoEl = container.querySelector("#mocked-next-seo"); - expect(mockedNextSeoEl?.getAttribute("image")).toContain("constructMeetingImage"); - }); - }); -}); diff --git a/packages/ui/components/head-seo/index.ts b/packages/ui/components/head-seo/index.ts deleted file mode 100644 index 509bcc9071..0000000000 --- a/packages/ui/components/head-seo/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { HeadSeo } from "./HeadSeo"; diff --git a/packages/ui/package.json b/packages/ui/package.json index 6e75fb71f8..7600d359c6 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -32,7 +32,6 @@ "./components/errorBoundary": "./components/errorBoundary/index.ts", "./components/form": "./components/form/index.ts", "./components/form/timezone-select": "./components/form/timezone-select/index.ts", - "./components/head-seo": "./components/head-seo/index.ts", "./components/hover-card": "./components/hover-card/index.tsx", "./components/image-uploader": "./components/image-uploader/index.ts", "./components/layout": "./components/layout/index.ts",