fixing tailwind

.env.example

@@ -120,10 +120,6 @@ IMPRINT_ADDRESS=
 # TURNSTILE_SITE_KEY=
 # TURNSTILE_SECRET_KEY=
 
-# Google reCAPTCHA v3 keys
-RECAPTCHA_SITE_KEY=
-RECAPTCHA_SECRET_KEY=
-
 # Configure Github Login
 GITHUB_ID=
 GITHUB_SECRET=
@@ -210,6 +206,12 @@ UNKEY_ROOT_KEY=
 # Disable custom cache handler if necessary (e.g. if deployed on Vercel)
 # CUSTOM_CACHE_DISABLED=1
 
+# Azure AI settings
+# AI_AZURE_RESSOURCE_NAME=
+# AI_AZURE_API_KEY=
+# AI_AZURE_EMBEDDINGS_DEPLOYMENT_ID=
+# AI_AZURE_LLM_DEPLOYMENT_ID=
+
 # INTERCOM_APP_ID=
 # INTERCOM_SECRET_KEY=
 
@@ -217,11 +219,3 @@ UNKEY_ROOT_KEY=
 # PROMETHEUS_ENABLED=
 # PROMETHEUS_EXPORTER_PORT=
 
-# The SENTRY_DSN is used for error tracking and performance monitoring with Sentry.
-# SENTRY_DSN=
-# The SENTRY_AUTH_TOKEN variable is picked up by the Sentry Build Plugin.
-# It's used automatically by Sentry during the build for authentication when uploading source maps.
-# SENTRY_AUTH_TOKEN=
-
-# Disable the user management from UI 
-# DISABLE_USER_MANAGEMENT

.github/copilot-instructions.md

@@ -1,30 +0,0 @@
-# Testing Instructions
-
-When generating test files inside the "/app/web" path, follow these rules:
-
-- You are an experienced senior software engineer
-- 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. Do this only when the test file is created.
-- Don't mock functions that are already mocked in the "apps/web/vitestSetup.ts" file
-- When using "screen.getByText" check for the tolgee string if it is being used in the file.
-- When mocking data check if the properties added are part of the type of the object being mocked. Don't add properties that are not part of the type.
-  
-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 the "cleanup()" line 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.
-- You don't need to mock @tolgee/react

.github/workflows/deploy-formbricks-cloud.yml

@@ -12,13 +12,6 @@ on:
         required: false
         type: string
         default: 'ghcr.io/formbricks/formbricks'
-      ENVIRONMENT:
-        description: 'The environment to deploy to'
-        required: true
-        type: choice
-        options:
-          - stage
-          - prod
   workflow_call:
     inputs:
       VERSION:
@@ -30,10 +23,6 @@ on:
         required: false
         type: string
         default: 'ghcr.io/formbricks/formbricks'
-      ENVIRONMENT:
-        description: 'The environment to deploy to'
-        required: true
-        type: string
 
 permissions:
   id-token: write
@@ -46,13 +35,6 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - name: Tailscale
-        uses: tailscale/github-action@v3
-        with:
-          oauth-client-id: ${{ secrets.TS_OAUTH_CLIENT_ID }}
-          oauth-secret: ${{ secrets.TS_OAUTH_SECRET }}
-          tags: tag:github
-
       - name: Configure AWS Credentials
         uses: aws-actions/configure-aws-credentials@e3dd6a429d7300a6a4c196c26e071d42e0343502 # v4.0.2
         with:
@@ -66,8 +48,6 @@ jobs:
           AWS_REGION: eu-central-1
 
       - uses: helmfile/helmfile-action@v2
-        name: Deploy Formbricks Cloud Prod
-        if: (github.event_name == 'workflow_call' || github.event_name == 'workflow_dispatch') && github.event.inputs.ENVIRONMENT == 'prod'
         env:
           VERSION: ${{ inputs.VERSION }}
           REPOSITORY: ${{ inputs.REPOSITORY }}
@@ -78,23 +58,7 @@ jobs:
           helm-plugins: >
             https://github.com/databus23/helm-diff,
             https://github.com/jkroepke/helm-secrets
-          helmfile-args: apply -l environment=prod
-          helmfile-auto-init: "false"
-          helmfile-workdirectory: infra/formbricks-cloud-helm
-
-      - uses: helmfile/helmfile-action@v2
-        name: Deploy Formbricks Cloud Stage
-        if: github.event_name == 'workflow_dispatch' && github.event.inputs.ENVIRONMENT == 'stage'
-        env:
-          VERSION: ${{ inputs.VERSION }}
-          REPOSITORY: ${{ inputs.REPOSITORY }}
-          FORMBRICKS_INGRESS_CERT_ARN: ${{ secrets.STAGE_FORMBRICKS_INGRESS_CERT_ARN }}
-          FORMBRICKS_ROLE_ARN: ${{ secrets.STAGE_FORMBRICKS_ROLE_ARN }}
-        with:
-          helm-plugins: >
-            https://github.com/databus23/helm-diff,
-            https://github.com/jkroepke/helm-secrets
-          helmfile-args: apply -l environment=stage
+          helmfile-args: apply
           helmfile-auto-init: "false"
           helmfile-workdirectory: infra/formbricks-cloud-helm
 

