Refactor user model to use separate first and last name fields

Co-authored-by: mail <mail@matti.sh>

.cursor/rules/component-migration.mdc

@@ -0,0 +1,216 @@
+---
+description: 
+globs: 
+alwaysApply: false
+---
+# Component Migration Automation Rule
+
+## Overview
+This rule automates the migration of deprecated components to new component systems in React/TypeScript codebases.
+
+## Trigger
+When the user requests component migration (e.g., "migrate [DeprecatedComponent] to [NewComponent]" or "component migration").
+
+## Process
+
+### Step 1: Discovery and Planning
+1. **Identify migration parameters:**
+   - Ask user for deprecated component name (e.g., "Modal")
+   - Ask user for new component name(s) (e.g., "Dialog")
+   - Ask for any components to exclude (e.g., "ModalWithTabs")
+   - Ask for specific import paths if needed
+
+2. **Scan codebase** for deprecated components:
+   - Search for `import.*[DeprecatedComponent]` patterns
+   - Exclude specified components that should not be migrated
+   - List all found components with file paths
+   - Present numbered list to user for confirmation
+
+### Step 2: Component-by-Component Migration
+For each component, follow this exact sequence:
+
+#### 2.1 Component Migration
+- **Import changes:**
+  - Ask user to provide the new import structure
+  - Example transformation pattern:
+  ```typescript
+  // FROM:
+  import { [DeprecatedComponent] } from "@/components/ui/[DeprecatedComponent]"
+  
+  // TO:
+  import {
+    [NewComponent],
+    [NewComponentPart1],
+    [NewComponentPart2],
+    // ... other parts
+  } from "@/components/ui/[NewComponent]"
+  ```
+
+- **Props transformation:**
+  - Ask user for prop mapping rules (e.g., `open` → `open`, `setOpen` → `onOpenChange`)
+  - Ask for props to remove (e.g., `noPadding`, `closeOnOutsideClick`, `size`)
+  - Apply transformations based on user specifications
+
+- **Structure transformation:**
+  - Ask user for the new component structure pattern
+  - Apply the transformation maintaining all functionality
+  - Preserve all existing logic, state management, and event handlers
+
+#### 2.2 Wait for User Approval
+- Present the migration changes
+- Wait for explicit user approval before proceeding
+- If rejected, ask for specific feedback and iterate
+#### 2.3 Re-read and Apply Additional Changes
+- Re-read the component file to capture any user modifications
+- Apply any additional improvements the user made
+- Ensure all changes are incorporated
+
+#### 2.4 Test File Updates
+- **Find corresponding test file** (same name with `.test.tsx` or `.test.ts`)
+- **Update test mocks:**
+  - Ask user for new component mock structure
+  - Replace old component mocks with new ones
+  - Example pattern:
+  ```typescript
+  // Add to test setup:
+  jest.mock("@/components/ui/[NewComponent]", () => ({
+    [NewComponent]: ({ children, [props] }: any) => ([mock implementation]),
+    [NewComponentPart1]: ({ children }: any) => <div data-testid="[new-component-part1]">{children}</div>,
+    [NewComponentPart2]: ({ children }: any) => <div data-testid="[new-component-part2]">{children}</div>,
+    // ... other parts
+  }));
+  ```
+- **Update test expectations:**
+  - Change test IDs from old component to new component
+  - Update any component-specific assertions
+  - Ensure all new component parts used in the component are mocked
+
+#### 2.5 Run Tests and Optimize
+- Execute `Node package manager test -- ComponentName.test.tsx`
+- Fix any failing tests
+- Optimize code quality (imports, formatting, etc.)
+- Re-run tests until all pass
+- **Maximum 3 iterations** - if still failing, ask user for guidance
+
+#### 2.6 Wait for Final Approval
+- Present test results and any optimizations made
+- Wait for user approval of the complete migration
+- If rejected, iterate based on feedback
+
+#### 2.7 Git Commit
+- Run: `git add .`
+- Run: `git commit -m "migrate [ComponentName] from [DeprecatedComponent] to [NewComponent]"`
+- Confirm commit was successful
+
+### Step 3: Final Report Generation
+After all components are migrated, generate a comprehensive GitHub PR report:
+
+#### PR Title
+```
+feat: migrate [DeprecatedComponent] components to [NewComponent] system
+```
+
+#### PR Description Template
+```markdown
+## 🔄 [DeprecatedComponent] to [NewComponent] Migration
+
+### Overview
+Migrated [X] [DeprecatedComponent] components to the new [NewComponent] component system to modernize the UI architecture and improve consistency.
+
+### Components Migrated
+[List each component with file path]
+
+### Technical Changes
+- **Imports:** Replaced `[DeprecatedComponent]` with `[NewComponent], [NewComponentParts...]`
+- **Props:** [List prop transformations]
+- **Structure:** Implemented proper [NewComponent] component hierarchy
+- **Styling:** [Describe styling changes]
+- **Tests:** Updated all test mocks and expectations
+
+### Migration Pattern
+```typescript
+// Before
+<[DeprecatedComponent] [oldProps]>
+  [oldStructure]
+</[DeprecatedComponent]>
+
+// After
+<[NewComponent] [newProps]>
+  [newStructure]
+</[NewComponent]>
+```
+
+### Testing
+- ✅ All existing tests updated and passing
+- ✅ Component functionality preserved
+- ✅ UI/UX behavior maintained
+
+### How to Test This PR
+1. **Functional Testing:**
+   - Navigate to each migrated component's usage
+   - Verify [component] opens and closes correctly
+   - Test all interactive elements within [components]
+   - Confirm styling and layout are preserved
+
+2. **Automated Testing:**
+   ```bash
+   Node package manager test
+   ```
+
+3. **Visual Testing:**
+   - Check that all [components] maintain proper styling
+   - Verify responsive behavior
+   - Test keyboard navigation and accessibility
+
+### Breaking Changes
+[List any breaking changes or state "None - this is a drop-in replacement maintaining all existing functionality."]
+
+### Notes
+- [Any excluded components] were preserved as they already use [NewComponent] internally
+- All form validation and complex state management preserved
+- Enhanced code quality with better imports and formatting
+```
+
+## Special Considerations
+
+### Excluded Components
+- **DO NOT MIGRATE** components specified by user as exclusions
+- They may already use the new component internally or have other reasons
+- Inform user these are skipped and why
+
+### Complex Components
+- Preserve all existing functionality (forms, validation, state management)
+- Maintain prop interfaces
+- Keep all event handlers and callbacks
+- Preserve accessibility features
+
+### Test Coverage
+- Ensure all new component parts are mocked when used
+- Mock all new component parts that appear in the component
+- Update test IDs from old component to new component
+- Maintain all existing test scenarios
+
+### Error Handling
+- If tests fail after 3 iterations, stop and ask user for guidance
+- If component is too complex, ask user for specific guidance
+- If unsure about functionality preservation, ask for clarification
+
+### Migration Patterns
+- Always ask user for specific migration patterns before starting
+- Confirm import structures, prop mappings, and component hierarchies
+- Adapt to different component architectures (simple replacements, complex restructuring, etc.)
+
+## Success Criteria
+- All deprecated components successfully migrated to new components
+- All tests passing
+- No functionality lost
+- Code quality maintained or improved
+- User approval on each component
+- Successful git commits for each migration
+- Comprehensive PR report generated
+
+## Usage Examples
+- "migrate Modal to Dialog"
+- "migrate Button to NewButton" 
+- "migrate Card to ModernCard"
+- "component migration" (will prompt for details) 

.cursor/rules/database.mdc

@@ -0,0 +1,101 @@
+---
+description: >
+  This rule provides comprehensive knowledge about the Formbricks database structure, relationships, 
+  and data patterns. It should be used **only when the agent explicitly requests database schema-level 
+  details** to support tasks such as: writing/debugging Prisma queries, designing/reviewing data models, 
+  investigating multi-tenancy behavior, creating API endpoints, or understanding data relationships.
+globs: []
+alwaysApply: agent-requested
+---
+# Formbricks Database Schema Reference
+
+This rule provides a reference to the Formbricks database structure. For the most up-to-date and complete schema definitions, please refer to the schema.prisma file directly.
+
+## Database Overview
+
+Formbricks uses PostgreSQL with Prisma ORM. The schema is designed for multi-tenancy with strong data isolation between organizations.
+
+### Core Hierarchy
+```
+Organization
+└── Project
+    └── Environment (production/development)
+        ├── Survey
+        ├── Contact
+        ├── ActionClass
+        └── Integration
+```
+
+## Schema Reference
+
+For the complete and up-to-date database schema, please refer to:
+- Main schema: `packages/database/schema.prisma`
+- JSON type definitions: `packages/database/json-types.ts`
+
+The schema.prisma file contains all model definitions, relationships, enums, and field types. The json-types.ts file contains TypeScript type definitions for JSON fields.
+
+## Data Access Patterns
+
+### Multi-tenancy
+- All data is scoped by Organization
+- Environment-level isolation for surveys and contacts
+- Project-level grouping for related surveys
+
+### Soft Deletion
+Some models use soft deletion patterns:
+- Check `isActive` fields where present
+- Use proper filtering in queries
+
+### Cascading Deletes
+Configured cascade relationships:
+- Organization deletion cascades to all child entities
+- Survey deletion removes responses, displays, triggers
+- Contact deletion removes attributes and responses
+
+## Common Query Patterns
+
+### Survey with Responses
+```typescript
+// Include response count and latest responses
+const survey = await prisma.survey.findUnique({
+  where: { id: surveyId },
+  include: {
+    responses: {
+      take: 10,
+      orderBy: { createdAt: 'desc' }
+    },
+    _count: {
+      select: { responses: true }
+    }
+  }
+});
+```
+
+### Environment Scoping
+```typescript
+// Always scope by environment
+const surveys = await prisma.survey.findMany({
+  where: {
+    environmentId: environmentId,
+    // Additional filters...
+  }
+});
+```
+
+### Contact with Attributes
+```typescript
+const contact = await prisma.contact.findUnique({
+  where: { id: contactId },
+  include: {
+    attributes: {
+      include: {
+        attributeKey: true
+      }
+    }
+  }
+});
+```
+
+This schema supports Formbricks' core functionality: multi-tenant survey management, user targeting, response collection, and analysis, all while maintaining strict data isolation and security.
+
+

.cursor/rules/documentations.mdc

@@ -0,0 +1,23 @@
+---
+description: Guideline for writing end-user facing documentation in the apps/docs folder
+globs: 
+alwaysApply: false
+---
+Follow these instructions and guidelines when asked to write documentation in the apps/docs folder
+
+Follow this structure to write the title, describtion and pick a matching icon and insert it at the top of the MDX file:
+
+---
+title: "FEATURE NAME"
+description: "1 concise sentence to describe WHEN the feature is being used and FOR WHAT BENEFIT."
+icon: "link"
+---
+
+- Description: 1 concise sentence to describe WHEN the feature is being used and FOR WHAT BENEFIT.
+- Make ample use of the Mintlify components you can find here https://mintlify.com/docs/llms.txt
+- In all Headlines, only capitalize the current feature and nothing else, to Camel Case
+- If a feature is part of the Enterprise Edition, use this note:
+
+<Note>
+  FEATURE NAME is part of the @Enterprise Edition. 
+</Note>

.env.example

@@ -80,8 +80,8 @@ S3_ENDPOINT_URL=
 # Force path style for S3 compatible storage (0 for disabled, 1 for enabled)
 S3_FORCE_PATH_STYLE=0
 
-# Set this URL to add a custom domain to your survey links(default is WEBAPP_URL)
-# SURVEY_URL=https://survey.example.com
+# Set this URL to add a public domain for all your client facing routes(default is WEBAPP_URL)
+# PUBLIC_URL=https://survey.example.com
 
 #####################
 # Disable Features  #
@@ -210,6 +210,8 @@ UNKEY_ROOT_KEY=
 # 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=
+# The SENTRY_ENVIRONMENT is the environment which the error will belong to in the Sentry dashboard
+# SENTRY_ENVIRONMENT=
 
 # Configure the minimum role for user management from UI(owner, manager, disabled)
 # USER_MANAGEMENT_MINIMUM_ROLE="manager"

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -1,6 +1,7 @@
 name: Feature request
 description: "Suggest an idea for this project \U0001F680"
 type: feature
+projects: "formbricks/21"
 body:
   - type: textarea
     id: problem-description

.github/ISSUE_TEMPLATE/task.yml

@@ -1,11 +0,0 @@
-name: Task (internal)
-description: "Template for creating a task. Used by the Formbricks Team only \U0001f4e5"
-type: task
-body:
-  - type: textarea
-    id: task-summary
-    attributes:
-      label: Task description
-      description: A clear detailed-rich description of the task.
-    validations:
-      required: true

.github/actions/upload-sentry-sourcemaps/action.yml

@@ -0,0 +1,121 @@
+name: 'Upload Sentry Sourcemaps'
+description: 'Extract sourcemaps from Docker image and upload to Sentry'
+
+inputs:
+  docker_image:
+    description: 'Docker image to extract sourcemaps from'
+    required: true
+  release_version:
+    description: 'Sentry release version (e.g., v1.2.3)'
+    required: true
+  sentry_auth_token:
+    description: 'Sentry authentication token'
+    required: true
+
+runs:
+  using: 'composite'
+  steps:
+    - name: Checkout code
+      uses: actions/checkout@v4
+      with:
+        fetch-depth: 0
+
+    - name: Validate Sentry auth token
+      shell: bash
+      run: |
+        set -euo pipefail
+        echo "🔐 Validating Sentry authentication token..."
+
+        # Assign token to local variable for secure handling
+        SENTRY_TOKEN="${{ inputs.sentry_auth_token }}"
+
+        # Test the token by making a simple API call to Sentry
+        response=$(curl -s -w "%{http_code}" -o /tmp/sentry_response.json \
+          -H "Authorization: Bearer $SENTRY_TOKEN" \
+          "https://sentry.io/api/0/organizations/formbricks/")
+
+        http_code=$(echo "$response" | tail -n1)
+
+        if [ "$http_code" != "200" ]; then
+          echo "❌ Error: Invalid Sentry auth token (HTTP $http_code)"
+          echo "Please check your SENTRY_AUTH_TOKEN is correct and has the necessary permissions."
+          if [ -f /tmp/sentry_response.json ]; then
+            echo "Response body:"
+            cat /tmp/sentry_response.json
+          fi
+          exit 1
+        fi
+
+        echo "✅ Sentry auth token validated successfully"
+
+        # Clean up temp file
+        rm -f /tmp/sentry_response.json
+
+    - name: Extract sourcemaps from Docker image
+      shell: bash
+      run: |
+        set -euo pipefail
+        echo "📦 Extracting sourcemaps from Docker image: ${{ inputs.docker_image }}"
+
+        # Create temporary container from the image and capture its ID
+        echo "Creating temporary container..."
+        CONTAINER_ID=$(docker create "${{ inputs.docker_image }}")
+        echo "Container created with ID: $CONTAINER_ID"
+
+        # Set up cleanup function to ensure container is removed on script exit
+        cleanup_container() {
+          # Capture the current exit code to preserve it
+          local original_exit_code=$?
+          
+          echo "🧹 Cleaning up Docker container..."
+          
+          # Remove the container if it exists (ignore errors if already removed)
+          if [ -n "$CONTAINER_ID" ]; then
+            docker rm -f "$CONTAINER_ID" 2>/dev/null || true
+            echo "Container $CONTAINER_ID removed"
+          fi
+          
+          # Exit with the original exit code to preserve script success/failure status
+          exit $original_exit_code
+        }
+        
+        # Register cleanup function to run on script exit (success or failure)
+        trap cleanup_container EXIT
+
+        # Extract .next directory containing sourcemaps
+        docker cp "$CONTAINER_ID:/home/nextjs/apps/web/.next" ./extracted-next
+
+        # Verify sourcemaps exist
+        if [ ! -d "./extracted-next/static/chunks" ]; then
+          echo "❌ Error: .next/static/chunks directory not found in Docker image"
+          echo "Expected structure: /home/nextjs/apps/web/.next/static/chunks/"
+          exit 1
+        fi
+
+        sourcemap_count=$(find ./extracted-next/static/chunks -name "*.map" | wc -l)
+        echo "✅ Found $sourcemap_count sourcemap files"
+
+        if [ "$sourcemap_count" -eq 0 ]; then
+          echo "❌ Error: No sourcemap files found. Check that productionBrowserSourceMaps is enabled."
+          exit 1
+        fi
+
+    - name: Create Sentry release and upload sourcemaps
+      uses: getsentry/action-release@v3
+      env:
+        SENTRY_AUTH_TOKEN: ${{ inputs.sentry_auth_token }}
+        SENTRY_ORG: formbricks
+        SENTRY_PROJECT: formbricks-cloud
+      with:
+        environment: production
+        version: ${{ inputs.release_version }}
+        sourcemaps: './extracted-next/'
+
+    - name: Clean up extracted files
+      shell: bash
+      if: always()
+      run: |
+        set -euo pipefail
+        # Clean up extracted files
+        rm -rf ./extracted-next
+        echo "🧹 Cleaned up extracted files"

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

@@ -4,16 +4,16 @@ on:
   workflow_dispatch:
     inputs:
       VERSION:
-        description: 'The version of the Docker image to release, full image tag if image tag is v0.0.0 enter v0.0.0.'
+        description: "The version of the Docker image to release, full image tag if image tag is v0.0.0 enter v0.0.0."
         required: true
         type: string
       REPOSITORY:
-        description: 'The repository to use for the Docker image'
+        description: "The repository to use for the Docker image"
         required: false
         type: string
-        default: 'ghcr.io/formbricks/formbricks'
+        default: "ghcr.io/formbricks/formbricks"
       ENVIRONMENT:
-        description: 'The environment to deploy to'
+        description: "The environment to deploy to"
         required: true
         type: choice
         options:
@@ -22,16 +22,16 @@ on:
   workflow_call:
     inputs:
       VERSION:
-        description: 'The version of the Docker image to release'
+        description: "The version of the Docker image to release"
         required: true
         type: string
       REPOSITORY:
-        description: 'The repository to use for the Docker image'
+        description: "The repository to use for the Docker image"
         required: false
         type: string
-        default: 'ghcr.io/formbricks/formbricks'
+        default: "ghcr.io/formbricks/formbricks"
       ENVIRONMENT:
-        description: 'The environment to deploy to'
+        description: "The environment to deploy to"
         required: true
         type: string
 
@@ -75,7 +75,7 @@ jobs:
           FORMBRICKS_INGRESS_CERT_ARN: ${{ secrets.FORMBRICKS_INGRESS_CERT_ARN }}
           FORMBRICKS_ROLE_ARN: ${{ secrets.FORMBRICKS_ROLE_ARN }}
         with:
-          helmfile-version: 'v1.0.0'
+          helmfile-version: "v1.0.0"
           helm-plugins: >
             https://github.com/databus23/helm-diff,
             https://github.com/jkroepke/helm-secrets
@@ -92,7 +92,7 @@ jobs:
           FORMBRICKS_INGRESS_CERT_ARN: ${{ secrets.STAGE_FORMBRICKS_INGRESS_CERT_ARN }}
           FORMBRICKS_ROLE_ARN: ${{ secrets.STAGE_FORMBRICKS_ROLE_ARN }}
         with:
-          helmfile-version: 'v1.0.0'
+          helmfile-version: "v1.0.0"
           helm-plugins: >
             https://github.com/databus23/helm-diff,
             https://github.com/jkroepke/helm-secrets
@@ -100,3 +100,43 @@ jobs:
           helmfile-auto-init: "false"
           helmfile-workdirectory: infra/formbricks-cloud-helm
 
+      - name: Purge Cloudflare Cache
+        if: ${{ inputs.ENVIRONMENT == 'prod' || inputs.ENVIRONMENT == 'stage' }}
+        env:
+          CF_ZONE_ID: ${{ secrets.CLOUDFLARE_ZONE_ID }}
+          CF_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+        run: |
+          # Set hostname based on environment
+          if [[ "${{ inputs.ENVIRONMENT }}" == "prod" ]]; then
+            PURGE_HOST="app.formbricks.com"
+          else
+            PURGE_HOST="stage.app.formbricks.com"
+          fi
+
+          echo "Purging Cloudflare cache for host: $PURGE_HOST (environment: ${{ inputs.ENVIRONMENT }}, zone: $CF_ZONE_ID)"
+
+          # Prepare JSON payload for selective cache purge
+          json_payload=$(cat << EOF
+          {
+            "hosts": ["$PURGE_HOST"]
+          }
+          EOF
+          )
+
+          # Make API call to Cloudflare
+          response=$(curl -s -X POST \
+            "https://api.cloudflare.com/client/v4/zones/$CF_ZONE_ID/purge_cache" \
+            -H "Authorization: Bearer $CF_API_TOKEN" \
+            -H "Content-Type: application/json" \
+            --data "$json_payload")
+
+          echo "Cloudflare API response: $response"
+
+          # Verify the operation was successful
+          if [[ "$(echo "$response" | jq -r .success)" == "true" ]]; then
+            echo "✅ Successfully purged cache for $PURGE_HOST"
+          else
+            echo "❌ Cloudflare cache purge failed"
+            echo "Error details: $(echo "$response" | jq -r .errors)"
+            exit 1
+          fi

.github/workflows/formbricks-release.yml

@@ -32,3 +32,25 @@ jobs:
     with:
       VERSION: v${{ needs.docker-build.outputs.VERSION }}
       ENVIRONMENT: "prod"
+
+  upload-sentry-sourcemaps:
+    name: Upload Sentry Sourcemaps
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    needs:
+      - docker-build
+      - deploy-formbricks-cloud
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4.2.2
+        with:
+          fetch-depth: 0
+
+      - name: Upload Sentry Sourcemaps
+        uses: ./.github/actions/upload-sentry-sourcemaps
+        continue-on-error: true
+        with:
+          docker_image: ghcr.io/formbricks/formbricks:v${{ needs.docker-build.outputs.VERSION }}
+          release_version: v${{ needs.docker-build.outputs.VERSION }}
+          sentry_auth_token: ${{ secrets.SENTRY_AUTH_TOKEN }}

.github/workflows/pr.yml

@@ -10,8 +10,6 @@ permissions:
 
 on:
   pull_request:
-    branches:
-      - main
   merge_group:
   workflow_dispatch:
 

.github/workflows/upload-sentry-sourcemaps.yml

@@ -0,0 +1,46 @@
+name: Upload Sentry Sourcemaps (Manual)
+
+on:
+  workflow_dispatch:
+    inputs:
+      docker_image:
+        description: "Docker image to extract sourcemaps from"
+        required: true
+        type: string
+      release_version:
+        description: "Release version (e.g., v1.2.3)"
+        required: true
+        type: string
+      tag_version:
+        description: "Docker image tag (leave empty to use release_version)"
+        required: false
+        type: string
+
+permissions:
+  contents: read
+
+jobs:
+  upload-sourcemaps:
+    name: Upload Sourcemaps to Sentry
+    runs-on: ubuntu-latest
+    
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4.2.2
+        with:
+          fetch-depth: 0
+
+      - name: Set Docker Image
+        run: |
+          if [ -n "${{ inputs.tag_version }}" ]; then
+            echo "DOCKER_IMAGE=${{ inputs.docker_image }}:${{ inputs.tag_version }}" >> $GITHUB_ENV
+          else
+            echo "DOCKER_IMAGE=${{ inputs.docker_image }}:${{ inputs.release_version }}" >> $GITHUB_ENV
+          fi
+
+      - name: Upload Sourcemaps to Sentry
+        uses: ./.github/actions/upload-sentry-sourcemaps
+        with:
+          docker_image: ${{ env.DOCKER_IMAGE }}
+          release_version: ${{ inputs.release_version }}
+          sentry_auth_token: ${{ secrets.SENTRY_AUTH_TOKEN }} 

.gitignore

