chore: merge main in to mobile-sdk-custom (#5523)

Co-authored-by: Matti Nannt <mail@matthiasnannt.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: Piyush Gupta <56182734+gupta-piyush19@users.noreply.github.com>
Co-authored-by: Anshuman Pandey <54475686+pandeymangg@users.noreply.github.com>
Co-authored-by: victorvhs017 <115753265+victorvhs017@users.noreply.github.com>
Co-authored-by: pandeymangg <anshuman.pandey9999@gmail.com>
Co-authored-by: Piyush Gupta <piyushguptaa2z123@gmail.com>
Co-authored-by: Dhruwang Jariwala <67850763+Dhruwang@users.noreply.github.com>
Co-authored-by: Victor Santos <victor@formbricks.com>
Co-authored-by: Dhruwang <dhruwangjariwala18@gmail.com>
Co-authored-by: Vijay <vijayraghav22@gmail.com>
Co-authored-by: Johannes <72809645+jobenjada@users.noreply.github.com>
Co-authored-by: Johannes <johannes@formbricks.com>
Co-authored-by: Peter Pesti-Varga <peter@lokin.hu>
Co-authored-by: Piyush Jain <122745947+d3vb0ox@users.noreply.github.com>
Co-authored-by: Jakob Schott <154420406+jakobsitory@users.noreply.github.com>
Co-authored-by: Gulshan Kumar <gulshanbahadur002@gmail.com>
Co-authored-by: Harsh Bhat <90265455+harshsbhat@users.noreply.github.com>

.env.example

@@ -219,3 +219,8 @@ 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/copilot-instructions.md

@@ -0,0 +1,26 @@
+# 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/release-docker-github-experimental.yml

@@ -82,8 +82,6 @@ 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,8 +102,6 @@ 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

.vscode/settings.json

@@ -1,13 +1,10 @@
 {
-  "github.copilot.chat.codeGeneration.instructions": [
-    {
-      "text": "When generating tests, always use vitest and use the `test` function instead of `it`."
-    }
-  ],
+  "javascript.updateImportsOnFileMove.enabled": "always",
   "sonarlint.connectedMode.project": {
     "connectionId": "formbricks",
     "projectKey": "formbricks_formbricks"
   },
   "typescript.preferences.importModuleSpecifier": "non-relative",
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.updateImportsOnFileMove.enabled": "always"
 }

apps/web/.eslintrc.js

@@ -1,3 +1,20 @@
 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.20@sha256:40be979442621049f40b1d51a26b55e281246b5de4e5f51a18da7beb6e17e3f9 AS base
+FROM node:22-alpine3.21 AS base
 
 #
 ## step 1: Prune monorepo

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 right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
+        className="absolute top-5 right-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 "@formbricks/lib/utils/templates";
+import { replaceQuestionPresetPlaceholders } from "@/lib/utils/templates";
 import { TProject } from "@formbricks/types/project";
 import { TXMTemplate } from "@formbricks/types/templates";
 

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

@@ -1,8 +1,13 @@
-import { getDefaultEndingCard } from "@/app/lib/templates";
+import {
+  buildCTAQuestion,
+  buildNPSQuestion,
+  buildOpenTextQuestion,
+  buildRatingQuestion,
+  getDefaultEndingCard,
+} from "@/app/lib/survey-builder";
 import { createId } from "@paralleldrive/cuid2";
 import { TFnType } from "@tolgee/react";
 import { logger } from "@formbricks/logger";
-import { TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
 import { TXMTemplate } from "@formbricks/types/templates";
 
 export const getXMSurveyDefault = (t: TFnType): TXMTemplate => {
@@ -26,35 +31,26 @@ const npsSurvey = (t: TFnType): TXMTemplate => {
     ...getXMSurveyDefault(t),
     name: t("templates.nps_survey_name"),
     questions: [
-      {
-        id: createId(),
-        type: TSurveyQuestionTypeEnum.NPS,
-        headline: { default: t("templates.nps_survey_question_1_headline") },
+      buildNPSQuestion({
+        headline: t("templates.nps_survey_question_1_headline"),
         required: true,
-        lowerLabel: { default: t("templates.nps_survey_question_1_lower_label") },
-        upperLabel: { default: t("templates.nps_survey_question_1_upper_label") },
+        lowerLabel: t("templates.nps_survey_question_1_lower_label"),
+        upperLabel: t("templates.nps_survey_question_1_upper_label"),
         isColorCodingEnabled: true,
-      },
-      {
-        id: createId(),
-        type: TSurveyQuestionTypeEnum.OpenText,
-        headline: { default: t("templates.nps_survey_question_2_headline") },
+        t,
+      }),
+      buildOpenTextQuestion({
+        headline: t("templates.nps_survey_question_2_headline"),
         required: false,
         inputType: "text",
-        charLimit: {
-          enabled: false,
-        },
-      },
-      {
-        id: createId(),
-        type: TSurveyQuestionTypeEnum.OpenText,
-        headline: { default: t("templates.nps_survey_question_3_headline") },
+        t,
+      }),
+      buildOpenTextQuestion({
+        headline: t("templates.nps_survey_question_3_headline"),
         required: false,
         inputType: "text",
-        charLimit: {
-          enabled: false,
-        },
-      },
+        t,
+      }),
     ],
   };
 };
@@ -67,9 +63,8 @@ const starRatingSurvey = (t: TFnType): TXMTemplate => {
     ...defaultSurvey,
     name: t("templates.star_rating_survey_name"),
     questions: [
-      {
+      buildRatingQuestion({
         id: reusableQuestionIds[0],
-        type: TSurveyQuestionTypeEnum.Rating,
         logic: [
           {
             id: createId(),
@@ -102,16 +97,15 @@ const starRatingSurvey = (t: TFnType): TXMTemplate => {
         ],
         range: 5,
         scale: "number",
-        headline: { default: t("templates.star_rating_survey_question_1_headline") },
+        headline: t("templates.star_rating_survey_question_1_headline"),
         required: true,
-        lowerLabel: { default: t("templates.star_rating_survey_question_1_lower_label") },
-        upperLabel: { default: t("templates.star_rating_survey_question_1_upper_label") },
-        isColorCodingEnabled: false,
-      },
-      {
+        lowerLabel: t("templates.star_rating_survey_question_1_lower_label"),
+        upperLabel: t("templates.star_rating_survey_question_1_upper_label"),
+        t,
+      }),
+      buildCTAQuestion({
         id: reusableQuestionIds[1],
-        html: { default: t("templates.star_rating_survey_question_2_html") },
-        type: TSurveyQuestionTypeEnum.CTA,
+        html: t("templates.star_rating_survey_question_2_html"),
         logic: [
           {
             id: createId(),
@@ -138,25 +132,23 @@ const starRatingSurvey = (t: TFnType): TXMTemplate => {
             ],
           },
         ],
-        headline: { default: t("templates.star_rating_survey_question_2_headline") },
+        headline: t("templates.star_rating_survey_question_2_headline"),
         required: true,
         buttonUrl: "https://formbricks.com/github",
-        buttonLabel: { default: t("templates.star_rating_survey_question_2_button_label") },
+        buttonLabel: t("templates.star_rating_survey_question_2_button_label"),
         buttonExternal: true,
-      },
-      {
+        t,
+      }),
+      buildOpenTextQuestion({
         id: reusableQuestionIds[2],
-        type: TSurveyQuestionTypeEnum.OpenText,
-        headline: { default: t("templates.star_rating_survey_question_3_headline") },
+        headline: t("templates.star_rating_survey_question_3_headline"),
         required: true,
-        subheader: { default: t("templates.star_rating_survey_question_3_subheader") },
-        buttonLabel: { default: t("templates.star_rating_survey_question_3_button_label") },
-        placeholder: { default: t("templates.star_rating_survey_question_3_placeholder") },
+        subheader: t("templates.star_rating_survey_question_3_subheader"),
+        buttonLabel: t("templates.star_rating_survey_question_3_button_label"),
+        placeholder: t("templates.star_rating_survey_question_3_placeholder"),
         inputType: "text",
-        charLimit: {
-          enabled: false,
-        },
-      },
+        t,
+      }),
     ],
   };
 };
@@ -169,9 +161,8 @@ const csatSurvey = (t: TFnType): TXMTemplate => {
     ...defaultSurvey,
     name: t("templates.csat_survey_name"),
     questions: [
-      {
+      buildRatingQuestion({
         id: reusableQuestionIds[0],
-        type: TSurveyQuestionTypeEnum.Rating,
         logic: [
           {
             id: createId(),
@@ -204,15 +195,14 @@ const csatSurvey = (t: TFnType): TXMTemplate => {
         ],
         range: 5,
         scale: "smiley",
-        headline: { default: t("templates.csat_survey_question_1_headline") },
+        headline: t("templates.csat_survey_question_1_headline"),
         required: true,
-        lowerLabel: { default: t("templates.csat_survey_question_1_lower_label") },
-        upperLabel: { default: t("templates.csat_survey_question_1_upper_label") },
-        isColorCodingEnabled: false,
-      },
-      {
+        lowerLabel: t("templates.csat_survey_question_1_lower_label"),
+        upperLabel: t("templates.csat_survey_question_1_upper_label"),
+        t,
+      }),
+      buildOpenTextQuestion({
         id: reusableQuestionIds[1],
-        type: TSurveyQuestionTypeEnum.OpenText,
         logic: [
           {
             id: createId(),
@@ -239,25 +229,20 @@ const csatSurvey = (t: TFnType): TXMTemplate => {
             ],
           },
         ],
-        headline: { default: t("templates.csat_survey_question_2_headline") },
+        headline: t("templates.csat_survey_question_2_headline"),
         required: false,
-        placeholder: { default: t("templates.csat_survey_question_2_placeholder") },
+        placeholder: t("templates.csat_survey_question_2_placeholder"),
         inputType: "text",
-        charLimit: {
-          enabled: false,
-        },
-      },
-      {
+        t,
+      }),
+      buildOpenTextQuestion({
         id: reusableQuestionIds[2],
-        type: TSurveyQuestionTypeEnum.OpenText,
-        headline: { default: t("templates.csat_survey_question_3_headline") },
+        headline: t("templates.csat_survey_question_3_headline"),
         required: false,
-        placeholder: { default: t("templates.csat_survey_question_3_placeholder") },
+        placeholder: t("templates.csat_survey_question_3_placeholder"),
         inputType: "text",
-        charLimit: {
-          enabled: false,
-        },
-      },
+        t,
+      }),
     ],
   };
 };
@@ -267,28 +252,22 @@ const cessSurvey = (t: TFnType): TXMTemplate => {
     ...getXMSurveyDefault(t),
     name: t("templates.cess_survey_name"),
     questions: [
-      {
-        id: createId(),
-        type: TSurveyQuestionTypeEnum.Rating,
+      buildRatingQuestion({
         range: 5,
         scale: "number",
-        headline: { default: t("templates.cess_survey_question_1_headline") },
+        headline: t("templates.cess_survey_question_1_headline"),
         required: true,
-        lowerLabel: { default: t("templates.cess_survey_question_1_lower_label") },
-        upperLabel: { default: t("templates.cess_survey_question_1_upper_label") },
-        isColorCodingEnabled: false,
-      },
-      {
-        id: createId(),
-        type: TSurveyQuestionTypeEnum.OpenText,
-        headline: { default: t("templates.cess_survey_question_2_headline") },
+        lowerLabel: t("templates.cess_survey_question_1_lower_label"),
+        upperLabel: t("templates.cess_survey_question_1_upper_label"),
+        t,
+      }),
+      buildOpenTextQuestion({
+        headline: t("templates.cess_survey_question_2_headline"),
         required: true,
-        placeholder: { default: t("templates.cess_survey_question_2_placeholder") },
+        placeholder: t("templates.cess_survey_question_2_placeholder"),
         inputType: "text",
-        charLimit: {
-          enabled: false,
-        },
-      },
+        t,
+      }),
     ],
   };
 };
@@ -301,9 +280,8 @@ const smileysRatingSurvey = (t: TFnType): TXMTemplate => {
     ...defaultSurvey,
     name: t("templates.smileys_survey_name"),
     questions: [
-      {
+      buildRatingQuestion({
         id: reusableQuestionIds[0],
-        type: TSurveyQuestionTypeEnum.Rating,
         logic: [
           {
             id: createId(),
@@ -336,16 +314,15 @@ const smileysRatingSurvey = (t: TFnType): TXMTemplate => {
         ],
         range: 5,
         scale: "smiley",
-        headline: { default: t("templates.smileys_survey_question_1_headline") },
+        headline: t("templates.smileys_survey_question_1_headline"),
         required: true,
-        lowerLabel: { default: t("templates.smileys_survey_question_1_lower_label") },
-        upperLabel: { default: t("templates.smileys_survey_question_1_upper_label") },
-        isColorCodingEnabled: false,
-      },
-      {
+        lowerLabel: t("templates.smileys_survey_question_1_lower_label"),
+        upperLabel: t("templates.smileys_survey_question_1_upper_label"),
+        t,
+      }),
+      buildCTAQuestion({
         id: reusableQuestionIds[1],
-        html: { default: t("templates.smileys_survey_question_2_html") },
-        type: TSurveyQuestionTypeEnum.CTA,
+        html: t("templates.smileys_survey_question_2_html"),
         logic: [
           {
             id: createId(),
@@ -372,25 +349,23 @@ const smileysRatingSurvey = (t: TFnType): TXMTemplate => {
             ],
           },
         ],
-        headline: { default: t("templates.smileys_survey_question_2_headline") },
+        headline: t("templates.smileys_survey_question_2_headline"),
         required: true,
         buttonUrl: "https://formbricks.com/github",
-        buttonLabel: { default: t("templates.smileys_survey_question_2_button_label") },
+        buttonLabel: t("templates.smileys_survey_question_2_button_label"),
         buttonExternal: true,
-      },
-      {
+        t,
+      }),
+      buildOpenTextQuestion({
         id: reusableQuestionIds[2],
-        type: TSurveyQuestionTypeEnum.OpenText,
-        headline: { default: t("templates.smileys_survey_question_3_headline") },
+        headline: t("templates.smileys_survey_question_3_headline"),
         required: true,
-        subheader: { default: t("templates.smileys_survey_question_3_subheader") },
-        buttonLabel: { default: t("templates.smileys_survey_question_3_button_label") },
-        placeholder: { default: t("templates.smileys_survey_question_3_placeholder") },
+        subheader: t("templates.smileys_survey_question_3_subheader"),
+        buttonLabel: t("templates.smileys_survey_question_3_button_label"),
+        placeholder: t("templates.smileys_survey_question_3_placeholder"),
         inputType: "text",
-        charLimit: {
-          enabled: false,
-        },
-      },
+        t,
+      }),
     ],
   };
 };
@@ -400,37 +375,26 @@ const enpsSurvey = (t: TFnType): TXMTemplate => {
     ...getXMSurveyDefault(t),
     name: t("templates.enps_survey_name"),
     questions: [
-      {
-        id: createId(),
-        type: TSurveyQuestionTypeEnum.NPS,
-        headline: {
-          default: t("templates.enps_survey_question_1_headline"),
-        },
+      buildNPSQuestion({
+        headline: t("templates.enps_survey_question_1_headline"),
         required: false,
-        lowerLabel: { default: t("templates.enps_survey_question_1_lower_label") },
-        upperLabel: { default: t("templates.enps_survey_question_1_upper_label") },
+        lowerLabel: t("templates.enps_survey_question_1_lower_label"),
+        upperLabel: t("templates.enps_survey_question_1_upper_label"),
         isColorCodingEnabled: true,
-      },
-      {
-        id: createId(),
-        type: TSurveyQuestionTypeEnum.OpenText,
-        headline: { default: t("templates.enps_survey_question_2_headline") },
+        t,
+      }),
+      buildOpenTextQuestion({
+        headline: t("templates.enps_survey_question_2_headline"),
         required: false,
         inputType: "text",
-        charLimit: {
-          enabled: false,
-        },
-      },
-      {
-        id: createId(),
-        type: TSurveyQuestionTypeEnum.OpenText,
-        headline: { default: t("templates.enps_survey_question_3_headline") },
+        t,
+      }),
+      buildOpenTextQuestion({
+        headline: t("templates.enps_survey_question_3_headline"),
         required: false,
         inputType: "text",
-        charLimit: {
-          enabled: false,
-        },
-      },
+        t,
+      }),
     ],
   };
 };

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

@@ -1,4 +1,7 @@
 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";
@@ -7,9 +10,6 @@ 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 right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
+          className="absolute top-5 right-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,6 +2,8 @@
 
 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 {
@@ -24,8 +26,6 @@ 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";
 

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 { 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("@formbricks/lib/constants", () => ({
+vi.mock("@/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("@formbricks/lib/organization/auth", () => ({
+vi.mock("@/lib/organization/auth", () => ({
   canUserAccessOrganization: vi.fn(),
 }));
-vi.mock("@formbricks/lib/organization/service", () => ({
+vi.mock("@/lib/organization/service", () => ({
   getOrganization: vi.fn(),
 }));
-vi.mock("@formbricks/lib/user/service", () => ({
+vi.mock("@/lib/user/service", () => ({
   getUser: vi.fn(),
 }));
 vi.mock("@/tolgee/server", () => ({

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,4 +1,5 @@
 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";
@@ -6,7 +7,6 @@ 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 right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
+          className="absolute top-5 right-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,4 +1,5 @@
 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";
@@ -6,7 +7,6 @@ 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 right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
+          className="absolute top-5 right-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,6 +2,7 @@
 
 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";
@@ -26,7 +27,6 @@ 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 left-2 top-2 -mb-6 h-20 w-auto max-w-64 rounded-lg border object-contain p-1"
+            className="absolute top-2 left-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,5 +1,7 @@
 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";
@@ -8,8 +10,6 @@ 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 right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
+          className="absolute top-5 right-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,9 +1,9 @@
+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 { redirect } from "next/navigation";
 import { afterEach, describe, expect, test, vi } from "vitest";
-import { getEnvironment } from "@formbricks/lib/environment/service";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TOrganization } from "@formbricks/types/organizations";
 import { TUser } from "@formbricks/types/user";
@@ -28,7 +28,7 @@ vi.mock("@/modules/ui/components/dev-environment-banner", () => ({
 vi.mock("@/modules/environments/lib/utils", () => ({
   environmentIdLayoutChecks: vi.fn(),
 }));
-vi.mock("@formbricks/lib/environment/service", () => ({
+vi.mock("@/lib/environment/service", () => ({
   getEnvironment: vi.fn(),
 }));
 vi.mock("next/navigation", () => ({

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

@@ -1,8 +1,8 @@
+import { getEnvironment } from "@/lib/environment/service";
 import { environmentIdLayoutChecks } from "@/modules/environments/lib/utils";
 import { DevEnvironmentBanner } from "@/modules/ui/components/dev-environment-banner";
 import { EnvironmentIdBaseLayout } from "@/modules/ui/components/environmentId-base-layout";
 import { redirect } from "next/navigation";
-import { getEnvironment } from "@formbricks/lib/environment/service";
 
 const SurveyEditorEnvironmentLayout = async (props) => {
   const params = await props.params;

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

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

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

@@ -1,5 +1,8 @@
 "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 {
@@ -8,9 +11,6 @@ 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,7 +1,9 @@
 "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";
@@ -10,8 +12,6 @@ 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 "@formbricks/lib/time";
+import { timeSince } from "@/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 whitespace-nowrap text-center text-sm text-slate-500">
+      <div className="col-span-2 my-auto text-center text-sm whitespace-nowrap 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,5 +1,17 @@
 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";
@@ -7,18 +19,6 @@ 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,6 +4,9 @@ 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";
@@ -45,9 +48,6 @@ 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";

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/TopControlButtons.tsx

@@ -1,6 +1,7 @@
 "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";
@@ -9,7 +10,6 @@ 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-balance text-sm text-slate-600">{currentStatus.subtitle}</p>
+      <p className="w-2/3 text-sm text-balance 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,5 +1,6 @@
 "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 {
@@ -9,7 +10,6 @@ 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,6 +4,8 @@ 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";
@@ -23,8 +25,6 @@ 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

@@ -0,0 +1,151 @@
+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,6 +5,7 @@ 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";
@@ -13,7 +14,6 @@ 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, idx) => (
-              <div key={idx} className={`col-span-2 hidden text-center sm:block`}>
+            {tableHeaders.map((header) => (
+              <div key={header} className={`col-span-2 hidden text-center sm:block`}>
                 {t(header)}
               </div>
             ))}
           </div>
 
           {integrationData.map((data, index) => (
-            <div
-              key={index}
-              className="m-2 grid h-16 grid-cols-8 content-center rounded-lg hover:bg-slate-100"
+            <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"
               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>
-            </div>
+            </button>
           ))}
         </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,7 +8,9 @@ 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";
@@ -21,8 +23,6 @@ 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-y-auto overflow-x-hidden rounded-lg border border-slate-200">
+                    <div className="mt-1 max-h-[15vh] overflow-x-hidden overflow-y-auto 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

@@ -0,0 +1,162 @@
+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,6 +1,7 @@
 "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";
@@ -9,7 +10,6 @@ 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,11 +36,10 @@ export const ManageIntegration = ({
 }: ManageIntegrationProps) => {
   const { t } = useTranslate();
   const [isDeleteIntegrationModalOpen, setIsDeleteIntegrationModalOpen] = useState(false);
-  const integrationArray = googleSheetIntegration
-    ? googleSheetIntegration.config.data
-      ? googleSheetIntegration.config.data
-      : []
-    : [];
+  let integrationArray: TIntegrationGoogleSheetsConfigData[] = [];
+  if (googleSheetIntegration?.config.data) {
+    integrationArray = googleSheetIntegration.config.data;
+  }
   const [isDeleting, setisDeleting] = useState(false);
 
   const handleDeleteIntegration = async () => {
@@ -112,9 +111,9 @@ export const ManageIntegration = ({
             {integrationArray &&
               integrationArray.map((data, index) => {
                 return (
-                  <div
-                    key={index}
-                    className="m-2 grid h-16 cursor-pointer grid-cols-8 content-center rounded-lg hover:bg-slate-100"
+                  <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"
                     onClick={() => {
                       editIntegration(index);
                     }}>
@@ -124,7 +123,7 @@ export const ManageIntegration = ({
                     <div className="col-span-2 text-center">
                       {timeSince(data.createdAt.toString(), locale)}
                     </div>
-                  </div>
+                  </button>
                 );
               })}
           </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,6 +7,9 @@ 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";
@@ -18,9 +21,6 @@ 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

@@ -0,0 +1,91 @@
+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,6 +1,7 @@
 "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,7 +11,6 @@ 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);
-  const integrationArray = notionIntegration
-    ? notionIntegration.config.data
-      ? notionIntegration.config.data
-      : []
-    : [];
+
+  let integrationArray: TIntegrationNotionConfigData[] = [];
+  if (notionIntegration?.config.data) {
+    integrationArray = notionIntegration.config.data;
+  }
 
   const handleDeleteIntegration = async () => {
     setisDeleting(true);
@@ -121,9 +121,9 @@ export const ManageIntegration = ({
             {integrationArray &&
               integrationArray.map((data, index) => {
                 return (
-                  <div
-                    key={index}
-                    className="m-2 grid h-16 cursor-pointer grid-cols-6 content-center rounded-lg hover:bg-slate-100"
+                  <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"
                     onClick={() => {
                       editIntegration(index);
                     }}>
@@ -132,7 +132,7 @@ export const ManageIntegration = ({
                     <div className="col-span-2 text-center">
                       {timeSince(data.createdAt.toString(), locale)}
                     </div>
-                  </div>
+                  </button>
                 );
               })}
           </div>

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 { 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";
+} 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 { TIntegrationNotion, TIntegrationNotionDatabase } from "@formbricks/types/integration/notion";
 
 const Page = async (props) => {

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

@@ -9,6 +9,7 @@ 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";
@@ -16,7 +17,6 @@ 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,6 +2,8 @@
 
 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";
@@ -15,8 +17,6 @@ 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

@@ -0,0 +1,158 @@
+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,16 +1,15 @@
 "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 { useTranslate } from "@tolgee/react";
-import { T } from "@tolgee/react";
+import { T, useTranslate } 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";
@@ -43,11 +42,10 @@ export const ManageIntegration = ({
   const { t } = useTranslate();
   const [isDeleteIntegrationModalOpen, setIsDeleteIntegrationModalOpen] = useState(false);
   const [isDeleting, setisDeleting] = useState(false);
-  const integrationArray = slackIntegration
-    ? slackIntegration.config.data
-      ? slackIntegration.config.data
-      : []
-    : [];
+  let integrationArray: TIntegrationSlackConfigData[] = [];
+  if (slackIntegration?.config.data) {
+    integrationArray = slackIntegration.config.data;
+  }
 
   const handleDeleteIntegration = async () => {
     setisDeleting(true);
@@ -129,9 +127,9 @@ export const ManageIntegration = ({
             {integrationArray &&
               integrationArray.map((data, index) => {
                 return (
-                  <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"
+                  <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"
                     onClick={() => {
                       editIntegration(index);
                     }}>
@@ -141,7 +139,7 @@ export const ManageIntegration = ({
                     <div className="col-span-2 text-center">
                       {timeSince(data.createdAt.toString(), locale)}
                     </div>
-                  </div>
+                  </button>
                 );
               })}
           </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,10 +1,10 @@
+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 { getMembershipByUserIdOrganizationId } from "@formbricks/lib/membership/service";
-import { getProjectByEnvironmentId } from "@formbricks/lib/project/service";
 import { TMembership } from "@formbricks/types/memberships";
 import { TOrganization } from "@formbricks/types/organizations";
 import { TProject } from "@formbricks/types/project";
@@ -41,10 +41,10 @@ vi.mock("./components/EnvironmentStorageHandler", () => ({
 vi.mock("@/modules/environments/lib/utils", () => ({
   environmentIdLayoutChecks: vi.fn(),
 }));
-vi.mock("@formbricks/lib/project/service", () => ({
+vi.mock("@/lib/project/service", () => ({
   getProjectByEnvironmentId: vi.fn(),
 }));
-vi.mock("@formbricks/lib/membership/service", () => ({
+vi.mock("@/lib/membership/service", () => ({
   getMembershipByUserIdOrganizationId: vi.fn(),
 }));
 

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

@@ -1,9 +1,9 @@
 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 { redirect } from "next/navigation";
-import { getMembershipByUserIdOrganizationId } from "@formbricks/lib/membership/service";
-import { getProjectByEnvironmentId } from "@formbricks/lib/project/service";
 import EnvironmentStorageHandler from "./components/EnvironmentStorageHandler";
 
 const EnvLayout = async (props: {

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,5 +1,6 @@
 "use client";
 
+import { appLanguages } from "@/lib/i18n/utils";
 import { Button } from "@/modules/ui/components/button";
 import {
   DropdownMenu,
@@ -23,7 +24,6 @@ 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,5 +1,8 @@
 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";
@@ -7,9 +10,6 @@ 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 {

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,4 +1,5 @@
 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";
@@ -8,7 +9,6 @@ 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 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"
+              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"
               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,6 +1,7 @@
 "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";
@@ -9,7 +10,6 @@ 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,6 +1,7 @@
 "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";
@@ -18,7 +19,6 @@ 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,3 +1,4 @@
+import { getUser } from "@/lib/user/service";
 import {
   getIsMultiOrgEnabled,
   getIsOrganizationAIReady,
@@ -7,11 +8,10 @@ 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 { getUser } from "@formbricks/lib/user/service";
 import { TUser } from "@formbricks/types/user";
 import Page from "./page";
 
-vi.mock("@formbricks/lib/constants", () => ({
+vi.mock("@/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("@formbricks/lib/user/service", () => ({
+vi.mock("@/lib/user/service", () => ({
   getUser: vi.fn(),
 }));
 

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

@@ -1,5 +1,7 @@
 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,
@@ -11,8 +13,6 @@ 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 font-medium capitalize leading-6 text-slate-900">{title}</h3>
+          <h3 className="text-lg leading-6 font-medium text-slate-900 capitalize">{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 {

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

@@ -1,8 +1,8 @@
+import { getResponseCountBySurveyId } from "@/lib/response/service";
+import { getSurvey } from "@/lib/survey/service";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 import { Metadata } from "next";
 import { getServerSession } from "next-auth";
-import { getResponseCountBySurveyId } from "@formbricks/lib/response/service";
-import { getSurvey } from "@formbricks/lib/survey/service";
 
 type Props = {
   params: Promise<{ surveyId: string; environmentId: string }>;

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

@@ -13,9 +13,9 @@ import {
   getResponseCountBySurveySharingKeyAction,
   getResponsesBySurveySharingKeyAction,
 } from "@/app/share/[sharingKey]/actions";
+import { replaceHeadlineRecall } from "@/lib/utils/recall";
 import { useParams, useSearchParams } from "next/navigation";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { replaceHeadlineRecall } from "@formbricks/lib/utils/recall";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TResponse } from "@formbricks/types/responses";
 import { TSurvey } from "@formbricks/types/surveys/types";

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

@@ -0,0 +1,165 @@
+import type { Cell, Row } from "@tanstack/react-table";
+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 { TResponse, TResponseTableData } from "@formbricks/types/responses";
+import { ResponseTableCell } from "./ResponseTableCell";
+
+const makeCell = (
+  id: string,
+  size = 100,
+  first = false,
+  last = false,
+  content = "CellContent"
+): Cell<TResponseTableData, unknown> =>
+  ({
+    column: {
+      id,
+      getSize: () => size,
+      getIsFirstColumn: () => first,
+      getIsLastColumn: () => last,
+      getStart: () => 0,
+      columnDef: { cell: () => content },
+    },
+    id,
+    getContext: () => ({}),
+  }) as unknown as Cell<TResponseTableData, unknown>;
+
+const makeRow = (id: string, selected = false): Row<TResponseTableData> =>
+  ({ id, getIsSelected: () => selected }) as unknown as Row<TResponseTableData>;
+
+describe("ResponseTableCell", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test("renders cell content", () => {
+    const cell = makeCell("col1");
+    const row = makeRow("r1");
+    render(
+      <ResponseTableCell
+        cell={cell}
+        row={row}
+        isExpanded={false}
+        setSelectedResponseId={vi.fn()}
+        responses={[]}
+      />
+    );
+    expect(screen.getByText("CellContent")).toBeDefined();
+  });
+
+  test("calls setSelectedResponseId on cell click when not select column", async () => {
+    const cell = makeCell("col1");
+    const row = makeRow("r1");
+    const setSel = vi.fn();
+    render(
+      <ResponseTableCell
+        cell={cell}
+        row={row}
+        isExpanded={false}
+        setSelectedResponseId={setSel}
+        responses={[{ id: "r1" } as TResponse]}
+      />
+    );
+    await userEvent.click(screen.getByText("CellContent"));
+    expect(setSel).toHaveBeenCalledWith("r1");
+  });
+
+  test("does not call setSelectedResponseId on select column click", async () => {
+    const cell = makeCell("select");
+    const row = makeRow("r1");
+    const setSel = vi.fn();
+    render(
+      <ResponseTableCell
+        cell={cell}
+        row={row}
+        isExpanded={false}
+        setSelectedResponseId={setSel}
+        responses={[{ id: "r1" } as TResponse]}
+      />
+    );
+    await userEvent.click(screen.getByText("CellContent"));
+    expect(setSel).not.toHaveBeenCalled();
+  });
+
+  test("renders maximize icon for createdAt column and handles click", async () => {
+    const cell = makeCell("createdAt", 120, false, false);
+    const row = makeRow("r2");
+    const setSel = vi.fn();
+    render(
+      <ResponseTableCell
+        cell={cell}
+        row={row}
+        isExpanded={false}
+        setSelectedResponseId={setSel}
+        responses={[{ id: "r2" } as TResponse]}
+      />
+    );
+    const btn = screen.getByRole("button", { name: /expand response/i });
+    expect(btn).toBeDefined();
+    await userEvent.click(btn);
+    expect(setSel).toHaveBeenCalledWith("r2");
+  });
+
+  test("does not apply selected style when row.getIsSelected() is false", () => {
+    const cell = makeCell("col1");
+    const row = makeRow("r1", false);
+    const { container } = render(
+      <ResponseTableCell
+        cell={cell}
+        row={row}
+        isExpanded={false}
+        setSelectedResponseId={vi.fn()}
+        responses={[]}
+      />
+    );
+    expect(container.firstChild).not.toHaveClass("bg-slate-100");
+  });
+
+  test("applies selected style when row.getIsSelected() is true", () => {
+    const cell = makeCell("col1");
+    const row = makeRow("r1", true);
+    const { container } = render(
+      <ResponseTableCell
+        cell={cell}
+        row={row}
+        isExpanded={false}
+        setSelectedResponseId={vi.fn()}
+        responses={[]}
+      />
+    );
+    expect(container.firstChild).toHaveClass("bg-slate-100");
+  });
+
+  test("renders collapsed height class when isExpanded is false", () => {
+    const cell = makeCell("col1");
+    const row = makeRow("r1");
+    const { container } = render(
+      <ResponseTableCell
+        cell={cell}
+        row={row}
+        isExpanded={false}
+        setSelectedResponseId={vi.fn()}
+        responses={[]}
+      />
+    );
+    const inner = container.querySelector("div > div");
+    expect(inner).toHaveClass("h-10");
+  });
+
+  test("renders expanded height class when isExpanded is true", () => {
+    const cell = makeCell("col1");
+    const row = makeRow("r1");
+    const { container } = render(
+      <ResponseTableCell
+        cell={cell}
+        row={row}
+        isExpanded={true}
+        setSelectedResponseId={vi.fn()}
+        responses={[]}
+      />
+    );
+    const inner = container.querySelector("div > div");
+    expect(inner).toHaveClass("h-full");
+  });
+});

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

@@ -1,8 +1,8 @@
+import { cn } from "@/lib/cn";
 import { getCommonPinningStyles } from "@/modules/ui/components/data-table/lib/utils";
 import { TableCell } from "@/modules/ui/components/table";
 import { Cell, Row, flexRender } from "@tanstack/react-table";
 import { Maximize2Icon } from "lucide-react";
-import { cn } from "@formbricks/lib/cn";
 import { TResponse, TResponseTableData } from "@formbricks/types/responses";
 
 interface ResponseTableCellProps {
@@ -35,11 +35,13 @@ export const ResponseTableCell = ({
 
   // Conditional rendering of maximize icon
   const renderMaximizeIcon = cell.column.id === "createdAt" && (
-    <div
-      className="hidden flex-shrink-0 cursor-pointer items-center rounded-md border border-slate-200 bg-white p-2 hover:border-slate-300 group-hover:flex"
+    <button
+      type="button"
+      aria-label="Expand response"
+      className="hidden flex-shrink-0 cursor-pointer items-center rounded-md border border-slate-200 bg-white p-2 group-hover:flex hover:border-slate-300 focus:outline-none"
       onClick={handleCellClick}>
       <Maximize2Icon className="h-4 w-4" />
-    </div>
+    </button>
   );
 
   return (

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

@@ -1,5 +1,10 @@
 "use client";
 
+import { getLocalizedValue } from "@/lib/i18n/utils";
+import { processResponseData } from "@/lib/responses";
+import { getContactIdentifier } from "@/lib/utils/contact";
+import { getFormattedDateTimeString } from "@/lib/utils/datetime";
+import { recallToHeadline } from "@/lib/utils/recall";
 import { RenderResponse } from "@/modules/analysis/components/SingleResponseCard/components/RenderResponse";
 import { VARIABLES_ICON_MAP, getQuestionIconMap } from "@/modules/survey/lib/questions";
 import { getSelectionColumn } from "@/modules/ui/components/data-table";
@@ -9,11 +14,6 @@ import { ColumnDef } from "@tanstack/react-table";
 import { TFnType } from "@tolgee/react";
 import { CircleHelpIcon, EyeOffIcon, MailIcon, TagIcon } from "lucide-react";
 import Link from "next/link";
-import { getLocalizedValue } from "@formbricks/lib/i18n/utils";
-import { processResponseData } from "@formbricks/lib/responses";
-import { getContactIdentifier } from "@formbricks/lib/utils/contact";
-import { getFormattedDateTimeString } from "@formbricks/lib/utils/datetime";
-import { recallToHeadline } from "@formbricks/lib/utils/recall";
 import { TResponseTableData } from "@formbricks/types/responses";
 import { TSurvey, TSurveyQuestion } from "@formbricks/types/surveys/types";
 

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/page.tsx

@@ -3,22 +3,18 @@ import { ResponsePage } from "@/app/(app)/environments/[environmentId]/surveys/[
 import { EnableInsightsBanner } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/EnableInsightsBanner";
 import { SurveyAnalysisCTA } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SurveyAnalysisCTA";
 import { needsInsightsGeneration } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/lib/utils";
+import { MAX_RESPONSES_FOR_INSIGHT_GENERATION, RESPONSES_PER_PAGE, WEBAPP_URL } from "@/lib/constants";
+import { getSurveyDomain } from "@/lib/getSurveyUrl";
+import { getResponseCountBySurveyId } from "@/lib/response/service";
+import { getSurvey } from "@/lib/survey/service";
+import { getTagsByEnvironmentId } from "@/lib/tag/service";
+import { getUser } from "@/lib/user/service";
+import { findMatchingLocale } from "@/lib/utils/locale";
 import { getIsAIEnabled } from "@/modules/ee/license-check/lib/utils";
 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 {
-  MAX_RESPONSES_FOR_INSIGHT_GENERATION,
-  RESPONSES_PER_PAGE,
-  WEBAPP_URL,
-} from "@formbricks/lib/constants";
-import { getSurveyDomain } from "@formbricks/lib/getSurveyUrl";
-import { getResponseCountBySurveyId } from "@formbricks/lib/response/service";
-import { getSurvey } from "@formbricks/lib/survey/service";
-import { getTagsByEnvironmentId } from "@formbricks/lib/tag/service";
-import { getUser } from "@formbricks/lib/user/service";
-import { findMatchingLocale } from "@formbricks/lib/utils/locale";
 
 const Page = async (props) => {
   const params = await props.params;

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

@@ -1,6 +1,7 @@
 "use server";
 
 import { getEmailTemplateHtml } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/lib/emailTemplate";
+import { getSurvey, updateSurvey } from "@/lib/survey/service";
 import { authenticatedActionClient } from "@/lib/utils/action-client";
 import { checkAuthorizationUpdated } from "@/lib/utils/action-client-middleware";
 import { getOrganizationIdFromSurveyId, getProjectIdFromSurveyId } from "@/lib/utils/helper";
@@ -8,7 +9,6 @@ import { getOrganizationLogoUrl } from "@/modules/ee/whitelabel/email-customizat
 import { sendEmbedSurveyPreviewEmail } from "@/modules/email";
 import { customAlphabet } from "nanoid";
 import { z } from "zod";
-import { getSurvey, updateSurvey } from "@formbricks/lib/survey/service";
 import { ZId } from "@formbricks/types/common";
 import { ResourceNotFoundError } from "@formbricks/types/errors";
 

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

@@ -1,11 +1,11 @@
 "use client";
 
+import { timeSince } from "@/lib/time";
+import { getContactIdentifier } from "@/lib/utils/contact";
 import { ArrayResponse } from "@/modules/ui/components/array-response";
 import { PersonAvatar } from "@/modules/ui/components/avatars";
 import { useTranslate } from "@tolgee/react";
 import Link from "next/link";
-import { timeSince } from "@formbricks/lib/time";
-import { getContactIdentifier } from "@formbricks/lib/utils/contact";
 import { TSurvey, TSurveyQuestionSummaryAddress } from "@formbricks/types/surveys/types";
 import { TUserLocale } from "@formbricks/types/user";
 import { QuestionSummaryHeader } from "./QuestionSummaryHeader";

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

@@ -0,0 +1,80 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import {
+  TSurvey,
+  TSurveyConsentQuestion,
+  TSurveyQuestionSummaryConsent,
+  TSurveyQuestionTypeEnum,
+} from "@formbricks/types/surveys/types";
+import { ConsentSummary } from "./ConsentSummary";
+
+vi.mock(
+  "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/QuestionSummaryHeader",
+  () => ({
+    QuestionSummaryHeader: () => <div>QuestionSummaryHeader</div>,
+  })
+);
+
+describe("ConsentSummary", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  const mockSetFilter = vi.fn();
+  const questionSummary = {
+    question: {
+      id: "q1",
+      headline: { en: "Headline" },
+      type: TSurveyQuestionTypeEnum.Consent,
+    } as unknown as TSurveyConsentQuestion,
+    accepted: { percentage: 60.5, count: 61 },
+    dismissed: { percentage: 39.5, count: 40 },
+  } as unknown as TSurveyQuestionSummaryConsent;
+  const survey = {} as TSurvey;
+
+  test("renders accepted and dismissed with correct values", () => {
+    render(<ConsentSummary questionSummary={questionSummary} survey={survey} setFilter={mockSetFilter} />);
+    expect(screen.getByText("common.accepted")).toBeInTheDocument();
+    expect(screen.getByText(/60\.5%/)).toBeInTheDocument();
+    expect(screen.getByText(/61/)).toBeInTheDocument();
+    expect(screen.getByText("common.dismissed")).toBeInTheDocument();
+    expect(screen.getByText(/39\.5%/)).toBeInTheDocument();
+    expect(screen.getByText(/40/)).toBeInTheDocument();
+  });
+
+  test("calls setFilter with correct args on accepted click", async () => {
+    render(<ConsentSummary questionSummary={questionSummary} survey={survey} setFilter={mockSetFilter} />);
+    await userEvent.click(screen.getByText("common.accepted"));
+    expect(mockSetFilter).toHaveBeenCalledWith(
+      "q1",
+      { en: "Headline" },
+      TSurveyQuestionTypeEnum.Consent,
+      "is",
+      "common.accepted"
+    );
+  });
+
+  test("calls setFilter with correct args on dismissed click", async () => {
+    render(<ConsentSummary questionSummary={questionSummary} survey={survey} setFilter={mockSetFilter} />);
+    await userEvent.click(screen.getByText("common.dismissed"));
+    expect(mockSetFilter).toHaveBeenCalledWith(
+      "q1",
+      { en: "Headline" },
+      TSurveyQuestionTypeEnum.Consent,
+      "is",
+      "common.dismissed"
+    );
+  });
+
+  test("renders singular and plural response labels", () => {
+    const oneAndTwo = {
+      ...questionSummary,
+      accepted: { percentage: questionSummary.accepted.percentage, count: 1 },
+      dismissed: { percentage: questionSummary.dismissed.percentage, count: 2 },
+    };
+    render(<ConsentSummary questionSummary={oneAndTwo} survey={survey} setFilter={mockSetFilter} />);
+    expect(screen.getByText(/1 common\.response/)).toBeInTheDocument();
+    expect(screen.getByText(/2 common\.responses/)).toBeInTheDocument();
+  });
+});

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

@@ -41,11 +41,11 @@ export const ConsentSummary = ({ questionSummary, survey, setFilter }: ConsentSu
   return (
     <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
       <QuestionSummaryHeader questionSummary={questionSummary} survey={survey} />
-      <div className="space-y-5 px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
+      <div className="space-y-5 px-4 pt-4 pb-6 text-sm md:px-6 md:text-base">
         {summaryItems.map((summaryItem) => {
           return (
-            <div
-              className="group cursor-pointer"
+            <button
+              className="group w-full cursor-pointer"
               key={summaryItem.title}
               onClick={() =>
                 setFilter(
@@ -74,7 +74,7 @@ export const ConsentSummary = ({ questionSummary, survey, setFilter }: ConsentSu
               <div className="group-hover:opacity-80">
                 <ProgressBar barColor="bg-brand-dark" progress={summaryItem.percentage / 100} />
               </div>
-            </div>
+            </button>
           );
         })}
       </div>

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

@@ -1,11 +1,11 @@
 "use client";
 
+import { timeSince } from "@/lib/time";
+import { getContactIdentifier } from "@/lib/utils/contact";
 import { ArrayResponse } from "@/modules/ui/components/array-response";
 import { PersonAvatar } from "@/modules/ui/components/avatars";
 import { useTranslate } from "@tolgee/react";
 import Link from "next/link";
-import { timeSince } from "@formbricks/lib/time";
-import { getContactIdentifier } from "@formbricks/lib/utils/contact";
 import { TSurvey, TSurveyQuestionSummaryContactInfo } from "@formbricks/types/surveys/types";
 import { TUserLocale } from "@formbricks/types/user";
 import { QuestionSummaryHeader } from "./QuestionSummaryHeader";

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

@@ -1,13 +1,13 @@
 "use client";
 
+import { timeSince } from "@/lib/time";
+import { getContactIdentifier } from "@/lib/utils/contact";
+import { formatDateWithOrdinal } from "@/lib/utils/datetime";
 import { PersonAvatar } from "@/modules/ui/components/avatars";
 import { Button } from "@/modules/ui/components/button";
 import { useTranslate } from "@tolgee/react";
 import Link from "next/link";
 import { useState } from "react";
-import { timeSince } from "@formbricks/lib/time";
-import { getContactIdentifier } from "@formbricks/lib/utils/contact";
-import { formatDateWithOrdinal } from "@formbricks/lib/utils/datetime";
 import { TSurvey, TSurveyQuestionSummaryDate } from "@formbricks/types/surveys/types";
 import { TUserLocale } from "@formbricks/types/user";
 import { QuestionSummaryHeader } from "./QuestionSummaryHeader";

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

@@ -1,14 +1,14 @@
 "use client";
 
+import { getOriginalFileNameFromUrl } from "@/lib/storage/utils";
+import { timeSince } from "@/lib/time";
+import { getContactIdentifier } from "@/lib/utils/contact";
 import { PersonAvatar } from "@/modules/ui/components/avatars";
 import { Button } from "@/modules/ui/components/button";
 import { useTranslate } from "@tolgee/react";
 import { DownloadIcon, FileIcon } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
-import { getOriginalFileNameFromUrl } from "@formbricks/lib/storage/utils";
-import { timeSince } from "@formbricks/lib/time";
-import { getContactIdentifier } from "@formbricks/lib/utils/contact";
 import { TSurvey, TSurveyQuestionSummaryFileUpload } from "@formbricks/types/surveys/types";
 import { TUserLocale } from "@formbricks/types/user";
 import { QuestionSummaryHeader } from "./QuestionSummaryHeader";
@@ -80,7 +80,7 @@ export const FileUploadSummary = ({
                       return (
                         <div className="relative m-2 rounded-lg bg-slate-200" key={fileUrl}>
                           <a href={fileUrl} key={index} target="_blank" rel="noopener noreferrer">
-                            <div className="absolute right-0 top-0 m-2">
+                            <div className="absolute top-0 right-0 m-2">
                               <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-slate-50 hover:bg-white">
                                 <DownloadIcon className="h-6 text-slate-500" />
                               </div>

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

@@ -1,12 +1,12 @@
 "use client";
 
+import { timeSince } from "@/lib/time";
+import { getContactIdentifier } from "@/lib/utils/contact";
 import { PersonAvatar } from "@/modules/ui/components/avatars";
 import { Button } from "@/modules/ui/components/button";
 import { useTranslate } from "@tolgee/react";
 import { InboxIcon, Link, MessageSquareTextIcon } from "lucide-react";
 import { useState } from "react";
-import { timeSince } from "@formbricks/lib/time";
-import { getContactIdentifier } from "@formbricks/lib/utils/contact";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TSurveyQuestionSummaryHiddenFields } from "@formbricks/types/surveys/types";
 import { TUserLocale } from "@formbricks/types/user";
@@ -28,7 +28,7 @@ export const HiddenFieldsSummary = ({ environment, questionSummary, locale }: Hi
   };
   return (
     <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
-      <div className="space-y-2 px-4 pb-5 pt-6 md:px-6">
+      <div className="space-y-2 px-4 pt-6 pb-5 md:px-6">
         <div className={"align-center flex justify-between gap-4"}>
           <h3 className="pb-1 text-lg font-semibold text-slate-900 md:text-xl">{questionSummary.id}</h3>
         </div>
@@ -76,7 +76,7 @@ export const HiddenFieldsSummary = ({ environment, questionSummary, locale }: Hi
                 </div>
               )}
             </div>
-            <div className="ph-no-capture col-span-2 whitespace-pre-wrap pl-6 font-semibold">
+            <div className="ph-no-capture col-span-2 pl-6 font-semibold whitespace-pre-wrap">
               {response.value}
             </div>
             <div className="px-4 text-slate-500 md:px-6">