import { GetStaticPropsContext } from "next"; import Link from "next/link"; import { useRouter } from "next/router"; import { useEffect, useState } from "react"; import { COMPANY_NAME, DEVELOPER_DOCS, DOCS_URL, JOIN_SLACK, WEBSITE_URL } from "@calcom/lib/constants"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { HeadSeo } from "@calcom/ui"; import { FiFileText, FiCheck, FiBookOpen, FiChevronRight } from "@calcom/ui/components/icon"; import { ssgInit } from "@server/lib/ssg"; export default function Custom404() { const { t } = useLocale(); const router = useRouter(); const [username] = router.asPath.replace("%20", "-").split(/[?#]/); const links = [ { title: t("documentation"), description: t("documentation_description"), icon: FiFileText, href: DOCS_URL, }, { title: t("blog"), description: t("blog_description"), icon: FiBookOpen, href: `${WEBSITE_URL}/blog`, }, ]; const [url, setUrl] = useState(`${WEBSITE_URL}/signup?username=`); useEffect(() => { setUrl(`${WEBSITE_URL}/signup?username=${username.replace("/", "")}`); }, [username]); const isSuccessPage = router.asPath.startsWith("/booking"); const isSubpage = router.asPath.includes("/", 2) || isSuccessPage; const isSignup = router.asPath.startsWith("/signup"); const isCalcom = process.env.NEXT_PUBLIC_WEBAPP_URL === "https://app.cal.com"; return ( <>
{isSignup && process.env.NEXT_PUBLIC_WEBAPP_URL !== "https://app.cal.com" ? (

{t("missing_license")}

{t("signup_requires")}

{t("signup_requires_description", { companyName: COMPANY_NAME })}

{t("next_steps")}

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

{t("error_404")}

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

{isSubpage ? ( {t("check_spelling_mistakes_or_go_back")} ) : isCalcom ? ( {t("the_username")}{" "} {new URL(WEBSITE_URL).hostname} {username} {" "} {t("is_still_available")} {t("register_now")}. ) : ( {t("the_username")}{" "} {username}{" "} {t("is_still_available")} )}

{t("popular_pages")}

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