fix: Broken Embed Dialog in Routing Forms due to recent rewrite (#10434)

Co-authored-by: zomars <zomars@me.com>

apps/web/middleware.ts

@@ -54,13 +54,6 @@ const middleware: NextMiddleware = async (req) => {
 
 const routingForms = {
   handle: (url: URL) => {
-    // Next.config.js Redirects don't handle Client Side navigations and we need that.
-    // So, we add the rewrite here instead.
-    if (url.pathname.startsWith("/routing-forms")) {
-      url.pathname = url.pathname.replace(/^\/routing-forms($|\/)/, "/apps/routing-forms/");
-      return NextResponse.rewrite(url);
-    }
-
     // Don't 404 old routing_forms links
     if (url.pathname.startsWith("/apps/routing_forms")) {
       url.pathname = url.pathname.replace(/^\/apps\/routing_forms($|\/)/, "/apps/routing-forms/");
@@ -80,7 +73,6 @@ export const config = {
      * Paths required by routingForms.handle
      */
     "/apps/routing_forms/:path*",
-    "/routing-forms/:path*",
   ],
 };
 

apps/web/pages/routing-forms/[...pages].tsx

@@ -0,0 +1,25 @@
+import type { GetServerSidePropsContext } from "next";
+import z from "zod";
+
+const paramsSchema = z
+  .object({
+    pages: z.array(z.string()),
+  })
+  .catch({
+    pages: [],
+  });
+
+export default function RoutingForms() {
+  return null;
+}
+
+export const getServerSideProps = (context: GetServerSidePropsContext) => {
+  const { pages } = paramsSchema.parse(context.params);
+
+  return {
+    redirect: {
+      destination: `/apps/routing-forms/${pages.length ? pages.join("/") : ""}`,
+      permanent: false,
+    },
+  };
+};

apps/web/pages/routing-forms/index.tsx

@@ -0,0 +1,12 @@
+export default function RoutingFormsIndex() {
+  return null;
+}
+
+export const getServerSideProps = () => {
+  return {
+    redirect: {
+      destination: `/apps/routing-forms/forms`,
+      permanent: false,
+    },
+  };
+};

packages/app-store/routing-forms/config.json

@@ -10,7 +10,7 @@
   "variant": "other",
   "categories": ["automation"],
   "publisher": "Cal.com, Inc.",
-  "simplePath": "/routing-forms",
+  "simplePath": "/apps/routing-forms",
   "email": "help@cal.com",
   "licenseRequired": true,
   "teamsPlanRequired": {

packages/app-store/routing-forms/pages/form-edit/[...appPages].tsx

@@ -425,7 +425,7 @@ export default function FormEditPage({
 
 FormEditPage.getLayout = (page: React.ReactElement) => {
   return (
-    <Shell backPath="/routing-forms/forms" withoutMain={true}>
+    <Shell backPath="/apps/routing-forms/forms" withoutMain={true}>
       {page}
     </Shell>
   );

packages/app-store/routing-forms/pages/reporting/[...appPages].tsx

@@ -199,7 +199,7 @@ export default function ReporterWrapper({
 
 ReporterWrapper.getLayout = (page: React.ReactElement) => {
   return (
-    <Shell backPath="/routing-forms/forms" withoutMain={true}>
+    <Shell backPath="/apps/routing-forms/forms" withoutMain={true}>
       {page}
     </Shell>
   );

packages/app-store/routing-forms/pages/route-builder/[...appPages].tsx

@@ -562,7 +562,7 @@ export default function RouteBuilder({
 
 RouteBuilder.getLayout = (page: React.ReactElement) => {
   return (
-    <Shell backPath="/routing-forms/forms" withoutMain={true}>
+    <Shell backPath="/apps/routing-forms/forms" withoutMain={true}>
       {page}
     </Shell>
   );

packages/features/shell/Shell.tsx

@@ -547,7 +547,7 @@ const navigation: NavigationItemType[] = [
     icon: Grid,
     isCurrent: ({ pathname: path, item }) => {
       // During Server rendering path is /v2/apps but on client it becomes /apps(weird..)
-      return path?.startsWith(item.href) || path?.startsWith("/v2" + item.href);
+      return path?.startsWith(item.href) && !path?.includes("routing-forms/");
     },
     child: [
       {
@@ -556,8 +556,7 @@ const navigation: NavigationItemType[] = [
         isCurrent: ({ pathname: path, item }) => {
           // During Server rendering path is /v2/apps but on client it becomes /apps(weird..)
           return (
-            (path?.startsWith(item.href) || path?.startsWith("/v2" + item.href)) &&
-            !path.includes("/installed")
+            path?.startsWith(item.href) && !path?.includes("routing-forms/") && !path?.includes("/installed")
           );
         },
       },
@@ -576,9 +575,9 @@ const navigation: NavigationItemType[] = [
   },
   {
     name: "Routing Forms",
-    href: "/routing-forms/forms",
+    href: "/apps/routing-forms/forms",
     icon: FileText,
-    isCurrent: ({ pathname }) => pathname?.startsWith("/routing-forms/"),
+    isCurrent: ({ pathname }) => pathname?.startsWith("/apps/routing-forms/"),
   },
   {
     name: "workflows",