fix: sonarqube target

.env.example

@@ -155,8 +155,9 @@ STRIPE_SECRET_KEY=
 STRIPE_WEBHOOK_SECRET=
 
 # Configure Formbricks usage within Formbricks
-FORMBRICKS_API_HOST=
-FORMBRICKS_ENVIRONMENT_ID=
+NEXT_PUBLIC_FORMBRICKS_API_HOST=
+NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID=
+NEXT_PUBLIC_FORMBRICKS_ONBOARDING_SURVEY_ID=
 
 # Oauth credentials for Google sheet integration
 GOOGLE_SHEETS_CLIENT_ID=
@@ -219,8 +220,3 @@ UNKEY_ROOT_KEY=
 # PROMETHEUS_ENABLED=
 # PROMETHEUS_EXPORTER_PORT=
 
-# The SENTRY_DSN is used for error tracking and performance monitoring with Sentry.
-# SENTRY_DSN=
-# The SENTRY_AUTH_TOKEN variable is picked up by the Sentry Build Plugin.
-# It's used automatically by Sentry during the build for authentication when uploading source maps.
-# SENTRY_AUTH_TOKEN=

.github/actions/cache-build-web/action.yml

@@ -8,14 +8,6 @@ on:
         required: false
         default: "0"
 
-inputs:
-  turbo_token:
-    description: "Turborepo token"
-    required: false
-  turbo_team:
-    description: "Turborepo team"
-    required: false
-
 runs:
   using: "composite"
   steps:
@@ -70,8 +62,6 @@ runs:
 
     - run: |
         pnpm build --filter=@formbricks/web...
+
       if: steps.cache-build.outputs.cache-hit != 'true'
       shell: bash
-      env:
-        TURBO_TOKEN: ${{ inputs.turbo_token }}
-        TURBO_TEAM: ${{ inputs.turbo_team }}

.github/copilot-instructions.md

@@ -1,26 +0,0 @@
-# Testing Instructions
-
-When generating test files inside the "/app/web" path, follow these rules:
-
-- Use vitest
-- Ensure 100% code coverage
-- Add as few comments as possible
-- The test file should be located in the same folder as the original file
-- Use the `test` function instead of `it`
-- Follow the same test pattern used for other files in the package where the file is located
-- All imports should be at the top of the file, not inside individual tests
-- For mocking inside "test" blocks use "vi.mocked"
-- Add the original file path to the "test.coverage.include"array in the "apps/web/vite.config.mts" file
-- Don't mock functions that are already mocked in the "apps/web/vitestSetup.ts" file
-  
-If it's a test for a ".tsx" file, follow these extra instructions:
-
-- Add this code inside the "describe" block and before any test:
-
-afterEach(() => {
-    cleanup();
-});
-
-- the "afterEach" function should only have "cleanup()" inside it and should be adde to the "vitest" imports
-- For click events, import userEvent from "@testing-library/user-event"
-- Mock other components that can make the text more complex and but at the same time mocking it wouldn't make the test flaky. It's ok to leave basic and simple components.

.github/workflows/build-web.yml

@@ -4,7 +4,7 @@ on:
 
 permissions:
   contents: read
-
+  
 jobs:
   build:
     name: Build Formbricks-web
@@ -25,5 +25,3 @@ jobs:
         id: cache-build-web
         with:
           e2e_testing_mode: "0"
-          turbo_token: ${{ secrets.TURBO_TOKEN }}
-          turbo_team: ${{ vars.TURBO_TEAM }}

.github/workflows/docker-build-validation.yml

@@ -12,10 +12,6 @@ on:
 permissions:
   contents: read
 
-env:
-  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-  TURBO_TEAM: ${{ vars.TURBO_TEAM }}
-
 jobs:
   validate-docker-build:
     name: Validate Docker Build

.github/workflows/e2e.yml

@@ -16,8 +16,6 @@ on:
 
 env:
   TELEMETRY_DISABLED: 1
-  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-  TURBO_TEAM: ${{ vars.TURBO_TEAM }}
 
 permissions:
   id-token: write

.github/workflows/release-docker-github-experimental.yml

@@ -82,6 +82,8 @@ jobs:
           secrets: |
             database_url=${{ secrets.DUMMY_DATABASE_URL }}
             encryption_key=${{ secrets.DUMMY_ENCRYPTION_KEY }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
 
       # Sign the resulting Docker image digest except on PRs.
       # This will only write to the public Rekor transparency log when the Docker

.github/workflows/release-docker-github.yml

@@ -102,6 +102,8 @@ jobs:
           secrets: |
             database_url=${{ secrets.DUMMY_DATABASE_URL }}
             encryption_key=${{ secrets.DUMMY_ENCRYPTION_KEY }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
 
       # Sign the resulting Docker image digest except on PRs.
       # This will only write to the public Rekor transparency log when the Docker

.github/workflows/sonarqube.yml

@@ -4,7 +4,7 @@ on:
   push:
     branches:
       - main
-  pull_request:
+  pull_request_target:
     types: [opened, synchronize, reopened]
   merge_group:
 permissions:

.gitignore

@@ -72,4 +72,3 @@ infra/terraform/.terraform/
 # IntelliJ IDEA
 /.idea/
 /*.iml
-packages/ios/FormbricksSDK/FormbricksSDK.xcodeproj/project.xcworkspace/xcuserdata

.vscode/settings.json

@@ -1,10 +1,4 @@
 {
-  "javascript.updateImportsOnFileMove.enabled": "always",
-  "sonarlint.connectedMode.project": {
-    "connectionId": "formbricks",
-    "projectKey": "formbricks_formbricks"
-  },
   "typescript.preferences.importModuleSpecifier": "non-relative",
-  "typescript.tsdk": "node_modules/typescript/lib",
-  "typescript.updateImportsOnFileMove.enabled": "always"
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

apps/demo-react-native/package.json

@@ -18,7 +18,7 @@
     "expo-status-bar": "2.0.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-native": "0.76.6",
+    "react-native": "0.78.2",
     "react-native-webview": "13.12.5"
   },
   "devDependencies": {

apps/demo/components/sidebar.tsx

@@ -27,7 +27,7 @@ const secondaryNavigation = [
 
 export function Sidebar(): React.JSX.Element {
   return (
-    <div className="flex grow flex-col overflow-y-auto bg-cyan-700 pt-5 pb-4">
+    <div className="flex grow flex-col overflow-y-auto bg-cyan-700 pb-4 pt-5">
       <nav
         className="mt-5 flex flex-1 flex-col divide-y divide-cyan-800 overflow-y-auto"
         aria-label="Sidebar">
@@ -38,7 +38,7 @@ export function Sidebar(): React.JSX.Element {
               href={item.href}
               className={classNames(
                 item.current ? "bg-cyan-800 text-white" : "text-cyan-100 hover:bg-cyan-600 hover:text-white",
-                "group flex items-center rounded-md px-2 py-2 text-sm leading-6 font-medium"
+                "group flex items-center rounded-md px-2 py-2 text-sm font-medium leading-6"
               )}
               aria-current={item.current ? "page" : undefined}>
               <item.icon className="mr-4 h-6 w-6 shrink-0 text-cyan-200" aria-hidden="true" />
@@ -52,7 +52,7 @@ export function Sidebar(): React.JSX.Element {
               <a
                 key={item.name}
                 href={item.href}
-                className="group flex items-center rounded-md px-2 py-2 text-sm leading-6 font-medium text-cyan-100 hover:bg-cyan-600 hover:text-white">
+                className="group flex items-center rounded-md px-2 py-2 text-sm font-medium leading-6 text-cyan-100 hover:bg-cyan-600 hover:text-white">
                 <item.icon className="mr-4 h-6 w-6 text-cyan-200" aria-hidden="true" />
                 {item.name}
               </a>

apps/demo/package.json

@@ -17,8 +17,8 @@
     "lucide-react": "0.486.0",
     "next": "15.2.4",
     "postcss": "8.5.3",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "tailwindcss": "4.1.3"
   },
   "devDependencies": {

apps/demo/pages/index.tsx

@@ -96,10 +96,10 @@ export default function AppPage(): React.JSX.Element {
             <p className="text-slate-700 dark:text-slate-300">
               Copy the environment ID of your Formbricks app to the env variable in /apps/demo/.env
             </p>
-            <Image src={fbsetup} alt="fb setup" className="mt-4 rounded-xs" priority />
+            <Image src={fbsetup} alt="fb setup" className="rounded-xs mt-4" priority />
 
             <div className="mt-4 flex-col items-start text-sm text-slate-700 sm:flex sm:items-center sm:text-base dark:text-slate-300">
-              <p className="mb-1 sm:mr-2 sm:mb-0">You&apos;re connected with env:</p>
+              <p className="mb-1 sm:mb-0 sm:mr-2">You&apos;re connected with env:</p>
               <div className="flex items-center">
                 <strong className="w-32 truncate sm:w-auto">
                   {process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID}

apps/storybook/package.json

@@ -27,14 +27,14 @@
     "@storybook/react": "8.6.12",
     "@storybook/react-vite": "8.6.12",
     "@storybook/test": "8.6.12",
-    "@typescript-eslint/eslint-plugin": "8.29.1",
-    "@typescript-eslint/parser": "8.29.1",
+    "@typescript-eslint/eslint-plugin": "8.29.0",
+    "@typescript-eslint/parser": "8.29.0",
     "@vitejs/plugin-react": "4.3.4",
     "esbuild": "0.25.2",
     "eslint-plugin-storybook": "0.12.0",
     "prop-types": "15.8.1",
     "storybook": "8.6.12",
     "tsup": "8.4.0",
-    "vite": "6.2.5"
+    "vite": "6.2.4"
   }
 }

apps/web/.eslintrc.js

@@ -1,20 +1,3 @@
 module.exports = {
   extends: ["@formbricks/eslint-config/legacy-next.js"],
-  ignorePatterns: ["**/package.json", "**/tsconfig.json"],
-  overrides: [
-    {
-      files: ["lib/messages/**/*.json"],
-      plugins: ["i18n-json"],
-      rules: {
-        "i18n-json/identical-keys": [
-          "error",
-          {
-            filePath: require("path").join(__dirname, "messages", "en-US.json"),
-            checkExtraKeys: false,
-            checkMissingKeys: true,
-          },
-        ],
-      },
-    },
-  ],
 };

apps/web/.gitignore

@@ -50,4 +50,4 @@ uploads/
 .sentryclirc
 
 # SAML Preloaded Connections
-saml-connection/
+saml-connection/

apps/web/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:22-alpine3.21 AS base
+FROM node:22-alpine3.20@sha256:40be979442621049f40b1d51a26b55e281246b5de4e5f51a18da7beb6e17e3f9 AS base
 
 #
 ## step 1: Prune monorepo
@@ -81,14 +81,13 @@ RUN corepack enable
 RUN apk add --no-cache curl \
     && apk add --no-cache supercronic \
     # && addgroup --system --gid 1001 nodejs \
-    && addgroup -S nextjs \
-    && adduser -S -u 1001 -G nextjs nextjs
+    && adduser --system --uid 1001 nextjs
 
 WORKDIR /home/nextjs
 
 # Ensure no write permissions are assigned to the copied resources
-COPY --from=installer /app/apps/web/.next/standalone ./
-RUN chown -R nextjs:nextjs ./ && chmod -R 755 ./
+COPY --from=installer --chown=nextjs:nextjs /app/apps/web/.next/standalone ./
+RUN chmod -R 755 ./
 
 COPY --from=installer /app/apps/web/next.config.mjs .
 RUN chmod 644 ./next.config.mjs
@@ -96,38 +95,38 @@ RUN chmod 644 ./next.config.mjs
 COPY --from=installer /app/apps/web/package.json .
 RUN chmod 644 ./package.json
 
-COPY --from=installer /app/apps/web/.next/static ./apps/web/.next/static
-RUN chown -R nextjs:nextjs ./apps/web/.next/static && chmod -R 755 ./apps/web/.next/static
+COPY --from=installer --chown=nextjs:nextjs /app/apps/web/.next/static ./apps/web/.next/static
+RUN chmod -R 755 ./apps/web/.next/static
 
-COPY --from=installer /app/apps/web/public ./apps/web/public
-RUN chown -R nextjs:nextjs ./apps/web/public && chmod -R 755 ./apps/web/public
+COPY --from=installer --chown=nextjs:nextjs /app/apps/web/public ./apps/web/public
+RUN chmod -R 755 ./apps/web/public
 
-COPY --from=installer /app/packages/database/schema.prisma ./packages/database/schema.prisma
-RUN chown nextjs:nextjs ./packages/database/schema.prisma && chmod 644 ./packages/database/schema.prisma
+COPY --from=installer --chown=nextjs:nextjs /app/packages/database/schema.prisma ./packages/database/schema.prisma
+RUN chmod 644 ./packages/database/schema.prisma
 
-COPY --from=installer /app/packages/database/package.json ./packages/database/package.json
-RUN chown nextjs:nextjs ./packages/database/package.json && chmod 644 ./packages/database/package.json
+COPY --from=installer --chown=nextjs:nextjs /app/packages/database/package.json ./packages/database/package.json
+RUN chmod 644 ./packages/database/package.json
 
-COPY --from=installer /app/packages/database/migration ./packages/database/migration
-RUN chown -R nextjs:nextjs ./packages/database/migration && chmod -R 755 ./packages/database/migration
+COPY --from=installer --chown=nextjs:nextjs /app/packages/database/migration ./packages/database/migration
+RUN chmod -R 755 ./packages/database/migration
 
-COPY --from=installer /app/packages/database/src ./packages/database/src
-RUN chown -R nextjs:nextjs ./packages/database/src && chmod -R 755 ./packages/database/src
+COPY --from=installer --chown=nextjs:nextjs /app/packages/database/src ./packages/database/src
+RUN chmod -R 755 ./packages/database/src
 
-COPY --from=installer /app/packages/database/node_modules ./packages/database/node_modules
-RUN chown -R nextjs:nextjs ./packages/database/node_modules && chmod -R 755 ./packages/database/node_modules
+COPY --from=installer --chown=nextjs:nextjs /app/packages/database/node_modules ./packages/database/node_modules
+RUN chmod -R 755 ./packages/database/node_modules
 
-COPY --from=installer /app/packages/logger/dist ./packages/database/node_modules/@formbricks/logger/dist
-RUN chown -R nextjs:nextjs ./packages/database/node_modules/@formbricks/logger/dist && chmod -R 755 ./packages/database/node_modules/@formbricks/logger/dist
+COPY --from=installer --chown=nextjs:nextjs /app/packages/logger/dist ./packages/database/node_modules/@formbricks/logger/dist
+RUN chmod -R 755 ./packages/database/node_modules/@formbricks/logger/dist
 
-COPY --from=installer /app/node_modules/@prisma/client ./node_modules/@prisma/client
-RUN chown -R nextjs:nextjs ./node_modules/@prisma/client && chmod -R 755 ./node_modules/@prisma/client
+COPY --from=installer --chown=nextjs:nextjs /app/node_modules/@prisma/client ./node_modules/@prisma/client
+RUN chmod -R 755 ./node_modules/@prisma/client
 
-COPY --from=installer /app/node_modules/.prisma ./node_modules/.prisma
-RUN chown -R nextjs:nextjs ./node_modules/.prisma && chmod -R 755 ./node_modules/.prisma
+COPY --from=installer --chown=nextjs:nextjs /app/node_modules/.prisma ./node_modules/.prisma
+RUN chmod -R 755 ./node_modules/.prisma
 
-COPY --from=installer /prisma_version.txt .
-RUN chown nextjs:nextjs ./prisma_version.txt && chmod 644 ./prisma_version.txt
+COPY --from=installer --chown=nextjs:nextjs /prisma_version.txt .
+RUN chmod 644 ./prisma_version.txt
 
 COPY /docker/cronjobs /app/docker/cronjobs
 RUN chmod -R 755 /app/docker/cronjobs

apps/web/app/(app)/(onboarding)/environments/[environmentId]/connect/components/ConnectWithFormbricks.tsx

@@ -1,11 +1,11 @@
 "use client";
 
-import { cn } from "@/lib/cn";
 import { Button } from "@/modules/ui/components/button";
 import { useTranslate } from "@tolgee/react";
 import { ArrowRight } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
+import { cn } from "@formbricks/lib/cn";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TProjectConfigChannel } from "@formbricks/types/project";
 import { OnboardingSetupInstructions } from "./OnboardingSetupInstructions";

apps/web/app/(app)/(onboarding)/environments/[environmentId]/connect/page.tsx

@@ -1,12 +1,12 @@
 import { ConnectWithFormbricks } from "@/app/(app)/(onboarding)/environments/[environmentId]/connect/components/ConnectWithFormbricks";
-import { WEBAPP_URL } from "@/lib/constants";
-import { getEnvironment } from "@/lib/environment/service";
-import { getProjectByEnvironmentId } from "@/lib/project/service";
 import { Button } from "@/modules/ui/components/button";
 import { Header } from "@/modules/ui/components/header";
 import { getTranslate } from "@/tolgee/server";
 import { XIcon } from "lucide-react";
 import Link from "next/link";
