chore: Migrate /403 and /500 pages to App Router (#18424)

* global-error is not needed

* remove /403 and /500 pages from pages router

* add 403 and 500 pages in App Router

* add i18n strings

* fix i18n string

* fix styling

apps/web/app/403/page.tsx

@@ -1,22 +1,24 @@
-import Head from "next/head";
+import { _generateMetadata, getTranslate } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
 
 import { APP_NAME, WEBAPP_URL } from "@calcom/lib/constants";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui";
 
-import PageWrapper from "@components/PageWrapper";
+export const generateMetadata = () =>
+  _generateMetadata(
+    (t) => `${t("access_denied")} | ${APP_NAME}`,
+    () => ""
+  );
 
-export default function AccessDenied() {
-  const { t } = useLocale();
+async function Error403() {
+  const t = await getTranslate();
 
   return (
     <div className="bg-subtle flex h-screen">
-      <Head>
-        <title>{`${t("access_denied")} | ${APP_NAME}`}</title>
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
       <div className="rtl: bg-default m-auto rounded-md p-10 text-right ltr:text-left">
-        <h1 className="font-cal text-emphasis text-6xl">403</h1>
+        <h1 className="font-cal text-emphasis" style={{ fontSize: "3.75rem", lineHeight: 1 }}>
+          403
+        </h1>
         <h2 className="text-emphasis mt-6 text-2xl font-medium">{t("dont_have_access_this_page")}</h2>
         <p className="text-default mb-6 mt-4 max-w-2xl text-sm">
           {t("you_need_admin_or_owner_privileges_to_access")}
@@ -27,4 +29,4 @@ export default function AccessDenied() {
   );
 }
 
-AccessDenied.PageWrapper = PageWrapper;
+export default WithLayout({ ServerPage: Error403 });

apps/web/app/500/copy-button.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Button, showToast } from "@calcom/ui";
+
+export default function CopyButton({ error }: { error: string }) {
+  const { t } = useLocale();
+
+  return (
+    <Button
+      color="secondary"
+      className="mt-2 border-0 font-sans font-normal hover:bg-gray-300"
+      StartIcon="copy"
+      onClick={() => {
+        navigator.clipboard.writeText(error);
+        showToast("Link copied!", "success");
+      }}>
+      {t("copy")}
+    </Button>
+  );
+}

apps/web/app/500/page.tsx

@@ -0,0 +1,49 @@
+import { _generateMetadata, getTranslate } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+
+import { APP_NAME } from "@calcom/lib/constants";
+import { Button } from "@calcom/ui";
+
+import CopyButton from "./copy-button";
+
+export const generateMetadata = () =>
+  _generateMetadata(
+    (t) => `${t("something_unexpected_occurred")} | ${APP_NAME}`,
+    () => ""
+  );
+
+async function Error500({ searchParams }: { searchParams: { error?: string } }) {
+  const t = await getTranslate();
+
+  return (
+    <div className="bg-subtle flex h-screen">
+      <div className="rtl: bg-default m-auto rounded-md p-10 text-right ltr:text-left">
+        <h1 className="font-cal text-emphasis" style={{ fontSize: "3.75rem", lineHeight: 1 }}>
+          500
+        </h1>
+        <h2 className="text-emphasis mt-6 text-2xl font-medium">{t("500_error_message")}</h2>
+        <p className="text-default mb-6 mt-4 max-w-2xl text-sm">{t("something_went_wrong_on_our_end")}</p>
+        {searchParams?.error && (
+          <div className="mb-8 flex flex-col">
+            <p className="text-default mb-4 max-w-2xl text-sm">
+              {t("please_provide_following_text_to_suppport")}:
+            </p>
+            <pre className="bg-emphasis text-emphasis w-full max-w-2xl whitespace-normal break-words rounded-md p-4">
+              {searchParams.error}
+              <br />
+              <CopyButton error={searchParams.error} />
+            </pre>
+          </div>
+        )}
+        <Button href="mailto:support@cal.com">{t("contact_support")}</Button>
+        <Button color="secondary" href="javascript:history.back()" className="ml-2">
+          {t("go_back")}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default WithLayout({
+  ServerPage: Error500,
+});

apps/web/middleware.ts

@@ -153,6 +153,8 @@ export const config = {
   // Next.js Doesn't support spread operator in config matcher, so, we must list all paths explicitly here.
   // https://github.com/vercel/next.js/discussions/42458
   matcher: [
+    "/403",
+    "/500",
     "/d/:path*",
     "/more/:path*",
     "/maintenance/:path*",

apps/web/pages/500.tsx

@@ -1,54 +0,0 @@
-import Head from "next/head";
-
-import { APP_NAME } from "@calcom/lib/constants";
-import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, showToast } from "@calcom/ui";
-
-import PageWrapper from "@components/PageWrapper";
-
-export default function Error500() {
-  const searchParams = useCompatSearchParams();
-  const { t } = useLocale();
-
-  return (
-    <div className="bg-subtle flex h-screen">
-      <Head>
-        <title>Something unexpected occurred | {APP_NAME}</title>
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-      <div className="rtl: bg-default m-auto rounded-md p-10 text-right ltr:text-left">
-        <h1 className="font-cal text-emphasis text-6xl">500</h1>
-        <h2 className="text-emphasis mt-6 text-2xl font-medium">It&apos;s not you, it&apos;s us.</h2>
-        <p className="text-default mb-6 mt-4 max-w-2xl text-sm">{t("something_went_wrong_on_our_end")}</p>
-        {searchParams?.get("error") && (
-          <div className="mb-8 flex flex-col">
-            <p className="text-default mb-4 max-w-2xl text-sm">
-              {t("please_provide_following_text_to_suppport")}:
-            </p>
-            <pre className="bg-emphasis text-emphasis w-full max-w-2xl whitespace-normal break-words rounded-md p-4">
-              {searchParams?.get("error")}
-              <br />
-              <Button
-                color="secondary"
-                className="mt-2 border-0 font-sans font-normal hover:bg-gray-300"
-                StartIcon="copy"
-                onClick={() => {
-                  navigator.clipboard.writeText(searchParams?.get("error") as string);
-                  showToast("Link copied!", "success");
-                }}>
-                {t("copy")}
-              </Button>
-            </pre>
-          </div>
-        )}
-        <Button href="mailto:support@cal.com">{t("contact_support")}</Button>
-        <Button color="secondary" href="javascript:history.back()" className="ml-2">
-          {t("go_back")}
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-Error500.PageWrapper = PageWrapper;

apps/web/public/static/locales/en/common.json

@@ -2903,5 +2903,7 @@
   "calibration": "Calibration",
   "shortfall": "Shortfall",
   "routing_form": "Routing Form",
+  "something_unexpected_occurred": "Something unexpected occurred",
+  "500_error_message": "It's not you, it's us.",
   "ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
 }