@@ -73,3 +73,4 @@ infra/terraform/.terraform/
 /.idea/
 /*.iml
 packages/ios/FormbricksSDK/FormbricksSDK.xcodeproj/project.xcworkspace/xcuserdata
+.cursorrules

CONTRIBUTING.md

@@ -14,17 +14,7 @@ Are you brimming with brilliant ideas? For new features that can elevate Formbri
 
 ## 🛠 Crafting Pull Requests
 
-Ready to dive into the code and make a real impact? Here's your path:
-
-1. **Read our Best Practices**: [It takes 5 minutes](https://formbricks.com/docs/developer-docs/contributing/get-started) but will help you save hours 🤓
-
-1. **Fork the Repository:** Fork our repository or use [Gitpod](https://gitpod.io) or use [Github Codespaces](https://github.com/features/codespaces) to get started instantly.
-
-1. **Tweak and Transform:** Work your coding magic and apply your changes.
-
-1. **Pull Request Act:** If you're ready to go, craft a new pull request closely following our PR template 🙏
-
-Would you prefer a chat before you dive into a lot of work? [Github Discussions](https://github.com/formbricks/formbricks/discussions) is your harbor. Share your thoughts, and we'll meet you there with open arms. We're responsive and friendly, promise!
+For the time being, we don't have the capacity to properly facilitate community contributions. It's a lot of engineering attention often spent on issues which don't follow our prioritization, so we've decided to only facilitate community code contributions in rare exceptions in the coming months.
 
 ## 🚀 Aspiring Features
 

README.md

@@ -192,7 +192,7 @@ Here are a few options:
 
 - Upvote issues with 👍 reaction so we know what the demand for a particular issue is to prioritize it within the roadmap.
 
-Please check out [our contribution guide](https://formbricks.com/docs/developer-docs/contributing/get-started) and our [list of open issues](https://github.com/formbricks/formbricks/issues) for more information.
+- Note: For the time being, we can only facilitate code contributions as an exception.
 
 ## All Thanks To Our Contributors
 

SCHEMA_CHANGES_SUMMARY.md

@@ -0,0 +1,72 @@
+# User Schema Changes: Separate First and Last Name Fields
+
+## Overview
+Successfully updated the User model in the formbricks-poc project to use separate `firstName` and `lastName` fields instead of a single `name` field.
+
+## Schema Changes
+
+### 1. Database Schema (packages/database/schema.prisma)
+- **Changed User model fields:**
+  - Removed: `name String`
+  - Added: `firstName String` and `lastName String`
+- **Updated documentation comments** to reflect the new field structure
+
+### 2. Type Definitions (packages/types/user.ts)
+- **Updated ZUser schema:** Changed from `name: ZUserName` to `firstName: ZUserName, lastName: ZUserName`
+- **Updated ZUserUpdateInput schema:** Changed from `name: ZUserName.optional()` to `firstName: ZUserName.optional(), lastName: ZUserName.optional()`
+- **Updated ZUserCreateInput schema:** Changed from `name: ZUserName` to `firstName: ZUserName, lastName: ZUserName`
+
+## Application Code Updates
+
+### 3. Core User Functions (apps/web/modules/auth/lib/user.ts)
+- **Updated createUser function:** Modified select statement to return `firstName` and `lastName` instead of `name`
+
+### 4. Database ZOD Schema (packages/database/zod/users.ts)
+- **Updated ZUser description** to reflect that `name` field now represents the full name (concatenated firstName + lastName)
+
+### 5. User Authentication & Signup (apps/web/modules/auth/signup/actions.ts)
+- **Updated ZCreatedUser type** to use `firstName` and `lastName`
+- **Updated ZCreateUserAction schema** to accept `firstName` and `lastName`
+- **Modified all functions** to handle the new field structure:
+  - `verifyTurnstileIfConfigured()` - now accepts firstName and lastName parameters
+  - `createUserSafely()` - now accepts firstName and lastName parameters
+  - `handleInviteAcceptance()` - concatenates firstName and lastName for display
+  - `handleOrganizationCreation()` - concatenates firstName and lastName for organization name
+
+### 6. API Endpoints (apps/web/modules/api/v2/organizations/[organizationId]/users/lib/users.ts)
+- **Updated getUsers function:** Returns concatenated firstName + lastName as `name` field
+- **Updated createUser function:** Splits input `name` into firstName and lastName for storage
+- **Updated updateUser function:** Splits input `name` into firstName and lastName for updates
+- **Maintained backward compatibility:** API still accepts/returns `name` field for external consumers
+
+### 7. Team Management (apps/web/modules/organization/settings/teams/lib/membership.ts)
+- **Updated select statements** to fetch `firstName` and `lastName` instead of `name`
+- **Updated mapping functions** to concatenate firstName and lastName for display
+
+### 8. Organization & Team Actions
+- **Updated sendInviteMemberEmail calls** to use concatenated firstName + lastName
+- **Updated creator name references** to use concatenated firstName + lastName
+- **Updated user context references** to use concatenated firstName + lastName
+
+### 9. Additional Files Updated
+- **Two-factor authentication** (apps/web/modules/ee/two-factor-auth/lib/two-factor-auth.ts)
+- **Email customization** (apps/web/modules/ee/whitelabel/email-customization/actions.ts)
+- **Team management** (apps/web/modules/ee/teams/team-list/lib/team.ts)
+- **Response utilities** (apps/web/lib/response/utils.ts)
+
+## Migration Required
+A database migration will be needed to apply these schema changes:
+```bash
+npx prisma migrate dev --name "separate-user-first-and-last-name"
+```
+
+## Backward Compatibility
+- **API endpoints** continue to work with the existing `name` field format
+- **Frontend components** that display user names will show the concatenated firstName + lastName
+- **Database operations** now use the separate firstName and lastName fields internally
+
+## Notes
+- All user display names are now formatted as `${firstName} ${lastName}`
+- Input validation remains the same using the existing `ZUserName` schema
+- The change maintains data integrity while providing more flexibility for user name management
+- All existing functionality has been preserved while using the new field structure

apps/storybook/.storybook/main.ts

@@ -14,10 +14,9 @@ const config: StorybookConfig = {
   addons: [
     getAbsolutePath("@storybook/addon-onboarding"),
     getAbsolutePath("@storybook/addon-links"),
-    getAbsolutePath("@storybook/addon-essentials"),
     getAbsolutePath("@chromatic-com/storybook"),
-    getAbsolutePath("@storybook/addon-interactions"),
     getAbsolutePath("@storybook/addon-a11y"),
+    getAbsolutePath("@storybook/addon-docs"),
   ],
   framework: {
     name: getAbsolutePath("@storybook/react-vite"),

apps/storybook/.storybook/preview.ts

@@ -1,5 +1,21 @@
-import type { Preview } from "@storybook/react";
+import type { Preview } from "@storybook/react-vite";
+import { TolgeeProvider } from "@tolgee/react";
+import React from "react";
 import "../../web/modules/ui/globals.css";
+import { TolgeeBase } from "../../web/tolgee/shared";
+
+// Create a Storybook-specific Tolgee decorator
+const withTolgee = (Story: any) => {
+  const tolgee = TolgeeBase().init({
+    tagNewKeys: [], // No branch tagging in Storybook
+  });
+
+  return React.createElement(
+    TolgeeProvider,
+    { tolgee, fallback: "Loading", ssr: { language: "en", staticData: {} } },
+    React.createElement(Story)
+  );
+};
 
 const preview: Preview = {
   parameters: {
@@ -10,6 +26,7 @@ const preview: Preview = {
       },
     },
   },
+  decorators: [withTolgee],
 };
 
 export default preview;

apps/storybook/package.json

@@ -14,23 +14,19 @@
     "eslint-plugin-react-refresh": "0.4.20"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "3.2.6",
-    "@storybook/addon-a11y": "8.6.12",
-    "@storybook/addon-essentials": "8.6.12",
-    "@storybook/addon-interactions": "8.6.12",
-    "@storybook/addon-links": "8.6.12",
-    "@storybook/addon-onboarding": "8.6.12",
-    "@storybook/blocks": "8.6.12",
-    "@storybook/react": "8.6.12",
-    "@storybook/react-vite": "8.6.12",
-    "@storybook/test": "8.6.12",
+    "@chromatic-com/storybook": "^4.0.1",
+    "@storybook/addon-a11y": "9.0.15",
+    "@storybook/addon-links": "9.0.15",
+    "@storybook/addon-onboarding": "9.0.15",
+    "@storybook/react-vite": "9.0.15",
     "@typescript-eslint/eslint-plugin": "8.32.0",
     "@typescript-eslint/parser": "8.32.0",
     "@vitejs/plugin-react": "4.4.1",
     "esbuild": "0.25.4",
-    "eslint-plugin-storybook": "0.12.0",
+    "eslint-plugin-storybook": "9.0.15",
     "prop-types": "15.8.1",
-    "storybook": "8.6.12",
-    "vite": "6.3.5"
+    "storybook": "9.0.15",
+    "vite": "6.3.5",
+    "@storybook/addon-docs": "9.0.15"
   }
 }

apps/storybook/src/stories/Configure.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs/blocks";
 
 import Accessibility from "./assets/accessibility.png";
 import AddonLibrary from "./assets/addon-library.png";

apps/web/Dockerfile

@@ -25,21 +25,9 @@ RUN corepack prepare pnpm@9.15.9 --activate
 # Install necessary build tools and compilers
 RUN apk update && apk add --no-cache cmake g++ gcc jq make openssl-dev python3
 
-# BuildKit secret handling without hardcoded fallback values
-# This approach relies entirely on secrets passed from GitHub Actions
-RUN echo '#!/bin/sh' > /tmp/read-secrets.sh && \
-    echo 'if [ -f "/run/secrets/database_url" ]; then' >> /tmp/read-secrets.sh && \
-    echo '  export DATABASE_URL=$(cat /run/secrets/database_url)' >> /tmp/read-secrets.sh && \
-    echo 'else' >> /tmp/read-secrets.sh && \
-    echo '  echo "DATABASE_URL secret not found. Build may fail if this is required."' >> /tmp/read-secrets.sh && \
-    echo 'fi' >> /tmp/read-secrets.sh && \
-    echo 'if [ -f "/run/secrets/encryption_key" ]; then' >> /tmp/read-secrets.sh && \
-    echo '  export ENCRYPTION_KEY=$(cat /run/secrets/encryption_key)' >> /tmp/read-secrets.sh && \
-    echo 'else' >> /tmp/read-secrets.sh && \
-    echo '  echo "ENCRYPTION_KEY secret not found. Build may fail if this is required."' >> /tmp/read-secrets.sh && \
-    echo 'fi' >> /tmp/read-secrets.sh && \
-    echo 'exec "$@"' >> /tmp/read-secrets.sh && \
-    chmod +x /tmp/read-secrets.sh
+# Copy the secrets handling script
+COPY apps/web/scripts/docker/read-secrets.sh /tmp/read-secrets.sh
+RUN chmod +x /tmp/read-secrets.sh
 
 # Increase Node.js memory limit as a regular build argument
 ARG NODE_OPTIONS="--max_old_space_size=4096"
@@ -62,6 +50,9 @@ RUN touch apps/web/.env
 # Install the dependencies
 RUN pnpm install --ignore-scripts
 
+# Build the database package first
+RUN pnpm build --filter=@formbricks/database
+
 # Build the project using our secret reader script
 # This mounts the secrets only during this build step without storing them in layers
 RUN --mount=type=secret,id=database_url \
@@ -106,20 +97,8 @@ RUN chown -R nextjs:nextjs ./apps/web/public && 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 /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 /app/packages/database/migration ./packages/database/migration
-RUN chown -R nextjs:nextjs ./packages/database/migration && 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 /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 /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 /app/packages/database/dist ./packages/database/dist
+RUN chown -R nextjs:nextjs ./packages/database/dist && chmod -R 755 ./packages/database/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
@@ -142,12 +121,14 @@ RUN chmod -R 755 ./node_modules/@noble/hashes
 COPY --from=installer /app/node_modules/zod ./node_modules/zod
 RUN chmod -R 755 ./node_modules/zod
 
-RUN npm install --ignore-scripts -g tsx typescript pino-pretty 
 RUN npm install -g prisma
 
+# Create a startup script to handle the conditional logic
+COPY --from=installer /app/apps/web/scripts/docker/next-start.sh /home/nextjs/start.sh
+RUN chown nextjs:nextjs /home/nextjs/start.sh && chmod +x /home/nextjs/start.sh
+
 EXPOSE 3000
-ENV HOSTNAME "0.0.0.0"
-ENV NODE_ENV="production"
+ENV HOSTNAME="0.0.0.0"
 USER nextjs
 
 # Prepare volume for uploads
@@ -158,12 +139,4 @@ VOLUME /home/nextjs/apps/web/uploads/
 RUN mkdir -p /home/nextjs/apps/web/saml-connection
 VOLUME /home/nextjs/apps/web/saml-connection
 
-CMD if [ "${DOCKER_CRON_ENABLED:-1}" = "1" ]; then \
-      echo "Starting cron jobs..."; \
-      supercronic -quiet /app/docker/cronjobs & \
-    else \
-      echo "Docker cron jobs are disabled via DOCKER_CRON_ENABLED=0"; \
-    fi; \
-    (cd packages/database && npm run db:migrate:deploy) && \
-    (cd packages/database && npm run db:create-saml-database:deploy) && \
-    exec node apps/web/server.js
+CMD ["/home/nextjs/start.sh"]

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

@@ -27,7 +27,7 @@ describe("ConnectWithFormbricks", () => {
     render(
       <ConnectWithFormbricks
         environment={environment}
-        webAppUrl={webAppUrl}
+        publicDomain={webAppUrl}
         widgetSetupCompleted={false}
         channel={channel}
       />
@@ -40,7 +40,7 @@ describe("ConnectWithFormbricks", () => {
     render(
       <ConnectWithFormbricks
         environment={environment}
-        webAppUrl={webAppUrl}
+        publicDomain={webAppUrl}
         widgetSetupCompleted={true}
         channel={channel}
       />
@@ -53,7 +53,7 @@ describe("ConnectWithFormbricks", () => {
     render(
       <ConnectWithFormbricks
         environment={environment}
-        webAppUrl={webAppUrl}
+        publicDomain={webAppUrl}
         widgetSetupCompleted={true}
         channel={channel}
       />
@@ -67,7 +67,7 @@ describe("ConnectWithFormbricks", () => {
     render(
       <ConnectWithFormbricks
         environment={environment}
-        webAppUrl={webAppUrl}
+        publicDomain={webAppUrl}
         widgetSetupCompleted={false}
         channel={channel}
       />

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

@@ -12,14 +12,14 @@ import { OnboardingSetupInstructions } from "./OnboardingSetupInstructions";
 
 interface ConnectWithFormbricksProps {
   environment: TEnvironment;
-  webAppUrl: string;
+  publicDomain: string;
   widgetSetupCompleted: boolean;
   channel: TProjectConfigChannel;
 }
 
 export const ConnectWithFormbricks = ({
   environment,
-  webAppUrl,
+  publicDomain,
   widgetSetupCompleted,
   channel,
 }: ConnectWithFormbricksProps) => {
@@ -49,7 +49,7 @@ export const ConnectWithFormbricks = ({
         <div className="flex w-1/2 flex-col space-y-4">
           <OnboardingSetupInstructions
             environmentId={environment.id}
-            webAppUrl={webAppUrl}
+            publicDomain={publicDomain}
             channel={channel}
             widgetSetupCompleted={widgetSetupCompleted}
           />

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

@@ -33,7 +33,7 @@ describe("OnboardingSetupInstructions", () => {
   // Provide some default props for testing
   const defaultProps = {
     environmentId: "env-123",
-    webAppUrl: "https://example.com",
+    publicDomain: "https://example.com",
     channel: "app" as const, // Assuming channel is either "app" or "website"
     widgetSetupCompleted: false,
   };

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

@@ -18,14 +18,14 @@ const tabs = [
 
 interface OnboardingSetupInstructionsProps {
   environmentId: string;
-  webAppUrl: string;
+  publicDomain: string;
   channel: TProjectConfigChannel;
   widgetSetupCompleted: boolean;
 }
 
 export const OnboardingSetupInstructions = ({
   environmentId,
-  webAppUrl,
+  publicDomain,
   channel,
   widgetSetupCompleted,
 }: OnboardingSetupInstructionsProps) => {
@@ -34,7 +34,7 @@ export const OnboardingSetupInstructions = ({
   const htmlSnippetForAppSurveys = `<!-- START Formbricks Surveys -->
   <script type="text/javascript">
   !function(){
-      var appUrl = "${webAppUrl}";
+      var appUrl = "${publicDomain}";
       var environmentId = "${environmentId}";
       var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=appUrl+"/js/formbricks.umd.cjs",t.onload=function(){window.formbricks?window.formbricks.setup({environmentId:environmentId,appUrl:appUrl}):console.error("Formbricks library failed to load properly. The formbricks object is not available.");};var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e)}();
   </script>
@@ -44,7 +44,7 @@ export const OnboardingSetupInstructions = ({
   const htmlSnippetForWebsiteSurveys = `<!-- START Formbricks Surveys -->
   <script type="text/javascript">
   !function(){
-    var appUrl = "${webAppUrl}";
+    var appUrl = "${publicDomain}";
     var environmentId = "${environmentId}";
     var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=appUrl+"/js/formbricks.umd.cjs",t.onload=function(){window.formbricks?window.formbricks.setup({environmentId:environmentId,appUrl:appUrl}):console.error("Formbricks library failed to load properly. The formbricks object is not available.");};var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e)}();
   </script>
@@ -57,7 +57,7 @@ export const OnboardingSetupInstructions = ({
   if (typeof window !== "undefined") {
     formbricks.setup({
       environmentId: "${environmentId}",
-      appUrl: "${webAppUrl}",
+      appUrl: "${publicDomain}",
     });
   }
   
@@ -75,7 +75,7 @@ export const OnboardingSetupInstructions = ({
   if (typeof window !== "undefined") {
     formbricks.setup({
       environmentId: "${environmentId}",
-      appUrl: "${webAppUrl}",
+      appUrl: "${publicDomain}",
     });
   }
   

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

@@ -1,6 +1,6 @@
 import { ConnectWithFormbricks } from "@/app/(app)/(onboarding)/environments/[environmentId]/connect/components/ConnectWithFormbricks";
-import { WEBAPP_URL } from "@/lib/constants";
 import { getEnvironment } from "@/lib/environment/service";
+import { getPublicDomain } from "@/lib/getPublicUrl";
 import { getProjectByEnvironmentId } from "@/lib/project/service";
 import { Button } from "@/modules/ui/components/button";
 import { Header } from "@/modules/ui/components/header";
@@ -30,6 +30,8 @@ const Page = async (props: ConnectPageProps) => {
 
   const channel = project.config.channel || null;
 
+  const publicDomain = getPublicDomain();
+
   return (
     <div className="flex min-h-full flex-col items-center justify-center py-10">
       <Header title={t("environments.connect.headline")} subtitle={t("environments.connect.subtitle")} />
@@ -39,7 +41,7 @@ const Page = async (props: ConnectPageProps) => {
       </div>
       <ConnectWithFormbricks
         environment={environment}
-        webAppUrl={WEBAPP_URL}
+        publicDomain={publicDomain}
         widgetSetupCompleted={environment.appSetupCompleted}
         channel={channel}
       />

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

@@ -11,7 +11,7 @@ vi.mock("@/lib/constants", () => ({
   IS_DEVELOPMENT: true,
   E2E_TESTING: false,
   WEBAPP_URL: "http://localhost:3000",
-  SURVEY_URL: "http://localhost:3000/survey",
+  PUBLIC_URL: "http://localhost:3000/survey",
   ENCRYPTION_KEY: "mock-encryption-key",
   CRON_SECRET: "mock-cron-secret",
   DEFAULT_BRAND_COLOR: "#64748b",

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

@@ -94,6 +94,7 @@ describe("LandingSidebar component", () => {
       organizationId: "o1",
       redirect: true,
       callbackUrl: "/auth/login",
+      clearEnvironmentId: true,
     });
   });
 });

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

@@ -130,6 +130,7 @@ export const LandingSidebar = ({
                   organizationId: organization.id,
                   redirect: true,
                   callbackUrl: "/auth/login",
+                  clearEnvironmentId: true,
                 });
               }}
               icon={<LogOutIcon className="mr-2 h-4 w-4" strokeWidth={1.5} />}>

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

@@ -14,7 +14,7 @@ vi.mock("@/lib/constants", () => ({
   IS_DEVELOPMENT: true,
   E2E_TESTING: false,
   WEBAPP_URL: "http://localhost:3000",
-  SURVEY_URL: "http://localhost:3000/survey",
+  PUBLIC_URL: "http://localhost:3000/survey",
   ENCRYPTION_KEY: "mock-encryption-key",
   CRON_SECRET: "mock-cron-secret",
   DEFAULT_BRAND_COLOR: "#64748b",

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

@@ -23,7 +23,6 @@ vi.mock("@/lib/constants", () => ({
   IS_DEVELOPMENT: true,
   E2E_TESTING: false,
   WEBAPP_URL: "http://localhost:3000",
-  SURVEY_URL: "http://localhost:3000/survey",
   ENCRYPTION_KEY: "mock-encryption-key",
   CRON_SECRET: "mock-cron-secret",
   DEFAULT_BRAND_COLOR: "#64748b",

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

@@ -30,6 +30,12 @@ vi.mock("@/lib/constants", () => ({
   REDIS_URL: "redis://localhost:6379",
 }));
 
+vi.mock("@/lib/env", () => ({
+  env: {
+    PUBLIC_URL: "https://public-domain.com",
+  },
+}));
+
 describe("Contact Page Re-export", () => {
   test("should re-export SingleContactPage", () => {
     expect(Page).toBe(SingleContactPage);

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

@@ -1,5 +1,5 @@
-import { ModalWithTabs } from "@/modules/ui/components/modal-with-tabs";
-import { cleanup, render } from "@testing-library/react";
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { afterEach, describe, expect, test, vi } from "vitest";
 import { TActionClass } from "@formbricks/types/action-classes";
 import { TEnvironment } from "@formbricks/types/environment";
@@ -8,23 +8,40 @@ import { ActionDetailModal } from "./ActionDetailModal";
 // Import mocked components
 import { ActionSettingsTab } from "./ActionSettingsTab";
 
-// Mock child components
-vi.mock("@/modules/ui/components/modal-with-tabs", () => ({
-  ModalWithTabs: vi.fn(({ tabs, icon, label, description, open, setOpen }) => (
-    <div data-testid="modal-with-tabs">
-      <span data-testid="modal-label">{label}</span>
-      <span data-testid="modal-description">{description}</span>
-      <span data-testid="modal-open">{open.toString()}</span>
-      <button onClick={() => setOpen(false)}>Close</button>
-      {icon}
-      {tabs.map((tab) => (
-        <div key={tab.title}>
-          <h2>{tab.title}</h2>
-          {tab.children}
-        </div>
-      ))}
-    </div>
-  )),
+// Mock the Dialog components
+vi.mock("@/modules/ui/components/dialog", () => ({
+  Dialog: ({
+    open,
+    onOpenChange,
+    children,
+  }: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    children: React.ReactNode;
+  }) =>
+    open ? (
+      <div data-testid="dialog">
+        {children}
+        <button data-testid="dialog-close" onClick={() => onOpenChange(false)}>
+          Close
+        </button>
+      </div>
+    ) : null,
+  DialogContent: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="dialog-content">{children}</div>
+  ),
+  DialogHeader: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="dialog-header">{children}</div>
+  ),
+  DialogTitle: ({ children }: { children: React.ReactNode }) => (
+    <h2 data-testid="dialog-title">{children}</h2>
+  ),
+  DialogDescription: ({ children }: { children: React.ReactNode }) => (
+    <p data-testid="dialog-description">{children}</p>
+  ),
+  DialogBody: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="dialog-body">{children}</div>
+  ),
 }));
 
 vi.mock("./ActionActivityTab", () => ({
@@ -44,6 +61,22 @@ vi.mock("@/app/(app)/environments/[environmentId]/actions/utils", () => ({
   },
 }));
 
+// Mock useTranslate
+vi.mock("@tolgee/react", () => ({
+  useTranslate: () => ({
+    t: (key: string) => {
+      const translations = {
+        "common.activity": "Activity",
+        "common.settings": "Settings",
+        "common.no_code": "No Code",
+        "common.action": "Action",
+        "common.code": "Code",
+      };
+      return translations[key] || key;
+    },
+  }),
+}));
+
 const mockEnvironmentId = "test-env-id";
 const mockSetOpen = vi.fn();
 
@@ -89,58 +122,68 @@ describe("ActionDetailModal", () => {
     vi.clearAllMocks(); // Clear mocks after each test
   });
 
-  test("renders ModalWithTabs with correct props", () => {
+  test("renders correctly when open", () => {
     render(<ActionDetailModal {...defaultProps} />);
 
-    const mockedModalWithTabs = vi.mocked(ModalWithTabs);
+    expect(screen.getByTestId("dialog")).toBeInTheDocument();
+    expect(screen.getByTestId("dialog-title")).toHaveTextContent("Test Action");
+    expect(screen.getByTestId("dialog-description")).toHaveTextContent("This is a test action");
+    expect(screen.getByTestId("code-icon")).toBeInTheDocument();
+    expect(screen.getByText("Activity")).toBeInTheDocument();
+    expect(screen.getByText("Settings")).toBeInTheDocument();
+    // Only the first tab (Activity) should be active initially
+    expect(screen.getByTestId("action-activity-tab")).toBeInTheDocument();
+    expect(screen.queryByTestId("action-settings-tab")).not.toBeInTheDocument();
+  });
 
-    expect(mockedModalWithTabs).toHaveBeenCalled();
-    const props = mockedModalWithTabs.mock.calls[0][0];
+  test("does not render when open is false", () => {
+    render(<ActionDetailModal {...defaultProps} open={false} />);
+    expect(screen.queryByTestId("dialog")).not.toBeInTheDocument();
+  });
 
-    // Check basic props
-    expect(props.open).toBe(true);
-    expect(props.setOpen).toBe(mockSetOpen);
-    expect(props.label).toBe(mockActionClass.name);
-    expect(props.description).toBe(mockActionClass.description);
+  test("switches tabs correctly", async () => {
+    const user = userEvent.setup();
+    render(<ActionDetailModal {...defaultProps} />);
 
-    // Check icon data-testid based on the mock for the default 'code' type
-    expect(props.icon).toBeDefined();
-    if (!props.icon) {
-      throw new Error("Icon prop is not defined");
-    }
-    expect((props.icon as any).props["data-testid"]).toBe("code-icon");
+    // Initially shows activity tab (first tab is active)
+    expect(screen.getByTestId("action-activity-tab")).toBeInTheDocument();
+    expect(screen.queryByTestId("action-settings-tab")).not.toBeInTheDocument();
 
-    // Check tabs structure
-    expect(props.tabs).toHaveLength(2);
-    expect(props.tabs[0].title).toBe("common.activity");
-    expect(props.tabs[1].title).toBe("common.settings");
+    // Click settings tab
+    const settingsTab = screen.getByText("Settings");
+    await user.click(settingsTab);
 
-    // Check if the correct mocked components are used as children
-    // Access the mocked functions directly
-    const mockedActionActivityTab = vi.mocked(ActionActivityTab);
-    const mockedActionSettingsTab = vi.mocked(ActionSettingsTab);
+    // Now shows settings tab content
+    expect(screen.queryByTestId("action-activity-tab")).not.toBeInTheDocument();
+    expect(screen.getByTestId("action-settings-tab")).toBeInTheDocument();
 
-    if (!props.tabs[0].children || !props.tabs[1].children) {
-      throw new Error("Tabs children are not defined");
-    }
+    // Click activity tab again
+    const activityTab = screen.getByText("Activity");
+    await user.click(activityTab);
 
-    expect((props.tabs[0].children as any).type).toBe(mockedActionActivityTab);
-    expect((props.tabs[1].children as any).type).toBe(mockedActionSettingsTab);
+    // Back to activity tab content
+    expect(screen.getByTestId("action-activity-tab")).toBeInTheDocument();
+    expect(screen.queryByTestId("action-settings-tab")).not.toBeInTheDocument();
+  });
 
-    // Check props passed to child components
-    const activityTabProps = (props.tabs[0].children as any).props;
-    expect(activityTabProps.otherEnvActionClasses).toBe(mockOtherEnvActionClasses);
-    expect(activityTabProps.otherEnvironment).toBe(mockOtherEnvironment);
-    expect(activityTabProps.isReadOnly).toBe(false);
-    expect(activityTabProps.environment).toBe(mockEnvironment);
-    expect(activityTabProps.actionClass).toBe(mockActionClass);
-    expect(activityTabProps.environmentId).toBe(mockEnvironmentId);
+  test("resets to first tab when modal is reopened", async () => {
+    const user = userEvent.setup();
+    const { rerender } = render(<ActionDetailModal {...defaultProps} />);
 
-    const settingsTabProps = (props.tabs[1].children as any).props;
-    expect(settingsTabProps.actionClass).toBe(mockActionClass);
-    expect(settingsTabProps.actionClasses).toBe(mockActionClasses);
-    expect(settingsTabProps.setOpen).toBe(mockSetOpen);
-    expect(settingsTabProps.isReadOnly).toBe(false);
+    // Switch to settings tab
+    const settingsTab = screen.getByText("Settings");
+    await user.click(settingsTab);
+    expect(screen.getByTestId("action-settings-tab")).toBeInTheDocument();
+
+    // Close modal
+    rerender(<ActionDetailModal {...defaultProps} open={false} />);
+
+    // Reopen modal
+    rerender(<ActionDetailModal {...defaultProps} open={true} />);
+
+    // Should be back to activity tab (first tab)
+    expect(screen.getByTestId("action-activity-tab")).toBeInTheDocument();
+    expect(screen.queryByTestId("action-settings-tab")).not.toBeInTheDocument();
   });
 
   test("renders correct icon based on action type", () => {
@@ -148,33 +191,68 @@ describe("ActionDetailModal", () => {
     const noCodeAction: TActionClass = { ...mockActionClass, type: "noCode" } as TActionClass;
     render(<ActionDetailModal {...defaultProps} actionClass={noCodeAction} />);
 
-    const mockedModalWithTabs = vi.mocked(ModalWithTabs);
-    const props = mockedModalWithTabs.mock.calls[0][0];
+    expect(screen.getByTestId("nocode-icon")).toBeInTheDocument();
+    expect(screen.queryByTestId("code-icon")).not.toBeInTheDocument();
+  });
 
-    // Expect the 'nocode-icon' based on the updated mock and action type
-    expect(props.icon).toBeDefined();
+  test("handles action without description", () => {
+    const actionWithoutDescription = { ...mockActionClass, description: "" };
+    render(<ActionDetailModal {...defaultProps} actionClass={actionWithoutDescription} />);
 
-    if (!props.icon) {
-      throw new Error("Icon prop is not defined");
-    }
+    expect(screen.getByTestId("dialog-title")).toHaveTextContent("Test Action");
+    expect(screen.getByTestId("dialog-description")).toHaveTextContent("Code action");
+  });
 
-    expect((props.icon as any).props["data-testid"]).toBe("nocode-icon");
+  test("passes correct props to ActionActivityTab", () => {
+    render(<ActionDetailModal {...defaultProps} />);
+
+    const mockedActionActivityTab = vi.mocked(ActionActivityTab);
+    expect(mockedActionActivityTab).toHaveBeenCalledWith(
+      {
+        otherEnvActionClasses: mockOtherEnvActionClasses,
+        otherEnvironment: mockOtherEnvironment,
+        isReadOnly: false,
+        environment: mockEnvironment,
+        actionClass: mockActionClass,
+        environmentId: mockEnvironmentId,
+      },
+      undefined
+    );
+  });
+
+  test("passes correct props to ActionSettingsTab when tab is active", async () => {
+    const user = userEvent.setup();
+    render(<ActionDetailModal {...defaultProps} />);
+
+    // ActionSettingsTab should not be called initially since first tab is active
+    const mockedActionSettingsTab = vi.mocked(ActionSettingsTab);
+    expect(mockedActionSettingsTab).not.toHaveBeenCalled();
+
+    // Click the settings tab to activate ActionSettingsTab
+    const settingsTab = screen.getByText("Settings");
+    await user.click(settingsTab);
+
+    // Now ActionSettingsTab should be called with correct props
+    expect(mockedActionSettingsTab).toHaveBeenCalledWith(
+      {
+        actionClass: mockActionClass,
+        actionClasses: mockActionClasses,
+        setOpen: mockSetOpen,
+        isReadOnly: false,
+      },
+      undefined
+    );
   });
 
   test("passes isReadOnly prop correctly", () => {
     render(<ActionDetailModal {...defaultProps} isReadOnly={true} />);
-    // Access the mocked component directly
-    const mockedModalWithTabs = vi.mocked(ModalWithTabs);
-    const props = mockedModalWithTabs.mock.calls[0][0];
 
-    if (!props.tabs[0].children || !props.tabs[1].children) {
-      throw new Error("Tabs children are not defined");
-    }
-
-    const activityTabProps = (props.tabs[0].children as any).props;
-    expect(activityTabProps.isReadOnly).toBe(true);
-
-    const settingsTabProps = (props.tabs[1].children as any).props;
-    expect(settingsTabProps.isReadOnly).toBe(true);
+    const mockedActionActivityTab = vi.mocked(ActionActivityTab);
+    expect(mockedActionActivityTab).toHaveBeenCalledWith(
+      expect.objectContaining({
+        isReadOnly: true,
+      }),
+      undefined
+    );
   });
 });

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

@@ -59,6 +59,16 @@ export const ActionDetailModal = ({
     },
   ];
 
+  const typeDescription = () => {
+    if (actionClass.description) return actionClass.description;
+    else
+      return (
+        (actionClass.type && actionClass.type === "noCode" ? t("common.no_code") : t("common.code")) +
+        " " +
+        t("common.action").toLowerCase()
+      );
+  };
+
   return (
     <>
       <ModalWithTabs
@@ -67,7 +77,7 @@ export const ActionDetailModal = ({
         tabs={tabs}
         icon={ACTION_TYPE_ICON_LOOKUP[actionClass.type]}
         label={actionClass.name}
-        description={actionClass.description || ""}
+        description={typeDescription()}
       />
     </>
   );

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

@@ -11,22 +11,21 @@ export const ActionClassDataRow = ({
   locale: TUserLocale;
 }) => {
   return (
-    <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">
+    <div className="m-2 grid grid-cols-6 content-center rounded-lg transition-colors ease-in-out hover:bg-slate-100">
+      <div className="col-span-4 flex items-start py-3 pl-6 text-sm">
+        <div className="flex w-full items-center gap-4">
+          <div className="mt-1 h-5 w-5 flex-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>
+          <div className="text-left">
+            <div className="break-words font-medium text-slate-900">{actionClass.name}</div>
+            <div className="break-words text-xs text-slate-400">{actionClass.description}</div>
           </div>
         </div>
       </div>
       <div className="col-span-2 my-auto whitespace-nowrap text-center text-sm text-slate-500">
         {timeSince(actionClass.createdAt.toString(), locale)}
       </div>
-      <div className="text-center"></div>
     </div>
   );
 };

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

@@ -210,14 +210,13 @@ export const ActionSettingsTab = ({
             )}
           </div>
 
-          <div className="flex justify-between border-t border-slate-200 py-6">
-            <div>
+          <div className="flex justify-between gap-x-2 border-slate-200 pt-4">
+            <div className="flex items-center gap-x-2">
               {!isReadOnly ? (
                 <Button
                   type="button"
                   variant="destructive"
                   onClick={() => setOpenDeleteDialog(true)}
-                  className="mr-3"
                   id="deleteActionModalTrigger">
                   <TrashIcon />
                   {t("common.delete")}

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

@@ -22,14 +22,29 @@ vi.mock("@/modules/ui/components/button", () => ({
   ),
 }));
 
-vi.mock("@/modules/ui/components/modal", () => ({
-  Modal: ({ children, open, setOpen, ...props }: any) =>
+vi.mock("@/modules/ui/components/dialog", () => ({
+  Dialog: ({ children, open, onOpenChange }: any) =>
     open ? (
-      <div data-testid="modal" {...props}>
+      <div data-testid="dialog" role="dialog">
         {children}
-        <button onClick={() => setOpen(false)}>Close Modal</button>
+        <button onClick={() => onOpenChange(false)}>Close Dialog</button>
       </div>
     ) : null,
+  DialogContent: ({ children, ...props }: any) => (
+    <div data-testid="dialog-content" {...props}>
+      {children}
+    </div>
+  ),
+  DialogHeader: ({ children }: any) => <div data-testid="dialog-header">{children}</div>,
+  DialogTitle: ({ children, className }: any) => (
+    <h2 data-testid="dialog-title" className={className}>
+      {children}
+    </h2>
+  ),
+  DialogDescription: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="dialog-description">{children}</div>
+  ),
+  DialogBody: ({ children }: any) => <div data-testid="dialog-body">{children}</div>,
 }));
 
 vi.mock("@tolgee/react", () => ({
@@ -70,17 +85,21 @@ describe("AddActionModal", () => {
     );
     expect(screen.getByRole("button", { name: "common.add_action" })).toBeInTheDocument();
     expect(screen.getByTestId("plus-icon")).toBeInTheDocument();
-    expect(screen.queryByTestId("modal")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("dialog")).not.toBeInTheDocument();
   });
 
-  test("opens the modal when the 'Add Action' button is clicked", async () => {
+  test("opens the dialog when the 'Add Action' button is clicked", async () => {
     render(
       <AddActionModal environmentId={environmentId} actionClasses={mockActionClasses} isReadOnly={false} />
     );
     const addButton = screen.getByRole("button", { name: "common.add_action" });
     await userEvent.click(addButton);
 
-    expect(screen.getByTestId("modal")).toBeInTheDocument();
+    expect(screen.getByTestId("dialog")).toBeInTheDocument();
+    expect(screen.getByTestId("dialog-content")).toBeInTheDocument();
+    expect(screen.getByTestId("dialog-header")).toBeInTheDocument();
+    expect(screen.getByTestId("dialog-title")).toBeInTheDocument();
+    expect(screen.getByTestId("dialog-body")).toBeInTheDocument();
     expect(screen.getByTestId("mouse-pointer-icon")).toBeInTheDocument();
     expect(screen.getByText("environments.actions.track_new_user_action")).toBeInTheDocument();
     expect(
@@ -108,35 +127,35 @@ describe("AddActionModal", () => {
     expect(props.setActionClasses).toBeInstanceOf(Function);
   });
 
-  test("closes the modal when the close button (simulated) is clicked", async () => {
+  test("closes the dialog when the close button (simulated) is clicked", async () => {
     render(
       <AddActionModal environmentId={environmentId} actionClasses={mockActionClasses} isReadOnly={false} />
     );
     const addButton = screen.getByRole("button", { name: "common.add_action" });
     await userEvent.click(addButton);
 
-    expect(screen.getByTestId("modal")).toBeInTheDocument();
+    expect(screen.getByTestId("dialog")).toBeInTheDocument();
 
-    // Simulate closing via the mocked Modal's close button
-    const closeModalButton = screen.getByText("Close Modal");
-    await userEvent.click(closeModalButton);
+    // Simulate closing via the mocked Dialog's close button
+    const closeDialogButton = screen.getByText("Close Dialog");
+    await userEvent.click(closeDialogButton);
 
-    expect(screen.queryByTestId("modal")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("dialog")).not.toBeInTheDocument();
   });
 
-  test("closes the modal when setOpen is called from CreateNewActionTab", async () => {
+  test("closes the dialog when setOpen is called from CreateNewActionTab", async () => {
     render(
       <AddActionModal environmentId={environmentId} actionClasses={mockActionClasses} isReadOnly={false} />
     );
     const addButton = screen.getByRole("button", { name: "common.add_action" });
     await userEvent.click(addButton);
 
-    expect(screen.getByTestId("modal")).toBeInTheDocument();
+    expect(screen.getByTestId("dialog")).toBeInTheDocument();
 
     // Simulate closing via the mocked CreateNewActionTab's button
     const closeFromTabButton = screen.getByText("Close from Tab");
     await userEvent.click(closeFromTabButton);
 
-    expect(screen.queryByTestId("modal")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("dialog")).not.toBeInTheDocument();
   });
 });

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

@@ -2,7 +2,14 @@
 
 import { CreateNewActionTab } from "@/modules/survey/editor/components/create-new-action-tab";
 import { Button } from "@/modules/ui/components/button";
-import { Modal } from "@/modules/ui/components/modal";
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/modules/ui/components/dialog";
 import { useTranslate } from "@tolgee/react";
 import { MousePointerClickIcon, PlusIcon } from "lucide-react";
 import { useState } from "react";
@@ -26,36 +33,26 @@ export const AddActionModal = ({ environmentId, actionClasses, isReadOnly }: Add
         {t("common.add_action")}
         <PlusIcon />
       </Button>
-      <Modal open={open} setOpen={setOpen} noPadding closeOnOutsideClick={false} restrictOverflow>
-        <div className="flex h-full flex-col rounded-lg">
-          <div className="rounded-t-lg bg-slate-100">
-            <div className="flex w-full items-center justify-between p-6">
-              <div className="flex items-center space-x-2">
-                <div className="mr-1.5 h-6 w-6 text-slate-500">
-                  <MousePointerClickIcon className="h-5 w-5" />
-                </div>
-                <div>
-                  <div className="text-xl font-medium text-slate-700">
-                    {t("environments.actions.track_new_user_action")}
-                  </div>
-                  <div className="text-sm text-slate-500">
-                    {t("environments.actions.track_user_action_to_display_surveys_or_create_user_segment")}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div className="px-6 py-4">
-          <CreateNewActionTab
-            actionClasses={newActionClasses}
-            environmentId={environmentId}
-            isReadOnly={isReadOnly}
-            setActionClasses={setNewActionClasses}
-            setOpen={setOpen}
-          />
-        </div>
-      </Modal>
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent disableCloseOnOutsideClick>
+          <DialogHeader>
+            <MousePointerClickIcon />
+            <DialogTitle>{t("environments.actions.track_new_user_action")}</DialogTitle>
+            <DialogDescription>
+              {t("environments.actions.track_user_action_to_display_surveys_or_create_user_segment")}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogBody>
+            <CreateNewActionTab
+              actionClasses={newActionClasses}
+              environmentId={environmentId}
+              isReadOnly={isReadOnly}
+              setActionClasses={setNewActionClasses}
+              setOpen={setOpen}
+            />
+          </DialogBody>
+        </DialogContent>
+      </Dialog>
     </>
   );
 };

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

@@ -220,6 +220,8 @@ describe("MainNavigation", () => {
     const mockSignOut = vi.fn().mockResolvedValue({ url: "/auth/login" });
     vi.mocked(useSignOut).mockReturnValue({ signOut: mockSignOut });
 
+    // Set up localStorage spy on the mocked localStorage
+
     render(<MainNavigation {...defaultProps} />);
 
     // Find the avatar and get its parent div which acts as the trigger
@@ -246,7 +248,9 @@ describe("MainNavigation", () => {
       organizationId: "org1",
       redirect: false,
       callbackUrl: "/auth/login",
+      clearEnvironmentId: true,
     });
+
     await waitFor(() => {
       expect(mockRouterPush).toHaveBeenCalledWith("/auth/login");
     });

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

@@ -396,6 +396,7 @@ export const MainNavigation = ({
                         organizationId: organization.id,
                         redirect: false,
                         callbackUrl: "/auth/login",
+                        clearEnvironmentId: true,
                       });
                       router.push(route?.url || "/auth/login"); // NOSONAR // We want to check for empty strings
                     }}

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

@@ -92,14 +92,24 @@ vi.mock("@/modules/ui/components/additional-integration-settings", () => ({
     </div>
   ),
 }));
-vi.mock("@/modules/ui/components/modal", () => ({
-  Modal: ({ children, open, setOpen }) =>
+vi.mock("@/modules/ui/components/dialog", () => ({
+  Dialog: ({ children, open, onOpenChange }: any) =>
     open ? (
-      <div data-testid="modal">
+      <div data-testid="dialog" role="dialog">
         {children}
-        <button onClick={() => setOpen(false)}>Close Modal</button>
+        <button onClick={() => onOpenChange(false)}>Close Dialog</button>
       </div>
     ) : null,
+  DialogContent: ({ children, ...props }: any) => (
+    <div data-testid="dialog-content" {...props}>
+      {children}
+    </div>
+  ),
+  DialogHeader: ({ children }: any) => <div data-testid="dialog-header">{children}</div>,
+  DialogTitle: ({ children }: any) => <h2 data-testid="dialog-title">{children}</h2>,
+  DialogDescription: ({ children }: any) => <p data-testid="dialog-description">{children}</p>,
+  DialogBody: ({ children }: any) => <div data-testid="dialog-body">{children}</div>,
+  DialogFooter: ({ children }: any) => <div data-testid="dialog-footer">{children}</div>,
 }));
 vi.mock("@/modules/ui/components/alert", () => ({
   Alert: ({ children }) => <div data-testid="alert">{children}</div>,

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

@@ -10,8 +10,16 @@ import { AdditionalIntegrationSettings } from "@/modules/ui/components/additiona
 import { Alert, AlertDescription, AlertTitle } from "@/modules/ui/components/alert";
 import { Button } from "@/modules/ui/components/button";
 import { Checkbox } from "@/modules/ui/components/checkbox";
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/modules/ui/components/dialog";
 import { Label } from "@/modules/ui/components/label";
-import { Modal } from "@/modules/ui/components/modal";
 import {
   Select,
   SelectContent,
@@ -19,11 +27,11 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/modules/ui/components/select";
-import { useTranslate } from "@tolgee/react";
+import { TFnType, useTranslate } from "@tolgee/react";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
-import { Controller, useForm } from "react-hook-form";
+import { Control, Controller, useForm } from "react-hook-form";
 import { toast } from "react-hot-toast";
 import { TIntegrationItem } from "@formbricks/types/integration";
 import {
@@ -68,6 +76,80 @@ const NoBaseFoundError = () => {
   );
 };
 
+const renderQuestionSelection = ({
+  t,
+  selectedSurvey,
+  control,
+  includeVariables,
+  setIncludeVariables,
+  includeHiddenFields,
+  includeMetadata,
+  setIncludeHiddenFields,
+  setIncludeMetadata,
+  includeCreatedAt,
+  setIncludeCreatedAt,
+}: {
+  t: TFnType;
+  selectedSurvey: TSurvey;
+  control: Control<IntegrationModalInputs>;
+  includeVariables: boolean;
+  setIncludeVariables: (value: boolean) => void;
+  includeHiddenFields: boolean;
+  includeMetadata: boolean;
+  setIncludeHiddenFields: (value: boolean) => void;
+  setIncludeMetadata: (value: boolean) => void;
+  includeCreatedAt: boolean;
+  setIncludeCreatedAt: (value: boolean) => void;
+}) => {
+  return (
+    <div className="space-y-4">
+      <div>
+        <Label htmlFor="Surveys">{t("common.questions")}</Label>
+        <div className="mt-1 max-h-[15vh] overflow-y-auto rounded-lg border border-slate-200">
+          <div className="grid content-center rounded-lg bg-slate-50 p-3 text-left text-sm text-slate-900">
+            {replaceHeadlineRecall(selectedSurvey, "default")?.questions.map((question) => (
+              <Controller
+                key={question.id}
+                control={control}
+                name={"questions"}
+                render={({ field }) => (
+                  <div className="my-1 flex items-center space-x-2">
+                    <label htmlFor={question.id} className="flex cursor-pointer items-center">
+                      <Checkbox
+                        type="button"
+                        id={question.id}
+                        value={question.id}
+                        className="bg-white"
+                        checked={field.value?.includes(question.id)}
+                        onCheckedChange={(checked) => {
+                          return checked
+                            ? field.onChange([...field.value, question.id])
+                            : field.onChange(field.value?.filter((value) => value !== question.id));
+                        }}
+                      />
+                      <span className="ml-2">{getLocalizedValue(question.headline, "default")}</span>
+                    </label>
+                  </div>
+                )}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+      <AdditionalIntegrationSettings
+        includeVariables={includeVariables}
+        setIncludeVariables={setIncludeVariables}
+        includeHiddenFields={includeHiddenFields}
+        includeMetadata={includeMetadata}
+        setIncludeHiddenFields={setIncludeHiddenFields}
+        setIncludeMetadata={setIncludeMetadata}
+        includeCreatedAt={includeCreatedAt}
+        setIncludeCreatedAt={setIncludeCreatedAt}
+      />
+    </div>
+  );
+};
+
 export const AddIntegrationModal = ({
   open,
   setOpenWithStates,
@@ -210,182 +292,148 @@ export const AddIntegrationModal = ({
   };
 
   return (
-    <Modal open={open} setOpen={handleClose} noPadding>
-      <div className="rounded-t-lg bg-slate-100">
-        <div className="flex w-full items-center justify-between p-6">
+    <Dialog open={open} onOpenChange={setOpenWithStates}>
+      <DialogContent className="overflow-visible md:overflow-visible">
+        <DialogHeader>
           <div className="flex items-center space-x-2">
-            <div className="mr-1.5 h-6 w-6 text-slate-500">
-              <Image className="w-12" src={AirtableLogo} alt="Airtable logo" />
+            <div className="relative size-8">
+              <Image
+                fill
+                className="object-contain object-center"
+                src={AirtableLogo}
+                alt={t("environments.integrations.airtable.airtable_logo")}
+              />
             </div>
-            <div>
-              <div className="text-xl font-medium text-slate-700">
-                {t("environments.integrations.airtable.link_airtable_table")}
-              </div>
-              <div className="text-sm text-slate-500">
+            <div className="space-y-0.5">
+              <DialogTitle>{t("environments.integrations.airtable.link_airtable_table")}</DialogTitle>
+              <DialogDescription>
                 {t("environments.integrations.airtable.sync_responses_with_airtable")}
-              </div>
+              </DialogDescription>
             </div>
           </div>
-        </div>
-      </div>
-      <form onSubmit={handleSubmit(submitHandler)}>
-        <div className="flex rounded-lg p-6">
-          <div className="flex w-full flex-col gap-y-4 pt-5">
-            {airtableArray.length ? (
-              <BaseSelectDropdown
-                control={control}
-                isLoading={isLoading}
-                fetchTable={fetchTable}
-                airtableArray={airtableArray}
-                setValue={setValue}
-                defaultValue={defaultData?.base}
-              />
-            ) : (
-              <NoBaseFoundError />
-            )}
-
-            <div className="flex w-full flex-col">
-              <Label htmlFor="table">{t("environments.integrations.airtable.table_name")}</Label>
-              <div className="mt-1 flex">
-                <Controller
+        </DialogHeader>
+        <form className="space-y-4" onSubmit={handleSubmit(submitHandler)}>
+          <DialogBody className="overflow-visible">
+            <div className="flex w-full flex-col gap-y-4">
+              {airtableArray.length ? (
+                <BaseSelectDropdown
                   control={control}
-                  name="table"
-                  render={({ field }) => (
-                    <Select
-                      required
-                      disabled={!tables.length}
-                      onValueChange={(val) => {
-                        field.onChange(val);
-                      }}
-                      defaultValue={defaultData?.table}>
-                      <SelectTrigger>
-                        <SelectValue />
-                      </SelectTrigger>
-                      {tables.length ? (
-                        <SelectContent>
-                          {tables.map((item) => (
-                            <SelectItem key={item.id} value={item.id}>
-                              {item.name}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      ) : null}
-                    </Select>
-                  )}
+                  isLoading={isLoading}
+                  fetchTable={fetchTable}
+                  airtableArray={airtableArray}
+                  setValue={setValue}
+                  defaultValue={defaultData?.base}
                 />
-              </div>
-            </div>
+              ) : (
+                <NoBaseFoundError />
+              )}
 
-            {surveys.length ? (
               <div className="flex w-full flex-col">
-                <Label htmlFor="survey">{t("common.select_survey")}</Label>
+                <Label htmlFor="table">{t("environments.integrations.airtable.table_name")}</Label>
                 <div className="mt-1 flex">
                   <Controller
                     control={control}
-                    name="survey"
+                    name="table"
                     render={({ field }) => (
                       <Select
                         required
+                        disabled={!tables.length}
                         onValueChange={(val) => {
                           field.onChange(val);
-                          setValue("questions", []);
                         }}
-                        defaultValue={defaultData?.survey}>
+                        defaultValue={defaultData?.table}>
                         <SelectTrigger>
                           <SelectValue />
                         </SelectTrigger>
-                        <SelectContent>
-                          {surveys.map((item) => (
-                            <SelectItem key={item.id} value={item.id}>
-                              {item.name}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
+                        {tables.length ? (
+                          <SelectContent>
+                            {tables.map((item) => (
+                              <SelectItem key={item.id} value={item.id}>
+                                {item.name}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        ) : null}
                       </Select>
                     )}
                   />
                 </div>
               </div>
-            ) : null}
 
-            {!surveys.length ? (
-              <p className="m-1 text-xs text-slate-500">
-                {t("environments.integrations.create_survey_warning")}
-              </p>
-            ) : null}
-
-            {survey && selectedSurvey && (
-              <div className="space-y-4">
-                <div>
-                  <Label htmlFor="Surveys">{t("common.questions")}</Label>
-                  <div className="mt-1 max-h-[15vh] overflow-y-auto rounded-lg border border-slate-200">
-                    <div className="grid content-center rounded-lg bg-slate-50 p-3 text-left text-sm text-slate-900">
-                      {replaceHeadlineRecall(selectedSurvey, "default")?.questions.map((question) => (
-                        <Controller
-                          key={question.id}
-                          control={control}
-                          name={"questions"}
-                          render={({ field }) => (
-                            <div className="my-1 flex items-center space-x-2">
-                              <label htmlFor={question.id} className="flex cursor-pointer items-center">
-                                <Checkbox
-                                  type="button"
-                                  id={question.id}
-                                  value={question.id}
-                                  className="bg-white"
-                                  checked={field.value?.includes(question.id)}
-                                  onCheckedChange={(checked) => {
-                                    return checked
-                                      ? field.onChange([...field.value, question.id])
-                                      : field.onChange(field.value?.filter((value) => value !== question.id));
-                                  }}
-                                />
-                                <span className="ml-2">
-                                  {getLocalizedValue(question.headline, "default")}
-                                </span>
-                              </label>
-                            </div>
-                          )}
-                        />
-                      ))}
-                    </div>
+              {surveys.length ? (
+                <div className="flex w-full flex-col">
+                  <Label htmlFor="survey">{t("common.select_survey")}</Label>
+                  <div className="mt-1 flex">
+                    <Controller
+                      control={control}
+                      name="survey"
+                      render={({ field }) => (
+                        <Select
+                          required
+                          onValueChange={(val) => {
+                            field.onChange(val);
+                            setValue("questions", []);
+                          }}
+                          defaultValue={defaultData?.survey}>
+                          <SelectTrigger>
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {surveys.map((item) => (
+                              <SelectItem key={item.id} value={item.id}>
+                                {item.name}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      )}
+                    />
                   </div>
                 </div>
-                <AdditionalIntegrationSettings
-                  includeVariables={includeVariables}
-                  setIncludeVariables={setIncludeVariables}
-                  includeHiddenFields={includeHiddenFields}
-                  includeMetadata={includeMetadata}
-                  setIncludeHiddenFields={setIncludeHiddenFields}
-                  setIncludeMetadata={setIncludeMetadata}
-                  includeCreatedAt={includeCreatedAt}
-                  setIncludeCreatedAt={setIncludeCreatedAt}
-                />
-              </div>
-            )}
-
-            <div className="flex justify-end gap-x-2">
-              {isEditMode ? (
-                <Button
-                  onClick={async () => {
-                    await handleDelete(defaultData.index);
-                  }}
-                  type="button"
-                  loading={isLoading}
-                  variant="destructive">
-                  {t("common.delete")}
-                </Button>
               ) : (
-                <Button type="button" loading={isLoading} variant="ghost" onClick={handleClose}>
-                  {t("common.cancel")}
-                </Button>
+                <p className="m-1 text-xs text-slate-500">
+                  {t("environments.integrations.create_survey_warning")}
+                </p>
               )}
 
-              <Button type="submit">{t("common.save")}</Button>
+              {survey &&
+                selectedSurvey &&
+                renderQuestionSelection({
+                  t,
+                  selectedSurvey,
+                  control,
+                  includeVariables,
+                  setIncludeVariables,
+                  includeHiddenFields,
+                  includeMetadata,
+                  setIncludeHiddenFields,
+                  setIncludeMetadata,
+                  includeCreatedAt,
+                  setIncludeCreatedAt,
+                })}
             </div>
-          </div>
-        </div>
-      </form>
-    </Modal>
+          </DialogBody>
+          <DialogFooter>
+            {isEditMode ? (
+              <Button
+                onClick={async () => {
+                  await handleDelete(defaultData.index);
+                }}
+                type="button"
+                loading={isLoading}
+                variant="destructive">
+                {t("common.delete")}
+              </Button>
+            ) : (
+              <Button type="button" loading={isLoading} variant="ghost" onClick={handleClose}>
+                {t("common.cancel")}
+              </Button>
+            )}
+
+            <Button type="submit">{t("common.save")}</Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
   );
 };

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

@@ -88,9 +88,24 @@ vi.mock("@/modules/ui/components/dropdown-selector", () => ({
     </div>
   ),
 }));
-vi.mock("@/modules/ui/components/modal", () => ({
-  Modal: ({ open, children }: { open: boolean; children: React.ReactNode }) =>
-    open ? <div data-testid="modal">{children}</div> : null,
+vi.mock("@/modules/ui/components/dialog", () => ({
+  Dialog: ({ children, open, onOpenChange }: any) =>
+    open ? (
+      <div data-testid="dialog" role="dialog">
+        {children}
+        <button onClick={() => onOpenChange(false)}>Close Dialog</button>
+      </div>
+    ) : null,
+  DialogContent: ({ children, ...props }: any) => (
+    <div data-testid="dialog-content" {...props}>
+      {children}
+    </div>
+  ),
+  DialogHeader: ({ children }: any) => <div data-testid="dialog-header">{children}</div>,
+  DialogTitle: ({ children }: any) => <h2 data-testid="dialog-title">{children}</h2>,
+  DialogDescription: ({ children }: any) => <p data-testid="dialog-description">{children}</p>,
+  DialogBody: ({ children }: any) => <div data-testid="dialog-body">{children}</div>,
+  DialogFooter: ({ children }: any) => <div data-testid="dialog-footer">{children}</div>,
 }));
 vi.mock("next/image", () => ({
   // eslint-disable-next-line @next/next/no-img-element
@@ -304,10 +319,9 @@ describe("AddIntegrationModal", () => {
       />
     );
 
-    expect(screen.getByTestId("modal")).toBeInTheDocument();
-    expect(
-      screen.getByText("Link Google Sheet", { selector: "div.text-xl.font-medium" })
-    ).toBeInTheDocument();
+    expect(screen.getByTestId("dialog")).toBeInTheDocument();
+    expect(screen.getByTestId("dialog-title")).toHaveTextContent("Link Google Sheet");
+    expect(screen.getByTestId("dialog-description")).toHaveTextContent("Sync responses with Google Sheets.");
     // Use getByPlaceholderText for the input
     expect(
       screen.getByPlaceholderText("https://docs.google.com/spreadsheets/d/<your-spreadsheet-id>")
@@ -332,10 +346,9 @@ describe("AddIntegrationModal", () => {
       />
     );
 
-    expect(screen.getByTestId("modal")).toBeInTheDocument();
-    expect(
-      screen.getByText("Link Google Sheet", { selector: "div.text-xl.font-medium" })
-    ).toBeInTheDocument();
+    expect(screen.getByTestId("dialog")).toBeInTheDocument();
+    expect(screen.getByTestId("dialog-title")).toHaveTextContent("Link Google Sheet");
+    expect(screen.getByTestId("dialog-description")).toHaveTextContent("Sync responses with Google Sheets.");
     // Use getByPlaceholderText for the input
     expect(
       screen.getByPlaceholderText("https://docs.google.com/spreadsheets/d/<your-spreadsheet-id>")

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

@@ -14,10 +14,18 @@ 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";
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/modules/ui/components/dialog";
 import { DropdownSelector } from "@/modules/ui/components/dropdown-selector";
 import { Input } from "@/modules/ui/components/input";
 import { Label } from "@/modules/ui/components/label";
-import { Modal } from "@/modules/ui/components/modal";
 import { useTranslate } from "@tolgee/react";
 import Image from "next/image";
 import { useEffect, useState } from "react";
@@ -202,31 +210,28 @@ export const AddIntegrationModal = ({
   };
 
   return (
-    <Modal open={open} setOpen={setOpenWithStates} noPadding closeOnOutsideClick={true}>
-      <div className="flex h-full flex-col rounded-lg">
-        <div className="rounded-t-lg bg-slate-100">
-          <div className="flex w-full items-center justify-between p-6">
-            <div className="flex items-center space-x-2">
-              <div className="mr-1.5 h-6 w-6 text-slate-500">
-                <Image
-                  className="w-12"
-                  src={GoogleSheetLogo}
-                  alt={t("environments.integrations.google_sheets.google_sheet_logo")}
-                />
-              </div>
-              <div>
-                <div className="text-xl font-medium text-slate-700">
-                  {t("environments.integrations.google_sheets.link_google_sheet")}
-                </div>
-                <div className="text-sm text-slate-500">
-                  {t("environments.integrations.google_sheets.google_sheets_integration_description")}
-                </div>
-              </div>
+    <Dialog open={open} onOpenChange={setOpenWithStates}>
+      <DialogContent>
+        <DialogHeader>
+          <div className="flex items-center space-x-2">
+            <div className="relative size-8">
+              <Image
+                fill
+                className="object-contain object-center"
+                src={GoogleSheetLogo}
+                alt={t("environments.integrations.google_sheets.google_sheet_logo")}
+              />
+            </div>
+            <div className="space-y-0.5">
+              <DialogTitle>{t("environments.integrations.google_sheets.link_google_sheet")}</DialogTitle>
+              <DialogDescription>
+                {t("environments.integrations.google_sheets.google_sheets_integration_description")}
+              </DialogDescription>
             </div>
           </div>
-        </div>
-        <form onSubmit={handleSubmit(linkSheet)}>
-          <div className="flex justify-between rounded-lg p-6">
+        </DialogHeader>
+        <form className="space-y-4" onSubmit={handleSubmit(linkSheet)}>
+          <DialogBody>
             <div className="w-full space-y-4">
               <div>
                 <div className="mb-4">
@@ -292,39 +297,37 @@ export const AddIntegrationModal = ({
                 </div>
               )}
             </div>
-          </div>
-          <div className="flex justify-end border-t border-slate-200 p-6">
-            <div className="flex space-x-2">
-              {selectedIntegration ? (
-                <Button
-                  type="button"
-                  variant="destructive"
-                  loading={isDeleting}
-                  onClick={() => {
-                    deleteLink();
-                  }}>
-                  {t("common.delete")}
-                </Button>
-              ) : (
-                <Button
-                  type="button"
-                  variant="ghost"
-                  onClick={() => {
-                    setOpen(false);
-                    resetForm();
-                  }}>
-                  {t("common.cancel")}
-                </Button>
-              )}
-              <Button type="submit" loading={isLinkingSheet}>
-                {selectedIntegration
-                  ? t("common.update")
-                  : t("environments.integrations.google_sheets.link_google_sheet")}
+          </DialogBody>
+          <DialogFooter>
+            {selectedIntegration ? (
+              <Button
+                type="button"
+                variant="destructive"
+                loading={isDeleting}
+                onClick={() => {
+                  deleteLink();
+                }}>
+                {t("common.delete")}
               </Button>
-            </div>
-          </div>
+            ) : (
+              <Button
+                type="button"
+                variant="ghost"
+                onClick={() => {
+                  setOpen(false);
+                  resetForm();
+                }}>
+                {t("common.cancel")}
+              </Button>
+            )}
+            <Button type="submit" loading={isLinkingSheet}>
+              {selectedIntegration
+                ? t("common.update")
+                : t("environments.integrations.google_sheets.link_google_sheet")}
+            </Button>
+          </DialogFooter>
         </form>
-      </div>
-    </Modal>
+      </DialogContent>
+    </Dialog>
   );
 };

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

@@ -74,13 +74,41 @@ vi.mock("@/modules/ui/components/dropdown-selector", () => ({
 vi.mock("@/modules/ui/components/label", () => ({
   Label: ({ children }: { children: React.ReactNode }) => <label>{children}</label>,
 }));
-vi.mock("@/modules/ui/components/modal", () => ({
-  Modal: ({ open, children }: { open: boolean; children: React.ReactNode }) =>
-    open ? <div data-testid="modal">{children}</div> : null,
+vi.mock("@/modules/ui/components/dialog", () => ({
+  Dialog: ({ open, children }: { open: boolean; children: React.ReactNode }) =>
+    open ? <div data-testid="dialog">{children}</div> : null,
+  DialogContent: ({ children, className }: { children: React.ReactNode; className?: string }) => (
+    <div data-testid="dialog-content" className={className}>
+      {children}
+    </div>
+  ),
+  DialogHeader: ({ children, className }: { children: React.ReactNode; className?: string }) => (
+    <div data-testid="dialog-header" className={className}>
+      {children}
+    </div>
+  ),
+  DialogDescription: ({ children, className }: { children: React.ReactNode; className?: string }) => (
+    <p data-testid="dialog-description" className={className}>
+      {children}
+    </p>
+  ),
+  DialogTitle: ({ children }: { children: React.ReactNode }) => (
+    <h2 data-testid="dialog-title">{children}</h2>
+  ),
+  DialogBody: ({ children, className }: { children: React.ReactNode; className?: string }) => (
+    <div data-testid="dialog-body" className={className}>
+      {children}
+    </div>
+  ),
+  DialogFooter: ({ children, className }: { children: React.ReactNode; className?: string }) => (
+    <div data-testid="dialog-footer" className={className}>
+      {children}
+    </div>
+  ),
 }));
 vi.mock("lucide-react", () => ({
   PlusIcon: () => <span data-testid="plus-icon">+</span>,
-  XIcon: () => <span data-testid="x-icon">x</span>,
+  TrashIcon: () => <span data-testid="trash-icon">🗑️</span>,
 }));
 vi.mock("next/image", () => ({
   // eslint-disable-next-line @next/next/no-img-element
@@ -334,7 +362,7 @@ describe("AddIntegrationModal (Notion)", () => {
       />
     );
 
-    expect(screen.getByTestId("modal")).toBeInTheDocument();
+    expect(screen.getByTestId("dialog")).toBeInTheDocument();
     expect(screen.getByText("environments.integrations.notion.link_database")).toBeInTheDocument();
     expect(screen.getByTestId("dropdown-select-a-database")).toBeInTheDocument();
     expect(screen.getByTestId("dropdown-select-survey")).toBeInTheDocument();
@@ -359,7 +387,7 @@ describe("AddIntegrationModal (Notion)", () => {
       />
     );
 
-    expect(screen.getByTestId("modal")).toBeInTheDocument();
+    expect(screen.getByTestId("dialog")).toBeInTheDocument();
     expect(screen.getByTestId("dropdown-select-a-database")).toHaveValue(databases[0].id);
     expect(screen.getByTestId("dropdown-select-survey")).toHaveValue(surveys[0].id);
     expect(screen.getByText("Map Formbricks fields to Notion property")).toBeInTheDocument();
@@ -381,7 +409,7 @@ describe("AddIntegrationModal (Notion)", () => {
       expect(columnDropdowns[1]).toHaveValue("p2");
 
       expect(screen.getAllByTestId("plus-icon").length).toBeGreaterThan(0);
-      expect(screen.getAllByTestId("x-icon").length).toBeGreaterThan(0);
+      expect(screen.getAllByTestId("trash-icon").length).toBeGreaterThan(0);
     });
 
     expect(screen.getByText("Delete")).toBeInTheDocument();
@@ -445,8 +473,8 @@ describe("AddIntegrationModal (Notion)", () => {
 
     expect(screen.getAllByTestId("dropdown-select-a-survey-question")).toHaveLength(2);
 
-    const xButton = screen.getAllByTestId("x-icon")[0]; // Get the first X button
-    await userEvent.click(xButton);
+    const trashButton = screen.getAllByTestId("trash-icon")[0]; // Get the first trash button
+    await userEvent.click(trashButton);
 
     expect(screen.getAllByTestId("dropdown-select-a-survey-question")).toHaveLength(1);
   });

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

@@ -12,11 +12,19 @@ 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 {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/modules/ui/components/dialog";
 import { DropdownSelector } from "@/modules/ui/components/dropdown-selector";
 import { Label } from "@/modules/ui/components/label";
-import { Modal } from "@/modules/ui/components/modal";
 import { useTranslate } from "@tolgee/react";
-import { PlusIcon, XIcon } from "lucide-react";
+import { PlusIcon, TrashIcon } from "lucide-react";
 import Image from "next/image";
 import React, { useEffect, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
@@ -336,9 +344,9 @@ export const AddIntegrationModal = ({
           col={mapping[idx].column}
           ques={mapping[idx].question}
         />
-        <div className="flex w-full items-center">
+        <div className="flex w-full items-center space-x-2">
           <div className="flex w-full items-center">
-            <div className="w-[340px] max-w-full">
+            <div className="max-w-full flex-1">
               <DropdownSelector
                 placeholder={t("environments.integrations.notion.select_a_survey_question")}
                 items={filteredQuestionItems}
@@ -384,7 +392,7 @@ export const AddIntegrationModal = ({
               />
             </div>
             <div className="h-px w-4 border-t border-t-slate-300" />
-            <div className="w-[340px] max-w-full">
+            <div className="max-w-full flex-1">
               <DropdownSelector
                 placeholder={t("environments.integrations.notion.select_a_field_to_map")}
                 items={getFilteredDbItems()}
@@ -430,53 +438,45 @@ export const AddIntegrationModal = ({
               />
             </div>
           </div>
-          <button
-            type="button"
-            className={`rounded-md p-1 hover:bg-slate-300 ${
-              idx === mapping.length - 1 ? "visible" : "invisible"
-            }`}
-            onClick={addRow}>
-            <PlusIcon className="h-5 w-5 font-bold text-slate-500" />
-          </button>
-          <button
-            type="button"
-            className={`flex-1 rounded-md p-1 hover:bg-red-100 ${
-              mapping.length > 1 ? "visible" : "invisible"
-            }`}
-            onClick={deleteRow}>
-            <XIcon className="h-5 w-5 text-red-500" />
-          </button>
+          <div className="flex space-x-2">
+            {mapping.length > 1 && (
+              <Button variant="secondary" size="icon" className="size-10" onClick={deleteRow}>
+                <TrashIcon />
+              </Button>
+            )}
+            <Button variant="secondary" size="icon" className="size-10" onClick={addRow}>
+              <PlusIcon />
+            </Button>
+          </div>
         </div>
       </div>
     );
   };
 
   return (
-    <Modal open={open} setOpen={setOpen} noPadding closeOnOutsideClick={false} size="lg">
-      <div className="flex h-full flex-col rounded-lg">
-        <div className="rounded-t-lg bg-slate-100">
-          <div className="flex w-full items-center justify-between p-6">
-            <div className="flex items-center space-x-2">
-              <div className="mr-1.5 h-6 w-6 text-slate-500">
-                <Image
-                  className="w-12"
-                  src={NotionLogo}
-                  alt={t("environments.integrations.notion.notion_logo")}
-                />
-              </div>
-              <div>
-                <div className="text-xl font-medium text-slate-700">
-                  {t("environments.integrations.notion.link_notion_database")}
-                </div>
-                <div className="text-sm text-slate-500">
-                  {t("environments.integrations.notion.sync_responses_with_a_notion_database")}
-                </div>
-              </div>
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent>
+        <DialogHeader>
+          <div className="mb-4 flex items-start space-x-2">
+            <div className="relative size-8">
+              <Image
+                fill
+                className="object-contain object-center"
+                src={NotionLogo}
+                alt={t("environments.integrations.notion.notion_logo")}
+              />
+            </div>
+            <div className="space-y-0.5">
+              <DialogTitle>{t("environments.integrations.notion.link_notion_database")}</DialogTitle>
+              <DialogDescription>
+                {t("environments.integrations.notion.notion_integration_description")}
+              </DialogDescription>
             </div>
           </div>
-        </div>
-        <form onSubmit={handleSubmit(linkDatabase)} className="w-full">
-          <div className="flex justify-between rounded-lg p-6">
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit(linkDatabase)} className="contents space-y-4">
+          <DialogBody>
             <div className="w-full space-y-4">
               <div>
                 <div className="mb-4">
@@ -521,7 +521,7 @@ export const AddIntegrationModal = ({
                     <Label>
                       {t("environments.integrations.notion.map_formbricks_fields_to_notion_property")}
                     </Label>
-                    <div className="mt-4 max-h-[20vh] w-full overflow-y-auto">
+                    <div className="mt-1 space-y-2 overflow-y-auto">
                       {mapping.map((_, idx) => (
                         <MappingRow idx={idx} key={idx} />
                       ))}
@@ -530,43 +530,40 @@ export const AddIntegrationModal = ({
                 )}
               </div>
             </div>
-          </div>
-          <div className="flex justify-end border-t border-slate-200 p-6">
-            <div className="flex space-x-2">
-              {selectedIntegration ? (
-                <Button
-                  type="button"
-                  variant="destructive"
-                  loading={isDeleting}
-                  onClick={() => {
-                    deleteLink();
-                  }}>
-                  {t("common.delete")}
-                </Button>
-              ) : (
-                <Button
-                  type="button"
-                  variant="ghost"
-                  onClick={() => {
-                    setOpen(false);
-                    resetForm();
-                    setMapping([]);
-                  }}>
-                  {t("common.cancel")}
-                </Button>
-              )}
+          </DialogBody>
+
+          <DialogFooter>
+            {selectedIntegration ? (
               <Button
-                type="submit"
-                loading={isLinkingDatabase}
-                disabled={mapping.filter((m) => m.error).length > 0}>
-                {selectedIntegration
-                  ? t("common.update")
-                  : t("environments.integrations.notion.link_database")}
+                type="button"
+                variant="destructive"
+                loading={isDeleting}
+                onClick={() => {
+                  deleteLink();
+                }}>
+                {t("common.delete")}
               </Button>
-            </div>
-          </div>
+            ) : (
+              <Button
+                type="button"
+                variant="secondary"
+                onClick={() => {
+                  setOpen(false);
+                  resetForm();
+                  setMapping([]);
+                }}>
+                {t("common.cancel")}
+              </Button>
+            )}
+            <Button
+              type="submit"
+              loading={isLinkingDatabase}
+              disabled={mapping.filter((m) => m.error).length > 0}>
+              {selectedIntegration ? t("common.update") : t("environments.integrations.notion.link_database")}
+            </Button>
+          </DialogFooter>
         </form>
-      </div>
-    </Modal>
+      </DialogContent>
+    </Dialog>
   );
 };

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

@@ -83,9 +83,24 @@ vi.mock("@/modules/ui/components/dropdown-selector", () => ({
     </div>
   ),
 }));
-vi.mock("@/modules/ui/components/modal", () => ({
-  Modal: ({ open, children }: { open: boolean; children: React.ReactNode }) =>
-    open ? <div data-testid="modal">{children}</div> : null,
+vi.mock("@/modules/ui/components/dialog", () => ({
+  Dialog: ({ children, open, onOpenChange }: any) =>
+    open ? (
+      <div data-testid="dialog" role="dialog">
+        {children}
+        <button onClick={() => onOpenChange(false)}>Close Dialog</button>
+      </div>
+    ) : null,
+  DialogContent: ({ children, ...props }: any) => (
+    <div data-testid="dialog-content" {...props}>
+      {children}
+    </div>
+  ),
+  DialogHeader: ({ children }: any) => <div data-testid="dialog-header">{children}</div>,
+  DialogTitle: ({ children }: any) => <h2 data-testid="dialog-title">{children}</h2>,
+  DialogDescription: ({ children }: any) => <p data-testid="dialog-description">{children}</p>,
+  DialogBody: ({ children }: any) => <div data-testid="dialog-body">{children}</div>,
+  DialogFooter: ({ children }: any) => <div data-testid="dialog-footer">{children}</div>,
 }));
 vi.mock("next/image", () => ({
   // eslint-disable-next-line @next/next/no-img-element
@@ -121,6 +136,8 @@ vi.mock("@tolgee/react", async () => {
       if (key === "common.all_questions") return "All questions";
       if (key === "common.selected_questions") return "Selected questions";
       if (key === "environments.integrations.slack.link_slack_channel") return "Link Slack Channel";
+      if (key === "environments.integrations.slack.slack_integration_description")
+        return "Send responses directly to Slack.";
       if (key === "common.update") return "Update";
       if (key === "common.delete") return "Delete";
       if (key === "common.cancel") return "Cancel";
@@ -312,10 +329,9 @@ describe("AddChannelMappingModal", () => {
       />
     );
 
-    expect(screen.getByTestId("modal")).toBeInTheDocument();
-    expect(
-      screen.getByText("Link Slack Channel", { selector: "div.text-xl.font-medium" })
-    ).toBeInTheDocument();
+    expect(screen.getByTestId("dialog")).toBeInTheDocument();
+    expect(screen.getByTestId("dialog-title")).toHaveTextContent("Link Slack Channel");
+    expect(screen.getByTestId("dialog-description")).toHaveTextContent("Send responses directly to Slack.");
     expect(screen.getByTestId("channel-dropdown")).toBeInTheDocument();
     expect(screen.getByTestId("survey-dropdown")).toBeInTheDocument();
     expect(screen.getByText("Cancel")).toBeInTheDocument();
@@ -339,10 +355,9 @@ describe("AddChannelMappingModal", () => {
       />
     );
 
-    expect(screen.getByTestId("modal")).toBeInTheDocument();
-    expect(
-      screen.getByText("Link Slack Channel", { selector: "div.text-xl.font-medium" })
-    ).toBeInTheDocument();
+    expect(screen.getByTestId("dialog")).toBeInTheDocument();
+    expect(screen.getByTestId("dialog-title")).toHaveTextContent("Link Slack Channel");
+    expect(screen.getByTestId("dialog-description")).toHaveTextContent("Send responses directly to Slack.");
     expect(screen.getByTestId("channel-dropdown")).toHaveValue(channels[0].id);
     expect(screen.getByTestId("survey-dropdown")).toHaveValue(surveys[0].id);
     expect(screen.getByText("Questions")).toBeInTheDocument();

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

@@ -7,9 +7,17 @@ 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";
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/modules/ui/components/dialog";
 import { DropdownSelector } from "@/modules/ui/components/dropdown-selector";
 import { Label } from "@/modules/ui/components/label";
-import { Modal } from "@/modules/ui/components/modal";
 import { useTranslate } from "@tolgee/react";
 import { CircleHelpIcon } from "lucide-react";
 import Image from "next/image";
@@ -189,24 +197,28 @@ export const AddChannelMappingModal = ({
   );
 
   return (
-    <Modal open={open} setOpen={setOpenWithStates} noPadding closeOnOutsideClick={true}>
-      <div className="flex h-full flex-col rounded-lg">
-        <div className="rounded-t-lg bg-slate-100">
-          <div className="flex w-full items-center justify-between p-6">
-            <div className="flex items-center space-x-2">
-              <div className="mr-1.5 h-6 w-6 text-slate-500">
-                <Image className="w-12" src={SlackLogo} alt="Slack logo" />
-              </div>
-              <div>
-                <div className="text-xl font-medium text-slate-700">
-                  {t("environments.integrations.slack.link_slack_channel")}
-                </div>
-              </div>
+    <Dialog open={open} onOpenChange={setOpenWithStates}>
+      <DialogContent>
+        <DialogHeader>
+          <div className="flex items-center space-x-2">
+            <div className="relative size-8">
+              <Image
+                fill
+                className="object-contain object-center"
+                src={SlackLogo}
+                alt={t("environments.integrations.slack.slack_logo")}
+              />
+            </div>
+            <div className="space-y-0.5">
+              <DialogTitle>{t("environments.integrations.slack.link_slack_channel")}</DialogTitle>
+              <DialogDescription>
+                {t("environments.integrations.slack.slack_integration_description")}
+              </DialogDescription>
             </div>
           </div>
-        </div>
-        <form onSubmit={handleSubmit(linkChannel)}>
-          <div className="flex justify-between rounded-lg p-6">
+        </DialogHeader>
+        <form className="space-y-4" onSubmit={handleSubmit(linkChannel)}>
+          <DialogBody>
             <div className="w-full space-y-4">
               <div>
                 <div className="mb-4">
@@ -289,31 +301,29 @@ export const AddChannelMappingModal = ({
                 </div>
               )}
             </div>
-          </div>
-          <div className="flex justify-end border-t border-slate-200 p-6">
-            <div className="flex space-x-2">
-              {selectedIntegration ? (
-                <Button type="button" variant="destructive" loading={isDeleting} onClick={deleteLink}>
-                  {t("common.delete")}
-                </Button>
-              ) : (
-                <Button
-                  type="button"
-                  variant="ghost"
-                  onClick={() => {
-                    setOpen(false);
-                    resetForm();
-                  }}>
-                  {t("common.cancel")}
-                </Button>
-              )}
-              <Button type="submit" loading={isLinkingChannel}>
-                {selectedIntegration ? t("common.update") : t("environments.integrations.slack.link_channel")}
+          </DialogBody>
+          <DialogFooter>
+            {selectedIntegration ? (
+              <Button type="button" variant="destructive" loading={isDeleting} onClick={deleteLink}>
+                {t("common.delete")}
               </Button>
-            </div>
-          </div>
+            ) : (
+              <Button
+                type="button"
+                variant="ghost"
+                onClick={() => {
+                  setOpen(false);
+                  resetForm();
+                }}>
+                {t("common.cancel")}
+              </Button>
+            )}
+            <Button type="submit" loading={isLinkingChannel}>
+              {selectedIntegration ? t("common.update") : t("environments.integrations.slack.link_channel")}
+            </Button>
+          </DialogFooter>
         </form>
-      </div>
-    </Modal>
+      </DialogContent>
+    </Dialog>
   );
 };

apps/web/app/(app)/environments/[environmentId]/project/(setup)/app-connection/page.test.tsx

@@ -29,6 +29,12 @@ vi.mock("@/lib/constants", () => ({
   AUDIT_LOG_ENABLED: true,
 }));
 
+vi.mock("@/lib/env", () => ({
+  env: {
+    PUBLIC_URL: "https://example.com",
+  },
+}));
+
 describe("AppConnectionPage Re-export", () => {
   test("should re-export AppConnectionPage correctly", () => {
     expect(AppConnectionPage).toBe(OriginalAppConnectionPage);

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

@@ -29,6 +29,12 @@ vi.mock("@/lib/constants", () => ({
   AUDIT_LOG_ENABLED: 1,
 }));
 
+vi.mock("@/lib/env", () => ({
+  env: {
+    PUBLIC_URL: "https://public-domain.com",
+  },
+}));
+
 describe("GeneralSettingsPage re-export", () => {
   test("should re-export GeneralSettingsPage component", () => {
     expect(Page).toBe(GeneralSettingsPage);

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

@@ -29,6 +29,12 @@ vi.mock("@/lib/constants", () => ({
   AUDIT_LOG_ENABLED: 1,
 }));
 
+vi.mock("@/lib/env", () => ({
+  env: {
+    PUBLIC_URL: "https://public-domain.com",
+  },
+}));
+
 describe("ProjectLookSettingsPage re-export", () => {
   test("should re-export ProjectLookSettingsPage component", () => {
     expect(Page).toBe(ProjectLookSettingsPage);

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

@@ -20,7 +20,7 @@ vi.mock("@/modules/ui/components/switch", () => ({
 }));
 
 vi.mock("../actions", () => ({
-  updateNotificationSettingsAction: vi.fn(() => Promise.resolve()),
+  updateNotificationSettingsAction: vi.fn(() => Promise.resolve({ data: true })),
 }));
 
 const surveyId = "survey1";
@@ -246,4 +246,204 @@ describe("NotificationSwitch", () => {
     });
     expect(updateNotificationSettingsAction).not.toHaveBeenCalled();
   });
+
+  test("shows error toast when updateNotificationSettingsAction fails for 'alert' type", async () => {
+    const mockErrorResponse = { serverError: "Failed to update notification settings" };
+    vi.mocked(updateNotificationSettingsAction).mockResolvedValueOnce(mockErrorResponse);
+
+    const initialSettings = { ...baseNotificationSettings, alert: { [surveyId]: false } };
+    renderSwitch({ notificationSettings: initialSettings, notificationType: "alert" });
+    const switchInput = screen.getByLabelText("toggle notification settings for alert");
+
+    await act(async () => {
+      await user.click(switchInput);
+    });
+
+    expect(updateNotificationSettingsAction).toHaveBeenCalledWith({
+      notificationSettings: { ...initialSettings, alert: { [surveyId]: true } },
+    });
+    expect(toast.error).toHaveBeenCalledWith("Failed to update notification settings", {
+      id: "notification-switch",
+    });
+    expect(toast.success).not.toHaveBeenCalled();
+  });
+
+  test("shows error toast when updateNotificationSettingsAction fails for 'weeklySummary' type", async () => {
+    const mockErrorResponse = { serverError: "Database connection failed" };
+    vi.mocked(updateNotificationSettingsAction).mockResolvedValueOnce(mockErrorResponse);
+
+    const initialSettings = { ...baseNotificationSettings, weeklySummary: { [projectId]: true } };
+    renderSwitch({
+      surveyOrProjectOrOrganizationId: projectId,
+      notificationSettings: initialSettings,
+      notificationType: "weeklySummary",
+    });
+    const switchInput = screen.getByLabelText("toggle notification settings for weeklySummary");
+
+    await act(async () => {
+      await user.click(switchInput);
+    });
+
+    expect(updateNotificationSettingsAction).toHaveBeenCalledWith({
+      notificationSettings: { ...initialSettings, weeklySummary: { [projectId]: false } },
+    });
+    expect(toast.error).toHaveBeenCalledWith("Database connection failed", {
+      id: "notification-switch",
+    });
+    expect(toast.success).not.toHaveBeenCalled();
+  });
+
+  test("shows error toast when updateNotificationSettingsAction fails for 'unsubscribedOrganizationIds' type", async () => {
+    const mockErrorResponse = { serverError: "Permission denied" };
+    vi.mocked(updateNotificationSettingsAction).mockResolvedValueOnce(mockErrorResponse);
+
+    const initialSettings = { ...baseNotificationSettings, unsubscribedOrganizationIds: [] };
+    renderSwitch({
+      surveyOrProjectOrOrganizationId: organizationId,
+      notificationSettings: initialSettings,
+      notificationType: "unsubscribedOrganizationIds",
+    });
+    const switchInput = screen.getByLabelText("toggle notification settings for unsubscribedOrganizationIds");
+
+    await act(async () => {
+      await user.click(switchInput);
+    });
+
+    expect(updateNotificationSettingsAction).toHaveBeenCalledWith({
+      notificationSettings: { ...initialSettings, unsubscribedOrganizationIds: [organizationId] },
+    });
+    expect(toast.error).toHaveBeenCalledWith("Permission denied", {
+      id: "notification-switch",
+    });
+    expect(toast.success).not.toHaveBeenCalled();
+  });
+
+  test("shows error toast when updateNotificationSettingsAction returns null", async () => {
+    const mockErrorResponse = { serverError: "An error occurred" };
+    vi.mocked(updateNotificationSettingsAction).mockResolvedValueOnce(mockErrorResponse);
+
+    const initialSettings = { ...baseNotificationSettings, alert: { [surveyId]: false } };
+    renderSwitch({ notificationSettings: initialSettings, notificationType: "alert" });
+    const switchInput = screen.getByLabelText("toggle notification settings for alert");
+
+    await act(async () => {
+      await user.click(switchInput);
+    });
+
+    expect(updateNotificationSettingsAction).toHaveBeenCalledWith({
+      notificationSettings: { ...initialSettings, alert: { [surveyId]: true } },
+    });
+    expect(toast.error).toHaveBeenCalledWith("An error occurred", {
+      id: "notification-switch",
+    });
+    expect(toast.success).not.toHaveBeenCalled();
+  });
+
+  test("shows error toast when updateNotificationSettingsAction returns undefined", async () => {
+    const mockErrorResponse = { serverError: "An error occurred" };
+    vi.mocked(updateNotificationSettingsAction).mockResolvedValueOnce(mockErrorResponse);
+
+    const initialSettings = { ...baseNotificationSettings, alert: { [surveyId]: false } };
+    renderSwitch({ notificationSettings: initialSettings, notificationType: "alert" });
+    const switchInput = screen.getByLabelText("toggle notification settings for alert");
+
+    await act(async () => {
+      await user.click(switchInput);
+    });
+
+    expect(updateNotificationSettingsAction).toHaveBeenCalledWith({
+      notificationSettings: { ...initialSettings, alert: { [surveyId]: true } },
+    });
+    expect(toast.error).toHaveBeenCalledWith("An error occurred", {
+      id: "notification-switch",
+    });
+    expect(toast.success).not.toHaveBeenCalled();
+  });
+
+  test("shows error toast when updateNotificationSettingsAction returns response without data property", async () => {
+    const mockErrorResponse = { validationErrors: { _errors: ["Invalid input"] } };
+    vi.mocked(updateNotificationSettingsAction).mockResolvedValueOnce(mockErrorResponse);
+
+    const initialSettings = { ...baseNotificationSettings, alert: { [surveyId]: false } };
+    renderSwitch({ notificationSettings: initialSettings, notificationType: "alert" });
+    const switchInput = screen.getByLabelText("toggle notification settings for alert");
+
+    await act(async () => {
+      await user.click(switchInput);
+    });
+
+    expect(updateNotificationSettingsAction).toHaveBeenCalledWith({
+      notificationSettings: { ...initialSettings, alert: { [surveyId]: true } },
+    });
+    expect(toast.error).toHaveBeenCalledWith("Invalid input", {
+      id: "notification-switch",
+    });
+    expect(toast.success).not.toHaveBeenCalled();
+  });
+
+  test("shows error toast when updateNotificationSettingsAction throws an exception", async () => {
+    const mockErrorResponse = { serverError: "Network error" };
+    vi.mocked(updateNotificationSettingsAction).mockResolvedValueOnce(mockErrorResponse);
+
+    const initialSettings = { ...baseNotificationSettings, alert: { [surveyId]: false } };
+    renderSwitch({ notificationSettings: initialSettings, notificationType: "alert" });
+    const switchInput = screen.getByLabelText("toggle notification settings for alert");
+
+    await act(async () => {
+      await user.click(switchInput);
+    });
+
+    expect(updateNotificationSettingsAction).toHaveBeenCalledWith({
+      notificationSettings: { ...initialSettings, alert: { [surveyId]: true } },
+    });
+    expect(toast.error).toHaveBeenCalledWith("Network error", {
+      id: "notification-switch",
+    });
+    expect(toast.success).not.toHaveBeenCalled();
+  });
+
+  test("switch remains enabled after error occurs", async () => {
+    const mockErrorResponse = { serverError: "Failed to update" };
+    vi.mocked(updateNotificationSettingsAction).mockResolvedValueOnce(mockErrorResponse);
+
+    const initialSettings = { ...baseNotificationSettings, alert: { [surveyId]: false } };
+    renderSwitch({ notificationSettings: initialSettings, notificationType: "alert" });
+    const switchInput = screen.getByLabelText("toggle notification settings for alert");
+
+    await act(async () => {
+      await user.click(switchInput);
+    });
+
+    expect(toast.error).toHaveBeenCalledWith("Failed to update", {
+      id: "notification-switch",
+    });
+    expect(switchInput).toBeEnabled(); // Switch should be re-enabled after error
+  });
+
+  test("shows error toast with validation errors for specific fields", async () => {
+    const mockErrorResponse = {
+      validationErrors: {
+        notificationSettings: {
+          _errors: ["Invalid notification settings"],
+        },
+      },
+    };
+    vi.mocked(updateNotificationSettingsAction).mockResolvedValueOnce(mockErrorResponse);
+
+    const initialSettings = { ...baseNotificationSettings, alert: { [surveyId]: false } };
+    renderSwitch({ notificationSettings: initialSettings, notificationType: "alert" });
+    const switchInput = screen.getByLabelText("toggle notification settings for alert");
+
+    await act(async () => {
+      await user.click(switchInput);
+    });
+
+    expect(updateNotificationSettingsAction).toHaveBeenCalledWith({
+      notificationSettings: { ...initialSettings, alert: { [surveyId]: true } },
+    });
+    expect(toast.error).toHaveBeenCalledWith("notificationSettingsInvalid notification settings", {
+      id: "notification-switch",
+    });
+    expect(toast.success).not.toHaveBeenCalled();
+  });
 });

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

@@ -1,7 +1,9 @@
 "use client";
 
+import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { Switch } from "@/modules/ui/components/switch";
 import { useTranslate } from "@tolgee/react";
+import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
 import { TUserNotificationSettings } from "@formbricks/types/user";
@@ -24,6 +26,7 @@ export const NotificationSwitch = ({
 }: NotificationSwitchProps) => {
   const [isLoading, setIsLoading] = useState(false);
   const { t } = useTranslate();
+  const router = useRouter();
   const isChecked =
     notificationType === "unsubscribedOrganizationIds"
       ? !notificationSettings.unsubscribedOrganizationIds?.includes(surveyOrProjectOrOrganizationId)
@@ -50,7 +53,20 @@ export const NotificationSwitch = ({
         !updatedNotificationSettings[notificationType][surveyOrProjectOrOrganizationId];
     }
 
-    await updateNotificationSettingsAction({ notificationSettings: updatedNotificationSettings });
+    const updatedNotificationSettingsActionResponse = await updateNotificationSettingsAction({
+      notificationSettings: updatedNotificationSettings,
+    });
+    if (updatedNotificationSettingsActionResponse?.data) {
+      toast.success(t("environments.settings.notifications.notification_settings_updated"), {
+        id: "notification-switch",
+      });
+      router.refresh();
+    } else {
+      const errorMessage = getFormattedErrorMessage(updatedNotificationSettingsActionResponse);
+      toast.error(errorMessage, {
+        id: "notification-switch",
+      });
+    }
     setIsLoading(false);
   };
 
@@ -104,9 +120,6 @@ export const NotificationSwitch = ({
       disabled={isLoading}
       onCheckedChange={async () => {
         await handleSwitchChange();
-        toast.success(t("environments.settings.notifications.notification_settings_updated"), {
-          id: "notification-switch",
-        });
       }}
     />
   );

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

@@ -13,7 +13,7 @@ import { AuthenticatedActionClientCtx } from "@/lib/utils/action-client/types/co
 import { rateLimit } from "@/lib/utils/rate-limit";
 import { updateBrevoCustomer } from "@/modules/auth/lib/brevo";
 import { withAuditLogging } from "@/modules/ee/audit-logs/lib/handler";
-import { sendVerificationNewEmail } from "@/modules/email";
+import { sendForgotPasswordEmail, sendVerificationNewEmail } from "@/modules/email";
 import { z } from "zod";
 import { ZId } from "@formbricks/types/common";
 import {
@@ -162,3 +162,21 @@ export const removeAvatarAction = authenticatedActionClient.schema(ZRemoveAvatar
     }
   )
 );
+
+export const resetPasswordAction = authenticatedActionClient.action(
+  withAuditLogging(
+    "passwordReset",
+    "user",
+    async ({ ctx }: { ctx: AuthenticatedActionClientCtx; parsedInput: undefined }) => {
+      if (ctx.user.identityProvider !== "email") {
+        throw new OperationNotAllowedError("Password reset is not allowed for this user.");
+      }
+
+      await sendForgotPasswordEmail(ctx.user);
+
+      ctx.auditLoggingCtx.userId = ctx.user.id;
+
+      return { success: true };
+    }
+  )
+);

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

@@ -3,7 +3,7 @@ import userEvent from "@testing-library/user-event";
 import toast from "react-hot-toast";
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 import { TUser } from "@formbricks/types/user";
-import { updateUserAction } from "../actions";
+import { resetPasswordAction, updateUserAction } from "../actions";
 import { EditProfileDetailsForm } from "./EditProfileDetailsForm";
 
 const mockUser = {
@@ -24,6 +24,8 @@ const mockUser = {
   objective: "other",
 } as unknown as TUser;
 
+vi.mock("next-auth/react", () => ({ signOut: vi.fn() }));
+
 // Mock window.location.reload
 const originalLocation = window.location;
 beforeEach(() => {
@@ -35,6 +37,11 @@ beforeEach(() => {
 
 vi.mock("@/app/(app)/environments/[environmentId]/settings/(account)/profile/actions", () => ({
   updateUserAction: vi.fn(),
+  resetPasswordAction: vi.fn(),
+}));
+
+vi.mock("@/modules/auth/forgot-password/actions", () => ({
+  forgotPasswordAction: vi.fn(),
 }));
 
 afterEach(() => {
@@ -50,7 +57,13 @@ describe("EditProfileDetailsForm", () => {
   test("renders with initial user data and updates successfully", async () => {
     vi.mocked(updateUserAction).mockResolvedValue({ ...mockUser, name: "New Name" } as any);
 
-    render(<EditProfileDetailsForm user={mockUser} emailVerificationDisabled={true} />);
+    render(
+      <EditProfileDetailsForm
+        user={mockUser}
+        emailVerificationDisabled={true}
+        isPasswordResetEnabled={false}
+      />
+    );
 
     const nameInput = screen.getByPlaceholderText("common.full_name");
     expect(nameInput).toHaveValue(mockUser.name);
@@ -91,7 +104,13 @@ describe("EditProfileDetailsForm", () => {
     const errorMessage = "Update failed";
     vi.mocked(updateUserAction).mockRejectedValue(new Error(errorMessage));
 
-    render(<EditProfileDetailsForm user={mockUser} emailVerificationDisabled={false} />);
+    render(
+      <EditProfileDetailsForm
+        user={mockUser}
+        emailVerificationDisabled={false}
+        isPasswordResetEnabled={false}
+      />
+    );
 
     const nameInput = screen.getByPlaceholderText("common.full_name");
     await userEvent.clear(nameInput);
@@ -109,7 +128,13 @@ describe("EditProfileDetailsForm", () => {
   });
 
   test("update button is disabled initially and enables on change", async () => {
-    render(<EditProfileDetailsForm user={mockUser} emailVerificationDisabled={false} />);
+    render(
+      <EditProfileDetailsForm
+        user={mockUser}
+        emailVerificationDisabled={false}
+        isPasswordResetEnabled={false}
+      />
+    );
     const updateButton = screen.getByText("common.update");
     expect(updateButton).toBeDisabled();
 
@@ -117,4 +142,68 @@ describe("EditProfileDetailsForm", () => {
     await userEvent.type(nameInput, " updated");
     expect(updateButton).toBeEnabled();
   });
+
+  test("reset password button works", async () => {
+    vi.mocked(resetPasswordAction).mockResolvedValue({ data: { success: true } });
+
+    render(
+      <EditProfileDetailsForm
+        user={mockUser}
+        emailVerificationDisabled={false}
+        isPasswordResetEnabled={true}
+      />
+    );
+
+    const resetButton = screen.getByRole("button", { name: "auth.forgot-password.reset_password" });
+    await userEvent.click(resetButton);
+
+    await waitFor(() => {
+      expect(resetPasswordAction).toHaveBeenCalled();
+    });
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith("auth.forgot-password.email-sent.heading");
+    });
+  });
+
+  test("reset password button handles error correctly", async () => {
+    const errorMessage = "Reset failed";
+    vi.mocked(resetPasswordAction).mockResolvedValue({ serverError: errorMessage });
+
+    render(
+      <EditProfileDetailsForm
+        user={mockUser}
+        emailVerificationDisabled={false}
+        isPasswordResetEnabled={true}
+      />
+    );
+
+    const resetButton = screen.getByRole("button", { name: "auth.forgot-password.reset_password" });
+    await userEvent.click(resetButton);
+
+    await waitFor(() => {
+      expect(resetPasswordAction).toHaveBeenCalled();
+    });
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith(errorMessage);
+    });
+  });
+
+  test("reset password button shows loading state", async () => {
+    vi.mocked(resetPasswordAction).mockImplementation(() => new Promise(() => {})); // Never resolves
+
+    render(
+      <EditProfileDetailsForm
+        user={mockUser}
+        emailVerificationDisabled={false}
+        isPasswordResetEnabled={true}
+      />
+    );
+
+    const resetButton = screen.getByRole("button", { name: "auth.forgot-password.reset_password" });
+    await userEvent.click(resetButton);
+
+    expect(resetButton).toBeDisabled();
+  });
 });

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

@@ -14,6 +14,7 @@ import {
 } from "@/modules/ui/components/dropdown-menu";
 import { FormControl, FormError, FormField, FormItem, FormLabel } from "@/modules/ui/components/form";
 import { Input } from "@/modules/ui/components/input";
+import { Label } from "@/modules/ui/components/label";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useTranslate } from "@tolgee/react";
 import { ChevronDownIcon } from "lucide-react";
@@ -22,7 +23,7 @@ import { FormProvider, SubmitHandler, useForm } from "react-hook-form";
 import toast from "react-hot-toast";
 import { z } from "zod";
 import { TUser, TUserUpdateInput, ZUser, ZUserEmail } from "@formbricks/types/user";
-import { updateUserAction } from "../actions";
+import { resetPasswordAction, updateUserAction } from "../actions";
 
 // Schema & types
 const ZEditProfileNameFormSchema = ZUser.pick({ name: true, locale: true, email: true }).extend({
@@ -30,13 +31,17 @@ const ZEditProfileNameFormSchema = ZUser.pick({ name: true, locale: true, email:
 });
 type TEditProfileNameForm = z.infer<typeof ZEditProfileNameFormSchema>;
 
+interface IEditProfileDetailsFormProps {
+  user: TUser;
+  isPasswordResetEnabled?: boolean;
+  emailVerificationDisabled: boolean;
+}
+
 export const EditProfileDetailsForm = ({
   user,
+  isPasswordResetEnabled,
   emailVerificationDisabled,
-}: {
-  user: TUser;
-  emailVerificationDisabled: boolean;
-}) => {
+}: IEditProfileDetailsFormProps) => {
   const { t } = useTranslate();
 
   const form = useForm<TEditProfileNameForm>({
@@ -50,6 +55,8 @@ export const EditProfileDetailsForm = ({
   });
 
   const { isSubmitting, isDirty } = form.formState;
+
+  const [isResettingPassword, setIsResettingPassword] = useState(false);
   const [showModal, setShowModal] = useState(false);
   const { signOut: signOutWithAudit } = useSignOut({ id: user.id, email: user.email });
 
@@ -90,6 +97,7 @@ export const EditProfileDetailsForm = ({
           redirectUrl: "/email-change-without-verification-success",
           redirect: true,
           callbackUrl: "/email-change-without-verification-success",
+          clearEnvironmentId: true,
         });
         return;
       }
@@ -121,6 +129,28 @@ export const EditProfileDetailsForm = ({
     }
   };
 
+  const handleResetPassword = async () => {
+    setIsResettingPassword(true);
+
+    const result = await resetPasswordAction();
+    if (result?.data) {
+      toast.success(t("auth.forgot-password.email-sent.heading"));
+
+      await signOutWithAudit({
+        reason: "password_reset",
+        redirectUrl: "/auth/login",
+        redirect: true,
+        callbackUrl: "/auth/login",
+        clearEnvironmentId: true,
+      });
+    } else {
+      const errorMessage = getFormattedErrorMessage(result);
+      toast.error(errorMessage);
+    }
+
+    setIsResettingPassword(false);
+  };
+
   return (
     <>
       <FormProvider {...form}>
@@ -205,6 +235,26 @@ export const EditProfileDetailsForm = ({
             )}
           />
 
+          {isPasswordResetEnabled && (
+            <div className="mt-4 space-y-2">
+              <Label htmlFor="reset-password">{t("auth.forgot-password.reset_password")}</Label>
+              <p className="mt-1 text-sm text-slate-500">
+                {t("auth.forgot-password.reset_password_description")}
+              </p>
+              <div className="flex items-center justify-between gap-2">
+                <Input type="email" id="reset-password" defaultValue={user.email} disabled />
+                <Button
+                  onClick={handleResetPassword}
+                  loading={isResettingPassword}
+                  disabled={isResettingPassword}
+                  size="default"
+                  variant="secondary">
+                  {t("auth.forgot-password.reset_password")}
+                </Button>
+              </div>
+            </div>
+          )}
+
           <Button
             type="submit"
             className="mt-4"

apps/web/app/(app)/environments/[environmentId]/settings/(account)/profile/components/password-confirmation-modal.test.tsx

@@ -4,18 +4,27 @@ import userEvent from "@testing-library/user-event";
 import { afterEach, describe, expect, test, vi } from "vitest";
 import { PasswordConfirmationModal } from "./password-confirmation-modal";
 
-// Mock the Modal component
-vi.mock("@/modules/ui/components/modal", () => ({
-  Modal: ({ children, open, setOpen, title }: any) =>
+// Mock the Dialog component
+vi.mock("@/modules/ui/components/dialog", () => ({
+  Dialog: ({ children, open, onOpenChange }: any) =>
     open ? (
-      <div data-testid="modal">
-        <div data-testid="modal-title">{title}</div>
+      <div data-testid="dialog" role="dialog">
         {children}
-        <button data-testid="modal-close" onClick={() => setOpen(false)}>
+        <button data-testid="dialog-close" onClick={() => onOpenChange(false)}>
           Close
         </button>
       </div>
     ) : null,
+  DialogContent: ({ children, ...props }: any) => (
+    <div data-testid="dialog-content" {...props}>
+      {children}
+    </div>
+  ),
+  DialogHeader: ({ children }: any) => <div data-testid="dialog-header">{children}</div>,
+  DialogTitle: ({ children }: any) => <h2 data-testid="dialog-title">{children}</h2>,
+  DialogDescription: ({ children }: any) => <p data-testid="dialog-description">{children}</p>,
+  DialogBody: ({ children }: any) => <div data-testid="dialog-body">{children}</div>,
+  DialogFooter: ({ children }: any) => <div data-testid="dialog-footer">{children}</div>,
 }));
 
 // Mock the PasswordInput component
@@ -54,13 +63,13 @@ describe("PasswordConfirmationModal", () => {
 
   test("renders nothing when open is false", () => {
     render(<PasswordConfirmationModal {...defaultProps} open={false} />);
-    expect(screen.queryByTestId("modal")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("dialog")).not.toBeInTheDocument();
   });
 
-  test("renders modal content when open is true", () => {
+  test("renders dialog content when open is true", () => {
     render(<PasswordConfirmationModal {...defaultProps} />);
-    expect(screen.getByTestId("modal")).toBeInTheDocument();
-    expect(screen.getByTestId("modal-title")).toBeInTheDocument();
+    expect(screen.getByTestId("dialog")).toBeInTheDocument();
+    expect(screen.getByTestId("dialog-title")).toBeInTheDocument();
   });
 
   test("displays old and new email addresses", () => {

apps/web/app/(app)/environments/[environmentId]/settings/(account)/profile/components/password-confirmation-modal.tsx

@@ -1,8 +1,16 @@
 "use client";
 
 import { Button } from "@/modules/ui/components/button";
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/modules/ui/components/dialog";
 import { FormControl, FormError, FormField, FormItem } from "@/modules/ui/components/form";
-import { Modal } from "@/modules/ui/components/modal";
 import { PasswordInput } from "@/modules/ui/components/password-input";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useTranslate } from "@tolgee/react";
@@ -54,64 +62,69 @@ export const PasswordConfirmationModal = ({
   };
 
   return (
-    <Modal open={open} setOpen={setOpen} title={t("auth.forgot-password.reset.confirm_password")}>
-      <FormProvider {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-          <p className="text-muted-foreground text-sm">
-            {t("auth.email-change.confirm_password_description")}
-          </p>
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t("auth.forgot-password.reset.confirm_password")}</DialogTitle>
+          <DialogDescription>{t("auth.email-change.confirm_password_description")}</DialogDescription>
+        </DialogHeader>
+        <FormProvider {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            <DialogBody>
+              <div className="space-y-4">
+                <div className="flex flex-col gap-2 text-sm sm:flex-row sm:justify-between sm:gap-4">
+                  <p>
+                    <strong>{t("auth.email-change.old_email")}:</strong>
+                    <br /> {oldEmail.toLowerCase()}
+                  </p>
+                  <p>
+                    <strong>{t("auth.email-change.new_email")}:</strong>
+                    <br /> {newEmail.toLowerCase()}
+                  </p>
+                </div>
 
-          <div className="flex flex-col gap-2 text-sm sm:flex-row sm:justify-between sm:gap-4">
-            <p>
-              <strong>{t("auth.email-change.old_email")}:</strong>
-              <br /> {oldEmail.toLowerCase()}
-            </p>
-            <p>
-              <strong>{t("auth.email-change.new_email")}:</strong>
-              <br /> {newEmail.toLowerCase()}
-            </p>
-          </div>
-
-          <FormField
-            control={form.control}
-            name="password"
-            render={({ field, fieldState: { error } }) => (
-              <FormItem className="w-full">
-                <FormControl>
-                  <div>
-                    <PasswordInput
-                      id="password"
-                      autoComplete="current-password"
-                      placeholder="*******"
-                      aria-placeholder="password"
-                      aria-label="password"
-                      aria-required="true"
-                      required
-                      className="focus:border-brand-dark focus:ring-brand-dark block w-full rounded-md border-slate-300 shadow-sm sm:text-sm"
-                      value={field.value}
-                      onChange={(password) => field.onChange(password)}
-                    />
-                    {error?.message && <FormError className="text-left">{error.message}</FormError>}
-                  </div>
-                </FormControl>
-              </FormItem>
-            )}
-          />
-
-          <div className="mt-4 space-x-2 text-right">
-            <Button type="button" variant="secondary" onClick={handleCancel}>
-              {t("common.cancel")}
-            </Button>
-            <Button
-              type="submit"
-              variant="default"
-              loading={isSubmitting}
-              disabled={isSubmitting || !isDirty || oldEmail.toLowerCase() === newEmail.toLowerCase()}>
-              {t("common.confirm")}
-            </Button>
-          </div>
-        </form>
-      </FormProvider>
-    </Modal>
+                <FormField
+                  control={form.control}
+                  name="password"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormItem className="w-full">
+                      <FormControl>
+                        <div>
+                          <PasswordInput
+                            id="password"
+                            autoComplete="current-password"
+                            placeholder="*******"
+                            aria-placeholder="password"
+                            aria-label="password"
+                            aria-required="true"
+                            required
+                            className="focus:border-brand-dark focus:ring-brand-dark block w-full rounded-md border-slate-300 shadow-sm sm:text-sm"
+                            value={field.value}
+                            onChange={(password) => field.onChange(password)}
+                          />
+                          {error?.message && <FormError className="text-left">{error.message}</FormError>}
+                        </div>
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              </div>
+            </DialogBody>
+            <DialogFooter>
+              <Button type="button" variant="secondary" onClick={handleCancel}>
+                {t("common.cancel")}
+              </Button>
+              <Button
+                type="submit"
+                variant="default"
+                loading={isSubmitting}
+                disabled={isSubmitting || !isDirty || oldEmail.toLowerCase() === newEmail.toLowerCase()}>
+                {t("common.confirm")}
+              </Button>
+            </DialogFooter>
+          </form>
+        </FormProvider>
+      </DialogContent>
+    </Dialog>
   );
 };

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

@@ -12,7 +12,8 @@ import Page from "./page";
 
 // Mock services and utils
 vi.mock("@/lib/constants", () => ({
-  IS_FORMBRICKS_CLOUD: true,
+  IS_FORMBRICKS_CLOUD: 1,
+  PASSWORD_RESET_DISABLED: 1,
   EMAIL_VERIFICATION_DISABLED: true,
 }));
 vi.mock("@/lib/organization/service", () => ({

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

@@ -1,6 +1,6 @@
 import { AccountSettingsNavbar } from "@/app/(app)/environments/[environmentId]/settings/(account)/components/AccountSettingsNavbar";
 import { AccountSecurity } from "@/app/(app)/environments/[environmentId]/settings/(account)/profile/components/AccountSecurity";
-import { EMAIL_VERIFICATION_DISABLED, IS_FORMBRICKS_CLOUD } from "@/lib/constants";
+import { EMAIL_VERIFICATION_DISABLED, IS_FORMBRICKS_CLOUD, PASSWORD_RESET_DISABLED } from "@/lib/constants";
 import { getOrganizationsWhereUserIsSingleOwner } from "@/lib/organization/service";
 import { getUser } from "@/lib/user/service";
 import { getIsMultiOrgEnabled, getIsTwoFactorAuthEnabled } from "@/modules/ee/license-check/lib/utils";
@@ -32,6 +32,8 @@ const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
     throw new Error(t("common.user_not_found"));
   }
 
+  const isPasswordResetEnabled = !PASSWORD_RESET_DISABLED && user.identityProvider === "email";
+
   return (
     <PageContentWrapper>
       <PageHeader pageTitle={t("common.account_settings")}>
@@ -42,7 +44,11 @@ const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
           <SettingsCard
             title={t("environments.settings.profile.personal_information")}
             description={t("environments.settings.profile.update_personal_info")}>
-            <EditProfileDetailsForm emailVerificationDisabled={EMAIL_VERIFICATION_DISABLED} user={user} />
+            <EditProfileDetailsForm
+              user={user}
+              emailVerificationDisabled={EMAIL_VERIFICATION_DISABLED}
+              isPasswordResetEnabled={isPasswordResetEnabled}
+            />
           </SettingsCard>
           <SettingsCard
             title={t("common.avatar")}

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

@@ -34,6 +34,12 @@ vi.mock("@/lib/constants", () => ({
   AUDIT_LOG_ENABLED: 1,
 }));
 
+vi.mock("@/lib/env", () => ({
+  env: {
+    PUBLIC_URL: "https://public-domain.com",
+  },
+}));
+
 describe("TeamsPage re-export", () => {
   test("should re-export TeamsPage component", () => {
     expect(Page).toBe(TeamsPage);

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

@@ -49,6 +49,12 @@ vi.mock("@/lib/constants", () => ({
   AUDIT_LOG_ENABLED: true,
 }));
 
+vi.mock("@/lib/env", () => ({
+  env: {
+    PUBLIC_URL: "https://public-domain.com",
+  },
+}));
+
 vi.mock("@/app/(app)/environments/[environmentId]/components/ResponseFilterContext");
 vi.mock("@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/actions");
 vi.mock("@/app/lib/surveys/surveys");

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

@@ -26,8 +26,26 @@ vi.mock("@/modules/ui/components/button", () => ({
   )),
 }));
 
-vi.mock("@/modules/ui/components/modal", () => ({
-  Modal: vi.fn(({ children, open }) => (open ? <div data-testid="modal">{children}</div> : null)),
+vi.mock("@/modules/ui/components/dialog", () => ({
+  Dialog: vi.fn(({ children, open, onOpenChange }) =>
+    open ? (
+      <div data-testid="dialog" role="dialog">
+        {children}
+        <button onClick={() => onOpenChange(false)}>Close Dialog</button>
+      </div>
+    ) : null
+  ),
+  DialogContent: vi.fn(({ children, hideCloseButton, width, className }) => (
+    <div
+      data-testid="dialog-content"
+      data-hide-close-button={hideCloseButton}
+      data-width={width}
+      className={className}>
+      {children}
+    </div>
+  )),
+  DialogBody: vi.fn(({ children }) => <div data-testid="dialog-body">{children}</div>),
+  DialogFooter: vi.fn(({ children }) => <div data-testid="dialog-footer">{children}</div>),
 }));
 
 const mockResponses = [
@@ -163,12 +181,12 @@ describe("ResponseCardModal", () => {
   test("should not render if selectedResponseId is null", () => {
     const { container } = render(<ResponseCardModal {...defaultProps} selectedResponseId={null} />);
     expect(container.firstChild).toBeNull();
-    expect(screen.queryByTestId("modal")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("dialog")).not.toBeInTheDocument();
   });
 
-  test("should render the modal when a response is selected", () => {
+  test("should render the dialog when a response is selected", () => {
     render(<ResponseCardModal {...defaultProps} />);
-    expect(screen.getByTestId("modal")).toBeInTheDocument();
+    expect(screen.getByTestId("dialog")).toBeInTheDocument();
     expect(screen.getByTestId("single-response-card")).toBeInTheDocument();
   });
 
@@ -204,14 +222,6 @@ describe("ResponseCardModal", () => {
     expect(nextButton).toBeDisabled();
   });
 
-  test("should call setSelectedResponseId with null when close button is clicked", async () => {
-    render(<ResponseCardModal {...defaultProps} />);
-    const buttons = screen.getAllByTestId("mock-button");
-    const closeButton = buttons.find((button) => button.querySelector("svg.lucide-x"));
-    if (closeButton) await userEvent.click(closeButton);
-    expect(mockSetSelectedResponseId).toHaveBeenCalledWith(null);
-  });
-
   test("useEffect should set open to true and currentIndex when selectedResponseId is provided", () => {
     render(<ResponseCardModal {...defaultProps} selectedResponseId={mockResponses[1].id} />);
     expect(mockSetOpen).toHaveBeenCalledWith(true);
@@ -229,11 +239,10 @@ describe("ResponseCardModal", () => {
     expect(mockSetOpen).toHaveBeenCalledWith(false);
   });
 
-  test("should render ChevronLeft, ChevronRight, and XIcon", () => {
+  test("should render ChevronLeft and ChevronRight icons", () => {
     render(<ResponseCardModal {...defaultProps} />);
     expect(document.querySelector(".lucide-chevron-left")).toBeInTheDocument();
     expect(document.querySelector(".lucide-chevron-right")).toBeInTheDocument();
-    expect(document.querySelector(".lucide-x")).toBeInTheDocument();
   });
 });
 

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

@@ -1,7 +1,7 @@
 import { SingleResponseCard } from "@/modules/analysis/components/SingleResponseCard";
 import { Button } from "@/modules/ui/components/button";
-import { Modal } from "@/modules/ui/components/modal";
-import { ChevronLeft, ChevronRight, XIcon } from "lucide-react";
+import { Dialog, DialogBody, DialogContent, DialogFooter } from "@/modules/ui/components/dialog";
+import { ChevronLeft, ChevronRight } from "lucide-react";
 import { useEffect, useState } from "react";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TResponse } from "@formbricks/types/responses";
@@ -64,42 +64,20 @@ export const ResponseCardModal = ({
     }
   };
 
-  const handleClose = () => {
-    setSelectedResponseId(null);
+  const handleClose = (open: boolean) => {
+    setOpen(open);
+    if (!open) {
+      setSelectedResponseId(null);
+    }
   };
 
   // If no response is selected or currentIndex is null, do not render the modal
   if (selectedResponseId === null || currentIndex === null) return null;
 
   return (
-    <Modal
-      hideCloseButton
-      open={open}
-      setOpen={setOpen}
-      size="xxl"
-      className="max-h-[80vh] overflow-auto"
-      noPadding>
-      <div className="h-full rounded-lg">
-        <div className="relative h-full w-full overflow-auto p-4">
-          <div className="mb-4 flex items-center justify-end space-x-2">
-            <Button
-              onClick={handleBack}
-              disabled={currentIndex === 0}
-              variant="ghost"
-              className="border bg-white p-2">
-              <ChevronLeft className="h-5 w-5" />
-            </Button>
-            <Button
-              onClick={handleNext}
-              disabled={currentIndex === responses.length - 1}
-              variant="ghost"
-              className="border bg-white p-2">
-              <ChevronRight className="h-5 w-5" />
-            </Button>
-            <Button className="border bg-white p-2" onClick={handleClose} variant="ghost">
-              <XIcon className="h-5 w-5" />
-            </Button>
-          </div>
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent width="wide">
+        <DialogBody>
           <SingleResponseCard
             survey={survey}
             response={responses[currentIndex]}
@@ -113,8 +91,20 @@ export const ResponseCardModal = ({
             setSelectedResponseId={setSelectedResponseId}
             locale={locale}
           />
-        </div>
-      </div>
-    </Modal>
+        </DialogBody>
+        <DialogFooter>
+          <Button onClick={handleBack} disabled={currentIndex === 0} variant="outline" size="icon">
+            <ChevronLeft />
+          </Button>
+          <Button
+            onClick={handleNext}
+            disabled={currentIndex === responses.length - 1}
+            variant="outline"
+            size="icon">
+            <ChevronRight />
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 };

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

@@ -20,7 +20,7 @@ interface ResponsePageProps {
   environment: TEnvironment;
   survey: TSurvey;
   surveyId: string;
-  webAppUrl: string;
+  publicDomain: string;
   user?: TUser;
   environmentTags: TTag[];
   responsesPerPage: number;
@@ -32,7 +32,7 @@ export const ResponsePage = ({
   environment,
   survey,
   surveyId,
-  webAppUrl,
+  publicDomain,
   user,
   environmentTags,
   responsesPerPage,
@@ -155,7 +155,7 @@ export const ResponsePage = ({
     <>
       <div className="flex gap-1.5">
         <CustomFilter survey={surveyMemoized} />
-        {!isReadOnly && !isSharingPage && <ResultsShareButton survey={survey} webAppUrl={webAppUrl} />}
+        {!isReadOnly && !isSharingPage && <ResultsShareButton survey={survey} publicDomain={publicDomain} />}
       </div>
       <ResponseDataView
         survey={survey}

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

@@ -3,7 +3,7 @@ import { SurveyAnalysisNavigation } from "@/app/(app)/environments/[environmentI
 import { ResponsePage } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponsePage";
 import Page from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/page";
 import { SurveyAnalysisCTA } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SurveyAnalysisCTA";
-import { getSurveyDomain } from "@/lib/getSurveyUrl";
+import { getPublicDomain } from "@/lib/getPublicUrl";
 import { getResponseCountBySurveyId } from "@/lib/response/service";
 import { getSurvey } from "@/lib/survey/service";
 import { getTagsByEnvironmentId } from "@/lib/tag/service";
@@ -65,8 +65,8 @@ vi.mock("@/lib/constants", () => ({
   SESSION_MAX_AGE: 1000,
 }));
 
-vi.mock("@/lib/getSurveyUrl", () => ({
-  getSurveyDomain: vi.fn(),
+vi.mock("@/lib/getPublicUrl", () => ({
+  getPublicDomain: vi.fn(),
 }));
 
 vi.mock("@/lib/response/service", () => ({
@@ -160,7 +160,7 @@ const mockEnvironment = {
 
 const mockTags: TTag[] = [{ id: "tag1", name: "Tag 1", environmentId: mockEnvironmentId } as unknown as TTag];
 const mockLocale: TUserLocale = "en-US";
-const mockSurveyDomain = "http://customdomain.com";
+const mockPublicDomain = "http://customdomain.com";
 
 const mockParams = {
   environmentId: mockEnvironmentId,
@@ -179,7 +179,7 @@ describe("ResponsesPage", () => {
     vi.mocked(getTagsByEnvironmentId).mockResolvedValue(mockTags);
     vi.mocked(getResponseCountBySurveyId).mockResolvedValue(10);
     vi.mocked(findMatchingLocale).mockResolvedValue(mockLocale);
-    vi.mocked(getSurveyDomain).mockReturnValue(mockSurveyDomain);
+    vi.mocked(getPublicDomain).mockReturnValue(mockPublicDomain);
   });
 
   afterEach(() => {
@@ -205,7 +205,7 @@ describe("ResponsesPage", () => {
         survey: mockSurvey,
         isReadOnly: false,
         user: mockUser,
-        surveyDomain: mockSurveyDomain,
+        publicDomain: mockPublicDomain,
       }),
       undefined
     );
@@ -224,7 +224,7 @@ describe("ResponsesPage", () => {
         environment: mockEnvironment,
         survey: mockSurvey,
         surveyId: mockSurveyId,
-        webAppUrl: "http://localhost:3000",
+        publicDomain: mockPublicDomain,
         environmentTags: mockTags,
         user: mockUser,
         responsesPerPage: 10,

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

@@ -1,13 +1,15 @@
 import { SurveyAnalysisNavigation } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/SurveyAnalysisNavigation";
 import { ResponsePage } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponsePage";
 import { SurveyAnalysisCTA } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SurveyAnalysisCTA";
-import { RESPONSES_PER_PAGE, WEBAPP_URL } from "@/lib/constants";
-import { getSurveyDomain } from "@/lib/getSurveyUrl";
+import { IS_FORMBRICKS_CLOUD, RESPONSES_PER_PAGE } from "@/lib/constants";
+import { getPublicDomain } from "@/lib/getPublicUrl";
 import { getResponseCountBySurveyId } from "@/lib/response/service";
 import { getSurvey } from "@/lib/survey/service";
 import { getTagsByEnvironmentId } from "@/lib/tag/service";
 import { getUser } from "@/lib/user/service";
 import { findMatchingLocale } from "@/lib/utils/locale";
+import { getSegments } from "@/modules/ee/contacts/segments/lib/segments";
+import { getIsContactsEnabled } from "@/modules/ee/license-check/lib/utils";
 import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
 import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
 import { PageHeader } from "@/modules/ui/components/page-header";
@@ -33,11 +35,14 @@ const Page = async (props) => {
 
   const tags = await getTagsByEnvironmentId(params.environmentId);
 
+  const isContactsEnabled = await getIsContactsEnabled();
+  const segments = isContactsEnabled ? await getSegments(params.environmentId) : [];
+
   // Get response count for the CTA component
   const responseCount = await getResponseCountBySurveyId(params.surveyId);
 
   const locale = await findMatchingLocale();
-  const surveyDomain = getSurveyDomain();
+  const publicDomain = getPublicDomain();
 
   return (
     <PageContentWrapper>
@@ -49,8 +54,11 @@ const Page = async (props) => {
             survey={survey}
             isReadOnly={isReadOnly}
             user={user}
-            surveyDomain={surveyDomain}
+            publicDomain={publicDomain}
             responseCount={responseCount}
+            segments={segments}
+            isContactsEnabled={isContactsEnabled}
+            isFormbricksCloud={IS_FORMBRICKS_CLOUD}
           />
         }>
         <SurveyAnalysisNavigation environmentId={environment.id} survey={survey} activeId="responses" />
@@ -59,7 +67,7 @@ const Page = async (props) => {
         environment={environment}
         survey={survey}
         surveyId={params.surveyId}
-        webAppUrl={WEBAPP_URL}
+        publicDomain={publicDomain}
         environmentTags={tags}
         user={user}
         responsesPerPage={RESPONSES_PER_PAGE}

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

@@ -1,18 +1,23 @@
 "use server";
 
 import { getEmailTemplateHtml } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/lib/emailTemplate";
+import { WEBAPP_URL } from "@/lib/constants";
+import { putFile } from "@/lib/storage/service";
 import { getSurvey, updateSurvey } from "@/lib/survey/service";
 import { authenticatedActionClient } from "@/lib/utils/action-client";
 import { checkAuthorizationUpdated } from "@/lib/utils/action-client/action-client-middleware";
 import { AuthenticatedActionClientCtx } from "@/lib/utils/action-client/types/context";
+import { convertToCsv } from "@/lib/utils/file-conversion";
 import { getOrganizationIdFromSurveyId, getProjectIdFromSurveyId } from "@/lib/utils/helper";
 import { withAuditLogging } from "@/modules/ee/audit-logs/lib/handler";
+import { generatePersonalLinks } from "@/modules/ee/contacts/lib/contacts";
+import { getIsContactsEnabled } from "@/modules/ee/license-check/lib/utils";
 import { getOrganizationLogoUrl } from "@/modules/ee/whitelabel/email-customization/lib/organization";
 import { sendEmbedSurveyPreviewEmail } from "@/modules/email";
 import { customAlphabet } from "nanoid";
 import { z } from "zod";
 import { ZId } from "@formbricks/types/common";
-import { ResourceNotFoundError } from "@formbricks/types/errors";
+import { OperationNotAllowedError, ResourceNotFoundError, UnknownError } from "@formbricks/types/errors";
 
 const ZSendEmbedSurveyPreviewEmailAction = z.object({
   surveyId: ZId,
@@ -222,3 +227,89 @@ export const getEmailHtmlAction = authenticatedActionClient
 
     return await getEmailTemplateHtml(parsedInput.surveyId, ctx.user.locale);
   });
+
+const ZGeneratePersonalLinksAction = z.object({
+  surveyId: ZId,
+  segmentId: ZId,
+  environmentId: ZId,
+  expirationDays: z.number().optional(),
+});
+
+export const generatePersonalLinksAction = authenticatedActionClient
+  .schema(ZGeneratePersonalLinksAction)
+  .action(async ({ ctx, parsedInput }) => {
+    const isContactsEnabled = await getIsContactsEnabled();
+    if (!isContactsEnabled) {
+      throw new OperationNotAllowedError("Contacts are not enabled for this environment");
+    }
+
+    await checkAuthorizationUpdated({
+      userId: ctx.user.id,
+      organizationId: await getOrganizationIdFromSurveyId(parsedInput.surveyId),
+      access: [
+        {
+          type: "organization",
+          roles: ["owner", "manager"],
+        },
+        {
+          type: "projectTeam",
+          projectId: await getProjectIdFromSurveyId(parsedInput.surveyId),
+          minPermission: "readWrite",
+        },
+      ],
+    });
+
+    // Get contacts and generate personal links
+    const contactsResult = await generatePersonalLinks(
+      parsedInput.surveyId,
+      parsedInput.segmentId,
+      parsedInput.expirationDays
+    );
+
+    if (!contactsResult || contactsResult.length === 0) {
+      throw new UnknownError("No contacts found for the selected segment");
+    }
+
+    // Prepare CSV data with the specified headers and order
+    const csvHeaders = [
+      "Formbricks Contact ID",
+      "User ID",
+      "First Name",
+      "Last Name",
+      "Email",
+      "Personal Link",
+    ];
+
+    const csvData = contactsResult
+      .map((contact) => {
+        if (!contact) {
+          return null;
+        }
+        const attributes = contact.attributes ?? {};
+        return {
+          "Formbricks Contact ID": contact.contactId,
+          "User ID": attributes.userId ?? "",
+          "First Name": attributes.firstName ?? "",
+          "Last Name": attributes.lastName ?? "",
+          Email: attributes.email ?? "",
+          "Personal Link": contact.surveyUrl,
+        };
+      })
+      .filter((contact) => contact !== null);
+
+    // Convert to CSV using the file conversion utility
+    const csvContent = await convertToCsv(csvHeaders, csvData);
+    const fileName = `personal-links-${parsedInput.surveyId}-${Date.now()}.csv`;
+
+    // Store file temporarily and return download URL
+    const fileBuffer = Buffer.from(csvContent);
+    await putFile(fileName, fileBuffer, "private", parsedInput.environmentId);
+
+    const downloadUrl = `${WEBAPP_URL}/storage/${parsedInput.environmentId}/private/${fileName}`;
+
+    return {
+      downloadUrl,
+      fileName,
+      count: csvData.length,
+    };
+  });

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

@@ -41,6 +41,36 @@ const mockSurveyWeb = {
   styling: null,
 } as unknown as TSurvey;
 
+vi.mock("@/lib/constants", () => ({
+  INTERCOM_SECRET_KEY: "test-secret-key",
+  IS_INTERCOM_CONFIGURED: true,
+  INTERCOM_APP_ID: "test-app-id",
+  ENCRYPTION_KEY: "test-encryption-key",
+  ENTERPRISE_LICENSE_KEY: "test-enterprise-license-key",
+  GITHUB_ID: "test-github-id",
+  GITHUB_SECRET: "test-githubID",
+  GOOGLE_CLIENT_ID: "test-google-client-id",
+  GOOGLE_CLIENT_SECRET: "test-google-client-secret",
+  AZUREAD_CLIENT_ID: "test-azuread-client-id",
+  AZUREAD_CLIENT_SECRET: "test-azure",
+  AZUREAD_TENANT_ID: "test-azuread-tenant-id",
+  OIDC_DISPLAY_NAME: "test-oidc-display-name",
+  OIDC_CLIENT_ID: "test-oidc-client-id",
+  OIDC_ISSUER: "test-oidc-issuer",
+  OIDC_CLIENT_SECRET: "test-oidc-client-secret",
+  OIDC_SIGNING_ALGORITHM: "test-oidc-signing-algorithm",
+  WEBAPP_URL: "test-webapp-url",
+  IS_POSTHOG_CONFIGURED: true,
+  POSTHOG_API_HOST: "test-posthog-api-host",
+  POSTHOG_API_KEY: "test-posthog-api-key",
+  FORMBRICKS_ENVIRONMENT_ID: "mock-formbricks-environment-id",
+  IS_FORMBRICKS_ENABLED: true,
+  SESSION_MAX_AGE: 1000,
+  REDIS_URL: "test-redis-url",
+  AUDIT_LOG_ENABLED: true,
+  IS_FORMBRICKS_CLOUD: false,
+}));
+
 const mockSurveyLink = {
   ...mockSurveyWeb,
   id: "survey2",
@@ -87,9 +117,9 @@ vi.mock("./shareEmbedModal/EmbedView", () => ({
   EmbedView: (props: any) => mockEmbedViewComponent(props),
 }));
 
-const mockPanelInfoViewComponent = vi.fn();
-vi.mock("./shareEmbedModal/PanelInfoView", () => ({
-  PanelInfoView: (props: any) => mockPanelInfoViewComponent(props),
+// Mock getSurveyUrl to return a predictable URL
+vi.mock("@/modules/analysis/utils", () => ({
+  getSurveyUrl: vi.fn().mockResolvedValue("https://public-domain.com/s/survey1"),
 }));
 
 let capturedDialogOnOpenChange: ((open: boolean) => void) | undefined;
@@ -103,8 +133,6 @@ vi.mock("@/modules/ui/components/dialog", async () => {
       capturedDialogOnOpenChange = props.onOpenChange;
       return <actual.Dialog {...props} />;
     },
-    // DialogTitle, DialogContent, DialogDescription will be the actual components
-    // due to ...actual spread and no specific mock for them here.
   };
 });
 
@@ -119,35 +147,34 @@ describe("ShareEmbedSurvey", () => {
 
   const defaultProps = {
     survey: mockSurveyWeb,
-    surveyDomain: "test.com",
+    publicDomain: "https://public-domain.com",
     open: true,
     modalView: "start" as "start" | "embed" | "panel",
     setOpen: mockSetOpen,
     user: mockUser,
+    segments: [],
+    isContactsEnabled: true,
+    isFormbricksCloud: true,
   };
 
   beforeEach(() => {
     mockEmbedViewComponent.mockImplementation(
-      ({ handleInitialPageButton, tabs, activeId, survey, email, surveyUrl, surveyDomain, locale }) => (
+      ({ tabs, activeId, survey, email, surveyUrl, publicDomain, locale }) => (
         <div>
-          <button onClick={() => handleInitialPageButton()}>EmbedViewMockContent</button>
           <div data-testid="embedview-tabs">{JSON.stringify(tabs)}</div>
           <div data-testid="embedview-activeid">{activeId}</div>
           <div data-testid="embedview-survey-id">{survey.id}</div>
           <div data-testid="embedview-email">{email}</div>
           <div data-testid="embedview-surveyUrl">{surveyUrl}</div>
-          <div data-testid="embedview-surveyDomain">{surveyDomain}</div>
+          <div data-testid="embedview-publicDomain">{publicDomain}</div>
           <div data-testid="embedview-locale">{locale}</div>
         </div>
       )
     );
-    mockPanelInfoViewComponent.mockImplementation(({ handleInitialPageButton }) => (
-      <button onClick={() => handleInitialPageButton()}>PanelInfoViewMockContent</button>
-    ));
   });
 
-  test("renders initial 'start' view correctly when open and modalView is 'start'", () => {
-    render(<ShareEmbedSurvey {...defaultProps} />);
+  test("renders initial 'start' view correctly when open and modalView is 'start' for link survey", () => {
+    render(<ShareEmbedSurvey {...defaultProps} survey={mockSurveyLink} />);
     expect(screen.getByText("environments.surveys.summary.your_survey_is_public 🎉")).toBeInTheDocument();
     expect(screen.getByText("ShareSurveyLinkMock")).toBeInTheDocument();
     expect(screen.getByText("environments.surveys.summary.whats_next")).toBeInTheDocument();
@@ -158,48 +185,32 @@ describe("ShareEmbedSurvey", () => {
     expect(screen.getByTestId("badge-mock")).toHaveTextContent("common.new");
   });
 
+  test("renders initial 'start' view correctly when open and modalView is 'start' for app survey", () => {
+    render(<ShareEmbedSurvey {...defaultProps} survey={mockSurveyWeb} />);
+    // For app surveys, ShareSurveyLink should not be rendered
+    expect(screen.queryByText("ShareSurveyLinkMock")).not.toBeInTheDocument();
+    expect(screen.getByText("environments.surveys.summary.whats_next")).toBeInTheDocument();
+    expect(screen.getByText("environments.surveys.summary.embed_survey")).toBeInTheDocument();
+    expect(screen.getByText("environments.surveys.summary.configure_alerts")).toBeInTheDocument();
+    expect(screen.getByText("environments.surveys.summary.setup_integrations")).toBeInTheDocument();
+    expect(screen.getByText("environments.surveys.summary.send_to_panel")).toBeInTheDocument();
+    expect(screen.getByTestId("badge-mock")).toHaveTextContent("common.new");
+  });
+
   test("switches to 'embed' view when 'Embed survey' button is clicked", async () => {
     render(<ShareEmbedSurvey {...defaultProps} />);
     const embedButton = screen.getByText("environments.surveys.summary.embed_survey");
     await userEvent.click(embedButton);
     expect(mockEmbedViewComponent).toHaveBeenCalled();
-    expect(screen.getByText("EmbedViewMockContent")).toBeInTheDocument();
+    expect(screen.getByTestId("embedview-tabs")).toBeInTheDocument();
   });
 
   test("switches to 'panel' view when 'Send to panel' button is clicked", async () => {
     render(<ShareEmbedSurvey {...defaultProps} />);
     const panelButton = screen.getByText("environments.surveys.summary.send_to_panel");
     await userEvent.click(panelButton);
-    expect(mockPanelInfoViewComponent).toHaveBeenCalled();
-    expect(screen.getByText("PanelInfoViewMockContent")).toBeInTheDocument();
-  });
-
-  test("returns to 'start' view when handleInitialPageButton is triggered from EmbedView", async () => {
-    render(<ShareEmbedSurvey {...defaultProps} modalView="embed" />);
-    expect(mockEmbedViewComponent).toHaveBeenCalled();
-    expect(screen.getByText("EmbedViewMockContent")).toBeInTheDocument();
-
-    const embedViewButton = screen.getByText("EmbedViewMockContent");
-    await userEvent.click(embedViewButton);
-
-    // Should go back to start view, not close the modal
-    expect(screen.getByText("environments.surveys.summary.your_survey_is_public 🎉")).toBeInTheDocument();
-    expect(screen.queryByText("EmbedViewMockContent")).not.toBeInTheDocument();
-    expect(mockSetOpen).not.toHaveBeenCalled();
-  });
-
-  test("returns to 'start' view when handleInitialPageButton is triggered from PanelInfoView", async () => {
-    render(<ShareEmbedSurvey {...defaultProps} modalView="panel" />);
-    expect(mockPanelInfoViewComponent).toHaveBeenCalled();
-    expect(screen.getByText("PanelInfoViewMockContent")).toBeInTheDocument();
-
-    const panelInfoViewButton = screen.getByText("PanelInfoViewMockContent");
-    await userEvent.click(panelInfoViewButton);
-
-    // Should go back to start view, not close the modal
-    expect(screen.getByText("environments.surveys.summary.your_survey_is_public 🎉")).toBeInTheDocument();
-    expect(screen.queryByText("PanelInfoViewMockContent")).not.toBeInTheDocument();
-    expect(mockSetOpen).not.toHaveBeenCalled();
+    // Panel view currently just shows a title, no component is rendered
+    expect(screen.getByText("environments.surveys.summary.send_to_panel")).toBeInTheDocument();
   });
 
   test("handleOpenChange (when Dialog calls its onOpenChange prop)", () => {
@@ -225,10 +236,10 @@ describe("ShareEmbedSurvey", () => {
       tabs: { id: string; label: string; icon: LucideIcon }[];
       activeId: string;
     };
-    expect(embedViewProps.tabs.length).toBe(3);
+    expect(embedViewProps.tabs.length).toBe(4);
     expect(embedViewProps.tabs.find((tab) => tab.id === "app")).toBeUndefined();
-    expect(embedViewProps.tabs[0].id).toBe("email");
-    expect(embedViewProps.activeId).toBe("email");
+    expect(embedViewProps.tabs[0].id).toBe("link");
+    expect(embedViewProps.activeId).toBe("link");
   });
 
   test("correctly configures for 'web' survey type in embed view", () => {
@@ -255,24 +266,21 @@ describe("ShareEmbedSurvey", () => {
   test("initial showView is set by modalView prop when open is true", () => {
     render(<ShareEmbedSurvey {...defaultProps} open={true} modalView="embed" />);
     expect(mockEmbedViewComponent).toHaveBeenCalled();
-    expect(screen.getByText("EmbedViewMockContent")).toBeInTheDocument();
+    expect(screen.getByTestId("embedview-tabs")).toBeInTheDocument();
     cleanup();
 
     render(<ShareEmbedSurvey {...defaultProps} open={true} modalView="panel" />);
-    expect(mockPanelInfoViewComponent).toHaveBeenCalled();
-    expect(screen.getByText("PanelInfoViewMockContent")).toBeInTheDocument();
+    // Panel view currently just shows a title
+    expect(screen.getByText("environments.surveys.summary.send_to_panel")).toBeInTheDocument();
   });
 
   test("useEffect sets showView to 'start' when open becomes false", () => {
     const { rerender } = render(<ShareEmbedSurvey {...defaultProps} open={true} modalView="embed" />);
-    expect(screen.getByText("EmbedViewMockContent")).toBeInTheDocument(); // Starts in embed
+    expect(screen.getByTestId("embedview-tabs")).toBeInTheDocument(); // Starts in embed
 
     rerender(<ShareEmbedSurvey {...defaultProps} open={false} modalView="embed" />);
     // Dialog mock returns null when open is false, so EmbedViewMockContent is not found
-    expect(screen.queryByText("EmbedViewMockContent")).not.toBeInTheDocument();
-    // To verify showView is 'start', we'd need to inspect internal state or render start view elements
-    // For now, we trust the useEffect sets showView, and if it were to re-open in 'start' mode, it would show.
-    // The main check is that the previous view ('embed') is gone.
+    expect(screen.queryByTestId("embedview-tabs")).not.toBeInTheDocument();
   });
 
   test("renders correct label for link tab based on singleUse survey property", () => {

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

@@ -1,6 +1,7 @@
 "use client";
 
 import { ShareSurveyLink } from "@/modules/analysis/components/ShareSurveyLink";
+import { getSurveyUrl } from "@/modules/analysis/utils";
 import { Badge } from "@/modules/ui/components/badge";
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from "@/modules/ui/components/dialog";
 import { useTranslate } from "@tolgee/react";
@@ -11,32 +12,39 @@ import {
   LinkIcon,
   MailIcon,
   SmartphoneIcon,
+  UserIcon,
   UsersRound,
 } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useEffect, useMemo, useState } from "react";
+import { TSegment } from "@formbricks/types/segment";
 import { TSurvey } from "@formbricks/types/surveys/types";
 import { TUser } from "@formbricks/types/user";
 import { EmbedView } from "./shareEmbedModal/EmbedView";
-import { PanelInfoView } from "./shareEmbedModal/PanelInfoView";
 
 interface ShareEmbedSurveyProps {
   survey: TSurvey;
-  surveyDomain: string;
+  publicDomain: string;
   open: boolean;
   modalView: "start" | "embed" | "panel";
   setOpen: React.Dispatch<React.SetStateAction<boolean>>;
   user: TUser;
+  segments: TSegment[];
+  isContactsEnabled: boolean;
+  isFormbricksCloud: boolean;
 }
 
 export const ShareEmbedSurvey = ({
   survey,
-  surveyDomain,
+  publicDomain,
   open,
   modalView,
   setOpen,
   user,
+  segments,
+  isContactsEnabled,
+  isFormbricksCloud,
 }: ShareEmbedSurveyProps) => {
   const router = useRouter();
   const environmentId = survey.environmentId;
@@ -46,25 +54,41 @@ export const ShareEmbedSurvey = ({
   const tabs = useMemo(
     () =>
       [
-        { id: "email", label: t("environments.surveys.summary.embed_in_an_email"), icon: MailIcon },
-        { id: "webpage", label: t("environments.surveys.summary.embed_on_website"), icon: Code2Icon },
         {
           id: "link",
           label: `${isSingleUseLinkSurvey ? t("environments.surveys.summary.single_use_links") : t("environments.surveys.summary.share_the_link")}`,
           icon: LinkIcon,
         },
+        { id: "personal-links", label: t("environments.surveys.summary.personal_links"), icon: UserIcon },
+        { id: "email", label: t("environments.surveys.summary.embed_in_an_email"), icon: MailIcon },
+        { id: "webpage", label: t("environments.surveys.summary.embed_on_website"), icon: Code2Icon },
+
         { id: "app", label: t("environments.surveys.summary.embed_in_app"), icon: SmartphoneIcon },
       ].filter((tab) => !(survey.type === "link" && tab.id === "app")),
     [t, isSingleUseLinkSurvey, survey.type]
   );
 
-  const [activeId, setActiveId] = useState(survey.type === "link" ? tabs[0].id : tabs[3].id);
-  const [showView, setShowView] = useState<"start" | "embed" | "panel">("start");
+  const [activeId, setActiveId] = useState(survey.type === "link" ? tabs[0].id : tabs[4].id);
+  const [showView, setShowView] = useState<"start" | "embed" | "panel" | "personal-links">("start");
   const [surveyUrl, setSurveyUrl] = useState("");
 
+  useEffect(() => {
+    const fetchSurveyUrl = async () => {
+      try {
+        const url = await getSurveyUrl(survey, publicDomain, "default");
+        setSurveyUrl(url);
+      } catch (error) {
+        console.error("Failed to fetch survey URL:", error);
+        // Fallback to a default URL if fetching fails
+        setSurveyUrl(`${publicDomain}/s/${survey.id}`);
+      }
+    };
+    fetchSurveyUrl();
+  }, [survey, publicDomain]);
+
   useEffect(() => {
     if (survey.type !== "link") {
-      setActiveId(tabs[3].id);
+      setActiveId(tabs[4].id);
     }
   }, [survey.type, tabs]);
 
@@ -77,7 +101,7 @@ export const ShareEmbedSurvey = ({
   }, [open, modalView]);
 
   const handleOpenChange = (open: boolean) => {
-    setActiveId(survey.type === "link" ? tabs[0].id : tabs[3].id);
+    setActiveId(survey.type === "link" ? tabs[0].id : tabs[4].id);
     setOpen(open);
     if (!open) {
       setShowView("start");
@@ -85,33 +109,30 @@ export const ShareEmbedSurvey = ({
     router.refresh();
   };
 
-  const handleInitialPageButton = () => {
-    setShowView("start");
-  };
-
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogTitle className="sr-only" />
-      <DialogContent className="w-full max-w-xl bg-white p-0 md:max-w-3xl lg:h-[700px] lg:max-w-5xl">
+      <DialogContent className="w-full bg-white p-0 lg:h-[700px]" width="wide">
         {showView === "start" ? (
-          <div className="h-full max-w-full overflow-hidden">
-            <div className="flex h-[200px] w-full flex-col items-center justify-center space-y-6 p-8 text-center lg:h-2/5">
-              <DialogTitle>
-                <p className="pt-2 text-xl font-semibold text-slate-800">
-                  {t("environments.surveys.summary.your_survey_is_public")} 🎉
-                </p>
-              </DialogTitle>
-              <DialogDescription className="hidden" />
-              <ShareSurveyLink
-                survey={survey}
-                surveyUrl={surveyUrl}
-                surveyDomain={surveyDomain}
-                setSurveyUrl={setSurveyUrl}
-                locale={user.locale}
-              />
-            </div>
-            <div className="flex h-[300px] flex-col items-center justify-center gap-8 rounded-b-lg bg-slate-50 px-8 lg:h-3/5">
-              <p className="-mt-8 text-sm text-slate-500">{t("environments.surveys.summary.whats_next")}</p>
+          <div className="flex h-full max-w-full flex-col overflow-hidden">
+            {survey.type === "link" && (
+              <div className="flex h-2/5 w-full flex-col items-center justify-center space-y-6 p-8 text-center">
+                <DialogTitle>
+                  <p className="pt-2 text-xl font-semibold text-slate-800">
+                    {t("environments.surveys.summary.your_survey_is_public")} 🎉
+                  </p>
+                </DialogTitle>
+                <DialogDescription className="hidden" />
+                <ShareSurveyLink
+                  survey={survey}
+                  surveyUrl={surveyUrl}
+                  publicDomain={publicDomain}
+                  setSurveyUrl={setSurveyUrl}
+                  locale={user.locale}
+                />
+              </div>
+            )}
+            <div className="flex h-full flex-col items-center justify-center gap-4 rounded-b-lg bg-slate-50 px-8">
+              <p className="text-sm text-slate-500">{t("environments.surveys.summary.whats_next")}</p>
               <div className="grid grid-cols-4 gap-2">
                 <button
                   type="button"
@@ -149,22 +170,28 @@ export const ShareEmbedSurvey = ({
             </div>
           </div>
         ) : showView === "embed" ? (
-          <EmbedView
-            handleInitialPageButton={handleInitialPageButton}
-            tabs={survey.type === "link" ? tabs : [tabs[3]]}
-            disableBack={false}
-            activeId={activeId}
-            environmentId={environmentId}
-            setActiveId={setActiveId}
-            survey={survey}
-            email={email}
-            surveyUrl={surveyUrl}
-            surveyDomain={surveyDomain}
-            setSurveyUrl={setSurveyUrl}
-            locale={user.locale}
-          />
+          <>
+            <DialogTitle className="sr-only">{t("environments.surveys.summary.embed_survey")}</DialogTitle>
+            <EmbedView
+              tabs={survey.type === "link" ? tabs : [tabs[4]]}
+              activeId={activeId}
+              environmentId={environmentId}
+              setActiveId={setActiveId}
+              survey={survey}
+              email={email}
+              surveyUrl={surveyUrl}
+              publicDomain={publicDomain}
+              setSurveyUrl={setSurveyUrl}
+              locale={user.locale}
+              segments={segments}
+              isContactsEnabled={isContactsEnabled}
+              isFormbricksCloud={isFormbricksCloud}
+            />
+          </>
         ) : showView === "panel" ? (
-          <PanelInfoView handleInitialPageButton={handleInitialPageButton} disableBack={false} />
+          <>
+            <DialogTitle className="sr-only">{t("environments.surveys.summary.send_to_panel")}</DialogTitle>
+          </>
         ) : null}
       </DialogContent>
     </Dialog>

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

@@ -20,9 +20,22 @@ vi.mock("@/modules/ui/components/button", () => ({
   }),
 }));
 
-// Mock Modal
-vi.mock("@/modules/ui/components/modal", () => ({
-  Modal: vi.fn(({ children, open }) => (open ? <div data-testid="modal">{children}</div> : null)),
+// Mock Dialog
+vi.mock("@/modules/ui/components/dialog", () => ({
+  Dialog: vi.fn(({ children, open, onOpenChange }) =>
+    open ? (
+      <div data-testid="dialog" role="dialog">
+        {children}
+        <button onClick={() => onOpenChange(false)}>Close Dialog</button>
+      </div>
+    ) : null
+  ),
+  DialogContent: vi.fn(({ children, ...props }) => (
+    <div data-testid="dialog-content" {...props}>
+      {children}
+    </div>
+  )),
+  DialogBody: vi.fn(({ children }) => <div data-testid="dialog-body">{children}</div>),
 }));
 
 // Mock useTranslate
@@ -120,7 +133,7 @@ describe("ShareSurveyResults", () => {
 
   test("does not render content when modal is closed (open is false)", () => {
     render(<ShareSurveyResults {...defaultProps} open={false} />);
-    expect(screen.queryByTestId("modal")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("dialog")).not.toBeInTheDocument();
     expect(screen.queryByText("environments.surveys.summary.publish_to_web_warning")).not.toBeInTheDocument();
     expect(
       screen.queryByText("environments.surveys.summary.survey_results_are_public")

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { Button } from "@/modules/ui/components/button";
-import { Modal } from "@/modules/ui/components/modal";
+import { Dialog, DialogBody, DialogContent } from "@/modules/ui/components/dialog";
 import { useTranslate } from "@tolgee/react";
 import { AlertCircleIcon, CheckCircle2Icon } from "lucide-react";
 import { Clipboard } from "lucide-react";
@@ -26,70 +26,72 @@ export const ShareSurveyResults = ({
 }: ShareEmbedSurveyProps) => {
   const { t } = useTranslate();
   return (
-    <Modal open={open} setOpen={setOpen} size="lg">
-      {showPublishModal && surveyUrl ? (
-        <div className="flex flex-col rounded-2xl bg-white px-12 py-6">
-          <div className="flex flex-col items-center gap-y-6 text-center">
-            <CheckCircle2Icon className="h-20 w-20 text-slate-300" />
-            <div>
-              <p className="text-lg font-medium text-slate-600">
-                {t("environments.surveys.summary.survey_results_are_public")}
-              </p>
-              <p className="text-balanced mt-2 text-sm text-slate-500">
-                {t("environments.surveys.summary.survey_results_are_shared_with_anyone_who_has_the_link")}
-              </p>
-            </div>
-            <div className="flex gap-2">
-              <div className="whitespace-nowrap rounded-lg border border-slate-300 bg-white px-3 py-2 text-slate-800">
-                <span>{surveyUrl}</span>
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent>
+        <DialogBody>
+          {showPublishModal && surveyUrl ? (
+            <div className="flex flex-col items-center gap-y-6 text-center">
+              <CheckCircle2Icon className="text-primary h-20 w-20" />
+              <div>
+                <p className="text-primary text-lg font-medium">
+                  {t("environments.surveys.summary.survey_results_are_public")}
+                </p>
+                <p className="text-balanced mt-2 text-sm text-slate-500">
+                  {t("environments.surveys.summary.survey_results_are_shared_with_anyone_who_has_the_link")}
+                </p>
+              </div>
+              <div className="flex gap-2">
+                <div className="whitespace-nowrap rounded-lg border border-slate-300 bg-white px-3 py-2 text-slate-800">
+                  <span>{surveyUrl}</span>
+                </div>
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  title="Copy survey link to clipboard"
+                  aria-label="Copy survey link to clipboard"
+                  className="hover:cursor-pointer"
+                  onClick={() => {
+                    navigator.clipboard.writeText(surveyUrl);
+                    toast.success(t("common.link_copied"));
+                  }}>
+                  <Clipboard />
+                </Button>
+              </div>
+              <div className="flex gap-2">
+                <Button
+                  type="submit"
+                  variant="secondary"
+                  className="text-center"
+                  onClick={() => handleUnpublish()}>
+                  {t("environments.surveys.summary.unpublish_from_web")}
+                </Button>
+                <Button className="text-center" asChild>
+                  <Link href={surveyUrl} target="_blank" rel="noopener noreferrer">
+                    {t("environments.surveys.summary.view_site")}
+                  </Link>
+                </Button>
               </div>
-              <Button
-                variant="secondary"
-                size="sm"
-                title="Copy survey link to clipboard"
-                aria-label="Copy survey link to clipboard"
-                className="hover:cursor-pointer"
-                onClick={() => {
-                  navigator.clipboard.writeText(surveyUrl);
-                  toast.success(t("common.link_copied"));
-                }}>
-                <Clipboard />
-              </Button>
             </div>
-            <div className="flex gap-2">
-              <Button
-                type="submit"
-                variant="secondary"
-                className="text-center"
-                onClick={() => handleUnpublish()}>
-                {t("environments.surveys.summary.unpublish_from_web")}
-              </Button>
-              <Button className="text-center" asChild>
-                <Link href={surveyUrl} target="_blank" rel="noopener noreferrer">
-                  {t("environments.surveys.summary.view_site")}
-                </Link>
-              </Button>
+          ) : (
+            <div className="flex flex-col rounded-2xl bg-white p-8">
+              <div className="flex flex-col items-center gap-y-6 text-center">
+                <AlertCircleIcon className="h-20 w-20 text-slate-300" />
+                <div>
+                  <p className="text-lg font-medium text-slate-600">
+                    {t("environments.surveys.summary.publish_to_web_warning")}
+                  </p>
+                  <p className="text-balanced mt-2 text-sm text-slate-500">
+                    {t("environments.surveys.summary.publish_to_web_warning_description")}
+                  </p>
+                </div>
+                <Button type="submit" className="h-full text-center" onClick={() => handlePublish()}>
+                  {t("environments.surveys.summary.publish_to_web")}
+                </Button>
+              </div>
             </div>
-          </div>
-        </div>
-      ) : (
-        <div className="flex flex-col rounded-2xl bg-white p-8">
-          <div className="flex flex-col items-center gap-y-6 text-center">
-            <AlertCircleIcon className="h-20 w-20 text-slate-300" />
-            <div>
-              <p className="text-lg font-medium text-slate-600">
-                {t("environments.surveys.summary.publish_to_web_warning")}
-              </p>
-              <p className="text-balanced mt-2 text-sm text-slate-500">
-                {t("environments.surveys.summary.publish_to_web_warning_description")}
-              </p>
-            </div>
-            <Button type="submit" className="h-full text-center" onClick={() => handlePublish()}>
-              {t("environments.surveys.summary.publish_to_web")}
-            </Button>
-          </div>
-        </div>
-      )}
-    </Modal>
+          )}
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
   );
 };

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

@@ -104,13 +104,15 @@ describe("SummaryDropOffs", () => {
 
     // Check drop-off counts and percentages
     expect(screen.getByText("20")).toBeInTheDocument();
-    expect(screen.getByText("(20%)")).toBeInTheDocument();
-
     expect(screen.getByText("15")).toBeInTheDocument();
-    expect(screen.getByText("(19%)")).toBeInTheDocument(); // 18.75% rounded to 19%
-
     expect(screen.getByText("10")).toBeInTheDocument();
-    expect(screen.getByText("(15%)")).toBeInTheDocument(); // 15.38% rounded to 15%
+
+    // Check percentage values
+    const percentageElements = screen.getAllByText(/\d+%/);
+    expect(percentageElements).toHaveLength(3);
+    expect(percentageElements[0]).toHaveTextContent("20%");
+    expect(percentageElements[1]).toHaveTextContent("19%");
+    expect(percentageElements[2]).toHaveTextContent("15%");
   });
 
   test("renders empty state when dropOff array is empty", () => {

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

@@ -23,9 +23,9 @@ export const SummaryDropOffs = ({ dropOff, survey }: SummaryDropOffsProps) => {
   return (
     <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
       <div className="">
-        <div className="grid h-10 grid-cols-6 items-center border-y border-slate-200 bg-slate-100 text-sm font-semibold text-slate-600">
-          <div className="col-span-3 pl-4 md:pl-6">{t("common.questions")}</div>
-          <div className="flex justify-center">
+        <div className="grid min-h-10 grid-cols-6 items-center rounded-t-xl border-b border-slate-200 bg-slate-100 text-sm font-semibold text-slate-600">
+          <div className="col-span-3 px-4 md:px-6">{t("common.questions")}</div>
+          <div className="flex justify-end px-4 md:px-6">
             <TooltipProvider delayDuration={50}>
               <Tooltip>
                 <TooltipTrigger>
@@ -37,14 +37,16 @@ export const SummaryDropOffs = ({ dropOff, survey }: SummaryDropOffsProps) => {
               </Tooltip>
             </TooltipProvider>
           </div>
-          <div className="px-4 text-center md:px-6">{t("environments.surveys.summary.impressions")}</div>
-          <div className="pr-6 text-center md:pl-6">{t("environments.surveys.summary.drop_offs")}</div>
+          <div className="px-4 text-right md:px-6">{t("environments.surveys.summary.impressions")}</div>
+          <div className="px-4 text-right md:mr-1 md:pl-6 md:pr-6">
+            {t("environments.surveys.summary.drop_offs")}
+          </div>
         </div>
         {dropOff.map((quesDropOff) => (
           <div
             key={quesDropOff.questionId}
-            className="grid grid-cols-6 items-center border-b border-slate-100 py-2 text-sm text-slate-800 md:text-base">
-            <div className="col-span-3 flex gap-3 pl-4 md:pl-6">
+            className="grid grid-cols-6 items-start border-b border-slate-100 text-xs text-slate-800 md:text-sm">
+            <div className="col-span-3 flex gap-3 px-4 py-2 md:px-6">
               {getIcon(quesDropOff.questionType)}
               <p>
                 {formatTextWithSlashes(
@@ -57,17 +59,21 @@ export const SummaryDropOffs = ({ dropOff, survey }: SummaryDropOffsProps) => {
                     "default"
                   )["default"],
                   "@",
-                  ["text-lg"]
+                  ["text-sm"]
                 )}
               </p>
             </div>
-            <div className="whitespace-pre-wrap text-center font-semibold">
+            <div className="whitespace-pre-wrap px-4 py-2 text-right font-mono font-medium md:px-6">
               {quesDropOff.ttc > 0 ? (quesDropOff.ttc / 1000).toFixed(2) + "s" : "N/A"}
             </div>
-            <div className="whitespace-pre-wrap text-center font-semibold">{quesDropOff.impressions}</div>
-            <div className="pl-6 text-center md:px-6">
-              <span className="mr-1.5 font-semibold">{quesDropOff.dropOffCount}</span>
-              <span>({Math.round(quesDropOff.dropOffPercentage)}%)</span>
+            <div className="whitespace-pre-wrap px-4 py-2 text-right font-mono font-medium md:px-6">
+              {quesDropOff.impressions}
+            </div>
+            <div className="px-4 py-2 text-right md:px-6">
+              <span className="mr-1 inline-block w-fit rounded-xl bg-slate-100 px-2 py-1 text-left text-xs">
+                {Math.round(quesDropOff.dropOffPercentage)}%
+              </span>
+              <span className="mr-1 font-mono font-medium">{quesDropOff.dropOffCount}</span>
             </div>
           </div>
         ))}

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { Button } from "@/modules/ui/components/button";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/modules/ui/components/tooltip";
 import { useTranslate } from "@tolgee/react";
 import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
@@ -117,13 +118,13 @@ export const SummaryMetadata = ({
                     )}
                   </span>
                   {!isLoading && (
-                    <span className="ml-1 flex items-center rounded-md bg-slate-800 px-2 py-1 text-xs text-slate-50 group-hover:bg-slate-700">
+                    <Button variant="secondary" className="h-6 w-6">
                       {showDropOffs ? (
                         <ChevronUpIcon className="h-4 w-4" />
                       ) : (
                         <ChevronDownIcon className="h-4 w-4" />
                       )}
-                    </span>
+                    </Button>
                   )}
                 </div>
               </div>

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

@@ -36,7 +36,7 @@ interface SummaryPageProps {
   environment: TEnvironment;
   survey: TSurvey;
   surveyId: string;
-  webAppUrl: string;
+  publicDomain: string;
   locale: TUserLocale;
   isReadOnly: boolean;
   initialSurveySummary?: TSurveySummary;
@@ -46,7 +46,7 @@ export const SummaryPage = ({
   environment,
   survey,
   surveyId,
-  webAppUrl,
+  publicDomain,
   locale,
   isReadOnly,
   initialSurveySummary,
@@ -133,7 +133,7 @@ export const SummaryPage = ({
       <div className="flex gap-1.5">
         <CustomFilter survey={surveyMemoized} />
         {!isReadOnly && !isSharingPage && (
-          <ResultsShareButton survey={surveyMemoized} webAppUrl={webAppUrl} />
+          <ResultsShareButton survey={surveyMemoized} publicDomain={publicDomain} />
         )}
       </div>
       <ScrollToTop containerId="mainContent" />

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

@@ -21,6 +21,8 @@ vi.mock("@/modules/ee/audit-logs/lib/utils", () => ({
   }),
 }));
 
+const mockPublicDomain = "https://public-domain.com";
+
 // Mock constants
 vi.mock("@/lib/constants", () => ({
   IS_FORMBRICKS_CLOUD: false,
@@ -49,6 +51,12 @@ vi.mock("@/lib/constants", () => ({
   REDIS_URL: "mock-url",
 }));
 
+vi.mock("@/lib/env", () => ({
+  env: {
+    PUBLIC_URL: "https://public-domain.com",
+  },
+}));
+
 // Create a spy for refreshSingleUseId so we can override it in tests
 const refreshSingleUseIdSpy = vi.fn(() => Promise.resolve("newSingleUseId"));
 
@@ -61,18 +69,18 @@ vi.mock("@/modules/survey/hooks/useSingleUseId", () => ({
 
 const mockSearchParams = new URLSearchParams();
 const mockPush = vi.fn();
+const mockReplace = vi.fn();
 
 // Mock next/navigation
 vi.mock("next/navigation", () => ({
-  useRouter: () => ({ push: mockPush }),
+  useRouter: () => ({ push: mockPush, replace: mockReplace }),
   useSearchParams: () => mockSearchParams,
-  usePathname: () => "/current",
-  useParams: () => ({ environmentId: "env123", surveyId: "survey123" }),
+  usePathname: () => "/current-path",
 }));
 
 // Mock copySurveyLink to return a predictable string
 vi.mock("@/modules/survey/lib/client-utils", () => ({
-  copySurveyLink: vi.fn((url: string, id: string) => `${url}?id=${id}`),
+  copySurveyLink: vi.fn((url: string, suId: string) => `${url}?suId=${suId}`),
 }));
 
 // Mock the copy survey action
@@ -103,6 +111,10 @@ vi.mock("@/app/share/[sharingKey]/actions", () => ({
   getResponseCountBySurveySharingKeyAction: vi.fn(() => Promise.resolve({ data: 5 })),
 }));
 
+vi.mock("@/lib/getPublicUrl", () => ({
+  getPublicDomain: vi.fn(() => mockPublicDomain),
+}));
+
 vi.spyOn(toast, "success");
 vi.spyOn(toast, "error");
 
@@ -119,283 +131,281 @@ const dummySurvey = {
   id: "survey123",
   type: "link",
   environmentId: "env123",
-  status: "active",
+  status: "inProgress",
+  resultShareKey: null,
 } as unknown as TSurvey;
+
+const dummyAppSurvey = {
+  id: "survey123",
+  type: "app",
+  environmentId: "env123",
+  status: "inProgress",
+} as unknown as TSurvey;
+
 const dummyEnvironment = { id: "env123", appSetupCompleted: true } as TEnvironment;
 const dummyUser = { id: "user123", name: "Test User" } as TUser;
-const surveyDomain = "https://surveys.test.formbricks.com";
 
-describe("SurveyAnalysisCTA - handleCopyLink", () => {
-  afterEach(() => {
-    cleanup();
-  });
-
-  test("calls copySurveyLink and clipboard.writeText on success", async () => {
-    render(
-      <SurveyAnalysisCTA
-        survey={dummySurvey}
-        environment={dummyEnvironment}
-        isReadOnly={false}
-        surveyDomain={surveyDomain}
-        user={dummyUser}
-        responseCount={5}
-      />
-    );
-
-    const copyButton = screen.getByRole("button", { name: "common.copy_link" });
-    fireEvent.click(copyButton);
-
-    await waitFor(() => {
-      expect(refreshSingleUseIdSpy).toHaveBeenCalled();
-      expect(writeTextMock).toHaveBeenCalledWith(
-        "https://surveys.test.formbricks.com/s/survey123?id=newSingleUseId"
-      );
-      expect(toast.success).toHaveBeenCalledWith("common.copied_to_clipboard");
-    });
-  });
-
-  test("shows error toast on failure", async () => {
-    refreshSingleUseIdSpy.mockImplementationOnce(() => Promise.reject(new Error("fail")));
-    render(
-      <SurveyAnalysisCTA
-        survey={dummySurvey}
-        environment={dummyEnvironment}
-        isReadOnly={false}
-        surveyDomain={surveyDomain}
-        user={dummyUser}
-        responseCount={5}
-      />
-    );
-
-    const copyButton = screen.getByRole("button", { name: "common.copy_link" });
-    fireEvent.click(copyButton);
-
-    await waitFor(() => {
-      expect(refreshSingleUseIdSpy).toHaveBeenCalled();
-      expect(writeTextMock).not.toHaveBeenCalled();
-      expect(toast.error).toHaveBeenCalledWith("environments.surveys.summary.failed_to_copy_link");
-    });
-  });
-});
-
-// New tests for squarePenIcon and edit functionality
-describe("SurveyAnalysisCTA - Edit functionality", () => {
+describe("SurveyAnalysisCTA", () => {
   beforeEach(() => {
     vi.resetAllMocks();
+    mockSearchParams.delete("share"); // reset params
   });
 
   afterEach(() => {
     cleanup();
   });
 
-  test("opens EditPublicSurveyAlertDialog when edit icon is clicked and response count > 0", async () => {
-    render(
-      <SurveyAnalysisCTA
-        survey={dummySurvey}
-        environment={dummyEnvironment}
-        isReadOnly={false}
-        surveyDomain={surveyDomain}
-        user={dummyUser}
-        responseCount={5}
-      />
-    );
+  describe("Edit functionality", () => {
+    test("opens EditPublicSurveyAlertDialog when edit icon is clicked and response count > 0", async () => {
+      render(
+        <SurveyAnalysisCTA
+          survey={dummySurvey}
+          environment={dummyEnvironment}
+          isReadOnly={false}
+          publicDomain={mockPublicDomain}
+          user={dummyUser}
+          responseCount={5}
+        />
+      );
 
-    // Find the edit button
-    const editButton = screen.getByRole("button", { name: "common.edit" });
-    await fireEvent.click(editButton);
+      // Find the edit button
+      const editButton = screen.getByRole("button", { name: "common.edit" });
+      await fireEvent.click(editButton);
 
-    // Check if dialog is shown
-    const dialogTitle = screen.getByText("environments.surveys.edit.caution_edit_published_survey");
-    expect(dialogTitle).toBeInTheDocument();
+      // Check if dialog is shown
+      const dialogTitle = screen.getByText("environments.surveys.edit.caution_edit_published_survey");
+      expect(dialogTitle).toBeInTheDocument();
+    });
+
+    test("navigates directly to edit page when response count = 0", async () => {
+      render(
+        <SurveyAnalysisCTA
+          survey={dummySurvey}
+          environment={dummyEnvironment}
+          isReadOnly={false}
+          publicDomain={mockPublicDomain}
+          user={dummyUser}
+          responseCount={0}
+        />
+      );
+
+      // Find the edit button
+      const editButton = screen.getByRole("button", { name: "common.edit" });
+      await fireEvent.click(editButton);
+
+      // Should navigate directly to edit page
+      expect(mockPush).toHaveBeenCalledWith(
+        `/environments/${dummyEnvironment.id}/surveys/${dummySurvey.id}/edit`
+      );
+    });
+
+    test("doesn't show edit button when isReadOnly is true", () => {
+      render(
+        <SurveyAnalysisCTA
+          survey={dummySurvey}
+          environment={dummyEnvironment}
+          isReadOnly={true}
+          publicDomain={mockPublicDomain}
+          user={dummyUser}
+          responseCount={5}
+        />
+      );
+
+      const editButton = screen.queryByRole("button", { name: "common.edit" });
+      expect(editButton).not.toBeInTheDocument();
+    });
   });
 
-  test("navigates directly to edit page when response count = 0", async () => {
-    render(
-      <SurveyAnalysisCTA
-        survey={dummySurvey}
-        environment={dummyEnvironment}
-        isReadOnly={false}
-        surveyDomain={surveyDomain}
-        user={dummyUser}
-        responseCount={0}
-      />
-    );
+  describe("Duplicate functionality", () => {
+    test("duplicates survey and redirects on primary button click", async () => {
+      mockCopySurveyToOtherEnvironmentAction.mockResolvedValue({
+        data: { id: "newSurvey456" },
+      });
 
-    // Find the edit button
-    const editButton = screen.getByRole("button", { name: "common.edit" });
-    await fireEvent.click(editButton);
+      render(
+        <SurveyAnalysisCTA
+          survey={dummySurvey}
+          environment={dummyEnvironment}
+          isReadOnly={false}
+          publicDomain={mockPublicDomain}
+          user={dummyUser}
+          responseCount={5}
+        />
+      );
 
-    // Should navigate directly to edit page
-    expect(mockPush).toHaveBeenCalledWith(
-      `/environments/${dummyEnvironment.id}/surveys/${dummySurvey.id}/edit`
-    );
+      const editButton = screen.getByRole("button", { name: "common.edit" });
+      fireEvent.click(editButton);
+
+      const primaryButton = await screen.findByText("environments.surveys.edit.caution_edit_duplicate");
+      fireEvent.click(primaryButton);
+
+      await waitFor(() => {
+        expect(mockCopySurveyToOtherEnvironmentAction).toHaveBeenCalledWith({
+          environmentId: "env123",
+          surveyId: "survey123",
+          targetEnvironmentId: "env123",
+        });
+        expect(mockPush).toHaveBeenCalledWith("/environments/env123/surveys/newSurvey456/edit");
+        expect(toast.success).toHaveBeenCalledWith("environments.surveys.survey_duplicated_successfully");
+      });
+    });
+
+    test("shows error toast on duplication failure", async () => {
+      const error = { error: "Duplication failed" };
+      mockCopySurveyToOtherEnvironmentAction.mockResolvedValue(error);
+      render(
+        <SurveyAnalysisCTA
+          survey={dummySurvey}
+          environment={dummyEnvironment}
+          isReadOnly={false}
+          publicDomain={mockPublicDomain}
+          user={dummyUser}
+          responseCount={5}
+        />
+      );
+
+      const editButton = screen.getByRole("button", { name: "common.edit" });
+      fireEvent.click(editButton);
+
+      const primaryButton = await screen.findByText("environments.surveys.edit.caution_edit_duplicate");
+      fireEvent.click(primaryButton);
+
+      await waitFor(() => {
+        expect(toast.error).toHaveBeenCalledWith("Duplication failed");
+      });
+    });
   });
 
-  test("doesn't show edit button when isReadOnly is true", () => {
-    render(
-      <SurveyAnalysisCTA
-        survey={dummySurvey}
-        environment={dummyEnvironment}
-        isReadOnly={true}
-        surveyDomain={surveyDomain}
-        user={dummyUser}
-        responseCount={5}
-      />
-    );
+  describe("Share button and modal", () => {
+    test("opens share modal when 'Share survey' button is clicked", async () => {
+      render(
+        <SurveyAnalysisCTA
+          survey={dummySurvey}
+          environment={dummyEnvironment}
+          isReadOnly={false}
+          publicDomain={mockPublicDomain}
+          user={dummyUser}
+          responseCount={5}
+        />
+      );
 
-    // Try to find the edit button (it shouldn't exist)
-    const editButton = screen.queryByRole("button", { name: "common.edit" });
-    expect(editButton).not.toBeInTheDocument();
-  });
-});
+      const shareButton = screen.getByText("environments.surveys.summary.share_survey");
+      fireEvent.click(shareButton);
 
-// Updated test description to mention EditPublicSurveyAlertDialog
-describe("SurveyAnalysisCTA - duplicateSurveyAndRoute and EditPublicSurveyAlertDialog", () => {
-  afterEach(() => {
-    cleanup();
+      // The share button opens the embed modal, not a URL
+      // We can verify this by checking that the ShareEmbedSurvey component is rendered
+      // with the embed modal open
+      expect(screen.getByText("environments.surveys.summary.share_survey")).toBeInTheDocument();
+    });
+
+    test("renders ShareEmbedSurvey component when share modal is open", async () => {
+      mockSearchParams.set("share", "true");
+      render(
+        <SurveyAnalysisCTA
+          survey={dummySurvey}
+          environment={dummyEnvironment}
+          isReadOnly={false}
+          publicDomain={mockPublicDomain}
+          user={dummyUser}
+          responseCount={5}
+        />
+      );
+
+      // Assuming ShareEmbedSurvey renders a dialog with a specific title when open
+      const dialog = await screen.findByRole("dialog");
+      expect(dialog).toBeInTheDocument();
+    });
   });
 
-  test("duplicates survey successfully and navigates to edit page", async () => {
-    // Mock the API response
-    mockCopySurveyToOtherEnvironmentAction.mockResolvedValueOnce({
-      data: { id: "duplicated-survey-456" },
+  describe("General UI and visibility", () => {
+    test("shows public results badge when resultShareKey is present", () => {
+      const surveyWithShareKey = { ...dummySurvey, resultShareKey: "someKey" } as TSurvey;
+      render(
+        <SurveyAnalysisCTA
+          survey={surveyWithShareKey}
+          environment={dummyEnvironment}
+          isReadOnly={false}
+          publicDomain={mockPublicDomain}
+          user={dummyUser}
+          responseCount={5}
+        />
+      );
+
+      expect(screen.getByText("environments.surveys.summary.results_are_public")).toBeInTheDocument();
     });
 
-    render(
-      <SurveyAnalysisCTA
-        survey={dummySurvey}
-        environment={dummyEnvironment}
-        isReadOnly={false}
-        surveyDomain={surveyDomain}
-        user={dummyUser}
-        responseCount={5}
-      />
-    );
+    test("shows SurveyStatusDropdown for non-draft surveys", () => {
+      render(
+        <SurveyAnalysisCTA
+          survey={dummySurvey}
+          environment={dummyEnvironment}
+          isReadOnly={false}
+          publicDomain={mockPublicDomain}
+          user={dummyUser}
+          responseCount={5}
+        />
+      );
 
-    // Find and click the edit button to show dialog
-    const editButton = screen.getByRole("button", { name: "common.edit" });
-    await fireEvent.click(editButton);
-
-    // Find and click the duplicate button in dialog
-    const duplicateButton = screen.getByRole("button", {
-      name: "environments.surveys.edit.caution_edit_duplicate",
-    });
-    await fireEvent.click(duplicateButton);
-
-    // Verify the API was called with correct parameters
-    expect(mockCopySurveyToOtherEnvironmentAction).toHaveBeenCalledWith({
-      environmentId: dummyEnvironment.id,
-      surveyId: dummySurvey.id,
-      targetEnvironmentId: dummyEnvironment.id,
+      expect(screen.getByRole("combobox")).toBeInTheDocument();
     });
 
-    // Verify success toast was shown
-    expect(toast.success).toHaveBeenCalledWith("environments.surveys.survey_duplicated_successfully");
-
-    // Verify navigation to edit page
-    expect(mockPush).toHaveBeenCalledWith(
-      `/environments/${dummyEnvironment.id}/surveys/duplicated-survey-456/edit`
-    );
-  });
-
-  test("shows error toast when duplication fails with error object", async () => {
-    // Mock API failure with error object
-    mockCopySurveyToOtherEnvironmentAction.mockResolvedValueOnce({
-      error: "Test error message",
+    test("does not show SurveyStatusDropdown for draft surveys", () => {
+      const draftSurvey = { ...dummySurvey, status: "draft" } as TSurvey;
+      render(
+        <SurveyAnalysisCTA
+          survey={draftSurvey}
+          environment={dummyEnvironment}
+          isReadOnly={false}
+          publicDomain={mockPublicDomain}
+          user={dummyUser}
+          responseCount={5}
+        />
+      );
+      expect(screen.queryByRole("combobox")).not.toBeInTheDocument();
     });
 
-    render(
-      <SurveyAnalysisCTA
-        survey={dummySurvey}
-        environment={dummyEnvironment}
-        isReadOnly={false}
-        surveyDomain={surveyDomain}
-        user={dummyUser}
-        responseCount={5}
-      />
-    );
+    test("hides status dropdown and edit actions when isReadOnly is true", () => {
+      render(
+        <SurveyAnalysisCTA
+          survey={dummySurvey}
+          environment={dummyEnvironment}
+          isReadOnly={true}
+          publicDomain={mockPublicDomain}
+          user={dummyUser}
+          responseCount={5}
+        />
+      );
 
-    // Open dialog
-    const editButton = screen.getByRole("button", { name: "common.edit" });
-    await fireEvent.click(editButton);
-
-    // Click duplicate
-    const duplicateButton = screen.getByRole("button", {
-      name: "environments.surveys.edit.caution_edit_duplicate",
-    });
-    await fireEvent.click(duplicateButton);
-
-    // Verify error toast
-    expect(toast.error).toHaveBeenCalledWith("Test error message");
-  });
-
-  test("navigates to edit page when cancel button is clicked in dialog", async () => {
-    render(
-      <SurveyAnalysisCTA
-        survey={dummySurvey}
-        environment={dummyEnvironment}
-        isReadOnly={false}
-        surveyDomain={surveyDomain}
-        user={dummyUser}
-        responseCount={5}
-      />
-    );
-
-    // Open dialog
-    const editButton = screen.getByRole("button", { name: "common.edit" });
-    await fireEvent.click(editButton);
-
-    // Click edit (cancel) button
-    const editButtonInDialog = screen.getByRole("button", { name: "common.edit" });
-    await fireEvent.click(editButtonInDialog);
-
-    // Verify navigation
-    expect(mockPush).toHaveBeenCalledWith(
-      `/environments/${dummyEnvironment.id}/surveys/${dummySurvey.id}/edit`
-    );
-  });
-
-  test("shows loading state when duplicating survey", async () => {
-    // Create a promise that we can resolve manually
-    let resolvePromise: (value: any) => void;
-    const promise = new Promise((resolve) => {
-      resolvePromise = resolve;
+      expect(screen.queryByRole("combobox")).not.toBeInTheDocument();
+      expect(screen.queryByRole("button", { name: "common.edit" })).not.toBeInTheDocument();
     });
 
-    mockCopySurveyToOtherEnvironmentAction.mockImplementation(() => promise);
-
-    render(
-      <SurveyAnalysisCTA
-        survey={dummySurvey}
-        environment={dummyEnvironment}
-        isReadOnly={false}
-        surveyDomain={surveyDomain}
-        user={dummyUser}
-        responseCount={5}
-      />
-    );
-
-    // Open dialog
-    const editButton = screen.getByRole("button", { name: "common.edit" });
-    await fireEvent.click(editButton);
-
-    // Click duplicate
-    const duplicateButton = screen.getByRole("button", {
-      name: "environments.surveys.edit.caution_edit_duplicate",
-    });
-    await fireEvent.click(duplicateButton);
-
-    // Button should now be in loading state
-    // expect(duplicateButton).toHaveAttribute("data-state", "loading");
-
-    // Resolve the promise
-    resolvePromise!({
-      data: { id: "duplicated-survey-456" },
+    test("shows preview button for link surveys", () => {
+      render(
+        <SurveyAnalysisCTA
+          survey={dummySurvey}
+          environment={dummyEnvironment}
+          isReadOnly={false}
+          publicDomain={mockPublicDomain}
+          user={dummyUser}
+          responseCount={5}
+        />
+      );
+      expect(screen.getByRole("button", { name: "common.preview" })).toBeInTheDocument();
     });
 
-    // Wait for the promise to resolve
-    await waitFor(() => {
-      expect(mockPush).toHaveBeenCalled();
+    test("hides preview button for app surveys", () => {
+      render(
+        <SurveyAnalysisCTA
+          survey={dummyAppSurvey}
+          environment={dummyEnvironment}
+          isReadOnly={false}
+          publicDomain={mockPublicDomain}
+          user={dummyUser}
+          responseCount={5}
+        />
+      );
+      expect(screen.queryByRole("button", { name: "common.preview" })).not.toBeInTheDocument();
     });
   });
 });

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

@@ -5,17 +5,17 @@ import { SuccessMessage } from "@/app/(app)/environments/[environmentId]/surveys
 import { SurveyStatusDropdown } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/SurveyStatusDropdown";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { EditPublicSurveyAlertDialog } from "@/modules/survey/components/edit-public-survey-alert-dialog";
-import { useSingleUseId } from "@/modules/survey/hooks/useSingleUseId";
-import { copySurveyLink } from "@/modules/survey/lib/client-utils";
 import { copySurveyToOtherEnvironmentAction } from "@/modules/survey/list/actions";
 import { Badge } from "@/modules/ui/components/badge";
+import { Button } from "@/modules/ui/components/button";
 import { IconBar } from "@/modules/ui/components/iconbar";
 import { useTranslate } from "@tolgee/react";
-import { BellRing, Code2Icon, Eye, LinkIcon, SquarePenIcon, UsersRound } from "lucide-react";
+import { BellRing, Eye, SquarePenIcon } from "lucide-react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useEffect, useMemo, useState } from "react";
 import toast from "react-hot-toast";
 import { TEnvironment } from "@formbricks/types/environment";
+import { TSegment } from "@formbricks/types/segment";
 import { TSurvey } from "@formbricks/types/surveys/types";
 import { TUser } from "@formbricks/types/user";
 
@@ -24,8 +24,11 @@ interface SurveyAnalysisCTAProps {
   environment: TEnvironment;
   isReadOnly: boolean;
   user: TUser;
-  surveyDomain: string;
+  publicDomain: string;
   responseCount: number;
+  segments: TSegment[];
+  isContactsEnabled: boolean;
+  isFormbricksCloud: boolean;
 }
 
 interface ModalState {
@@ -40,8 +43,11 @@ export const SurveyAnalysisCTA = ({
   environment,
   isReadOnly,
   user,
-  surveyDomain,
+  publicDomain,
   responseCount,
+  segments,
+  isContactsEnabled,
+  isFormbricksCloud,
 }: SurveyAnalysisCTAProps) => {
   const { t } = useTranslate();
   const searchParams = useSearchParams();
@@ -56,8 +62,7 @@ export const SurveyAnalysisCTA = ({
     dropdown: false,
   });
 
-  const surveyUrl = useMemo(() => `${surveyDomain}/s/${survey.id}`, [survey.id, surveyDomain]);
-  const { refreshSingleUseId } = useSingleUseId(survey);
+  const surveyUrl = useMemo(() => `${publicDomain}/s/${survey.id}`, [survey.id, publicDomain]);
 
   const widgetSetupCompleted = survey.type === "app" && environment.appSetupCompleted;
 
@@ -79,22 +84,6 @@ export const SurveyAnalysisCTA = ({
     setModalState((prev) => ({ ...prev, share: open }));
   };
 
-  const handleCopyLink = () => {
-    refreshSingleUseId()
-      .then((newId) => {
-        const linkToCopy = copySurveyLink(surveyUrl, newId);
-        return navigator.clipboard.writeText(linkToCopy);
-      })
-      .then(() => {
-        toast.success(t("common.copied_to_clipboard"));
-      })
-      .catch((err) => {
-        toast.error(t("environments.surveys.summary.failed_to_copy_link"));
-        console.error(err);
-      });
-    setModalState((prev) => ({ ...prev, dropdown: false }));
-  };
-
   const duplicateSurveyAndRoute = async (surveyId: string) => {
     setLoading(true);
     const duplicatedSurveyResponse = await copySurveyToOtherEnvironmentAction({
@@ -134,24 +123,6 @@ export const SurveyAnalysisCTA = ({
   const [isCautionDialogOpen, setIsCautionDialogOpen] = useState(false);
 
   const iconActions = [
-    {
-      icon: Eye,
-      tooltip: t("common.preview"),
-      onClick: () => window.open(getPreviewUrl(), "_blank"),
-      isVisible: survey.type === "link",
-    },
-    {
-      icon: LinkIcon,
-      tooltip: t("common.copy_link"),
-      onClick: handleCopyLink,
-      isVisible: survey.type === "link",
-    },
-    {
-      icon: Code2Icon,
-      tooltip: t("common.embed"),
-      onClick: () => handleModalState("embed")(true),
-      isVisible: !isReadOnly,
-    },
     {
       icon: BellRing,
       tooltip: t("environments.surveys.summary.configure_alerts"),
@@ -159,13 +130,10 @@ export const SurveyAnalysisCTA = ({
       isVisible: !isReadOnly,
     },
     {
-      icon: UsersRound,
-      tooltip: t("environments.surveys.summary.send_to_panel"),
-      onClick: () => {
-        handleModalState("panel")(true);
-        setModalState((prev) => ({ ...prev, dropdown: false }));
-      },
-      isVisible: !isReadOnly,
+      icon: Eye,
+      tooltip: t("common.preview"),
+      onClick: () => window.open(getPreviewUrl(), "_blank"),
+      isVisible: survey.type === "link",
     },
     {
       icon: SquarePenIcon,
@@ -195,6 +163,13 @@ export const SurveyAnalysisCTA = ({
       )}
 
       <IconBar actions={iconActions} />
+      <Button
+        className="h-10"
+        onClick={() => {
+          setModalState((prev) => ({ ...prev, embed: true }));
+        }}>
+        {t("environments.surveys.summary.share_survey")}
+      </Button>
 
       {user && (
         <>
@@ -202,11 +177,14 @@ export const SurveyAnalysisCTA = ({
             <ShareEmbedSurvey
               key={key}
               survey={survey}
-              surveyDomain={surveyDomain}
+              publicDomain={publicDomain}
               open={modalState[key as keyof ModalState]}
               setOpen={setOpen}
               user={user}
               modalView={modalView}
+              segments={segments}
+              isContactsEnabled={isContactsEnabled}
+              isFormbricksCloud={isFormbricksCloud}
             />
           ))}
           <SuccessMessage environment={environment} survey={survey} />

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

@@ -29,6 +29,22 @@ vi.mock("./WebsiteTab", () => ({
   ),
 }));
 
+vi.mock("./personal-links-tab", () => ({
+  PersonalLinksTab: (props: { segments: any[]; surveyId: string; environmentId: string }) => (
+    <div data-testid="personal-links-tab">
+      PersonalLinksTab Content for {props.surveyId} in {props.environmentId}
+    </div>
+  ),
+}));
+
+vi.mock("@/modules/ui/components/upgrade-prompt", () => ({
+  UpgradePrompt: (props: { title: string; description: string; buttons: any[] }) => (
+    <div data-testid="upgrade-prompt">
+      {props.title} - {props.description}
+    </div>
+  ),
+}));
+
 // Mock @tolgee/react
 vi.mock("@tolgee/react", () => ({
   useTranslate: () => ({
@@ -43,6 +59,21 @@ vi.mock("lucide-react", () => ({
   LinkIcon: () => <div data-testid="link-icon">LinkIcon</div>,
   GlobeIcon: () => <div data-testid="globe-icon">GlobeIcon</div>,
   SmartphoneIcon: () => <div data-testid="smartphone-icon">SmartphoneIcon</div>,
+  AlertCircle: ({ className }: { className?: string }) => (
+    <div className={className} data-testid="alert-circle">
+      AlertCircle
+    </div>
+  ),
+  AlertTriangle: ({ className }: { className?: string }) => (
+    <div className={className} data-testid="alert-triangle">
+      AlertTriangle
+    </div>
+  ),
+  Info: ({ className }: { className?: string }) => (
+    <div className={className} data-testid="info">
+      Info
+    </div>
+  ),
 }));
 
 const mockTabs = [
@@ -56,7 +87,6 @@ const mockSurveyLink = { id: "survey1", type: "link" };
 const mockSurveyWeb = { id: "survey2", type: "web" };
 
 const defaultProps = {
-  handleInitialPageButton: vi.fn(),
   tabs: mockTabs,
   activeId: "email",
   setActiveId: vi.fn(),
@@ -64,10 +94,12 @@ const defaultProps = {
   survey: mockSurveyLink,
   email: "test@example.com",
   surveyUrl: "http://example.com/survey1",
-  surveyDomain: "http://example.com",
+  publicDomain: "http://example.com",
   setSurveyUrl: vi.fn(),
   locale: "en" as any,
-  disableBack: false,
+  segments: [],
+  isContactsEnabled: true,
+  isFormbricksCloud: false,
 };
 
 describe("EmbedView", () => {
@@ -76,11 +108,6 @@ describe("EmbedView", () => {
     vi.clearAllMocks();
   });
 
-  test("does not render back button when disableBack is true", () => {
-    render(<EmbedView {...defaultProps} disableBack={true} />);
-    expect(screen.queryByRole("button", { name: "common.back" })).not.toBeInTheDocument();
-  });
-
   test("does not render desktop tabs for non-link survey type", () => {
     render(<EmbedView {...defaultProps} survey={mockSurveyWeb} />);
     // Desktop tabs container should not be present or not have lg:flex if it's a common parent

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

@@ -2,54 +2,80 @@
 
 import { cn } from "@/lib/cn";
 import { Button } from "@/modules/ui/components/button";
-import { useTranslate } from "@tolgee/react";
-import { ArrowLeftIcon } from "lucide-react";
+import { TSegment } from "@formbricks/types/segment";
 import { TUserLocale } from "@formbricks/types/user";
 import { AppTab } from "./AppTab";
 import { EmailTab } from "./EmailTab";
 import { LinkTab } from "./LinkTab";
 import { WebsiteTab } from "./WebsiteTab";
+import { PersonalLinksTab } from "./personal-links-tab";
 
 interface EmbedViewProps {
-  handleInitialPageButton: () => void;
   tabs: Array<{ id: string; label: string; icon: any }>;
   activeId: string;
   setActiveId: React.Dispatch<React.SetStateAction<string>>;
   environmentId: string;
-  disableBack: boolean;
   survey: any;
   email: string;
   surveyUrl: string;
-  surveyDomain: string;
+  publicDomain: string;
   setSurveyUrl: React.Dispatch<React.SetStateAction<string>>;
   locale: TUserLocale;
+  segments: TSegment[];
+  isContactsEnabled: boolean;
+  isFormbricksCloud: boolean;
 }
 
 export const EmbedView = ({
-  handleInitialPageButton,
   tabs,
-  disableBack,
   activeId,
   setActiveId,
   environmentId,
   survey,
   email,
   surveyUrl,
-  surveyDomain,
+  publicDomain,
   setSurveyUrl,
   locale,
+  segments,
+  isContactsEnabled,
+  isFormbricksCloud,
 }: EmbedViewProps) => {
-  const { t } = useTranslate();
+  const renderActiveTab = () => {
+    switch (activeId) {
+      case "email":
+        return <EmailTab surveyId={survey.id} email={email} />;
+      case "webpage":
+        return <WebsiteTab surveyUrl={surveyUrl} environmentId={environmentId} />;
+      case "link":
+        return (
+          <LinkTab
+            survey={survey}
+            surveyUrl={surveyUrl}
+            publicDomain={publicDomain}
+            setSurveyUrl={setSurveyUrl}
+            locale={locale}
+          />
+        );
+      case "app":
+        return <AppTab />;
+      case "personal-links":
+        return (
+          <PersonalLinksTab
+            segments={segments}
+            surveyId={survey.id}
+            environmentId={environmentId}
+            isContactsEnabled={isContactsEnabled}
+            isFormbricksCloud={isFormbricksCloud}
+          />
+        );
+      default:
+        return null;
+    }
+  };
+
   return (
     <div className="h-full overflow-hidden">
-      {!disableBack && (
-        <div className="border-b border-slate-200 py-2 pl-2">
-          <Button variant="ghost" className="focus:ring-0" onClick={handleInitialPageButton}>
-            <ArrowLeftIcon />
-            {t("common.back")}
-          </Button>
-        </div>
-      )}
       <div className="grid h-full grid-cols-4">
         {survey.type === "link" && (
           <div className={cn("col-span-1 hidden flex-col gap-3 border-r border-slate-200 p-4 lg:flex")}>
@@ -75,21 +101,7 @@ export const EmbedView = ({
         )}
         <div
           className={`col-span-4 h-full overflow-y-auto bg-slate-50 px-4 py-6 ${survey.type === "link" ? "lg:col-span-3" : ""} lg:p-6`}>
-          {activeId === "email" ? (
-            <EmailTab surveyId={survey.id} email={email} />
-          ) : activeId === "webpage" ? (
-            <WebsiteTab surveyUrl={surveyUrl} environmentId={environmentId} />
-          ) : activeId === "link" ? (
-            <LinkTab
-              survey={survey}
-              surveyUrl={surveyUrl}
-              surveyDomain={surveyDomain}
-              setSurveyUrl={setSurveyUrl}
-              locale={locale}
-            />
-          ) : activeId === "app" ? (
-            <AppTab />
-          ) : null}
+          {renderActiveTab()}
           <div className="mt-2 rounded-md p-3 text-center lg:hidden">
             {tabs.slice(0, 2).map((tab) => (
               <Button

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

@@ -6,12 +6,12 @@ import { LinkTab } from "./LinkTab";
 
 // Mock ShareSurveyLink
 vi.mock("@/modules/analysis/components/ShareSurveyLink", () => ({
-  ShareSurveyLink: vi.fn(({ survey, surveyUrl, surveyDomain, locale }) => (
+  ShareSurveyLink: vi.fn(({ survey, surveyUrl, publicDomain, locale }) => (
     <div data-testid="share-survey-link">
       Mocked ShareSurveyLink
       <span data-testid="survey-id">{survey.id}</span>
       <span data-testid="survey-url">{surveyUrl}</span>
-      <span data-testid="survey-domain">{surveyDomain}</span>
+      <span data-testid="public-domain">{publicDomain}</span>
       <span data-testid="locale">{locale}</span>
     </div>
   )),
@@ -49,7 +49,7 @@ const mockSurvey: TSurvey = {
 } as unknown as TSurvey;
 
 const mockSurveyUrl = "https://app.formbricks.com/s/survey1";
-const mockSurveyDomain = "https://app.formbricks.com";
+const mockPublicDomain = "https://app.formbricks.com";
 const mockSetSurveyUrl = vi.fn();
 const mockLocale: TUserLocale = "en-US";
 
@@ -82,7 +82,7 @@ describe("LinkTab", () => {
       <LinkTab
         survey={mockSurvey}
         surveyUrl={mockSurveyUrl}
-        surveyDomain={mockSurveyDomain}
+        publicDomain={mockPublicDomain}
         setSurveyUrl={mockSetSurveyUrl}
         locale={mockLocale}
       />
@@ -97,7 +97,7 @@ describe("LinkTab", () => {
       <LinkTab
         survey={mockSurvey}
         surveyUrl={mockSurveyUrl}
-        surveyDomain={mockSurveyDomain}
+        publicDomain={mockPublicDomain}
         setSurveyUrl={mockSetSurveyUrl}
         locale={mockLocale}
       />
@@ -105,7 +105,7 @@ describe("LinkTab", () => {
     expect(screen.getByTestId("share-survey-link")).toBeInTheDocument();
     expect(screen.getByTestId("survey-id")).toHaveTextContent(mockSurvey.id);
     expect(screen.getByTestId("survey-url")).toHaveTextContent(mockSurveyUrl);
-    expect(screen.getByTestId("survey-domain")).toHaveTextContent(mockSurveyDomain);
+    expect(screen.getByTestId("public-domain")).toHaveTextContent(mockPublicDomain);
     expect(screen.getByTestId("locale")).toHaveTextContent(mockLocale);
   });
 
@@ -114,7 +114,7 @@ describe("LinkTab", () => {
       <LinkTab
         survey={mockSurvey}
         surveyUrl={mockSurveyUrl}
-        surveyDomain={mockSurveyDomain}
+        publicDomain={mockPublicDomain}
         setSurveyUrl={mockSetSurveyUrl}
         locale={mockLocale}
       />
@@ -129,7 +129,7 @@ describe("LinkTab", () => {
       <LinkTab
         survey={mockSurvey}
         surveyUrl={mockSurveyUrl}
-        surveyDomain={mockSurveyDomain}
+        publicDomain={mockPublicDomain}
         setSurveyUrl={mockSetSurveyUrl}
         locale={mockLocale}
       />

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

@@ -9,12 +9,12 @@ import { TUserLocale } from "@formbricks/types/user";
 interface LinkTabProps {
   survey: TSurvey;
   surveyUrl: string;
-  surveyDomain: string;
+  publicDomain: string;
   setSurveyUrl: (url: string) => void;
   locale: TUserLocale;
 }
 
-export const LinkTab = ({ survey, surveyUrl, surveyDomain, setSurveyUrl, locale }: LinkTabProps) => {
+export const LinkTab = ({ survey, surveyUrl, publicDomain, setSurveyUrl, locale }: LinkTabProps) => {
   const { t } = useTranslate();
 
   const docsLinks = [
@@ -44,7 +44,7 @@ export const LinkTab = ({ survey, surveyUrl, surveyDomain, setSurveyUrl, locale
         <ShareSurveyLink
           survey={survey}
           surveyUrl={surveyUrl}
-          surveyDomain={surveyDomain}
+          publicDomain={publicDomain}
           setSurveyUrl={setSurveyUrl}
           locale={locale}
         />

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

@@ -1,108 +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 { PanelInfoView } from "./PanelInfoView";
-
-// Mock next/image
-vi.mock("next/image", () => ({
-  default: ({ src, alt, className }: { src: any; alt: string; className?: string }) => (
-    // eslint-disable-next-line @next/next/no-img-element
-    <img src={src.src} alt={alt} className={className} />
-  ),
-}));
-
-// Mock next/link
-vi.mock("next/link", () => ({
-  default: ({ children, href, target }: { children: React.ReactNode; href: string; target?: string }) => (
-    <a href={href} target={target}>
-      {children}
-    </a>
-  ),
-}));
-
-// Mock Button component
-vi.mock("@/modules/ui/components/button", () => ({
-  Button: ({ children, onClick, variant, asChild }: any) => {
-    if (asChild) {
-      return <div onClick={onClick}>{children}</div>; // NOSONAR
-    }
-    return (
-      <button onClick={onClick} data-variant={variant}>
-        {children}
-      </button>
-    );
-  },
-}));
-
-// Mock lucide-react
-vi.mock("lucide-react", () => ({
-  ArrowLeftIcon: vi.fn(() => <div data-testid="arrow-left-icon">ArrowLeftIcon</div>),
-}));
-
-const mockHandleInitialPageButton = vi.fn();
-
-describe("PanelInfoView", () => {
-  afterEach(() => {
-    cleanup();
-    vi.clearAllMocks();
-  });
-
-  test("renders correctly with back button and all sections", async () => {
-    render(<PanelInfoView disableBack={false} handleInitialPageButton={mockHandleInitialPageButton} />);
-
-    // Check for back button
-    const backButton = screen.getByText("common.back");
-    expect(backButton).toBeInTheDocument();
-    expect(screen.getByTestId("arrow-left-icon")).toBeInTheDocument();
-
-    // Check images
-    expect(screen.getAllByAltText("Prolific panel selection UI")[0]).toBeInTheDocument();
-    expect(screen.getAllByAltText("Prolific panel selection UI")[1]).toBeInTheDocument();
-
-    // Check text content (Tolgee keys)
-    expect(screen.getByText("environments.surveys.summary.what_is_a_panel")).toBeInTheDocument();
-    expect(screen.getByText("environments.surveys.summary.what_is_a_panel_answer")).toBeInTheDocument();
-    expect(screen.getByText("environments.surveys.summary.when_do_i_need_it")).toBeInTheDocument();
-    expect(screen.getByText("environments.surveys.summary.when_do_i_need_it_answer")).toBeInTheDocument();
-    expect(screen.getByText("environments.surveys.summary.what_is_prolific")).toBeInTheDocument();
-    expect(screen.getByText("environments.surveys.summary.what_is_prolific_answer")).toBeInTheDocument();
-
-    expect(screen.getByText("environments.surveys.summary.how_to_create_a_panel")).toBeInTheDocument();
-    expect(screen.getByText("environments.surveys.summary.how_to_create_a_panel_step_1")).toBeInTheDocument();
-    expect(
-      screen.getByText("environments.surveys.summary.how_to_create_a_panel_step_1_description")
-    ).toBeInTheDocument();
-    expect(screen.getByText("environments.surveys.summary.how_to_create_a_panel_step_2")).toBeInTheDocument();
-    expect(
-      screen.getByText("environments.surveys.summary.how_to_create_a_panel_step_2_description")
-    ).toBeInTheDocument();
-    expect(screen.getByText("environments.surveys.summary.how_to_create_a_panel_step_3")).toBeInTheDocument();
-    expect(
-      screen.getByText("environments.surveys.summary.how_to_create_a_panel_step_3_description")
-    ).toBeInTheDocument();
-    expect(screen.getByText("environments.surveys.summary.how_to_create_a_panel_step_4")).toBeInTheDocument();
-    expect(
-      screen.getByText("environments.surveys.summary.how_to_create_a_panel_step_4_description")
-    ).toBeInTheDocument();
-
-    // Check "Learn more" link
-    const learnMoreLink = screen.getByRole("link", { name: "common.learn_more" });
-    expect(learnMoreLink).toBeInTheDocument();
-    expect(learnMoreLink).toHaveAttribute(
-      "href",
-      "https://formbricks.com/docs/xm-and-surveys/surveys/link-surveys/market-research-panel"
-    );
-    expect(learnMoreLink).toHaveAttribute("target", "_blank");
-
-    // Click back button
-    await userEvent.click(backButton);
-    expect(mockHandleInitialPageButton).toHaveBeenCalledTimes(1);
-  });
-
-  test("renders correctly without back button when disableBack is true", () => {
-    render(<PanelInfoView disableBack={true} handleInitialPageButton={mockHandleInitialPageButton} />);
-
-    expect(screen.queryByRole("button", { name: "common.back" })).not.toBeInTheDocument();
-    expect(screen.queryByTestId("arrow-left-icon")).not.toBeInTheDocument();
-  });
-});

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

@@ -1,98 +0,0 @@
-"use client";
-
-import ProlificLogo from "@/images/prolific-logo.webp";
-import ProlificUI from "@/images/prolific-screenshot.webp";
-import { Button } from "@/modules/ui/components/button";
-import { useTranslate } from "@tolgee/react";
-import { ArrowLeftIcon } from "lucide-react";
-import Image from "next/image";
-import Link from "next/link";
-
-interface PanelInfoViewProps {
-  disableBack: boolean;
-  handleInitialPageButton: () => void;
-}
-
-export const PanelInfoView = ({ disableBack, handleInitialPageButton }: PanelInfoViewProps) => {
-  const { t } = useTranslate();
-  return (
-    <div className="h-full overflow-hidden text-slate-900">
-      {!disableBack && (
-        <div className="border-b border-slate-200 py-2">
-          <Button variant="ghost" onClick={handleInitialPageButton}>
-            <ArrowLeftIcon />
-            {t("common.back")}
-          </Button>
-        </div>
-      )}
-      <div className="grid h-full grid-cols-2">
-        <div className="flex flex-col gap-y-6 border-r border-slate-200 p-8">
-          <Image src={ProlificUI} alt="Prolific panel selection UI" className="rounded-lg shadow-lg" />
-          <div>
-            <p className="text-md font-semibold">{t("environments.surveys.summary.what_is_a_panel")}</p>
-            <p className="text-slate-600">{t("environments.surveys.summary.what_is_a_panel_answer")}</p>
-          </div>
-          <div>
-            <p className="text-md font-semibold">{t("environments.surveys.summary.when_do_i_need_it")}</p>
-            <p className="text-slate-600">{t("environments.surveys.summary.when_do_i_need_it_answer")}</p>
-          </div>
-          <div>
-            <p className="text-md font-semibold">{t("environments.surveys.summary.what_is_prolific")}</p>
-            <p className="text-slate-600">{t("environments.surveys.summary.what_is_prolific_answer")}</p>
-          </div>
-        </div>
-        <div className="relative flex flex-col gap-y-6 bg-slate-50 p-8">
-          <Image
-            src={ProlificLogo}
-            alt="Prolific panel selection UI"
-            className="absolute right-8 top-8 w-32"
-          />
-          <div>
-            <h3 className="text-xl font-semibold">
-              {t("environments.surveys.summary.how_to_create_a_panel")}
-            </h3>
-          </div>
-          <div>
-            <p className="text-md font-semibold">
-              {t("environments.surveys.summary.how_to_create_a_panel_step_1")}
-            </p>
-            <p className="text-slate-600">
-              {t("environments.surveys.summary.how_to_create_a_panel_step_1_description")}
-            </p>
-          </div>
-          <div>
-            <p className="text-md font-semibold">
-              {t("environments.surveys.summary.how_to_create_a_panel_step_2")}
-            </p>
-            <p className="text-slate-600">
-              {t("environments.surveys.summary.how_to_create_a_panel_step_2_description")}
-            </p>
-          </div>
-          <div>
-            <p className="text-md font-semibold">
-              {t("environments.surveys.summary.how_to_create_a_panel_step_3")}
-            </p>
-            <p className="text-slate-600">
-              {t("environments.surveys.summary.how_to_create_a_panel_step_3_description")}
-            </p>
-          </div>
-          <div>
-            <p className="text-md font-semibold">
-              {t("environments.surveys.summary.how_to_create_a_panel_step_4")}
-            </p>
-            <p className="text-slate-600">
-              {t("environments.surveys.summary.how_to_create_a_panel_step_4_description")}
-            </p>
-          </div>
-          <Button className="justify-center" asChild>
-            <Link
-              href="https://formbricks.com/docs/xm-and-surveys/surveys/link-surveys/market-research-panel"
-              target="_blank">
-              {t("common.learn_more")}
-            </Link>
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-};

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/personal-links-tab.test.tsx

@@ -0,0 +1,519 @@
+import { generatePersonalLinksAction } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/actions";
+import { getFormattedErrorMessage } from "@/lib/utils/helper";
+import "@testing-library/jest-dom/vitest";
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import toast from "react-hot-toast";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+import { PersonalLinksTab } from "./personal-links-tab";
+
+// Mock dependencies
+vi.mock("@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/actions", () => ({
+  generatePersonalLinksAction: vi.fn(),
+}));
+
+vi.mock("react-hot-toast", () => ({
+  default: {
+    loading: vi.fn(),
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+
+vi.mock("@/lib/utils/helper", () => ({
+  getFormattedErrorMessage: vi.fn(),
+}));
+
+vi.mock("@tolgee/react", () => ({
+  useTranslate: () => ({
+    t: (key: string) => key,
+  }),
+}));
+
+// Mock UI components
+vi.mock("@/modules/ui/components/alert", () => ({
+  Alert: ({ children, variant }: any) => (
+    <div data-testid="alert" data-variant={variant}>
+      {children}
+    </div>
+  ),
+  AlertButton: ({ children }: any) => <div data-testid="alert-button">{children}</div>,
+  AlertDescription: ({ children }: any) => <div data-testid="alert-description">{children}</div>,
+  AlertTitle: ({ children }: any) => <div data-testid="alert-title">{children}</div>,
+}));
+
+vi.mock("@/modules/ui/components/button", () => ({
+  Button: ({ children, onClick, disabled, loading, className, ...props }: any) => (
+    <button
+      data-testid="button"
+      onClick={onClick}
+      disabled={disabled}
+      data-loading={loading}
+      className={className}
+      {...props}>
+      {children}
+    </button>
+  ),
+}));
+
+vi.mock("@/modules/ui/components/date-picker", () => ({
+  DatePicker: ({ date, updateSurveyDate, minDate, onClearDate }: any) => (
+    <div data-testid="date-picker">
+      <input
+        data-testid="date-input"
+        type="date"
+        value={date ? date.toISOString().split("T")[0] : ""}
+        onChange={(e) => {
+          const newDate = e.target.value ? new Date(e.target.value) : null;
+          updateSurveyDate(newDate);
+        }}
+      />
+      <button data-testid="clear-date" onClick={() => onClearDate()}>
+        Clear
+      </button>
+      <div data-testid="min-date">{minDate ? minDate.toISOString() : ""}</div>
+    </div>
+  ),
+}));
+
+vi.mock("@/modules/ui/components/select", () => {
+  let globalOnValueChange: ((value: string) => void) | null = null;
+
+  return {
+    Select: ({ children, value, onValueChange, disabled }: any) => {
+      globalOnValueChange = onValueChange;
+      return (
+        <div data-testid="select" data-disabled={disabled} data-value={value}>
+          <div data-testid="select-current-value">{value || "Select option"}</div>
+          {children}
+        </div>
+      );
+    },
+    SelectContent: ({ children }: any) => <div data-testid="select-content">{children}</div>,
+    SelectItem: ({ children, value }: any) => (
+      <div
+        data-testid="select-item"
+        data-value={value}
+        onClick={() => {
+          if (globalOnValueChange) {
+            globalOnValueChange(value);
+          }
+        }}>
+        {children}
+      </div>
+    ),
+    SelectTrigger: ({ children, className }: any) => (
+      <div data-testid="select-trigger" className={className}>
+        {children}
+      </div>
+    ),
+    SelectValue: ({ placeholder }: any) => <div data-testid="select-value">{placeholder}</div>,
+  };
+});
+
+// Mock icons
+vi.mock("lucide-react", () => ({
+  DownloadIcon: () => <div data-testid="download-icon" />,
+  KeyIcon: () => <div data-testid="key-icon" />,
+}));
+
+// Mock Next.js Link
+vi.mock("next/link", () => ({
+  default: ({ children, href, target, rel }: any) => (
+    <a data-testid="link" href={href} target={target} rel={rel}>
+      {children}
+    </a>
+  ),
+}));
+
+const mockGeneratePersonalLinksAction = vi.mocked(generatePersonalLinksAction);
+const mockToast = vi.mocked(toast);
+const mockGetFormattedErrorMessage = vi.mocked(getFormattedErrorMessage);
+
+// Mock segments data
+const mockSegments = [
+  {
+    id: "segment1",
+    title: "Public Segment 1",
+    isPrivate: false,
+    description: "Test segment 1",
+    filters: [],
+    createdAt: new Date(),
+    updatedAt: new Date(),
+    environmentId: "env1",
+    surveys: [],
+  },
+  {
+    id: "segment2",
+    title: "Public Segment 2",
+    isPrivate: false,
+    description: "Test segment 2",
+    filters: [],
+    createdAt: new Date(),
+    updatedAt: new Date(),
+    environmentId: "env1",
+    surveys: [],
+  },
+  {
+    id: "segment3",
+    title: "Private Segment",
+    isPrivate: true,
+    description: "Test private segment",
+    filters: [],
+    createdAt: new Date(),
+    updatedAt: new Date(),
+    environmentId: "env1",
+    surveys: [],
+  },
+];
+
+const defaultProps = {
+  environmentId: "test-env-id",
+  surveyId: "test-survey-id",
+  segments: mockSegments,
+  isContactsEnabled: true,
+  isFormbricksCloud: false,
+};
+
+// Helper function to trigger select change
+const selectOption = (value: string) => {
+  const selectItems = screen.getAllByTestId("select-item");
+  const targetItem = selectItems.find((item) => item.getAttribute("data-value") === value);
+  if (targetItem) {
+    fireEvent.click(targetItem);
+  }
+};
+
+describe("PersonalLinksTab", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  test("renders the component with correct title and description", () => {
+    render(<PersonalLinksTab {...defaultProps} />);
+
+    expect(
+      screen.getByText("environments.surveys.summary.generate_personal_links_title")
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText("environments.surveys.summary.generate_personal_links_description")
+    ).toBeInTheDocument();
+  });
+
+  test("renders recipients section with segment selection", () => {
+    render(<PersonalLinksTab {...defaultProps} />);
+
+    expect(screen.getByText("common.recipients")).toBeInTheDocument();
+    expect(screen.getByTestId("select")).toBeInTheDocument();
+    expect(screen.getByText("environments.surveys.summary.create_and_manage_segments")).toBeInTheDocument();
+  });
+
+  test("renders expiry date section with date picker", () => {
+    render(<PersonalLinksTab {...defaultProps} />);
+
+    expect(screen.getByText("environments.surveys.summary.expiry_date_optional")).toBeInTheDocument();
+    expect(screen.getByTestId("date-picker")).toBeInTheDocument();
+    expect(screen.getByText("environments.surveys.summary.expiry_date_description")).toBeInTheDocument();
+  });
+
+  test("renders generate button with correct initial state", () => {
+    render(<PersonalLinksTab {...defaultProps} />);
+
+    const button = screen.getByTestId("button");
+    expect(button).toBeInTheDocument();
+    expect(button).toBeDisabled();
+    expect(screen.getByText("environments.surveys.summary.generate_and_download_links")).toBeInTheDocument();
+    expect(screen.getByTestId("download-icon")).toBeInTheDocument();
+  });
+
+  test("renders info alert with correct content", () => {
+    render(<PersonalLinksTab {...defaultProps} />);
+
+    expect(screen.getByTestId("alert")).toBeInTheDocument();
+    expect(
+      screen.getByText("environments.surveys.summary.personal_links_work_with_segments")
+    ).toBeInTheDocument();
+    expect(screen.getByTestId("link")).toHaveAttribute(
+      "href",
+      "https://formbricks.com/docs/xm-and-surveys/surveys/website-app-surveys/advanced-targeting#segment-configuration"
+    );
+  });
+
+  test("filters out private segments and shows only public segments", () => {
+    render(<PersonalLinksTab {...defaultProps} />);
+
+    const selectItems = screen.getAllByTestId("select-item");
+    expect(selectItems).toHaveLength(2); // Only public segments
+    expect(selectItems[0]).toHaveTextContent("Public Segment 1");
+    expect(selectItems[1]).toHaveTextContent("Public Segment 2");
+  });
+
+  test("shows no segments message when no public segments available", () => {
+    const propsWithPrivateSegments = {
+      ...defaultProps,
+      segments: [mockSegments[2]], // Only private segment
+    };
+
+    render(<PersonalLinksTab {...propsWithPrivateSegments} />);
+
+    expect(screen.getByText("environments.surveys.summary.no_segments_available")).toBeInTheDocument();
+    expect(screen.getByTestId("select")).toHaveAttribute("data-disabled", "true");
+    expect(screen.getByTestId("button")).toBeDisabled();
+  });
+
+  test("enables button when segment is selected", () => {
+    render(<PersonalLinksTab {...defaultProps} />);
+
+    // Initially disabled
+    expect(screen.getByTestId("button")).toBeDisabled();
+
+    // Select a segment
+    selectOption("segment1");
+
+    // Should now be enabled
+    expect(screen.getByTestId("button")).not.toBeDisabled();
+  });
+
+  test("handles date selection correctly", () => {
+    render(<PersonalLinksTab {...defaultProps} />);
+
+    const dateInput = screen.getByTestId("date-input");
+    const testDate = "2024-12-31";
+
+    fireEvent.change(dateInput, { target: { value: testDate } });
+
+    expect(dateInput).toHaveValue(testDate);
+  });
+
+  test("clears date when clear button is clicked", () => {
+    render(<PersonalLinksTab {...defaultProps} />);
+
+    const dateInput = screen.getByTestId("date-input");
+    const clearButton = screen.getByTestId("clear-date");
+
+    // Set a date first
+    fireEvent.change(dateInput, { target: { value: "2024-12-31" } });
+
+    // Clear the date
+    fireEvent.click(clearButton);
+
+    expect(dateInput).toHaveValue("");
+  });
+
+  test("sets minimum date to tomorrow", () => {
+    render(<PersonalLinksTab {...defaultProps} />);
+
+    const minDateElement = screen.getByTestId("min-date");
+    // Should have some ISO date string for a future date
+    expect(minDateElement.textContent).toMatch(/\d{4}-\d{2}-\d{2}T/);
+  });
+
+  test("successfully generates and downloads links", async () => {
+    const mockResult = {
+      data: {
+        downloadUrl: "https://example.com/download/file.csv",
+        fileName: "personal-links.csv",
+        count: 5,
+      },
+    };
+    mockGeneratePersonalLinksAction.mockResolvedValue(mockResult);
+
+    render(<PersonalLinksTab {...defaultProps} />);
+
+    // Select a segment
+    selectOption("segment1");
+
+    // Click generate button
+    const generateButton = screen.getByTestId("button");
+    fireEvent.click(generateButton);
+
+    // Verify action was called
+    await waitFor(() => {
+      expect(mockGeneratePersonalLinksAction).toHaveBeenCalledWith({
+        surveyId: "test-survey-id",
+        segmentId: "segment1",
+        environmentId: "test-env-id",
+        expirationDays: undefined,
+      });
+    });
+
+    // Verify loading toast
+    expect(mockToast.loading).toHaveBeenCalledWith("environments.surveys.summary.generating_links_toast", {
+      duration: 5000,
+      id: "generating-links",
+    });
+  });
+
+  test("generates links with expiry date when date is selected", async () => {
+    const mockResult = {
+      data: {
+        downloadUrl: "https://example.com/download/file.csv",
+        fileName: "personal-links.csv",
+        count: 3,
+      },
+    };
+    mockGeneratePersonalLinksAction.mockResolvedValue(mockResult);
+
+    render(<PersonalLinksTab {...defaultProps} />);
+
+    // Select a segment
+    selectOption("segment1");
+
+    // Set expiry date (10 days from now)
+    const dateInput = screen.getByTestId("date-input");
+    const futureDate = new Date();
+    futureDate.setDate(futureDate.getDate() + 10);
+    const expiryDate = futureDate.toISOString().split("T")[0];
+    fireEvent.change(dateInput, { target: { value: expiryDate } });
+
+    // Click generate button
+    const generateButton = screen.getByTestId("button");
+    fireEvent.click(generateButton);
+
+    await waitFor(() => {
+      expect(mockGeneratePersonalLinksAction).toHaveBeenCalledWith({
+        surveyId: "test-survey-id",
+        segmentId: "segment1",
+        environmentId: "test-env-id",
+        expirationDays: expect.any(Number),
+      });
+    });
+
+    // Verify that expirationDays is a reasonable value (between 9-10 days)
+    const callArgs = mockGeneratePersonalLinksAction.mock.calls[0][0];
+    expect(callArgs.expirationDays).toBeGreaterThanOrEqual(9);
+    expect(callArgs.expirationDays).toBeLessThanOrEqual(10);
+  });
+
+  test("handles error response from generatePersonalLinksAction", async () => {
+    const mockErrorResult = {
+      serverError: "Test error message",
+    };
+    mockGeneratePersonalLinksAction.mockResolvedValue(mockErrorResult);
+    mockGetFormattedErrorMessage.mockReturnValue("Formatted error message");
+
+    render(<PersonalLinksTab {...defaultProps} />);
+
+    // Select a segment
+    selectOption("segment1");
+
+    // Click generate button
+    const generateButton = screen.getByTestId("button");
+    fireEvent.click(generateButton);
+
+    // Wait for the action to be called
+    await waitFor(() => {
+      expect(mockGeneratePersonalLinksAction).toHaveBeenCalledWith({
+        surveyId: "test-survey-id",
+        segmentId: "segment1",
+        environmentId: "test-env-id",
+        expirationDays: undefined,
+      });
+    });
+
+    // Wait for error handling
+    await waitFor(() => {
+      expect(mockGetFormattedErrorMessage).toHaveBeenCalledWith(mockErrorResult);
+      expect(mockToast.error).toHaveBeenCalledWith("Formatted error message", {
+        duration: 5000,
+        id: "generating-links",
+      });
+    });
+  });
+
+  test("shows generating state when triggered", async () => {
+    // Mock a promise that resolves quickly
+    const mockResult = { data: { downloadUrl: "test", fileName: "test.csv", count: 1 } };
+    mockGeneratePersonalLinksAction.mockResolvedValue(mockResult);
+
+    render(<PersonalLinksTab {...defaultProps} />);
+
+    // Select a segment
+    selectOption("segment1");
+
+    // Click generate button
+    const generateButton = screen.getByTestId("button");
+    fireEvent.click(generateButton);
+
+    // Verify loading toast is called
+    expect(mockToast.loading).toHaveBeenCalledWith("environments.surveys.summary.generating_links_toast", {
+      duration: 5000,
+      id: "generating-links",
+    });
+  });
+
+  test("button is disabled when no segment is selected", () => {
+    render(<PersonalLinksTab {...defaultProps} />);
+
+    const generateButton = screen.getByTestId("button");
+    expect(generateButton).toBeDisabled();
+  });
+
+  test("button is disabled when no public segments are available", () => {
+    const propsWithNoPublicSegments = {
+      ...defaultProps,
+      segments: [mockSegments[2]], // Only private segments
+    };
+
+    render(<PersonalLinksTab {...propsWithNoPublicSegments} />);
+
+    const generateButton = screen.getByTestId("button");
+    expect(generateButton).toBeDisabled();
+  });
+
+  test("handles empty segments array", () => {
+    const propsWithEmptySegments = {
+      ...defaultProps,
+      segments: [],
+    };
+
+    render(<PersonalLinksTab {...propsWithEmptySegments} />);
+
+    expect(screen.getByText("environments.surveys.summary.no_segments_available")).toBeInTheDocument();
+    expect(screen.getByTestId("button")).toBeDisabled();
+  });
+
+  test("calculates expiration days correctly for different dates", async () => {
+    const mockResult = {
+      data: {
+        downloadUrl: "https://example.com/download/file.csv",
+        fileName: "test.csv",
+        count: 1,
+      },
+    };
+    mockGeneratePersonalLinksAction.mockResolvedValue(mockResult);
+
+    render(<PersonalLinksTab {...defaultProps} />);
+
+    // Select a segment
+    selectOption("segment1");
+
+    // Set expiry date to 5 days from now
+    const dateInput = screen.getByTestId("date-input");
+    const futureDate = new Date();
+    futureDate.setDate(futureDate.getDate() + 5);
+    const expiryDate = futureDate.toISOString().split("T")[0];
+    fireEvent.change(dateInput, { target: { value: expiryDate } });
+
+    // Click generate button
+    const generateButton = screen.getByTestId("button");
+    fireEvent.click(generateButton);
+
+    await waitFor(() => {
+      expect(mockGeneratePersonalLinksAction).toHaveBeenCalledWith({
+        surveyId: "test-survey-id",
+        segmentId: "segment1",
+        environmentId: "test-env-id",
+        expirationDays: expect.any(Number),
+      });
+    });
+
+    // Verify that expirationDays is a reasonable value (between 4-5 days)
+    const callArgs = mockGeneratePersonalLinksAction.mock.calls[0][0];
+    expect(callArgs.expirationDays).toBeGreaterThanOrEqual(4);
+    expect(callArgs.expirationDays).toBeLessThanOrEqual(5);
+  });
+});

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/personal-links-tab.tsx

@@ -0,0 +1,231 @@
+"use client";
+
+import { getFormattedErrorMessage } from "@/lib/utils/helper";
+import { Alert, AlertButton, AlertTitle } from "@/modules/ui/components/alert";
+import { Button } from "@/modules/ui/components/button";
+import { DatePicker } from "@/modules/ui/components/date-picker";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/modules/ui/components/select";
+import { UpgradePrompt } from "@/modules/ui/components/upgrade-prompt";
+import { useTranslate } from "@tolgee/react";
+import { DownloadIcon } from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+import toast from "react-hot-toast";
+import { TSegment } from "@formbricks/types/segment";
+import { generatePersonalLinksAction } from "../../actions";
+
+interface PersonalLinksTabProps {
+  environmentId: string;
+  surveyId: string;
+  segments: TSegment[];
+  isContactsEnabled: boolean;
+  isFormbricksCloud: boolean;
+}
+
+// Custom DatePicker component with date restrictions
+const RestrictedDatePicker = ({
+  date,
+  updateSurveyDate,
+}: {
+  date: Date | null;
+  updateSurveyDate: (date: Date | null) => void;
+}) => {
+  // Get tomorrow's date
+  const tomorrow = new Date();
+  tomorrow.setDate(tomorrow.getDate() + 1);
+  tomorrow.setHours(0, 0, 0, 0);
+
+  const handleDateUpdate = (date: Date) => {
+    updateSurveyDate(date);
+  };
+
+  return (
+    <DatePicker
+      date={date}
+      updateSurveyDate={handleDateUpdate}
+      minDate={tomorrow}
+      onClearDate={() => updateSurveyDate(null)}
+    />
+  );
+};
+
+export const PersonalLinksTab = ({
+  environmentId,
+  segments,
+  surveyId,
+  isContactsEnabled,
+  isFormbricksCloud,
+}: PersonalLinksTabProps) => {
+  const { t } = useTranslate();
+  const [selectedSegment, setSelectedSegment] = useState<string>("");
+  const [expiryDate, setExpiryDate] = useState<Date | null>(null);
+  const [isGenerating, setIsGenerating] = useState(false);
+  const publicSegments = segments.filter((segment) => !segment.isPrivate);
+
+  // Utility function for file downloads
+  const downloadFile = (url: string, filename: string) => {
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  const handleGenerateLinks = async () => {
+    if (!selectedSegment || isGenerating) return;
+
+    setIsGenerating(true);
+
+    // Show initial toast
+    toast.loading(t("environments.surveys.summary.generating_links_toast"), {
+      duration: 5000,
+      id: "generating-links",
+    });
+
+    const result = await generatePersonalLinksAction({
+      surveyId: surveyId,
+      segmentId: selectedSegment,
+      environmentId: environmentId,
+      expirationDays: expiryDate
+        ? Math.max(1, Math.floor((expiryDate.getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24)))
+        : undefined,
+    });
+
+    if (result?.data) {
+      downloadFile(result.data.downloadUrl, result.data.fileName || "personal-links.csv");
+      toast.success(t("environments.surveys.summary.links_generated_success_toast"), {
+        duration: 5000,
+        id: "generating-links",
+      });
+    } else {
+      const errorMessage = getFormattedErrorMessage(result);
+      toast.error(errorMessage, {
+        duration: 5000,
+        id: "generating-links",
+      });
+    }
+    setIsGenerating(false);
+  };
+
+  // Button state logic
+  const isButtonDisabled = !selectedSegment || isGenerating || publicSegments.length === 0;
+  const buttonText = isGenerating
+    ? t("environments.surveys.summary.generating_links")
+    : t("environments.surveys.summary.generate_and_download_links");
+
+  if (!isContactsEnabled) {
+    return (
+      <UpgradePrompt
+        title={t("environments.surveys.summary.personal_links_upgrade_prompt_title")}
+        description={t("environments.surveys.summary.personal_links_upgrade_prompt_description")}
+        buttons={[
+          {
+            text: isFormbricksCloud ? t("common.start_free_trial") : t("common.request_trial_license"),
+            href: isFormbricksCloud
+              ? `/environments/${environmentId}/settings/billing`
+              : "https://formbricks.com/upgrade-self-hosting-license",
+          },
+          {
+            text: t("common.learn_more"),
+            href: isFormbricksCloud
+              ? `/environments/${environmentId}/settings/billing`
+              : "https://formbricks.com/learn-more-self-hosting-license",
+          },
+        ]}
+      />
+    );
+  }
+
+  return (
+    <div className="flex h-full grow flex-col gap-6">
+      <div>
+        <h2 className="mb-2 text-lg font-semibold text-slate-800">
+          {t("environments.surveys.summary.generate_personal_links_title")}
+        </h2>
+        <p className="text-sm text-slate-600">
+          {t("environments.surveys.summary.generate_personal_links_description")}
+        </p>
+      </div>
+
+      <div className="space-y-6">
+        {/* Recipients Section */}
+        <div>
+          <label htmlFor="segment-select" className="mb-2 block text-sm font-medium text-slate-700">
+            {t("common.recipients")}
+          </label>
+          <Select
+            value={selectedSegment}
+            onValueChange={setSelectedSegment}
+            disabled={publicSegments.length === 0}>
+            <SelectTrigger id="segment-select" className="w-full bg-white">
+              <SelectValue
+                placeholder={
+                  publicSegments.length === 0
+                    ? t("environments.surveys.summary.no_segments_available")
+                    : t("environments.surveys.summary.select_segment")
+                }
+              />
+            </SelectTrigger>
+            <SelectContent>
+              {publicSegments.map((segment) => (
+                <SelectItem key={segment.id} value={segment.id}>
+                  {segment.title}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <p className="mt-1 text-xs text-slate-500">
+            {t("environments.surveys.summary.create_and_manage_segments")}
+          </p>
+        </div>
+
+        {/* Expiry Date Section */}
+        <div>
+          <label htmlFor="expiry-date-picker" className="mb-2 block text-sm font-medium text-slate-700">
+            {t("environments.surveys.summary.expiry_date_optional")}
+          </label>
+          <div id="expiry-date-picker">
+            <RestrictedDatePicker
+              date={expiryDate}
+              updateSurveyDate={(date: Date | null) => setExpiryDate(date)}
+            />
+          </div>
+          <p className="mt-1 text-xs text-slate-500">
+            {t("environments.surveys.summary.expiry_date_description")}
+          </p>
+        </div>
+
+        {/* Generate Button */}
+        <Button
+          onClick={handleGenerateLinks}
+          disabled={isButtonDisabled}
+          loading={isGenerating}
+          className="w-fit">
+          <DownloadIcon className="mr-2 h-4 w-4" />
+          {buttonText}
+        </Button>
+      </div>
+      <hr />
+
+      {/* Info Box */}
+      <Alert variant="info" size="small">
+        <AlertTitle>{t("environments.surveys.summary.personal_links_work_with_segments")}</AlertTitle>
+        <AlertButton>
+          <Link
+            href="https://formbricks.com/docs/xm-and-surveys/surveys/website-app-surveys/advanced-targeting#segment-configuration"
+            target="_blank"
+            rel="noopener noreferrer">
+            {t("common.learn_more")}
+          </Link>
+        </AlertButton>
+      </Alert>
+    </div>
+  );
+};

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

@@ -1,9 +1,8 @@
-import { getSurveyDomain } from "@/lib/getSurveyUrl";
+import { getPublicDomain } from "@/lib/getPublicUrl";
 import { getProjectByEnvironmentId } from "@/lib/project/service";
 import { getSurvey } from "@/lib/survey/service";
 import { getStyling } from "@/lib/utils/styling";
 import { getPreviewEmailTemplateHtml } from "@/modules/email/components/preview-email-template";
-import { getTranslate } from "@/tolgee/server";
 import { cleanup } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 import { TEnvironment } from "@formbricks/types/environment";
@@ -35,7 +34,16 @@ vi.mock("@/lib/constants", () => ({
   SENTRY_DSN: "mock-sentry-dsn",
 }));
 
-vi.mock("@/lib/getSurveyUrl");
+vi.mock("@/lib/env", () => ({
+  env: {
+    PUBLIC_URL: "https://public-domain.com",
+  },
+}));
+
+vi.mock("@/lib/getPublicUrl", () => ({
+  getPublicDomain: vi.fn().mockReturnValue("https://public-domain.com"),
+}));
+
 vi.mock("@/lib/project/service");
 vi.mock("@/lib/survey/service");
 vi.mock("@/lib/utils/styling");
@@ -93,7 +101,7 @@ const mockProject = {
     highlightBorderColor: null,
     cardBackgroundColor: { light: "#FFFFFF", dark: "#000000" },
     cardBorderColor: { light: "#FFFFFF", dark: "#000000" },
-    cardShadowColor: { light: "#FFFFFF", dark: "#000000" },
+
     questionColor: { light: "#FFFFFF", dark: "#000000" },
     inputColor: { light: "#FFFFFF", dark: "#000000" },
     inputBorderColor: { light: "#FFFFFF", dark: "#000000" },
@@ -115,13 +123,13 @@ const mockComputedStyling = {
   inputBorderColor: "#000000",
   cardBackgroundColor: "#FFFFFF",
   cardBorderColor: "#EEEEEE",
-  cardShadowColor: "#AAAAAA",
+
   highlightBorderColor: null,
   thankYouCardIconColor: "#007BFF",
   thankYouCardIconBgColor: "#DDDDDD",
 } as any;
 
-const mockSurveyDomain = "https://app.formbricks.com";
+const mockPublicDomain = "https://app.formbricks.com";
 const mockRawHtml = `${doctype}<html><body>Test Email Content for ${mockSurvey.name}</body></html>`;
 const mockCleanedHtml = `<html><body>Test Email Content for ${mockSurvey.name}</body></html>`;
 
@@ -136,7 +144,7 @@ describe("getEmailTemplateHtml", () => {
     vi.mocked(getSurvey).mockResolvedValue(mockSurvey);
     vi.mocked(getProjectByEnvironmentId).mockResolvedValue(mockProject);
     vi.mocked(getStyling).mockReturnValue(mockComputedStyling);
-    vi.mocked(getSurveyDomain).mockReturnValue(mockSurveyDomain);
+    vi.mocked(getPublicDomain).mockReturnValue(mockPublicDomain);
     vi.mocked(getPreviewEmailTemplateHtml).mockResolvedValue(mockRawHtml);
   });
 
@@ -147,8 +155,8 @@ describe("getEmailTemplateHtml", () => {
     expect(getSurvey).toHaveBeenCalledWith(mockSurveyId);
     expect(getProjectByEnvironmentId).toHaveBeenCalledWith(mockSurvey.environmentId);
     expect(getStyling).toHaveBeenCalledWith(mockProject, mockSurvey);
-    expect(getSurveyDomain).toHaveBeenCalledTimes(1);
-    const expectedSurveyUrl = `${mockSurveyDomain}/s/${mockSurvey.id}`;
+    expect(getPublicDomain).toHaveBeenCalledTimes(1);
+    const expectedSurveyUrl = `${mockPublicDomain}/s/${mockSurvey.id}`;
     expect(getPreviewEmailTemplateHtml).toHaveBeenCalledWith(
       mockSurvey,
       expectedSurveyUrl,

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

@@ -1,4 +1,4 @@
-import { getSurveyDomain } from "@/lib/getSurveyUrl";
+import { getPublicDomain } from "@/lib/getPublicUrl";
 import { getProjectByEnvironmentId } from "@/lib/project/service";
 import { getSurvey } from "@/lib/survey/service";
 import { getStyling } from "@/lib/utils/styling";
@@ -17,7 +17,7 @@ export const getEmailTemplateHtml = async (surveyId: string, locale: string) =>
   }
 
   const styling = getStyling(project, survey);
-  const surveyUrl = getSurveyDomain() + "/s/" + survey.id;
+  const surveyUrl = getPublicDomain() + "/s/" + survey.id;
   const html = await getPreviewEmailTemplateHtml(survey, surveyUrl, styling, locale, t);
   const doctype =
     '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';

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

@@ -3,8 +3,8 @@ import { SurveyAnalysisNavigation } from "@/app/(app)/environments/[environmentI
 import { SummaryPage } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryPage";
 import { getSurveySummary } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/lib/surveySummary";
 import SurveyPage from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/page";
-import { DEFAULT_LOCALE, WEBAPP_URL } from "@/lib/constants";
-import { getSurveyDomain } from "@/lib/getSurveyUrl";
+import { DEFAULT_LOCALE } from "@/lib/constants";
+import { getPublicDomain } from "@/lib/getPublicUrl";
 import { getResponseCountBySurveyId } from "@/lib/response/service";
 import { getSurvey } from "@/lib/survey/service";
 import { getUser } from "@/lib/user/service";
@@ -38,7 +38,6 @@ vi.mock("@/lib/constants", () => ({
   OIDC_SIGNING_ALGORITHM: "test-oidc-signing-algorithm",
   IS_PRODUCTION: false,
   SENTRY_DSN: "mock-sentry-dsn",
-  WEBAPP_URL: "http://localhost:3000",
   RESPONSES_PER_PAGE: 10,
   SESSION_MAX_AGE: 1000,
 }));
@@ -64,8 +63,8 @@ vi.mock(
   })
 );
 
-vi.mock("@/lib/getSurveyUrl", () => ({
-  getSurveyDomain: vi.fn(),
+vi.mock("@/lib/getPublicUrl", () => ({
+  getPublicDomain: vi.fn(),
 }));
 
 vi.mock("@/lib/response/service", () => ({
@@ -211,7 +210,7 @@ describe("SurveyPage", () => {
     vi.mocked(getSurvey).mockResolvedValue(mockSurvey);
     vi.mocked(getUser).mockResolvedValue(mockUser);
     vi.mocked(getResponseCountBySurveyId).mockResolvedValue(10);
-    vi.mocked(getSurveyDomain).mockReturnValue("test.domain.com");
+    vi.mocked(getPublicDomain).mockReturnValue("http://localhost:3000");
     vi.mocked(getSurveySummary).mockResolvedValue(mockSurveySummary);
     vi.mocked(notFound).mockClear();
   });
@@ -235,7 +234,7 @@ describe("SurveyPage", () => {
     expect(vi.mocked(getEnvironmentAuth)).toHaveBeenCalledWith(mockEnvironmentId);
     expect(vi.mocked(getSurvey)).toHaveBeenCalledWith(mockSurveyId);
     expect(vi.mocked(getUser)).toHaveBeenCalledWith(mockUserId);
-    expect(vi.mocked(getSurveyDomain)).toHaveBeenCalled();
+    expect(vi.mocked(getPublicDomain)).toHaveBeenCalled();
 
     expect(vi.mocked(SurveyAnalysisNavigation).mock.calls[0][0]).toEqual(
       expect.objectContaining({
@@ -250,7 +249,7 @@ describe("SurveyPage", () => {
         environment: mockEnvironment,
         survey: mockSurvey,
         surveyId: mockSurveyId,
-        webAppUrl: WEBAPP_URL,
+        publicDomain: "http://localhost:3000",
         isReadOnly: false,
         locale: mockUser.locale ?? DEFAULT_LOCALE,
         initialSurveySummary: mockSurveySummary,

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

@@ -2,10 +2,12 @@ import { SurveyAnalysisNavigation } from "@/app/(app)/environments/[environmentI
 import { SummaryPage } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryPage";
 import { SurveyAnalysisCTA } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SurveyAnalysisCTA";
 import { getSurveySummary } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/lib/surveySummary";
-import { DEFAULT_LOCALE, WEBAPP_URL } from "@/lib/constants";
-import { getSurveyDomain } from "@/lib/getSurveyUrl";
+import { DEFAULT_LOCALE, IS_FORMBRICKS_CLOUD } from "@/lib/constants";
+import { getPublicDomain } from "@/lib/getPublicUrl";
 import { getSurvey } from "@/lib/survey/service";
 import { getUser } from "@/lib/user/service";
+import { getSegments } from "@/modules/ee/contacts/segments/lib/segments";
+import { getIsContactsEnabled } from "@/modules/ee/license-check/lib/utils";
 import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
 import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
 import { PageHeader } from "@/modules/ui/components/page-header";
@@ -36,11 +38,13 @@ const SurveyPage = async (props: { params: Promise<{ environmentId: string; surv
   if (!user) {
     throw new Error(t("common.user_not_found"));
   }
+  const isContactsEnabled = await getIsContactsEnabled();
+  const segments = isContactsEnabled ? await getSegments(environment.id) : [];
 
   // Fetch initial survey summary data on the server to prevent duplicate API calls during hydration
   const initialSurveySummary = await getSurveySummary(surveyId);
 
-  const surveyDomain = getSurveyDomain();
+  const publicDomain = getPublicDomain();
 
   return (
     <PageContentWrapper>
@@ -52,8 +56,11 @@ const SurveyPage = async (props: { params: Promise<{ environmentId: string; surv
             survey={survey}
             isReadOnly={isReadOnly}
             user={user}
-            surveyDomain={surveyDomain}
+            publicDomain={publicDomain}
             responseCount={initialSurveySummary?.meta.totalResponses ?? 0}
+            segments={segments}
+            isContactsEnabled={isContactsEnabled}
+            isFormbricksCloud={IS_FORMBRICKS_CLOUD}
           />
         }>
         <SurveyAnalysisNavigation environmentId={environment.id} survey={survey} activeId="summary" />
@@ -62,7 +69,7 @@ const SurveyPage = async (props: { params: Promise<{ environmentId: string; surv
         environment={environment}
         survey={survey}
         surveyId={params.surveyId}
-        webAppUrl={WEBAPP_URL}
+        publicDomain={publicDomain}
         isReadOnly={isReadOnly}
         locale={user.locale ?? DEFAULT_LOCALE}
         initialSurveySummary={initialSurveySummary}

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

@@ -138,7 +138,7 @@ describe("ResultsShareButton", () => {
 
   test("renders initial state and fetches sharing key (no existing key)", async () => {
     mockGetResultShareUrlAction.mockResolvedValue({ data: null });
-    render(<ResultsShareButton survey={mockSurvey} webAppUrl={webAppUrl} />);
+    render(<ResultsShareButton survey={mockSurvey} publicDomain={webAppUrl} />);
 
     expect(screen.getByTestId("dropdown-menu-trigger")).toBeInTheDocument();
     expect(screen.getByTestId("link-icon")).toBeInTheDocument();
@@ -150,7 +150,7 @@ describe("ResultsShareButton", () => {
 
   test("handles copy private link to clipboard", async () => {
     mockGetResultShareUrlAction.mockResolvedValue({ data: null });
-    render(<ResultsShareButton survey={mockSurvey} webAppUrl={webAppUrl} />);
+    render(<ResultsShareButton survey={mockSurvey} publicDomain={webAppUrl} />);
 
     fireEvent.click(screen.getByTestId("dropdown-menu-trigger")); // Open dropdown
     const copyLinkButton = (await screen.findAllByTestId("dropdown-menu-item")).find((item) =>
@@ -166,7 +166,9 @@ describe("ResultsShareButton", () => {
   test("handles copy public link to clipboard", async () => {
     const shareKey = "publicShareKey";
     mockGetResultShareUrlAction.mockResolvedValue({ data: shareKey });
-    render(<ResultsShareButton survey={{ ...mockSurvey, resultShareKey: shareKey }} webAppUrl={webAppUrl} />);
+    render(
+      <ResultsShareButton survey={{ ...mockSurvey, resultShareKey: shareKey }} publicDomain={webAppUrl} />
+    );
 
     fireEvent.click(screen.getByTestId("dropdown-menu-trigger")); // Open dropdown
     const copyPublicLinkButton = (await screen.findAllByTestId("dropdown-menu-item")).find((item) =>
@@ -184,7 +186,7 @@ describe("ResultsShareButton", () => {
   test("handles publish to web successfully", async () => {
     mockGetResultShareUrlAction.mockResolvedValue({ data: null });
     mockGenerateResultShareUrlAction.mockResolvedValue({ data: "newShareKey" });
-    render(<ResultsShareButton survey={mockSurvey} webAppUrl={webAppUrl} />);
+    render(<ResultsShareButton survey={mockSurvey} publicDomain={webAppUrl} />);
 
     fireEvent.click(screen.getByTestId("dropdown-menu-trigger"));
     const publishButton = (await screen.findAllByTestId("dropdown-menu-item")).find((item) =>
@@ -210,7 +212,9 @@ describe("ResultsShareButton", () => {
     const shareKey = "toUnpublishKey";
     mockGetResultShareUrlAction.mockResolvedValue({ data: shareKey });
     mockDeleteResultShareUrlAction.mockResolvedValue({ data: { id: mockSurvey.id } });
-    render(<ResultsShareButton survey={{ ...mockSurvey, resultShareKey: shareKey }} webAppUrl={webAppUrl} />);
+    render(
+      <ResultsShareButton survey={{ ...mockSurvey, resultShareKey: shareKey }} publicDomain={webAppUrl} />
+    );
 
     fireEvent.click(screen.getByTestId("dropdown-menu-trigger"));
     const unpublishButton = (await screen.findAllByTestId("dropdown-menu-item")).find((item) =>
@@ -234,7 +238,7 @@ describe("ResultsShareButton", () => {
 
   test("opens and closes ShareSurveyResults modal", async () => {
     mockGetResultShareUrlAction.mockResolvedValue({ data: null });
-    render(<ResultsShareButton survey={mockSurvey} webAppUrl={webAppUrl} />);
+    render(<ResultsShareButton survey={mockSurvey} publicDomain={webAppUrl} />);
 
     fireEvent.click(screen.getByTestId("dropdown-menu-trigger"));
     const publishButton = (await screen.findAllByTestId("dropdown-menu-item")).find((item) =>

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

@@ -21,10 +21,10 @@ import { ShareSurveyResults } from "../(analysis)/summary/components/ShareSurvey
 
 interface ResultsShareButtonProps {
   survey: TSurvey;
-  webAppUrl: string;
+  publicDomain: string;
 }
 
-export const ResultsShareButton = ({ survey, webAppUrl }: ResultsShareButtonProps) => {
+export const ResultsShareButton = ({ survey, publicDomain }: ResultsShareButtonProps) => {
   const { t } = useTranslate();
   const [showResultsLinkModal, setShowResultsLinkModal] = useState(false);
 
@@ -34,7 +34,7 @@ export const ResultsShareButton = ({ survey, webAppUrl }: ResultsShareButtonProp
   const handlePublish = async () => {
     const resultShareKeyResponse = await generateResultShareUrlAction({ surveyId: survey.id });
     if (resultShareKeyResponse?.data) {
-      setSurveyUrl(webAppUrl + "/share/" + resultShareKeyResponse.data);
+      setSurveyUrl(publicDomain + "/share/" + resultShareKeyResponse.data);
       setShowPublishModal(true);
     } else {
       const errorMessage = getFormattedErrorMessage(resultShareKeyResponse);
@@ -58,13 +58,13 @@ export const ResultsShareButton = ({ survey, webAppUrl }: ResultsShareButtonProp
     const fetchSharingKey = async () => {
       const resultShareUrlResponse = await getResultShareUrlAction({ surveyId: survey.id });
       if (resultShareUrlResponse?.data) {
-        setSurveyUrl(webAppUrl + "/share/" + resultShareUrlResponse.data);
+        setSurveyUrl(publicDomain + "/share/" + resultShareUrlResponse.data);
         setShowPublishModal(true);
       }
     };
 
     fetchSharingKey();
-  }, [survey.id, webAppUrl]);
+  }, [survey.id, publicDomain]);
 
   const copyUrlToClipboard = () => {
     if (typeof window !== "undefined") {

apps/web/app/ClientEnvironmentRedirect.test.tsx

@@ -14,41 +14,64 @@ describe("ClientEnvironmentRedirect", () => {
     cleanup();
   });
 
-  test("should redirect to the provided environment ID when no last environment exists", () => {
+  test("should redirect to the first environment ID when no last environment exists", () => {
     const mockPush = vi.fn();
     vi.mocked(useRouter).mockReturnValue({ push: mockPush } as any);
 
     // Mock localStorage
     const localStorageMock = {
       getItem: vi.fn().mockReturnValue(null),
+      removeItem: vi.fn(),
     };
+
     Object.defineProperty(window, "localStorage", {
       value: localStorageMock,
     });
 
-    render(<ClientEnvironmentRedirect environmentId="test-env-id" />);
+    render(<ClientEnvironmentRedirect userEnvironments={["test-env-id"]} />);
 
     expect(mockPush).toHaveBeenCalledWith("/environments/test-env-id");
   });
 
-  test("should redirect to the last environment ID when it exists in localStorage", () => {
+  test("should redirect to the last environment ID when it exists in localStorage and is valid", () => {
     const mockPush = vi.fn();
     vi.mocked(useRouter).mockReturnValue({ push: mockPush } as any);
 
     // Mock localStorage with a last environment ID
     const localStorageMock = {
       getItem: vi.fn().mockReturnValue("last-env-id"),
+      removeItem: vi.fn(),
     };
     Object.defineProperty(window, "localStorage", {
       value: localStorageMock,
     });
 
-    render(<ClientEnvironmentRedirect environmentId="test-env-id" />);
+    render(<ClientEnvironmentRedirect userEnvironments={["last-env-id", "other-env-id"]} />);
 
     expect(localStorageMock.getItem).toHaveBeenCalledWith(FORMBRICKS_ENVIRONMENT_ID_LS);
     expect(mockPush).toHaveBeenCalledWith("/environments/last-env-id");
   });
 
+  test("should clear invalid environment ID and redirect to default when stored ID is not in user environments", () => {
+    const mockPush = vi.fn();
+    vi.mocked(useRouter).mockReturnValue({ push: mockPush } as any);
+
+    // Mock localStorage with an invalid environment ID
+    const localStorageMock = {
+      getItem: vi.fn().mockReturnValue("invalid-env-id"),
+      removeItem: vi.fn(),
+    };
+    Object.defineProperty(window, "localStorage", {
+      value: localStorageMock,
+    });
+
+    render(<ClientEnvironmentRedirect userEnvironments={["valid-env-1", "valid-env-2"]} />);
+
+    expect(localStorageMock.getItem).toHaveBeenCalledWith(FORMBRICKS_ENVIRONMENT_ID_LS);
+    expect(localStorageMock.removeItem).toHaveBeenCalledWith(FORMBRICKS_ENVIRONMENT_ID_LS);
+    expect(mockPush).toHaveBeenCalledWith("/environments/valid-env-1");
+  });
+
   test("should update redirect when environment ID prop changes", () => {
     const mockPush = vi.fn();
     vi.mocked(useRouter).mockReturnValue({ push: mockPush } as any);
@@ -56,19 +79,20 @@ describe("ClientEnvironmentRedirect", () => {
     // Mock localStorage
     const localStorageMock = {
       getItem: vi.fn().mockReturnValue(null),
+      removeItem: vi.fn(),
     };
     Object.defineProperty(window, "localStorage", {
       value: localStorageMock,
     });
 
-    const { rerender } = render(<ClientEnvironmentRedirect environmentId="initial-env-id" />);
+    const { rerender } = render(<ClientEnvironmentRedirect userEnvironments={["initial-env-id"]} />);
     expect(mockPush).toHaveBeenCalledWith("/environments/initial-env-id");
 
     // Clear mock calls
     mockPush.mockClear();
 
     // Rerender with new environment ID
-    rerender(<ClientEnvironmentRedirect environmentId="new-env-id" />);
+    rerender(<ClientEnvironmentRedirect userEnvironments={["new-env-id"]} />);
     expect(mockPush).toHaveBeenCalledWith("/environments/new-env-id");
   });
 });

apps/web/app/ClientEnvironmentRedirect.tsx

@@ -5,22 +5,23 @@ import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 
 interface ClientEnvironmentRedirectProps {
-  environmentId: string;
+  userEnvironments: string[];
 }
 
-const ClientEnvironmentRedirect = ({ environmentId }: ClientEnvironmentRedirectProps) => {
+const ClientEnvironmentRedirect = ({ userEnvironments }: ClientEnvironmentRedirectProps) => {
   const router = useRouter();
 
   useEffect(() => {
     const lastEnvironmentId = localStorage.getItem(FORMBRICKS_ENVIRONMENT_ID_LS);
 
-    if (lastEnvironmentId) {
-      // Redirect to the last environment the user was in
+    if (lastEnvironmentId && userEnvironments.includes(lastEnvironmentId)) {
       router.push(`/environments/${lastEnvironmentId}`);
     } else {
-      router.push(`/environments/${environmentId}`);
+      // If the last environmentId is not valid, remove it from localStorage and redirect to the provided environmentId
+      localStorage.removeItem(FORMBRICKS_ENVIRONMENT_ID_LS);
+      router.push(`/environments/${userEnvironments[0]}`);
     }
-  }, [environmentId, router]);
+  }, [userEnvironments, router]);
 
   return null;
 };

apps/web/app/api/cron/ping/route.ts

@@ -1,5 +1,6 @@
 import { responses } from "@/app/lib/api/response";
 import { CRON_SECRET } from "@/lib/constants";
+import { env } from "@/lib/env";
 import { captureTelemetry } from "@/lib/telemetry";
 import packageJson from "@/package.json";
 import { headers } from "next/headers";
@@ -13,6 +14,10 @@ export const POST = async () => {
     return responses.notAuthenticatedResponse();
   }
 
+  if (env.TELEMETRY_DISABLED === "1") {
+    return responses.successResponse({}, true);
+  }
+
   const [surveyCount, responseCount, userCount] = await Promise.all([
     prisma.survey.count(),
     prisma.response.count(),

apps/web/app/api/v1/client/[environmentId]/environment/lib/environmentState.test.ts

@@ -274,7 +274,7 @@ describe("getEnvironmentState", () => {
 
     expect(withCache).toHaveBeenCalledWith(expect.any(Function), {
       key: `fb:env:${environmentId}:state`,
-      ttl: 60 * 30 * 1000, // 30 minutes in milliseconds
+      ttl: 5 * 60 * 1000, // 5 minutes in milliseconds
     });
   });
 });

apps/web/app/api/v1/client/[environmentId]/environment/lib/environmentState.ts

@@ -83,9 +83,8 @@ export const getEnvironmentState = async (
     {
       // Use enterprise-grade cache key pattern
       key: createCacheKey.environment.state(environmentId),
-      // 30 minutes TTL ensures fresh data for hourly SDK checks
-      // Balances performance with freshness requirements
-      ttl: 60 * 30 * 1000, // 30 minutes in milliseconds
+      // This is a temporary fix for the invalidation issues, will be changed later with a proper solution
+      ttl: 5 * 60 * 1000, // 5 minutes in milliseconds
     }
   );
 

apps/web/app/api/v1/management/action-classes/route.ts

@@ -52,14 +52,6 @@ export const POST = withApiLogging(
       }
 
       const inputValidation = ZActionClassInput.safeParse(actionClassInput);
-      const environmentId = actionClassInput.environmentId;
-
-      if (!hasPermission(authentication.environmentPermissions, environmentId, "POST")) {
-        return {
-          response: responses.unauthorizedResponse(),
-        };
-      }
-
       if (!inputValidation.success) {
         return {
           response: responses.badRequestResponse(
@@ -70,6 +62,14 @@ export const POST = withApiLogging(
         };
       }
 
+      const environmentId = inputValidation.data.environmentId;
+
+      if (!hasPermission(authentication.environmentPermissions, environmentId, "POST")) {
+        return {
+          response: responses.unauthorizedResponse(),
+        };
+      }
+
       const actionClass: TActionClass = await createActionClass(environmentId, inputValidation.data);
       auditLog.targetId = actionClass.id;
       auditLog.newObject = actionClass;

apps/web/app/api/v1/management/responses/lib/response.test.ts

@@ -186,6 +186,18 @@ describe("Response Lib Tests", () => {
       expect(logger.error).not.toHaveBeenCalled(); // Should be caught and re-thrown as DatabaseError
     });
 
+    test("should handle RelatedRecordDoesNotExist error with specific message", async () => {
+      const prismaError = new Prisma.PrismaClientKnownRequestError("Related record does not exist", {
+        code: "P2025", // PrismaErrorType.RelatedRecordDoesNotExist
+        clientVersion: "2.0",
+      });
+      vi.mocked(getOrganizationByEnvironmentId).mockResolvedValue(mockOrganization);
+      vi.mocked(prisma.response.create).mockRejectedValue(prismaError);
+
+      await expect(createResponse(mockResponseInput)).rejects.toThrow(DatabaseError);
+      await expect(createResponse(mockResponseInput)).rejects.toThrow("Display ID does not exist");
+    });
+
     test("should handle generic errors", async () => {
       const genericError = new Error("Something went wrong");
       vi.mocked(getOrganizationByEnvironmentId).mockResolvedValue(mockOrganization);

apps/web/app/api/v1/management/responses/lib/response.ts

@@ -12,6 +12,7 @@ import { validateInputs } from "@/lib/utils/validate";
 import { Prisma } from "@prisma/client";
 import { cache as reactCache } from "react";
 import { prisma } from "@formbricks/database";
+import { PrismaErrorType } from "@formbricks/database/types/error";
 import { logger } from "@formbricks/logger";
 import { ZId, ZOptionalNumber } from "@formbricks/types/common";
 import { TContactAttributes } from "@formbricks/types/contact-attribute";
@@ -176,6 +177,9 @@ export const createResponse = async (responseInput: TResponseInput): Promise<TRe
     return response;
   } catch (error) {
     if (error instanceof Prisma.PrismaClientKnownRequestError) {
+      if (error.code === PrismaErrorType.RelatedRecordDoesNotExist) {
+        throw new DatabaseError("Display ID does not exist");
+      }
       throw new DatabaseError(error.message);
     }