import type { GetStaticPropsContext } from "next"; import Link from "next/link"; import { useRouter } from "next/router"; import React, { useEffect, useState } from "react"; import { orgDomainConfig, subdomainSuffix } from "@calcom/features/ee/organizations/lib/orgDomains"; import { DOCS_URL, JOIN_DISCORD, WEBSITE_URL, IS_CALCOM } from "@calcom/lib/constants"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { HeadSeo } from "@calcom/ui"; import { BookOpen, Check, ChevronRight, FileText, Shield } from "@calcom/ui/components/icon"; import { Discord } from "@calcom/ui/components/icon/Discord"; import PageWrapper from "@components/PageWrapper"; import { ssgInit } from "@server/lib/ssg"; enum pageType { ORG = "org", TEAM = "team", USER = "user", OTHER = "other", } export default function Custom404() { const { t } = useLocale(); const router = useRouter(); const [username, setUsername] = useState(""); const [currentPageType, setCurrentPageType] = useState(pageType.USER); const links = [ { title: "Enterprise", description: "Learn more about organizations and subdomains in our enterprise plan.", icon: Shield, href: `${WEBSITE_URL}/enterprise`, }, { title: t("documentation"), description: t("documentation_description"), icon: FileText, href: DOCS_URL, }, { title: t("blog"), description: t("blog_description"), icon: BookOpen, href: `${WEBSITE_URL}/blog`, }, ]; const [url, setUrl] = useState(`${WEBSITE_URL}/signup`); useEffect(() => { const { isValidOrgDomain, currentOrgDomain } = orgDomainConfig(window.location.host); const [routerUsername] = router.asPath.replace("%20", "-").split(/[?#]/); if (!isValidOrgDomain || !currentOrgDomain) { const splitPath = routerUsername.split("/"); if (splitPath[1] === "team" && splitPath.length === 3) { // Accessing a non-existent team setUsername(splitPath[2]); setCurrentPageType(pageType.TEAM); setUrl( `${WEBSITE_URL}/signup?callbackUrl=settings/teams/new%3Fslug%3D${splitPath[2].replace("/", "")}` ); } else { setUsername(routerUsername); setUrl(`${WEBSITE_URL}/signup?username=${routerUsername.replace("/", "")}`); } } else { setUsername(currentOrgDomain); setCurrentPageType(pageType.ORG); setUrl( `${WEBSITE_URL}/signup?callbackUrl=settings/organizations/new%3Fslug%3D${currentOrgDomain.replace( "/", "" )}` ); } }, []); const isSuccessPage = router.asPath.startsWith("/booking"); const isSubpage = router.asPath.includes("/", 2) || isSuccessPage; const isSignup = router.asPath.startsWith("/signup"); /** * If we're on 404 and the route is insights it means it is disabled * TODO: Abstract this for all disabled features **/ const isInsights = router.asPath.startsWith("/insights"); if (isInsights) { return ( <>

{t("error_404")}

Feature is currently disabled

{t("or_go_back_home")}
); } if (!username) return null; return ( <>
{isSignup && process.env.NEXT_PUBLIC_WEBAPP_URL !== "https://app.cal.com" ? (

{t("missing_license")}

{t("signup_requires")}

{t("signup_requires_description", { companyName: "Cal.com" })}

{t("next_steps")}

{t("contact_sales")}
) : ( <>

{t("error_404")}

{isSuccessPage ? "Booking not found" : t("page_doesnt_exist")}

{isSubpage && currentPageType !== pageType.TEAM ? ( {t("check_spelling_mistakes_or_go_back")} ) : IS_CALCOM ? ( {t(`404_the_${currentPageType.toLowerCase()}`)}{" "} {new URL(WEBSITE_URL).hostname} {username} {" "} {t("is_still_available")} {t("register_now")}. ) : ( {t(`404_the_${currentPageType.toLowerCase()}`)}{" "} {username}{" "} {t("is_still_available")} )}
{((!isSubpage && IS_CALCOM) || currentPageType === pageType.ORG || currentPageType === pageType.TEAM) && ( )}

{t("popular_pages")}

{t("or_go_back_home")}
)}
); } Custom404.PageWrapper = PageWrapper; export const getStaticProps = async (context: GetStaticPropsContext) => { const ssr = await ssgInit(context); return { props: { trpcState: ssr.dehydrate(), }, }; };