diff --git a/apps/web/components/PageWrapper.tsx b/apps/web/components/PageWrapper.tsx new file mode 100644 index 0000000000..1b9fabb052 --- /dev/null +++ b/apps/web/components/PageWrapper.tsx @@ -0,0 +1,99 @@ +import { DefaultSeo } from "next-seo"; +import { Inter } from "next/font/google"; +import localFont from "next/font/local"; +import Script from "next/script"; + +import "@calcom/embed-core/src/embed-iframe"; +import { useEmbedUiConfig } from "@calcom/embed-core/src/embed-iframe"; +import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired"; + +import type { AppProps } from "@lib/app-providers"; +import AppProviders from "@lib/app-providers"; +import { seoConfig } from "@lib/config/next-seo.config"; + +import I18nLanguageHandler from "@components/I18nLanguageHandler"; + +export interface CalPageWrapper { + (props?: any): JSX.Element; + PageWrapper?: AppProps["Component"]["PageWrapper"]; +} + +const interFont = Inter({ subsets: ["latin"], variable: "--font-inter", preload: true, display: "swap" }); +const calFont = localFont({ + src: "../fonts/CalSans-SemiBold.woff2", + variable: "--font-cal", + preload: true, + display: "swap", +}); + +function PageWrapper(props: AppProps) { + const { Component, pageProps, err, router } = props; + let pageStatus = "200"; + const { cssVarsPerTheme } = useEmbedUiConfig(); + const cssVarsStyle = []; + if (cssVarsPerTheme) { + for (const [themeName, cssVars] of Object.entries(cssVarsPerTheme)) { + cssVarsStyle.push(`.${themeName} {`); + for (const [cssVarName, value] of Object.entries(cssVars)) { + cssVarsStyle.push(`--${cssVarName}: ${value};`); + } + cssVarsStyle.push(`}`); + } + } + + if (router.pathname === "/404") { + pageStatus = "404"; + } else if (router.pathname === "/500") { + pageStatus = "500"; + } + + // On client side don't let nonce creep into DOM + // It also avoids hydration warning that says that Client has the nonce value but server has "" because browser removes nonce attributes before DOM is built + // See https://github.com/kentcdodds/nonce-hydration-issues + // Set "" only if server had it set otherwise keep it undefined because server has to match with client to avoid hydration error + const nonce = typeof window !== "undefined" ? (pageProps.nonce ? "" : undefined) : pageProps.nonce; + const providerProps = { + ...props, + pageProps: { + ...props.pageProps, + nonce, + }, + }; + // Use the layout defined at the page level, if available + const getLayout = Component.getLayout ?? ((page) => page); + return ( + + + +