fix: Form link in Reroute Dialog gives 404 for members that aren't admin/owner of team (#17537)

* fix: Form link in Reroute Dialog gives 404 for members that aren't admin/owner of team

* NIT

apps/web/components/PageWrapper.tsx

@@ -40,6 +40,8 @@ function PageWrapper(props: AppProps) {
     pageStatus = "404";
   } else if (router.pathname === "/500") {
     pageStatus = "500";
+  } else if (router.pathname === "/403") {
+    pageStatus = "403";
   }
 
   // On client side don't let nonce creep into DOM

apps/web/components/PageWrapperAppDir.tsx

@@ -31,6 +31,8 @@ function PageWrapper(props: PageWrapperProps) {
     pageStatus = "404";
   } else if (pathname === "/500") {
     pageStatus = "500";
+  } else if (pathname === "/403") {
+    pageStatus = "403";
   }
 
   // On client side don't let nonce creep into DOM

apps/web/pages/403.tsx

@@ -0,0 +1,30 @@
+import Head from "next/head";
+
+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 default function AccessDenied() {
+  const { t } = useLocale();
+
+  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>
+        <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")}
+        </p>
+        <Button href={WEBAPP_URL}>{t("go_back_home")}</Button>
+      </div>
+    </div>
+  );
+}
+
+AccessDenied.PageWrapper = PageWrapper;

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

@@ -2749,6 +2749,8 @@
   "event_end_time_in_attendee_timezone_info": "Event End Time In Attendee Timezone",
   "salesforce_create_event_on_contact": "Create event on contact, if it exists. Else fallback to lead",
   "salesforce_owner_name_to_change": "Owner name to change",
+  "dont_have_access_this_page": "You don't have access to this page",
+  "you_need_admin_or_owner_privileges_to_access": "In order to view or interact with this page, you must have admin or owner privileges",
   "field_type": "Field type",
   "when_to_write": "When to write",
   "salesforce_on_booking_write_to_record": "On booking, write to a custom field on the attendee {{record}} record",
@@ -2757,5 +2759,6 @@
   "booking_start_date": "Booking start date",
   "booking_created_date": "Booking created date",
   "booking_reassigned_to_host": "Booking reassigned to {{host}}",
+  "access_denied": "Access Denied",
   "ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
 }

packages/app-store/routing-forms/components/getServerSidePropsSingleForm.ts

@@ -40,7 +40,10 @@ export const getServerSidePropsForSingleFormView = async function getServerSideP
   const isFormCreateEditAllowed = (await import("../lib/isFormCreateEditAllowed")).isFormCreateEditAllowed;
   if (!(await isFormCreateEditAllowed({ userId: user.id, formId, targetTeamId: null }))) {
     return {
-      notFound: true,
+      redirect: {
+        permanent: false,
+        destination: "/403",
+      },
     };
   }