.github/workflows/formbricks-release.yml

@@ -31,4 +31,3 @@ jobs:
       - helm-chart-release
     with:
       VERSION: ${{ needs.docker-build.outputs.VERSION }}
-      ENVIRONMENT: "prod"

.github/workflows/release-changesets.yml

@@ -0,0 +1,56 @@
+name: Release Changesets
+
+on:
+  workflow_dispatch:
+  #push:
+  #  branches:
+  #    - main
+
+permissions:
+  contents: write
+  pull-requests: write
+  packages: write
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+env:
+  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+  TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    env:
+      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+    steps:
+      - name: Harden the runner (Audit all outbound calls)
+        uses: step-security/harden-runner@4d991eb9b905ef189e4c376166672c3f2f230481 # v2.11.0
+        with:
+          egress-policy: audit
+
+      - name: Checkout Repo
+        uses: actions/checkout@ee0669bd1cc54295c223e0bb666b733df41de1c5 # v2.7.0
+
+      - name: Setup Node.js 18.x
+        uses: actions/setup-node@7c12f8017d5436eb855f1ed4399f037a36fbd9e8 # v2.5.2
+        with:
+          node-version: 18.x
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@c3b53f6a16e57305370b4ae5a540c2077a1d50dd # v2.2.4
+
+      - name: Install Dependencies
+        run: pnpm install --config.platform=linux --config.architecture=x64
+
+      - name: Create Release Pull Request or Publish to npm
+        id: changesets
+        uses: changesets/action@c8bada60c408975afd1a20b3db81d6eee6789308 # v1.4.9
+        with:
+          # This expects you to have a script called release which does a build for your packages and calls changeset publish
+          publish: pnpm release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

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

@@ -51,7 +51,7 @@ jobs:
       # https://github.com/docker/login-action
       - name: Log into registry ${{ env.REGISTRY }}
         if: github.event_name != 'pull_request'
-        uses: docker/login-action@74a5d142397b4f367a81961eba4e8cd7edddf772 # v3.4.0
+        uses: docker/login-action@9780b0c442fbb1117ed29e0efdff1e18412f7567 # v3.3.0
         with:
           registry: ${{ env.REGISTRY }}
           username: ${{ github.actor }}
