fix: preserve last environment id (#3185)

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/products/new/settings/components/ProductSettings.tsx

@@ -7,7 +7,7 @@ import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { toast } from "react-hot-toast";
 import { getFormattedErrorMessage } from "@formbricks/lib/actionClient/helper";
-import { FORMBRICKS_PRODUCT_ID_LS, FORMBRICKS_SURVEYS_FILTERS_KEY_LS } from "@formbricks/lib/localStorage";
+import { FORMBRICKS_SURVEYS_FILTERS_KEY_LS } from "@formbricks/lib/localStorage";
 import { PREVIEW_SURVEY } from "@formbricks/lib/styling/constants";
 import {
   TProductConfigChannel,
@@ -64,8 +64,6 @@ export const ProductSettings = ({
         );
         if (productionEnvironment) {
           if (typeof window !== "undefined") {
-            localStorage.setItem(FORMBRICKS_PRODUCT_ID_LS, productionEnvironment.productId);
-
             // Rmove filters when creating a new product
             localStorage.removeItem(FORMBRICKS_SURVEYS_FILTERS_KEY_LS);
           }

apps/web/app/(app)/environments/[environmentId]/components/EnvironmentStorageHandler.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { useEffect } from "react";
+import { FORMBRICKS_ENVIRONMENT_ID_LS } from "@formbricks/lib/localStorage";
+
+interface EnvironmentStorageHandlerProps {
+  environmentId: string;
+}
+
+const EnvironmentStorageHandler = ({ environmentId }: EnvironmentStorageHandlerProps) => {
+  useEffect(() => {
+    localStorage.setItem(FORMBRICKS_ENVIRONMENT_ID_LS, environmentId);
+  }, [environmentId]);
+
+  return null;
+};
+
+export default EnvironmentStorageHandler;

apps/web/app/(app)/environments/[environmentId]/components/MainNavigation.tsx

@@ -32,7 +32,6 @@ import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import { useEffect, useMemo, useState } from "react";
 import { cn } from "@formbricks/lib/cn";
-import { FORMBRICKS_PRODUCT_ID_LS, FORMBRICKS_SURVEYS_FILTERS_KEY_LS } from "@formbricks/lib/localStorage";
 import { getAccessFlags } from "@formbricks/lib/membership/utils";
 import { capitalizeFirstLetter } from "@formbricks/lib/utils/strings";
 import { TEnvironment } from "@formbricks/types/environment";
@@ -119,16 +118,6 @@ export const MainNavigation = ({
     }
   }, [organization]);
 
-  useEffect(() => {
-    if (typeof window === "undefined") return;
-
-    const productId = localStorage.getItem(FORMBRICKS_PRODUCT_ID_LS);
-    const targetProduct = products.find((product) => product.id === productId);
-    if (targetProduct && productId && product && product.id !== targetProduct.id) {
-      router.push(`/products/${targetProduct.id}/`);
-    }
-  }, []);
-
   const sortedOrganizations = useMemo(() => {
     return [...organizations].sort((a, b) => a.name.localeCompare(b.name));
   }, [organizations]);
@@ -155,12 +144,6 @@ export const MainNavigation = ({
   }, [products]);
 
   const handleEnvironmentChangeByProduct = (productId: string) => {
-    if (typeof window !== "undefined") {
-      localStorage.setItem(FORMBRICKS_PRODUCT_ID_LS, productId);
-
-      // Remove filters when switching products
-      localStorage.removeItem(FORMBRICKS_SURVEYS_FILTERS_KEY_LS);
-    }
     router.push(`/products/${productId}/`);
   };
 

apps/web/app/(app)/environments/[environmentId]/layout.tsx

@@ -11,6 +11,7 @@ import { getUser } from "@formbricks/lib/user/service";
 import { AuthorizationError } from "@formbricks/types/errors";
 import { ToasterClient } from "@formbricks/ui/components/ToasterClient";
 import { FormbricksClient } from "../../components/FormbricksClient";
+import EnvironmentStorageHandler from "./components/EnvironmentStorageHandler";
 import { PosthogIdentify } from "./components/PosthogIdentify";
 
 const EnvLayout = async ({ children, params }) => {
@@ -54,6 +55,7 @@ const EnvLayout = async ({ children, params }) => {
         />
         <FormbricksClient session={session} userEmail={user.email} />
         <ToasterClient />
+        <EnvironmentStorageHandler environmentId={params.environmentId} />
         <EnvironmentLayout environmentId={params.environmentId} session={session}>
           {children}
         </EnvironmentLayout>

apps/web/app/ClientEnvironmentRedirect.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+import { FORMBRICKS_ENVIRONMENT_ID_LS } from "@formbricks/lib/localStorage";
+
+interface ClientEnvironmentRedirectProps {
+  environmentId: string;
+}
+
+const ClientEnvironmentRedirect = ({ environmentId }: ClientEnvironmentRedirectProps) => {
+  const router = useRouter();
+
+  useEffect(() => {
+    const lastEnvironmentId = localStorage.getItem(FORMBRICKS_ENVIRONMENT_ID_LS);
+
+    if (lastEnvironmentId) {
+      // Redirect to the last environment the user was in
+      router.push(`/environments/${lastEnvironmentId}`);
+    } else {
+      router.push(`/environments/${environmentId}`);
+    }
+  }, [environmentId, router]);
+
+  return null;
+};
+
+export default ClientEnvironmentRedirect;

apps/web/app/page.tsx

@@ -1,3 +1,4 @@
+import ClientEnvironmentRedirect from "@/app/ClientEnvironmentRedirect";
 import type { Session } from "next-auth";
 import { getServerSession } from "next-auth";
 import { redirect } from "next/navigation";
@@ -42,7 +43,7 @@ const Page = async () => {
     return redirect(`/organizations/${userOrganizations[0].id}/products/new/mode`);
   }
 
-  return redirect(`/environments/${environment.id}`);
+  return <ClientEnvironmentRedirect environmentId={environment.id} />;
 };
 
 export default Page;

packages/lib/localStorage.ts

@@ -1,3 +1,3 @@
 export const FORMBRICKS_SURVEYS_ORIENTATION_KEY_LS = "formbricks-surveys-orientation";
 export const FORMBRICKS_SURVEYS_FILTERS_KEY_LS = "formbricks-surveys-filters";
-export const FORMBRICKS_PRODUCT_ID_LS = "formbricks-product-id";
+export const FORMBRICKS_ENVIRONMENT_ID_LS = "formbricks-environment-id";