+import { WEBAPP_URL } from "@formbricks/lib/constants";
+import { getEnvironment } from "@formbricks/lib/environment/service";
+import { getProjectByEnvironmentId } from "@formbricks/lib/project/service";
 
 interface ConnectPageProps {
   params: Promise<{
@@ -44,7 +44,7 @@ const Page = async (props: ConnectPageProps) => {
         channel={channel}
       />
       <Button
-        className="absolute top-5 right-5 !mt-0 text-slate-500 hover:text-slate-700"
+        className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
         variant="ghost"
         asChild>
         <Link href={`/environments/${environment.id}`}>

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

@@ -1,7 +1,7 @@
-import { hasUserEnvironmentAccess } from "@/lib/environment/auth";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 import { getServerSession } from "next-auth";
 import { redirect } from "next/navigation";
+import { hasUserEnvironmentAccess } from "@formbricks/lib/environment/auth";
 import { AuthorizationError } from "@formbricks/types/errors";
 
 const OnboardingLayout = async (props) => {

apps/web/app/(app)/(onboarding)/environments/[environmentId]/xm-templates/lib/utils.ts

@@ -1,4 +1,4 @@
-import { replaceQuestionPresetPlaceholders } from "@/lib/utils/templates";
+import { replaceQuestionPresetPlaceholders } from "@formbricks/lib/utils/templates";
 import { TProject } from "@formbricks/types/project";
 import { TXMTemplate } from "@formbricks/types/templates";
 

apps/web/app/(app)/(onboarding)/environments/[environmentId]/xm-templates/page.tsx

@@ -1,7 +1,4 @@
 import { XMTemplateList } from "@/app/(app)/(onboarding)/environments/[environmentId]/xm-templates/components/XMTemplateList";
-import { getEnvironment } from "@/lib/environment/service";
-import { getProjectByEnvironmentId, getUserProjects } from "@/lib/project/service";
-import { getUser } from "@/lib/user/service";
 import { getOrganizationIdFromEnvironmentId } from "@/lib/utils/helper";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 import { Button } from "@/modules/ui/components/button";
@@ -10,6 +7,9 @@ import { getTranslate } from "@/tolgee/server";
 import { XIcon } from "lucide-react";
 import { getServerSession } from "next-auth";
 import Link from "next/link";
+import { getEnvironment } from "@formbricks/lib/environment/service";
+import { getProjectByEnvironmentId, getUserProjects } from "@formbricks/lib/project/service";
+import { getUser } from "@formbricks/lib/user/service";
 
 interface XMTemplatePageProps {
   params: Promise<{
@@ -49,7 +49,7 @@ const Page = async (props: XMTemplatePageProps) => {
       <XMTemplateList project={project} user={user} environmentId={environment.id} />
       {projects.length >= 2 && (
         <Button
-          className="absolute top-5 right-5 !mt-0 text-slate-500 hover:text-slate-700"
+          className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
           variant="ghost"
           asChild>
           <Link href={`/environments/${environment.id}/surveys`}>

apps/web/app/(app)/(onboarding)/lib/onboarding.ts

@@ -1,12 +1,12 @@
 "use server";
 
 import { TOrganizationTeam } from "@/app/(app)/(onboarding)/types/onboarding";
-import { cache } from "@/lib/cache";
 import { teamCache } from "@/lib/cache/team";
-import { validateInputs } from "@/lib/utils/validate";
 import { Prisma } from "@prisma/client";
 import { cache as reactCache } from "react";
 import { prisma } from "@formbricks/database";
+import { cache } from "@formbricks/lib/cache";
+import { validateInputs } from "@formbricks/lib/utils/validate";
 import { ZId } from "@formbricks/types/common";
 import { DatabaseError } from "@formbricks/types/errors";
 

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/landing/components/landing-sidebar.tsx

@@ -2,8 +2,6 @@
 
 import { formbricksLogout } from "@/app/lib/formbricks";
 import FBLogo from "@/images/formbricks-wordmark.svg";
-import { cn } from "@/lib/cn";
-import { capitalizeFirstLetter } from "@/lib/utils/strings";
 import { CreateOrganizationModal } from "@/modules/organization/components/CreateOrganizationModal";
 import { ProfileAvatar } from "@/modules/ui/components/avatars";
 import {
@@ -26,6 +24,8 @@ import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useMemo, useState } from "react";
+import { cn } from "@formbricks/lib/cn";
+import { capitalizeFirstLetter } from "@formbricks/lib/utils/strings";
 import { TOrganization } from "@formbricks/types/organizations";
 import { TUser } from "@formbricks/types/user";
 
@@ -112,7 +112,7 @@ export const LandingSidebar = ({
             {/* Dropdown Items */}
 
             {dropdownNavigation.map((link) => (
-              <Link id={link.href} href={link.href} target={link.target} className="flex w-full items-center">
+              <Link href={link.href} target={link.target} className="flex w-full items-center">
                 <DropdownMenuItem>
                   <link.icon className="mr-2 h-4 w-4" strokeWidth={1.5} />
                   {link.label}

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/landing/layout.tsx

@@ -1,9 +1,9 @@
-import { getEnvironments } from "@/lib/environment/service";
-import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
-import { getUserProjects } from "@/lib/project/service";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 import { getServerSession } from "next-auth";
 import { notFound, redirect } from "next/navigation";
+import { getEnvironments } from "@formbricks/lib/environment/service";
+import { getMembershipByUserIdOrganizationId } from "@formbricks/lib/membership/service";
+import { getUserProjects } from "@formbricks/lib/project/service";
 
 const LandingLayout = async (props) => {
   const params = await props.params;

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/landing/page.tsx

@@ -1,11 +1,11 @@
 import { LandingSidebar } from "@/app/(app)/(onboarding)/organizations/[organizationId]/landing/components/landing-sidebar";
-import { getOrganizationsByUserId } from "@/lib/organization/service";
-import { getUser } from "@/lib/user/service";
 import { getEnterpriseLicense } from "@/modules/ee/license-check/lib/utils";
 import { getOrganizationAuth } from "@/modules/organization/lib/utils";
 import { Header } from "@/modules/ui/components/header";
 import { getTranslate } from "@/tolgee/server";
 import { notFound, redirect } from "next/navigation";
+import { getOrganizationsByUserId } from "@formbricks/lib/organization/service";
+import { getUser } from "@formbricks/lib/user/service";
 
 const Page = async (props) => {
   const params = await props.params;

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/layout.test.tsx

@@ -1,19 +1,19 @@
-import { canUserAccessOrganization } from "@/lib/organization/auth";
-import { getOrganization } from "@/lib/organization/service";
-import { getUser } from "@/lib/user/service";
 import "@testing-library/jest-dom/vitest";
 import { act, cleanup, render, screen } from "@testing-library/react";
 import { getServerSession } from "next-auth";
 import { redirect } from "next/navigation";
 import React from "react";
-import { beforeEach, describe, expect, test, vi } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { canUserAccessOrganization } from "@formbricks/lib/organization/auth";
+import { getOrganization } from "@formbricks/lib/organization/service";
+import { getUser } from "@formbricks/lib/user/service";
 import { TOrganization } from "@formbricks/types/organizations";
 import { TUser } from "@formbricks/types/user";
 import ProjectOnboardingLayout from "./layout";
 
 // Mock all the modules and functions that this layout uses:
 
-vi.mock("@/lib/constants", () => ({
+vi.mock("@formbricks/lib/constants", () => ({
   IS_FORMBRICKS_CLOUD: false,
   POSTHOG_API_KEY: "mock-posthog-api-key",
   POSTHOG_HOST: "mock-posthog-host",
@@ -42,13 +42,13 @@ vi.mock("next-auth", () => ({
 vi.mock("next/navigation", () => ({
   redirect: vi.fn(),
 }));
-vi.mock("@/lib/organization/auth", () => ({
+vi.mock("@formbricks/lib/organization/auth", () => ({
   canUserAccessOrganization: vi.fn(),
 }));
-vi.mock("@/lib/organization/service", () => ({
+vi.mock("@formbricks/lib/organization/service", () => ({
   getOrganization: vi.fn(),
 }));
-vi.mock("@/lib/user/service", () => ({
+vi.mock("@formbricks/lib/user/service", () => ({
   getUser: vi.fn(),
 }));
 vi.mock("@/tolgee/server", () => ({
@@ -71,7 +71,7 @@ describe("ProjectOnboardingLayout", () => {
     cleanup();
   });
 
-  test("redirects to /auth/login if there is no session", async () => {
+  it("redirects to /auth/login if there is no session", async () => {
     // Mock no session
     vi.mocked(getServerSession).mockResolvedValueOnce(null);
 
@@ -85,7 +85,7 @@ describe("ProjectOnboardingLayout", () => {
     expect(layoutElement).toBeUndefined();
   });
 
-  test("throws an error if user does not exist", async () => {
+  it("throws an error if user does not exist", async () => {
     vi.mocked(getServerSession).mockResolvedValueOnce({
       user: { id: "user-123" },
     });
@@ -99,7 +99,7 @@ describe("ProjectOnboardingLayout", () => {
     ).rejects.toThrow("common.user_not_found");
   });
 
-  test("throws AuthorizationError if user cannot access organization", async () => {
+  it("throws AuthorizationError if user cannot access organization", async () => {
     vi.mocked(getServerSession).mockResolvedValueOnce({ user: { id: "user-123" } });
     vi.mocked(getUser).mockResolvedValueOnce({ id: "user-123" } as TUser);
     vi.mocked(canUserAccessOrganization).mockResolvedValueOnce(false);
@@ -112,7 +112,7 @@ describe("ProjectOnboardingLayout", () => {
     ).rejects.toThrow("common.not_authorized");
   });
 
-  test("throws an error if organization does not exist", async () => {
+  it("throws an error if organization does not exist", async () => {
     vi.mocked(getServerSession).mockResolvedValueOnce({ user: { id: "user-123" } });
     vi.mocked(getUser).mockResolvedValueOnce({ id: "user-123" } as TUser);
     vi.mocked(canUserAccessOrganization).mockResolvedValueOnce(true);
@@ -126,7 +126,7 @@ describe("ProjectOnboardingLayout", () => {
     ).rejects.toThrow("common.organization_not_found");
   });
 
-  test("renders child content plus PosthogIdentify & ToasterClient if everything is valid", async () => {
+  it("renders child content plus PosthogIdentify & ToasterClient if everything is valid", async () => {
     // Provide valid data
     vi.mocked(getServerSession).mockResolvedValueOnce({ user: { id: "user-123" } });
     vi.mocked(getUser).mockResolvedValueOnce({ id: "user-123", name: "Test User" } as TUser);

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/layout.tsx

@@ -1,13 +1,13 @@
 import { PosthogIdentify } from "@/app/(app)/environments/[environmentId]/components/PosthogIdentify";
-import { IS_POSTHOG_CONFIGURED } from "@/lib/constants";
-import { canUserAccessOrganization } from "@/lib/organization/auth";
-import { getOrganization } from "@/lib/organization/service";
-import { getUser } from "@/lib/user/service";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 import { ToasterClient } from "@/modules/ui/components/toaster-client";
 import { getTranslate } from "@/tolgee/server";
 import { getServerSession } from "next-auth";
 import { redirect } from "next/navigation";
+import { IS_POSTHOG_CONFIGURED } from "@formbricks/lib/constants";
+import { canUserAccessOrganization } from "@formbricks/lib/organization/auth";
+import { getOrganization } from "@formbricks/lib/organization/service";
+import { getUser } from "@formbricks/lib/user/service";
 import { AuthorizationError } from "@formbricks/types/errors";
 
 const ProjectOnboardingLayout = async (props) => {

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/projects/new/channel/page.tsx

@@ -1,5 +1,4 @@
 import { OnboardingOptionsContainer } from "@/app/(app)/(onboarding)/organizations/components/OnboardingOptionsContainer";
-import { getUserProjects } from "@/lib/project/service";
 import { getOrganizationAuth } from "@/modules/organization/lib/utils";
 import { Button } from "@/modules/ui/components/button";
 import { Header } from "@/modules/ui/components/header";
@@ -7,6 +6,7 @@ import { getTranslate } from "@/tolgee/server";
 import { PictureInPicture2Icon, SendIcon, XIcon } from "lucide-react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
+import { getUserProjects } from "@formbricks/lib/project/service";
 
 interface ChannelPageProps {
   params: Promise<{
@@ -50,7 +50,7 @@ const Page = async (props: ChannelPageProps) => {
       <OnboardingOptionsContainer options={channelOptions} />
       {projects.length >= 1 && (
         <Button
-          className="absolute top-5 right-5 !mt-0 text-slate-500 hover:text-slate-700"
+          className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
           variant="ghost"
           asChild>
           <Link href={"/"}>

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/projects/new/layout.tsx

@@ -1,12 +1,12 @@
-import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
-import { getAccessFlags } from "@/lib/membership/utils";
-import { getOrganization } from "@/lib/organization/service";
-import { getOrganizationProjectsCount } from "@/lib/project/service";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 import { getOrganizationProjectsLimit } from "@/modules/ee/license-check/lib/utils";
 import { getTranslate } from "@/tolgee/server";
 import { getServerSession } from "next-auth";
 import { notFound, redirect } from "next/navigation";
+import { getMembershipByUserIdOrganizationId } from "@formbricks/lib/membership/service";
+import { getAccessFlags } from "@formbricks/lib/membership/utils";
+import { getOrganization } from "@formbricks/lib/organization/service";
+import { getOrganizationProjectsCount } from "@formbricks/lib/project/service";
 
 const OnboardingLayout = async (props) => {
   const params = await props.params;

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/projects/new/mode/page.tsx

@@ -1,5 +1,4 @@
 import { OnboardingOptionsContainer } from "@/app/(app)/(onboarding)/organizations/components/OnboardingOptionsContainer";
-import { getUserProjects } from "@/lib/project/service";
 import { getOrganizationAuth } from "@/modules/organization/lib/utils";
 import { Button } from "@/modules/ui/components/button";
 import { Header } from "@/modules/ui/components/header";
@@ -7,6 +6,7 @@ import { getTranslate } from "@/tolgee/server";
 import { HeartIcon, ListTodoIcon, XIcon } from "lucide-react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
+import { getUserProjects } from "@formbricks/lib/project/service";
 
 interface ModePageProps {
   params: Promise<{
@@ -47,7 +47,7 @@ const Page = async (props: ModePageProps) => {
       <OnboardingOptionsContainer options={channelOptions} />
       {projects.length >= 1 && (
         <Button
-          className="absolute top-5 right-5 !mt-0 text-slate-500 hover:text-slate-700"
+          className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
           variant="ghost"
           asChild>
           <Link href={"/"}>

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

@@ -2,7 +2,6 @@
 
 import { createProjectAction } from "@/app/(app)/environments/[environmentId]/actions";
 import { previewSurvey } from "@/app/lib/templates";
-import { FORMBRICKS_SURVEYS_FILTERS_KEY_LS } from "@/lib/localStorage";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { TOrganizationTeam } from "@/modules/ee/teams/project-teams/types/team";
 import { CreateTeamModal } from "@/modules/ee/teams/team-list/components/create-team-modal";
@@ -27,6 +26,7 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "react-hot-toast";
+import { FORMBRICKS_SURVEYS_FILTERS_KEY_LS } from "@formbricks/lib/localStorage";
 import {
   TProjectConfigChannel,
   TProjectConfigIndustry,
@@ -225,7 +225,7 @@ export const ProjectSettings = ({
             alt="Logo"
             width={256}
             height={56}
-            className="absolute top-2 left-2 -mb-6 h-20 w-auto max-w-64 rounded-lg border object-contain p-1"
+            className="absolute left-2 top-2 -mb-6 h-20 w-auto max-w-64 rounded-lg border object-contain p-1"
           />
         )}
         <p className="text-sm text-slate-400">{t("common.preview")}</p>

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/projects/new/settings/page.tsx

@@ -1,7 +1,5 @@
 import { getTeamsByOrganizationId } from "@/app/(app)/(onboarding)/lib/onboarding";
 import { ProjectSettings } from "@/app/(app)/(onboarding)/organizations/[organizationId]/projects/new/settings/components/ProjectSettings";
-import { DEFAULT_BRAND_COLOR } from "@/lib/constants";
-import { getUserProjects } from "@/lib/project/service";
 import { getRoleManagementPermission } from "@/modules/ee/license-check/lib/utils";
 import { getOrganizationAuth } from "@/modules/organization/lib/utils";
 import { Button } from "@/modules/ui/components/button";
@@ -10,6 +8,8 @@ import { getTranslate } from "@/tolgee/server";
 import { XIcon } from "lucide-react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
+import { DEFAULT_BRAND_COLOR } from "@formbricks/lib/constants";
+import { getUserProjects } from "@formbricks/lib/project/service";
 import { TProjectConfigChannel, TProjectConfigIndustry, TProjectMode } from "@formbricks/types/project";
 
 interface ProjectSettingsPageProps {
@@ -65,7 +65,7 @@ const Page = async (props: ProjectSettingsPageProps) => {
       />
       {projects.length >= 1 && (
         <Button
-          className="absolute top-5 right-5 !mt-0 text-slate-500 hover:text-slate-700"
+          className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
           variant="ghost"
           asChild>
           <Link href={"/"}>

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/layout.test.tsx

@@ -1,120 +1,191 @@
-import { getEnvironment } from "@/lib/environment/service";
-import { environmentIdLayoutChecks } from "@/modules/environments/lib/utils";
-import { cleanup, render, screen } from "@testing-library/react";
-import { Session } from "next-auth";
+import "@testing-library/jest-dom/vitest";
+import { act, cleanup, render, screen } from "@testing-library/react";
+import { getServerSession } from "next-auth";
 import { redirect } from "next/navigation";
-import { afterEach, describe, expect, test, vi } from "vitest";
+import React from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { hasUserEnvironmentAccess } from "@formbricks/lib/environment/auth";
+import { getEnvironment } from "@formbricks/lib/environment/service";
+import { getOrganizationByEnvironmentId } from "@formbricks/lib/organization/service";
+import { getUser } from "@formbricks/lib/user/service";
 import { TEnvironment } from "@formbricks/types/environment";
+import { AuthorizationError } from "@formbricks/types/errors";
 import { TOrganization } from "@formbricks/types/organizations";
 import { TUser } from "@formbricks/types/user";
 import SurveyEditorEnvironmentLayout from "./layout";
 
-// Mock sub-components to render identifiable elements
-vi.mock("@/modules/ui/components/environmentId-base-layout", () => ({
-  EnvironmentIdBaseLayout: ({ children, environmentId }: any) => (
-    <div data-testid="EnvironmentIdBaseLayout">
-      {environmentId}
-      {children}
-    </div>
-  ),
-}));
-vi.mock("@/modules/ui/components/dev-environment-banner", () => ({
-  DevEnvironmentBanner: ({ environment }: any) => (
-    <div data-testid="DevEnvironmentBanner">{environment.id}</div>
-  ),
+// mock all dependencies
+
+vi.mock("@formbricks/lib/constants", () => ({
+  IS_FORMBRICKS_CLOUD: false,
+  POSTHOG_API_KEY: "mock-posthog-api-key",
+  POSTHOG_HOST: "mock-posthog-host",
+  IS_POSTHOG_CONFIGURED: true,
+  ENCRYPTION_KEY: "mock-encryption-key",
+  ENTERPRISE_LICENSE_KEY: "mock-enterprise-license-key",
+  GITHUB_ID: "mock-github-id",
+  GITHUB_SECRET: "test-githubID",
+  GOOGLE_CLIENT_ID: "test-google-client-id",
+  GOOGLE_CLIENT_SECRET: "test-google-client-secret",
+  AZUREAD_CLIENT_ID: "test-azuread-client-id",
+  AZUREAD_CLIENT_SECRET: "test-azure",
+  AZUREAD_TENANT_ID: "test-azuread-tenant-id",
+  OIDC_DISPLAY_NAME: "test-oidc-display-name",
+  OIDC_CLIENT_ID: "test-oidc-client-id",
+  OIDC_ISSUER: "test-oidc-issuer",
+  OIDC_CLIENT_SECRET: "test-oidc-client-secret",
+  OIDC_SIGNING_ALGORITHM: "test-oidc-signing-algorithm",
+  WEBAPP_URL: "test-webapp-url",
+  IS_PRODUCTION: false,
 }));
 
-// Mocks for dependencies
-vi.mock("@/modules/environments/lib/utils", () => ({
-  environmentIdLayoutChecks: vi.fn(),
-}));
-vi.mock("@/lib/environment/service", () => ({
-  getEnvironment: vi.fn(),
+vi.mock("next-auth", () => ({
+  getServerSession: vi.fn(),
 }));
 vi.mock("next/navigation", () => ({
   redirect: vi.fn(),
 }));
+vi.mock("@formbricks/lib/environment/auth", () => ({
+  hasUserEnvironmentAccess: vi.fn(),
+}));
+vi.mock("@formbricks/lib/environment/service", () => ({
+  getEnvironment: vi.fn(),
+}));
+vi.mock("@formbricks/lib/organization/service", () => ({
+  getOrganizationByEnvironmentId: vi.fn(),
+}));
+vi.mock("@formbricks/lib/user/service", () => ({
+  getUser: vi.fn(),
+}));
+vi.mock("@/tolgee/server", () => ({
+  getTranslate: vi.fn(() => {
+    return (key: string) => key; // trivial translator returning the key
+  }),
+}));
+
+// mock child components rendered by the layout:
+vi.mock("@/app/(app)/components/FormbricksClient", () => ({
+  FormbricksClient: () => <div data-testid="formbricks-client" />,
+}));
+vi.mock("@/app/(app)/environments/[environmentId]/components/PosthogIdentify", () => ({
+  PosthogIdentify: () => <div data-testid="posthog-identify" />,
+}));
+vi.mock("@/modules/ui/components/toaster-client", () => ({
+  ToasterClient: () => <div data-testid="mock-toaster" />,
+}));
+vi.mock("@/modules/ui/components/dev-environment-banner", () => ({
+  DevEnvironmentBanner: ({ environment }: { environment: TEnvironment }) => (
+    <div data-testid="dev-environment-banner">{environment?.id || "no-env"}</div>
+  ),
+}));
+vi.mock("@/app/(app)/environments/[environmentId]/components/ResponseFilterContext", () => ({
+  ResponseFilterProvider: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="mock-response-filter-provider">{children}</div>
+  ),
+}));
 
 describe("SurveyEditorEnvironmentLayout", () => {
-  afterEach(() => {
+  beforeEach(() => {
     cleanup();
     vi.clearAllMocks();
   });
 
-  test("renders successfully when environment is found", async () => {
-    vi.mocked(environmentIdLayoutChecks).mockResolvedValueOnce({
-      t: ((key: string) => key) as any, // Mock translation function, we don't need to implement it for the test
-      session: { user: { id: "user1" } } as Session,
-      user: { id: "user1", email: "user1@example.com" } as TUser,
-      organization: { id: "org1", name: "Org1", billing: {} } as TOrganization,
-    });
-    vi.mocked(getEnvironment).mockResolvedValueOnce({ id: "env1" } as TEnvironment);
+  it("redirects to /auth/login if there is no session", async () => {
+    // Mock no session
+    vi.mocked(getServerSession).mockResolvedValueOnce(null);
 
-    const result = await SurveyEditorEnvironmentLayout({
-      params: Promise.resolve({ environmentId: "env1" }),
-      children: <div data-testid="child">Survey Editor Content</div>,
+    const layoutElement = await SurveyEditorEnvironmentLayout({
+      params: { environmentId: "env-123" },
+      children: <div data-testid="child-content">Hello!</div>,
     });
 
-    render(result);
-
-    expect(screen.getByTestId("EnvironmentIdBaseLayout")).toHaveTextContent("env1");
-    expect(screen.getByTestId("DevEnvironmentBanner")).toHaveTextContent("env1");
-    expect(screen.getByTestId("child")).toHaveTextContent("Survey Editor Content");
+    expect(redirect).toHaveBeenCalledWith("/auth/login");
+    // No JSX is returned after redirect
+    expect(layoutElement).toBeUndefined();
   });
 
-  test("throws an error when environment is not found", async () => {
-    vi.mocked(environmentIdLayoutChecks).mockResolvedValueOnce({
-      t: ((key: string) => key) as any,
-      session: { user: { id: "user1" } } as Session,
-      user: { id: "user1", email: "user1@example.com" } as TUser,
-      organization: { id: "org1", name: "Org1", billing: {} } as TOrganization,
-    });
+  it("throws error if user does not exist in DB", async () => {
+    vi.mocked(getServerSession).mockResolvedValueOnce({ user: { id: "user-123" } });
+    vi.mocked(getUser).mockResolvedValueOnce(null); // user not found
+
+    await expect(
+      SurveyEditorEnvironmentLayout({
+        params: { environmentId: "env-123" },
+        children: <div data-testid="child-content">Hello!</div>,
+      })
+    ).rejects.toThrow("common.user_not_found");
+  });
+
+  it("throws AuthorizationError if user does not have environment access", async () => {
+    vi.mocked(getServerSession).mockResolvedValueOnce({ user: { id: "user-123" } });
+    vi.mocked(getUser).mockResolvedValueOnce({ id: "user-123", email: "test@example.com" } as TUser);
+    vi.mocked(hasUserEnvironmentAccess).mockResolvedValueOnce(false);
+
+    await expect(
+      SurveyEditorEnvironmentLayout({
+        params: { environmentId: "env-123" },
+        children: <div>Child</div>,
+      })
+    ).rejects.toThrow(AuthorizationError);
+  });
+
+  it("throws if no organization is found", async () => {
+    vi.mocked(getServerSession).mockResolvedValueOnce({ user: { id: "user-123" } });
+    vi.mocked(getUser).mockResolvedValueOnce({ id: "user-123" } as TUser);
+    vi.mocked(hasUserEnvironmentAccess).mockResolvedValueOnce(true);
+    vi.mocked(getOrganizationByEnvironmentId).mockResolvedValueOnce(null);
+
+    await expect(
+      SurveyEditorEnvironmentLayout({
+        params: { environmentId: "env-123" },
+        children: <div data-testid="child-content">Hello from children!</div>,
+      })
+    ).rejects.toThrow("common.organization_not_found");
+  });
+
+  it("throws if no environment is found", async () => {
+    vi.mocked(getServerSession).mockResolvedValueOnce({ user: { id: "user-123" } });
+    vi.mocked(getUser).mockResolvedValueOnce({ id: "user-123" } as TUser);
+    vi.mocked(hasUserEnvironmentAccess).mockResolvedValueOnce(true);
+    vi.mocked(getOrganizationByEnvironmentId).mockResolvedValueOnce({ id: "org-999" } as TOrganization);
     vi.mocked(getEnvironment).mockResolvedValueOnce(null);
 
     await expect(
       SurveyEditorEnvironmentLayout({
-        params: Promise.resolve({ environmentId: "env1" }),
-        children: <div>Content</div>,
+        params: { environmentId: "env-123" },
+        children: <div>Child</div>,
       })
     ).rejects.toThrow("common.environment_not_found");
   });
 
-  test("calls redirect when session is null", async () => {
-    vi.mocked(environmentIdLayoutChecks).mockResolvedValueOnce({
-      t: ((key: string) => key) as any,
-      session: undefined as unknown as Session,
-      user: undefined as unknown as TUser,
-      organization: { id: "org1", name: "Org1", billing: {} } as TOrganization,
-    });
-    vi.mocked(redirect).mockImplementationOnce(() => {
-      throw new Error("Redirect called");
+  it("renders environment layout if everything is valid", async () => {
+    // Provide all valid data
+    vi.mocked(getServerSession).mockResolvedValueOnce({ user: { id: "user-123" } });
+    vi.mocked(getUser).mockResolvedValueOnce({ id: "user-123", email: "test@example.com" } as TUser);
+    vi.mocked(hasUserEnvironmentAccess).mockResolvedValueOnce(true);
+    vi.mocked(getOrganizationByEnvironmentId).mockResolvedValueOnce({ id: "org-999" } as TOrganization);
+    vi.mocked(getEnvironment).mockResolvedValueOnce({
+      id: "env-123",
+      name: "My Test Environment",
+    } as unknown as TEnvironment);
+
+    // Because it's an async server component, we typically wrap in act(...)
+    let layoutElement: React.ReactNode;
+
+    await act(async () => {
+      layoutElement = await SurveyEditorEnvironmentLayout({
+        params: { environmentId: "env-123" },
+        children: <div data-testid="child-content">Hello from children!</div>,
+      });
+      render(layoutElement);
     });
 
-    await expect(
-      SurveyEditorEnvironmentLayout({
-        params: Promise.resolve({ environmentId: "env1" }),
-        children: <div>Content</div>,
-      })
-    ).rejects.toThrow("Redirect called");
-  });
-
-  test("throws error if user is null", async () => {
-    vi.mocked(environmentIdLayoutChecks).mockResolvedValueOnce({
-      t: ((key: string) => key) as any,
-      session: { user: { id: "user1" } } as Session,
-      user: undefined as unknown as TUser,
-      organization: { id: "org1", name: "Org1", billing: {} } as TOrganization,
-    });
-
-    vi.mocked(redirect).mockImplementationOnce(() => {
-      throw new Error("Redirect called");
-    });
-
-    await expect(
-      SurveyEditorEnvironmentLayout({
-        params: Promise.resolve({ environmentId: "env1" }),
-        children: <div>Content</div>,
-      })
-    ).rejects.toThrow("common.user_not_found");
+    // Now confirm we got the child plus all the mocked sub-components
+    expect(screen.getByTestId("child-content")).toHaveTextContent("Hello from children!");
+    expect(screen.getByTestId("posthog-identify")).toBeInTheDocument();
+    expect(screen.getByTestId("formbricks-client")).toBeInTheDocument();
+    expect(screen.getByTestId("mock-toaster")).toBeInTheDocument();
+    expect(screen.getByTestId("mock-response-filter-provider")).toBeInTheDocument();
+    expect(screen.getByTestId("dev-environment-banner")).toHaveTextContent("env-123");
   });
 });

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

@@ -1,24 +1,46 @@
-import { getEnvironment } from "@/lib/environment/service";
-import { environmentIdLayoutChecks } from "@/modules/environments/lib/utils";
+import { FormbricksClient } from "@/app/(app)/components/FormbricksClient";
+import { PosthogIdentify } from "@/app/(app)/environments/[environmentId]/components/PosthogIdentify";
+import { ResponseFilterProvider } from "@/app/(app)/environments/[environmentId]/components/ResponseFilterContext";
+import { authOptions } from "@/modules/auth/lib/authOptions";
 import { DevEnvironmentBanner } from "@/modules/ui/components/dev-environment-banner";
-import { EnvironmentIdBaseLayout } from "@/modules/ui/components/environmentId-base-layout";
+import { ToasterClient } from "@/modules/ui/components/toaster-client";
+import { getTranslate } from "@/tolgee/server";
+import { getServerSession } from "next-auth";
 import { redirect } from "next/navigation";
+import { IS_POSTHOG_CONFIGURED } from "@formbricks/lib/constants";
+import { hasUserEnvironmentAccess } from "@formbricks/lib/environment/auth";
+import { getEnvironment } from "@formbricks/lib/environment/service";
+import { getOrganizationByEnvironmentId } from "@formbricks/lib/organization/service";
+import { getUser } from "@formbricks/lib/user/service";
+import { AuthorizationError } from "@formbricks/types/errors";
 
 const SurveyEditorEnvironmentLayout = async (props) => {
   const params = await props.params;
 
   const { children } = props;
 
-  const { t, session, user, organization } = await environmentIdLayoutChecks(params.environmentId);
+  const t = await getTranslate();
+  const session = await getServerSession(authOptions);
 
-  if (!session) {
+  if (!session?.user) {
     return redirect(`/auth/login`);
   }
 
+  const user = await getUser(session.user.id);
   if (!user) {
     throw new Error(t("common.user_not_found"));
   }
 
+  const hasAccess = await hasUserEnvironmentAccess(session.user.id, params.environmentId);
+  if (!hasAccess) {
+    throw new AuthorizationError(t("common.not_authorized"));
+  }
+
+  const organization = await getOrganizationByEnvironmentId(params.environmentId);
+  if (!organization) {
+    throw new Error(t("common.organization_not_found"));
+  }
+
   const environment = await getEnvironment(params.environmentId);
 
   if (!environment) {
@@ -26,16 +48,23 @@ const SurveyEditorEnvironmentLayout = async (props) => {
   }
 
   return (
-    <EnvironmentIdBaseLayout
-      environmentId={params.environmentId}
-      session={session}
-      user={user}
-      organization={organization}>
+    <ResponseFilterProvider>
+      <PosthogIdentify
+        session={session}
+        user={user}
+        environmentId={params.environmentId}
+        organizationId={organization.id}
+        organizationName={organization.name}
+        organizationBilling={organization.billing}
+        isPosthogEnabled={IS_POSTHOG_CONFIGURED}
+      />
+      <FormbricksClient userId={user.id} email={user.email} />
+      <ToasterClient />
       <div className="flex h-screen flex-col">
         <DevEnvironmentBanner environment={environment} />
         <div className="h-full overflow-y-auto bg-slate-50">{children}</div>
       </div>
-    </EnvironmentIdBaseLayout>
+    </ResponseFilterProvider>
   );
 };
 

apps/web/app/(app)/components/FormbricksClient.test.tsx

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { describe, expect, test, vi } from "vitest";
+import { afterEach, describe, expect, test, vi } from "vitest";
 import formbricks from "@formbricks/js";
 import { FormbricksClient } from "./FormbricksClient";
 
@@ -9,6 +9,14 @@ vi.mock("next/navigation", () => ({
   useSearchParams: () => new URLSearchParams("foo=bar"),
 }));
 
+// Mock the environment variables.
+vi.mock("@formbricks/lib/env", () => ({
+  env: {
+    NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID: "env-test",
+    NEXT_PUBLIC_FORMBRICKS_API_HOST: "https://api.test.com",
+  },
+}));
+
 // Mock the flag that enables Formbricks.
 vi.mock("@/app/lib/formbricks", () => ({
   formbricksEnabled: true,
@@ -26,21 +34,17 @@ vi.mock("@formbricks/js", () => ({
 }));
 
 describe("FormbricksClient", () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
   test("calls setup, setUserId, setEmail and registerRouteChange on mount when enabled", () => {
     const mockSetup = vi.spyOn(formbricks, "setup");
     const mockSetUserId = vi.spyOn(formbricks, "setUserId");
     const mockSetEmail = vi.spyOn(formbricks, "setEmail");
     const mockRegisterRouteChange = vi.spyOn(formbricks, "registerRouteChange");
 
-    render(
-      <FormbricksClient
-        userId="user-123"
-        email="test@example.com"
-        formbricksEnvironmentId="env-test"
-        formbricksApiHost="https://api.test.com"
-        formbricksEnabled={true}
-      />
-    );
+    render(<FormbricksClient userId="user-123" email="test@example.com" />);
 
     // Expect the first effect to call setup and assign the provided user details.
     expect(mockSetup).toHaveBeenCalledWith({
@@ -60,15 +64,7 @@ describe("FormbricksClient", () => {
     const mockSetEmail = vi.spyOn(formbricks, "setEmail");
     const mockRegisterRouteChange = vi.spyOn(formbricks, "registerRouteChange");
 
-    render(
-      <FormbricksClient
-        userId=""
-        email="test@example.com"
-        formbricksEnvironmentId="env-test"
-        formbricksApiHost="https://api.test.com"
-        formbricksEnabled={true}
-      />
-    );
+    render(<FormbricksClient userId="" email="test@example.com" />);
 
     // Since userId is falsy, the first effect should not call setup or assign user details.
     expect(mockSetup).not.toHaveBeenCalled();

apps/web/app/(app)/components/FormbricksClient.tsx

@@ -1,44 +1,32 @@
 "use client";
 
+import { formbricksEnabled } from "@/app/lib/formbricks";
 import { usePathname, useSearchParams } from "next/navigation";
 import { useEffect } from "react";
 import formbricks from "@formbricks/js";
+import { env } from "@formbricks/lib/env";
 
-interface FormbricksClientProps {
-  userId: string;
-  email: string;
-  formbricksEnvironmentId?: string;
-  formbricksApiHost?: string;
-  formbricksEnabled?: boolean;
-}
-
-export const FormbricksClient = ({
-  userId,
-  email,
-  formbricksEnvironmentId,
-  formbricksApiHost,
-  formbricksEnabled,
-}: FormbricksClientProps) => {
+export const FormbricksClient = ({ userId, email }: { userId: string; email: string }) => {
   const pathname = usePathname();
   const searchParams = useSearchParams();
 
   useEffect(() => {
     if (formbricksEnabled && userId) {
       formbricks.setup({
-        environmentId: formbricksEnvironmentId ?? "",
-        appUrl: formbricksApiHost ?? "",
+        environmentId: env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID || "",
+        appUrl: env.NEXT_PUBLIC_FORMBRICKS_API_HOST || "",
       });
 
       formbricks.setUserId(userId);
       formbricks.setEmail(email);
     }
-  }, [userId, email, formbricksEnvironmentId, formbricksApiHost, formbricksEnabled]);
+  }, [userId, email]);
 
   useEffect(() => {
     if (formbricksEnabled) {
       formbricks.registerRouteChange();
     }
-  }, [pathname, searchParams, formbricksEnabled]);
+  }, [pathname, searchParams]);
 
   return null;
 };

apps/web/app/(app)/components/LoadingCard.tsx

@@ -1,5 +1,5 @@
 import { SettingsCard } from "@/app/(app)/environments/[environmentId]/settings/components/SettingsCard";
-import { cn } from "@/lib/cn";
+import { cn } from "@formbricks/lib/cn";
 
 export const LoadingCard = ({
   title,

apps/web/app/(app)/environments/[environmentId]/actions.ts

@@ -1,8 +1,5 @@
 "use server";
 
-import { getOrganization } from "@/lib/organization/service";
-import { getOrganizationProjectsCount } from "@/lib/project/service";
-import { updateUser } from "@/lib/user/service";
 import { authenticatedActionClient } from "@/lib/utils/action-client";
 import { checkAuthorizationUpdated } from "@/lib/utils/action-client-middleware";
 import {
@@ -11,6 +8,9 @@ import {
 } from "@/modules/ee/license-check/lib/utils";
 import { createProject } from "@/modules/projects/settings/lib/project";
 import { z } from "zod";
+import { getOrganization } from "@formbricks/lib/organization/service";
+import { getOrganizationProjectsCount } from "@formbricks/lib/project/service";
+import { updateUser } from "@formbricks/lib/user/service";
 import { ZId } from "@formbricks/types/common";
 import { OperationNotAllowedError } from "@formbricks/types/errors";
 import { ZProjectUpdateInput } from "@formbricks/types/project";

apps/web/app/(app)/environments/[environmentId]/actions/actions.ts

@@ -1,12 +1,12 @@
 "use server";
 
-import { deleteActionClass, getActionClass, updateActionClass } from "@/lib/actionClass/service";
-import { cache } from "@/lib/cache";
-import { getSurveysByActionClassId } from "@/lib/survey/service";
 import { actionClient, authenticatedActionClient } from "@/lib/utils/action-client";
 import { checkAuthorizationUpdated } from "@/lib/utils/action-client-middleware";
 import { getOrganizationIdFromActionClassId, getProjectIdFromActionClassId } from "@/lib/utils/helper";
 import { z } from "zod";
+import { deleteActionClass, getActionClass, updateActionClass } from "@formbricks/lib/actionClass/service";
+import { cache } from "@formbricks/lib/cache";
+import { getSurveysByActionClassId } from "@formbricks/lib/survey/service";
 import { ZActionClassInput } from "@formbricks/types/action-classes";
 import { ZId } from "@formbricks/types/common";
 import { ResourceNotFoundError } from "@formbricks/types/errors";

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

@@ -1,9 +1,7 @@
 "use client";
 
 import { ACTION_TYPE_ICON_LOOKUP } from "@/app/(app)/environments/[environmentId]/actions/utils";
-import { convertDateTimeStringShort } from "@/lib/time";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
-import { capitalizeFirstLetter } from "@/lib/utils/strings";
 import { createActionClassAction } from "@/modules/survey/editor/actions";
 import { Button } from "@/modules/ui/components/button";
 import { ErrorComponent } from "@/modules/ui/components/error-component";
@@ -12,6 +10,8 @@ import { LoadingSpinner } from "@/modules/ui/components/loading-spinner";
 import { useTranslate } from "@tolgee/react";
 import { useEffect, useMemo, useState } from "react";
 import toast from "react-hot-toast";
+import { convertDateTimeStringShort } from "@formbricks/lib/time";
+import { capitalizeFirstLetter } from "@formbricks/lib/utils/strings";
 import { TActionClass, TActionClassInput, TActionClassInputCode } from "@formbricks/types/action-classes";
 import { TEnvironment } from "@formbricks/types/environment";
 import { getActiveInactiveSurveysAction } from "../actions";

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

@@ -1,5 +1,5 @@
 import { ACTION_TYPE_ICON_LOOKUP } from "@/app/(app)/environments/[environmentId]/actions/utils";
-import { timeSince } from "@/lib/time";
+import { timeSince } from "@formbricks/lib/time";
 import { TActionClass } from "@formbricks/types/action-classes";
 import { TUserLocale } from "@formbricks/types/user";
 
@@ -23,7 +23,7 @@ export const ActionClassDataRow = ({
           </div>
         </div>
       </div>
-      <div className="col-span-2 my-auto text-center text-sm whitespace-nowrap text-slate-500">
+      <div className="col-span-2 my-auto whitespace-nowrap text-center text-sm text-slate-500">
         {timeSince(actionClass.createdAt.toString(), locale)}
       </div>
       <div className="text-center"></div>

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

@@ -2,15 +2,15 @@ import { ActionClassesTable } from "@/app/(app)/environments/[environmentId]/act
 import { ActionClassDataRow } from "@/app/(app)/environments/[environmentId]/actions/components/ActionRowData";
 import { ActionTableHeading } from "@/app/(app)/environments/[environmentId]/actions/components/ActionTableHeading";
 import { AddActionModal } from "@/app/(app)/environments/[environmentId]/actions/components/AddActionModal";
-import { getActionClasses } from "@/lib/actionClass/service";
-import { getEnvironments } from "@/lib/environment/service";
-import { findMatchingLocale } from "@/lib/utils/locale";
 import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
 import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
 import { PageHeader } from "@/modules/ui/components/page-header";
 import { getTranslate } from "@/tolgee/server";
 import { Metadata } from "next";
 import { redirect } from "next/navigation";
+import { getActionClasses } from "@formbricks/lib/actionClass/service";
+import { getEnvironments } from "@formbricks/lib/environment/service";
+import { findMatchingLocale } from "@formbricks/lib/utils/locale";
 
 export const metadata: Metadata = {
   title: "Actions",

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

@@ -1,17 +1,5 @@
 import { MainNavigation } from "@/app/(app)/environments/[environmentId]/components/MainNavigation";
 import { TopControlBar } from "@/app/(app)/environments/[environmentId]/components/TopControlBar";
-import { IS_DEVELOPMENT, IS_FORMBRICKS_CLOUD } from "@/lib/constants";
-import { getEnvironment, getEnvironments } from "@/lib/environment/service";
-import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
-import { getAccessFlags } from "@/lib/membership/utils";
-import {
-  getMonthlyActiveOrganizationPeopleCount,
-  getMonthlyOrganizationResponseCount,
-  getOrganizationByEnvironmentId,
-  getOrganizationsByUserId,
-} from "@/lib/organization/service";
-import { getUserProjects } from "@/lib/project/service";
-import { getUser } from "@/lib/user/service";
 import { getEnterpriseLicense, getOrganizationProjectsLimit } from "@/modules/ee/license-check/lib/utils";
 import { getProjectPermissionByUserId } from "@/modules/ee/teams/lib/roles";
 import { DevEnvironmentBanner } from "@/modules/ui/components/dev-environment-banner";
@@ -19,6 +7,18 @@ import { LimitsReachedBanner } from "@/modules/ui/components/limits-reached-bann
 import { PendingDowngradeBanner } from "@/modules/ui/components/pending-downgrade-banner";
 import { getTranslate } from "@/tolgee/server";
 import type { Session } from "next-auth";
+import { IS_DEVELOPMENT, IS_FORMBRICKS_CLOUD } from "@formbricks/lib/constants";
+import { getEnvironment, getEnvironments } from "@formbricks/lib/environment/service";
+import { getMembershipByUserIdOrganizationId } from "@formbricks/lib/membership/service";
+import { getAccessFlags } from "@formbricks/lib/membership/utils";
+import {
+  getMonthlyActiveOrganizationPeopleCount,
+  getMonthlyOrganizationResponseCount,
+  getOrganizationByEnvironmentId,
+  getOrganizationsByUserId,
+} from "@formbricks/lib/organization/service";
+import { getUserProjects } from "@formbricks/lib/project/service";
+import { getUser } from "@formbricks/lib/user/service";
 
 interface EnvironmentLayoutProps {
   environmentId: string;

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

@@ -1,7 +1,7 @@
 "use client";
 
-import { FORMBRICKS_ENVIRONMENT_ID_LS } from "@/lib/localStorage";
 import { useEffect } from "react";
+import { FORMBRICKS_ENVIRONMENT_ID_LS } from "@formbricks/lib/localStorage";
 
 interface EnvironmentStorageHandlerProps {
   environmentId: string;

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

@@ -1,11 +1,11 @@
 "use client";
 
-import { cn } from "@/lib/cn";
 import { Label } from "@/modules/ui/components/label";
 import { Switch } from "@/modules/ui/components/switch";
 import { useTranslate } from "@tolgee/react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
+import { cn } from "@formbricks/lib/cn";
 import { TEnvironment } from "@formbricks/types/environment";
 
 interface EnvironmentSwitchProps {

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

@@ -4,9 +4,6 @@ import { getLatestStableFbReleaseAction } from "@/app/(app)/environments/[enviro
 import { NavigationLink } from "@/app/(app)/environments/[environmentId]/components/NavigationLink";
 import { formbricksLogout } from "@/app/lib/formbricks";
 import FBLogo from "@/images/formbricks-wordmark.svg";
-import { cn } from "@/lib/cn";
-import { getAccessFlags } from "@/lib/membership/utils";
-import { capitalizeFirstLetter } from "@/lib/utils/strings";
 import { CreateOrganizationModal } from "@/modules/organization/components/CreateOrganizationModal";
 import { ProjectSwitcher } from "@/modules/projects/components/project-switcher";
 import { ProfileAvatar } from "@/modules/ui/components/avatars";
@@ -48,6 +45,9 @@ import Image from "next/image";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import { useEffect, useMemo, useState } from "react";
+import { cn } from "@formbricks/lib/cn";
+import { getAccessFlags } from "@formbricks/lib/membership/utils";
+import { capitalizeFirstLetter } from "@formbricks/lib/utils/strings";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TOrganizationRole } from "@formbricks/types/memberships";
 import { TOrganization } from "@formbricks/types/organizations";
@@ -265,7 +265,7 @@ export const MainNavigation = ({
                 size="icon"
                 onClick={toggleSidebar}
                 className={cn(
-                  "rounded-xl bg-slate-50 p-1 text-slate-600 transition-all hover:bg-slate-100 focus:ring-0 focus:ring-transparent focus:outline-none"
+                  "rounded-xl bg-slate-50 p-1 text-slate-600 transition-all hover:bg-slate-100 focus:outline-none focus:ring-0 focus:ring-transparent"
                 )}>
                 {isCollapsed ? (
                   <PanelLeftOpenIcon strokeWidth={1.5} />

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

@@ -1,7 +1,7 @@
-import { cn } from "@/lib/cn";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/modules/ui/components/tooltip";
 import Link from "next/link";
 import React from "react";
+import { cn } from "@formbricks/lib/cn";
 
 interface NavigationLinkProps {
   href: string;

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

@@ -2,7 +2,7 @@ import "@testing-library/jest-dom/vitest";
 import { cleanup, render } from "@testing-library/react";
 import { Session } from "next-auth";
 import { usePostHog } from "posthog-js/react";
-import { beforeEach, describe, expect, test, vi } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 import { TOrganizationBilling } from "@formbricks/types/organizations";
 import { TUser } from "@formbricks/types/user";
 import { PosthogIdentify } from "./PosthogIdentify";
@@ -18,7 +18,7 @@ describe("PosthogIdentify", () => {
     cleanup();
   });
 
-  test("identifies the user and sets groups when isPosthogEnabled is true", () => {
+  it("identifies the user and sets groups when isPosthogEnabled is true", () => {
     const mockIdentify = vi.fn();
     const mockGroup = vi.fn();
 
@@ -72,7 +72,7 @@ describe("PosthogIdentify", () => {
     });
   });
 
-  test("does nothing if isPosthogEnabled is false", () => {
+  it("does nothing if isPosthogEnabled is false", () => {
     const mockIdentify = vi.fn();
     const mockGroup = vi.fn();
 
@@ -95,7 +95,7 @@ describe("PosthogIdentify", () => {
     expect(mockGroup).not.toHaveBeenCalled();
   });
 
-  test("does nothing if session user is missing", () => {
+  it("does nothing if session user is missing", () => {
     const mockIdentify = vi.fn();
     const mockGroup = vi.fn();
 
@@ -120,7 +120,7 @@ describe("PosthogIdentify", () => {
     expect(mockGroup).not.toHaveBeenCalled();
   });
 
-  test("identifies user but does not group if environmentId/organizationId not provided", () => {
+  it("identifies user but does not group if environmentId/organizationId not provided", () => {
     const mockIdentify = vi.fn();
     const mockGroup = vi.fn();
 

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

@@ -1,7 +1,6 @@
 "use client";
 
 import { EnvironmentSwitch } from "@/app/(app)/environments/[environmentId]/components/EnvironmentSwitch";
-import { getAccessFlags } from "@/lib/membership/utils";
 import { TTeamPermission } from "@/modules/ee/teams/project-teams/types/team";
 import { getTeamPermissionFlags } from "@/modules/ee/teams/utils/teams";
 import { Button } from "@/modules/ui/components/button";
@@ -10,6 +9,7 @@ import { useTranslate } from "@tolgee/react";
 import { BugIcon, CircleUserIcon, PlusIcon } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
+import { getAccessFlags } from "@formbricks/lib/membership/utils";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TOrganizationRole } from "@formbricks/types/memberships";
 

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

@@ -1,10 +1,10 @@
 "use client";
 
-import { cn } from "@/lib/cn";
 import { Button } from "@/modules/ui/components/button";
 import { useTranslate } from "@tolgee/react";
 import { AlertTriangleIcon, CheckIcon, RotateCcwIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
+import { cn } from "@formbricks/lib/cn";
 import { TEnvironment } from "@formbricks/types/environment";
 
 interface WidgetStatusIndicatorProps {
@@ -53,7 +53,7 @@ export const WidgetStatusIndicator = ({ environment }: WidgetStatusIndicatorProp
         <currentStatus.icon />
       </div>
       <p className="text-md font-bold text-slate-800 md:text-xl">{currentStatus.title}</p>
-      <p className="w-2/3 text-sm text-balance text-slate-600">{currentStatus.subtitle}</p>
+      <p className="w-2/3 text-balance text-sm text-slate-600">{currentStatus.subtitle}</p>
       {status === "notImplemented" && (
         <Button variant="outline" size="sm" className="bg-white" onClick={() => router.refresh()}>
           <RotateCcwIcon />

apps/web/app/(app)/environments/[environmentId]/integrations/actions.ts

@@ -1,6 +1,5 @@
 "use server";
 
-import { createOrUpdateIntegration, deleteIntegration } from "@/lib/integration/service";
 import { authenticatedActionClient } from "@/lib/utils/action-client";
 import { checkAuthorizationUpdated } from "@/lib/utils/action-client-middleware";
 import {
@@ -10,6 +9,7 @@ import {
   getProjectIdFromIntegrationId,
 } from "@/lib/utils/helper";
 import { z } from "zod";
+import { createOrUpdateIntegration, deleteIntegration } from "@formbricks/lib/integration/service";
 import { ZId } from "@formbricks/types/common";
 import { ZIntegrationInput } from "@formbricks/types/integration";
 

apps/web/app/(app)/environments/[environmentId]/integrations/airtable/components/AddIntegrationModal.tsx

@@ -4,8 +4,6 @@ import { createOrUpdateIntegrationAction } from "@/app/(app)/environments/[envir
 import { BaseSelectDropdown } from "@/app/(app)/environments/[environmentId]/integrations/airtable/components/BaseSelectDropdown";
 import { fetchTables } from "@/app/(app)/environments/[environmentId]/integrations/airtable/lib/airtable";
 import AirtableLogo from "@/images/airtableLogo.svg";
-import { getLocalizedValue } from "@/lib/i18n/utils";
-import { replaceHeadlineRecall } from "@/lib/utils/recall";
 import { AdditionalIntegrationSettings } from "@/modules/ui/components/additional-integration-settings";
 import { Alert, AlertDescription, AlertTitle } from "@/modules/ui/components/alert";
 import { Button } from "@/modules/ui/components/button";
@@ -25,6 +23,8 @@ import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { toast } from "react-hot-toast";
+import { getLocalizedValue } from "@formbricks/lib/i18n/utils";
+import { replaceHeadlineRecall } from "@formbricks/lib/utils/recall";
 import { TIntegrationItem } from "@formbricks/types/integration";
 import {
   TIntegrationAirtable,

apps/web/app/(app)/environments/[environmentId]/integrations/airtable/components/ManageIntegration.test.tsx

@@ -1,151 +0,0 @@
-import { deleteIntegrationAction } from "@/app/(app)/environments/[environmentId]/integrations/actions";
-import { cleanup, render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { afterEach, describe, expect, test, vi } from "vitest";
-import { TEnvironment } from "@formbricks/types/environment";
-import { TIntegrationAirtable, TIntegrationAirtableConfig } from "@formbricks/types/integration/airtable";
-import { ManageIntegration } from "./ManageIntegration";
-
-vi.mock("@/app/(app)/environments/[environmentId]/integrations/actions", () => ({
-  deleteIntegrationAction: vi.fn(),
-}));
-vi.mock(
-  "@/app/(app)/environments/[environmentId]/integrations/airtable/components/AddIntegrationModal",
-  () => ({
-    AddIntegrationModal: ({ open, setOpenWithStates }) =>
-      open ? (
-        <div data-testid="add-modal">
-          <button onClick={() => setOpenWithStates(false)}>close</button>
-        </div>
-      ) : null,
-  })
-);
-vi.mock("@/modules/ui/components/delete-dialog", () => ({
-  DeleteDialog: ({ open, setOpen, onDelete }) =>
-    open ? (
-      <div data-testid="delete-dialog">
-        <button onClick={onDelete}>confirm</button>
-        <button onClick={() => setOpen(false)}>cancel</button>
-      </div>
-    ) : null,
-}));
-vi.mock("react-hot-toast", () => ({ toast: { success: vi.fn(), error: vi.fn() } }));
-
-const baseProps = {
-  environment: { id: "env1" } as TEnvironment,
-  environmentId: "env1",
-  setIsConnected: vi.fn(),
-  surveys: [],
-  airtableArray: [],
-  locale: "en-US" as const,
-};
-
-describe("ManageIntegration", () => {
-  afterEach(() => {
-    cleanup();
-  });
-
-  test("empty state", () => {
-    render(
-      <ManageIntegration
-        {...baseProps}
-        airtableIntegration={
-          {
-            id: "1",
-            config: { email: "a@b.com", data: [] } as unknown as TIntegrationAirtableConfig,
-          } as TIntegrationAirtable
-        }
-      />
-    );
-    expect(screen.getByText(/no_integrations_yet/)).toBeInTheDocument();
-    expect(screen.getByText(/link_new_table/)).toBeInTheDocument();
-  });
-
-  test("open add modal", async () => {
-    render(
-      <ManageIntegration
-        {...baseProps}
-        airtableIntegration={
-          {
-            id: "1",
-            config: { email: "a@b.com", data: [] } as unknown as TIntegrationAirtableConfig,
-          } as TIntegrationAirtable
-        }
-      />
-    );
-    await userEvent.click(screen.getByText(/link_new_table/));
-    expect(screen.getByTestId("add-modal")).toBeInTheDocument();
-  });
-
-  test("list integrations and open edit modal", async () => {
-    const item = {
-      baseId: "b",
-      tableId: "t",
-      surveyId: "s",
-      surveyName: "S",
-      tableName: "T",
-      questions: "Q",
-      questionIds: ["x"],
-      createdAt: new Date(),
-      includeVariables: false,
-      includeHiddenFields: false,
-      includeMetadata: false,
-      includeCreatedAt: false,
-    };
-    render(
-      <ManageIntegration
-        {...baseProps}
-        airtableIntegration={
-          {
-            id: "1",
-            config: { email: "a@b.com", data: [item] } as unknown as TIntegrationAirtableConfig,
-          } as TIntegrationAirtable
-        }
-      />
-    );
-    expect(screen.getByText("S")).toBeInTheDocument();
-    await userEvent.click(screen.getByText("S"));
-    expect(screen.getByTestId("add-modal")).toBeInTheDocument();
-  });
-
-  test("delete integration success", async () => {
-    vi.mocked(deleteIntegrationAction).mockResolvedValue({ data: true } as any);
-    render(
-      <ManageIntegration
-        {...baseProps}
-        airtableIntegration={
-          {
-            id: "1",
-            config: { email: "a@b.com", data: [] } as unknown as TIntegrationAirtableConfig,
-          } as TIntegrationAirtable
-        }
-      />
-    );
-    await userEvent.click(screen.getByText(/delete_integration/));
-    expect(screen.getByTestId("delete-dialog")).toBeInTheDocument();
-    await userEvent.click(screen.getByText("confirm"));
-    expect(deleteIntegrationAction).toHaveBeenCalledWith({ integrationId: "1" });
-    const { toast } = await import("react-hot-toast");
-    expect(toast.success).toHaveBeenCalled();
-    expect(baseProps.setIsConnected).toHaveBeenCalledWith(false);
-  });
-
-  test("delete integration error", async () => {
-    vi.mocked(deleteIntegrationAction).mockResolvedValue({ error: "fail" } as any);
-    render(
-      <ManageIntegration
-        {...baseProps}
-        airtableIntegration={
-          {
-            id: "1",
-            config: { email: "a@b.com", data: [] } as unknown as TIntegrationAirtableConfig,
-          } as TIntegrationAirtable
-        }
-      />
-    );
-    await userEvent.click(screen.getByText(/delete_integration/));
-    await userEvent.click(screen.getByText("confirm"));
-    const { toast } = await import("react-hot-toast");
-    expect(toast.error).toHaveBeenCalled();
-  });
-});

apps/web/app/(app)/environments/[environmentId]/integrations/airtable/components/ManageIntegration.tsx

@@ -5,7 +5,6 @@ import {
   AddIntegrationModal,
   IntegrationModalInputs,
 } from "@/app/(app)/environments/[environmentId]/integrations/airtable/components/AddIntegrationModal";
-import { timeSince } from "@/lib/time";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { Button } from "@/modules/ui/components/button";
 import { DeleteDialog } from "@/modules/ui/components/delete-dialog";
@@ -14,6 +13,7 @@ import { useTranslate } from "@tolgee/react";
 import { Trash2Icon } from "lucide-react";
 import { useState } from "react";
 import { toast } from "react-hot-toast";
+import { timeSince } from "@formbricks/lib/time";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TIntegrationItem } from "@formbricks/types/integration";
 import { TIntegrationAirtable } from "@formbricks/types/integration/airtable";
@@ -98,17 +98,17 @@ export const ManageIntegration = (props: ManageIntegrationProps) => {
       {integrationData.length ? (
         <div className="mt-6 w-full rounded-lg border border-slate-200">
           <div className="grid h-12 grid-cols-8 content-center rounded-lg bg-slate-100 text-left text-sm font-semibold text-slate-900">
-            {tableHeaders.map((header) => (
-              <div key={header} className={`col-span-2 hidden text-center sm:block`}>
+            {tableHeaders.map((header, idx) => (
+              <div key={idx} className={`col-span-2 hidden text-center sm:block`}>
                 {t(header)}
               </div>
             ))}
           </div>
 
           {integrationData.map((data, index) => (
-            <button
-              key={`${index}-${data.baseId}-${data.tableId}-${data.surveyId}`}
-              className="grid h-16 w-full grid-cols-8 content-center rounded-lg p-2 hover:bg-slate-100"
+            <div
+              key={index}
+              className="m-2 grid h-16 grid-cols-8 content-center rounded-lg hover:bg-slate-100"
               onClick={() => {
                 setDefaultValues({
                   base: data.baseId,
@@ -129,7 +129,7 @@ export const ManageIntegration = (props: ManageIntegrationProps) => {
               <div className="col-span-2 text-center">
                 {timeSince(data.createdAt.toString(), props.locale)}
               </div>
-            </button>
+            </div>
           ))}
         </div>
       ) : (

apps/web/app/(app)/environments/[environmentId]/integrations/airtable/page.tsx

@@ -1,15 +1,15 @@
 import { AirtableWrapper } from "@/app/(app)/environments/[environmentId]/integrations/airtable/components/AirtableWrapper";
 import { getSurveys } from "@/app/(app)/environments/[environmentId]/integrations/lib/surveys";
-import { getAirtableTables } from "@/lib/airtable/service";
-import { AIRTABLE_CLIENT_ID, WEBAPP_URL } from "@/lib/constants";
-import { getIntegrations } from "@/lib/integration/service";
-import { findMatchingLocale } from "@/lib/utils/locale";
 import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
 import { GoBackButton } from "@/modules/ui/components/go-back-button";
 import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
 import { PageHeader } from "@/modules/ui/components/page-header";
 import { getTranslate } from "@/tolgee/server";
 import { redirect } from "next/navigation";
+import { getAirtableTables } from "@formbricks/lib/airtable/service";
+import { AIRTABLE_CLIENT_ID, WEBAPP_URL } from "@formbricks/lib/constants";
+import { getIntegrations } from "@formbricks/lib/integration/service";
+import { findMatchingLocale } from "@formbricks/lib/utils/locale";
 import { TIntegrationItem } from "@formbricks/types/integration";
 import { TIntegrationAirtable } from "@formbricks/types/integration/airtable";
 

apps/web/app/(app)/environments/[environmentId]/integrations/google-sheets/actions.ts

@@ -1,10 +1,10 @@
 "use server";
 
-import { getSpreadsheetNameById } from "@/lib/googleSheet/service";
 import { authenticatedActionClient } from "@/lib/utils/action-client";
 import { checkAuthorizationUpdated } from "@/lib/utils/action-client-middleware";
 import { getOrganizationIdFromEnvironmentId, getProjectIdFromEnvironmentId } from "@/lib/utils/helper";
 import { z } from "zod";
+import { getSpreadsheetNameById } from "@formbricks/lib/googleSheet/service";
 import { ZIntegrationGoogleSheets } from "@formbricks/types/integration/google-sheet";
 
 const ZGetSpreadsheetNameByIdAction = z.object({

apps/web/app/(app)/environments/[environmentId]/integrations/google-sheets/components/AddIntegrationModal.tsx

@@ -8,9 +8,7 @@ import {
   isValidGoogleSheetsUrl,
 } from "@/app/(app)/environments/[environmentId]/integrations/google-sheets/lib/util";
 import GoogleSheetLogo from "@/images/googleSheetsLogo.png";
-import { getLocalizedValue } from "@/lib/i18n/utils";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
-import { replaceHeadlineRecall } from "@/lib/utils/recall";
 import { AdditionalIntegrationSettings } from "@/modules/ui/components/additional-integration-settings";
 import { Button } from "@/modules/ui/components/button";
 import { Checkbox } from "@/modules/ui/components/checkbox";
@@ -23,6 +21,8 @@ import Image from "next/image";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import toast from "react-hot-toast";
+import { getLocalizedValue } from "@formbricks/lib/i18n/utils";
+import { replaceHeadlineRecall } from "@formbricks/lib/utils/recall";
 import {
   TIntegrationGoogleSheets,
   TIntegrationGoogleSheetsConfigData,
@@ -255,7 +255,7 @@ export const AddIntegrationModal = ({
                 <div className="space-y-4">
                   <div>
                     <Label htmlFor="Surveys">{t("common.questions")}</Label>
-                    <div className="mt-1 max-h-[15vh] overflow-x-hidden overflow-y-auto rounded-lg border border-slate-200">
+                    <div className="mt-1 max-h-[15vh] overflow-y-auto overflow-x-hidden rounded-lg border border-slate-200">
                       <div className="grid content-center rounded-lg bg-slate-50 p-3 text-left text-sm text-slate-900">
                         {replaceHeadlineRecall(selectedSurvey, "default")?.questions.map((question) => (
                           <div key={question.id} className="my-1 flex items-center space-x-2">

apps/web/app/(app)/environments/[environmentId]/integrations/google-sheets/components/ManageIntegration.test.tsx

@@ -1,162 +0,0 @@
-import { deleteIntegrationAction } from "@/app/(app)/environments/[environmentId]/integrations/actions";
-import { cleanup, render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { afterEach, describe, expect, test, vi } from "vitest";
-import { TEnvironment } from "@formbricks/types/environment";
-import { TIntegrationGoogleSheets } from "@formbricks/types/integration/google-sheet";
-import { ManageIntegration } from "./ManageIntegration";
-
-vi.mock("@/app/(app)/environments/[environmentId]/integrations/actions", () => ({
-  deleteIntegrationAction: vi.fn(),
-}));
-
-vi.mock("react-hot-toast", () => ({
-  default: { success: vi.fn(), error: vi.fn() },
-}));
-
-vi.mock("@/modules/ui/components/delete-dialog", () => ({
-  DeleteDialog: ({ open, setOpen, onDelete }: any) =>
-    open ? (
-      <div data-testid="delete-dialog">
-        <button onClick={onDelete}>confirm</button>
-        <button onClick={() => setOpen(false)}>cancel</button>
-      </div>
-    ) : null,
-}));
-
-vi.mock("@/modules/ui/components/empty-space-filler", () => ({
-  EmptySpaceFiller: ({ emptyMessage }: any) => <div>{emptyMessage}</div>,
-}));
-
-const baseProps = {
-  environment: { id: "env1" } as TEnvironment,
-  setOpenAddIntegrationModal: vi.fn(),
-  setIsConnected: vi.fn(),
-  setSelectedIntegration: vi.fn(),
-  locale: "en-US" as const,
-} as const;
-
-describe("ManageIntegration (Google Sheets)", () => {
-  afterEach(() => {
-    cleanup();
-  });
-
-  test("empty state", () => {
-    render(
-      <ManageIntegration
-        {...baseProps}
-        googleSheetIntegration={
-          {
-            id: "1",
-            config: { email: "a@b.com", data: [] },
-          } as unknown as TIntegrationGoogleSheets
-        }
-      />
-    );
-
-    expect(screen.getByText(/no_integrations_yet/)).toBeInTheDocument();
-    expect(screen.getByText(/link_new_sheet/)).toBeInTheDocument();
-  });
-
-  test("click link new sheet", async () => {
-    render(
-      <ManageIntegration
-        {...baseProps}
-        googleSheetIntegration={
-          {
-            id: "1",
-            config: { email: "a@b.com", data: [] },
-          } as unknown as TIntegrationGoogleSheets
-        }
-      />
-    );
-
-    await userEvent.click(screen.getByText(/link_new_sheet/));
-
-    expect(baseProps.setSelectedIntegration).toHaveBeenCalledWith(null);
-    expect(baseProps.setOpenAddIntegrationModal).toHaveBeenCalledWith(true);
-  });
-
-  test("list integrations and open edit", async () => {
-    const item = {
-      spreadsheetId: "sid",
-      spreadsheetName: "SheetName",
-      surveyId: "s1",
-      surveyName: "Survey1",
-      questionIds: ["q1"],
-      questions: "Q",
-      createdAt: new Date(),
-    };
-
-    render(
-      <ManageIntegration
-        {...baseProps}
-        googleSheetIntegration={
-          {
-            id: "1",
-            config: { email: "a@b.com", data: [item] },
-          } as unknown as TIntegrationGoogleSheets
-        }
-      />
-    );
-
-    expect(screen.getByText("Survey1")).toBeInTheDocument();
-
-    await userEvent.click(screen.getByText("Survey1"));
-
-    expect(baseProps.setSelectedIntegration).toHaveBeenCalledWith({
-      ...item,
-      index: 0,
-    });
-    expect(baseProps.setOpenAddIntegrationModal).toHaveBeenCalledWith(true);
-  });
-
-  test("delete integration success", async () => {
-    vi.mocked(deleteIntegrationAction).mockResolvedValue({ data: true } as any);
-
-    render(
-      <ManageIntegration
-        {...baseProps}
-        googleSheetIntegration={
-          {
-            id: "1",
-            config: { email: "a@b.com", data: [] },
-          } as unknown as TIntegrationGoogleSheets
-        }
-      />
-    );
-
-    await userEvent.click(screen.getByText(/delete_integration/));
-    expect(screen.getByTestId("delete-dialog")).toBeInTheDocument();
-
-    await userEvent.click(screen.getByText("confirm"));
-
-    expect(deleteIntegrationAction).toHaveBeenCalledWith({ integrationId: "1" });
-
-    const { default: toast } = await import("react-hot-toast");
-    expect(toast.success).toHaveBeenCalledWith("environments.integrations.integration_removed_successfully");
-    expect(baseProps.setIsConnected).toHaveBeenCalledWith(false);
-  });
-
-  test("delete integration error", async () => {
-    vi.mocked(deleteIntegrationAction).mockResolvedValue({ error: "fail" } as any);
-
-    render(
-      <ManageIntegration
-        {...baseProps}
-        googleSheetIntegration={
-          {
-            id: "1",
-            config: { email: "a@b.com", data: [] },
-          } as unknown as TIntegrationGoogleSheets
-        }
-      />
-    );
-
-    await userEvent.click(screen.getByText(/delete_integration/));
-    await userEvent.click(screen.getByText("confirm"));
-
-    const { default: toast } = await import("react-hot-toast");
-    expect(toast.error).toHaveBeenCalledWith(expect.any(String));
-  });
-});

apps/web/app/(app)/environments/[environmentId]/integrations/google-sheets/components/ManageIntegration.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { deleteIntegrationAction } from "@/app/(app)/environments/[environmentId]/integrations/actions";
-import { timeSince } from "@/lib/time";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { Button } from "@/modules/ui/components/button";
 import { DeleteDialog } from "@/modules/ui/components/delete-dialog";
@@ -10,6 +9,7 @@ import { useTranslate } from "@tolgee/react";
 import { Trash2Icon } from "lucide-react";
 import { useState } from "react";
 import toast from "react-hot-toast";
+import { timeSince } from "@formbricks/lib/time";
 import { TEnvironment } from "@formbricks/types/environment";
 import {
   TIntegrationGoogleSheets,
@@ -36,10 +36,11 @@ export const ManageIntegration = ({
 }: ManageIntegrationProps) => {
   const { t } = useTranslate();
   const [isDeleteIntegrationModalOpen, setIsDeleteIntegrationModalOpen] = useState(false);
-  let integrationArray: TIntegrationGoogleSheetsConfigData[] = [];
-  if (googleSheetIntegration?.config.data) {
-    integrationArray = googleSheetIntegration.config.data;
-  }
+  const integrationArray = googleSheetIntegration
+    ? googleSheetIntegration.config.data
+      ? googleSheetIntegration.config.data
+      : []
+    : [];
   const [isDeleting, setisDeleting] = useState(false);
 
   const handleDeleteIntegration = async () => {
@@ -111,9 +112,9 @@ export const ManageIntegration = ({
             {integrationArray &&
               integrationArray.map((data, index) => {
                 return (
-                  <button
-                    key={`${index}-${data.spreadsheetName}-${data.surveyName}`}
-                    className="grid h-16 w-full cursor-pointer grid-cols-8 content-center rounded-lg p-2 hover:bg-slate-100"
+                  <div
+                    key={index}
+                    className="m-2 grid h-16 cursor-pointer grid-cols-8 content-center rounded-lg hover:bg-slate-100"
                     onClick={() => {
                       editIntegration(index);
                     }}>
@@ -123,7 +124,7 @@ export const ManageIntegration = ({
                     <div className="col-span-2 text-center">
                       {timeSince(data.createdAt.toString(), locale)}
                     </div>
-                  </button>
+                  </div>
                 );
               })}
           </div>

apps/web/app/(app)/environments/[environmentId]/integrations/google-sheets/page.tsx

@@ -1,19 +1,19 @@
 import { GoogleSheetWrapper } from "@/app/(app)/environments/[environmentId]/integrations/google-sheets/components/GoogleSheetWrapper";
 import { getSurveys } from "@/app/(app)/environments/[environmentId]/integrations/lib/surveys";
-import {
-  GOOGLE_SHEETS_CLIENT_ID,
-  GOOGLE_SHEETS_CLIENT_SECRET,
-  GOOGLE_SHEETS_REDIRECT_URL,
-  WEBAPP_URL,
-} from "@/lib/constants";
-import { getIntegrations } from "@/lib/integration/service";
-import { findMatchingLocale } from "@/lib/utils/locale";
 import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
 import { GoBackButton } from "@/modules/ui/components/go-back-button";
 import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
 import { PageHeader } from "@/modules/ui/components/page-header";
 import { getTranslate } from "@/tolgee/server";
 import { redirect } from "next/navigation";
+import {
+  GOOGLE_SHEETS_CLIENT_ID,
+  GOOGLE_SHEETS_CLIENT_SECRET,
+  GOOGLE_SHEETS_REDIRECT_URL,
+  WEBAPP_URL,
+} from "@formbricks/lib/constants";
+import { getIntegrations } from "@formbricks/lib/integration/service";
+import { findMatchingLocale } from "@formbricks/lib/utils/locale";
 import { TIntegrationGoogleSheets } from "@formbricks/types/integration/google-sheet";
 
 const Page = async (props) => {

apps/web/app/(app)/environments/[environmentId]/integrations/lib/surveys.ts

@@ -1,12 +1,12 @@
 import "server-only";
-import { cache } from "@/lib/cache";
-import { surveyCache } from "@/lib/survey/cache";
-import { selectSurvey } from "@/lib/survey/service";
-import { transformPrismaSurvey } from "@/lib/survey/utils";
-import { validateInputs } from "@/lib/utils/validate";
 import { Prisma } from "@prisma/client";
 import { cache as reactCache } from "react";
 import { prisma } from "@formbricks/database";
+import { cache } from "@formbricks/lib/cache";
+import { surveyCache } from "@formbricks/lib/survey/cache";
+import { selectSurvey } from "@formbricks/lib/survey/service";
+import { transformPrismaSurvey } from "@formbricks/lib/survey/utils";
+import { validateInputs } from "@formbricks/lib/utils/validate";
 import { logger } from "@formbricks/logger";
 import { ZId } from "@formbricks/types/common";
 import { DatabaseError } from "@formbricks/types/errors";

apps/web/app/(app)/environments/[environmentId]/integrations/lib/webhook.ts

@@ -1,9 +1,9 @@
-import { cache } from "@/lib/cache";
 import { webhookCache } from "@/lib/cache/webhook";
-import { validateInputs } from "@/lib/utils/validate";
 import { Prisma, Webhook } from "@prisma/client";
 import { z } from "zod";
 import { prisma } from "@formbricks/database";
+import { cache } from "@formbricks/lib/cache";
+import { validateInputs } from "@formbricks/lib/utils/validate";
 import { ZId } from "@formbricks/types/common";
 import { DatabaseError } from "@formbricks/types/errors";
 

apps/web/app/(app)/environments/[environmentId]/integrations/notion/components/AddIntegrationModal.tsx

@@ -7,9 +7,6 @@ import {
   UNSUPPORTED_TYPES_BY_NOTION,
 } from "@/app/(app)/environments/[environmentId]/integrations/notion/constants";
 import NotionLogo from "@/images/notion.png";
-import { getLocalizedValue } from "@/lib/i18n/utils";
-import { structuredClone } from "@/lib/pollyfills/structuredClone";
-import { replaceHeadlineRecall } from "@/lib/utils/recall";
 import { getQuestionTypes } from "@/modules/survey/lib/questions";
 import { Button } from "@/modules/ui/components/button";
 import { DropdownSelector } from "@/modules/ui/components/dropdown-selector";
@@ -21,6 +18,9 @@ import Image from "next/image";
 import React, { useEffect, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 import toast from "react-hot-toast";
+import { getLocalizedValue } from "@formbricks/lib/i18n/utils";
+import { structuredClone } from "@formbricks/lib/pollyfills/structuredClone";
+import { replaceHeadlineRecall } from "@formbricks/lib/utils/recall";
 import { TIntegrationInput } from "@formbricks/types/integration";
 import {
   TIntegrationNotion,

apps/web/app/(app)/environments/[environmentId]/integrations/notion/components/ManageIntegration.test.tsx

@@ -1,91 +0,0 @@
-import { cleanup, render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { afterEach, describe, expect, test, vi } from "vitest";
-import type {
-  TIntegrationNotion,
-  TIntegrationNotionConfig,
-  TIntegrationNotionConfigData,
-  TIntegrationNotionCredential,
-} from "@formbricks/types/integration/notion";
-import { ManageIntegration } from "./ManageIntegration";
-
-vi.mock("react-hot-toast", () => ({ success: vi.fn(), error: vi.fn() }));
-vi.mock("@/lib/time", () => ({ timeSince: () => "ago" }));
-vi.mock("@/app/(app)/environments/[environmentId]/integrations/actions", () => ({
-  deleteIntegrationAction: vi.fn(),
-}));
-
-describe("ManageIntegration", () => {
-  afterEach(() => {
-    cleanup();
-  });
-
-  const defaultProps = {
-    environment: {} as any,
-    locale: "en-US" as const,
-    setOpenAddIntegrationModal: vi.fn(),
-    setIsConnected: vi.fn(),
-    setSelectedIntegration: vi.fn(),
-    handleNotionAuthorization: vi.fn(),
-  };
-
-  test("shows empty state when no databases", () => {
-    render(
-      <ManageIntegration
-        {...defaultProps}
-        notionIntegration={
-          {
-            id: "1",
-            config: {
-              data: [] as TIntegrationNotionConfigData[],
-              key: { workspace_name: "ws" } as TIntegrationNotionCredential,
-            } as TIntegrationNotionConfig,
-          } as TIntegrationNotion
-        }
-      />
-    );
-    expect(screen.getByText("environments.integrations.notion.no_databases_found")).toBeInTheDocument();
-  });
-
-  test("renders list and handles clicks", async () => {
-    const data = [
-      { surveyName: "S", databaseName: "D", createdAt: new Date().toISOString(), databaseId: "db" },
-    ] as unknown as TIntegrationNotionConfigData[];
-    render(
-      <ManageIntegration
-        {...defaultProps}
-        notionIntegration={
-          {
-            id: "1",
-            config: { data, key: { workspace_name: "ws" } as TIntegrationNotionCredential },
-          } as TIntegrationNotion
-        }
-      />
-    );
-    expect(screen.getByText("S")).toBeInTheDocument();
-    await userEvent.click(screen.getByText("S"));
-    expect(defaultProps.setSelectedIntegration).toHaveBeenCalledWith({ ...data[0], index: 0 });
-    expect(defaultProps.setOpenAddIntegrationModal).toHaveBeenCalled();
-  });
-
-  test("update and link new buttons invoke handlers", async () => {
-    render(
-      <ManageIntegration
-        {...defaultProps}
-        notionIntegration={
-          {
-            id: "1",
-            config: {
-              data: [],
-              key: { workspace_name: "ws" } as TIntegrationNotionCredential,
-            } as TIntegrationNotionConfig,
-          } as TIntegrationNotion
-        }
-      />
-    );
-    await userEvent.click(screen.getByText("environments.integrations.notion.update_connection"));
-    expect(defaultProps.handleNotionAuthorization).toHaveBeenCalled();
-    await userEvent.click(screen.getByText("environments.integrations.notion.link_new_database"));
-    expect(defaultProps.setOpenAddIntegrationModal).toHaveBeenCalled();
-  });
-});

apps/web/app/(app)/environments/[environmentId]/integrations/notion/components/ManageIntegration.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { deleteIntegrationAction } from "@/app/(app)/environments/[environmentId]/integrations/actions";
-import { timeSince } from "@/lib/time";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { Button } from "@/modules/ui/components/button";
 import { DeleteDialog } from "@/modules/ui/components/delete-dialog";
@@ -11,6 +10,7 @@ import { useTranslate } from "@tolgee/react";
 import { RefreshCcwIcon, Trash2Icon } from "lucide-react";
 import React, { useState } from "react";
 import toast from "react-hot-toast";
+import { timeSince } from "@formbricks/lib/time";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TIntegrationNotion, TIntegrationNotionConfigData } from "@formbricks/types/integration/notion";
 import { TUserLocale } from "@formbricks/types/user";
@@ -39,11 +39,11 @@ export const ManageIntegration = ({
   const { t } = useTranslate();
   const [isDeleteIntegrationModalOpen, setIsDeleteIntegrationModalOpen] = useState(false);
   const [isDeleting, setisDeleting] = useState(false);
-
-  let integrationArray: TIntegrationNotionConfigData[] = [];
-  if (notionIntegration?.config.data) {
-    integrationArray = notionIntegration.config.data;
-  }
+  const integrationArray = notionIntegration
+    ? notionIntegration.config.data
+      ? notionIntegration.config.data
+      : []
+    : [];
 
   const handleDeleteIntegration = async () => {
     setisDeleting(true);
@@ -121,9 +121,9 @@ export const ManageIntegration = ({
             {integrationArray &&
               integrationArray.map((data, index) => {
                 return (
-                  <button
-                    key={`${index}-${data.databaseId}`}
-                    className="grid h-16 w-full cursor-pointer grid-cols-6 content-center rounded-lg p-2 hover:bg-slate-100"
+                  <div
+                    key={index}
+                    className="m-2 grid h-16 cursor-pointer grid-cols-6 content-center rounded-lg hover:bg-slate-100"
                     onClick={() => {
                       editIntegration(index);
                     }}>
@@ -132,7 +132,7 @@ export const ManageIntegration = ({
                     <div className="col-span-2 text-center">
                       {timeSince(data.createdAt.toString(), locale)}
                     </div>
-                  </button>
+                  </div>
                 );
               })}
           </div>

apps/web/app/(app)/environments/[environmentId]/integrations/notion/constants.ts

@@ -25,8 +25,6 @@ export const TYPE_MAPPING = {
   [TSurveyQuestionTypeEnum.Address]: ["rich_text"],
   [TSurveyQuestionTypeEnum.Matrix]: ["rich_text"],
   [TSurveyQuestionTypeEnum.Cal]: ["checkbox"],
-  [TSurveyQuestionTypeEnum.ContactInfo]: ["rich_text"],
-  [TSurveyQuestionTypeEnum.Ranking]: ["rich_text"],
 };
 
 export const UNSUPPORTED_TYPES_BY_NOTION = [

apps/web/app/(app)/environments/[environmentId]/integrations/notion/page.tsx

@@ -1,21 +1,21 @@
 import { getSurveys } from "@/app/(app)/environments/[environmentId]/integrations/lib/surveys";
 import { NotionWrapper } from "@/app/(app)/environments/[environmentId]/integrations/notion/components/NotionWrapper";
-import {
-  NOTION_AUTH_URL,
-  NOTION_OAUTH_CLIENT_ID,
-  NOTION_OAUTH_CLIENT_SECRET,
-  NOTION_REDIRECT_URI,
-  WEBAPP_URL,
-} from "@/lib/constants";
-import { getIntegrationByType } from "@/lib/integration/service";
-import { getNotionDatabases } from "@/lib/notion/service";
-import { findMatchingLocale } from "@/lib/utils/locale";
 import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
 import { GoBackButton } from "@/modules/ui/components/go-back-button";
 import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
 import { PageHeader } from "@/modules/ui/components/page-header";
 import { getTranslate } from "@/tolgee/server";
 import { redirect } from "next/navigation";
+import {
+  NOTION_AUTH_URL,
+  NOTION_OAUTH_CLIENT_ID,
+  NOTION_OAUTH_CLIENT_SECRET,
+  NOTION_REDIRECT_URI,
+  WEBAPP_URL,
+} from "@formbricks/lib/constants";
+import { getIntegrationByType } from "@formbricks/lib/integration/service";
+import { getNotionDatabases } from "@formbricks/lib/notion/service";
+import { findMatchingLocale } from "@formbricks/lib/utils/locale";
 import { TIntegrationNotion, TIntegrationNotionDatabase } from "@formbricks/types/integration/notion";
 
 const Page = async (props) => {

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

@@ -9,7 +9,6 @@ import notionLogo from "@/images/notion.png";
 import SlackLogo from "@/images/slacklogo.png";
 import WebhookLogo from "@/images/webhook.png";
 import ZapierLogo from "@/images/zapier-small.png";
-import { getIntegrations } from "@/lib/integration/service";
 import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
 import { Card } from "@/modules/ui/components/integration-card";
 import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
@@ -17,6 +16,7 @@ import { PageHeader } from "@/modules/ui/components/page-header";
 import { getTranslate } from "@/tolgee/server";
 import Image from "next/image";
 import { redirect } from "next/navigation";
+import { getIntegrations } from "@formbricks/lib/integration/service";
 import { TIntegrationType } from "@formbricks/types/integration";
 
 const Page = async (props) => {

apps/web/app/(app)/environments/[environmentId]/integrations/slack/actions.ts

@@ -1,10 +1,10 @@
 "use server";
 
-import { getSlackChannels } from "@/lib/slack/service";
 import { authenticatedActionClient } from "@/lib/utils/action-client";
 import { checkAuthorizationUpdated } from "@/lib/utils/action-client-middleware";
 import { getOrganizationIdFromEnvironmentId, getProjectIdFromEnvironmentId } from "@/lib/utils/helper";
 import { z } from "zod";
+import { getSlackChannels } from "@formbricks/lib/slack/service";
 import { ZId } from "@formbricks/types/common";
 
 const ZGetSlackChannelsAction = z.object({

apps/web/app/(app)/environments/[environmentId]/integrations/slack/components/AddChannelMappingModal.tsx

@@ -2,8 +2,6 @@
 
 import { createOrUpdateIntegrationAction } from "@/app/(app)/environments/[environmentId]/integrations/actions";
 import SlackLogo from "@/images/slacklogo.png";
-import { getLocalizedValue } from "@/lib/i18n/utils";
-import { replaceHeadlineRecall } from "@/lib/utils/recall";
 import { AdditionalIntegrationSettings } from "@/modules/ui/components/additional-integration-settings";
 import { Button } from "@/modules/ui/components/button";
 import { Checkbox } from "@/modules/ui/components/checkbox";
@@ -17,6 +15,8 @@ import Link from "next/link";
 import { useEffect, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 import toast from "react-hot-toast";
+import { getLocalizedValue } from "@formbricks/lib/i18n/utils";
+import { replaceHeadlineRecall } from "@formbricks/lib/utils/recall";
 import { TIntegrationItem } from "@formbricks/types/integration";
 import {
   TIntegrationSlack,

apps/web/app/(app)/environments/[environmentId]/integrations/slack/components/ManageIntegration.test.tsx

@@ -1,158 +0,0 @@
-import { deleteIntegrationAction } from "@/app/(app)/environments/[environmentId]/integrations/actions";
-import { cleanup, render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { afterEach, describe, expect, test, vi } from "vitest";
-import { TEnvironment } from "@formbricks/types/environment";
-import { TIntegrationSlack, TIntegrationSlackConfigData } from "@formbricks/types/integration/slack";
-import { ManageIntegration } from "./ManageIntegration";
-
-vi.mock("@/app/(app)/environments/[environmentId]/integrations/actions", () => ({
-  deleteIntegrationAction: vi.fn(),
-}));
-vi.mock("react-hot-toast", () => ({ default: { success: vi.fn(), error: vi.fn() } }));
-vi.mock("@/modules/ui/components/delete-dialog", () => ({
-  DeleteDialog: ({ open, setOpen, onDelete }: any) =>
-    open ? (
-      <div data-testid="delete-dialog">
-        <button onClick={onDelete}>confirm</button>
-        <button onClick={() => setOpen(false)}>cancel</button>
-      </div>
-    ) : null,
-}));
-vi.mock("@/modules/ui/components/empty-space-filler", () => ({
-  EmptySpaceFiller: ({ emptyMessage }: any) => <div>{emptyMessage}</div>,
-}));
-
-const baseProps = {
-  environment: { id: "env1" } as TEnvironment,
-  setOpenAddIntegrationModal: vi.fn(),
-  setIsConnected: vi.fn(),
-  setSelectedIntegration: vi.fn(),
-  refreshChannels: vi.fn(),
-  handleSlackAuthorization: vi.fn(),
-  showReconnectButton: false,
-  locale: "en-US" as const,
-};
-
-describe("ManageIntegration (Slack)", () => {
-  afterEach(() => cleanup());
-
-  test("empty state", () => {
-    render(
-      <ManageIntegration
-        {...baseProps}
-        slackIntegration={
-          {
-            id: "1",
-            config: { data: [], key: { team: { name: "team name" } } },
-          } as unknown as TIntegrationSlack
-        }
-      />
-    );
-    expect(screen.getByText(/connect_your_first_slack_channel/)).toBeInTheDocument();
-    expect(screen.getByText(/link_channel/)).toBeInTheDocument();
-  });
-
-  test("link channel triggers handlers", async () => {
-    render(
-      <ManageIntegration
-        {...baseProps}
-        slackIntegration={
-          {
-            id: "1",
-            config: { data: [], key: { team: { name: "team name" } } },
-          } as unknown as TIntegrationSlack
-        }
-      />
-    );
-    await userEvent.click(screen.getByText(/link_channel/));
-    expect(baseProps.refreshChannels).toHaveBeenCalled();
-    expect(baseProps.setSelectedIntegration).toHaveBeenCalledWith(null);
-    expect(baseProps.setOpenAddIntegrationModal).toHaveBeenCalledWith(true);
-  });
-
-  test("show reconnect button and triggers authorization", async () => {
-    render(
-      <ManageIntegration
-        {...baseProps}
-        showReconnectButton={true}
-        slackIntegration={
-          {
-            id: "1",
-            config: { data: [], key: { team: { name: "Team" } } },
-          } as unknown as TIntegrationSlack
-        }
-      />
-    );
-    expect(screen.getByText("environments.integrations.slack.slack_reconnect_button")).toBeInTheDocument();
-    await userEvent.click(screen.getByText("environments.integrations.slack.slack_reconnect_button"));
-    expect(baseProps.handleSlackAuthorization).toHaveBeenCalled();
-  });
-
-  test("list integrations and open edit", async () => {
-    const item = {
-      surveyName: "S",
-      channelName: "C",
-      questions: "Q",
-      createdAt: new Date().toISOString(),
-      surveyId: "s",
-      channelId: "c",
-    } as unknown as TIntegrationSlackConfigData;
-    render(
-      <ManageIntegration
-        {...baseProps}
-        slackIntegration={
-          {
-            id: "1",
-            config: { data: [item], key: { team: { name: "team name" } } },
-          } as unknown as TIntegrationSlack
-        }
-      />
-    );
-    expect(screen.getByText("S")).toBeInTheDocument();
-    await userEvent.click(screen.getByText("S"));
-    expect(baseProps.setSelectedIntegration).toHaveBeenCalledWith({ ...item, index: 0 });
-    expect(baseProps.setOpenAddIntegrationModal).toHaveBeenCalledWith(true);
-  });
-
-  test("delete integration success", async () => {
-    vi.mocked(deleteIntegrationAction).mockResolvedValue({ data: true } as any);
-    render(
-      <ManageIntegration
-        {...baseProps}
-        slackIntegration={
-          {
-            id: "1",
-            config: { data: [], key: { team: { name: "team name" } } },
-          } as unknown as TIntegrationSlack
-        }
-      />
-    );
-    await userEvent.click(screen.getByText(/delete_integration/));
-    expect(screen.getByTestId("delete-dialog")).toBeInTheDocument();
-    await userEvent.click(screen.getByText("confirm"));
-    expect(deleteIntegrationAction).toHaveBeenCalledWith({ integrationId: "1" });
-    const { default: toast } = await import("react-hot-toast");
-    expect(toast.success).toHaveBeenCalledWith("environments.integrations.integration_removed_successfully");
-    expect(baseProps.setIsConnected).toHaveBeenCalledWith(false);
-  });
-
-  test("delete integration error", async () => {
-    vi.mocked(deleteIntegrationAction).mockResolvedValue({ error: "fail" } as any);
-    render(
-      <ManageIntegration
-        {...baseProps}
-        slackIntegration={
-          {
-            id: "1",
-            config: { data: [], key: { team: { name: "team name" } } },
-          } as unknown as TIntegrationSlack
-        }
-      />
-    );
-    await userEvent.click(screen.getByText(/delete_integration/));
-    await userEvent.click(screen.getByText("confirm"));
-    const { default: toast } = await import("react-hot-toast");
-    expect(toast.error).toHaveBeenCalledWith(expect.any(String));
-  });
-});

apps/web/app/(app)/environments/[environmentId]/integrations/slack/components/ManageIntegration.tsx

@@ -1,15 +1,16 @@
 "use client";
 
 import { deleteIntegrationAction } from "@/app/(app)/environments/[environmentId]/integrations/actions";
-import { timeSince } from "@/lib/time";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { Button } from "@/modules/ui/components/button";
 import { DeleteDialog } from "@/modules/ui/components/delete-dialog";
 import { EmptySpaceFiller } from "@/modules/ui/components/empty-space-filler";
-import { T, useTranslate } from "@tolgee/react";
+import { useTranslate } from "@tolgee/react";
+import { T } from "@tolgee/react";
 import { Trash2Icon } from "lucide-react";
 import React, { useState } from "react";
 import toast from "react-hot-toast";
+import { timeSince } from "@formbricks/lib/time";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TIntegrationSlack, TIntegrationSlackConfigData } from "@formbricks/types/integration/slack";
 import { TUserLocale } from "@formbricks/types/user";
@@ -42,10 +43,11 @@ export const ManageIntegration = ({
   const { t } = useTranslate();
   const [isDeleteIntegrationModalOpen, setIsDeleteIntegrationModalOpen] = useState(false);
   const [isDeleting, setisDeleting] = useState(false);
-  let integrationArray: TIntegrationSlackConfigData[] = [];
-  if (slackIntegration?.config.data) {
-    integrationArray = slackIntegration.config.data;
-  }
+  const integrationArray = slackIntegration
+    ? slackIntegration.config.data
+      ? slackIntegration.config.data
+      : []
+    : [];
 
   const handleDeleteIntegration = async () => {
     setisDeleting(true);
@@ -127,9 +129,9 @@ export const ManageIntegration = ({
             {integrationArray &&
               integrationArray.map((data, index) => {
                 return (
-                  <button
-                    key={`${index}-${data.surveyName}-${data.channelName}`}
-                    className="grid h-16 w-full grid-cols-8 content-center rounded-lg p-2 text-slate-700 hover:cursor-pointer hover:bg-slate-100"
+                  <div
+                    key={index}
+                    className="m-2 grid h-16 grid-cols-8 content-center rounded-lg text-slate-700 hover:cursor-pointer hover:bg-slate-100"
                     onClick={() => {
                       editIntegration(index);
                     }}>
@@ -139,7 +141,7 @@ export const ManageIntegration = ({
                     <div className="col-span-2 text-center">
                       {timeSince(data.createdAt.toString(), locale)}
                     </div>
-                  </button>
+                  </div>
                 );
               })}
           </div>

apps/web/app/(app)/environments/[environmentId]/integrations/slack/page.tsx

@@ -1,14 +1,14 @@
 import { getSurveys } from "@/app/(app)/environments/[environmentId]/integrations/lib/surveys";
 import { SlackWrapper } from "@/app/(app)/environments/[environmentId]/integrations/slack/components/SlackWrapper";
-import { SLACK_CLIENT_ID, SLACK_CLIENT_SECRET, WEBAPP_URL } from "@/lib/constants";
-import { getIntegrationByType } from "@/lib/integration/service";
-import { findMatchingLocale } from "@/lib/utils/locale";
 import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
 import { GoBackButton } from "@/modules/ui/components/go-back-button";
 import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
 import { PageHeader } from "@/modules/ui/components/page-header";
 import { getTranslate } from "@/tolgee/server";
 import { redirect } from "next/navigation";
+import { SLACK_CLIENT_ID, SLACK_CLIENT_SECRET, WEBAPP_URL } from "@formbricks/lib/constants";
+import { getIntegrationByType } from "@formbricks/lib/integration/service";
+import { findMatchingLocale } from "@formbricks/lib/utils/locale";
 import { TIntegrationSlack } from "@formbricks/types/integration/slack";
 
 const Page = async (props) => {

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

@@ -1,156 +1,250 @@
-import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
-import { getProjectByEnvironmentId } from "@/lib/project/service";
-import { environmentIdLayoutChecks } from "@/modules/environments/lib/utils";
-import { cleanup, render, screen } from "@testing-library/react";
-import { Session } from "next-auth";
-import { redirect } from "next/navigation";
-import { afterEach, describe, expect, test, vi } from "vitest";
+import "@testing-library/jest-dom/vitest";
+import { act, cleanup, render, screen } from "@testing-library/react";
+import { getServerSession } from "next-auth";
+import { notFound, redirect } from "next/navigation";
+import React from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { hasUserEnvironmentAccess } from "@formbricks/lib/environment/auth";
+import { getMembershipByUserIdOrganizationId } from "@formbricks/lib/membership/service";
+import { getOrganizationByEnvironmentId } from "@formbricks/lib/organization/service";
+import { getProjectByEnvironmentId } from "@formbricks/lib/project/service";
+import { getUser } from "@formbricks/lib/user/service";
+import { AuthorizationError } from "@formbricks/types/errors";
 import { TMembership } from "@formbricks/types/memberships";
 import { TOrganization } from "@formbricks/types/organizations";
 import { TProject } from "@formbricks/types/project";
 import { TUser } from "@formbricks/types/user";
 import EnvLayout from "./layout";
 
-// Mock sub-components to render identifiable elements
-vi.mock("@/app/(app)/environments/[environmentId]/components/EnvironmentLayout", () => ({
-  EnvironmentLayout: ({ children }: any) => <div data-testid="EnvironmentLayout">{children}</div>,
-}));
-vi.mock("@/modules/ui/components/environmentId-base-layout", () => ({
-  EnvironmentIdBaseLayout: ({ children, environmentId }: any) => (
-    <div data-testid="EnvironmentIdBaseLayout">
-      {environmentId}
-      {children}
-    </div>
-  ),
-}));
-vi.mock("@/modules/ui/components/toaster-client", () => ({
-  ToasterClient: () => <div data-testid="ToasterClient" />,
-}));
-vi.mock("../../components/FormbricksClient", () => ({
-  FormbricksClient: ({ userId, email }: any) => (
-    <div data-testid="FormbricksClient">
-      {userId}-{email}
-    </div>
-  ),
-}));
-vi.mock("./components/EnvironmentStorageHandler", () => ({
-  default: ({ environmentId }: any) => <div data-testid="EnvironmentStorageHandler">{environmentId}</div>,
+// mock all the dependencies
+
+vi.mock("@formbricks/lib/constants", () => ({
+  IS_FORMBRICKS_CLOUD: false,
+  POSTHOG_API_KEY: "mock-posthog-api-key",
+  POSTHOG_HOST: "mock-posthog-host",
+  IS_POSTHOG_CONFIGURED: true,
+  ENCRYPTION_KEY: "mock-encryption-key",
+  ENTERPRISE_LICENSE_KEY: "mock-enterprise-license-key",
+  GITHUB_ID: "mock-github-id",
+  GITHUB_SECRET: "test-githubID",
+  GOOGLE_CLIENT_ID: "test-google-client-id",
+  GOOGLE_CLIENT_SECRET: "test-google-client-secret",
+  AZUREAD_CLIENT_ID: "test-azuread-client-id",
+  AZUREAD_CLIENT_SECRET: "test-azure",
+  AZUREAD_TENANT_ID: "test-azuread-tenant-id",
+  OIDC_DISPLAY_NAME: "test-oidc-display-name",
+  OIDC_CLIENT_ID: "test-oidc-client-id",
+  OIDC_ISSUER: "test-oidc-issuer",
+  OIDC_CLIENT_SECRET: "test-oidc-client-secret",
+  OIDC_SIGNING_ALGORITHM: "test-oidc-signing-algorithm",
+  WEBAPP_URL: "test-webapp-url",
+  IS_PRODUCTION: false,
 }));
 
-// Mocks for dependencies
-vi.mock("@/modules/environments/lib/utils", () => ({
-  environmentIdLayoutChecks: vi.fn(),
+vi.mock("@/tolgee/server", () => ({
+  getTranslate: vi.fn(() => {
+    return (key: string) => {
+      return key;
+    };
+  }),
 }));
-vi.mock("@/lib/project/service", () => ({
+
+vi.mock("next-auth", () => ({
+  getServerSession: vi.fn(),
+}));
+vi.mock("@formbricks/lib/environment/auth", () => ({
+  hasUserEnvironmentAccess: vi.fn(),
+}));
+vi.mock("@formbricks/lib/membership/service", () => ({
+  getMembershipByUserIdOrganizationId: vi.fn(),
+}));
+vi.mock("@formbricks/lib/organization/service", () => ({
+  getOrganizationByEnvironmentId: vi.fn(),
+}));
+vi.mock("@formbricks/lib/project/service", () => ({
   getProjectByEnvironmentId: vi.fn(),
 }));
-vi.mock("@/lib/membership/service", () => ({
-  getMembershipByUserIdOrganizationId: vi.fn(),
+vi.mock("@formbricks/lib/user/service", () => ({
+  getUser: vi.fn(),
+}));
+vi.mock("@formbricks/lib/aiModels", () => ({
+  llmModel: {},
+}));
+
+// mock all the components that are rendered in the layout
+
+vi.mock("./components/PosthogIdentify", () => ({
+  PosthogIdentify: () => <div data-testid="posthog-identify" />,
+}));
+vi.mock("@/app/(app)/components/FormbricksClient", () => ({
+  FormbricksClient: () => <div data-testid="formbricks-client" />,
+}));
+vi.mock("@/modules/ui/components/toaster-client", () => ({
+  ToasterClient: () => <div data-testid="mock-toaster" />,
+}));
+vi.mock("./components/EnvironmentStorageHandler", () => ({
+  default: () => <div data-testid="mock-storage-handler" />,
+}));
+vi.mock("@/app/(app)/environments/[environmentId]/components/ResponseFilterContext", () => ({
+  ResponseFilterProvider: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="mock-response-filter-provider">{children}</div>
+  ),
+}));
+vi.mock("@/app/(app)/environments/[environmentId]/components/EnvironmentLayout", () => ({
+  EnvironmentLayout: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="mock-environment-result">{children}</div>
+  ),
 }));
 
 describe("EnvLayout", () => {
-  afterEach(() => {
+  beforeEach(() => {
     cleanup();
   });
 
-  test("renders successfully when all dependencies return valid data", async () => {
-    vi.mocked(environmentIdLayoutChecks).mockResolvedValueOnce({
-      t: ((key: string) => key) as any, // Mock translation function, we don't need to implement it for the test
-      session: { user: { id: "user1" } } as Session,
-      user: { id: "user1", email: "user1@example.com" } as TUser,
-      organization: { id: "org1", name: "Org1", billing: {} } as TOrganization,
-    });
-    vi.mocked(getProjectByEnvironmentId).mockResolvedValueOnce({ id: "proj1" } as TProject);
-    vi.mocked(getMembershipByUserIdOrganizationId).mockResolvedValueOnce({
-      id: "member1",
-    } as unknown as TMembership);
+  it("redirects to /auth/login if there is no session", async () => {
+    vi.mocked(getServerSession).mockResolvedValueOnce(null);
 
-    const result = await EnvLayout({
-      params: Promise.resolve({ environmentId: "env1" }),
-      children: <div data-testid="child">Content</div>,
+    // Since it's an async server component, call EnvLayout yourself:
+    const layoutElement = await EnvLayout({
+      params: Promise.resolve({ environmentId: "env-123" }),
+      children: <div data-testid="child-content">Hello!</div>,
     });
-    render(result);
 
-    expect(screen.getByTestId("EnvironmentIdBaseLayout")).toHaveTextContent("env1");
-    expect(screen.getByTestId("EnvironmentStorageHandler")).toHaveTextContent("env1");
-    expect(screen.getByTestId("EnvironmentLayout")).toBeDefined();
-    expect(screen.getByTestId("child")).toHaveTextContent("Content");
+    // Because we have no session, we expect a redirect to "/auth/login"
+    expect(redirect).toHaveBeenCalledWith("/auth/login");
+
+    // If your code calls redirect() early and returns no JSX,
+    // layoutElement might be undefined or null.
+    expect(layoutElement).toBeUndefined();
   });
 
-  test("throws error if project is not found", async () => {
-    vi.mocked(environmentIdLayoutChecks).mockResolvedValueOnce({
-      t: ((key: string) => key) as any,
-      session: { user: { id: "user1" } } as Session,
-      user: { id: "user1", email: "user1@example.com" } as TUser,
-      organization: { id: "org1", name: "Org1", billing: {} } as TOrganization,
+  it("redirects to /auth/login if user does not exist in DB", async () => {
+    vi.mocked(getServerSession).mockResolvedValueOnce({
+      user: { id: "user-123" },
     });
-    vi.mocked(getProjectByEnvironmentId).mockResolvedValueOnce(null);
-    vi.mocked(getMembershipByUserIdOrganizationId).mockResolvedValueOnce({
-      id: "member1",
-    } as unknown as TMembership);
+
+    vi.mocked(getUser).mockResolvedValueOnce(null); // user not found
+
+    const layoutElement = await EnvLayout({
+      params: Promise.resolve({ environmentId: "env-123" }),
+      children: <div data-testid="child-content">Hello!</div>,
+    });
+
+    expect(redirect).toHaveBeenCalledWith("/auth/login");
+    expect(layoutElement).toBeUndefined();
+  });
+
+  it("throws AuthorizationError if user does not have environment access", async () => {
+    vi.mocked(getServerSession).mockResolvedValueOnce({
+      user: { id: "user-123" },
+    });
+    vi.mocked(getUser).mockResolvedValueOnce({
+      id: "user-123",
+      email: "test@example.com",
+    } as TUser);
+    vi.mocked(hasUserEnvironmentAccess).mockResolvedValueOnce(false);
 
     await expect(
       EnvLayout({
-        params: Promise.resolve({ environmentId: "env1" }),
-        children: <div>Content</div>,
+        params: Promise.resolve({ environmentId: "env-123" }),
+        children: <div>Child</div>,
       })
-    ).rejects.toThrow("common.project_not_found");
+    ).rejects.toThrow(AuthorizationError);
   });
 
-  test("throws error if membership is not found", async () => {
-    vi.mocked(environmentIdLayoutChecks).mockResolvedValueOnce({
-      t: ((key: string) => key) as any,
-      session: { user: { id: "user1" } } as Session,
-      user: { id: "user1", email: "user1@example.com" } as TUser,
-      organization: { id: "org1", name: "Org1", billing: {} } as TOrganization,
+  it("throws if no organization is found", async () => {
+    vi.mocked(getServerSession).mockResolvedValueOnce({
+      user: { id: "user-123" },
     });
-    vi.mocked(getProjectByEnvironmentId).mockResolvedValueOnce({ id: "proj1" } as TProject);
+    vi.mocked(getUser).mockResolvedValueOnce({
+      id: "user-123",
+      email: "test@example.com",
+    } as TUser);
+    vi.mocked(hasUserEnvironmentAccess).mockResolvedValueOnce(true);
+    vi.mocked(getOrganizationByEnvironmentId).mockResolvedValueOnce(null);
+
+    await expect(
+      EnvLayout({
+        params: Promise.resolve({ environmentId: "env-123" }),
+        children: <div data-testid="child-content">Hello from children!</div>,
+      })
+    ).rejects.toThrow("common.organization_not_found");
+  });
+
+  it("throws if no project is found", async () => {
+    vi.mocked(getServerSession).mockResolvedValueOnce({
+      user: { id: "user-123" },
+    });
+    vi.mocked(getUser).mockResolvedValueOnce({
+      id: "user-123",
+      email: "test@example.com",
+    } as TUser);
+    vi.mocked(hasUserEnvironmentAccess).mockResolvedValueOnce(true);
+    vi.mocked(getOrganizationByEnvironmentId).mockResolvedValueOnce({ id: "org-999" } as TOrganization);
+    vi.mocked(getProjectByEnvironmentId).mockResolvedValueOnce(null);
+
+    await expect(
+      EnvLayout({
+        params: Promise.resolve({ environmentId: "env-123" }),
+        children: <div>Child</div>,
+      })
+    ).rejects.toThrow("project_not_found");
+  });
+
+  it("calls notFound if membership is missing", async () => {
+    vi.mocked(getServerSession).mockResolvedValueOnce({
+      user: { id: "user-123" },
+    });
+    vi.mocked(getUser).mockResolvedValueOnce({
+      id: "user-123",
+      email: "test@example.com",
+    } as TUser);
+    vi.mocked(hasUserEnvironmentAccess).mockResolvedValueOnce(true);
+    vi.mocked(getOrganizationByEnvironmentId).mockResolvedValueOnce({ id: "org-999" } as TOrganization);
+    vi.mocked(getProjectByEnvironmentId).mockResolvedValueOnce({ id: "proj-111" } as TProject);
     vi.mocked(getMembershipByUserIdOrganizationId).mockResolvedValueOnce(null);
 
     await expect(
       EnvLayout({
-        params: Promise.resolve({ environmentId: "env1" }),
-        children: <div>Content</div>,
+        params: Promise.resolve({ environmentId: "env-123" }),
+        children: <div>Child</div>,
       })
-    ).rejects.toThrow("common.membership_not_found");
+    ).rejects.toThrow("membership_not_found");
   });
 
-  test("calls redirect when session is null", async () => {
-    vi.mocked(environmentIdLayoutChecks).mockResolvedValueOnce({
-      t: ((key: string) => key) as any,
-      session: undefined as unknown as Session,
-      user: undefined as unknown as TUser,
-      organization: { id: "org1", name: "Org1", billing: {} } as TOrganization,
+  it("renders environment layout if everything is valid", async () => {
+    vi.mocked(getServerSession).mockResolvedValueOnce({
+      user: { id: "user-123" },
     });
-    vi.mocked(redirect).mockImplementationOnce(() => {
-      throw new Error("Redirect called");
+    vi.mocked(getUser).mockResolvedValueOnce({
+      id: "user-123",
+      email: "test@example.com",
+    } as TUser);
+    vi.mocked(hasUserEnvironmentAccess).mockResolvedValueOnce(true);
+    vi.mocked(getOrganizationByEnvironmentId).mockResolvedValueOnce({ id: "org-999" } as TOrganization);
+    vi.mocked(getProjectByEnvironmentId).mockResolvedValueOnce({ id: "proj-111" } as TProject);
+    vi.mocked(getMembershipByUserIdOrganizationId).mockResolvedValueOnce({
+      id: "membership-123",
+    } as unknown as TMembership);
+
+    let layoutElement: React.ReactNode;
+
+    await act(async () => {
+      layoutElement = await EnvLayout({
+        params: Promise.resolve({ environmentId: "env-123" }),
+        children: <div data-testid="child-content">Hello from children!</div>,
+      });
+
+      // Now render the fully resolved layout
+      render(layoutElement);
     });
 
-    await expect(
-      EnvLayout({
-        params: Promise.resolve({ environmentId: "env1" }),
-        children: <div>Content</div>,
-      })
-    ).rejects.toThrow("Redirect called");
-  });
-
-  test("throws error if user is null", async () => {
-    vi.mocked(environmentIdLayoutChecks).mockResolvedValueOnce({
-      t: ((key: string) => key) as any,
-      session: { user: { id: "user1" } } as Session,
-      user: undefined as unknown as TUser,
-      organization: { id: "org1", name: "Org1", billing: {} } as TOrganization,
-    });
-
-    vi.mocked(redirect).mockImplementationOnce(() => {
-      throw new Error("Redirect called");
-    });
-
-    await expect(
-      EnvLayout({
-        params: Promise.resolve({ environmentId: "env1" }),
-        children: <div>Content</div>,
-      })
-    ).rejects.toThrow("common.user_not_found");
+    expect(screen.getByTestId("child-content")).toHaveTextContent("Hello from children!");
+    expect(screen.getByTestId("posthog-identify")).toBeInTheDocument();
+    expect(screen.getByTestId("formbricks-client")).toBeInTheDocument();
+    expect(screen.getByTestId("mock-toaster")).toBeInTheDocument();
+    expect(screen.getByTestId("mock-storage-handler")).toBeInTheDocument();
+    expect(screen.getByTestId("mock-response-filter-provider")).toBeInTheDocument();
+    expect(screen.getByTestId("mock-environment-result")).toBeInTheDocument();
   });
 });

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

@@ -1,10 +1,20 @@
 import { EnvironmentLayout } from "@/app/(app)/environments/[environmentId]/components/EnvironmentLayout";
-import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
-import { getProjectByEnvironmentId } from "@/lib/project/service";
-import { environmentIdLayoutChecks } from "@/modules/environments/lib/utils";
-import { EnvironmentIdBaseLayout } from "@/modules/ui/components/environmentId-base-layout";
+import { ResponseFilterProvider } from "@/app/(app)/environments/[environmentId]/components/ResponseFilterContext";
+import { authOptions } from "@/modules/auth/lib/authOptions";
+import { ToasterClient } from "@/modules/ui/components/toaster-client";
+import { getTranslate } from "@/tolgee/server";
+import { getServerSession } from "next-auth";
 import { redirect } from "next/navigation";
+import { IS_POSTHOG_CONFIGURED } from "@formbricks/lib/constants";
+import { hasUserEnvironmentAccess } from "@formbricks/lib/environment/auth";
+import { getMembershipByUserIdOrganizationId } from "@formbricks/lib/membership/service";
+import { getOrganizationByEnvironmentId } from "@formbricks/lib/organization/service";
+import { getProjectByEnvironmentId } from "@formbricks/lib/project/service";
+import { getUser } from "@formbricks/lib/user/service";
+import { AuthorizationError } from "@formbricks/types/errors";
+import { FormbricksClient } from "../../components/FormbricksClient";
 import EnvironmentStorageHandler from "./components/EnvironmentStorageHandler";
+import { PosthogIdentify } from "./components/PosthogIdentify";
 
 const EnvLayout = async (props: {
   params: Promise<{ environmentId: string }>;
@@ -14,16 +24,27 @@ const EnvLayout = async (props: {
 
   const { children } = props;
 
-  const { t, session, user, organization } = await environmentIdLayoutChecks(params.environmentId);
+  const t = await getTranslate();
+  const session = await getServerSession(authOptions);
 
-  if (!session) {
+  if (!session?.user) {
     return redirect(`/auth/login`);
   }
 
+  const user = await getUser(session.user.id);
   if (!user) {
-    throw new Error(t("common.user_not_found"));
+    return redirect(`/auth/login`);
   }
 
+  const hasAccess = await hasUserEnvironmentAccess(session.user.id, params.environmentId);
+  if (!hasAccess) {
+    throw new AuthorizationError(t("common.not_authorized"));
+  }
+
+  const organization = await getOrganizationByEnvironmentId(params.environmentId);
+  if (!organization) {
+    throw new Error(t("common.organization_not_found"));
+  }
   const project = await getProjectByEnvironmentId(params.environmentId);
   if (!project) {
     throw new Error(t("common.project_not_found"));
@@ -36,16 +57,23 @@ const EnvLayout = async (props: {
   }
 
   return (
-    <EnvironmentIdBaseLayout
-      environmentId={params.environmentId}
-      session={session}
-      user={user}
-      organization={organization}>
+    <ResponseFilterProvider>
+      <PosthogIdentify
+        session={session}
+        user={user}
+        environmentId={params.environmentId}
+        organizationId={organization.id}
+        organizationName={organization.name}
+        organizationBilling={organization.billing}
+        isPosthogEnabled={IS_POSTHOG_CONFIGURED}
+      />
+      <FormbricksClient userId={user.id} email={user.email} />
+      <ToasterClient />
       <EnvironmentStorageHandler environmentId={params.environmentId} />
       <EnvironmentLayout environmentId={params.environmentId} session={session}>
         {children}
       </EnvironmentLayout>
-    </EnvironmentIdBaseLayout>
+    </ResponseFilterProvider>
   );
 };
 

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

@@ -1,7 +1,7 @@
-import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
-import { getAccessFlags } from "@/lib/membership/utils";
 import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
 import { redirect } from "next/navigation";
+import { getMembershipByUserIdOrganizationId } from "@formbricks/lib/membership/service";
+import { getAccessFlags } from "@formbricks/lib/membership/utils";
 
 const EnvironmentPage = async (props) => {
   const params = await props.params;

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

@@ -1,8 +1,8 @@
-import { getOrganizationByEnvironmentId } from "@/lib/organization/service";
-import { getProjectByEnvironmentId } from "@/lib/project/service";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 import { getTranslate } from "@/tolgee/server";
 import { getServerSession } from "next-auth";
+import { getOrganizationByEnvironmentId } from "@formbricks/lib/organization/service";
+import { getProjectByEnvironmentId } from "@formbricks/lib/project/service";
 
 const AccountSettingsLayout = async (props) => {
   const params = await props.params;

apps/web/app/(app)/environments/[environmentId]/settings/(account)/notifications/actions.ts

@@ -1,8 +1,8 @@
 "use server";
 
-import { updateUser } from "@/lib/user/service";
 import { authenticatedActionClient } from "@/lib/utils/action-client";
 import { z } from "zod";
+import { updateUser } from "@formbricks/lib/user/service";
 import { ZUserNotificationSettings } from "@formbricks/types/user";
 
 const ZUpdateNotificationSettingsAction = z.object({

apps/web/app/(app)/environments/[environmentId]/settings/(account)/notifications/page.tsx

@@ -1,12 +1,12 @@
 import { AccountSettingsNavbar } from "@/app/(app)/environments/[environmentId]/settings/(account)/components/AccountSettingsNavbar";
 import { SettingsCard } from "@/app/(app)/environments/[environmentId]/settings/components/SettingsCard";
-import { getUser } from "@/lib/user/service";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
 import { PageHeader } from "@/modules/ui/components/page-header";
 import { getTranslate } from "@/tolgee/server";
 import { getServerSession } from "next-auth";
 import { prisma } from "@formbricks/database";
+import { getUser } from "@formbricks/lib/user/service";
 import { TUserNotificationSettings } from "@formbricks/types/user";
 import { EditAlerts } from "./components/EditAlerts";
 import { EditWeeklySummary } from "./components/EditWeeklySummary";

apps/web/app/(app)/environments/[environmentId]/settings/(account)/profile/actions.ts

@@ -1,10 +1,10 @@
 "use server";
 
-import { deleteFile } from "@/lib/storage/service";
-import { getFileNameWithIdFromUrl } from "@/lib/storage/utils";
-import { updateUser } from "@/lib/user/service";
 import { authenticatedActionClient } from "@/lib/utils/action-client";
 import { z } from "zod";
+import { deleteFile } from "@formbricks/lib/storage/service";
+import { getFileNameWithIdFromUrl } from "@formbricks/lib/storage/utils";
+import { updateUser } from "@formbricks/lib/user/service";
 import { ZId } from "@formbricks/types/common";
 import { ZUserUpdateInput } from "@formbricks/types/user";
 

apps/web/app/(app)/environments/[environmentId]/settings/(account)/profile/components/EditProfileDetailsForm.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { appLanguages } from "@/lib/i18n/utils";
 import { Button } from "@/modules/ui/components/button";
 import {
   DropdownMenu,
@@ -24,6 +23,7 @@ import { ChevronDownIcon } from "lucide-react";
 import { SubmitHandler, useForm } from "react-hook-form";
 import toast from "react-hot-toast";
 import { z } from "zod";
+import { appLanguages } from "@formbricks/lib/i18n/utils";
 import { TUser, ZUser } from "@formbricks/types/user";
 import { updateUserAction } from "../actions";
 

apps/web/app/(app)/environments/[environmentId]/settings/(account)/profile/page.tsx

@@ -1,8 +1,5 @@
 import { AccountSettingsNavbar } from "@/app/(app)/environments/[environmentId]/settings/(account)/components/AccountSettingsNavbar";
 import { AccountSecurity } from "@/app/(app)/environments/[environmentId]/settings/(account)/profile/components/AccountSecurity";
-import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
-import { getOrganizationsWhereUserIsSingleOwner } from "@/lib/organization/service";
-import { getUser } from "@/lib/user/service";
 import { getIsMultiOrgEnabled, getIsTwoFactorAuthEnabled } from "@/modules/ee/license-check/lib/utils";
 import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
 import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
@@ -10,6 +7,9 @@ import { PageHeader } from "@/modules/ui/components/page-header";
 import { SettingsId } from "@/modules/ui/components/settings-id";
 import { UpgradePrompt } from "@/modules/ui/components/upgrade-prompt";
 import { getTranslate } from "@/tolgee/server";
+import { IS_FORMBRICKS_CLOUD } from "@formbricks/lib/constants";
+import { getOrganizationsWhereUserIsSingleOwner } from "@formbricks/lib/organization/service";
+import { getUser } from "@formbricks/lib/user/service";
 import { SettingsCard } from "../../components/SettingsCard";
 import { DeleteAccount } from "./components/DeleteAccount";
 import { EditProfileAvatarForm } from "./components/EditProfileAvatarForm";

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/api-keys/loading.tsx

@@ -1,5 +1,5 @@
-import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
 import Loading from "@/modules/organization/settings/api-keys/loading";
+import { IS_FORMBRICKS_CLOUD } from "@formbricks/lib/constants";
 
 export default function LoadingPage() {
   return <Loading isFormbricksCloud={IS_FORMBRICKS_CLOUD} />;

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/billing/loading.tsx

@@ -1,8 +1,8 @@
 import { OrganizationSettingsNavbar } from "@/app/(app)/environments/[environmentId]/settings/(organization)/components/OrganizationSettingsNavbar";
-import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
 import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
 import { PageHeader } from "@/modules/ui/components/page-header";
 import { getTranslate } from "@/tolgee/server";
+import { IS_FORMBRICKS_CLOUD } from "@formbricks/lib/constants";
 
 const Loading = async () => {
   const t = await getTranslate();

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/components/OrganizationSettingsNavbar.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import { getAccessFlags } from "@/lib/membership/utils";
 import { SecondaryNavigation } from "@/modules/ui/components/secondary-navigation";
 import { useTranslate } from "@tolgee/react";
 import { usePathname } from "next/navigation";
+import { getAccessFlags } from "@formbricks/lib/membership/utils";
 import { TOrganizationRole } from "@formbricks/types/memberships";
 
 interface OrganizationSettingsNavbarProps {
@@ -22,7 +22,7 @@ export const OrganizationSettingsNavbar = ({
   loading,
 }: OrganizationSettingsNavbarProps) => {
   const pathname = usePathname();
-  const { isMember, isOwner } = getAccessFlags(membershipRole);
+  const { isMember } = getAccessFlags(membershipRole);
   const isPricingDisabled = isMember;
   const { t } = useTranslate();
 
@@ -59,7 +59,6 @@ export const OrganizationSettingsNavbar = ({
       label: t("common.api_keys"),
       href: `/environments/${environmentId}/settings/api-keys`,
       current: pathname?.includes("/api-keys"),
-      hidden: !isOwner,
     },
   ];
 

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/enterprise/loading.tsx

@@ -1,8 +1,8 @@
 import { OrganizationSettingsNavbar } from "@/app/(app)/environments/[environmentId]/settings/(organization)/components/OrganizationSettingsNavbar";
-import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
 import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
 import { PageHeader } from "@/modules/ui/components/page-header";
 import { getTranslate } from "@/tolgee/server";
+import { IS_FORMBRICKS_CLOUD } from "@formbricks/lib/constants";
 
 const Loading = async () => {
   const t = await getTranslate();

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/enterprise/page.tsx

@@ -1,5 +1,4 @@
 import { OrganizationSettingsNavbar } from "@/app/(app)/environments/[environmentId]/settings/(organization)/components/OrganizationSettingsNavbar";
-import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
 import { getEnterpriseLicense } from "@/modules/ee/license-check/lib/utils";
 import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
 import { Button } from "@/modules/ui/components/button";
@@ -9,6 +8,7 @@ import { getTranslate } from "@/tolgee/server";
 import { CheckIcon } from "lucide-react";
 import Link from "next/link";
 import { notFound } from "next/navigation";
+import { IS_FORMBRICKS_CLOUD } from "@formbricks/lib/constants";
 
 const Page = async (props) => {
   const params = await props.params;
@@ -123,7 +123,7 @@ const Page = async (props) => {
           <div className="relative isolate mt-8 overflow-hidden rounded-lg bg-slate-900 px-3 pt-8 shadow-2xl sm:px-8 md:pt-12 lg:flex lg:gap-x-10 lg:px-12 lg:pt-0">
             <svg
               viewBox="0 0 1024 1024"
-              className="absolute top-1/2 left-1/2 -z-10 h-[64rem] w-[64rem] -translate-y-1/2 [mask-image:radial-gradient(closest-side,white,transparent)] sm:left-full sm:-ml-80 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2 lg:translate-y-0"
+              className="absolute left-1/2 top-1/2 -z-10 h-[64rem] w-[64rem] -translate-y-1/2 [mask-image:radial-gradient(closest-side,white,transparent)] sm:left-full sm:-ml-80 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2 lg:translate-y-0"
               aria-hidden="true">
               <circle
                 cx={512}

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/general/actions.ts

@@ -1,10 +1,10 @@
 "use server";
 
-import { deleteOrganization, updateOrganization } from "@/lib/organization/service";
 import { authenticatedActionClient } from "@/lib/utils/action-client";
 import { checkAuthorizationUpdated } from "@/lib/utils/action-client-middleware";
 import { getIsMultiOrgEnabled } from "@/modules/ee/license-check/lib/utils";
 import { z } from "zod";
+import { deleteOrganization, updateOrganization } from "@formbricks/lib/organization/service";
 import { ZId } from "@formbricks/types/common";
 import { OperationNotAllowedError } from "@formbricks/types/errors";
 import { ZOrganizationUpdateInput } from "@formbricks/types/organizations";

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/general/components/DeleteOrganization.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { deleteOrganizationAction } from "@/app/(app)/environments/[environmentId]/settings/(organization)/general/actions";
-import { FORMBRICKS_ENVIRONMENT_ID_LS } from "@/lib/localStorage";
 import { Alert, AlertDescription } from "@/modules/ui/components/alert";
 import { Button } from "@/modules/ui/components/button";
 import { DeleteDialog } from "@/modules/ui/components/delete-dialog";
@@ -10,6 +9,7 @@ import { useTranslate } from "@tolgee/react";
 import { useRouter } from "next/navigation";
 import { Dispatch, SetStateAction, useState } from "react";
 import toast from "react-hot-toast";
+import { FORMBRICKS_ENVIRONMENT_ID_LS } from "@formbricks/lib/localStorage";
 import { TOrganization } from "@formbricks/types/organizations";
 
 type DeleteOrganizationProps = {

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/general/components/EditOrganizationNameForm.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { updateOrganizationNameAction } from "@/app/(app)/environments/[environmentId]/settings/(organization)/general/actions";
-import { getAccessFlags } from "@/lib/membership/utils";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { Alert, AlertDescription } from "@/modules/ui/components/alert";
 import { Button } from "@/modules/ui/components/button";
@@ -19,6 +18,7 @@ import { useTranslate } from "@tolgee/react";
 import { SubmitHandler, useForm } from "react-hook-form";
 import toast from "react-hot-toast";
 import { z } from "zod";
+import { getAccessFlags } from "@formbricks/lib/membership/utils";
 import { TOrganizationRole } from "@formbricks/types/memberships";
 import { TOrganization, ZOrganization } from "@formbricks/types/organizations";
 

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/general/loading.tsx

@@ -1,9 +1,9 @@
 import { LoadingCard } from "@/app/(app)/components/LoadingCard";
 import { OrganizationSettingsNavbar } from "@/app/(app)/environments/[environmentId]/settings/(organization)/components/OrganizationSettingsNavbar";
-import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
 import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
 import { PageHeader } from "@/modules/ui/components/page-header";
 import { getTranslate } from "@/tolgee/server";
+import { IS_FORMBRICKS_CLOUD } from "@formbricks/lib/constants";
 
 const Loading = async () => {
   const t = await getTranslate();

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/general/page.test.tsx

@@ -1,4 +1,3 @@
-import { getUser } from "@/lib/user/service";
 import {
   getIsMultiOrgEnabled,
   getIsOrganizationAIReady,
@@ -7,11 +6,12 @@ import {
 import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
 import { TEnvironmentAuth } from "@/modules/environments/types/environment-auth";
 import { getTranslate } from "@/tolgee/server";
-import { beforeEach, describe, expect, test, vi } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { getUser } from "@formbricks/lib/user/service";
 import { TUser } from "@formbricks/types/user";
 import Page from "./page";
 
-vi.mock("@/lib/constants", () => ({
+vi.mock("@formbricks/lib/constants", () => ({
   IS_FORMBRICKS_CLOUD: false,
   IS_PRODUCTION: false,
   FB_LOGO_URL: "https://example.com/mock-logo.png",
@@ -49,7 +49,7 @@ vi.mock("@/tolgee/server", () => ({
   getTranslate: vi.fn(),
 }));
 
-vi.mock("@/lib/user/service", () => ({
+vi.mock("@formbricks/lib/user/service", () => ({
   getUser: vi.fn(),
 }));
 
@@ -84,7 +84,7 @@ describe("Page", () => {
     vi.mocked(getWhiteLabelPermission).mockResolvedValue(true);
   });
 
-  test("renders the page with organization settings", async () => {
+  it("renders the page with organization settings", async () => {
     const props = {
       params: Promise.resolve({ environmentId: "env-123" }),
     };
@@ -94,7 +94,7 @@ describe("Page", () => {
     expect(result).toBeTruthy();
   });
 
-  test("renders if session user id empty", async () => {
+  it("renders if session user id empty", async () => {
     mockEnvironmentAuth.session.user.id = "";
 
     vi.mocked(getEnvironmentAuth).mockResolvedValue(mockEnvironmentAuth);
@@ -108,7 +108,7 @@ describe("Page", () => {
     expect(result).toBeTruthy();
   });
 
-  test("handles getEnvironmentAuth error", async () => {
+  it("handles getEnvironmentAuth error", async () => {
     vi.mocked(getEnvironmentAuth).mockRejectedValue(new Error("Authentication error"));
 
     const props = {

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/general/page.tsx

@@ -1,7 +1,5 @@
 import { OrganizationSettingsNavbar } from "@/app/(app)/environments/[environmentId]/settings/(organization)/components/OrganizationSettingsNavbar";
 import { AIToggle } from "@/app/(app)/environments/[environmentId]/settings/(organization)/general/components/AIToggle";
-import { FB_LOGO_URL, IS_FORMBRICKS_CLOUD } from "@/lib/constants";
-import { getUser } from "@/lib/user/service";
 import {
   getIsMultiOrgEnabled,
   getIsOrganizationAIReady,
@@ -13,6 +11,8 @@ import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper
 import { PageHeader } from "@/modules/ui/components/page-header";
 import { SettingsId } from "@/modules/ui/components/settings-id";
 import { getTranslate } from "@/tolgee/server";
+import { FB_LOGO_URL, IS_FORMBRICKS_CLOUD } from "@formbricks/lib/constants";
+import { getUser } from "@formbricks/lib/user/service";
 import { SettingsCard } from "../../components/SettingsCard";
 import { DeleteOrganization } from "./components/DeleteOrganization";
 import { EditOrganizationNameForm } from "./components/EditOrganizationNameForm";

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

@@ -1,8 +1,8 @@
-import { getOrganizationByEnvironmentId } from "@/lib/organization/service";
-import { getProjectByEnvironmentId } from "@/lib/project/service";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 import { getTranslate } from "@/tolgee/server";
 import { getServerSession } from "next-auth";
+import { getOrganizationByEnvironmentId } from "@formbricks/lib/organization/service";
+import { getProjectByEnvironmentId } from "@formbricks/lib/project/service";
 
 const Layout = async (props) => {
   const params = await props.params;

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

@@ -1,8 +1,8 @@
 "use client";
 
-import { cn } from "@/lib/cn";
 import { Badge } from "@/modules/ui/components/badge";
 import { useTranslate } from "@tolgee/react";
+import { cn } from "@formbricks/lib/cn";
 
 export const SettingsCard = ({
   title,
@@ -31,7 +31,7 @@ export const SettingsCard = ({
       id={title}>
       <div className="border-b border-slate-200 px-4 pb-4">
         <div className="flex">
-          <h3 className="text-lg leading-6 font-medium text-slate-900 capitalize">{title}</h3>
+          <h3 className="text-lg font-medium capitalize leading-6 text-slate-900">{title}</h3>
           <div className="ml-2">
             {beta && <Badge size="normal" type="warning" text="Beta" />}
             {soon && (

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/actions.ts

@@ -1,12 +1,12 @@
 "use server";
 
 import { generateInsightsForSurvey } from "@/app/api/(internal)/insights/lib/utils";
-import { getResponseCountBySurveyId, getResponses } from "@/lib/response/service";
 import { authenticatedActionClient } from "@/lib/utils/action-client";
 import { checkAuthorizationUpdated } from "@/lib/utils/action-client-middleware";
 import { getOrganizationIdFromSurveyId, getProjectIdFromSurveyId } from "@/lib/utils/helper";
 import { revalidatePath } from "next/cache";
 import { z } from "zod";
+import { getResponseCountBySurveyId, getResponses } from "@formbricks/lib/response/service";
 import { ZId } from "@formbricks/types/common";
 import { ZResponseFilterCriteria } from "@formbricks/types/responses";
 import { getSurveySummary } from "./summary/lib/surveySummary";

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/SurveyAnalysisNavigation.tsx

@@ -7,12 +7,12 @@ import {
 } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/actions";
 import { getFormattedFilters } from "@/app/lib/surveys/surveys";
 import { getResponseCountBySurveySharingKeyAction } from "@/app/share/[sharingKey]/actions";
-import { useIntervalWhenFocused } from "@/lib/utils/hooks/useIntervalWhenFocused";
 import { SecondaryNavigation } from "@/modules/ui/components/secondary-navigation";
 import { useTranslate } from "@tolgee/react";
 import { InboxIcon, PresentationIcon } from "lucide-react";
 import { useParams, usePathname, useSearchParams } from "next/navigation";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useIntervalWhenFocused } from "@formbricks/lib/utils/hooks/useIntervalWhenFocused";
 import { TSurvey } from "@formbricks/types/surveys/types";
 
 interface SurveyAnalysisNavigationProps {