@@ -82,6 +82,8 @@ jobs:
           secrets: |
             database_url=${{ secrets.DUMMY_DATABASE_URL }}
             encryption_key=${{ secrets.DUMMY_ENCRYPTION_KEY }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
 
       # Sign the resulting Docker image digest except on PRs.
       # This will only write to the public Rekor transparency log when the Docker

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

@@ -71,7 +71,7 @@ jobs:
       # https://github.com/docker/login-action
       - name: Log into registry ${{ env.REGISTRY }}
         if: github.event_name != 'pull_request'
-        uses: docker/login-action@74a5d142397b4f367a81961eba4e8cd7edddf772 # v3.4.0
+        uses: docker/login-action@9780b0c442fbb1117ed29e0efdff1e18412f7567 # v3.3.0
         with:
           registry: ${{ env.REGISTRY }}
           username: ${{ github.actor }}
@@ -102,6 +102,8 @@ jobs:
           secrets: |
             database_url=${{ secrets.DUMMY_DATABASE_URL }}
             encryption_key=${{ secrets.DUMMY_ENCRYPTION_KEY }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
 
       # Sign the resulting Docker image digest except on PRs.
       # This will only write to the public Rekor transparency log when the Docker

.github/workflows/terrafrom-plan-and-apply.yml

@@ -33,13 +33,6 @@ jobs:
       - name: Checkout
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
 
-      - name: Tailscale
-        uses: tailscale/github-action@v3
-        with:
-          oauth-client-id: ${{ secrets.TS_OAUTH_CLIENT_ID }}
-          oauth-secret: ${{ secrets.TS_OAUTH_SECRET }}
-          tags: tag:github
-
       - name: Configure AWS Credentials
         uses: aws-actions/configure-aws-credentials@e3dd6a429d7300a6a4c196c26e071d42e0343502 # v4.0.2
         with:

.gitignore

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

.husky/pre-commit

@@ -16,6 +16,6 @@ if [ -f branch.json ]; then
     echo "Skipping tolgee-pull: NEXT_PUBLIC_TOLGEE_API_KEY is not set"
   else
     pnpm run tolgee-pull
-    git add apps/web/locales
+    git add packages/lib/messages
   fi
 fi

.tolgeerc.json

@@ -4,33 +4,33 @@
   "patterns": ["./apps/web/**/*.ts?(x)"],
   "projectId": 10304,
   "pull": {
-    "path": "./apps/web/locales"
+    "path": "./packages/lib/messages"
   },
   "push": {
     "files": [
       {
         "language": "en-US",
-        "path": "./apps/web/locales/en-US.json"
+        "path": "./packages/lib/messages/en-US.json"
       },
       {
         "language": "de-DE",
-        "path": "./apps/web/locales/de-DE.json"
+        "path": "./packages/lib/messages/de-DE.json"
       },
       {
         "language": "fr-FR",
-        "path": "./apps/web/locales/fr-FR.json"
+        "path": "./packages/lib/messages/fr-FR.json"
       },
       {
         "language": "pt-BR",
-        "path": "./apps/web/locales/pt-BR.json"
+        "path": "./packages/lib/messages/pt-BR.json"
       },
       {
         "language": "zh-Hant-TW",
-        "path": "./apps/web/locales/zh-Hant-TW.json"
+        "path": "./packages/lib/messages/zh-Hant-TW.json"
       },
       {
         "language": "pt-PT",
-        "path": "./apps/web/locales/pt-PT.json"
+        "path": "./packages/lib/messages/pt-PT.json"
       }
     ],
     "forceMode": "OVERRIDE"

.vscode/settings.json

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

LICENSE

@@ -3,7 +3,7 @@ Copyright (c) 2024 Formbricks GmbH
 Portions of this software are licensed as follows:
 
 - All content that resides under the "apps/web/modules/ee" directory of this repository, if these directories exist, is licensed under the license defined in "apps/web/modules/ee/LICENSE".
-- All content that resides under the "packages/js/", "packages/android/", "packages/ios/" and "packages/api/" directories of this repository, if that directories exist, is licensed under the "MIT" license as defined in the "LICENSE" files of these packages.
+- All content that resides under the "packages/js/", "packages/react-native/", "packages/android/", "packages/ios/" and "packages/api/" directories of this repository, if that directories exist, is licensed under the "MIT" license as defined in the "LICENSE" files of these packages.
 - All third party components incorporated into the Formbricks Software are licensed under the original license provided by the owner of the applicable component.
 - Content outside of the above mentioned directories or restrictions above is available under the "AGPLv3" license as defined below.
 

apps/demo-react-native/.env.example

@@ -0,0 +1,2 @@
+EXPO_PUBLIC_APP_URL=http://192.168.0.197:3000
+EXPO_PUBLIC_FORMBRICKS_ENVIRONMENT_ID=cm5p0cs7r000819182b32j0a1

apps/demo-react-native/.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  extends: ["@formbricks/eslint-config/library.js"],
+  extends: ["@formbricks/eslint-config/react.js"],
   parserOptions: {
     project: "tsconfig.json",
     tsconfigRootDir: __dirname,

apps/demo-react-native/.gitignore

@@ -0,0 +1,35 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo

apps/demo-react-native/app.json

@@ -0,0 +1,35 @@
+{
+  "expo": {
+    "android": {
+      "adaptiveIcon": {
+        "backgroundColor": "#ffffff",
+        "foregroundImage": "./assets/adaptive-icon.png"
+      }
+    },
+    "assetBundlePatterns": ["**/*"],
+    "icon": "./assets/icon.png",
+    "ios": {
+      "infoPlist": {
+        "NSCameraUsageDescription": "Take pictures for certain activities.",
+        "NSMicrophoneUsageDescription": "Need microphone access for recording videos.",
+        "NSPhotoLibraryUsageDescription": "Select pictures for certain activities."
+      },
+      "supportsTablet": true
+    },
+    "jsEngine": "hermes",
+    "name": "react-native-demo",
+    "newArchEnabled": true,
+    "orientation": "portrait",
+    "slug": "react-native-demo",
+    "splash": {
+      "backgroundColor": "#ffffff",
+      "image": "./assets/splash.png",
+      "resizeMode": "contain"
+    },
+    "userInterfaceStyle": "light",
+    "version": "1.0.0",
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

apps/demo-react-native/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function babel(api) {
+  api.cache(true);
+  return {
+    presets: ["babel-preset-expo"],
+  };
+};

apps/demo-react-native/index.js

@@ -0,0 +1,7 @@
+import { registerRootComponent } from "expo";
+import { LogBox } from "react-native";
+import App from "./src/app";
+
+registerRootComponent(App);
+
+LogBox.ignoreAllLogs();

apps/demo-react-native/metro.config.js

@@ -0,0 +1,21 @@
+// Learn more https://docs.expo.io/guides/customizing-metro
+const path = require("node:path");
+const { getDefaultConfig } = require("expo/metro-config");
+
+// Find the workspace root, this can be replaced with `find-yarn-workspace-root`
+const workspaceRoot = path.resolve(__dirname, "../..");
+const projectRoot = __dirname;
+
+const config = getDefaultConfig(projectRoot);
+
+// 1. Watch all files within the monorepo
+config.watchFolders = [workspaceRoot];
+// 2. Let Metro know where to resolve packages, and in what order
+config.resolver.nodeModulesPaths = [
+  path.resolve(projectRoot, "node_modules"),
+  path.resolve(workspaceRoot, "node_modules"),
+];
+// 3. Force Metro to resolve (sub)dependencies only from the `nodeModulesPaths`
+config.resolver.disableHierarchicalLookup = true;
+
+module.exports = config;

apps/demo-react-native/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@formbricks/demo-react-native",
+  "version": "1.0.0",
+  "main": "./index.js",
+  "scripts": {
+    "dev": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "eject": "expo eject",
+    "clean": "rimraf .turbo node_modules .expo"
+  },
+  "dependencies": {
+    "@formbricks/js": "workspace:*",
+    "@formbricks/react-native": "workspace:*",
+    "@react-native-async-storage/async-storage": "2.1.0",
+    "expo": "52.0.28",
+    "expo-status-bar": "2.0.1",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-native": "0.76.6",
+    "react-native-webview": "13.12.5"
+  },
+  "devDependencies": {
+    "@babel/core": "7.26.0",
+    "@types/react": "18.3.18",
+    "typescript": "5.7.2"
+  },
+  "private": true
+}

apps/demo-react-native/src/app.tsx

@@ -0,0 +1,117 @@
+import { StatusBar } from "expo-status-bar";
+import React, { type JSX } from "react";
+import { Button, LogBox, StyleSheet, Text, View } from "react-native";
+import Formbricks, {
+  logout,
+  setAttribute,
+  setAttributes,
+  setLanguage,
+  setUserId,
+  track,
+} from "@formbricks/react-native";
+
+LogBox.ignoreAllLogs();
+
+export default function App(): JSX.Element {
+  if (!process.env.EXPO_PUBLIC_FORMBRICKS_ENVIRONMENT_ID) {
+    throw new Error("EXPO_PUBLIC_FORMBRICKS_ENVIRONMENT_ID is required");
+  }
+
+  if (!process.env.EXPO_PUBLIC_APP_URL) {
+    throw new Error("EXPO_PUBLIC_APP_URL is required");
+  }
+
+  return (
+    <View style={styles.container}>
+      <Text>Formbricks React Native SDK Demo</Text>
+
+      <View
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: 10,
+        }}>
+        <Button
+          title="Trigger Code Action"
+          onPress={() => {
+            track("code").catch((error: unknown) => {
+              // eslint-disable-next-line no-console -- logging is allowed in demo apps
+              console.error("Error tracking event:", error);
+            });
+          }}
+        />
+
+        <Button
+          title="Set User Id"
+          onPress={() => {
+            setUserId("random-user-id").catch((error: unknown) => {
+              // eslint-disable-next-line no-console -- logging is allowed in demo apps
+              console.error("Error setting user id:", error);
+            });
+          }}
+        />
+
+        <Button
+          title="Set User Attributess (multiple)"
+          onPress={() => {
+            setAttributes({
+              testAttr: "attr-test",
+              testAttr2: "attr-test-2",
+              testAttr3: "attr-test-3",
+              testAttr4: "attr-test-4",
+            }).catch((error: unknown) => {
+              // eslint-disable-next-line no-console -- logging is allowed in demo apps
+              console.error("Error setting user attributes:", error);
+            });
+          }}
+        />
+
+        <Button
+          title="Set User Attributes (single)"
+          onPress={() => {
+            setAttribute("testSingleAttr", "testSingleAttr").catch((error: unknown) => {
+              // eslint-disable-next-line no-console -- logging is allowed in demo apps
+              console.error("Error setting user attributes:", error);
+            });
+          }}
+        />
+
+        <Button
+          title="Logout"
+          onPress={() => {
+            logout().catch((error: unknown) => {
+              // eslint-disable-next-line no-console -- logging is allowed in demo apps
+              console.error("Error logging out:", error);
+            });
+          }}
+        />
+
+        <Button
+          title="Set Language (de)"
+          onPress={() => {
+            setLanguage("de").catch((error: unknown) => {
+              // eslint-disable-next-line no-console -- logging is allowed in demo apps
+              console.error("Error setting language:", error);
+            });
+          }}
+        />
+      </View>
+
+      <StatusBar style="auto" />
+
+      <Formbricks
+        appUrl={process.env.EXPO_PUBLIC_APP_URL as string}
+        environmentId={process.env.EXPO_PUBLIC_FORMBRICKS_ENVIRONMENT_ID as string}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

apps/demo-react-native/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "strict": true
+  },
+  "extends": "expo/tsconfig.base"
+}

apps/web/.eslintrc.js

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

apps/web/.gitignore

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

apps/web/Dockerfile

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

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

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

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

@@ -101,17 +101,17 @@ export const OnboardingSetupInstructions = ({
       <div>
         {activeTab === "npm" ? (
           <div className="prose prose-slate w-full">
-            <CodeBlock customEditorClass="!bg-white border border-slate-200" language="sh">
+            <CodeBlock customEditorClass="bg-white! border border-slate-200" language="sh">
               npm install @formbricks/js
             </CodeBlock>
             <p>{t("common.or")}</p>
-            <CodeBlock customEditorClass="!bg-white border border-slate-200" language="sh">
+            <CodeBlock customEditorClass="bg-white! border border-slate-200" language="sh">
               yarn add @formbricks/js
             </CodeBlock>
             <p className="text-sm text-slate-700">
               {t("environments.connect.import_formbricks_and_initialize_the_widget_in_your_component")}
             </p>
-            <CodeBlock customEditorClass="!bg-white border border-slate-200" language="js">
+            <CodeBlock customEditorClass="bg-white! border border-slate-200" language="js">
               {channel === "app" ? npmSnippetForAppSurveys : npmSnippetForWebsiteSurveys}
             </CodeBlock>
             <Button id="onboarding-inapp-connect-read-npm-docs" className="mt-3" variant="secondary" asChild>
@@ -125,11 +125,11 @@ export const OnboardingSetupInstructions = ({
           </div>
         ) : activeTab === "html" ? (
           <div className="prose prose-slate">
-            <p className="-mb-1 mt-6 text-sm text-slate-700">
+            <p className="mt-6 -mb-1 text-sm text-slate-700">
               {t("environments.connect.insert_this_code_into_the_head_tag_of_your_website")}
             </p>
             <div>
-              <CodeBlock customEditorClass="!bg-white border border-slate-200" language="js">
+              <CodeBlock customEditorClass="bg-white! border border-slate-200" language="js">
                 {channel === "app" ? htmlSnippetForAppSurveys : htmlSnippetForWebsiteSurveys}
               </CodeBlock>
             </div>

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

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

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

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

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

@@ -1,7 +1,4 @@
 import { XMTemplateList } from "@/app/(app)/(onboarding)/environments/[environmentId]/xm-templates/components/XMTemplateList";
-import { getEnvironment } from "@/lib/environment/service";
-import { getProjectByEnvironmentId, getUserProjects } from "@/lib/project/service";
-import { getUser } from "@/lib/user/service";
 import { getOrganizationIdFromEnvironmentId } from "@/lib/utils/helper";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 import { Button } from "@/modules/ui/components/button";
@@ -10,6 +7,9 @@ import { getTranslate } from "@/tolgee/server";
 import { XIcon } from "lucide-react";
 import { getServerSession } from "next-auth";
 import Link from "next/link";
+import { getEnvironment } from "@formbricks/lib/environment/service";
+import { getProjectByEnvironmentId, getUserProjects } from "@formbricks/lib/project/service";
+import { getUser } from "@formbricks/lib/user/service";
 
 interface XMTemplatePageProps {
   params: Promise<{
@@ -49,7 +49,7 @@ const Page = async (props: XMTemplatePageProps) => {
       <XMTemplateList project={project} user={user} environmentId={environment.id} />
       {projects.length >= 2 && (
         <Button
-          className="absolute top-5 right-5 !mt-0 text-slate-500 hover:text-slate-700"
+          className="absolute 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,8 +2,6 @@
 
 import { formbricksLogout } from "@/app/lib/formbricks";
 import FBLogo from "@/images/formbricks-wordmark.svg";
-import { cn } from "@/lib/cn";
-import { capitalizeFirstLetter } from "@/lib/utils/strings";
 import { CreateOrganizationModal } from "@/modules/organization/components/CreateOrganizationModal";
 import { ProfileAvatar } from "@/modules/ui/components/avatars";
 import {
@@ -26,6 +24,8 @@ import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useMemo, useState } from "react";
+import { cn } from "@formbricks/lib/cn";
+import { capitalizeFirstLetter } from "@formbricks/lib/utils/strings";
 import { TOrganization } from "@formbricks/types/organizations";
 import { TUser } from "@formbricks/types/user";
 
@@ -80,7 +80,7 @@ export const LandingSidebar = ({
           <DropdownMenuTrigger
             asChild
             id="userDropdownTrigger"
-            className="w-full rounded-br-xl border-t py-4 pl-4 transition-colors duration-200 hover:bg-slate-50 focus:outline-none">
+            className="w-full rounded-br-xl border-t py-4 pl-4 transition-colors duration-200 hover:bg-slate-50 focus:outline-hidden">
             <div tabIndex={0} className={cn("flex cursor-pointer flex-row items-center space-x-3")}>
               <ProfileAvatar userId={user.id} imageUrl={user.imageUrl} />
               <>
@@ -112,7 +112,7 @@ export const LandingSidebar = ({
             {/* Dropdown Items */}
 
             {dropdownNavigation.map((link) => (
-              <Link id={link.href} href={link.href} target={link.target} className="flex w-full items-center">
+              <Link href={link.href} target={link.target} className="flex w-full items-center">
                 <DropdownMenuItem>
                   <link.icon className="mr-2 h-4 w-4" strokeWidth={1.5} />
                   {link.label}

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,4 @@
 import { OnboardingOptionsContainer } from "@/app/(app)/(onboarding)/organizations/components/OnboardingOptionsContainer";
-import { getUserProjects } from "@/lib/project/service";
 import { getOrganizationAuth } from "@/modules/organization/lib/utils";
 import { Button } from "@/modules/ui/components/button";
 import { Header } from "@/modules/ui/components/header";
@@ -7,6 +6,7 @@ import { getTranslate } from "@/tolgee/server";
 import { PictureInPicture2Icon, SendIcon, XIcon } from "lucide-react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
+import { getUserProjects } from "@formbricks/lib/project/service";
 
 interface ChannelPageProps {
   params: Promise<{
@@ -50,7 +50,7 @@ const Page = async (props: ChannelPageProps) => {
       <OnboardingOptionsContainer options={channelOptions} />
       {projects.length >= 1 && (
         <Button
-          className="absolute top-5 right-5 !mt-0 text-slate-500 hover:text-slate-700"
+          className="absolute 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,5 +1,4 @@
 import { OnboardingOptionsContainer } from "@/app/(app)/(onboarding)/organizations/components/OnboardingOptionsContainer";
-import { getUserProjects } from "@/lib/project/service";
 import { getOrganizationAuth } from "@/modules/organization/lib/utils";
 import { Button } from "@/modules/ui/components/button";
 import { Header } from "@/modules/ui/components/header";
@@ -7,6 +6,7 @@ import { getTranslate } from "@/tolgee/server";
 import { HeartIcon, ListTodoIcon, XIcon } from "lucide-react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
+import { getUserProjects } from "@formbricks/lib/project/service";
 
 interface ModePageProps {
   params: Promise<{
@@ -47,7 +47,7 @@ const Page = async (props: ModePageProps) => {
       <OnboardingOptionsContainer options={channelOptions} />
       {projects.length >= 1 && (
         <Button
-          className="absolute top-5 right-5 !mt-0 text-slate-500 hover:text-slate-700"
+          className="absolute 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,7 +2,6 @@
 
 import { createProjectAction } from "@/app/(app)/environments/[environmentId]/actions";
 import { previewSurvey } from "@/app/lib/templates";
-import { FORMBRICKS_SURVEYS_FILTERS_KEY_LS } from "@/lib/localStorage";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { TOrganizationTeam } from "@/modules/ee/teams/project-teams/types/team";
 import { CreateTeamModal } from "@/modules/ee/teams/team-list/components/create-team-modal";
@@ -27,6 +26,7 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "react-hot-toast";
+import { FORMBRICKS_SURVEYS_FILTERS_KEY_LS } from "@formbricks/lib/localStorage";
 import {
   TProjectConfigChannel,
   TProjectConfigIndustry,
@@ -218,7 +218,7 @@ export const ProjectSettings = ({
         </FormProvider>
       </div>
 
-      <div className="relative flex h-[30rem] w-1/2 flex-col items-center justify-center space-y-2 rounded-lg border bg-slate-200 shadow">
+      <div className="relative flex h-[30rem] w-1/2 flex-col items-center justify-center space-y-2 rounded-lg border bg-slate-200 shadow-sm">
         {logoUrl && (
           <Image
             src={logoUrl}

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

@@ -1,7 +1,5 @@
 import { getTeamsByOrganizationId } from "@/app/(app)/(onboarding)/lib/onboarding";
 import { ProjectSettings } from "@/app/(app)/(onboarding)/organizations/[organizationId]/projects/new/settings/components/ProjectSettings";
-import { DEFAULT_BRAND_COLOR } from "@/lib/constants";
-import { getUserProjects } from "@/lib/project/service";
 import { getRoleManagementPermission } from "@/modules/ee/license-check/lib/utils";
 import { getOrganizationAuth } from "@/modules/organization/lib/utils";
 import { Button } from "@/modules/ui/components/button";
@@ -10,6 +8,8 @@ import { getTranslate } from "@/tolgee/server";
 import { XIcon } from "lucide-react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
+import { DEFAULT_BRAND_COLOR } from "@formbricks/lib/constants";
+import { getUserProjects } from "@formbricks/lib/project/service";
 import { TProjectConfigChannel, TProjectConfigIndustry, TProjectMode } from "@formbricks/types/project";
 
 interface ProjectSettingsPageProps {
@@ -65,7 +65,7 @@ const Page = async (props: ProjectSettingsPageProps) => {
       />
       {projects.length >= 1 && (
         <Button
-          className="absolute top-5 right-5 !mt-0 text-slate-500 hover:text-slate-700"
+          className="absolute 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 { afterEach, describe, expect, it, 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("@/lib/environment/service", () => ({
+vi.mock("@formbricks/lib/environment/service", () => ({
   getEnvironment: vi.fn(),
 }));
 vi.mock("next/navigation", () => ({
@@ -41,7 +41,7 @@ describe("SurveyEditorEnvironmentLayout", () => {
     vi.clearAllMocks();
   });
 
-  test("renders successfully when environment is found", async () => {
+  it("renders successfully when environment is found", async () => {
     vi.mocked(environmentIdLayoutChecks).mockResolvedValueOnce({
       t: ((key: string) => key) as any, // Mock translation function, we don't need to implement it for the test
       session: { user: { id: "user1" } } as Session,
@@ -62,7 +62,7 @@ describe("SurveyEditorEnvironmentLayout", () => {
     expect(screen.getByTestId("child")).toHaveTextContent("Survey Editor Content");
   });
 
-  test("throws an error when environment is not found", async () => {
+  it("throws an error when environment is not found", async () => {
     vi.mocked(environmentIdLayoutChecks).mockResolvedValueOnce({
       t: ((key: string) => key) as any,
       session: { user: { id: "user1" } } as Session,
@@ -79,7 +79,7 @@ describe("SurveyEditorEnvironmentLayout", () => {
     ).rejects.toThrow("common.environment_not_found");
   });
 
-  test("calls redirect when session is null", async () => {
+  it("calls redirect when session is null", async () => {
     vi.mocked(environmentIdLayoutChecks).mockResolvedValueOnce({
       t: ((key: string) => key) as any,
       session: undefined as unknown as Session,
@@ -98,7 +98,7 @@ describe("SurveyEditorEnvironmentLayout", () => {
     ).rejects.toThrow("Redirect called");
   });
 
-  test("throws error if user is null", async () => {
+  it("throws error if user is null", async () => {
     vi.mocked(environmentIdLayoutChecks).mockResolvedValueOnce({
       t: ((key: string) => key) as any,
       session: { user: { id: "user1" } } as Session,

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 "@/lib/cn";
+import { cn } from "@formbricks/lib/cn";
 
 export const LoadingCard = ({
   title,

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

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

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

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

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

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

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

@@ -36,7 +36,7 @@ export const ActionClassesTable = ({
 
   return (
     <>
-      <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
+      <div className="rounded-xl border border-slate-200 bg-white shadow-xs">
         {TableHeading}
         <div id="actionClassesWrapper" className="flex flex-col">
           {actionClasses.length > 0 ? (

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

@@ -1,5 +1,5 @@
 import { ACTION_TYPE_ICON_LOOKUP } from "@/app/(app)/environments/[environmentId]/actions/utils";
-import { timeSince } from "@/lib/time";
+import { timeSince } from "@formbricks/lib/time";
 import { TActionClass } from "@formbricks/types/action-classes";
 import { TUserLocale } from "@formbricks/types/user";
 
@@ -14,9 +14,7 @@ export const ActionClassDataRow = ({
     <div className="m-2 grid h-16 grid-cols-6 content-center rounded-lg transition-colors ease-in-out hover:bg-slate-100">
       <div className="col-span-4 flex items-center pl-6 text-sm">
         <div className="flex items-center">
-          <div className="h-5 w-5 flex-shrink-0 text-slate-500">
-            {ACTION_TYPE_ICON_LOOKUP[actionClass.type]}
-          </div>
+          <div className="h-5 w-5 shrink-0 text-slate-500">{ACTION_TYPE_ICON_LOOKUP[actionClass.type]}</div>
           <div className="ml-4 text-left">
             <div className="font-medium text-slate-900">{actionClass.name}</div>
             <div className="text-xs text-slate-400">{actionClass.description}</div>

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

@@ -10,7 +10,7 @@ const Loading = () => {
     <>
       <PageContentWrapper>
         <PageHeader pageTitle={t("common.actions")} />
-        <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
+        <div className="rounded-xl border border-slate-200 bg-white shadow-xs">
           <div className="grid h-12 grid-cols-6 content-center border-b border-slate-200 text-left text-sm font-semibold text-slate-900">
             <span className="sr-only">{t("common.edit")}</span>
             <div className="col-span-4 pl-6">{t("environments.actions.user_actions")}</div>
@@ -22,7 +22,7 @@ const Loading = () => {
               className="m-2 grid h-16 grid-cols-6 content-center rounded-lg transition-colors ease-in-out hover:bg-slate-100">
               <div className="col-span-4 flex items-center pl-6 text-sm">
                 <div className="flex items-center">
-                  <div className="h-6 w-6 flex-shrink-0 animate-pulse rounded-full bg-slate-200 text-slate-500" />
+                  <div className="h-6 w-6 shrink-0 animate-pulse rounded-full bg-slate-200 text-slate-500" />
                   <div className="ml-4 text-left">
                     <div className="font-medium text-slate-900">
                       <div className="mt-0 h-4 w-48 animate-pulse rounded-full bg-slate-200"></div>
@@ -33,7 +33,7 @@ const Loading = () => {
                   </div>
                 </div>
               </div>
-              <div className="col-span-2 my-auto flex justify-center whitespace-nowrap text-center text-sm text-slate-500">
+              <div className="col-span-2 my-auto flex justify-center text-center text-sm whitespace-nowrap text-slate-500">
                 <div className="h-4 w-28 animate-pulse rounded-full bg-slate-200"></div>
               </div>
             </div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -18,7 +18,7 @@ export const TopControlBar = ({
 }: SideBarProps) => {
   return (
     <div className="fixed inset-0 top-0 z-30 flex h-14 w-full items-center justify-end bg-slate-50 px-6">
-      <div className="shadow-xs z-10">
+      <div className="z-10 shadow-2xs">
         <div className="flex w-fit items-center space-x-2 py-2">
           <TopControlButtons
             environment={environment}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,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 { afterEach, describe, expect, it, 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("@/lib/project/service", () => ({
+vi.mock("@formbricks/lib/project/service", () => ({
   getProjectByEnvironmentId: vi.fn(),
 }));
-vi.mock("@/lib/membership/service", () => ({
+vi.mock("@formbricks/lib/membership/service", () => ({
   getMembershipByUserIdOrganizationId: vi.fn(),
 }));
 
@@ -53,7 +53,7 @@ describe("EnvLayout", () => {
     cleanup();
   });
 
-  test("renders successfully when all dependencies return valid data", async () => {
+  it("renders successfully when all dependencies return valid data", async () => {
     vi.mocked(environmentIdLayoutChecks).mockResolvedValueOnce({
       t: ((key: string) => key) as any, // Mock translation function, we don't need to implement it for the test
       session: { user: { id: "user1" } } as Session,
@@ -77,7 +77,7 @@ describe("EnvLayout", () => {
     expect(screen.getByTestId("child")).toHaveTextContent("Content");
   });
 
-  test("throws error if project is not found", async () => {
+  it("throws error if project is not found", async () => {
     vi.mocked(environmentIdLayoutChecks).mockResolvedValueOnce({
       t: ((key: string) => key) as any,
       session: { user: { id: "user1" } } as Session,
@@ -97,7 +97,7 @@ describe("EnvLayout", () => {
     ).rejects.toThrow("common.project_not_found");
   });
 
-  test("throws error if membership is not found", async () => {
+  it("throws error if membership is not found", async () => {
     vi.mocked(environmentIdLayoutChecks).mockResolvedValueOnce({
       t: ((key: string) => key) as any,
       session: { user: { id: "user1" } } as Session,
@@ -115,7 +115,7 @@ describe("EnvLayout", () => {
     ).rejects.toThrow("common.membership_not_found");
   });
 
-  test("calls redirect when session is null", async () => {
+  it("calls redirect when session is null", async () => {
     vi.mocked(environmentIdLayoutChecks).mockResolvedValueOnce({
       t: ((key: string) => key) as any,
       session: undefined as unknown as Session,
@@ -134,7 +134,7 @@ describe("EnvLayout", () => {
     ).rejects.toThrow("Redirect called");
   });
 
-  test("throws error if user is null", async () => {
+  it("throws error if user is null", async () => {
     vi.mocked(environmentIdLayoutChecks).mockResolvedValueOnce({
       t: ((key: string) => key) as any,
       session: { user: { id: "user1" } } as Session,

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/components/EditAlerts.tsx

@@ -56,7 +56,7 @@ export const EditAlerts = ({
                   <TooltipTrigger>
                     <div className="col-span-1 flex cursor-default items-center justify-center space-x-2">
                       <span>{t("environments.settings.notifications.every_response")}</span>
-                      <HelpCircleIcon className="h-4 w-4 flex-shrink-0 text-slate-500" />
+                      <HelpCircleIcon className="h-4 w-4 shrink-0 text-slate-500" />
                     </div>
                   </TooltipTrigger>
                   <TooltipContent>
@@ -99,7 +99,7 @@ export const EditAlerts = ({
                 ))}
               </div>
             ) : (
-              <div className="m-2 flex h-16 items-center justify-center rounded bg-slate-50 text-sm text-slate-500">
+              <div className="m-2 flex h-16 items-center justify-center rounded-sm bg-slate-50 text-sm text-slate-500">
                 <p>{t("common.no_surveys_found")}</p>
               </div>
             )}

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

@@ -11,7 +11,7 @@ export const IntegrationsTip = ({ environmentId }: IntegrationsTipProps) => {
   const { t } = useTranslate();
   return (
     <div>
-      <div className="flex max-w-4xl items-center space-y-3 rounded-lg border border-blue-100 bg-blue-50 p-4 text-sm text-blue-900 shadow-sm md:space-y-0 md:text-base">
+      <div className="flex max-w-4xl items-center space-y-3 rounded-lg border border-blue-100 bg-blue-50 p-4 text-sm text-blue-900 shadow-xs md:space-y-0 md:text-base">
         <SlackIcon className="mr-3 h-4 w-4 text-blue-400" />
         <p className="text-sm">
           {t("environments.settings.notifications.need_slack_or_discord_notifications")}?

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";